@sanity/themer 0.4.0 → 0.5.0

package/dist/tool.js

@@ -1,12 +1,15 @@
 import { a as DEFAULT_BACKGROUND, c as resolveThemeOptions, d as hslToHex, f as relativeLuminance, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette, s as deriveTextColor, t as presets, u as hexToHsl } from "./presets-CqBgS3A-.js";
 import { c } from "react-compiler-runtime";
 import { definePlugin, useColorSchemeValue } from "sanity";
-import { Badge, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useTheme_v2 } from "@sanity/ui";
+import { Badge, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useRootTheme, useTheme_v2 } from "@sanity/ui";
+import { useActor, useSelector } from "@xstate/react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { assign, not, setup } from "xstate";
 import { styled } from "styled-components";
 import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 import { CloseIcon } from "@sanity/icons/Close";
 import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
+import { SplitVerticalIcon } from "@sanity/icons/SplitVertical";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ResetIcon } from "@sanity/icons/Reset";
 import { TrashIcon } from "@sanity/icons/Trash";
@@ -24,8 +27,6 @@ import { ClipboardIcon } from "@sanity/icons/Clipboard";
 import { Code } from "@sanity/ui/code";
 import { registerLanguage } from "react-refractor";
 import typescript from "refractor/typescript";
-import { useActor, useSelector } from "@xstate/react";
-import { assign, not, setup } from "xstate";
 import { ColorWheelIcon } from "@sanity/icons/ColorWheel";
 /** @internal */
 const ThemerContext = createContext(null);
@@ -35,41 +36,6 @@ function useThemer() {
 	if (!context) throw Error("useThemer must be used within the `themerTool` plugin");
 	return context;
 }
