@sanity/themer 0.9.0 → 0.10.1

package/dist/tool.js

@@ -1,10 +1,10 @@
 import "@sanity/themer/bundle.css";
 import { l as isColor, n as buildTheme, o as SCHEMES, t as presets } from "./presets-CqBgS3A-.js";
-import { a as displayTitle, c as resolveThemes, d as viewTransitionClasses, f as NAVBAR_SELECTOR, i as createCustomTheme, l as addThemerTransitionType, n as CONFIG_TITLE, o as duplicateTitle, s as initialThemerState, u as layout } from "./themes-Bxgltjmb.js";
+import { a as displayTitle, c as resolveThemes, d as viewTransitionClasses, f as NAVBAR_SELECTOR, i as createCustomTheme, l as addThemerTransitionType, n as CONFIG_TITLE, o as duplicateTitle, s as initialThemerState, u as layout } from "./themes-au1BLKmY.js";
 import { c } from "react/compiler-runtime";
 import { definePlugin, useColorSchemeValue } from "sanity";
 import { ColorWheelIcon } from "@sanity/icons/ColorWheel";
-import { BoundaryElementProvider, Box, Button, Card, Flex, Text, ThemeProvider, useMediaIndex } from "@sanity/ui";
+import { BoundaryElementProvider, Box, Button, Card, Flex, Text, ThemeProvider, useMediaIndex, usePrefersReducedMotion } from "@sanity/ui";
 import { Tooltip } from "@sanity/ui/tooltip";
 import { Activity, Suspense, ViewTransition, createContext, lazy, startTransition, use, useEffect, useReducer, useRef, useState, useTransition } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -16,11 +16,11 @@ import { assign, not, setup } from "xstate";
 /** @internal */
 const ToolIsOpenContext = createContext(!1), ToolDispatchContext = createContext(() => {
 	throw Error("ToolDispatchContext not initialized");
-}), ToolSplitIsOpenContext = createContext(!1), ToolShouldDetectNavbarHeightContext = createContext(!1), PluginConfigContext = createContext(null), AnimatedColorWheelIcon = lazy(() => import("./AnimatedColorWheelIcon-DEy-cy3X.js"));
+}), ToolSplitIsOpenContext = createContext(!1), ToolShouldDetectNavbarHeightContext = createContext(!1), PluginConfigContext = createContext(null), AnimatedColorWheelIcon = lazy(() => import("./AnimatedColorWheelIcon-CwWOVAsw.js"));
 function ThemerNavbarButton() {
 	let $ = c(27), config = use(PluginConfigContext), dispatch = use(ToolDispatchContext), open = use(ToolIsOpenContext), shouldDetectNavbarHeight = use(ToolShouldDetectNavbarHeightContext), split = use(ToolSplitIsOpenContext);
 	if (!config) throw TypeError("PluginConfigContext.Provider is missing");
-	let [busy, startBusyTransition] = useTransition(), iconRef = useRef(null), t0;
+	let [busy, startBusyTransition] = useTransition(), iconRef = useRef(null), prefersReducedMotion = usePrefersReducedMotion(), t0;
 	$[0] !== dispatch || $[1] !== split ? (t0 = () => startBusyTransition(() => {
 		split && addThemerTransitionType("split-screen:open"), addThemerTransitionType("open"), dispatch({ type: "open" });
 	}), $[0] = dispatch, $[1] = split, $[2] = t0) : t0 = $[2];
@@ -51,59 +51,56 @@ function ThemerNavbarButton() {
 		children: title
 	}), $[11] = title, $[12] = t4);
 	let t5 = shouldDetectNavbarHeight ? observeNavbarHeight : void 0, t6;
