@sanity/themer 0.9.0 → 0.10.0

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

@@ -1,34 +1,34 @@
 import { a as DEFAULT_BACKGROUND, c as resolveThemeOptions, d as hslToHex, f as relativeLuminance, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette, s as deriveTextColor, u as hexToHsl } from "./presets-CqBgS3A-.js";
-import { a as displayTitle, c as resolveThemes, l as addThemerTransitionType, n as CONFIG_TITLE, t as CONFIG_SLUG } from "./themes-Bxgltjmb.js";
+import { a as displayTitle, c as resolveThemes, l as addThemerTransitionType, n as CONFIG_TITLE, t as CONFIG_SLUG } from "./themes-au1BLKmY.js";
 import { c } from "react/compiler-runtime";
 import { useColorSchemeValue } from "sanity";
 import { Badge, BoundaryElementProvider, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useMediaIndex, useRootTheme, useTheme_v2 } from "@sanity/ui";
 import { Tooltip } from "@sanity/ui/tooltip";
-import { Activity, createContext, startTransition, useContext, useEffect, useRef, useState } from "react";
+import { Activity, createContext, startTransition, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { dequal } from "dequal/lite";
 import { useSelector } from "@xstate/react";
 import { MotionConfig, Reorder, useDragControls } from "motion/react";
-import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 import { CloseIcon } from "@sanity/icons/Close";
-import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
 import { SplitVerticalIcon } from "@sanity/icons/SplitVertical";
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
 import { ResetIcon } from "@sanity/icons/Reset";
 import { TrashIcon } from "@sanity/icons/Trash";
+import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
 import { SparklesIcon } from "@sanity/icons/Sparkles";
 import { ImageIcon } from "@sanity/icons/Image";
 import { useToast } from "@sanity/ui/toast";
 import { AddIcon } from "@sanity/icons/Add";
 import { ClipboardIcon } from "@sanity/icons/Clipboard";
+import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
+import { CopyIcon } from "@sanity/icons/Copy";
+import { EditIcon } from "@sanity/icons/Edit";
 import { RestoreIcon } from "@sanity/icons/Restore";
 import { ArrowDownIcon } from "@sanity/icons/ArrowDown";
 import { ArrowUpIcon } from "@sanity/icons/ArrowUp";
-import { CopyIcon } from "@sanity/icons/Copy";
-import { EditIcon } from "@sanity/icons/Edit";
-import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
 import { ShareIcon } from "@sanity/icons/Share";
-import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { Code } from "@sanity/ui/code";
 import { registerLanguage } from "react-refractor";
@@ -279,13 +279,14 @@ var removedThumbnail = "_1vdkp0v0";
 /**
 * The flow for restoring removed themes: the presets and custom themes the
 * user took out of the list, each with a button to put it back — and, for
-* custom themes, one to delete it for good. The machine leaves the flow once
-* the last one is gone.
+* custom themes, one to delete it for good. The footer leads back to the
+* list, and the machine leaves the flow on its own once the last theme is
+* gone.
 *
 * @internal
 */
 function RemovedThemes(t0) {
-	let $ = c(7), { actorRef, removed } = t0, t1;
+	let $ = c(12), { actorRef, removed } = t0, t1;
 	if ($[0] !== actorRef || $[1] !== removed) {
 		let t2;
 		$[3] === actorRef ? t2 = $[4] : (t2 = (theme) => /* @__PURE__ */ jsxs(Stack, {
@@ -327,13 +328,31 @@ function RemovedThemes(t0) {
 		}, theme.slug), $[3] = actorRef, $[4] = t2), t1 = removed.map(t2), $[0] = actorRef, $[1] = removed, $[2] = t1;
 	} else t1 = $[2];
 	let t2;
-	return $[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ScrollArea, {
+	$[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ScrollArea, {
 		padding: 3,
 		children: /* @__PURE__ */ jsx(Stack, {
 			gap: 5,
 			children: t1
 		})
-	}), $[5] = t1, $[6] = t2), t2;
+	}), $[5] = t1, $[6] = t2);
+	let t3;
+	$[7] === actorRef ? t3 = $[8] : (t3 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsx(Flex, {
+			justify: "flex-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				gap: 2,
+				icon: CheckmarkIcon,
+				onClick: () => actorRef.send({ type: "flow.list" }),
+				padding: 2,
+				text: "Done",
+				mode: "ghost"
+			})
+		})
+	}), $[7] = actorRef, $[8] = t3);
+	let t4;
+	return $[9] !== t2 || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] }), $[9] = t2, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
 }
 /** The variants in the order the tool offers them @internal */
 const IMAGE_PALETTE_VARIANTS = [
@@ -664,8 +683,30 @@ function TooltipButton(props) {
 	}), $[8] = t0, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
 }
 /**
+* The file picker for an image, as a hidden file input that a button or menu
+* item clicks: the chosen file goes to `onFile`, and nowhere else — nothing
+* is uploaded.
+*
+* @internal
+*/
+function ImageFileInput(t0) {
+	let $ = c(5), { onFile, ref } = t0, t1;
+	$[0] === onFile ? t1 = $[1] : (t1 = (event) => {
+		let file = event.currentTarget.files?.[0];
+		event.currentTarget.value = "", file && onFile(file);
+	}, $[0] = onFile, $[1] = t1);
+	let t2;
+	return $[2] !== ref || $[3] !== t1 ? (t2 = /* @__PURE__ */ jsx("input", {
+		accept: "image/*",
+		hidden: !0,
+		onChange: t1,
+		ref,
+		type: "file"
+	}), $[2] = ref, $[3] = t1, $[4] = t2) : t2 = $[4], t2;
+}
+/**
 * A button that opens the file picker for an image, and hands the chosen file
-* over — the picker is a hidden file input, so nothing is uploaded anywhere.
+* over.
 *
 * @internal
 */
@@ -681,15 +722,9 @@ function ImageFileButton(props) {
 		onClick: t0
 	}), $[4] = buttonProps, $[5] = t1);
 	let t2;
-	$[6] === onFile ? t2 = $[7] : (t2 = /* @__PURE__ */ jsx("input", {
-		accept: "image/*",
-		hidden: !0,
-		onChange: (event) => {
-			let file = event.currentTarget.files?.[0];
-			event.currentTarget.value = "", file && onFile(file);
-		},
-		ref: inputRef,
-		type: "file"
+	$[6] === onFile ? t2 = $[7] : (t2 = /* @__PURE__ */ jsx(ImageFileInput, {
+		onFile,
+		ref: inputRef
 	}), $[6] = onFile, $[7] = t2);
 	let t3;
 	return $[8] !== t1 || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] }), $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