-const Root$2 = styled(Box).withConfig({
-	displayName: "Root",
-	componentId: "sc-6zqwg0-0"
-})`scrollbar-gutter:stable;`;
-/**
-* The scrolling body of a sidebar flow. It always reserves the scrollbar's
-* space, so the content does not shift when the list grows or shrinks past
-* the point where it needs to scroll — and it takes that space out of its
-* right padding, so the content stays centered rather than hugging the left.
-* With overlay scrollbars there is no gutter and the padding stays even.
-*
-* @internal
-*/
-function ScrollArea(props) {
-	let $ = c(8), { children, padding } = props, { space } = useTheme_v2(), ref = useRef(null), [gutter, setGutter] = useState(0), t0, t1;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
-		let element = ref.current;
-		if (!element) return;
-		let measure = () => setGutter(element.offsetWidth - element.clientWidth);
-		measure();
-		let observer = new ResizeObserver(measure);
-		return observer.observe(element), () => observer.disconnect();
-	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1);
-	let t2 = Math.max(0, space[padding] - gutter), t3;
-	$[2] === t2 ? t3 = $[3] : (t3 = { paddingRight: t2 }, $[2] = t2, $[3] = t3);
-	let t4;
-	return $[4] !== children || $[5] !== padding || $[6] !== t3 ? (t4 = /* @__PURE__ */ jsx(Root$2, {
-		flex: 1,
-		overflow: "auto",
-		padding,
-		ref,
-		style: t3,
-		children
-	}), $[4] = children, $[5] = padding, $[6] = t3, $[7] = t4) : t4 = $[7], t4;
-}
 /**
 * Reduces theme options to the minimal object that recreates them through
 * `buildTheme`: in each scheme the accent is dropped when it is the stock
@@ -169,6 +135,289 @@ function displayTitle(title) {
 function randomId() {
 	return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
 }
+function themesOf(context) {
+	return resolveThemes(context, context.baseOptions);
+}
+/**
+* The state of the themer tool: three parallel regions, whether the
+* `sidebar` is open, which `flow` it is in — picking a theme from the `list`,
+* `edit`ing one of the user's own themes, or restoring `removed` ones — and
+* whether the `preview` shows the Studio once (`single`) or in light and dark
+* side by side (`split`). The context carries the persisted state (the
+* applied theme, the user's themes and what was removed) alongside what the
+* flows need.
+*
+* Theme operations are handled in every flow, and the flows leave on their
+* own when they lose their subject: the editor when its theme is removed or
+* deleted, and the removed view when its last theme is restored or deleted.
+*
+* @internal
+*/
+const themerMachine = setup({
+	types: {
+		context: {},
+		events: {},
+		input: {}
+	},
+	guards: {
+		isCustomTheme: ({ context }, params) => themesOf(context).themes.some((theme) => theme.slug === params.slug && theme.source === "custom"),
+		isEditingListedTheme: ({ context }) => context.editing !== null && themesOf(context).themes.some((theme) => theme.slug === context.editing?.slug && theme.source === "custom"),
+		hasRemovedThemes: ({ context }) => themesOf(context).removed.length > 0
+	},
+	actions: {
+		pick: assign((_, params) => ({ active: params.slug === "config" ? null : params.slug })),
+		add: assign(({ context }, params) => {
+			let theme = createCustomTheme(params.title ?? "Untitled theme", params.options ?? themesOf(context).active.options, params.palette);
+			return {
+				active: theme.slug,
+				custom: [...context.custom, theme],
+				editing: {
+					slug: theme.slug,
+					focusTitle: params.title === void 0
+				},
+				images: params.imageUrl ? {
+					...context.images,
+					[theme.slug]: params.imageUrl
+				} : context.images
+			};
+		}),
+		duplicate: assign(({ context }, params) => {
+			let { themes, removed } = themesOf(context), source = [...themes, ...removed].find((theme) => theme.slug === params.slug);
+			if (!source) return {};
+			let theme = createCustomTheme(duplicateTitle(source.title), source.options, source.palette);
+			return {
+				active: theme.slug,
+				custom: [...context.custom, theme],
+				editing: {
+					slug: theme.slug,
+					focusTitle: !0
+				}
+			};
+		}),
+		startEditing: assign((_, params) => ({
+			active: params.slug,
+			editing: {
+				slug: params.slug,
+				focusTitle: !1
+			}
+		})),
+		stopEditing: assign({ editing: null }),
+		update: assign(({ context }, params) => ({
+			custom: context.custom.map((theme) => theme.slug === params.slug ? {
+				...theme,
+				title: params.title ?? theme.title,
+				options: params.options ?? theme.options,
+				...params.palette ? { palette: params.palette } : {}
+			} : theme),
+			images: params.imageUrl && context.custom.some((theme) => theme.slug === params.slug) ? {
+				...context.images,
+				[params.slug]: params.imageUrl
+			} : context.images
+		})),
+		remove: assign(({ context }, params) => params.slug === "config" || context.removed.includes(params.slug) ? {} : {
+			active: context.active === params.slug ? null : context.active,
+			removed: [...context.removed, params.slug]
+		}),
+		restore: assign(({ context }, params) => ({ removed: context.removed.filter((slug) => slug !== params.slug) })),
+		delete: assign(({ context }, params) => {
+			if (!context.custom.some((theme) => theme.slug === params.slug)) return {};
+			let { [params.slug]: _deleted, ...images } = context.images;
+			return {
+				active: context.active === params.slug ? null : context.active,
+				custom: context.custom.filter((theme) => theme.slug !== params.slug),
+				removed: context.removed.filter((slug) => slug !== params.slug),
+				images
+			};
+		})
+	}
+}).createMachine({
+	id: "themer",
+	context: ({ input }) => ({
+		...input.stored,
+		baseOptions: input.baseOptions,
+		editing: null,
+		images: {}
+	}),
+	type: "parallel",
+	states: {
+		sidebar: {
+			initial: "closed",
+			states: {
+				closed: { on: { "sidebar.toggle": "open" } },
+				open: { on: {
+					"sidebar.toggle": "closed",
+					"sidebar.close": "closed"
+				} }
+			}
+		},
+		preview: {
+			initial: "single",
+			states: {
+				single: { on: { "preview.toggle": "split" } },
+				split: { on: { "preview.toggle": "single" } }
+			}
+		},
+		flow: {
+			initial: "list",
+			on: {
+				"theme.pick": { actions: {
+					type: "pick",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"theme.add": {
+					target: ".edit",
+					actions: {
+						type: "add",
+						params: ({ event }) => ({
+							title: event.title,
+							options: event.options,
+							palette: event.palette,
+							imageUrl: event.imageUrl
+						})
+					}
+				},
+				"theme.duplicate": {
+					target: ".edit",
+					actions: {
+						type: "duplicate",
+						params: ({ event }) => ({ slug: event.slug })
+					}
+				},
+				"theme.edit": {
+					target: ".edit",
+					guard: {
+						type: "isCustomTheme",
+						params: ({ event }) => ({ slug: event.slug })
+					},
+					actions: {
+						type: "startEditing",
+						params: ({ event }) => ({ slug: event.slug })
+					}
+				},
+				"theme.update": { actions: {
+					type: "update",
+					params: ({ event }) => ({
+						slug: event.slug,
+						title: event.title,
+						options: event.options,
+						palette: event.palette,
+						imageUrl: event.imageUrl
+					})
+				} },
+				"theme.remove": { actions: {
+					type: "remove",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"theme.restore": { actions: {
+					type: "restore",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"theme.delete": { actions: {
+					type: "delete",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"flow.list": ".list",
+				"flow.removed": {
+					target: ".removed",
+					guard: "hasRemovedThemes"
+				}
+			},
+			states: {
+				list: {},
+				edit: {
+					exit: "stopEditing",
+					always: {
+						guard: not("isEditingListedTheme"),
+						target: "list"
+					}
+				},
+				removed: { always: {
+					guard: not("hasRemovedThemes"),
+					target: "list"
+				} }
+			}
+		}
+	}
+});
+/** The part of the machine context that is persisted between sessions @internal */
+function selectStoredState(snapshot) {
+	let { active, custom, removed } = snapshot.context;
+	return {
+		active,
+		custom,
+		removed
+	};
+}
+const Root$2 = styled(Box).withConfig({
+	displayName: "Root",
+	componentId: "sc-6lslk9-0"
+})`scrollbar-gutter:stable;`, ScrollAreaInsetContext = createContext({
+	left: 0,
+	right: 0,
+	bottom: 0
+});
+/**
+* The scrolling body of a sidebar flow. It always reserves the scrollbar's
+* space, so the content does not shift when the list grows or shrinks past
+* the point where it needs to scroll — and it takes that space out of its
+* right padding, so the content stays centered rather than hugging the left.
+* With overlay scrollbars there is no gutter and the padding stays even.
+*
+* @internal
+*/
+function ScrollArea(props) {
+	let $ = c(15), { children, padding } = props, { space } = useTheme_v2(), ref = useRef(null), [gutter, setGutter] = useState(0), t0, t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+		let element = ref.current;
+		if (!element) return;
+		let measure = () => setGutter(element.offsetWidth - element.clientWidth);
+		measure();
+		let observer = new ResizeObserver(measure);
+		return observer.observe(element), () => observer.disconnect();
+	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1);
+	let t2 = space[padding], t3 = Math.max(0, space[padding] - gutter), t4 = space[padding], t5;
+	$[2] !== t2 || $[3] !== t3 || $[4] !== t4 ? (t5 = {
+		left: t2,
+		right: t3,
+		bottom: t4
+	}, $[2] = t2, $[3] = t3, $[4] = t4, $[5] = t5) : t5 = $[5];
+	let inset = t5, t6;
+	$[6] === inset.right ? t6 = $[7] : (t6 = { paddingRight: inset.right }, $[6] = inset.right, $[7] = t6);
+	let t7;
+	$[8] !== children || $[9] !== inset ? (t7 = /* @__PURE__ */ jsx(ScrollAreaInsetContext.Provider, {
+		value: inset,
+		children
+	}), $[8] = children, $[9] = inset, $[10] = t7) : t7 = $[10];
+	let t8;
+	return $[11] !== padding || $[12] !== t6 || $[13] !== t7 ? (t8 = /* @__PURE__ */ jsx(Root$2, {
+		flex: 1,
+		overflow: "auto",
+		padding,
+		ref,
+		style: t6,
+		children: t7
+	}), $[11] = padding, $[12] = t6, $[13] = t7, $[14] = t8) : t8 = $[14], t8;
+}
+/**
+* Content that runs edge to edge in a scroll area — up to the scrollbar —
+* instead of sitting inside its padding. It goes last: it runs down to the
+* bottom edge too.
+*
+* @internal
+*/
+function ScrollAreaBleed(props) {
+	let $ = c(7), { left, right, bottom } = useContext(ScrollAreaInsetContext), t0 = -left, t1 = -right, t2 = -bottom, t3;
+	$[0] !== t0 || $[1] !== t1 || $[2] !== t2 ? (t3 = {
+		marginLeft: t0,
+		marginRight: t1,
+		marginBottom: t2
+	}, $[0] = t0, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3];
+	let t4;
+	return $[4] !== props.children || $[5] !== t3 ? (t4 = /* @__PURE__ */ jsx("div", {
+		style: t3,
+		children: props.children
+	}), $[4] = props.children, $[5] = t3, $[6] = t4) : t4 = $[6], t4;
+}
 /**
 * The dark scheme covers the right side of the preview behind a diagonal cut,
 * like the "Auto" appearance preview in macOS System Settings shows both
@@ -1116,6 +1365,9 @@ function _temp$2(event_0) {
 const SCHEME_TITLES = {
 	dark: "Dark mode",
 	light: "Light mode"
+}, SPLIT_HINTS = {
+	dark: "Shown on the right",
+	light: "Shown on the left"
 }, SCHEME_OPTION_KEYS = [
 	"accent",
 	"text",
@@ -1123,21 +1375,22 @@ const SCHEME_TITLES = {
 	"contrast"
 ], Swatch = styled.input.withConfig({
 	displayName: "Swatch",
-	componentId: "sc-vs5143-0"
+	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-vs5143-1"
+	componentId: "sc-rahyxu-1"
 })`display:block;width:100%;margin:0;accent-color:var(--card-focus-ring-color);`;
 /**
 * The flow for editing one of the user's own themes: its title, a live
 * preview, and a card per color scheme with the accent/text/background
 * pickers and the contrast slider of that scheme. Every change applies to the
-* whole Studio right away — in the scheme the Studio is showing.
+* whole Studio right away — in the scheme the Studio is showing, or in both
+* side by side in the split preview.
 *
 * @internal
 */
 function ThemeEditor(props) {
-	let $ = c(40), { focusTitle, slug } = props, { themes, images, send } = useThemer(), t0;
+	let $ = c(41), { focusTitle, slug } = props, { themes, images, split, send } = useThemer(), t0;
 	if ($[0] !== slug || $[1] !== themes) {
 		let t1;
 		$[3] === slug ? t1 = $[4] : (t1 = (candidate) => candidate.slug === slug && candidate.source === "custom", $[3] = slug, $[4] = t1), t0 = themes.find(t1), $[0] = slug, $[1] = themes, $[2] = t0;
@@ -1182,7 +1435,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] !== t2 || $[30] !== t3 || $[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== theme.options || $[37] !== theme.palette || $[38] !== theme.title ? (t9 = /* @__PURE__ */ jsx(ThemeEditorForm, {
+	return $[27] !== applyVariant || $[28] !== focusTitle || $[29] !== split || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== theme.options || $[38] !== theme.palette || $[39] !== theme.title ? (t9 = /* @__PURE__ */ jsx(ThemeEditorForm, {
 		focusTitle,
 		imageUrl: t2,
 		onDone: t3,
@@ -1194,11 +1447,12 @@ function ThemeEditor(props) {
 		onVariant: applyVariant,
 		options: theme.options,
 		palette: theme.palette,
+		split,
 		title: theme.title
-	}), $[27] = applyVariant, $[28] = focusTitle, $[29] = t2, $[30] = t3, $[31] = t4, $[32] = t5, $[33] = t6, $[34] = t7, $[35] = t8, $[36] = theme.options, $[37] = theme.palette, $[38] = theme.title, $[39] = t9) : t9 = $[39], t9;
+	}), $[27] = applyVariant, $[28] = focusTitle, $[29] = split, $[30] = t2, $[31] = t3, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = theme.options, $[38] = theme.palette, $[39] = theme.title, $[40] = t9) : t9 = $[40], t9;
 }
 function ThemeEditorForm(props) {
-	let $ = c(46), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, title } = props, studioScheme = useColorSchemeValue(), t0;
+	let $ = c(49), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, title } = props, studioScheme = useColorSchemeValue(), t0;
 	$[0] === options ? t0 = $[1] : (t0 = resolveThemeOptions(options), $[0] = options, $[1] = t0);
 	let resolved = t0, t1;
 	$[2] === options ? t1 = $[3] : (t1 = buildPalette(options), $[2] = options, $[3] = t1);
@@ -1245,16 +1499,19 @@ 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] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
-		active: scheme_0 === studioScheme,
+	$[24] !== options || $[25] !== palettes || $[26] !== patchScheme || $[27] !== resolved || $[28] !== split || $[29] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
+		active: split || scheme_0 === studioScheme,
 		onChange: (changes_0) => patchScheme(scheme_0, changes_0),
 		options: options[scheme_0] ?? {},
 		palette: palettes[scheme_0],
 		resolved: resolved[scheme_0],
-		scheme: scheme_0
-	}, scheme_0)), $[24] = options, $[25] = palettes, $[26] = patchScheme, $[27] = resolved, $[28] = studioScheme, $[29] = t9) : t9 = $[29];
+		scheme: scheme_0,
+		split
+	}, scheme_0)), $[24] = options, $[25] = palettes, $[26] = patchScheme, $[27] = resolved, $[28] = split, $[29] = studioScheme, $[30] = t9) : t9 = $[30];
 	let t10;