-	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsx(ColorWheelIcon, {}), $[13] = t6) : t6 = $[13];
-	let t7;
-	$[14] === busy ? t7 = $[15] : (t7 = /* @__PURE__ */ jsx(Suspense, {
-		fallback: t6,
+	$[13] !== busy || $[14] !== prefersReducedMotion ? (t6 = prefersReducedMotion ? /* @__PURE__ */ jsx(ColorWheelIcon, {}) : /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(ColorWheelIcon, {}),
 		children: /* @__PURE__ */ jsx(AnimatedColorWheelIcon, {
 			busy,
 			ref: iconRef
 		})
-	}), $[14] = busy, $[15] = t7);
-	let t8 = open ? handleClose : handleOpen, t9 = open || busy, t10;
-	$[16] !== busy || $[17] !== handlePrerender || $[18] !== t5 || $[19] !== t7 || $[20] !== t8 || $[21] !== t9 || $[22] !== title ? (t10 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ViewTransition, {
+	}), $[13] = busy, $[14] = prefersReducedMotion, $[15] = t6) : t6 = $[15];
+	let t7 = open ? handleClose : handleOpen, t8 = open || busy, t9;
+	$[16] !== busy || $[17] !== handlePrerender || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== title ? (t9 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ViewTransition, {
 		default: "none",
 		update: viewTransitionClasses.navbarButton.update,
 		children: /* @__PURE__ */ jsx(Button, {
 			ref: t5,
 			"aria-busy": busy,
 			"aria-label": title,
-			icon: t7,
+			icon: t6,
 			mode: "bleed",
-			onClick: t8,
+			onClick: t7,
 			onFocus: handlePrerender,
 			onMouseEnter: handlePrerender,
 			padding: 2,
-			selected: t9
+			selected: t8
 		})
-	}) }), $[16] = busy, $[17] = handlePrerender, $[18] = t5, $[19] = t7, $[20] = t8, $[21] = t9, $[22] = title, $[23] = t10) : t10 = $[23];
-	let t11;
-	return $[24] !== t10 || $[25] !== t4 ? (t11 = /* @__PURE__ */ jsx(ViewTransition, {
+	}) }), $[16] = busy, $[17] = handlePrerender, $[18] = t5, $[19] = t6, $[20] = t7, $[21] = t8, $[22] = title, $[23] = t9) : t9 = $[23];
+	let t10;
+	return $[24] !== t4 || $[25] !== t9 ? (t10 = /* @__PURE__ */ jsx(ViewTransition, {
 		default: "none",
 		update: viewTransitionClasses.navbarButtonTooltip.update,
 		children: /* @__PURE__ */ jsx(Tooltip, {
 			animate: !0,
 			content: t4,
 			portal: !0,
-			children: t10
+			children: t9
 		})
-	}), $[24] = t10, $[25] = t4, $[26] = t11) : t11 = $[26], t11;
+	}), $[24] = t4, $[25] = t9, $[26] = t10) : t10 = $[26], t10;
 }
 function ThemerNavbar(props) {
-	"use memo";
-	let $ = c(4), t0;
-	if ($[0] !== props) {
-		let button = {
-			location: "topbar",
-			name: "themer-topbar",
-			render: ThemerNavbarButton
-		}, t1;
-		$[2] === props.__internal_actions ? t1 = $[3] : (t1 = props.__internal_actions ?? [], $[2] = props.__internal_actions, $[3] = t1), t0 = props.renderDefault({
-			...props,
-			__internal_actions: [...t1, button]
-		}), $[0] = props, $[1] = t0;
-	} else t0 = $[1];
-	return t0;
+	let $ = c(6), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
+		location: "topbar",
+		name: "themer-topbar",
+		render: ThemerNavbarButton
+	}, $[0] = t0) : t0 = $[0];
+	let button = t0, t1;
+	$[1] === props.__internal_actions ? t1 = $[2] : (t1 = props.__internal_actions ?? [], $[1] = props.__internal_actions, $[2] = t1);
+	let t2;
+	return $[3] !== props || $[4] !== t1 ? (t2 = props.renderDefault({
+		...props,
+		__internal_actions: [...t1, button]
+	}), $[3] = props, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
 }
 function ThemerNavbarProvider(t0) {
 	let $ = c(15), { children, config, dispatch, open, shouldDetectNavbarHeight, split } = t0, t1 = shouldDetectNavbarHeight ?? !1, t2;
@@ -175,6 +172,11 @@ function toolReducer(state, action) {
 		default: throw Error(`Unknown themer tool action: ${JSON.stringify(action)}`);
 	}
 }