@@ -737,19 +772,15 @@ async function decodeImage(file) {
 * @internal
 */
 function useImagePalette(onPalette) {
-	let $ = c(10), toast = useToast(), [busy, setBusy] = useState(!1), onPaletteRef = useRef(onPalette), mountedRef = useRef(!0), latestPickRef = useRef(0), t0, t1;
+	let $ = c(8), toast = useToast(), [busy, setBusy] = useState(!1), onPaletteRef = useRef(onPalette), latestPickRef = useRef(0), t0, t1;
 	$[0] === onPalette ? (t0 = $[1], t1 = $[2]) : (t0 = () => {
 		onPaletteRef.current = onPalette;
 	}, t1 = [onPalette], $[0] = onPalette, $[1] = t0, $[2] = t1), useEffect(t0, t1);
-	let t2, t3;
-	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => (mountedRef.current = !0, () => {
-		mountedRef.current = !1;
-	}), t3 = [], $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), useEffect(t2, t3);
-	let t4;
-	$[5] === toast ? t4 = $[6] : (t4 = (file) => {
+	let t2;
+	$[3] === toast ? t2 = $[4] : (t2 = (file) => {
 		let pick = latestPickRef.current += 1;
 		setBusy(!0);
-		let isCurrent = () => mountedRef.current && latestPickRef.current === pick, extract = async () => {
+		let isCurrent = () => latestPickRef.current === pick, extract = async () => {
 			let palette = extractImagePalette(await readImagePixels(file));
 			isCurrent() && (Object.values(palette).every(_temp$6) ? toast.push({
 				status: "warning",
@@ -764,12 +795,12 @@ function useImagePalette(onPalette) {
 		}).finally(() => {
 			isCurrent() && setBusy(!1);
 		});
-	}, $[5] = toast, $[6] = t4);
-	let pickImage = t4, t5;
-	return $[7] !== busy || $[8] !== pickImage ? (t5 = {
+	}, $[3] = toast, $[4] = t2);
+	let pickImage = t2, t3;
+	return $[5] !== busy || $[6] !== pickImage ? (t3 = {
 		busy,
 		pickImage
-	}, $[7] = busy, $[8] = pickImage, $[9] = t5) : t5 = $[9], t5;
+	}, $[5] = busy, $[6] = pickImage, $[7] = t3) : t3 = $[7], t3;
 }
 function _temp$6(swatch) {
 	return swatch === null;
@@ -1072,7 +1103,7 @@ function _temp$4(snapshot) {
 	return snapshot.context.images;
 }
 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(53), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, title } = props, studioScheme = useColorSchemeValue(), actionsId = useId(), t0;
 	$[0] === options ? t0 = $[1] : (t0 = resolveThemeOptions(options), $[0] = options, $[1] = t0);
 	let resolved = t0, t1;
 	$[2] === options ? t1 = $[3] : (t1 = buildPalette(options), $[2] = options, $[3] = t1);
@@ -1145,38 +1176,54 @@ function ThemeEditorForm(props) {
 		})
 	}), $[33] = t10, $[34] = t3, $[35] = t7, $[36] = t8, $[37] = t11) : t11 = $[37];
 	let t12;
-	$[38] === onRemove ? t12 = $[39] : (t12 = /* @__PURE__ */ jsx(TooltipButton, {
+	$[38] === onDone ? t12 = $[39] : (t12 = /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: CheckmarkIcon,
+		onClick: onDone,
+		padding: 2,
+		text: "Done",
+		mode: "ghost"
+	}), $[38] = onDone, $[39] = t12);
+	let t13;
+	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": "More actions",
+		icon: EllipsisHorizontalIcon,
+		mode: "bleed",
+		padding: 2
+	}), $[40] = t13) : t13 = $[40];
+	let t14;
+	$[41] === onRemove ? t14 = $[42] : (t14 = /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(MenuItem, {
 		icon: TrashIcon,
-		mode: "ghost",
 		onClick: onRemove,
 		text: "Remove",
-		tone: "critical",
-		tooltip: "Remove the theme — it can be restored until it is deleted"
-	}), $[38] = onRemove, $[39] = t12);
-	let t13;
-	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[40] = t13) : t13 = $[40];
-	let t14;
-	$[41] === onDone ? t14 = $[42] : (t14 = /* @__PURE__ */ jsx(Button, {
-		mode: "ghost",
-		onClick: onDone,
-		padding: 2,
-		text: "Done"
-	}), $[41] = onDone, $[42] = t14);
+		tone: "critical"
+	}) }), $[41] = onRemove, $[42] = t14);
 	let t15;
-	$[43] !== t12 || $[44] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
+	$[43] === Symbol.for("react.memo_cache_sentinel") ? (t15 = {
+		animate: !0,
+		placement: "top-end",
+		portal: !0
+	}, $[43] = t15) : t15 = $[43];
+	let t16;
+	$[44] !== actionsId || $[45] !== t14 ? (t16 = /* @__PURE__ */ jsx(MenuButton, {
+		button: t13,
+		id: actionsId,
+		menu: t14,
+		popover: t15
+	}), $[44] = actionsId, $[45] = t14, $[46] = t16) : t16 = $[46];
+	let t17;
+	$[47] !== t12 || $[48] !== t16 ? (t17 = /* @__PURE__ */ jsx(Card, {
 		borderTop: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
 			gap: 2,
-			children: [
-				t12,
-				t13,
-				t14
-			]
+			justify: "flex-end",
+			children: [t12, t16]
 		})
-	}), $[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;
+	}), $[47] = t12, $[48] = t16, $[49] = t17) : t17 = $[49];
+	let t18;
+	return $[50] !== t11 || $[51] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t17] }), $[50] = t11, $[51] = t17, $[52] = t18) : t18 = $[52], t18;
 }
 function _temp2(event_0) {
 	return event_0.currentTarget.select();
@@ -1577,9 +1624,9 @@ function isEditable(target) {
 * @internal
 */
 function PasteThemeDialog(props) {
-	let $ = c(37), { actorRef, onClose } = props, t0;
+	let $ = c(39), { actorRef, onClose } = props, t0;
 	$[0] === actorRef ? t0 = $[1] : (t0 = { actorRef }, $[0] = actorRef, $[1] = t0);
-	let { addThemeFromText } = useThemeCodes(t0), [text, setText] = useState(""), [invalid, setInvalid] = useState(!1), t1;
+	let { addThemeFromText } = useThemeCodes(t0), [text, setText] = useState(""), [invalid, setInvalid] = useState(!1), id = useId(), errorId = `${id}-error`, t1;
 	$[2] !== addThemeFromText || $[3] !== onClose || $[4] !== text ? (t1 = () => {
 		addThemeFromText(text) ? onClose() : setInvalid(!0);
 	}, $[2] = addThemeFromText, $[3] = onClose, $[4] = text, $[5] = t1) : t1 = $[5];
@@ -1617,7 +1664,7 @@ function PasteThemeDialog(props) {
 		size: 1,
 		children: "Paste the code someone copied from their themer — the theme is added to your list and applied."
 	}), $[18] = t8) : t8 = $[18];
-	let t9 = invalid ? "themer-paste-error" : void 0, t10 = invalid ? "That is not a theme code" : void 0, t11;
+	let t9 = invalid ? errorId : void 0, t10 = invalid ? "That is not a theme code" : void 0, t11;
 	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (event_0) => {
 		setText(event_0.currentTarget.value), setInvalid(!1);
 	}, $[19] = t11) : t11 = $[19];
