@sanity/themer 0.5.0 → 0.6.1

package/dist/tool.js

@@ -1,16 +1,17 @@
+import "@sanity/themer/bundle.css";
 import { a as DEFAULT_BACKGROUND, c as resolveThemeOptions, d as hslToHex, f as relativeLuminance, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette, s as deriveTextColor, t as presets, u as hexToHsl } from "./presets-CqBgS3A-.js";
-import { c } from "react-compiler-runtime";
+import { c } from "react/compiler-runtime";
 import { definePlugin, useColorSchemeValue } from "sanity";
-import { Badge, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useRootTheme, useTheme_v2 } from "@sanity/ui";
+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 { createContext, useContext, useEffect, useRef, useState } from "react";
-import { assign, not, setup } from "xstate";
-import { styled } from "styled-components";
+import { Activity, ViewTransition, addTransitionType, createContext, startTransition, useContext, useEffect, useRef, useState } from "react";
+import { assign, not, setup, stateIn } from "xstate";
 import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 import { CloseIcon } from "@sanity/icons/Close";
 import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
 import { SplitVerticalIcon } from "@sanity/icons/SplitVertical";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { ResetIcon } from "@sanity/icons/Reset";
 import { TrashIcon } from "@sanity/icons/Trash";
 import { SparklesIcon } from "@sanity/icons/Sparkles";
@@ -19,10 +20,14 @@ import { ImageIcon } from "@sanity/icons/Image";
 import { useToast } from "@sanity/ui/toast";
 import { AddIcon } from "@sanity/icons/Add";
 import { RestoreIcon } from "@sanity/icons/Restore";