-	$[30] !== t3 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 ? (t10 = /* @__PURE__ */ jsx(ScrollArea, {
+	$[31] === t9 ? t10 = $[32] : (t10 = /* @__PURE__ */ jsx(ScrollAreaBleed, { children: t9 }), $[31] = t9, $[32] = t10);
+	let t11;
+	$[33] !== t10 || $[34] !== t3 || $[35] !== t7 || $[36] !== t8 ? (t11 = /* @__PURE__ */ jsx(ScrollArea, {
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: 4,
@@ -1262,54 +1519,56 @@ function ThemeEditorForm(props) {
 				t3,
 				t7,
 				t8,
-				t9
+				t10
 			]
 		})
-	}), $[30] = t3, $[31] = t7, $[32] = t8, $[33] = t9, $[34] = t10) : t10 = $[34];
-	let t11;
-	$[35] === onRemove ? t11 = $[36] : (t11 = /* @__PURE__ */ jsx(TooltipButton, {
+	}), $[33] = t10, $[34] = t3, $[35] = t7, $[36] = t8, $[37] = t11) : t11 = $[37];
+	let t12;
+	$[38] === onRemove ? t12 = $[39] : (t12 = /* @__PURE__ */ jsx(TooltipButton, {
 		icon: TrashIcon,
 		mode: "ghost",
 		onClick: onRemove,
 		text: "Remove",
 		tone: "critical",
 		tooltip: "Remove the theme — it can be restored until it is deleted"
-	}), $[35] = onRemove, $[36] = t11);
-	let t12;
-	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[37] = t12) : t12 = $[37];
+	}), $[38] = onRemove, $[39] = t12);
 	let t13;
-	$[38] === onDone ? t13 = $[39] : (t13 = /* @__PURE__ */ jsx(Button, {
+	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[40] = t13) : t13 = $[40];
+	let t14;
+	$[41] === onDone ? t14 = $[42] : (t14 = /* @__PURE__ */ jsx(Button, {
 		mode: "ghost",
 		onClick: onDone,
 		text: "Done"
-	}), $[38] = onDone, $[39] = t13);
-	let t14;
-	$[40] !== t11 || $[41] !== t13 ? (t14 = /* @__PURE__ */ jsx(Card, {
+	}), $[41] = onDone, $[42] = t14);
+	let t15;
+	$[43] !== t12 || $[44] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
 		borderTop: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			gap: 2,
 			children: [
-				t11,
 				t12,
-				t13
+				t13,
+				t14
 			]
 		})
-	}), $[40] = t11, $[41] = t13, $[42] = t14) : t14 = $[42];
-	let t15;
-	return $[43] !== t10 || $[44] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t14] }), $[43] = t10, $[44] = t14, $[45] = t15) : t15 = $[45], t15;
+	}), $[43] = t12, $[44] = t14, $[45] = t15) : t15 = $[45];
+	let t16;
+	return $[46] !== t11 || $[47] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t15] }), $[46] = t11, $[47] = t15, $[48] = t16) : t16 = $[48], t16;
 }
 function _temp$1(event_0) {
 	return event_0.currentTarget.select();
 }
 /**
-* The colors of one scheme, on a card painted in that scheme so that each
-* card shows the colors it edits. The scheme the Studio is showing is marked
-* as active: its changes show up in the Studio right away, the other scheme's
-* only once the appearance setting switches to it.
+* The colors of one scheme. The cards span the sidebar edge to edge, one
+* after the other with a border between them, in the sidebar's own scheme —
+* the swatches show the colors they edit. The scheme the Studio is showing is
+* marked as active: its changes show up in the Studio right away, the other
+* scheme's only once the appearance setting switches to it — or both are
+* active, in the split preview.
 */
 function SchemeCard(props) {
-	let $ = c(69), { active, onChange, options, palette, resolved, scheme } = props, name = SCHEME_TITLES[scheme], t0;
+	let $ = c(66), { active, onChange, options, palette, resolved, scheme, split } = props, name = SCHEME_TITLES[scheme], t0;
 	$[0] === name ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		children: /* @__PURE__ */ jsx(Text, {
@@ -1330,7 +1589,7 @@ function SchemeCard(props) {
 		gap: 2,
 		children: [t0, t1]
 	}), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6];
-	let t3 = active ? "Shown in the Studio right now" : `Shown once the Studio appearance is ${scheme}`, t4;
+	let t3 = split ? SPLIT_HINTS[scheme] : active ? "Shown in the Studio right now" : `Shown once the Studio appearance is ${scheme}`, t4;
 	$[7] === t3 ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
 		muted: !0,
 		size: 0,
@@ -1433,25 +1692,20 @@ function SchemeCard(props) {
 		]
 	}), $[57] = t26, $[58] = t29, $[59] = t31) : t31 = $[59];
 	let t32;