@@ -1634,8 +1681,8 @@ function PasteThemeDialog(props) {
 		value: text
 	}), $[20] = invalid, $[21] = t10, $[22] = t9, $[23] = text, $[24] = t12) : t12 = $[24];
 	let t13;
-	$[25] === invalid ? t13 = $[26] : (t13 = invalid && /* @__PURE__ */ jsx(Card, {
-		id: "themer-paste-error",
+	$[25] !== errorId || $[26] !== invalid ? (t13 = invalid && /* @__PURE__ */ jsx(Card, {
+		id: errorId,
 		padding: 3,
 		radius: 2,
 		role: "alert",
@@ -1644,9 +1691,9 @@ function PasteThemeDialog(props) {
 			size: 1,
 			children: "That is not a theme code — codes are one word, copied from a theme's menu."
 		})
-	}), $[25] = invalid, $[26] = t13);
+	}), $[25] = errorId, $[26] = invalid, $[27] = t13) : t13 = $[27];
 	let t14;
-	$[27] !== t12 || $[28] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Stack, {
+	$[28] !== t12 || $[29] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		padding: 4,
 		children: [
@@ -1654,23 +1701,23 @@ function PasteThemeDialog(props) {
 			t12,
 			t13
 		]
-	}), $[27] = t12, $[28] = t13, $[29] = t14) : t14 = $[29];
+	}), $[28] = t12, $[29] = t13, $[30] = t14) : t14 = $[30];
 	let t15;
-	$[30] !== t14 || $[31] !== t7 ? (t15 = /* @__PURE__ */ jsx("form", {
+	$[31] !== t14 || $[32] !== t7 ? (t15 = /* @__PURE__ */ jsx("form", {
 		onSubmit: t7,
 		children: t14
-	}), $[30] = t14, $[31] = t7, $[32] = t15) : t15 = $[32];
+	}), $[31] = t14, $[32] = t7, $[33] = t15) : t15 = $[33];
 	let t16;