+import { MotionConfig, Reorder, useDragControls } from "motion/react";
+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 { 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";
@@ -72,14 +77,17 @@ function sameScheme(a, b) {
 const initialThemerState = {
 	active: null,
 	custom: [],
-	removed: []
+	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. 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.
+* 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
 */
@@ -103,6 +111,8 @@ function resolveThemes(state, baseOptions) {
 		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,
@@ -219,6 +229,10 @@ const themerMachine = setup({
 			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;
@@ -254,7 +268,14 @@ const themerMachine = setup({
 			initial: "single",
 			states: {
 				single: { on: { "preview.toggle": "split" } },
-				split: { on: { "preview.toggle": "single" } }
+				split: { on: {
+					"preview.toggle": "single",
+					"sidebar.close": "single",
+					"sidebar.toggle": {
+						guard: stateIn({ sidebar: "open" }),
+						target: "single"
+					}
+				} }
 			}
 		},
 		flow: {
@@ -316,6 +337,10 @@ const themerMachine = setup({
 					type: "delete",
 					params: ({ event }) => ({ slug: event.slug })
 				} },
+				"theme.reorder": { actions: {
+					type: "reorder",
+					params: ({ event }) => ({ order: event.order })
+				} },
 				"flow.list": ".list",
 				"flow.removed": {
 					target: ".removed",
@@ -341,22 +366,29 @@ const themerMachine = setup({
 });
 /** The part of the machine context that is persisted between sessions @internal */
 function selectStoredState(snapshot) {
-	let { active, custom, removed } = snapshot.context;
+	let { active, custom, removed, order } = snapshot.context;
 	return {
 		active,
 		custom,
-		removed
+		removed,
+		order
 	};
 }
-const Root$2 = styled(Box).withConfig({
-	displayName: "Root",
-	componentId: "sc-6lslk9-0"
-})`scrollbar-gutter:stable;`, ScrollAreaInsetContext = createContext({
+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
@@ -366,11 +398,13 @@ const Root$2 = styled(Box).withConfig({
 * @internal
 */
 function ScrollArea(props) {
-	let $ = c(15), { children, padding } = props, { space } = useTheme_v2(), ref = useRef(null), [gutter, setGutter] = useState(0), t0, t1;
+	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 = () => setGutter(element.offsetWidth - element.clientWidth);
+		let measure = () => {
+			lastGutter = element.offsetWidth - element.clientWidth, setGutter(lastGutter);
+		};
 		measure();
 		let observer = new ResizeObserver(measure);
 		return observer.observe(element), () => observer.disconnect();
@@ -389,7 +423,8 @@ function ScrollArea(props) {
 		children
 	}), $[8] = children, $[9] = inset, $[10] = t7) : t7 = $[10];
 	let t8;
-	return $[11] !== padding || $[12] !== t6 || $[13] !== t7 ? (t8 = /* @__PURE__ */ jsx(Root$2, {
+	return $[11] !== padding || $[12] !== t6 || $[13] !== t7 ? (t8 = /* @__PURE__ */ jsx(Box, {
+		className: root$2,
 		flex: 1,
 		overflow: "auto",
 		padding,
@@ -398,6 +433,9 @@ function ScrollArea(props) {
 		children: t7
 	}), $[11] = padding, $[12] = t6, $[13] = t7, $[14] = t8) : t8 = $[14], t8;
 }
+function _temp$7() {
+	return lastGutter;
+}
 /**
 * 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
@@ -418,15 +456,27 @@ function ScrollAreaBleed(props) {
 		children: props.children
 	}), $[4] = props.children, $[5] = t3, $[6] = t4) : t4 = $[6], t4;
 }
-/**
-* The dark scheme covers the right side of the preview behind a diagonal cut,
-* like the "Auto" appearance preview in macOS System Settings shows both
-* schemes at once.
-*/
-const Root$1 = styled.div.withConfig({
-	displayName: "Root",
-	componentId: "sc-w55yz9-0"
-})`position:relative;aspect-ratio:16 / 9;overflow:hidden;`, LIST_ROWS = [
+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%",
@@ -447,7 +497,7 @@ function ThemePreview(props) {
 	let $ = c(11), { options } = props, t0;
 	$[0] === options ? t0 = $[1] : (t0 = buildTheme(options), $[0] = options, $[1] = t0);
 	let theme = t0, t1;
-	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(MockStudio, {}), $[2] = t1) : t1 = $[2];
+	$[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",
@@ -456,7 +506,7 @@ function ThemePreview(props) {
 		children: t1
 	}), $[3] = theme, $[4] = t2);
 	let t3;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx(MockStudio, { style: { clipPath: "polygon(58% 0, 100% 0, 100% 100%, 42% 100%)" } }), $[5] = t3) : t3 = $[5];
+	$[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",
@@ -465,178 +515,91 @@ function ThemePreview(props) {
 		children: t3
 	}), $[6] = theme, $[7] = t4);
 	let t5;
-	return $[8] !== t2 || $[9] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Root$1, {
+	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(53), { color } = useTheme_v2(), primary = color.button.default.primary.enabled, selected = color.selectable.default.selected, input = color.input.default.enabled, border = `1px solid ${color.border}`, line = _temp$4, t0;
-	$[0] !== color.bg || $[1] !== props.style ? (t0 = {
-		position: "absolute",
-		inset: 0,
-		display: "flex",
-		flexDirection: "column",
-		background: color.bg,
-		...props.style
-	}, $[0] = color.bg, $[1] = props.style, $[2] = t0) : t0 = $[2];
-	let t1;
-	$[3] === border ? t1 = $[4] : (t1 = {
-		flex: "none",
-		display: "flex",
-		alignItems: "center",
-		gap: 5,
-		height: "18%",
-		padding: "0 5%",
-		borderBottom: border
-	}, $[3] = border, $[4] = t1);
+	let $ = 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;
-	$[5] === primary.bg ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx("div", { style: {
-		flex: "none",
-		width: 8,
-		height: 8,
-		borderRadius: 2,
-		background: primary.bg
-	} }), $[5] = primary.bg, $[6] = t2);
+	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("div", { className: logo }), $[11] = t2) : t2 = $[11];
 	let t3;
-	$[7] === color.fg ? t3 = $[8] : (t3 = /* @__PURE__ */ jsx("div", { style: line("22%", color.fg) }), $[7] = color.fg, $[8] = t3);
-	let t4;
-	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("div", { style: { flex: 1 } }), $[9] = t4) : t4 = $[9];
-	let t5;
-	$[10] === color.avatar.blue.bg ? t5 = $[11] : (t5 = /* @__PURE__ */ jsx("div", { style: {
-		flex: "none",
-		width: 8,
-		height: 8,
-		borderRadius: "50%",
-		background: color.avatar.blue.bg
-	} }), $[10] = color.avatar.blue.bg, $[11] = t5);
-	let t6;
-	$[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxs("div", {
-		style: t1,
+	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsxs("div", {
+		className: navbar,
 		children: [
 			t2,
-			t3,
-			t4,
-			t5
+			/* @__PURE__ */ jsx("div", {
+				className: line.fg,
+				style: { width: "22%" }
+			}),
+			/* @__PURE__ */ jsx("div", { className: spacer }),
+			/* @__PURE__ */ jsx("div", { className: avatar })
 		]
-	}), $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16];
+	}), $[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;
-	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
-		flex: 1,
-		display: "flex",
-		minHeight: 0
-	}, $[17] = t7) : t7 = $[17];
-	let t8;
-	$[18] === border ? t8 = $[19] : (t8 = {
-		flex: "none",
-		display: "flex",
-		flexDirection: "column",
-		width: "36%",
-		borderRight: border
-	}, $[18] = border, $[19] = t8);
-	let t9;
-	$[20] !== color.muted || $[21] !== selected ? (t9 = LIST_ROWS.map((width_0, index) => {
-		let isSelected = index === 1;
-		return /* @__PURE__ */ jsx("div", {
-			style: {
-				flex: "none",
-				display: "flex",
-				alignItems: "center",
-				height: "18%",
-				padding: "0 9%",
-				background: isSelected ? selected.bg : void 0
-			},
-			children: /* @__PURE__ */ jsx("div", { style: line(width_0, isSelected ? selected.fg : color.muted.fg) })
-		}, width_0);
-	}), $[20] = color.muted, $[21] = selected, $[22] = t9) : t9 = $[22];
-	let t10;
-	$[23] !== t8 || $[24] !== t9 ? (t10 = /* @__PURE__ */ jsx("div", {
-		style: t8,
-		children: t9
-	}), $[23] = t8, $[24] = t9, $[25] = t10) : t10 = $[25];
-	let t11, t12;
-	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t11 = {
-		flex: 1,
-		display: "flex",
-		flexDirection: "column",
-		minWidth: 0
-	}, t12 = {
-		flex: 1,
-		display: "flex",
-		flexDirection: "column",
-		gap: 7,
-		padding: "9% 8% 0",
-		minHeight: 0,
-		overflow: "hidden"
-	}, $[26] = t11, $[27] = t12) : (t11 = $[26], t12 = $[27]);
-	let t13;
-	$[28] === color.fg ? t13 = $[29] : (t13 = /* @__PURE__ */ jsx("div", { style: line("45%", color.fg) }), $[28] = color.fg, $[29] = t13);
-	let t14;
-	$[30] !== color.muted || $[31] !== input ? (t14 = FIELDS.map((width_1) => /* @__PURE__ */ jsxs("div", {
-		style: {
-			flex: "none",
-			display: "flex",
-			flexDirection: "column",
-			gap: 3
-		},
-		children: [/* @__PURE__ */ jsx("div", { style: line(width_1, color.muted.fg) }), /* @__PURE__ */ jsx("div", { style: {
-			height: 12,
-			borderRadius: 3,
-			background: input.bg,
-			boxShadow: `inset 0 0 0 1px ${input.border}`
-		} })]
-	}, width_1)), $[30] = color.muted, $[31] = input, $[32] = t14) : t14 = $[32];
-	let t15;
-	$[33] !== t13 || $[34] !== t14 ? (t15 = /* @__PURE__ */ jsxs("div", {
-		style: t12,
-		children: [t13, t14]
-	}), $[33] = t13, $[34] = t14, $[35] = t15) : t15 = $[35];
-	let t16;
-	$[36] === border ? t16 = $[37] : (t16 = {
-		flex: "none",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		height: "20%",
-		padding: "0 8%",
-		borderTop: border
-	}, $[36] = border, $[37] = t16);
-	let t17;
-	$[38] === primary.bg ? t17 = $[39] : (t17 = /* @__PURE__ */ jsx("div", { style: {
-		width: "32%",
-		height: "50%",
-		borderRadius: 3,
-		background: primary.bg
-	} }), $[38] = primary.bg, $[39] = t17);
-	let t18;
-	$[40] !== t16 || $[41] !== t17 ? (t18 = /* @__PURE__ */ jsx("div", {
-		style: t16,
-		children: t17
-	}), $[40] = t16, $[41] = t17, $[42] = t18) : t18 = $[42];
-	let t19;
-	$[43] !== t15 || $[44] !== t18 ? (t19 = /* @__PURE__ */ jsxs("div", {
-		style: t11,
-		children: [t15, t18]
-	}), $[43] = t15, $[44] = t18, $[45] = t19) : t19 = $[45];
-	let t20;
-	$[46] !== t10 || $[47] !== t19 ? (t20 = /* @__PURE__ */ jsxs("div", {
-		style: t7,
-		children: [t10, t19]
-	}), $[46] = t10, $[47] = t19, $[48] = t20) : t20 = $[48];
-	let t21;
-	return $[49] !== t0 || $[50] !== t20 || $[51] !== t6 ? (t21 = /* @__PURE__ */ jsxs("div", {
-		style: t0,
-		children: [t6, t20]
-	}), $[49] = t0, $[50] = t20, $[51] = t6, $[52] = t21) : t21 = $[52], t21;
-}
-function _temp$4(width, background) {
-	return {
-		flex: "none",
-		width,
-		height: 4,
-		borderRadius: 2,
-		background
-	};
+	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);
 }
 /**
 * The floating preview card of a theme: the lo-fi studio mockup on a raised,
@@ -653,6 +616,7 @@ function ThemeThumbnail(props) {
 		children: /* @__PURE__ */ jsx(ThemePreview, { options: props.options })
 	}), $[0] = props.options, $[1] = t0), t0;
 }
+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
@@ -669,7 +633,7 @@ function RemovedThemes() {
 			gap: 3,
 			children: [
 				/* @__PURE__ */ jsx(Box, {
-					style: { opacity: .6 },
+					className: removedThumbnail,
 					children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options })
 				}),
 				/* @__PURE__ */ jsx(Text, {
@@ -1135,7 +1099,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$3) ? toast.push({
+			isCurrent() && (Object.values(palette).every(_temp$5) ? toast.push({
 				status: "warning",
 				title: "Found no colors in that image"
 			}) : onPaletteRef.current(palette, file));
@@ -1155,9 +1119,10 @@ function useImagePalette(onPalette) {
 		pickImage
 	}, $[7] = busy, $[8] = pickImage, $[9] = t5) : t5 = $[9], t5;
 }
-function _temp$3(swatch) {
+function _temp$5(swatch) {
 	return swatch === null;
 }
+var paletteGrid = "_17s80v42", tile = "_17s80v44", variantButton = "_17s80v46", variantFrame = "_17s80v47", variantRow = "_17s80v45", variantScale = "var(--_17s80v41)", variantScaleBox = "_17s80v48", variantWidth = "var(--_17s80v40)";
 /** The swatches on display: the vibrant family over the muted one */
 const TILES = [
 	"vibrant",
@@ -1166,28 +1131,7 @@ const TILES = [
 	"muted",
 	"lightMuted",
 	"darkMuted"
-], PaletteGrid = styled.div.withConfig({
-	displayName: "PaletteGrid",
-	componentId: "sc-j2tqre-0"
-})`display:grid;grid-template-columns:repeat(3,${24}px);grid-auto-rows:${24}px;gap:${4}px;&[data-with-image='true']{grid-template-columns:${52}px repeat(3,${24}px);}`, ImageTile = styled.img.withConfig({
-	displayName: "ImageTile",
-	componentId: "sc-j2tqre-1"
-})`display:block;grid-row:span 2;width:${52}px;height:${52}px;border-radius:3px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--card-border-color);`, Tile = styled.span.withConfig({
-	displayName: "Tile",
-	componentId: "sc-j2tqre-2"
-})`display:block;border-radius:3px;box-shadow:inset 0 0 0 1px var(--card-border-color);&[data-empty='true']{background:repeating-linear-gradient( -45deg,transparent 0 3px,var(--card-border-color) 3px 4px );}`, VariantRow = styled.div.withConfig({
-	displayName: "VariantRow",
-	componentId: "sc-j2tqre-3"
-})`display:flex;gap:${8}px;margin:0 -${12}px;padding:0 ${12}px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:${12}px;scrollbar-width:thin;`, VariantButton = styled.button.withConfig({
-	displayName: "VariantButton",
-	componentId: "sc-j2tqre-4"
-})`appearance:none;flex:none;display:block;box-sizing:border-box;width:calc(var(--variant-width) + 8px);margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;&:focus{outline:none;}`, VariantFrame = styled.span.withConfig({
-	displayName: "VariantFrame",
-	componentId: "sc-j2tqre-5"
-})`display:block;box-sizing:border-box;width:calc(var(--variant-width) + 8px);height:calc(var(--variant-width) * 9 / 16 + 8px);padding:4px;border-radius:7px;overflow:hidden;transition:box-shadow 100ms;${VariantButton}:hover &{box-shadow:inset 0 0 0 2px var(--card-border-color);}${VariantButton}[aria-pressed='true'] &{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color);}${VariantButton}:focus-visible &{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px;}`, VariantScale = styled.span.withConfig({
-	displayName: "VariantScale",
-	componentId: "sc-j2tqre-6"
-})`display:block;width:${144}px;transform:scale(var(--variant-scale));transform-origin:top left;`;
+];
 /**
 * Takes the colors of a theme from an image, on device: the image is read
 * into a canvas and its palette extracted right there — nothing is uploaded.
@@ -1200,13 +1144,13 @@ const TILES = [
 function ImagePaletteSection(props) {
 	let $ = c(38), { imageUrl, onPalette, onVariant, onLucky, options, palette } = props, { busy, pickImage } = useImagePalette(onPalette), [dragging, setDragging] = useState(!1), dragDepth = useRef(0), t0;
 	$[0] !== options || $[1] !== palette ? (t0 = palette ? currentImageVariant(options, palette) : null, $[0] = options, $[1] = palette, $[2] = t0) : t0 = $[2];
-	let current = t0, rowRef = useRef(null), [variantWidth, setVariantWidth] = useState(58), t1;
+	let current = t0, rowRef = useRef(null), [thumbnailWidth, setThumbnailWidth] = useState(58), t1;
 	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => {
 		let row = rowRef.current;
 		if (!row) return;
 		let measure = () => {
 			let visible = row.clientWidth - 12 - 16;
-			setVariantWidth(Math.max(24, Math.floor(visible / 2.5) - 8));
+			setThumbnailWidth(Math.max(24, Math.floor(visible / 2.5) - 8));
 		};
 		measure();
 		let observer = new ResizeObserver(measure);
@@ -1224,6 +1168,7 @@ function ImagePaletteSection(props) {
 		let t4;
 		$[7] !== options || $[8] !== palette ? (t4 = IMAGE_PALETTE_VARIANTS.flatMap((variant) => palette[variant] === null ? [] : [{
 			variant,
+			title: IMAGE_PALETTE_TITLES[variant],
 			options: applyImagePalette(options, palette, variant)
 		}]), $[7] = options, $[8] = palette, $[9] = t4) : t4 = $[9], t3 = t4;
 	}
@@ -1263,11 +1208,13 @@ function ImagePaletteSection(props) {
 		children: [t8, t9]
 	}), $[19] = t9, $[20] = t10);
 	let t11;
-	$[21] !== busy || $[22] !== current || $[23] !== imageUrl || $[24] !== onLucky || $[25] !== onVariant || $[26] !== palette || $[27] !== pickImage || $[28] !== variantWidth || $[29] !== variants ? (t11 = palette ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs(PaletteGrid, {
+	$[21] !== busy || $[22] !== current || $[23] !== imageUrl || $[24] !== onLucky || $[25] !== onVariant || $[26] !== palette || $[27] !== pickImage || $[28] !== thumbnailWidth || $[29] !== variants ? (t11 = palette ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: paletteGrid,
 			"data-with-image": imageUrl !== void 0,
-			children: [imageUrl && /* @__PURE__ */ jsx(ImageTile, {
+			children: [imageUrl && /* @__PURE__ */ jsx("img", {
 				alt: "",
+				className: "_17s80v43",
 				src: imageUrl
 			}), TILES.map((key) => {
 				let hex = palette[key], title = IMAGE_PALETTE_TITLES[key];
@@ -1279,7 +1226,8 @@ function ImagePaletteSection(props) {
 					}),
 					placement: "bottom",
 					portal: !0,
-					children: /* @__PURE__ */ jsx(Tile, {
+					children: /* @__PURE__ */ jsx("span", {
+						className: tile,
 						"data-empty": hex === null,
 						style: { background: hex ?? void 0 }
 					})
@@ -1292,26 +1240,37 @@ function ImagePaletteSection(props) {
 				muted: !0,
 				size: 0,
 				children: "Pick the swatch to build the theme around"
-			}), /* @__PURE__ */ jsx(VariantRow, {
+			}), /* @__PURE__ */ jsx("div", {
+				className: variantRow,
 				ref: rowRef,
-				style: {
-					"--variant-width": `${variantWidth}px`,
-					"--variant-scale": variantWidth / 144
-				},
+				style: assignInlineVars({
+					[variantWidth]: `${thumbnailWidth}px`,
+					[variantScale]: String(thumbnailWidth / 144)
+				}),
 				children: variants.map((t12) => {
-					let { variant: variant_0, options: variantOptions } = t12;
-					return /* @__PURE__ */ jsxs(VariantButton, {
+					let { variant: variant_0, title: title_0, options: variantOptions } = t12;
+					return /* @__PURE__ */ jsxs("button", {
 						"aria-pressed": variant_0 === current,
+						className: variantButton,
 						onClick: () => onVariant(variant_0),
 						type: "button",
-						children: [/* @__PURE__ */ jsx(VariantFrame, { children: /* @__PURE__ */ jsx(VariantScale, { children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: variantOptions }) }) }), /* @__PURE__ */ jsx(Box, {
+						children: [/* @__PURE__ */ jsx("span", {
+							className: variantFrame,
+							children: /* @__PURE__ */ jsx("span", {
+								className: variantScaleBox,
+								children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: variantOptions })
+							})
+						}), /* @__PURE__ */ jsx(Box, {
+							as: "span",
+							display: "block",
 							paddingTop: 1,
 							children: /* @__PURE__ */ jsx(Text, {
 								align: "center",
+								as: "span",
 								size: 0,
 								textOverflow: "ellipsis",
 								weight: variant_0 === current ? "medium" : "regular",
-								children: IMAGE_PALETTE_TITLES[variant_0]
+								children: title_0
 							})
 						})]
 					}, variant_0);
@@ -1340,7 +1299,7 @@ function ImagePaletteSection(props) {
 			tooltip: "Take the colors from an image on your device",
 			width: "fill"
 		})]
-	}), $[21] = busy, $[22] = current, $[23] = imageUrl, $[24] = onLucky, $[25] = onVariant, $[26] = palette, $[27] = pickImage, $[28] = variantWidth, $[29] = variants, $[30] = t11) : t11 = $[30];
+	}), $[21] = busy, $[22] = current, $[23] = imageUrl, $[24] = onLucky, $[25] = onVariant, $[26] = palette, $[27] = pickImage, $[28] = thumbnailWidth, $[29] = variants, $[30] = t11) : t11 = $[30];
 	let t12;
 	$[31] !== t10 || $[32] !== t11 ? (t12 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
@@ -1351,7 +1310,7 @@ function ImagePaletteSection(props) {
 		border: !0,
 		onDragEnter: t4,
 		onDragLeave: t5,
-		onDragOver: _temp$2,
+		onDragOver: _temp$4,
 		onDrop: t6,
 		padding: 3,
 		radius: 3,
@@ -1359,27 +1318,33 @@ function ImagePaletteSection(props) {
 		children: t12
 	}), $[34] = t12, $[35] = t6, $[36] = t7, $[37] = t13) : t13 = $[37], t13;
 }
-function _temp$2(event_0) {
+function _temp$4(event_0) {
 	event_0.preventDefault();
 }
+var colorRowText = "os3rj2", range = "os3rj1", swatch = "os3rj0";
 const SCHEME_TITLES = {
 	dark: "Dark mode",
 	light: "Light mode"
-}, SPLIT_HINTS = {
-	dark: "Shown on the right",
-	light: "Shown on the left"
-}, SCHEME_OPTION_KEYS = [
+};
+/**
+* Where the split preview shows a scheme: the Studio's own scheme stays next
+* 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";
+}
+const SCHEME_OPTION_KEYS = [
 	"accent",
 	"text",
 	"background",
 	"contrast"
-], Swatch = styled.input.withConfig({
-	displayName: "Swatch",
-	componentId: "sc-rahyxu-0"
-})`box-sizing:border-box;flex:none;width:33px;height:33px;padding:0;border:1px solid var(--card-border-color);border-radius:4px;background:none;cursor:pointer;&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-color-swatch{border:none;border-radius:3px;}&::-moz-color-swatch{border:none;border-radius:3px;}`, Range = styled.input.withConfig({
-	displayName: "Range",
-	componentId: "sc-rahyxu-1"
-})`display:block;width:100%;margin:0;accent-color:var(--card-focus-ring-color);`;
+];
+/**
+* `<input type="color">` paints the color into a shadow-DOM swatch that brings
+* its own border and padding, which then sits inside ours as a second border.
+* Stripping that chrome leaves the themed border as the only one.
+*/
 /**
 * The flow for editing one of the user's own themes: its title, a live
 * preview, and a card per color scheme with the accent/text/background
@@ -1390,7 +1355,7 @@ const SCHEME_TITLES = {
 * @internal
 */
 function ThemeEditor(props) {
-	let $ = c(41), { focusTitle, slug } = props, { themes, images, split, send } = useThemer(), t0;
+	let $ = c(42), { focusTitle, slug } = props, { themes, images, split, mobile, send } = useThemer(), t0;
 	if ($[0] !== slug || $[1] !== themes) {
 		let t1;
 		$[3] === slug ? t1 = $[4] : (t1 = (candidate) => candidate.slug === slug && candidate.source === "custom", $[3] = slug, $[4] = t1), t0 = themes.find(t1), $[0] = slug, $[1] = themes, $[2] = t0;
@@ -1435,7 +1400,7 @@ function ThemeEditor(props) {
 		title
 	}), $[23] = send, $[24] = slug, $[25] = t7, $[26] = t8) : (t7 = $[25], t8 = $[26]);
 	let t9;
-	return $[27] !== applyVariant || $[28] !== focusTitle || $[29] !== split || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== theme.options || $[38] !== theme.palette || $[39] !== theme.title ? (t9 = /* @__PURE__ */ jsx(ThemeEditorForm, {
+	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, {
 		focusTitle,
 		imageUrl: t2,
 		onDone: t3,
@@ -1448,11 +1413,12 @@ function ThemeEditor(props) {
 		options: theme.options,
 		palette: theme.palette,
 		split,
+		mobile,
 		title: theme.title
-	}), $[27] = applyVariant, $[28] = focusTitle, $[29] = split, $[30] = t2, $[31] = t3, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = theme.options, $[38] = theme.palette, $[39] = theme.title, $[40] = t9) : t9 = $[40], t9;
+	}), $[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;
 }
 function ThemeEditorForm(props) {
-	let $ = c(49), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, title } = props, studioScheme = useColorSchemeValue(), t0;
+	let $ = c(50), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, mobile, title } = props, studioScheme = useColorSchemeValue(), t0;
 	$[0] === options ? t0 = $[1] : (t0 = resolveThemeOptions(options), $[0] = options, $[1] = t0);
 	let resolved = t0, t1;
 	$[2] === options ? t1 = $[3] : (t1 = buildPalette(options), $[2] = options, $[3] = t1);
@@ -1476,7 +1442,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$1 : void 0, t7;
+	let t6 = focusTitle ? _temp$3 : void 0, t7;
 	$[12] !== focusTitle || $[13] !== t5 || $[14] !== t6 || $[15] !== title ? (t7 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 2,
 		children: [t4, /* @__PURE__ */ jsx(TextInput, {
@@ -1499,19 +1465,20 @@ function ThemeEditorForm(props) {
 		palette
 	}), $[17] = imageUrl, $[18] = onLucky, $[19] = onPalette, $[20] = onVariant, $[21] = options, $[22] = palette, $[23] = t8) : t8 = $[23];
 	let t9;
-	$[24] !== options || $[25] !== palettes || $[26] !== patchScheme || $[27] !== resolved || $[28] !== split || $[29] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
+	$[24] !== mobile || $[25] !== options || $[26] !== palettes || $[27] !== patchScheme || $[28] !== resolved || $[29] !== split || $[30] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
 		active: split || scheme_0 === studioScheme,
 		onChange: (changes_0) => patchScheme(scheme_0, changes_0),
 		options: options[scheme_0] ?? {},
 		palette: palettes[scheme_0],
 		resolved: resolved[scheme_0],
 		scheme: scheme_0,
-		split
-	}, scheme_0)), $[24] = options, $[25] = palettes, $[26] = patchScheme, $[27] = resolved, $[28] = split, $[29] = studioScheme, $[30] = t9) : t9 = $[30];
+		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];
 	let t10;
-	$[31] === t9 ? t10 = $[32] : (t10 = /* @__PURE__ */ jsx(ScrollAreaBleed, { children: t9 }), $[31] = t9, $[32] = t10);
+	$[32] === t9 ? t10 = $[33] : (t10 = /* @__PURE__ */ jsx(ScrollAreaBleed, { children: t9 }), $[32] = t9, $[33] = t10);
 	let t11;
-	$[33] !== t10 || $[34] !== t3 || $[35] !== t7 || $[36] !== t8 ? (t11 = /* @__PURE__ */ jsx(ScrollArea, {
+	$[34] !== t10 || $[35] !== t3 || $[36] !== t7 || $[37] !== t8 ? (t11 = /* @__PURE__ */ jsx(ScrollArea, {
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: 4,
@@ -1522,26 +1489,26 @@ function ThemeEditorForm(props) {
 				t10
 			]
 		})
-	}), $[33] = t10, $[34] = t3, $[35] = t7, $[36] = t8, $[37] = t11) : t11 = $[37];
+	}), $[34] = t10, $[35] = t3, $[36] = t7, $[37] = t8, $[38] = t11) : t11 = $[38];
 	let t12;
-	$[38] === onRemove ? t12 = $[39] : (t12 = /* @__PURE__ */ jsx(TooltipButton, {
+	$[39] === onRemove ? t12 = $[40] : (t12 = /* @__PURE__ */ jsx(TooltipButton, {
 		icon: TrashIcon,
 		mode: "ghost",
 		onClick: onRemove,
 		text: "Remove",
 		tone: "critical",
 		tooltip: "Remove the theme — it can be restored until it is deleted"
-	}), $[38] = onRemove, $[39] = t12);
+	}), $[39] = onRemove, $[40] = t12);
 	let t13;
-	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[40] = t13) : t13 = $[40];
+	$[41] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[41] = t13) : t13 = $[41];
 	let t14;