-	$[60] !== t10 || $[61] !== t15 || $[62] !== t21 || $[63] !== t31 || $[64] !== t5 ? (t32 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 4,
-		children: [
-			t5,
-			t10,
-			t15,
-			t21,
-			t31
-		]
-	}), $[60] = t10, $[61] = t15, $[62] = t21, $[63] = t31, $[64] = t5, $[65] = t32) : t32 = $[65];
-	let t33;
-	return $[66] !== scheme || $[67] !== t32 ? (t33 = /* @__PURE__ */ jsx(Card, {
-		border: !0,
+	return $[60] !== t10 || $[61] !== t15 || $[62] !== t21 || $[63] !== t31 || $[64] !== t5 ? (t32 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
 		padding: 3,
-		radius: 3,
-		scheme,
-		tone: "default",
-		children: t32
-	}), $[66] = scheme, $[67] = t32, $[68] = t33) : t33 = $[68], t33;
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [
+				t5,
+				t10,
+				t15,
+				t21,
+				t31
+			]
+		})
+	}), $[60] = t10, $[61] = t15, $[62] = t21, $[63] = t31, $[64] = t5, $[65] = t32) : t32 = $[65], t32;
 }
 /** One color of a scheme: a swatch with its value and an optional reset button */
 function ColorRow(props) {
@@ -1510,16 +1764,16 @@ function ColorRow(props) {
 }
 const Root = styled.div.withConfig({
 	displayName: "Root",
-	componentId: "sc-a1a6d4-0"
+	componentId: "sc-krwbzw-0"
 })`position:relative;`, PickButton = styled.button.withConfig({
 	displayName: "PickButton",
-	componentId: "sc-a1a6d4-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 = styled.span.withConfig({
+	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-a1a6d4-2"
+	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-a1a6d4-3"
+	componentId: "sc-krwbzw-3"
 })`position:absolute;top:10px;right:10px;opacity:0;transition:opacity 100ms;${Root}:hover &,${Root}:focus-within &,&[data-visible='true']{opacity:1;}`;
 /**
 * One theme in the list: the floating preview with the title below it, like
@@ -1530,7 +1784,7 @@ const Root = styled.div.withConfig({
 * @internal
 */
 function ThemeCard(props) {
-	let $ = c(50), { active, theme } = props, { send } = useThemer(), [menuOpen, setMenuOpen] = useState(!1), t0;
+	let $ = c(52), { active, theme } = props, { send } = useThemer(), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), t0;
 	$[0] === theme.title ? t0 = $[1] : (t0 = displayTitle(theme.title), $[0] = theme.title, $[1] = t0);
 	let title = t0, t1;
 	$[2] !== send || $[3] !== theme.slug ? (t1 = () => send({
@@ -1538,7 +1792,7 @@ function ThemeCard(props) {
 		slug: theme.slug
 	}), $[2] = send, $[3] = theme.slug, $[4] = t1) : t1 = $[4];
 	let t2;
-	$[5] === theme.options ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(Frame, { children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options }) }), $[5] = theme.options, $[6] = t2);
+	$[5] === theme.options ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(Frame$1, { children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options }) }), $[5] = theme.options, $[6] = t2);
 	let t3 = active ? "medium" : "regular", t4;
 	$[7] !== t3 || $[8] !== title ? (t4 = /* @__PURE__ */ jsx(Box, {
 		as: "span",
@@ -1613,19 +1867,24 @@ function ThemeCard(props) {
 		t14,
 		t15
 	] }), $[33] = t11, $[34] = t14, $[35] = t15, $[36] = t16) : t16 = $[36];
-	let t17, t18, t19;
-	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t17 = () => setMenuOpen(!1), t18 = () => setMenuOpen(!0), t19 = {
+	let t17, t18;
+	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t17 = () => setMenuOpen(!1), t18 = () => setMenuOpen(!0), $[37] = t17, $[38] = t18) : (t17 = $[37], t18 = $[38]);
+	let t19;
+	$[39] === scheme ? t19 = $[40] : (t19 = {
 		animate: !0,
 		placement: "bottom-end",
-		portal: !0
-	}, $[37] = t17, $[38] = t18, $[39] = t19) : (t17 = $[37], t18 = $[38], t19 = $[39]);
+		portal: !0,
+		scheme
+	}, $[39] = scheme, $[40] = t19);
 	let t20;
-	$[40] !== t10 || $[41] !== t16 || $[42] !== t9 ? (t20 = /* @__PURE__ */ jsx(Tooltip, {
+	$[41] !== t10 || $[42] !== t16 || $[43] !== t19 || $[44] !== t9 ? (t20 = /* @__PURE__ */ jsx(Tooltip, {
 		animate: !0,
 		content: t6,
 		placement: "bottom",
 		portal: !0,
-		children: /* @__PURE__ */ jsx("span", {
+		children: /* @__PURE__ */ jsx(Card, {
+			radius: 2,
+			scheme: "dark",
 			style: t7,
 			children: /* @__PURE__ */ jsx(MenuButton, {
 				button: t9,
@@ -1636,14 +1895,14 @@ function ThemeCard(props) {
 				popover: t19
 			})
 		})
-	}), $[40] = t10, $[41] = t16, $[42] = t9, $[43] = t20) : t20 = $[43];
+	}), $[41] = t10, $[42] = t16, $[43] = t19, $[44] = t9, $[45] = t20) : t20 = $[45];
 	let t21;
-	$[44] !== menuOpen || $[45] !== t20 ? (t21 = /* @__PURE__ */ jsx(MenuSlot, {
+	$[46] !== menuOpen || $[47] !== t20 ? (t21 = /* @__PURE__ */ jsx(MenuSlot, {
 		"data-visible": menuOpen,
 		children: t20
-	}), $[44] = menuOpen, $[45] = t20, $[46] = t21) : t21 = $[46];
+	}), $[46] = menuOpen, $[47] = t20, $[48] = t21) : t21 = $[48];
 	let t22;
-	return $[47] !== t21 || $[48] !== t5 ? (t22 = /* @__PURE__ */ jsxs(Root, { children: [t5, t21] }), $[47] = t21, $[48] = t5, $[49] = t22) : t22 = $[49], t22;
+	return $[49] !== t21 || $[50] !== t5 ? (t22 = /* @__PURE__ */ jsxs(Root, { children: [t5, t21] }), $[49] = t21, $[50] = t5, $[51] = t22) : t22 = $[51], t22;
 }
 /**
 * The flow for picking a theme: one column of theme cards — the configured
@@ -1843,14 +2102,15 @@ const VIEW_TITLES = {
 	removed: "Removed themes"
 };
 /**
-* The themer sidebar: a header that navigates between the flows, 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 that navigates between the flows and toggles
+* the split preview, the flow itself — picking a theme, editing one, or
+* restoring removed ones — and the dialog with the `buildTheme` snippet of
+* the applied theme.
 *
 * @internal
 */
 function ThemerSidebar() {
-	let $ = c(37), { active, view, send } = useThemer(), [snippetOpen, setSnippetOpen] = useState(!1), inList = view.name === "list", t0;
+	let $ = c(41), { active, split, view, send } = useThemer(), [snippetOpen, setSnippetOpen] = useState(!1), inList = view.name === "list", t0;
 	$[0] !== inList || $[1] !== send ? (t0 = !inList && /* @__PURE__ */ jsx(TooltipButton, {
 		icon: ArrowLeftIcon,
 		mode: "bleed",
@@ -1875,23 +2135,33 @@ function ThemerSidebar() {
 		children: t4
 	}), $[6] = t1, $[7] = t4, $[8] = t5) : t5 = $[8];
 	let t6;
-	$[9] === view.name ? t6 = $[10] : (t6 = view.name !== "removed" && /* @__PURE__ */ jsx(TooltipButton, {
+	$[9] !== send || $[10] !== split || $[11] !== view.name ? (t6 = view.name !== "removed" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipButton, {
+		"aria-pressed": split,
+		icon: SplitVerticalIcon,
+		mode: "bleed",
+		onClick: () => send({ type: "preview.toggle" }),
+		padding: 2,
+		selected: split,
+		tooltip: "Show light and dark side by side"
+	}), /* @__PURE__ */ jsx(TooltipButton, {
 		icon: CodeBlockIcon,
 		mode: "bleed",
 		onClick: () => setSnippetOpen(!0),
 		padding: 2,
 		tooltip: "Show the code for the applied theme"
-	}), $[9] = view.name, $[10] = t6);
+	})] }), $[9] = send, $[10] = split, $[11] = view.name, $[12] = t6) : t6 = $[12];
 	let t7;