-	return $[33] !== onClose || $[34] !== t15 || $[35] !== t6 ? (t16 = /* @__PURE__ */ jsx(Dialog, {
+	return $[34] !== id || $[35] !== onClose || $[36] !== t15 || $[37] !== t6 ? (t16 = /* @__PURE__ */ jsx(Dialog, {
 		animate: !0,
 		footer: t6,
 		header: "Add a shared theme",
-		id: "themer-paste",
+		id,
 		onClickOutside: onClose,
 		onClose,
 		width: 0,
 		children: t15
-	}), $[33] = onClose, $[34] = t15, $[35] = t6, $[36] = t16) : t16 = $[36], t16;
+	}), $[34] = id, $[35] = onClose, $[36] = t15, $[37] = t6, $[38] = t16) : t16 = $[38], t16;
 }
 var frame$1 = "_1wsn7882", menuCard = "_1wsn7884", menuSlot = "_1wsn7883", pickButton = "_1wsn7881", root = "_1wsn7880";
 /**
@@ -1696,7 +1743,7 @@ function scrollRefIntoViewIfNeeded(node) {
 function ThemeCard(t0) {
 	let $ = c(79), { actorRef, active, theme, themes } = t0, t1;
 	$[0] === actorRef ? t1 = $[1] : (t1 = { actorRef }, $[0] = actorRef, $[1] = t1);
-	let { copyTheme } = useThemeCodes(t1), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), dragControls = useDragControls(), dragged = useRef(!1), t2;
+	let { copyTheme } = useThemeCodes(t1), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), dragControls = useDragControls(), menuId = useId(), dragged = useRef(!1), t2;
 	$[2] === theme.title ? t2 = $[3] : (t2 = displayTitle(theme.title), $[2] = theme.title, $[3] = t2);
 	let title = t2, t3;
 	$[4] === theme.slug ? t3 = $[5] : (t3 = (candidate) => candidate.slug === theme.slug, $[4] = theme.slug, $[5] = t3);
@@ -1772,8 +1819,8 @@ function ThemeCard(t0) {
 		padding: 1,
 		radius: 2
 	}), $[31] = t16, $[32] = t17);
-	let t18 = `themer-theme-${theme.slug}`, t19;
-	$[33] !== index || $[34] !== listed || $[35] !== moveTo || $[36] !== themes.length ? (t19 = listed && /* @__PURE__ */ jsxs(Fragment, { children: [
+	let t18;
+	$[33] !== index || $[34] !== listed || $[35] !== moveTo || $[36] !== themes.length ? (t18 = listed && /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(MenuItem, {
 			disabled: index <= 0,
 			icon: ArrowUpIcon,
@@ -1787,35 +1834,35 @@ function ThemeCard(t0) {
 			text: "Move down"
 		}),
 		/* @__PURE__ */ jsx(MenuDivider, {})
-	] }), $[33] = index, $[34] = listed, $[35] = moveTo, $[36] = themes.length, $[37] = t19) : t19 = $[37];
-	let t20;
-	$[38] !== actorRef || $[39] !== theme.slug || $[40] !== theme.source ? (t20 = theme.source === "custom" && /* @__PURE__ */ jsx(MenuItem, {
+	] }), $[33] = index, $[34] = listed, $[35] = moveTo, $[36] = themes.length, $[37] = t18) : t18 = $[37];
+	let t19;
+	$[38] !== actorRef || $[39] !== theme.slug || $[40] !== theme.source ? (t19 = theme.source === "custom" && /* @__PURE__ */ jsx(MenuItem, {
 		icon: EditIcon,
 		onClick: () => actorRef.send({
 			type: "theme.edit",
 			slug: theme.slug
 		}),
 		text: "Edit"
-	}), $[38] = actorRef, $[39] = theme.slug, $[40] = theme.source, $[41] = t20) : t20 = $[41];
-	let t21;
-	$[42] !== actorRef || $[43] !== theme.slug ? (t21 = () => actorRef.send({
+	}), $[38] = actorRef, $[39] = theme.slug, $[40] = theme.source, $[41] = t19) : t19 = $[41];
+	let t20;
+	$[42] !== actorRef || $[43] !== theme.slug ? (t20 = () => actorRef.send({
 		type: "theme.duplicate",
 		slug: theme.slug
-	}), $[42] = actorRef, $[43] = theme.slug, $[44] = t21) : t21 = $[44];
-	let t22 = theme.source === "custom" ? "Duplicate" : "Duplicate to edit", t23;
-	$[45] !== t21 || $[46] !== t22 ? (t23 = /* @__PURE__ */ jsx(MenuItem, {
+	}), $[42] = actorRef, $[43] = theme.slug, $[44] = t20) : t20 = $[44];
+	let t21 = theme.source === "custom" ? "Duplicate" : "Duplicate to edit", t22;
+	$[45] !== t20 || $[46] !== t21 ? (t22 = /* @__PURE__ */ jsx(MenuItem, {
 		icon: CopyIcon,
-		onClick: t21,
-		text: t22
-	}), $[45] = t21, $[46] = t22, $[47] = t23) : t23 = $[47];
-	let t24;
-	$[48] !== copyTheme || $[49] !== theme ? (t24 = /* @__PURE__ */ jsx(MenuItem, {
+		onClick: t20,
+		text: t21
+	}), $[45] = t20, $[46] = t21, $[47] = t22) : t22 = $[47];
+	let t23;
+	$[48] !== copyTheme || $[49] !== theme ? (t23 = /* @__PURE__ */ jsx(MenuItem, {
 		icon: ShareIcon,
 		onClick: () => void copyTheme(theme),
 		text: "Copy to share"
-	}), $[48] = copyTheme, $[49] = theme, $[50] = t24) : t24 = $[50];
-	let t25;
-	$[51] !== actorRef || $[52] !== theme.slug || $[53] !== theme.source ? (t25 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
+	}), $[48] = copyTheme, $[49] = theme, $[50] = t23) : t23 = $[50];
+	let t24;
+	$[51] !== actorRef || $[52] !== theme.slug || $[53] !== theme.source ? (t24 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
 		icon: TrashIcon,
 		onClick: () => actorRef.send({
 			type: "theme.remove",
@@ -1823,26 +1870,26 @@ function ThemeCard(t0) {
 		}),
 		text: "Remove",
 		tone: "critical"
-	})] }), $[51] = actorRef, $[52] = theme.slug, $[53] = theme.source, $[54] = t25) : t25 = $[54];
-	let t26;
-	$[55] !== t19 || $[56] !== t20 || $[57] !== t23 || $[58] !== t24 || $[59] !== t25 ? (t26 = /* @__PURE__ */ jsxs(Menu, { children: [
+	})] }), $[51] = actorRef, $[52] = theme.slug, $[53] = theme.source, $[54] = t24) : t24 = $[54];
+	let t25;
+	$[55] !== t18 || $[56] !== t19 || $[57] !== t22 || $[58] !== t23 || $[59] !== t24 ? (t25 = /* @__PURE__ */ jsxs(Menu, { children: [
+		t18,
 		t19,
-		t20,
+		t22,
 		t23,
-		t24,
-		t25
-	] }), $[55] = t19, $[56] = t20, $[57] = t23, $[58] = t24, $[59] = t25, $[60] = t26) : t26 = $[60];
-	let t27, t28;
-	$[61] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => setMenuOpen(!1), t28 = () => setMenuOpen(!0), $[61] = t27, $[62] = t28) : (t27 = $[61], t28 = $[62]);
-	let t29;
-	$[63] === scheme ? t29 = $[64] : (t29 = {
+		t24
+	] }), $[55] = t18, $[56] = t19, $[57] = t22, $[58] = t23, $[59] = t24, $[60] = t25) : t25 = $[60];
+	let t26, t27;
+	$[61] === Symbol.for("react.memo_cache_sentinel") ? (t26 = () => setMenuOpen(!1), t27 = () => setMenuOpen(!0), $[61] = t26, $[62] = t27) : (t26 = $[61], t27 = $[62]);
+	let t28;
+	$[63] === scheme ? t28 = $[64] : (t28 = {
 		animate: !0,
 		placement: "bottom-end",
 		portal: !0,
 		scheme
-	}, $[63] = scheme, $[64] = t29);
-	let t30;
-	$[65] !== t17 || $[66] !== t18 || $[67] !== t26 || $[68] !== t29 ? (t30 = /* @__PURE__ */ jsx(Tooltip, {
+	}, $[63] = scheme, $[64] = t28);
+	let t29;
+	$[65] !== menuId || $[66] !== t17 || $[67] !== t25 || $[68] !== t28 ? (t29 = /* @__PURE__ */ jsx(Tooltip, {
 		animate: !0,
 		content: t15,
 		placement: "bottom",
@@ -1853,22 +1900,22 @@ function ThemeCard(t0) {
 			scheme: "dark",
 			children: /* @__PURE__ */ jsx(MenuButton, {
 				button: t17,
-				id: t18,
-				menu: t26,
-				onClose: t27,
-				onOpen: t28,
-				popover: t29
+				id: menuId,
+				menu: t25,
+				onClose: t26,
+				onOpen: t27,
+				popover: t28
 			})
 		})
-	}), $[65] = t17, $[66] = t18, $[67] = t26, $[68] = t29, $[69] = t30) : t30 = $[69];
-	let t31;
-	$[70] !== menuOpen || $[71] !== t30 ? (t31 = /* @__PURE__ */ jsx("div", {
+	}), $[65] = menuId, $[66] = t17, $[67] = t25, $[68] = t28, $[69] = t29) : t29 = $[69];
+	let t30;
+	$[70] !== menuOpen || $[71] !== t29 ? (t30 = /* @__PURE__ */ jsx("div", {
 		className: menuSlot,
 		"data-visible": menuOpen,
-		children: t30
-	}), $[70] = menuOpen, $[71] = t30, $[72] = t31) : t31 = $[72];
-	let t32;
-	return $[73] !== dragControls || $[74] !== t14 || $[75] !== t31 || $[76] !== t7 || $[77] !== theme.slug ? (t32 = /* @__PURE__ */ jsxs(Reorder.Item, {
+		children: t29
+	}), $[70] = menuOpen, $[71] = t29, $[72] = t30) : t30 = $[72];
+	let t31;
+	return $[73] !== dragControls || $[74] !== t14 || $[75] !== t30 || $[76] !== t7 || $[77] !== theme.slug ? (t31 = /* @__PURE__ */ jsxs(Reorder.Item, {
 		as: "div",
 		className: root,
 		dragControls,
@@ -1878,147 +1925,12 @@ function ThemeCard(t0) {
 		ref: t7,
 		value: theme.slug,
 		whileDrag: t8,
-		children: [t14, t31]
-	}), $[73] = dragControls, $[74] = t14, $[75] = t31, $[76] = t7, $[77] = theme.slug, $[78] = t32) : t32 = $[78], t32;
+		children: [t14, t30]
+	}), $[73] = dragControls, $[74] = t14, $[75] = t30, $[76] = t7, $[77] = theme.slug, $[78] = t31) : t31 = $[78], t31;
 }
 function _temp$3(candidate_0) {
 	return candidate_0.slug;
 }