+/**
+* Where a tab starts: closed, nothing prerendered, no theme applied —
+* `ThemerProvider` seeds only the applied theme, from the machine's restored
+* snapshot
+*/
 const initialToolState = {
 	navbarHeight: null,
 	open: !1,
@@ -283,13 +285,17 @@ function parseThemerState(input) {
 	let result = v.safeParse(themerStateSchema, input);
 	return result.success ? result.output : null;
 }
-/** The machine's state value, as persisted — only what the machine has states for restores @internal */
-const snapshotValueSchema = v.object({
-	flow: v.picklist([
-		"list",
-		"edit",
-		"removed"
-	]),
+/** The flows a session restores to */
+const flowSchema = v.picklist([
+	"list",
+	"edit",
+	"removed"
+]), snapshotValueSchema = v.object({
+	flow: v.union([flowSchema, v.object({ list: v.picklist([
+		"idle",
+		"pasting",
+		"snippet"
+	]) })]),
 	theme: v.picklist(["applied", "switching"])
 });
 /**
@@ -322,8 +328,9 @@ function snapshotFromState(state, editing = null, flow = "list") {
 /**
 * The machine's snapshot as the last session persisted it, made fit for this
 * one: the themes are parsed like any persisted state, the flow keeps its
-* subject or falls back to the list, a switch that was under way is over,
-* and the image URLs of the last session are gone with it.
+* subject or falls back to the list, a dialog that was open is closed, a
+* switch that was under way is over, and the image URLs of the last session
+* are gone with it.
 *
 * @internal
 */
@@ -344,7 +351,7 @@ const persistedSnapshotSchema = v.pipe(v.object({
 		removed: [],
 		order: []
 	}, editing = context.editing && state.custom.some((theme) => theme.slug === context.editing?.slug) && !state.removed.includes(context.editing.slug) ? context.editing : null;
-	return snapshotFromState(state, editing, value.flow === "edit" && editing === null || value.flow === "removed" && state.removed.length === 0 ? "list" : value.flow);
+	return snapshotFromState(state, editing, typeof value.flow != "string" || value.flow === "edit" && editing === null || value.flow === "removed" && state.removed.length === 0 ? "list" : value.flow);
 })), SNAPSHOT_STORAGE_KEY = "sanityStudio:themer:snapshot", STATE_STORAGE_KEY = "sanityStudio:themer:state", LEGACY_STORAGE_KEY = "sanityStudio:themer:options", LEGACY_DRAFT = {
 	slug: "custom-draft",
 	title: "Draft theme"
@@ -418,18 +425,20 @@ function revokeObjectUrl(url) {
 }
 /**
 * The themes of the themer tool and the sidebar's way through them: which
-* `flow` the sidebar is in — picking a theme from the `list`, `edit`ing one of
-* the user's own themes, or restoring `removed` ones — and, in a parallel
-* `theme` region, whether another theme was just applied. The context carries
-* the persisted state (the applied theme, the user's themes and what was
-* removed) alongside what the flows need. Whether the sidebar is open and
-* whether the Studio shows twice is not the machine's: the tool reducer in
-* `ThemerProvider` owns that, so that the navbar toggle and the sidebar can
-* change it in transitions of their own. Nor is persisting: the machine
-* never touches storage and takes no input — it starts from no themes, and a
-* session with something to pick up from restores its persisted snapshot
-* instead (see `storage.ts` and `sync.ts`), while the persisted state of
-* other tabs reaches it as a `themes.sync` event like any other.
+* `flow` the sidebar is in — picking a theme from the `list`, with its
+* dialogs for pasting a shared code and for the applied theme's snippet,
+* `edit`ing one of the user's own themes, or restoring `removed` ones — and,
+* in a parallel `theme` region, whether another theme was just applied. The
+* context carries the persisted state (the applied theme, the user's themes
+* and what was removed) alongside what the flows need. Whether the sidebar is
+* open and whether the Studio shows twice is not the machine's: the tool
+* reducer in `ThemerProvider` owns that, so that the navbar toggle and the
+* sidebar can change it in transitions of their own. Nor is persisting: the
+* machine never touches storage and takes no input — it starts from no
+* themes, and a session with something to pick up from restores its
+* persisted snapshot instead (see `storage.ts` and `sync.ts`), while the
+* persisted state of other tabs reaches it as a `themes.sync` event like any
+* other.
 *
 * The `theme` region is `switching` (its tag) right after an event that
 * applies another theme — picking one, adding, duplicating, importing or
@@ -453,6 +462,7 @@ const themerMachine = setup({
 		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,
+		hasAppliedTheme: ({ context }) => themesOf(context).active !== void 0,
 		isAnotherTheme: ({ context }, params) => params.slug !== (context.active ?? "config"),
 		isAppliedTheme: ({ context }, params) => params.slug === context.active,
 		appliesAnotherTheme: ({ context }, params) => params.state.active !== context.active,
@@ -768,7 +778,26 @@ const themerMachine = setup({
 				}
 			},
 			states: {
-				list: {},
+				list: {
+					initial: "idle",
+					states: {
+						idle: { on: {
+							"dialog.paste": "pasting",
+							"dialog.snippet": {
+								guard: "hasAppliedTheme",
+								target: "snippet"
+							}
+						} },
+						pasting: { on: { "dialog.close": "idle" } },
+						snippet: {
+							on: { "dialog.close": "idle" },
+							always: {
+								guard: not("hasAppliedTheme"),
+								target: "idle"
+							}
+						}
+					}
+				},
 				edit: {
 					exit: "stopEditing",
 					always: {
@@ -784,57 +813,225 @@ const themerMachine = setup({
 		}
 	}
 });
+/** The part of the machine context that is persisted between sessions @internal */
+function selectStoredState(snapshot) {
+	let { active, custom, removed, order } = snapshot.context;
+	return {
+		active,
+		custom,
+		removed,
+		order
+	};
+}
+/** The channel every tab of the same origin shares — one Studio, one set of themes */
+const PERSIST_TIMEOUT = 1e3;
+function openBroadcastChannel() {
+	if (typeof BroadcastChannel != "function") return null;
+	let channel = new BroadcastChannel("sanity-themer");
+	return {
+		post: (message) => channel.postMessage(message),
+		listen: (listener) => {
+			let onMessage = (event) => listener(event.data);
+			return channel.addEventListener("message", onMessage), () => channel.removeEventListener("message", onMessage);
+		},
+		close: () => channel.close()
+	};
+}
+function browserLocks() {
+	return typeof navigator < "u" && "locks" in navigator ? navigator.locks : void 0;
+}
+function scheduleIdle(callback) {
+	if (typeof requestIdleCallback == "function") {
+		let id = requestIdleCallback(callback, { timeout: PERSIST_TIMEOUT });
+		return () => cancelIdleCallback(id);
+	}
+	let id = setTimeout(callback, PERSIST_TIMEOUT);
+	return () => clearTimeout(id);
+}
+function parseMessage(data) {
+	if (!data || typeof data != "object") return null;
+	let type = Reflect.get(data, "type");
+	if (type === "hello") {
+		let from = Reflect.get(data, "from");
+		return typeof from == "string" ? {
+			type,
+			from
+		} : null;
+	}
+	if (type === "state") {
+		let state = parseThemerState(Reflect.get(data, "state")), revision = Reflect.get(data, "revision"), from = Reflect.get(data, "from"), to = Reflect.get(data, "to");
+		return !state || typeof revision != "number" || !Number.isFinite(revision) || typeof from != "string" ? null : {
+			type,
+			state,
+			revision,
+			from,
+			...typeof to == "string" ? { to } : {}
+		};
+	}
+	return null;
+}
+function tabId() {
+	return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+}
+/**
+* Keeps the themes of every tab of the Studio the same, and persists them
+* from one tab only.
+*
+* Every tab runs its own machine, and what the machine persists — the
+* applied theme, the user's themes, what was removed and reordered — goes
+* around to the other tabs on a `BroadcastChannel` as it changes, where it
+* reaches their machines as a `themes.sync` event: the same themes
+* everywhere, with the flow each tab is in, the tool's open and split state
+* (the reducer's, in `plugin.tsx`) and the images of this session staying
+* the tab's own. A tab that starts asks the others for the current state,
+* in case what it read from storage was not written yet.
+*
+* Persisting is the business of one tab at a time: the one holding the Web
+* Lock, which it keeps for as long as it lives. The others queue for it, so
+* the next tab takes over as the holder goes away, and a tab that takes
+* over persists right away, in case the last one left with a write pending.
+* Writes happen when the browser is idle — a run of edits is written once —
+* and as the page hides, so that nothing pending is lost.
+*
+* Returns what stops the sync: it lets go of the lock, which hands the
+* persisting on, and closes the channel.
+*
+* @internal
+*/
+function syncThemer(actorRef, options) {
+	let { persist, openChannel = openBroadcastChannel, schedule = scheduleIdle } = options, channel = openChannel(), locks = channel ? "locks" in options ? options.locks : browserLocks() : void 0, id = tabId(), abort = new AbortController(), leader = !1, cancelPersist, applying = !1, shared = selectStoredState(actorRef.getSnapshot()), revision = 0, origin = id, unchanged = !0, unanswered = /* @__PURE__ */ new Set(), isNewer = (message) => message.revision > revision || message.revision === revision && message.from > origin, persistNow = () => {
+		cancelPersist?.(), cancelPersist = void 0, persist(actorRef.getPersistedSnapshot());
+	}, persistSoon = () => {
+		cancelPersist?.(), cancelPersist = schedule(persistNow);
+	}, answer = (to) => {
+		channel?.post({
+			type: "state",
+			state: shared,
+			revision,
+			from: origin,
+			to
+		});
+	}, becomeLeader = () => {
+		leader = !0, persistNow();
+		for (let from of unanswered) answer(from);
+		unanswered.clear();
+	};
+	locks ? locks.request("sanity-themer:persist", { signal: abort.signal }, () => (becomeLeader(), new Promise((resolve) => {
+		abort.signal.addEventListener("abort", () => resolve(), { once: !0 });
+	}))).catch(() => {}) : becomeLeader();
+	let subscription = actorRef.subscribe((snapshot) => {
+		if (leader && persistSoon(), applying) return;
+		let state = selectStoredState(snapshot);
+		dequal(state, shared) || (shared = state, unchanged = !1, revision += 1, origin = id, channel?.post({
+			type: "state",
+			state,
+			revision,
+			from: id
+		}));
+	});
+	channel && (channel.listen((data) => {
+		let message = parseMessage(data);
+		if (message) {
+			if (message.type === "hello") {
+				leader ? answer(message.from) : unanswered.add(message.from);
+				return;
+			}
+			if (message.to !== void 0) {
+				if (message.to !== id) return;
+				if (!unchanged) {
+					if (origin === id) {
+						revision = Math.max(revision, message.revision) + 1, channel.post({
+							type: "state",
+							state: shared,
+							revision,
+							from: id
+						});
+						return;
+					}
+					if (!isNewer(message)) return;
+				}
+			} else if (!isNewer(message)) return;
+			if (revision = message.revision, origin = message.from, !dequal(message.state, shared)) {
+				shared = message.state, unchanged = !1, applying = !0;
+				try {
+					actorRef.send({
+						type: "themes.sync",
+						state: message.state
+					});
+				} finally {
+					applying = !1;
+				}
+			}
+		}
+	}), channel.post({
+		type: "hello",
+		from: id
+	}));
+	let flush = () => {
+		leader && cancelPersist && persistNow();
+	}, page = typeof window > "u" ? void 0 : window;
+	return page?.addEventListener("pagehide", flush), () => {
+		subscription.unsubscribe(), page?.removeEventListener("pagehide", flush), flush(), abort.abort(), channel?.close();
+	};
+}
+/**
+* Persists the machine's snapshot for the next session, and keeps the themes
+* in step with the other tabs of the Studio — from the one tab holding the
+* Web Lock, when the browser is idle; see `sync.ts`. Rendered by the layout,
+* outside the sidebar's `Activity`, so that it runs while the sidebar is
+* closed too: other tabs change the themes whether this one shows them or
+* not.
+*/
 function PersistActorSnapshot(t0) {
 	let $ = c(3), { actorRef } = t0, t1, t2;
-	return $[0] === actorRef ? (t1 = $[1], t2 = $[2]) : (t1 = () => {
-		let cancel, cancelOrClear = function cancelOrClear() {
-			"cancelIdleCallback" in window ? cancelIdleCallback(cancel) : clearTimeout(cancel);
-		}, subscription = actorRef.subscribe(() => {
-			cancelOrClear();
-			let callback = () => {
-				writePersistedSnapshot(actorRef.getPersistedSnapshot());
-			};
-			cancel = "cancelIdleCallback" in window ? requestIdleCallback(callback) : setTimeout(callback, 1e3);
-		});
-		return () => {
-			subscription.unsubscribe(), cancelOrClear();
-		};
-	}, t2 = [actorRef], $[0] = actorRef, $[1] = t1, $[2] = t2), useEffect(t1, t2), null;
+	return $[0] === actorRef ? (t1 = $[1], t2 = $[2]) : (t1 = () => syncThemer(actorRef, { persist: writePersistedSnapshot }), t2 = [actorRef], $[0] = actorRef, $[1] = t1, $[2] = t2), useEffect(t1, t2), null;
 }
 /**
 * The sidebar — everything in it, from the theme list to the snippet dialog —
 * loads the first time it opens. There is no `Suspense` boundary around it,
-* so it must only ever mount from a deferred render: that keeps the Studio as
-* it was while the code loads, with the navbar toggle showing the deferred
-* value as pending, where an urgent render would suspend up to the Studio's
+* so it must only ever mount from a transition: the navbar toggle prerenders
+* it in one as the pointer comes near, which keeps the Studio as it was while
+* the code loads, where an urgent render would suspend up to the Studio's
 * own boundary and swap the whole Studio for its loading screen.
 */
-const ResizableSidebar = lazy(() => import("./ResizableSidebar-BpgLA4XQ.js"));
+const ResizableSidebar = lazy(() => import("./ResizableSidebar-C1nr3Ls2.js"));
 /**
-* Wraps the whole Studio so that the theme picked in the themer sidebar
-* 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.
+* Wraps the whole Studio to run the themer machine that the sidebar's flows
+* share — the user's themes, which one is applied and which flow the sidebar
+* is in — 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 Studio next to the sidebar always follows the appearance setting
-* (light/dark/system) and the picked theme like any other theme would. The
-* split preview adds a second copy in the opposite scheme on the far side —
-* or on top, on small screens — through React's view transitions (React
-* 19.3), styled in `ThemerLayout.css.ts`.
+* Whether the sidebar is open and whether the Studio shows twice comes in as
+* props from the tool reducer in `ThemerProvider`, and goes on to the sidebar
+* as props along with the machine's actor, which the sidebar selects its
+* themes and flow from (see `ThemerProps`): the navbar toggle and the sidebar
+* dispatch to the reducer inside transitions tagged with a transition type
+* (see `addThemerTransitionType`), and the `ViewTransition` boundaries below
+* pick their classes by that type, so React animates the sidebar sliding in
+* and out, the split copy coming and going and a picked theme cross-fading
+* in (React 19.3), styled in `ViewTransitions.css.ts`. The sidebar and the
+* split copy stay mounted while hidden, in `Activity`, so that opening them
+* again is instant and they can prerender ahead of the transition. The
+* navbar toggle, which the Studio renders somewhere in `children`, reads the
+* same values and the plugin's options from the contexts
+* `ThemerNavbarProvider` provides in each copy of the Studio, and measures
+* the Studio navbar for the sidebar's header — in the Studio proper, not in
+* the split copy, which `ToolShouldDetectNavbarHeightContext` tells apart.
 *
-* The machine says what shows and when the layout is in motion (its `panel`,
-* `split` and `moving` tags); the layout defers what shows, which puts the
-* panel's and the copy's mounts in a transition — what lets React animate
-* them — and picks the view transition classes from the tags.
+* The applied theme is the reducer's, provided above this layout in
+* `ThemerProvider`: the machine publishes it synchronously, which React does
+* not animate, so `ThemerThemeCrossfader` hands it to the reducer in a
+* transition of its own. The Studio next to the sidebar always follows the
+* appearance setting (light/dark/system) and the picked theme like any other
+* theme would; the split preview adds a second copy in the opposite scheme
+* on the far side.
 *
 * Whatever else on the page has a `view-transition-name` — an avatar the
 * Studio names so it moves as one piece — comes along in step: every
 * transition the layout starts carries `layoutTransitionType`, which the
 * stylesheet keys on to move every group in the layout's time (see
-* `ThemerLayout.css.ts`).
+* `ViewTransitions.css.ts`).
 *
 * @internal
 */
@@ -929,14 +1126,12 @@ function ThemerLayout(t0) {
 }
 /**
 * 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.
+* scheme the Studio is showing. 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. Each copy provides the navbar toggle it renders with the
+* contexts it reads (see `ThemerNavbarProvider`).
 */
 function StudioPreview(t0) {
 	let $ = c(17), { borderRight, children, config, dispatch, open, scheme, shouldDetectNavbarHeight, split } = t0, [boundaryElement, setBoundaryElement] = useState(null), t1;
@@ -972,6 +1167,12 @@ function StudioPreview(t0) {
 	}), $[13] = borderRight, $[14] = scheme, $[15] = t4, $[16] = t5) : t5 = $[16], t5;
 }
 function _temp() {}
+/**
+* Hands the applied theme to the tool reducer as the machine publishes it —
+* in a transition tagged to cross-fade while the machine says a theme is
+* being switched to, so that editing the applied theme's colors applies live
+* while picking another theme fades the Studio over to it
+*/
 function ThemerThemeCrossfader(t0) {
 	let $ = c(4), { actorRef, dispatch } = t0, t1, t2;
 	return $[0] !== actorRef || $[1] !== dispatch ? (t1 = () => {