-	$[11] === send ? t7 = $[12] : (t7 = /* @__PURE__ */ jsx(TooltipButton, {
+	$[13] === send ? t7 = $[14] : (t7 = /* @__PURE__ */ jsx(TooltipButton, {
 		icon: CloseIcon,
 		mode: "bleed",
 		onClick: () => send({ type: "sidebar.close" }),
 		padding: 2,
 		tooltip: "Close themer"
-	}), $[11] = send, $[12] = t7);
+	}), $[13] = send, $[14] = t7);
 	let t8;
-	$[13] !== t0 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 ? (t8 = /* @__PURE__ */ jsx(Card, {
+	$[15] !== t6 || $[16] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Flex, { children: [t6, t7] }), $[15] = t6, $[16] = t7, $[17] = t8) : t8 = $[17];
+	let t9;
+	$[18] !== t0 || $[19] !== t5 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, {
 		padding: 2,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
@@ -1899,41 +2169,40 @@ function ThemerSidebar() {
 			children: [
 				t0,
 				t5,
-				t6,
-				t7
+				t8
 			]
 		})
-	}), $[13] = t0, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8) : t8 = $[17];
-	let t9;
-	$[18] === view.name ? t9 = $[19] : (t9 = view.name === "list" && /* @__PURE__ */ jsx(ThemeList, {}), $[18] = view.name, $[19] = t9);
+	}), $[18] = t0, $[19] = t5, $[20] = t8, $[21] = t9) : t9 = $[21];
 	let t10;
-	$[20] !== view.focusTitle || $[21] !== view.name || $[22] !== view.slug ? (t10 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
+	$[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, {
 		focusTitle: view.focusTitle,
 		slug: view.slug
-	}), $[20] = view.focusTitle, $[21] = view.name, $[22] = view.slug, $[23] = t10) : t10 = $[23];
-	let t11;
-	$[24] === view.name ? t11 = $[25] : (t11 = view.name === "removed" && /* @__PURE__ */ jsx(RemovedThemes, {}), $[24] = view.name, $[25] = t11);
+	}), $[24] = view.focusTitle, $[25] = view.name, $[26] = view.slug, $[27] = t11) : t11 = $[27];
 	let t12;
-	$[26] !== t10 || $[27] !== t11 || $[28] !== t8 || $[29] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Flex, {
+	$[28] === view.name ? t12 = $[29] : (t12 = view.name === "removed" && /* @__PURE__ */ jsx(RemovedThemes, {}), $[28] = view.name, $[29] = t12);
+	let t13;
+	$[30] !== t10 || $[31] !== t11 || $[32] !== t12 || $[33] !== t9 ? (t13 = /* @__PURE__ */ jsxs(Flex, {
 		direction: "column",
 		height: "fill",
 		children: [
-			t8,
 			t9,
 			t10,
-			t11
+			t11,
+			t12
 		]
-	}), $[26] = t10, $[27] = t11, $[28] = t8, $[29] = t9, $[30] = t12) : t12 = $[30];
-	let t13;
-	$[31] !== active || $[32] !== snippetOpen ? (t13 = snippetOpen && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
+	}), $[30] = t10, $[31] = t11, $[32] = t12, $[33] = t9, $[34] = t13) : t13 = $[34];
+	let t14;
+	$[35] !== active || $[36] !== snippetOpen ? (t14 = snippetOpen && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
 		onClose: () => setSnippetOpen(!1),
 		theme: active
-	}), $[31] = active, $[32] = snippetOpen, $[33] = t13) : t13 = $[33];
-	let t14;
-	return $[34] !== t12 || $[35] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Card, {
+	}), $[35] = active, $[36] = snippetOpen, $[37] = t14) : t14 = $[37];
+	let t15;
+	return $[38] !== t13 || $[39] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Card, {
 		height: "fill",
-		children: [t12, t13]
-	}), $[34] = t12, $[35] = t13, $[36] = t14) : t14 = $[36], t14;
+		children: [t13, t14]
+	}), $[38] = t13, $[39] = t14, $[40] = t15) : t15 = $[40], t15;
 }
 /**
 * The narrowest the sidebar goes — and its default: narrow enough to leave the
@@ -1957,27 +2226,25 @@ function writeStoredWidth(width) {
 		width === 200 ? localStorage.removeItem(WIDTH_STORAGE_KEY) : localStorage.setItem(WIDTH_STORAGE_KEY, String(width));
 	} catch {}
 }
-/**
-* The sidebar itself does not clip, so the resize handle can straddle its
-* border — the content is clipped one level down instead
-*/
 const Sidebar = styled(Layer).withConfig({
 	displayName: "Sidebar",
-	componentId: "sc-xkgsr1-0"
-})`position:relative;flex:none;box-sizing:border-box;border-left:1px solid var(--card-border-color);`, ResizeHandle = styled.div.withConfig({
+	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-xkgsr1-1"
+	componentId: "sc-ryrt6y-2"
 })`position:absolute;top:0;bottom:0;left:-3px;z-index:1;width:7px;cursor:col-resize;touch-action:none;&::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:3px;background:var(--card-focus-ring-color);opacity:0;transition:opacity 100ms;}&:hover::after,&:focus-visible::after,&[data-dragging='true']::after{opacity:1;}&:focus{outline:none;}`;
 /**
-* Renders the themer sidebar next to the active tool, so the user can browse
-* around their own studio while tweaking the theme. The sidebar's left edge
-* drags (or arrow-keys) it wider, up to twice its default width — the width
-* sticks between sessions.
+* The themer sidebar, in a layer along the right edge of the Studio. Its left
+* edge drags (or arrow-keys) it wider, up to twice its default width — the
+* width sticks between sessions.
 *
 * @internal
 */
-function ThemerActiveToolLayout(props) {
-	let $ = c(20), { open } = useThemer(), [width, setWidth] = useState(readStoredWidth), [dragging, setDragging] = useState(!1), drag = useRef(null), t0, t1;
+function ResizableSidebar() {
+	let $ = c(21), [width, setWidth] = useState(readStoredWidth), [dragging, setDragging] = useState(!1), drag = useRef(null), t0, t1;
 	$[0] === width ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredWidth(width), t1 = [width], $[0] = width, $[1] = t0, $[2] = t1), useEffect(t0, t1);
 	let t2;
 	$[3] === width ? t2 = $[4] : (t2 = (event) => {
@@ -2006,250 +2273,44 @@ function ThemerActiveToolLayout(props) {
 		step !== void 0 && (event_2.preventDefault(), setWidth((current) => clampWidth(current + step)));
 	}, $[7] = t5) : t5 = $[7];
 	let handleKeyDown = t5, t6;
-	$[8] === props ? t6 = $[9] : (t6 = props.renderDefault(props), $[8] = props, $[9] = t6);
+	$[8] === width ? t6 = $[9] : (t6 = { width }, $[8] = width, $[9] = t6);
 	let t7;
-	$[10] === t6 ? t7 = $[11] : (t7 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		height: "fill",
-		overflow: "auto",
-		children: t6
-	}), $[10] = t6, $[11] = t7);
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => setWidth(200), $[10] = t7) : t7 = $[10];
 	let t8;