-var cardGrid = "twjqgh0";
-/**
-* The flow for picking a theme: a grid of theme cards — the configured theme,
-* the presets and the user's own themes — that drag into the order the user
-* wants, with the entry points to the add and restore flows below. A theme
-* code someone shared pastes right into the list, or through the paste button.
-*
-* @internal
-*/
-function ThemeList(t0) {
-	let $ = c(48), { actorRef, themes, removed, active } = t0, t1;
-	$[0] === actorRef ? t1 = $[1] : (t1 = { actorRef }, $[0] = actorRef, $[1] = t1);
-	let { addThemeFromClipboard } = useThemeCodes(t1), [pasting, setPasting] = useState(!1), t2;
-	$[2] === actorRef ? t2 = $[3] : (t2 = { actorRef }, $[2] = actorRef, $[3] = t2), usePasteThemeCodes(t2);
-	let t3;
-	$[4] === actorRef ? t3 = $[5] : (t3 = (palette, file) => actorRef.send({
-		type: "theme.add",
-		title: titleFromFileName(file.name),
-		options: optionsFromImagePalette(palette),
-		palette,
-		imageUrl: URL.createObjectURL(file)
-	}), $[4] = actorRef, $[5] = t3);
-	let { busy, pickImage } = useImagePalette(t3), t4;
-	$[6] === actorRef ? t4 = $[7] : (t4 = (order) => actorRef.send({
-		type: "theme.reorder",
-		order
-	}), $[6] = actorRef, $[7] = t4);
-	let t5;
-	$[8] === themes ? t5 = $[9] : (t5 = themes.map(_temp$2), $[8] = themes, $[9] = t5);
-	let t6 = !active, t7;
-	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
-		slug: CONFIG_SLUG,
-		title: CONFIG_TITLE,
-		options: {},
-		source: "config"
-	}, $[10] = t7) : t7 = $[10];
-	let t8;
-	$[11] !== actorRef || $[12] !== t6 || $[13] !== themes ? (t8 = /* @__PURE__ */ jsx(ThemeCard, {
-		actorRef,
-		active: t6,
-		theme: t7,
-		themes
-	}), $[11] = actorRef, $[12] = t6, $[13] = themes, $[14] = t8) : t8 = $[14];
-	let t9;
-	$[15] !== active?.slug || $[16] !== actorRef || $[17] !== themes ? (t9 = themes.map((theme_0) => /* @__PURE__ */ jsx(ThemeCard, {
-		actorRef,
-		active: theme_0.slug === active?.slug,
-		theme: theme_0,
-		themes
-	}, theme_0.slug)), $[15] = active?.slug, $[16] = actorRef, $[17] = themes, $[18] = t9) : t9 = $[18];
-	let t10;
-	$[19] !== t4 || $[20] !== t5 || $[21] !== t8 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsx(MotionConfig, {
-		reducedMotion: "user",
-		children: /* @__PURE__ */ jsxs(Reorder.Group, {
-			as: "div",
-			className: cardGrid,
-			onReorder: t4,
-			values: t5,
-			children: [t8, t9]
-		})
-	}), $[19] = t4, $[20] = t5, $[21] = t8, $[22] = t9, $[23] = t10) : t10 = $[23];
-	let t11;
-	$[24] !== actorRef || $[25] !== removed.length ? (t11 = removed.length > 0 && /* @__PURE__ */ jsx(Button, {
-		gap: 2,
-		icon: RestoreIcon,
-		mode: "bleed",
-		onClick: () => actorRef.send({ type: "flow.removed" }),
-		padding: 2,
-		text: `Show removed (${removed.length})`,
-		width: "fill"
-	}), $[24] = actorRef, $[25] = removed.length, $[26] = t11) : t11 = $[26];
-	let t12;
-	$[27] !== t10 || $[28] !== t11 ? (t12 = /* @__PURE__ */ jsx(ScrollArea, {
-		padding: 3,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			gap: 4,
-			children: [t10, t11]
-		})
-	}), $[27] = t10, $[28] = t11, $[29] = t12) : t12 = $[29];
-	let t13;
-	$[30] === actorRef ? t13 = $[31] : (t13 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		children: /* @__PURE__ */ jsx(TooltipButton, {
-			icon: AddIcon,
-			mode: "ghost",
-			onClick: () => actorRef.send({ type: "theme.add" }),
-			text: "Add theme",
-			tooltip: "Add a theme based on the applied one",
-			width: "fill"
-		})
-	}), $[30] = actorRef, $[31] = t13);
-	let t14;
-	$[32] !== busy || $[33] !== pickImage ? (t14 = /* @__PURE__ */ jsx(ImageFileButton, {
-		loading: busy,
-		mode: "ghost",
-		onFile: pickImage,
-		tooltip: "Add a theme from the colors of an image"
-	}), $[32] = busy, $[33] = pickImage, $[34] = t14) : t14 = $[34];
-	let t15;
-	$[35] === addThemeFromClipboard ? t15 = $[36] : (t15 = /* @__PURE__ */ jsx(TooltipButton, {
-		icon: ClipboardIcon,
-		mode: "ghost",
-		onClick: async () => {
-			await addThemeFromClipboard() !== "added" && setPasting(!0);
-		},
-		tooltip: "Add a theme from a code someone shared"
-	}), $[35] = addThemeFromClipboard, $[36] = t15);
-	let t16;
-	$[37] !== t13 || $[38] !== t14 || $[39] !== t15 ? (t16 = /* @__PURE__ */ jsx(Card, {
-		borderTop: !0,
-		padding: 3,
-		children: /* @__PURE__ */ jsxs(Flex, {
-			gap: 2,
-			children: [
-				t13,
-				t14,
-				t15
-			]
-		})
-	}), $[37] = t13, $[38] = t14, $[39] = t15, $[40] = t16) : t16 = $[40];
-	let t17;
-	$[41] !== actorRef || $[42] !== pasting ? (t17 = pasting && /* @__PURE__ */ jsx(PasteThemeDialog, {
-		actorRef,
-		onClose: () => setPasting(!1)
-	}), $[41] = actorRef, $[42] = pasting, $[43] = t17) : t17 = $[43];
-	let t18;
-	return $[44] !== t12 || $[45] !== t16 || $[46] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Fragment, { children: [
-		t12,
-		t16,
-		t17
-	] }), $[44] = t12, $[45] = t16, $[46] = t17, $[47] = t18) : t18 = $[47], t18;
-}
-function _temp$2(theme) {
-	return theme.slug;
-}
 /**
 * Reduces theme options to the minimal object that recreates them through
 * `buildTheme`: in each scheme the accent is dropped when it is the stock
@@ -2072,7 +1984,7 @@ registerLanguage(typescript);
 * @internal
 */
 function ThemeSnippetDialog(props) {
-	let $ = c(23), { onClose, theme } = props, toast = useToast(), t0;
+	let $ = c(24), { onClose, theme } = props, toast = useToast(), id = useId(), t0;
 	$[0] === theme.options ? t0 = $[1] : (t0 = createThemeSnippet(theme.options), $[0] = theme.options, $[1] = t0);
 	let snippet = t0, t1;
 	$[2] !== snippet || $[3] !== toast ? (t1 = async () => {
@@ -2149,16 +2061,216 @@ function ThemeSnippetDialog(props) {
 		})
 	}), $[16] = t7, $[17] = t8, $[18] = t9) : t9 = $[18];
 	let t10;