-	$[41] === onDone ? t14 = $[42] : (t14 = /* @__PURE__ */ jsx(Button, {
+	$[42] === onDone ? t14 = $[43] : (t14 = /* @__PURE__ */ jsx(Button, {
 		mode: "ghost",
 		onClick: onDone,
 		text: "Done"
-	}), $[41] = onDone, $[42] = t14);
+	}), $[42] = onDone, $[43] = t14);
 	let t15;
-	$[43] !== t12 || $[44] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
+	$[44] !== t12 || $[45] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
 		borderTop: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
@@ -1552,11 +1519,11 @@ function ThemeEditorForm(props) {
 				t14
 			]
 		})
-	}), $[43] = t12, $[44] = t14, $[45] = t15) : t15 = $[45];
+	}), $[44] = t12, $[45] = t14, $[46] = t15) : t15 = $[46];
 	let t16;
-	return $[46] !== t11 || $[47] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t15] }), $[46] = t11, $[47] = t15, $[48] = t16) : t16 = $[48], t16;
+	return $[47] !== t11 || $[48] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t15] }), $[47] = t11, $[48] = t15, $[49] = t16) : t16 = $[49], t16;
 }
-function _temp$1(event_0) {
+function _temp$3(event_0) {
 	return event_0.currentTarget.select();
 }
 /**
@@ -1568,7 +1535,7 @@ function _temp$1(event_0) {
 * active, in the split preview.
 */
 function SchemeCard(props) {
-	let $ = c(66), { active, onChange, options, palette, resolved, scheme, split } = props, name = SCHEME_TITLES[scheme], t0;
+	let $ = c(66), { active, onChange, options, palette, resolved, scheme, split, splitHint } = props, name = SCHEME_TITLES[scheme], t0;
 	$[0] === name ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		children: /* @__PURE__ */ jsx(Text, {
@@ -1589,7 +1556,7 @@ function SchemeCard(props) {
 		gap: 2,
 		children: [t0, t1]
 	}), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6];
-	let t3 = split ? SPLIT_HINTS[scheme] : active ? "Shown in the Studio right now" : `Shown once the Studio appearance is ${scheme}`, t4;
+	let t3 = split ? splitHint : active ? "Shown in the Studio right now" : `Shown once the Studio appearance is ${scheme}`, t4;
 	$[7] === t3 ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 0,
@@ -1667,8 +1634,9 @@ function SchemeCard(props) {
 	let t27 = `${name} contrast`, t28;
 	$[50] === onChange ? t28 = $[51] : (t28 = (event) => onChange({ contrast: Number(event.currentTarget.value) }), $[50] = onChange, $[51] = t28);
 	let t29;
-	$[52] !== resolved.contrast || $[53] !== t27 || $[54] !== t28 ? (t29 = /* @__PURE__ */ jsx(Range, {
+	$[52] !== resolved.contrast || $[53] !== t27 || $[54] !== t28 ? (t29 = /* @__PURE__ */ jsx("input", {
 		"aria-label": t27,
+		className: range,
 		max: 100,
 		min: 15,
 		onChange: t28,
@@ -1709,92 +1677,120 @@ function SchemeCard(props) {
 }
 /** One color of a scheme: a swatch with its value and an optional reset button */
 function ColorRow(props) {
-	let $ = c(24), { adjusted, auto, autoLabel: t0, label, onChange, onClear, title, value } = props, autoLabel = t0 === void 0 ? "auto" : t0, t1;
+	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(Swatch, {
+	$[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] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { minWidth: 0 }, $[6] = t3) : t3 = $[6];
-	let t4;
-	$[7] === title ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
+	$[6] === title ? t3 = $[7] : (t3 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		children: title
-	}), $[7] = title, $[8] = t4);
-	let t5 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t6 = auto ? ` · ${autoLabel}` : "", t7;
-	$[9] !== t5 || $[10] !== t6 || $[11] !== value ? (t7 = /* @__PURE__ */ jsxs(Text, {
+	}), $[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,
-			t5,
-			t6
+			t4,
+			t5
 		]
-	}), $[9] = t5, $[10] = t6, $[11] = value, $[12] = t7) : t7 = $[12];
-	let t8;
-	$[13] !== t4 || $[14] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Stack, {
+	}), $[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,
-		style: t3,
-		children: [t4, t7]
-	}), $[13] = t4, $[14] = t7, $[15] = t8) : t8 = $[15];
-	let t9;
-	$[16] !== auto || $[17] !== autoLabel || $[18] !== onClear ? (t9 = onClear && !auto && /* @__PURE__ */ jsx(TooltipButton, {
+		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}`
-	}), $[16] = auto, $[17] = autoLabel, $[18] = onClear, $[19] = t9) : t9 = $[19];
-	let t10;
-	return $[20] !== t2 || $[21] !== t8 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, {
+	}), $[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,
-			t8,
-			t9
+			t7,
+			t8
 		]
-	}), $[20] = t2, $[21] = t8, $[22] = t9, $[23] = t10) : t10 = $[23], t10;
-}
-const Root = styled.div.withConfig({
-	displayName: "Root",
-	componentId: "sc-krwbzw-0"
-})`position:relative;`, PickButton = styled.button.withConfig({
-	displayName: "PickButton",
-	componentId: "sc-krwbzw-1"
-})`appearance:none;display:block;box-sizing:border-box;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;&:focus{outline:none;}`, Frame$1 = styled.span.withConfig({
-	displayName: "Frame",
-	componentId: "sc-krwbzw-2"
-})`display:block;padding:4px;border-radius:10px;transition:box-shadow 100ms;${PickButton}:hover &{box-shadow:inset 0 0 0 2px var(--card-border-color);}${PickButton}[aria-pressed='true'] &{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color);}${PickButton}:focus-visible &{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px;}`, MenuSlot = styled.div.withConfig({
-	displayName: "MenuSlot",
-	componentId: "sc-krwbzw-3"
-})`position:absolute;top:10px;right:10px;opacity:0;transition:opacity 100ms;${Root}:hover &,${Root}:focus-within &,&[data-visible='true']{opacity:1;}`;
+	}), $[19] = t2, $[20] = t7, $[21] = t8, $[22] = t9) : t9 = $[22], t9;
+}
+var frame$1 = "_1wsn7882", menuCard = "_1wsn7884", menuSlot = "_1wsn7883", pickButton = "_1wsn7881", root = "_1wsn7880";
+/**
+* Scrolls the applied theme's card into view when it is not already, as a
+* ref: the list scrolls to it as it mounts — coming back from the editor or
+* the removed themes — and when another theme gets applied
+*/
+function scrollRefIntoViewIfNeeded(node) {
+	node && scrollIntoView(node, {
+		block: "nearest",
+		scrollMode: "if-needed"
+	});
+}
 /**
 * One theme in the list: the floating preview with the title below it, like
 * an appearance option in macOS System Settings. Clicking it applies the
-* theme to the whole Studio; its menu holds the edit, duplicate and remove
-* flows that apply to the theme.
+* theme to the whole Studio, dragging it moves the theme to another place in
+* the list; its menu holds the move, edit, duplicate and remove flows that
+* apply to the theme.
 *
 * @internal
 */
 function ThemeCard(props) {
-	let $ = c(52), { active, theme } = props, { send } = useThemer(), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), t0;
+	let $ = c(81), { active, theme } = props, { themes, send } = useThemer(), { 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] !== send || $[3] !== theme.slug ? (t1 = () => send({
-		type: "theme.pick",
-		slug: theme.slug
-	}), $[2] = send, $[3] = theme.slug, $[4] = t1) : t1 = $[4];
-	let t2;
-	$[5] === theme.options ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(Frame$1, { children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options }) }), $[5] = theme.options, $[6] = t2);
-	let t3 = active ? "medium" : "regular", t4;
-	$[7] !== t3 || $[8] !== title ? (t4 = /* @__PURE__ */ jsx(Box, {
+	$[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);
+		order.splice(to, 0, ...order.splice(index, 1)), 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 = () => {
+		requestAnimationFrame(() => {
+			dragged.current = !1;
+		});
+	}, t4 = () => {
+		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({
+			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", {
+		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, {
 		as: "span",
 		display: "block",
 		paddingTop: 2,
@@ -1804,55 +1800,75 @@ function ThemeCard(props) {
 			as: "span",
 			size: 1,
 			textOverflow: "ellipsis",
-			weight: t3,
+			weight: t10,
 			children: title
 		})
-	}), $[7] = t3, $[8] = title, $[9] = t4) : t4 = $[9];
-	let t5;
-	$[10] !== active || $[11] !== t1 || $[12] !== t2 || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsxs(PickButton, {
+	}), $[18] = t10, $[19] = title, $[20] = t11) : t11 = $[20];
+	let t12;
+	$[21] !== active || $[22] !== t11 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 ? (t12 = /* @__PURE__ */ jsxs("button", {
 		"aria-pressed": active,
-		onClick: t1,
+		className: pickButton,
+		onClick: t7,
+		onPointerDown: t8,
 		type: "button",
-		children: [t2, t4]
-	}), $[10] = active, $[11] = t1, $[12] = t2, $[13] = t4, $[14] = t5) : t5 = $[14];
-	let t6;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsx(Text, {
+		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, {
 		size: 1,
 		children: "Show more"
-	}), $[15] = t6) : t6 = $[15];
-	let t7;
-	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t7 = { display: "inline-block" }, $[16] = t7) : t7 = $[16];
-	let t8 = `Show more for ${title}`, t9;
-	$[17] === t8 ? t9 = $[18] : (t9 = /* @__PURE__ */ jsx(Button, {
-		"aria-label": t8,
+	}), $[27] = t13) : t13 = $[27];
+	let t14 = `Show more for ${title}`, t15;
+	$[28] === t14 ? t15 = $[29] : (t15 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": t14,
 		fontSize: 1,
 		icon: EllipsisHorizontalIcon,
 		mode: "ghost",
 		padding: 1,
 		radius: 2
-	}), $[17] = t8, $[18] = t9);
-	let t10 = `themer-theme-${theme.slug}`, t11;
-	$[19] !== send || $[20] !== theme.slug || $[21] !== theme.source ? (t11 = theme.source === "custom" && /* @__PURE__ */ jsx(MenuItem, {
+	}), $[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];
+	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, {
 		icon: EditIcon,
 		onClick: () => send({
 			type: "theme.edit",
 			slug: theme.slug
 		}),
 		text: "Edit"
-	}), $[19] = send, $[20] = theme.slug, $[21] = theme.source, $[22] = t11) : t11 = $[22];
-	let t12;
-	$[23] !== send || $[24] !== theme.slug ? (t12 = () => send({
+	}), $[43] = send, $[44] = theme.slug, $[45] = theme.source, $[46] = t24) : t24 = $[46];
+	let t25;
+	$[47] !== send || $[48] !== theme.slug ? (t25 = () => send({
 		type: "theme.duplicate",
 		slug: theme.slug
-	}), $[23] = send, $[24] = theme.slug, $[25] = t12) : t12 = $[25];
-	let t13 = theme.source === "custom" ? "Duplicate" : "Duplicate to edit", t14;
-	$[26] !== t12 || $[27] !== t13 ? (t14 = /* @__PURE__ */ jsx(MenuItem, {
+	}), $[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, {
 		icon: CopyIcon,
-		onClick: t12,
-		text: t13
-	}), $[26] = t12, $[27] = t13, $[28] = t14) : t14 = $[28];
-	let t15;
-	$[29] !== send || $[30] !== theme.slug || $[31] !== theme.source ? (t15 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
+		onClick: t25,
+		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, {
 		icon: TrashIcon,
 		onClick: () => send({
 			type: "theme.remove",
@@ -1860,59 +1876,82 @@ function ThemeCard(props) {
 		}),
 		text: "Remove",
 		tone: "critical"
-	})] }), $[29] = send, $[30] = theme.slug, $[31] = theme.source, $[32] = t15) : t15 = $[32];
-	let t16;
-	$[33] !== t11 || $[34] !== t14 || $[35] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Menu, { children: [
-		t11,
-		t14,
-		t15
-	] }), $[33] = t11, $[34] = t14, $[35] = t15, $[36] = t16) : t16 = $[36];
-	let t17, t18;
-	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t17 = () => setMenuOpen(!1), t18 = () => setMenuOpen(!0), $[37] = t17, $[38] = t18) : (t17 = $[37], t18 = $[38]);
-	let t19;
-	$[39] === scheme ? t19 = $[40] : (t19 = {
+	})] }), $[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: [
+		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 = {
 		animate: !0,
 		placement: "bottom-end",
 		portal: !0,
 		scheme
-	}, $[39] = scheme, $[40] = t19);
-	let t20;
-	$[41] !== t10 || $[42] !== t16 || $[43] !== t19 || $[44] !== t9 ? (t20 = /* @__PURE__ */ jsx(Tooltip, {
+	}, $[65] = scheme, $[66] = t32);
+	let t33;
+	$[67] !== t15 || $[68] !== t16 || $[69] !== t29 || $[70] !== t32 ? (t33 = /* @__PURE__ */ jsx(Tooltip, {
 		animate: !0,
-		content: t6,
+		content: t13,
 		placement: "bottom",
 		portal: !0,
 		children: /* @__PURE__ */ jsx(Card, {
+			className: menuCard,
 			radius: 2,
 			scheme: "dark",
-			style: t7,
 			children: /* @__PURE__ */ jsx(MenuButton, {
-				button: t9,
-				id: t10,
-				menu: t16,
-				onClose: t17,
-				onOpen: t18,
-				popover: t19
+				button: t15,
+				id: t16,
+				menu: t29,
+				onClose: t30,
+				onOpen: t31,
+				popover: t32
 			})
 		})
-	}), $[41] = t10, $[42] = t16, $[43] = t19, $[44] = t9, $[45] = t20) : t20 = $[45];
-	let t21;
-	$[46] !== menuOpen || $[47] !== t20 ? (t21 = /* @__PURE__ */ jsx(MenuSlot, {
+	}), $[67] = t15, $[68] = t16, $[69] = t29, $[70] = t32, $[71] = t33) : t33 = $[71];
+	let t34;
+	$[72] !== menuOpen || $[73] !== t33 ? (t34 = /* @__PURE__ */ jsx("div", {
+		className: menuSlot,
 		"data-visible": menuOpen,
-		children: t20
-	}), $[46] = menuOpen, $[47] = t20, $[48] = t21) : t21 = $[48];
-	let t22;
-	return $[49] !== t21 || $[50] !== t5 ? (t22 = /* @__PURE__ */ jsxs(Root, { children: [t5, t21] }), $[49] = t21, $[50] = t5, $[51] = t22) : t22 = $[51], t22;
-}
+		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, {
+		as: "div",
+		className: root,
+		dragControls,
+		dragListener: !1,
+		onDragEnd: t3,
+		onDragStart: t4,
+		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;
+}
+function _temp$2(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: one column of theme cards — the configured
-* theme, the presets and the user's own themes — with the entry points to
-* the add and restore flows below.
+* 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.
 *
 * @internal
 */
 function ThemeList() {
-	let $ = c(24), { themes, removed, active, send } = useThemer(), t0;
+	let $ = c(32), { themes, removed, active, send } = useThemer(), t0;
 	$[0] === send ? t0 = $[1] : (t0 = (palette, file) => send({
 		type: "theme.add",
 		title: titleFromFileName(file.name),
@@ -1921,31 +1960,49 @@ function ThemeList() {
 		imageUrl: URL.createObjectURL(file)
 	}), $[0] = send, $[1] = t0);
 	let { busy, pickImage } = useImagePalette(t0), t1;
-	if ($[2] !== active || $[3] !== themes) {
-		let t2;
-		$[5] === active ? t2 = $[6] : (t2 = (theme) => /* @__PURE__ */ jsx(ThemeCard, {
-			active: theme.slug === active.slug,
-			theme
-		}, theme.slug), $[5] = active, $[6] = t2), t1 = themes.map(t2), $[2] = active, $[3] = themes, $[4] = t1;
-	} else t1 = $[4];
+	$[2] === send ? t1 = $[3] : (t1 = (order) => send({
+		type: "theme.reorder",
+		order
+	}), $[2] = send, $[3] = t1);
 	let t2;
-	$[7] !== removed.length || $[8] !== send ? (t2 = removed.length > 0 && /* @__PURE__ */ jsx(Button, {
+	$[4] === themes ? t2 = $[5] : (t2 = themes.map(_temp$1), $[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, {
 		icon: RestoreIcon,
 		mode: "bleed",
 		onClick: () => send({ type: "flow.removed" }),
 		text: `Show removed (${removed.length})`,
 		width: "fill"
-	}), $[7] = removed.length, $[8] = send, $[9] = t2) : t2 = $[9];
-	let t3;
-	$[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsx(ScrollArea, {
+	}), $[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: [t1, t2]
+			children: [t4, t5]
 		})
-	}), $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12];
-	let t4;
-	$[13] === send ? t4 = $[14] : (t4 = /* @__PURE__ */ jsx(Box, {
+	}), $[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,
@@ -1955,25 +2012,28 @@ function ThemeList() {
 			tooltip: "Add a theme based on the applied one",
 			width: "fill"
 		})
-	}), $[13] = send, $[14] = t4);
-	let t5;
-	$[15] !== busy || $[16] !== pickImage ? (t5 = /* @__PURE__ */ jsx(ImageFileButton, {
+	}), $[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"
-	}), $[15] = busy, $[16] = pickImage, $[17] = t5) : t5 = $[17];
-	let t6;
-	$[18] !== t4 || $[19] !== t5 ? (t6 = /* @__PURE__ */ jsx(Card, {
+	}), $[23] = busy, $[24] = pickImage, $[25] = t8) : t8 = $[25];
+	let t9;
+	$[26] !== t7 || $[27] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, {
 		borderTop: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			gap: 2,
-			children: [t4, t5]
+			children: [t7, t8]
 		})
-	}), $[18] = t4, $[19] = t5, $[20] = t6) : t6 = $[20];
-	let t7;
-	return $[21] !== t3 || $[22] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t6] }), $[21] = t3, $[22] = t6, $[23] = t7) : t7 = $[23], t7;
+	}), $[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;
+}
+function _temp$1(theme) {
+	return theme.slug;
 }
 /**
 * Serializes theme options into the `buildTheme` call to paste into
@@ -2096,6 +2156,7 @@ function ThemeSnippetDialog(props) {
 		children: t9
 	}), $[19] = onClose, $[20] = t2, $[21] = t9, $[22] = t10) : t10 = $[22], t10;
 }
+var title = "c2pqej0";
 const VIEW_TITLES = {
 	list: "Themer",
 	edit: "Edit theme",
@@ -2110,32 +2171,29 @@ const VIEW_TITLES = {
 * @internal
 */
 function ThemerSidebar() {
-	let $ = c(41), { active, split, view, send } = useThemer(), [snippetOpen, setSnippetOpen] = useState(!1), inList = view.name === "list", t0;
-	$[0] !== inList || $[1] !== send ? (t0 = !inList && /* @__PURE__ */ jsx(TooltipButton, {
+	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"
-	}), $[0] = inList, $[1] = send, $[2] = t0) : t0 = $[2];
-	let t1 = +!!inList, t2;
-	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = { minWidth: 0 }, $[3] = t2) : t2 = $[3];
-	let t3 = VIEW_TITLES[view.name], t4;
-	$[4] === t3 ? t4 = $[5] : (t4 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		textOverflow: "ellipsis",
-		weight: "semibold",
-		children: t3
-	}), $[4] = t3, $[5] = t4);
-	let t5;
-	$[6] !== t1 || $[7] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, {
+	}), $[2] = inList, $[3] = send, $[4] = t1) : t1 = $[4];
+	let t2 = VIEW_TITLES[view.name], t3;
+	$[5] === t2 ? t3 = $[6] : (t3 = /* @__PURE__ */ jsx(Box, {
+		className: title,
 		flex: 1,
-		paddingLeft: t1,
-		style: t2,
-		children: t4
-	}), $[6] = t1, $[7] = t4, $[8] = t5) : t5 = $[8];
-	let t6;
-	$[9] !== send || $[10] !== split || $[11] !== view.name ? (t6 = view.name !== "removed" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipButton, {
+		children: /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			textOverflow: "ellipsis",
+			weight: "semibold",
+			children: t2
+		})
+	}), $[5] = t2, $[6] = t3);
+	let t4;
+	$[7] !== send || $[8] !== split || $[9] !== view.name ? (t4 = view.name !== "removed" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipButton, {
 		"aria-pressed": split,
 		icon: SplitVerticalIcon,
 		mode: "bleed",
@@ -2149,66 +2207,69 @@ function ThemerSidebar() {
 		onClick: () => setSnippetOpen(!0),
 		padding: 2,
 		tooltip: "Show the code for the applied theme"
-	})] }), $[9] = send, $[10] = split, $[11] = view.name, $[12] = t6) : t6 = $[12];
-	let t7;
-	$[13] === send ? t7 = $[14] : (t7 = /* @__PURE__ */ jsx(TooltipButton, {
+	})] }), $[7] = send, $[8] = split, $[9] = view.name, $[10] = t4) : t4 = $[10];
+	let t5;
+	$[11] === send ? t5 = $[12] : (t5 = /* @__PURE__ */ jsx(TooltipButton, {
 		icon: CloseIcon,
 		mode: "bleed",
 		onClick: () => send({ type: "sidebar.close" }),
 		padding: 2,
 		tooltip: "Close themer"
-	}), $[13] = send, $[14] = t7);
+	}), $[11] = send, $[12] = t5);
+	let t6;
+	$[13] !== t4 || $[14] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Flex, { children: [t4, t5] }), $[13] = t4, $[14] = t5, $[15] = t6) : t6 = $[15];
+	let t7;
+	$[16] !== t1 || $[17] !== t3 || $[18] !== 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];
 	let t8;
-	$[15] !== t6 || $[16] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Flex, { children: [t6, t7] }), $[15] = t6, $[16] = t7, $[17] = t8) : t8 = $[17];
+	$[20] !== t0 || $[21] !== t7 ? (t8 = /* @__PURE__ */ jsx(Card, {
+		borderBottom: !0,
+		padding: 3,
+		sizing: "border",
+		style: t0,
+		children: t7
+	}), $[20] = t0, $[21] = t7, $[22] = t8) : t8 = $[22];
 	let t9;
-	$[18] !== t0 || $[19] !== t5 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, {
-		padding: 2,
-		children: /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: 1,
-			children: [
-				t0,
-				t5,
-				t8
-			]
-		})
-	}), $[18] = t0, $[19] = t5, $[20] = t8, $[21] = t9) : t9 = $[21];
+	$[23] === view.name ? t9 = $[24] : (t9 = view.name === "list" && /* @__PURE__ */ jsx(ThemeList, {}), $[23] = view.name, $[24] = t9);
 	let t10;
-	$[22] === view.name ? t10 = $[23] : (t10 = view.name === "list" && /* @__PURE__ */ jsx(ThemeList, {}), $[22] = view.name, $[23] = t10);
-	let t11;
-	$[24] !== view.focusTitle || $[25] !== view.name || $[26] !== view.slug ? (t11 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
+	$[25] !== view.focusTitle || $[26] !== view.name || $[27] !== view.slug ? (t10 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
 		focusTitle: view.focusTitle,
 		slug: view.slug
-	}), $[24] = view.focusTitle, $[25] = view.name, $[26] = view.slug, $[27] = t11) : t11 = $[27];
+	}), $[25] = view.focusTitle, $[26] = view.name, $[27] = view.slug, $[28] = t10) : t10 = $[28];
+	let t11;
+	$[29] === view.name ? t11 = $[30] : (t11 = view.name === "removed" && /* @__PURE__ */ jsx(RemovedThemes, {}), $[29] = view.name, $[30] = t11);
 	let t12;
-	$[28] === view.name ? t12 = $[29] : (t12 = view.name === "removed" && /* @__PURE__ */ jsx(RemovedThemes, {}), $[28] = view.name, $[29] = t12);
-	let t13;
-	$[30] !== t10 || $[31] !== t11 || $[32] !== t12 || $[33] !== t9 ? (t13 = /* @__PURE__ */ jsxs(Flex, {
+	$[31] !== t10 || $[32] !== t11 || $[33] !== t8 || $[34] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Flex, {
 		direction: "column",
 		height: "fill",
 		children: [
+			t8,
 			t9,
 			t10,
-			t11,
-			t12
+			t11
 		]
-	}), $[30] = t10, $[31] = t11, $[32] = t12, $[33] = t9, $[34] = t13) : t13 = $[34];
-	let t14;
-	$[35] !== active || $[36] !== snippetOpen ? (t14 = snippetOpen && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
+	}), $[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
-	}), $[35] = active, $[36] = snippetOpen, $[37] = t14) : t14 = $[37];
-	let t15;
-	return $[38] !== t13 || $[39] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Card, {
+	}), $[36] = active, $[37] = snippetOpen, $[38] = t13) : t13 = $[38];
+	let t14;
+	return $[39] !== t12 || $[40] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Card, {
 		height: "fill",
-		children: [t13, t14]
-	}), $[38] = t13, $[39] = t14, $[40] = t15) : t15 = $[40], t15;
+		children: [t12, t13]
+	}), $[39] = t12, $[40] = t13, $[41] = t14) : t14 = $[41], t14;
 }
-/**
-* The narrowest the sidebar goes — and its default: narrow enough to leave the
-* studio preview as much room as possible, while the themes stack in a single
-* column of preview cards and the editor fits a swatch next to its label.
-*/
+var content = "bgn4np4", frame = "bgn4np3", sidebar = "bgn4np2";
+/** How far one arrow key press resizes the sidebar */
 const WIDTH_STORAGE_KEY = "sanityStudio:themer:width";
 function clampWidth(width) {
 	return Math.min(400, Math.max(200, Math.round(width)));
@@ -2226,25 +2287,16 @@ function writeStoredWidth(width) {
 		width === 200 ? localStorage.removeItem(WIDTH_STORAGE_KEY) : localStorage.setItem(WIDTH_STORAGE_KEY, String(width));
 	} catch {}
 }
-const Sidebar = styled(Layer).withConfig({
-	displayName: "Sidebar",
-	componentId: "sc-ryrt6y-0"
-})`flex:none;`, Frame = styled(Card).withConfig({
-	displayName: "Frame",
-	componentId: "sc-ryrt6y-1"
-})`position:relative;`, ResizeHandle = styled.div.withConfig({
-	displayName: "ResizeHandle",
-	componentId: "sc-ryrt6y-2"
-})`position:absolute;top:0;bottom:0;left:-3px;z-index:1;width:7px;cursor:col-resize;touch-action:none;&::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:3px;background:var(--card-focus-ring-color);opacity:0;transition:opacity 100ms;}&:hover::after,&:focus-visible::after,&[data-dragging='true']::after{opacity:1;}&:focus{outline:none;}`;
 /**
 * The themer sidebar, in a layer along the right edge of the Studio. Its left
 * edge drags (or arrow-keys) it wider, up to twice its default width — the
-* width sticks between sessions.
+* width sticks between sessions. As an overlay (small screens) it covers the
+* Studio edge to edge instead, with nothing to resize.
 *
 * @internal
 */
-function ResizableSidebar() {
-	let $ = c(21), [width, setWidth] = useState(readStoredWidth), [dragging, setDragging] = useState(!1), drag = useRef(null), t0, t1;
+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) => {
@@ -2273,18 +2325,17 @@ function ResizableSidebar() {
 		step !== void 0 && (event_2.preventDefault(), setWidth((current) => clampWidth(current + step)));
 	}, $[7] = t5) : t5 = $[7];
 	let handleKeyDown = t5, t6;
-	$[8] === width ? t6 = $[9] : (t6 = { width }, $[8] = width, $[9] = t6);
-	let t7;
-	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => setWidth(200), $[10] = t7) : t7 = $[10];
-	let t8;
-	$[11] !== dragging || $[12] !== handlePointerDown || $[13] !== width ? (t8 = /* @__PURE__ */ jsx(ResizeHandle, {
+	$[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", {
 		"aria-label": "Resize the themer",
+		className: "bgn4np5",
 		"aria-orientation": "vertical",
 		"aria-valuemax": 400,
 		"aria-valuemin": 200,
 		"aria-valuenow": width,
 		"data-dragging": dragging,
-		onDoubleClick: t7,
+		onDoubleClick: () => setWidth(200),
 		onKeyDown: handleKeyDown,
 		onPointerCancel: handlePointerUp,
 		onPointerDown: handlePointerDown,
@@ -2292,25 +2343,29 @@ function ResizableSidebar() {
 		onPointerUp: handlePointerUp,
 		role: "separator",
 		tabIndex: 0
-	}), $[11] = dragging, $[12] = handlePointerDown, $[13] = width, $[14] = t8) : t8 = $[14];
+	}), $[11] = dragging, $[12] = handlePointerDown, $[13] = overlay, $[14] = width, $[15] = t8) : t8 = $[15];
 	let t9;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
+	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
+		className: content,
 		height: "fill",
 		overflow: "hidden",
 		children: /* @__PURE__ */ jsx(ThemerSidebar, {})
-	}), $[15] = t9) : t9 = $[15];
+	}), $[16] = t9) : t9 = $[16];
 	let t10;
-	$[16] === t8 ? t10 = $[17] : (t10 = /* @__PURE__ */ jsxs(Frame, {
-		borderLeft: !0,
+	$[17] !== t7 || $[18] !== t8 ? (t10 = /* @__PURE__ */ jsxs(Card, {
+		borderLeft: t7,
+		className: frame,
 		height: "fill",
 		children: [t8, t9]
-	}), $[16] = t8, $[17] = t10);
+	}), $[17] = t7, $[18] = t8, $[19] = t10) : t10 = $[19];
 	let t11;
-	return $[18] !== t10 || $[19] !== t6 ? (t11 = /* @__PURE__ */ jsx(Sidebar, {
+	return $[20] !== overlay || $[21] !== t10 || $[22] !== t6 ? (t11 = /* @__PURE__ */ jsx(Layer, {
+		className: sidebar,
+		"data-overlay": overlay,
 		style: t6,
 		zOffset: 100,
 		children: t10
-	}), $[18] = t10, $[19] = t6, $[20] = t11) : t11 = $[20], t11;
+	}), $[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) {
@@ -2390,11 +2445,14 @@ function sanitizeState(value) {
 	}
 	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
+		removed,
+		order
 	};
 }
 function readLegacyState() {
@@ -2406,7 +2464,8 @@ function readLegacyState() {
 	return {
 		active: theme.slug,
 		custom: [theme],
-		removed: []
+		removed: [],
+		order: []
 	};
 }
 /**
@@ -2432,8 +2491,49 @@ function writeStoredState(state) {
 		localStorage.setItem(STORAGE_KEY, JSON.stringify(state)), localStorage.removeItem(LEGACY_STORAGE_KEY);
 	} catch {}
 }
+/**
+* The height of the Studio navbar inside the given element, in pixels — kept
+* up to date as the navbar renders, remounts and resizes, and `null` until
+* there is one. The themer's header takes this height, so that its bottom
+* border lines up with the navbar's whatever height the Studio version, its
+* breakpoint or a custom navbar gives it.
+*
+* @internal
+*/
+function useStudioNavbarHeight(ref) {
+	let $ = c(3), [height, setHeight] = useState(null), t0, t1;
+	return $[0] === ref ? (t0 = $[1], t1 = $[2]) : (t0 = () => {
+		let root = ref.current;
+		if (!root) return;
+		let navbar = null, resizeObserver = new ResizeObserver(() => {
+			navbar && setHeight(navbar.getBoundingClientRect().height);
+		}), observeNavbar = () => {
+			let next = root.querySelector("[data-testid=\"studio-navbar\"]");
+			next !== navbar && (navbar && resizeObserver.unobserve(navbar), navbar = next, navbar ? (resizeObserver.observe(navbar), setHeight(navbar.getBoundingClientRect().height)) : setHeight(null));
+		}, mutationObserver = new MutationObserver(observeNavbar);
+		return mutationObserver.observe(root, {
+			childList: !0,
+			subtree: !0
+		}), observeNavbar(), () => {
+			mutationObserver.disconnect(), resizeObserver.disconnect();
+		};
+	}, 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"
+}, splitTransitionClasses = {
+	resize: "_1yq4ar72",
+	slideIn: "_1yq4ar73",
+	slideOut: "_1yq4ar74",
+	dropIn: "_1yq4ar75",
+	dropOut: "_1yq4ar76"
+}, studioScheme = {
+	light: "_1yq4ar7a",
+	dark: "_1yq4ar7b"
+};
 function sameStoredState(a, b) {
-	return a.active === b.active && a.custom === b.custom && a.removed === b.removed;
+	return a.active === b.active && a.custom === b.custom && a.removed === b.removed && a.order === b.order;
 }
 function selectView(snapshot) {
 	let { editing } = snapshot.context;
@@ -2455,13 +2555,16 @@ function sameView(a, b) {
 * `layout` level rather than in `activeToolLayout` because the split preview
 * renders the Studio twice, and the sidebar must not come along.
 *
-* The single preview inherits the color scheme from the Studio, so it follows
-* the appearance setting (light/dark/system) like any other theme.
+* The Studio next to the sidebar always follows the appearance setting
+* (light/dark/system) and the picked theme like any other theme would. The
+* split preview adds a second copy in the opposite scheme on the far side —
+* or on top, on small screens — through React's view transitions (React
+* 19.3), styled in `ThemerLayout.css.ts`.
 *
 * @internal
 */
 function ThemerLayout(props) {
-	let $ = c(55), { baseOptions, ...layoutProps } = props, t0;
+	let $ = c(87), { baseOptions, ...layoutProps } = props, t0;
 	$[0] === baseOptions ? t0 = $[1] : (t0 = () => ({
 		baseOptions,
 		stored: readStoredState()
@@ -2472,35 +2575,65 @@ function ThemerLayout(props) {
 	$[4] === snapshot ? t2 = $[5] : (t2 = snapshot.matches({ sidebar: "open" }), $[4] = snapshot, $[5] = t2);
 	let open = t2, t3;
 	$[6] === snapshot ? t3 = $[7] : (t3 = snapshot.matches({ preview: "split" }), $[6] = snapshot, $[7] = t3);
-	let split = t3, { images } = snapshot.context, t4, t5;
-	$[8] === stored ? (t4 = $[9], t5 = $[10]) : (t4 = () => writeStoredState(stored), t5 = [stored], $[8] = stored, $[9] = t4, $[10] = t5), useEffect(t4, t5);
-	let previousImages = useRef(images), t6, t7;
-	$[11] === images ? (t6 = $[12], t7 = $[13]) : (t6 = () => {
+	let 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;
-	}, t7 = [images], $[11] = images, $[12] = t6, $[13] = t7), useEffect(t6, t7);
-	let t8, t9;
-	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => () => {
+	}, 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);
-	}, t9 = [], $[14] = t8, $[15] = t9) : (t8 = $[14], t9 = $[15]), useEffect(t8, t9);
-	let t10;
-	$[16] !== baseOptions || $[17] !== stored ? (t10 = resolveThemes(stored, baseOptions), $[16] = baseOptions, $[17] = stored, $[18] = t10) : t10 = $[18];
-	let { themes, removed, active } = t10, activeOptions = active.source === "config" ? null : active.options, t11;
-	$[19] === activeOptions ? t11 = $[20] : (t11 = activeOptions === null ? null : buildTheme(activeOptions), $[19] = activeOptions, $[20] = t11);
-	let theme = t11, scheme = useColorSchemeValue(), t12;
-	$[21] !== scheme || $[22] !== theme?.v2?.color ? (t12 = () => {
+	}, 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;
 		if (background === void 0) return;
 		let { style } = document.body, previous = style.backgroundColor;
 		return style.backgroundColor = background, () => {
 			style.backgroundColor = previous;
 		};
-	}, $[21] = scheme, $[22] = theme?.v2?.color, $[23] = t12) : t12 = $[23];
-	let t13;
-	$[24] !== scheme || $[25] !== theme ? (t13 = [scheme, theme], $[24] = scheme, $[25] = theme, $[26] = t13) : t13 = $[26], useEffect(t12, t13);
-	let t14;
-	$[27] !== active || $[28] !== baseOptions || $[29] !== images || $[30] !== open || $[31] !== removed || $[32] !== send || $[33] !== split || $[34] !== themes || $[35] !== view ? (t14 = {
+	}, $[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 = {
 		baseOptions,
 		themes,
 		removed,
@@ -2509,41 +2642,72 @@ function ThemerLayout(props) {
 		view,
 		open,
 		split,
+		mobile,
+		navbarHeight,
 		send
-	}, $[27] = active, $[28] = baseOptions, $[29] = images, $[30] = open, $[31] = removed, $[32] = send, $[33] = split, $[34] = themes, $[35] = view, $[36] = t14) : t14 = $[36];
-	let context = t14, studio = layoutProps.renderDefault(layoutProps), t15 = split ? "light" : void 0, t16;
-	$[37] !== studio || $[38] !== t15 || $[39] !== theme ? (t16 = /* @__PURE__ */ jsx(StudioPreview, {
-		scheme: t15,
-		theme,
-		children: studio
-	}), $[37] = studio, $[38] = t15, $[39] = theme, $[40] = t16) : t16 = $[40];
-	let t17;
-	$[41] !== split || $[42] !== studio || $[43] !== theme ? (t17 = split && /* @__PURE__ */ jsx(StudioPreview, {
-		borderLeft: !0,
-		scheme: "dark",
+	}, $[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",
+		children: /* @__PURE__ */ jsx(ViewTransition, {
+			enter: mobile ? splitTransitionClasses.dropIn : splitTransitionClasses.slideIn,
+			exit: mobile ? splitTransitionClasses.dropOut : splitTransitionClasses.slideOut,
+			update: "none",
+			children: /* @__PURE__ */ jsx(StudioPreview, {
+				borderBottom: mobile,
+				borderRight: !mobile,
+				scheme: oppositeScheme,
+				theme,
+				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, {
+		ref: studioRef,
 		theme,
 		children: studio
-	}), $[41] = split, $[42] = studio, $[43] = theme, $[44] = t17) : t17 = $[44];
-	let t18;
-	$[45] !== open || $[46] !== theme ? (t18 = open && /* @__PURE__ */ jsx(ThemeProvider, {
-		theme: theme ?? void 0,
-		children: /* @__PURE__ */ jsx(ResizableSidebar, {})
-	}), $[45] = open, $[46] = theme, $[47] = t18) : t18 = $[47];
-	let t19;
-	$[48] !== t16 || $[49] !== t17 || $[50] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Flex, {
+	}), $[64] = studio, $[65] = theme, $[66] = t24) : t24 = $[66];
+	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, {
+		className: layout,
+		direction: t21,
 		height: "fill",
 		sizing: "border",
 		children: [
-			t16,
-			t17,
-			t18
+			t22,
+			t25,
+			t30
 		]
-	}), $[48] = t16, $[49] = t17, $[50] = t18, $[51] = t19) : t19 = $[51];
-	let t20;
-	return $[52] !== context || $[53] !== t19 ? (t20 = /* @__PURE__ */ jsx(ThemerContext.Provider, {
+	}), $[79] = t21, $[80] = t22, $[81] = t25, $[82] = t30, $[83] = t31) : t31 = $[83];
+	let t32;
+	return $[84] !== context || $[85] !== t31 ? (t32 = /* @__PURE__ */ jsx(ThemerContext.Provider, {
 		value: context,
-		children: t19
-	}), $[52] = context, $[53] = t19, $[54] = t20) : t20 = $[54], t20;
+		children: t31
+	}), $[84] = context, $[85] = t31, $[86] = t32) : t32 = $[86], t32;
 }
 /**
 * One copy of the Studio, in the given color scheme — or, without one, in the
@@ -2557,17 +2721,17 @@ function ThemerLayout(props) {
 * keeps native form controls and scrollbars in step with it.
 */
 function StudioPreview(props) {
-	let $ = c(10), { borderLeft, children, scheme, theme } = props, t0 = theme ?? void 0, t1;
-	$[0] === scheme ? t1 = $[1] : (t1 = scheme ? { colorScheme: scheme } : void 0, $[0] = scheme, $[1] = t1);
-	let t2;
-	$[2] !== borderLeft || $[3] !== children || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(Card, {
-		borderLeft,
+	let $ = c(10), { borderBottom, borderRight, children, ref, scheme, theme } = props, t0 = theme ?? void 0, t1 = scheme ? studioScheme[scheme] : void 0, t2;
+	$[0] !== borderBottom || $[1] !== borderRight || $[2] !== children || $[3] !== ref || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(Card, {
+		borderBottom,
+		borderRight,
+		className: t1,
 		flex: 1,
 		height: "fill",
 		overflow: "hidden",
-		style: t1,
+		ref,
 		children
-	}), $[2] = borderLeft, $[3] = children, $[4] = t1, $[5] = t2) : t2 = $[5];
+	}), $[0] = borderBottom, $[1] = borderRight, $[2] = children, $[3] = ref, $[4] = t1, $[5] = t2) : t2 = $[5];
 	let t3;
 	return $[6] !== scheme || $[7] !== t0 || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(ThemeProvider, {
 		scheme,