-	$[12] !== dragging || $[13] !== handlePointerDown || $[14] !== open || $[15] !== width ? (t8 = open && /* @__PURE__ */ jsxs(Sidebar, {
-		height: "fill",
-		style: { width },
-		zOffset: 100,
-		children: [/* @__PURE__ */ jsx(ResizeHandle, {
-			"aria-label": "Resize the themer",
-			"aria-orientation": "vertical",
-			"aria-valuemax": 400,
-			"aria-valuemin": 200,
-			"aria-valuenow": width,
-			"data-dragging": dragging,
-			onDoubleClick: () => setWidth(200),
-			onKeyDown: handleKeyDown,
-			onPointerCancel: handlePointerUp,
-			onPointerDown: handlePointerDown,
-			onPointerMove: handlePointerMove,
-			onPointerUp: handlePointerUp,
-			role: "separator",
-			tabIndex: 0
-		}), /* @__PURE__ */ jsx(Box, {
-			height: "fill",
-			overflow: "hidden",
-			children: /* @__PURE__ */ jsx(ThemerSidebar, {})
-		})]
-	}), $[12] = dragging, $[13] = handlePointerDown, $[14] = open, $[15] = width, $[16] = t8) : t8 = $[16];
+	$[11] !== dragging || $[12] !== handlePointerDown || $[13] !== width ? (t8 = /* @__PURE__ */ jsx(ResizeHandle, {
+		"aria-label": "Resize the themer",
+		"aria-orientation": "vertical",
+		"aria-valuemax": 400,
+		"aria-valuemin": 200,
+		"aria-valuenow": width,
+		"data-dragging": dragging,
+		onDoubleClick: t7,
+		onKeyDown: handleKeyDown,
+		onPointerCancel: handlePointerUp,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		role: "separator",
+		tabIndex: 0
+	}), $[11] = dragging, $[12] = handlePointerDown, $[13] = width, $[14] = t8) : t8 = $[14];
 	let t9;