-	return $[19] !== onClose || $[20] !== t2 || $[21] !== t9 ? (t10 = /* @__PURE__ */ jsx(Dialog, {
+	return $[19] !== id || $[20] !== onClose || $[21] !== t2 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsx(Dialog, {
 		animate: !0,
 		footer: t2,
 		header: "Add to your config",
-		id: "themer-snippet",
+		id,
 		onClickOutside: onClose,
 		onClose,
 		width: 1,
 		children: t9
-	}), $[19] = onClose, $[20] = t2, $[21] = t9, $[22] = t10) : t10 = $[22], t10;
+	}), $[19] = id, $[20] = onClose, $[21] = t2, $[22] = t9, $[23] = t10) : t10 = $[23], t10;
+}
+var cardGrid = "twjqgh0";
+/**
+* The flow for picking a theme: a grid of theme cards — the configured theme,
+* the presets and the user's own themes — that drag into the order the user
+* wants, with the entry point to the restore flow below. The footer takes the
+* applied theme on to the editor — a copy of it, for a preset or the
+* configured theme — and keeps the ways to add a theme and the applied
+* theme's code behind its menu. A theme code someone shared pastes right into
+* the list too.
+*
+* @internal
+*/
+function ThemeList(t0) {
+	let $ = c(71), { actorRef, themes, removed, active } = t0, t1;
+	$[0] === actorRef ? t1 = $[1] : (t1 = { actorRef }, $[0] = actorRef, $[1] = t1);
+	let { addThemeFromClipboard } = useThemeCodes(t1), dialog = useSelector(actorRef, selectDialog), imageInputRef = useRef(null), actionsId = useId(), t2;
+	$[2] === actorRef ? t2 = $[3] : (t2 = { actorRef }, $[2] = actorRef, $[3] = t2), usePasteThemeCodes(t2);
+	let t3;
+	$[4] === actorRef ? t3 = $[5] : (t3 = (palette, file) => actorRef.send({
+		type: "theme.add",
+		title: titleFromFileName(file.name),
+		options: optionsFromImagePalette(palette),
+		palette,
+		imageUrl: URL.createObjectURL(file)
+	}), $[4] = actorRef, $[5] = t3);
+	let { busy, pickImage } = useImagePalette(t3), t4;
+	$[6] === actorRef ? t4 = $[7] : (t4 = (order) => actorRef.send({
+		type: "theme.reorder",
+		order
+	}), $[6] = actorRef, $[7] = t4);
+	let t5;
+	$[8] === themes ? t5 = $[9] : (t5 = themes.map(_temp$2), $[8] = themes, $[9] = t5);
+	let t6 = !active, t7;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
+		slug: CONFIG_SLUG,
+		title: CONFIG_TITLE,
+		options: {},
+		source: "config"
+	}, $[10] = t7) : t7 = $[10];
+	let t8;
+	$[11] !== actorRef || $[12] !== t6 || $[13] !== themes ? (t8 = /* @__PURE__ */ jsx(ThemeCard, {
+		actorRef,
+		active: t6,
+		theme: t7,
+		themes
+	}), $[11] = actorRef, $[12] = t6, $[13] = themes, $[14] = t8) : t8 = $[14];
+	let t9;
+	$[15] !== active?.slug || $[16] !== actorRef || $[17] !== themes ? (t9 = themes.map((theme_0) => /* @__PURE__ */ jsx(ThemeCard, {
+		actorRef,
+		active: theme_0.slug === active?.slug,
+		theme: theme_0,
+		themes
+	}, theme_0.slug)), $[15] = active?.slug, $[16] = actorRef, $[17] = themes, $[18] = t9) : t9 = $[18];
+	let t10;
+	$[19] !== t4 || $[20] !== t5 || $[21] !== t8 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs(Reorder.Group, {
+			as: "div",
+			className: cardGrid,
+			onReorder: t4,
+			values: t5,
+			children: [t8, t9]
+		})
+	}), $[19] = t4, $[20] = t5, $[21] = t8, $[22] = t9, $[23] = t10) : t10 = $[23];
+	let t11;
+	$[24] !== actorRef || $[25] !== removed.length ? (t11 = removed.length > 0 && /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: RestoreIcon,
+		mode: "bleed",
+		onClick: () => actorRef.send({ type: "flow.removed" }),
+		padding: 2,
+		text: `Show removed (${removed.length})`,
+		width: "fill"
+	}), $[24] = actorRef, $[25] = removed.length, $[26] = t11) : t11 = $[26];
+	let t12;
+	$[27] !== t10 || $[28] !== t11 ? (t12 = /* @__PURE__ */ jsx(ScrollArea, {
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [t10, t11]
+		})
+	}), $[27] = t10, $[28] = t11, $[29] = t12) : t12 = $[29];
+	let t13;
+	$[30] !== active || $[31] !== actorRef ? (t13 = active?.source === "custom" ? /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: EditIcon,
+		onClick: () => actorRef.send({
+			type: "theme.edit",
+			slug: active.slug
+		}),
+		padding: 2,
+		text: "Edit",
+		mode: "ghost"
+	}) : /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: CopyIcon,
+		onClick: () => actorRef.send({
+			type: "theme.duplicate",
+			slug: active?.slug ?? "config"
+		}),
+		padding: 2,
+		text: "Duplicate & Edit",
+		mode: "ghost"
+	}), $[30] = active, $[31] = actorRef, $[32] = t13) : t13 = $[32];
+	let t14;
+	$[33] === busy ? t14 = $[34] : (t14 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": "More actions",
+		icon: EllipsisHorizontalIcon,
+		loading: busy,
+		mode: "bleed",
+		padding: 2
+	}), $[33] = busy, $[34] = t14);
+	let t15;
+	$[35] === actorRef ? t15 = $[36] : (t15 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: AddIcon,
+		onClick: () => actorRef.send({ type: "theme.add" }),
+		text: "Add theme"
+	}), $[35] = actorRef, $[36] = t15);
+	let t16;
+	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: ImageIcon,
+		onClick: () => imageInputRef.current?.click(),
+		text: "Add from image"
+	}), $[37] = t16) : t16 = $[37];
+	let t17;
+	$[38] !== actorRef || $[39] !== addThemeFromClipboard ? (t17 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: ClipboardIcon,
+		onClick: async () => {
+			await addThemeFromClipboard() !== "added" && actorRef.send({ type: "dialog.paste" });
+		},
+		text: "Add from code"
+	}), $[38] = actorRef, $[39] = addThemeFromClipboard, $[40] = t17) : t17 = $[40];
+	let t18;
+	$[41] !== active || $[42] !== actorRef ? (t18 = active && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
+		icon: CodeBlockIcon,
+		onClick: () => actorRef.send({ type: "dialog.snippet" }),
+		text: "Show theme code"
+	})] }), $[41] = active, $[42] = actorRef, $[43] = t18) : t18 = $[43];
+	let t19;
+	$[44] !== t15 || $[45] !== t17 || $[46] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Menu, { children: [
+		t15,
+		t16,
+		t17,
+		t18
+	] }), $[44] = t15, $[45] = t17, $[46] = t18, $[47] = t19) : t19 = $[47];
+	let t20;
+	$[48] === Symbol.for("react.memo_cache_sentinel") ? (t20 = {
+		animate: !0,
+		placement: "top-end",
+		portal: !0
+	}, $[48] = t20) : t20 = $[48];
+	let t21;
+	$[49] !== actionsId || $[50] !== t14 || $[51] !== t19 ? (t21 = /* @__PURE__ */ jsx(MenuButton, {
+		button: t14,
+		id: actionsId,
+		menu: t19,
+		popover: t20
+	}), $[49] = actionsId, $[50] = t14, $[51] = t19, $[52] = t21) : t21 = $[52];
+	let t22;
+	$[53] !== t13 || $[54] !== t21 ? (t22 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: 2,
+			justify: "flex-end",
+			children: [t13, t21]
+		})
+	}), $[53] = t13, $[54] = t21, $[55] = t22) : t22 = $[55];
+	let t23;
+	$[56] === pickImage ? t23 = $[57] : (t23 = /* @__PURE__ */ jsx(ImageFileInput, {
+		onFile: pickImage,
+		ref: imageInputRef
+	}), $[56] = pickImage, $[57] = t23);
+	let t24;
+	$[58] !== actorRef || $[59] !== dialog ? (t24 = dialog === "paste" && /* @__PURE__ */ jsx(PasteThemeDialog, {
+		actorRef,
+		onClose: () => actorRef.send({ type: "dialog.close" })
+	}), $[58] = actorRef, $[59] = dialog, $[60] = t24) : t24 = $[60];
+	let t25;
+	$[61] !== active || $[62] !== actorRef || $[63] !== dialog ? (t25 = dialog === "snippet" && active && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
+		onClose: () => actorRef.send({ type: "dialog.close" }),
+		theme: active
+	}), $[61] = active, $[62] = actorRef, $[63] = dialog, $[64] = t25) : t25 = $[64];
+	let t26;
+	return $[65] !== t12 || $[66] !== t22 || $[67] !== t23 || $[68] !== t24 || $[69] !== t25 ? (t26 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		t12,
+		t22,
+		t23,
+		t24,
+		t25
+	] }), $[65] = t12, $[66] = t22, $[67] = t23, $[68] = t24, $[69] = t25, $[70] = t26) : t26 = $[70], t26;
+}
+function _temp$2(theme) {
+	return theme.slug;
+}
+/** The dialog the list has open, if any — a state of the machine's list flow */
+function selectDialog(snapshot) {
+	return snapshot.matches({ flow: { list: "pasting" } }) ? "paste" : snapshot.matches({ flow: { list: "snippet" } }) ? "snippet" : null;
 }
 function useIsTooSmallForSplitScreen() {
 	return useMediaIndex() <= 3;
@@ -2170,37 +2282,31 @@ const VIEW_TITLES = {
 	removed: "Removed themes"
 };
 /**
-* The themer sidebar: a header that navigates between the flows and toggles
-* the split preview, the flow itself — picking a theme, editing one, or
-* restoring removed ones — and the dialog with the `buildTheme` snippet of
-* the applied theme.
+* The themer sidebar: a header with the flow's title, the split preview
+* toggle and the close button, and the flow itself — picking a theme, editing
+* one, or restoring removed ones. Each flow ends in a footer like the
+* Studio's document footer: one primary action, with the rest of its actions
+* behind a menu button, and the way back to the list where the flow is not
+* the list.
 *
 * @internal
 */
 function ThemerSidebar(t0) {
-	let $ = c(58), { actorRef, dispatch, navbarHeight, split } = t0, [snippetOpen, setSnippetOpen] = useState(!1), view = useSelector(actorRef, selectView, sameView), inList = view.name === "list", isTooSmallForSplitScreen = useIsTooSmallForSplitScreen(), { themes, removed, active } = useSelector(actorRef, _temp$1, dequal), t1;
+	let $ = c(46), { actorRef, dispatch, navbarHeight, split } = t0, view = useSelector(actorRef, selectView, sameView), isTooSmallForSplitScreen = useIsTooSmallForSplitScreen(), { themes, removed, active } = useSelector(actorRef, _temp$1, dequal), t1;
 	$[0] === navbarHeight ? t1 = $[1] : (t1 = navbarHeight === null ? void 0 : { height: navbarHeight }, $[0] = navbarHeight, $[1] = t1);
-	let t2;
-	$[2] !== actorRef || $[3] !== inList ? (t2 = !inList && /* @__PURE__ */ jsx(TooltipButton, {
-		icon: ArrowLeftIcon,
-		mode: "bleed",
-		onClick: () => actorRef.send({ type: "flow.list" }),
-		padding: 2,
-		tooltip: "Back to the themes"
-	}), $[2] = actorRef, $[3] = inList, $[4] = t2) : t2 = $[4];
-	let t3 = VIEW_TITLES[view.name], t4;
-	$[5] === t3 ? t4 = $[6] : (t4 = /* @__PURE__ */ jsx(Box, {
+	let t2 = VIEW_TITLES[view.name], t3;
+	$[2] === t2 ? t3 = $[3] : (t3 = /* @__PURE__ */ jsx(Box, {
 		className: title,
 		flex: 1,
 		children: /* @__PURE__ */ jsx(Text, {
 			size: 1,
 			textOverflow: "ellipsis",
 			weight: "semibold",
-			children: t3
+			children: t2
 		})
-	}), $[5] = t3, $[6] = t4);
-	let t5;
-	$[7] !== active || $[8] !== dispatch || $[9] !== isTooSmallForSplitScreen || $[10] !== split || $[11] !== view.name ? (t5 = view.name !== "removed" && /* @__PURE__ */ jsxs(Fragment, { children: [!isTooSmallForSplitScreen && /* @__PURE__ */ jsx(TooltipButton, {
+	}), $[2] = t2, $[3] = t3);
+	let t4;
+	$[4] !== dispatch || $[5] !== isTooSmallForSplitScreen || $[6] !== split ? (t4 = !isTooSmallForSplitScreen && /* @__PURE__ */ jsx(TooltipButton, {
 		"aria-pressed": split,
 		icon: SplitVerticalIcon,
 		mode: "bleed",
@@ -2214,15 +2320,9 @@ function ThemerSidebar(t0) {
 		padding: 2,
 		selected: split,
 		tooltip: "Show light and dark side by side"
-	}), active && /* @__PURE__ */ jsx(TooltipButton, {
-		icon: CodeBlockIcon,
-		mode: "bleed",
-		onClick: () => setSnippetOpen(!0),
-		padding: 2,
-		tooltip: "Show the code for the applied theme"
-	})] }), $[7] = active, $[8] = dispatch, $[9] = isTooSmallForSplitScreen, $[10] = split, $[11] = view.name, $[12] = t5) : t5 = $[12];
-	let t6;
-	$[13] !== dispatch || $[14] !== split ? (t6 = /* @__PURE__ */ jsx(TooltipButton, {
+	}), $[4] = dispatch, $[5] = isTooSmallForSplitScreen, $[6] = split, $[7] = t4) : t4 = $[7];
+	let t5;
+	$[8] !== dispatch || $[9] !== split ? (t5 = /* @__PURE__ */ jsx(TooltipButton, {
 		icon: CloseIcon,
 		mode: "bleed",
 		onClick: () => startTransition(() => {
@@ -2230,79 +2330,68 @@ function ThemerSidebar(t0) {
 		}),
 		padding: 2,
 		tooltip: "Close themer"
-	}), $[13] = dispatch, $[14] = split, $[15] = t6) : t6 = $[15];
+	}), $[8] = dispatch, $[9] = split, $[10] = t5) : t5 = $[10];
+	let t6;
+	$[11] !== t4 || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Flex, { children: [t4, t5] }), $[11] = t4, $[12] = t5, $[13] = t6) : t6 = $[13];
 	let t7;
-	$[16] !== t5 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, { children: [t5, t6] }), $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18];
-	let t8;
-	$[19] !== t2 || $[20] !== t4 || $[21] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Flex, {
+	$[14] !== t3 || $[15] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		gap: 1,
 		height: "fill",
-		children: [
-			t2,
-			t4,
-			t7
-		]
-	}), $[19] = t2, $[20] = t4, $[21] = t7, $[22] = t8) : t8 = $[22];
-	let t9;
-	$[23] !== t1 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, {
+		children: [t3, t6]
+	}), $[14] = t3, $[15] = t6, $[16] = t7) : t7 = $[16];
+	let t8;
+	$[17] !== t1 || $[18] !== t7 ? (t8 = /* @__PURE__ */ jsx(Card, {
 		borderBottom: !0,
 		padding: 3,
 		sizing: "border",
 		style: t1,
-		children: t8
-	}), $[23] = t1, $[24] = t8, $[25] = t9) : t9 = $[25];
-	let t10 = view.name === "list" ? "visible" : "hidden", t11;
-	$[26] !== active || $[27] !== actorRef || $[28] !== removed || $[29] !== themes ? (t11 = /* @__PURE__ */ jsx(ThemeList, {
+		children: t7
+	}), $[17] = t1, $[18] = t7, $[19] = t8) : t8 = $[19];
+	let t9 = view.name === "list" ? "visible" : "hidden", t10;
+	$[20] !== active || $[21] !== actorRef || $[22] !== removed || $[23] !== themes ? (t10 = /* @__PURE__ */ jsx(ThemeList, {
 		actorRef,
 		active,
 		removed,
 		themes
-	}), $[26] = active, $[27] = actorRef, $[28] = removed, $[29] = themes, $[30] = t11) : t11 = $[30];
+	}), $[20] = active, $[21] = actorRef, $[22] = removed, $[23] = themes, $[24] = t10) : t10 = $[24];
+	let t11;
+	$[25] !== t10 || $[26] !== t9 ? (t11 = /* @__PURE__ */ jsx(Activity, {
+		mode: t9,
+		children: t10
+	}, "list"), $[25] = t10, $[26] = t9, $[27] = t11) : t11 = $[27];
 	let t12;