-	return $[17] !== t7 || $[18] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Flex, {
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
 		height: "fill",
-		sizing: "border",
-		children: [t7, t8]
-	}), $[17] = t7, $[18] = t8, $[19] = t9) : t9 = $[19], t9;
-}
-function themesOf(context) {
-	return resolveThemes(context, context.baseOptions);
-}
-/**
-* The state of the themer tool: two parallel regions, whether the `sidebar`
-* is open and which `flow` it is in — picking a theme from the `list`,
-* `edit`ing one of the user's own themes, or restoring `removed` ones. The
-* context carries the persisted state (the applied theme, the user's themes
-* and what was removed) alongside what the flows need.
-*
-* Theme operations are handled in every flow, and the flows leave on their
-* own when they lose their subject: the editor when its theme is removed or
-* deleted, and the removed view when its last theme is restored or deleted.
-*
-* @internal
-*/
-const themerMachine = setup({
-	types: {
-		context: {},
-		events: {},
-		input: {}
-	},
-	guards: {
-		isCustomTheme: ({ context }, params) => themesOf(context).themes.some((theme) => theme.slug === params.slug && theme.source === "custom"),
-		isEditingListedTheme: ({ context }) => context.editing !== null && themesOf(context).themes.some((theme) => theme.slug === context.editing?.slug && theme.source === "custom"),
-		hasRemovedThemes: ({ context }) => themesOf(context).removed.length > 0
-	},
-	actions: {
-		pick: assign((_, params) => ({ active: params.slug === "config" ? null : params.slug })),
-		add: assign(({ context }, params) => {
-			let theme = createCustomTheme(params.title ?? "Untitled theme", params.options ?? themesOf(context).active.options, params.palette);
-			return {
-				active: theme.slug,
-				custom: [...context.custom, theme],
-				editing: {
-					slug: theme.slug,
-					focusTitle: params.title === void 0
-				},
-				images: params.imageUrl ? {
-					...context.images,
-					[theme.slug]: params.imageUrl
-				} : context.images
-			};
-		}),
-		duplicate: assign(({ context }, params) => {
-			let { themes, removed } = themesOf(context), source = [...themes, ...removed].find((theme) => theme.slug === params.slug);
-			if (!source) return {};
-			let theme = createCustomTheme(duplicateTitle(source.title), source.options, source.palette);
-			return {
-				active: theme.slug,
-				custom: [...context.custom, theme],
-				editing: {
-					slug: theme.slug,
-					focusTitle: !0
-				}
-			};
-		}),
-		startEditing: assign((_, params) => ({
-			active: params.slug,
-			editing: {
-				slug: params.slug,
-				focusTitle: !1
-			}
-		})),
-		stopEditing: assign({ editing: null }),
-		update: assign(({ context }, params) => ({
-			custom: context.custom.map((theme) => theme.slug === params.slug ? {
-				...theme,
-				title: params.title ?? theme.title,
-				options: params.options ?? theme.options,
-				...params.palette ? { palette: params.palette } : {}
-			} : theme),
-			images: params.imageUrl && context.custom.some((theme) => theme.slug === params.slug) ? {
-				...context.images,
-				[params.slug]: params.imageUrl
-			} : context.images
-		})),
-		remove: assign(({ context }, params) => params.slug === "config" || context.removed.includes(params.slug) ? {} : {
-			active: context.active === params.slug ? null : context.active,
-			removed: [...context.removed, params.slug]
-		}),
-		restore: assign(({ context }, params) => ({ removed: context.removed.filter((slug) => slug !== params.slug) })),
-		delete: assign(({ context }, params) => {
-			if (!context.custom.some((theme) => theme.slug === params.slug)) return {};
-			let { [params.slug]: _deleted, ...images } = context.images;
-			return {
-				active: context.active === params.slug ? null : context.active,
-				custom: context.custom.filter((theme) => theme.slug !== params.slug),
-				removed: context.removed.filter((slug) => slug !== params.slug),
-				images
-			};
-		})
-	}
-}).createMachine({
-	id: "themer",
-	context: ({ input }) => ({
-		...input.stored,
-		baseOptions: input.baseOptions,
-		editing: null,
-		images: {}
-	}),
-	type: "parallel",
-	states: {
-		sidebar: {
-			initial: "closed",
-			states: {
-				closed: { on: { "sidebar.toggle": "open" } },
-				open: { on: {
-					"sidebar.toggle": "closed",
-					"sidebar.close": "closed"
-				} }
-			}
-		},
-		flow: {
-			initial: "list",
-			on: {
-				"theme.pick": { actions: {
-					type: "pick",
-					params: ({ event }) => ({ slug: event.slug })
-				} },
-				"theme.add": {
-					target: ".edit",
-					actions: {
-						type: "add",
-						params: ({ event }) => ({
-							title: event.title,
-							options: event.options,
-							palette: event.palette,
-							imageUrl: event.imageUrl
-						})
-					}
-				},
-				"theme.duplicate": {
-					target: ".edit",
-					actions: {
-						type: "duplicate",
-						params: ({ event }) => ({ slug: event.slug })
-					}
-				},
-				"theme.edit": {
-					target: ".edit",
-					guard: {
-						type: "isCustomTheme",
-						params: ({ event }) => ({ slug: event.slug })
-					},
-					actions: {
-						type: "startEditing",
-						params: ({ event }) => ({ slug: event.slug })
-					}
-				},
-				"theme.update": { actions: {
-					type: "update",
-					params: ({ event }) => ({
-						slug: event.slug,
-						title: event.title,
-						options: event.options,
-						palette: event.palette,
-						imageUrl: event.imageUrl
-					})
-				} },
-				"theme.remove": { actions: {
-					type: "remove",
-					params: ({ event }) => ({ slug: event.slug })
-				} },
-				"theme.restore": { actions: {
-					type: "restore",
-					params: ({ event }) => ({ slug: event.slug })
-				} },
-				"theme.delete": { actions: {
-					type: "delete",
-					params: ({ event }) => ({ slug: event.slug })
-				} },
-				"flow.list": ".list",
-				"flow.removed": {
-					target: ".removed",
-					guard: "hasRemovedThemes"
-				}
-			},
-			states: {
-				list: {},
-				edit: {
-					exit: "stopEditing",
-					always: {
-						guard: not("isEditingListedTheme"),
-						target: "list"
-					}
-				},
-				removed: { always: {
-					guard: not("hasRemovedThemes"),
-					target: "list"
-				} }
-			}
-		}
-	}
-});
-/** The part of the machine context that is persisted between sessions @internal */
-function selectStoredState(snapshot) {
-	let { active, custom, removed } = snapshot.context;
-	return {
-		active,
-		custom,
-		removed
-	};
+		overflow: "hidden",
+		children: /* @__PURE__ */ jsx(ThemerSidebar, {})
+	}), $[15] = t9) : t9 = $[15];
+	let t10;
+	$[16] === t8 ? t10 = $[17] : (t10 = /* @__PURE__ */ jsxs(Frame, {
+		borderLeft: !0,
+		height: "fill",
+		children: [t8, t9]
+	}), $[16] = t8, $[17] = t10);
+	let t11;
+	return $[18] !== t10 || $[19] !== t6 ? (t11 = /* @__PURE__ */ jsx(Sidebar, {
+		style: t6,
+		zOffset: 100,
+		children: t10
+	}), $[18] = t10, $[19] = t6, $[20] = t11) : t11 = $[20], t11;
 }
 const STORAGE_KEY = "sanityStudio:themer:state", LEGACY_STORAGE_KEY = "sanityStudio:themer:options";
 function sanitizeColor(value) {
@@ -2387,18 +2448,20 @@ function sameView(a, b) {
 }
 /**
 * Wraps the whole Studio so that the theme picked in the themer sidebar
-* applies everywhere while the user browses around, and runs the themer
-* machine that the navbar toggle and the sidebar share: the user's themes,
-* which one is applied, and which flow the sidebar is in.
+* applies everywhere while the user browses around, runs the themer machine
+* that the navbar toggle and the sidebar share — the user's themes, which one
+* is applied, which flow the sidebar is in and how the Studio is previewed —
+* and renders the sidebar next to the Studio. The sidebar sits at the
+* `layout` level rather than in `activeToolLayout` because the split preview
+* renders the Studio twice, and the sidebar must not come along.
 *
-* The theme provider inherits the color scheme from the Studio, so the
-* preview follows the appearance setting (light/dark/system) like any other
-* theme.
+* The single preview inherits the color scheme from the Studio, so it follows
+* the appearance setting (light/dark/system) like any other theme.
 *
 * @internal
 */
 function ThemerLayout(props) {
-	let $ = c(38), { baseOptions, ...layoutProps } = props, t0;
+	let $ = c(55), { baseOptions, ...layoutProps } = props, t0;
 	$[0] === baseOptions ? t0 = $[1] : (t0 = () => ({
 		baseOptions,
 		stored: readStoredState()
@@ -2407,35 +2470,37 @@ function ThemerLayout(props) {
 	$[2] === input ? t1 = $[3] : (t1 = { input }, $[2] = input, $[3] = t1);
 	let [snapshot, send, actorRef] = useActor(themerMachine, t1), stored = useSelector(actorRef, selectStoredState, sameStoredState), view = useSelector(actorRef, selectView, sameView), t2;
 	$[4] === snapshot ? t2 = $[5] : (t2 = snapshot.matches({ sidebar: "open" }), $[4] = snapshot, $[5] = t2);
-	let open = t2, { images } = snapshot.context, t3, t4;
-	$[6] === stored ? (t3 = $[7], t4 = $[8]) : (t3 = () => writeStoredState(stored), t4 = [stored], $[6] = stored, $[7] = t3, $[8] = t4), useEffect(t3, t4);
-	let previousImages = useRef(images), t5, t6;
-	$[9] === images ? (t5 = $[10], t6 = $[11]) : (t5 = () => {
+	let open = t2, t3;
+	$[6] === snapshot ? t3 = $[7] : (t3 = snapshot.matches({ preview: "split" }), $[6] = snapshot, $[7] = t3);
+	let split = t3, { images } = snapshot.context, t4, t5;
+	$[8] === stored ? (t4 = $[9], t5 = $[10]) : (t4 = () => writeStoredState(stored), t5 = [stored], $[8] = stored, $[9] = t4, $[10] = t5), useEffect(t4, t5);
+	let previousImages = useRef(images), t6, t7;
+	$[11] === images ? (t6 = $[12], t7 = $[13]) : (t6 = () => {
 		let current = new Set(Object.values(images));
 		for (let url of Object.values(previousImages.current)) current.has(url) || URL.revokeObjectURL(url);
 		previousImages.current = images;
-	}, t6 = [images], $[9] = images, $[10] = t5, $[11] = t6), useEffect(t5, t6);
-	let t7, t8;
-	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => () => {
+	}, t7 = [images], $[11] = images, $[12] = t6, $[13] = t7), useEffect(t6, t7);
+	let t8, t9;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => () => {
 		for (let url_0 of Object.values(previousImages.current)) URL.revokeObjectURL(url_0);
-	}, t8 = [], $[12] = t7, $[13] = t8) : (t7 = $[12], t8 = $[13]), useEffect(t7, t8);
-	let t9;
-	$[14] !== baseOptions || $[15] !== stored ? (t9 = resolveThemes(stored, baseOptions), $[14] = baseOptions, $[15] = stored, $[16] = t9) : t9 = $[16];
-	let { themes, removed, active } = t9, activeOptions = active.source === "config" ? null : active.options, t10;
-	$[17] === activeOptions ? t10 = $[18] : (t10 = activeOptions === null ? null : buildTheme(activeOptions), $[17] = activeOptions, $[18] = t10);
-	let theme = t10, scheme = useColorSchemeValue(), t11;
-	$[19] !== scheme || $[20] !== theme?.v2?.color ? (t11 = () => {
+	}, t9 = [], $[14] = t8, $[15] = t9) : (t8 = $[14], t9 = $[15]), useEffect(t8, t9);
+	let t10;
+	$[16] !== baseOptions || $[17] !== stored ? (t10 = resolveThemes(stored, baseOptions), $[16] = baseOptions, $[17] = stored, $[18] = t10) : t10 = $[18];
+	let { themes, removed, active } = t10, activeOptions = active.source === "config" ? null : active.options, t11;
+	$[19] === activeOptions ? t11 = $[20] : (t11 = activeOptions === null ? null : buildTheme(activeOptions), $[19] = activeOptions, $[20] = t11);
+	let theme = t11, scheme = useColorSchemeValue(), t12;
+	$[21] !== scheme || $[22] !== theme?.v2?.color ? (t12 = () => {
 		let background = theme?.v2?.color[scheme].default.bg;
 		if (background === void 0) return;
 		let { style } = document.body, previous = style.backgroundColor;
 		return style.backgroundColor = background, () => {
 			style.backgroundColor = previous;
 		};
-	}, $[19] = scheme, $[20] = theme?.v2?.color, $[21] = t11) : t11 = $[21];
-	let t12;
-	$[22] !== scheme || $[23] !== theme ? (t12 = [scheme, theme], $[22] = scheme, $[23] = theme, $[24] = t12) : t12 = $[24], useEffect(t11, t12);
+	}, $[21] = scheme, $[22] = theme?.v2?.color, $[23] = t12) : t12 = $[23];
 	let t13;
-	$[25] !== active || $[26] !== baseOptions || $[27] !== images || $[28] !== open || $[29] !== removed || $[30] !== send || $[31] !== themes || $[32] !== view ? (t13 = {
+	$[24] !== scheme || $[25] !== theme ? (t13 = [scheme, theme], $[24] = scheme, $[25] = theme, $[26] = t13) : t13 = $[26], useEffect(t12, t13);
+	let t14;
+	$[27] !== active || $[28] !== baseOptions || $[29] !== images || $[30] !== open || $[31] !== removed || $[32] !== send || $[33] !== split || $[34] !== themes || $[35] !== view ? (t14 = {
 		baseOptions,
 		themes,
 		removed,
@@ -2443,16 +2508,72 @@ function ThemerLayout(props) {
 		images,
 		view,
 		open,
+		split,
 		send
-	}, $[25] = active, $[26] = baseOptions, $[27] = images, $[28] = open, $[29] = removed, $[30] = send, $[31] = themes, $[32] = view, $[33] = t13) : t13 = $[33];
-	let context = t13, t14 = ThemerContext, t15 = theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
+	}, $[27] = active, $[28] = baseOptions, $[29] = images, $[30] = open, $[31] = removed, $[32] = send, $[33] = split, $[34] = themes, $[35] = view, $[36] = t14) : t14 = $[36];
+	let context = t14, studio = layoutProps.renderDefault(layoutProps), t15 = split ? "light" : void 0, t16;
+	$[37] !== studio || $[38] !== t15 || $[39] !== theme ? (t16 = /* @__PURE__ */ jsx(StudioPreview, {
+		scheme: t15,
 		theme,
-		children: layoutProps.renderDefault(layoutProps)
-	}), t16;
-	return $[34] !== context || $[35] !== t14.Provider || $[36] !== t15 ? (t16 = /* @__PURE__ */ jsx(t14.Provider, {
+		children: studio
+	}), $[37] = studio, $[38] = t15, $[39] = theme, $[40] = t16) : t16 = $[40];
+	let t17;
+	$[41] !== split || $[42] !== studio || $[43] !== theme ? (t17 = split && /* @__PURE__ */ jsx(StudioPreview, {
+		borderLeft: !0,
+		scheme: "dark",
+		theme,
+		children: studio
+	}), $[41] = split, $[42] = studio, $[43] = theme, $[44] = t17) : t17 = $[44];
+	let t18;
+	$[45] !== open || $[46] !== theme ? (t18 = open && /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: theme ?? void 0,
+		children: /* @__PURE__ */ jsx(ResizableSidebar, {})
+	}), $[45] = open, $[46] = theme, $[47] = t18) : t18 = $[47];
+	let t19;
+	$[48] !== t16 || $[49] !== t17 || $[50] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Flex, {
+		height: "fill",
+		sizing: "border",
+		children: [
+			t16,
+			t17,
+			t18
+		]
+	}), $[48] = t16, $[49] = t17, $[50] = t18, $[51] = t19) : t19 = $[51];
+	let t20;
+	return $[52] !== context || $[53] !== t19 ? (t20 = /* @__PURE__ */ jsx(ThemerContext.Provider, {
 		value: context,
-		children: t15
-	}), $[34] = context, $[35] = t14.Provider, $[36] = t15, $[37] = t16) : t16 = $[37], t16;
+		children: t19
+	}), $[52] = context, $[53] = t19, $[54] = t20) : t20 = $[54], t20;
+}
+/**
+* One copy of the Studio, in the given color scheme — or, without one, in the
+* scheme the Studio is showing. The configured theme (`null`) goes through
+* the provider too, inheriting the Studio's, so picking a theme swaps it
+* instead of remounting the Studio under a new provider.
+*
+* The two copies of the split preview share the router, the document store
+* and every other provider above the layout — only the scheme differs — so
+* they stay in sync while navigating. The `color-scheme` of a forced scheme
+* keeps native form controls and scrollbars in step with it.
+*/
+function StudioPreview(props) {
+	let $ = c(10), { borderLeft, children, scheme, theme } = props, t0 = theme ?? void 0, t1;
+	$[0] === scheme ? t1 = $[1] : (t1 = scheme ? { colorScheme: scheme } : void 0, $[0] = scheme, $[1] = t1);
+	let t2;
+	$[2] !== borderLeft || $[3] !== children || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(Card, {
+		borderLeft,
+		flex: 1,
+		height: "fill",
+		overflow: "hidden",
+		style: t1,
+		children
+	}), $[2] = borderLeft, $[3] = children, $[4] = t1, $[5] = t2) : t2 = $[5];
+	let t3;
+	return $[6] !== scheme || $[7] !== t0 || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(ThemeProvider, {
+		scheme,
+		theme: t0,
+		children: t2
+	}), $[6] = scheme, $[7] = t0, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
 function ThemerNavbarButton() {
 	let $ = c(6), { open, send } = useThemer(), t0;
@@ -2482,6 +2603,9 @@ function ThemerNavbarButton() {
 * navbar — an icon button with a tooltip in the top bar (like the Tasks
 * toggle), and a regular titled action in the narrow-screen sidebar menu.
 *
+* In the split preview every Studio copy renders its own navbar, so the
+* toggle shows up in both — they drive the same sidebar.
+*
 * @internal
 */
 function ThemerNavbar(props) {
@@ -2517,15 +2641,16 @@ function _temp() {
 }
 /**
 * A Studio plugin that adds a themer sidebar for `buildTheme` themes: a
-* navbar toggle opens the sidebar next to the active tool, with a list of
-* themes — the configured theme, the presets and your own — each previewed
-* as a tiny Studio in both color schemes. Picking one applies it live to the
-* whole Studio while you browse around; your own themes can be edited with
+* navbar toggle opens the sidebar next to the Studio, with a list of themes —
+* the configured theme, the presets and your own — each previewed as a tiny
+* Studio in both color schemes. Picking one applies it live to the whole
+* Studio while you browse around; your own themes can be edited with
 * accent/text/background pickers and a contrast slider per scheme, added,
 * duplicated, given the colors of an image (its palette is read on device),
 * removed and restored, and a dialog shows the `buildTheme` snippet that
 * makes the applied theme permanent. Toggle between light and dark mode with
-* the regular appearance menu — the preview follows it.
+* the regular appearance menu — the preview follows it — or split the
+* preview to see the whole Studio in light and dark side by side.
 *
 * ```ts
 * import {themerTool} from '@sanity/themer/tool'
@@ -2555,8 +2680,7 @@ const themerTool = definePlugin((options) => {
 		name: "@sanity/themer/tool",
 		studio: { components: {
 			layout: ThemerLayoutWithOptions,
-			navbar: ThemerNavbar,
-			activeToolLayout: ThemerActiveToolLayout
+			navbar: ThemerNavbar
 		} }
 	};
 });