-	$[31] !== t10 || $[32] !== t11 ? (t12 = /* @__PURE__ */ jsx(Activity, {
-		mode: t10,
-		children: t11
-	}, "list"), $[31] = t10, $[32] = t11, $[33] = t12) : t12 = $[33];
-	let t13;
-	$[34] !== actorRef || $[35] !== split || $[36] !== themes || $[37] !== view.focusTitle || $[38] !== view.name || $[39] !== view.slug ? (t13 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
+	$[28] !== actorRef || $[29] !== split || $[30] !== themes || $[31] !== view.focusTitle || $[32] !== view.name || $[33] !== view.slug ? (t12 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
 		actorRef,
 		focusTitle: view.focusTitle,
 		slug: view.slug,
 		split,
 		themes
-	}), $[34] = actorRef, $[35] = split, $[36] = themes, $[37] = view.focusTitle, $[38] = view.name, $[39] = view.slug, $[40] = t13) : t13 = $[40];
-	let t14 = view.name === "removed" ? "visible" : "hidden", t15;
-	$[41] !== actorRef || $[42] !== removed ? (t15 = /* @__PURE__ */ jsx(RemovedThemes, {
+	}), $[28] = actorRef, $[29] = split, $[30] = themes, $[31] = view.focusTitle, $[32] = view.name, $[33] = view.slug, $[34] = t12) : t12 = $[34];
+	let t13 = view.name === "removed" ? "visible" : "hidden", t14;
+	$[35] !== actorRef || $[36] !== removed ? (t14 = /* @__PURE__ */ jsx(RemovedThemes, {
 		actorRef,
 		removed
-	}), $[41] = actorRef, $[42] = removed, $[43] = t15) : t15 = $[43];
+	}), $[35] = actorRef, $[36] = removed, $[37] = t14) : t14 = $[37];
+	let t15;
+	$[38] !== t13 || $[39] !== t14 ? (t15 = /* @__PURE__ */ jsx(Activity, {
+		mode: t13,
+		children: t14
+	}, "removed"), $[38] = t13, $[39] = t14, $[40] = t15) : t15 = $[40];
 	let t16;
-	$[44] !== t14 || $[45] !== t15 ? (t16 = /* @__PURE__ */ jsx(Activity, {
-		mode: t14,
-		children: t15
-	}, "removed"), $[44] = t14, $[45] = t15, $[46] = t16) : t16 = $[46];
-	let t17;
-	$[47] !== t12 || $[48] !== t13 || $[49] !== t16 || $[50] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, {
-		direction: "column",
+	return $[41] !== t11 || $[42] !== t12 || $[43] !== t15 || $[44] !== t8 ? (t16 = /* @__PURE__ */ jsx(Card, {
 		height: "fill",
-		children: [
-			t9,
-			t12,
-			t13,
-			t16
-		]
-	}), $[47] = t12, $[48] = t13, $[49] = t16, $[50] = t9, $[51] = t17) : t17 = $[51];
-	let t18;
-	$[52] !== active || $[53] !== snippetOpen ? (t18 = active && snippetOpen && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
-		onClose: () => setSnippetOpen(!1),
-		theme: active
-	}), $[52] = active, $[53] = snippetOpen, $[54] = t18) : t18 = $[54];
-	let t19;
-	return $[55] !== t17 || $[56] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Card, {
-		height: "fill",
-		children: [t17, t18]
-	}), $[55] = t17, $[56] = t18, $[57] = t19) : t19 = $[57], t19;
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			height: "fill",
+			children: [
+				t8,
+				t11,
+				t12,
+				t15
+			]
+		})
+	}), $[41] = t11, $[42] = t12, $[43] = t15, $[44] = t8, $[45] = t16) : t16 = $[45], t16;
 }
 function _temp$1(snapshot) {
 	return resolveThemes(snapshot.context);
@@ -2434,4 +2523,4 @@ function ResizableSidebar(t0) {
 function _temp() {}
 export { ResizableSidebar as default };
 
-//# sourceMappingURL=ResizableSidebar-BpgLA4XQ.js.map
+//# sourceMappingURL=ResizableSidebar-C1nr3Ls2.js.map