@sanity/themer 0.10.1 → 0.10.3

package/dist/legacy.d.ts

@@ -5,77 +5,76 @@ import * as themerLegacy from "@sanity/themer-legacy";
  * in `@sanity/themer@1.0`.
  * @public
  */
-declare const buildThemeFromUrl: typeof themerLegacy.buildThemeFromUrl;
+export declare const buildThemeFromUrl: typeof themerLegacy.buildThemeFromUrl;
 /**
  * @deprecated Import `createTheme` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
  * in `@sanity/themer@1.0`.
  * @public
  */
-declare const createTheme: typeof themerLegacy.createTheme;
+export declare const createTheme: typeof themerLegacy.createTheme;
 /**
  * @deprecated Import `parseHuesFromUrl` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
  * in `@sanity/themer@1.0`.
  * @public
  */
-declare const parseHuesFromUrl: typeof themerLegacy.parseHuesFromUrl;
+export declare const parseHuesFromUrl: typeof themerLegacy.parseHuesFromUrl;
 /**
  * @deprecated Import `hues` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
  * in `@sanity/themer@1.0`.
  * @public
  */
-declare const hues: typeof themerLegacy.hues;
+export declare const hues: typeof themerLegacy.hues;
 /**
  * @deprecated Import `theme` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
  * in `@sanity/themer@1.0`.
  * @public
  */
-declare const theme: typeof themerLegacy.theme;
+export declare const theme: typeof themerLegacy.theme;
 /**
  * @deprecated Import `presets` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
  * in `@sanity/themer@1.0`.
  * @public
  */
-declare const presets: typeof themerLegacy.presets;
+export declare const presets: typeof themerLegacy.presets;
 /**
  * @deprecated Import `Hue` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
  * @public
  */
-type Hue = themerLegacy.Hue;
+export type Hue = themerLegacy.Hue;
 /**
  * @deprecated Import `HueMidPoint` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
  * @public
  */
-type HueMidPoint = themerLegacy.HueMidPoint;
+export type HueMidPoint = themerLegacy.HueMidPoint;
 /**
  * @deprecated Import `Hues` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
  * @public
  */
-type Hues = themerLegacy.Hues;
+export type Hues = themerLegacy.Hues;
 /**
  * @deprecated Import `LegacyTheme` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
  * @public
  */
-type LegacyTheme = themerLegacy.LegacyTheme;
+export type LegacyTheme = themerLegacy.LegacyTheme;
 /**
  * @deprecated Import `PartialHues` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
  * @public
  */
-type PartialHues = themerLegacy.PartialHues;
+export type PartialHues = themerLegacy.PartialHues;
 /**
  * @deprecated Import `ThemePreset` from `@sanity/themer-legacy` instead.
  * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
  * @public
  */
-type ThemePreset = themerLegacy.ThemePreset;
-export { Hue, HueMidPoint, Hues, LegacyTheme, PartialHues, ThemePreset, buildThemeFromUrl, createTheme, hues, parseHuesFromUrl, presets, theme };
+export type ThemePreset = themerLegacy.ThemePreset;
 //# sourceMappingURL=legacy.d.ts.map

package/dist/legacy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legacy.d.ts","names":[],"sources":["../src/legacy/index.ts"],"mappings":";;;;;;;cAYa,0BAA0B,aAAa;;;;;;;cASvC,oBAAoB,aAAa;;;;;;;cAQjC,yBAAyB,aAAa;;;;;;;cAQtC,aAAa,aAAa;;;;;;;cAQ1B,cAAc,aAAa;;;;;;;cAQ3B,gBAAgB,aAAa;;;;;;KAO9B,MAAM,aAAa;;;;;;KAOnB,cAAc,aAAa;;;;;;KAO3B,OAAO,aAAa;;;;;;KAOpB,cAAc,aAAa;;;;;;KAO3B,cAAc,aAAa;;;;;;KAO3B,cAAc,aAAa"}
+{"version":3,"file":"legacy.d.ts","names":[],"sources":["../src/legacy/index.ts"],"mappings":";;;;;;;qBAYa,0BAA0B,aAAa;;;;;;;qBASvC,oBAAoB,aAAa;;;;;;;qBAQjC,yBAAyB,aAAa;;;;;;;qBAQtC,aAAa,aAAa;;;;;;;qBAQ1B,cAAc,aAAa;;;;;;;qBAQ3B,gBAAgB,aAAa;;;;;;YAO9B,MAAM,aAAa;;;;;;YAOnB,cAAc,aAAa;;;;;;YAO3B,OAAO,aAAa;;;;;;YAOpB,cAAc,aAAa;;;;;;YAO3B,cAAc,aAAa;;;;;;YAO3B,cAAc,aAAa"}

package/dist/{themes-au1BLKmY.js → themes-sELelb-j.js}

@@ -5,66 +5,66 @@ import { addTransitionType } from "react";
 * test id is stable and unique to the navbar, unlike its `data-ui` name
 */
 const NAVBAR_SELECTOR = "[data-testid=\"studio-navbar\"]";
-var layout = "pcwcs0j", layoutTransitionType = "sanity-themer", viewTransitionClasses = {
+var layout = "_1wgm57nj", layoutTransitionType = "sanity-themer", viewTransitionClasses = {
 	navbarButton: { update: {
-		pcwcs02: "none",
-		pcwcs03: "none",
-		pcwcs00: "pcwcs05",
-		pcwcs01: "pcwcs05",
-		pcwcs04: "pcwcs05",
+		_1wgm57n2: "none",
+		_1wgm57n3: "none",
+		_1wgm57n0: "_1wgm57n5",
+		_1wgm57n1: "_1wgm57n5",
+		_1wgm57n4: "_1wgm57n5",
 		default: "none"
 	} },
 	navbarButtonTooltip: { update: {
-		pcwcs02: "none",
-		pcwcs03: "none",
-		pcwcs00: "auto",
-		pcwcs01: "auto",
+		_1wgm57n2: "none",
+		_1wgm57n3: "none",
+		_1wgm57n0: "auto",
+		_1wgm57n1: "auto",
 		default: "none"
 	} },
 	sidebar: {
 		enter: {
-			pcwcs00: "pcwcs0e",
+			_1wgm57n0: "_1wgm57ne",
 			default: "none"
 		},
 		update: {
-			pcwcs02: "none",
-			pcwcs03: "none",
-			pcwcs04: "auto",
+			_1wgm57n2: "none",
+			_1wgm57n3: "none",
+			_1wgm57n4: "auto",
 			default: "none"
 		},
 		exit: {
-			pcwcs01: "pcwcs0g",
+			_1wgm57n1: "_1wgm57ng",
 			default: "none"
 		}
 	},
 	splitscreen: {
 		enter: {
-			pcwcs02: "pcwcs0h",
+			_1wgm57n2: "_1wgm57nh",
 			default: "none"
 		},
 		update: {
-			pcwcs04: "auto",
+			_1wgm57n4: "auto",
 			default: "none"
 		},
 		exit: {
-			pcwcs03: "pcwcs0i",
+			_1wgm57n3: "_1wgm57ni",
 			default: "none"
 		}
 	},
 	studio: { update: {
-		pcwcs00: "pcwcs06",
-		pcwcs01: "pcwcs06",
-		pcwcs02: "pcwcs0a",
-		pcwcs03: "pcwcs0a",
-		pcwcs04: "auto",
+		_1wgm57n0: "_1wgm57n6",
+		_1wgm57n1: "_1wgm57n6",
+		_1wgm57n2: "_1wgm57na",
+		_1wgm57n3: "_1wgm57na",
+		_1wgm57n4: "auto",
 		default: "none"
 	} }
 }, viewTransitionTypes = {
-	open: "pcwcs00",
-	close: "pcwcs01",
-	"split-screen:open": "pcwcs02",
-	"split-screen:close": "pcwcs03",
-	crossfade: "pcwcs04"
+	open: "_1wgm57n0",
+	close: "_1wgm57n1",
+	"split-screen:open": "_1wgm57n2",
+	"split-screen:close": "_1wgm57n3",
+	crossfade: "_1wgm57n4"
 };
 /**
 * Adds the default sanity-themer transition type, which allows custom view transition overrides, as well as customization in userland
@@ -136,4 +136,4 @@ function randomId() {
 }
 export { displayTitle as a, resolveThemes as c, viewTransitionClasses as d, NAVBAR_SELECTOR as f, createCustomTheme as i, addThemerTransitionType as l, CONFIG_TITLE as n, duplicateTitle as o, UNTITLED_THEME as r, initialThemerState as s, CONFIG_SLUG as t, layout as u };
 
-//# sourceMappingURL=themes-au1BLKmY.js.map
+//# sourceMappingURL=themes-sELelb-j.js.map

package/dist/{themes-au1BLKmY.js.map → themes-sELelb-j.js.map}

@@ -1 +1 @@
-{"version":3,"file":"themes-au1BLKmY.js","names":["\"default\""],"sources":["../src/tool/constants.ts","../src/tool/ViewTransitions.css.ts","../src/tool/addThemerTransitionType.ts","../src/tool/themes.ts"],"sourcesContent":["/**\n * The largest media index (`useMediaIndex` of `@sanity/ui`) that is too small\n * for the sidebar: up to it the Studio is on a phone-sized screen, which the\n * tool has no layout for yet, so the sidebar stays closed\n */\nexport const MIN_MEDIA_INDEX_FOR_SIDEBAR = 2\n/** The largest media index that is too small for the split preview — two Studios side by side take room */\nexport const MIN_MEDIA_INDEX_FOR_SPLIT_SCREEN = 3\n/**\n * The Studio navbar's root, the `Card` that draws its bottom border — its\n * test id is stable and unique to the navbar, unlike its `data-ui` name\n */\nexport const NAVBAR_SELECTOR = '[data-testid=\"studio-navbar\"]'\n","import {\n  createViewTransition,\n  globalStyle,\n  keyframes,\n  style,\n  type GlobalStyleRule,\n} from '@vanilla-extract/css'\nimport type {ViewTransitionClass} from 'react'\n\nfunction createViewTransitionType(\n  rules: Partial<Record<'new' | 'old' | 'group' | 'imagePair', GlobalStyleRule>>,\n  debugId?: string,\n) {\n  const type = style({}, debugId)\n  if (rules.new) {\n    globalStyle(`::view-transition-new(.${type})`, rules.new)\n  }\n  if (rules.old) {\n    globalStyle(`::view-transition-old(.${type})`, rules.old)\n  }\n  if (rules.group) {\n    globalStyle(`::view-transition-group(.${type})`, rules.group)\n  }\n  if (rules.imagePair) {\n    globalStyle(`::view-transition-image-pair(.${type})`, rules.imagePair)\n  }\n  return type\n}\n\n/**\n * The transition type of the layout's motions — what `ThemerLayout` adds to\n * every transition it starts, and React passes on to the view transition.\n * `:active-view-transition-type()` tells the layout's transitions from any\n * other on the page while they run.\n *\n * It's used on all transition types that userland might want to participate in, for example by setting their own:\n * ```tsx\n * <ViewTransition update={{'sanity-themer': 'auto', default: 'none'}}>\n * ```\n */\nexport const layoutTransitionType = 'sanity-themer'\n\n/**\n * Used with addTransitionType, and on `update` props on <ViewTransition> as the object key\n */\nexport const viewTransitionTypes = {\n  'open': createViewTransition('open'),\n  'close': createViewTransition('close'),\n  'split-screen:open': createViewTransition('split-screen-open'),\n  'split-screen:close': createViewTransition('split-screen-close'),\n  'crossfade': createViewTransition('crossfade'),\n}\n\nconst navbarButtonUpdateTransition = createViewTransitionType({\n  new: {animation: 'none'},\n  old: {display: 'none'},\n})\n\nconst resizeStudioRules = {inlineSize: '100%', blockSize: '100%', objectFit: 'fill'} as const\nconst resizeStudioTransition = createViewTransitionType(\n  {old: resizeStudioRules, new: resizeStudioRules},\n  'resizeStudio',\n)\n\n/**\n * The Studio blurs out of its old width and into its new one as the split copy\n * comes and goes. The blur sits on the image pair that holds both snapshots,\n * not on the snapshots themselves: Safari (WebKit, as of Technology Preview\n * 253) paints a filtered snapshot as raw layer contents, losing the\n * `object-fit` stretch of `resizeStudioRules`, so the Studio scaled wrongly\n * while it resized there. One blur peaking at the cross-over, where the two\n * snapshots meet at half opacity, looks the same as the pair of 12px blurs\n * the snapshots carried before — their visible blur peaked at 6px there too\n */\nconst splitScreenFilter = 'blur(6px)'\nconst splitStudioTransition = createViewTransitionType({\n  imagePair: {\n    animationName: keyframes({'50%': {filter: splitScreenFilter}}),\n    animationTimingFunction: 'inherit',\n  },\n  old: {...resizeStudioRules, animationName: keyframes({to: {opacity: 0}})},\n  new: {...resizeStudioRules, animationName: keyframes({from: {opacity: 0}})},\n})\n/**\n * The split copy slides in from the side, or out to it — hidden for the first\n * quarter of the way in, and for the last quarter of the way out\n */\nconst splitScreenSlideIn = keyframes({\n  'from': {transform: 'translateX(-100%)', opacity: 0},\n  '25%': {opacity: 0},\n})\nconst splitScreenSlideOut = keyframes({\n  'to': {transform: 'translateX(-100%)', opacity: 0},\n  '75%': {opacity: 0},\n})\n\nexport const viewTransitionClasses = {\n  navbarButton: {\n    update: {\n      [viewTransitionTypes['split-screen:open']]: 'none',\n      [viewTransitionTypes['split-screen:close']]: 'none',\n      [viewTransitionTypes.open]: navbarButtonUpdateTransition,\n      [viewTransitionTypes.close]: navbarButtonUpdateTransition,\n      [viewTransitionTypes.crossfade]: navbarButtonUpdateTransition,\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  navbarButtonTooltip: {\n    update: {\n      [viewTransitionTypes['split-screen:open']]: 'none',\n      [viewTransitionTypes['split-screen:close']]: 'none',\n      [viewTransitionTypes.open]: 'auto',\n      [viewTransitionTypes.close]: 'auto',\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  sidebar: {\n    enter: {\n      [viewTransitionTypes.open]: createViewTransitionType(\n        {new: {animationName: keyframes({from: {transform: 'translateX(100%)'}})}},\n        'panelSlideIn',\n      ),\n      default: 'none',\n    },\n    update: {\n      [viewTransitionTypes['split-screen:open']]: 'none',\n      [viewTransitionTypes['split-screen:close']]: 'none',\n      [viewTransitionTypes.crossfade]: 'auto',\n      default: 'none',\n    },\n    exit: {\n      [viewTransitionTypes.close]: createViewTransitionType(\n        {old: {animationName: keyframes({to: {transform: 'translateX(100%)'}})}},\n        'panelSlideOut',\n      ),\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  splitscreen: {\n    enter: {\n      [viewTransitionTypes['split-screen:open']]: createViewTransitionType({\n        new: {animationName: splitScreenSlideIn},\n      }),\n      default: 'none',\n    },\n    update: {\n      [viewTransitionTypes.crossfade]: 'auto',\n      default: 'none',\n    },\n    exit: {\n      [viewTransitionTypes['split-screen:close']]: createViewTransitionType({\n        old: {animationName: splitScreenSlideOut},\n      }),\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  studio: {\n    update: {\n      [viewTransitionTypes['open']]: resizeStudioTransition,\n      [viewTransitionTypes['close']]: resizeStudioTransition,\n      [viewTransitionTypes['split-screen:open']]: splitStudioTransition,\n      [viewTransitionTypes['split-screen:close']]: splitStudioTransition,\n      [viewTransitionTypes.crossfade]: 'auto',\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n}\n\n/**\n * Default animation timings for all Themer view transitions\n */\nglobalStyle(\n  `:root:active-view-transition-type(${layoutTransitionType})::view-transition-group(*)`,\n  {animationDuration: '320ms', animationTimingFunction: 'cubic-bezier(0.65, 0, 0.35, 1)'},\n)\n\nglobalStyle(\n  [\n    `:root:active-view-transition-type(${viewTransitionTypes['split-screen:open']})::view-transition-group(*)`,\n    `:root:active-view-transition-type(${viewTransitionTypes['split-screen:close']})::view-transition-group(*)`,\n  ].join(','),\n  {animationDuration: '480ms'},\n)\n\n/** The layout's `Flex` positions the sidebar overlay on small screens */\nexport const layout = style({\n  position: 'relative',\n})\n\n/**\n * Disable animations automatically for themer view transitions if the user signals to do so\n */\nglobalStyle(\n  `:root:active-view-transition-type(${layoutTransitionType})::view-transition-group(*),:root:active-view-transition-type(${layoutTransitionType})::view-transition-old(*),:root:active-view-transition-type(${layoutTransitionType})::view-transition-new(*)`,\n  {\n    '@media': {\n      '(prefers-reduced-motion: reduce)': {\n        animationDuration: '0s !important',\n        animationDelay: '0s !important',\n      },\n    },\n  },\n)\n\n/**\n * Allow clicks and interactivity during themer animations\n */\nglobalStyle(`:root:active-view-transition-type(${layoutTransitionType})::view-transition`, {\n  pointerEvents: 'none',\n})\n","import {addTransitionType} from 'react'\n\nimport {layoutTransitionType, viewTransitionTypes} from './ViewTransitions.css'\n\n/**\n * Adds the default sanity-themer transition type, which allows custom view transition overrides, as well as customization in userland\n */\nexport function addThemerTransitionType(type: keyof typeof viewTransitionTypes) {\n  if (!(type in viewTransitionTypes)) {\n    throw new Error(`Invalid transition type`, {cause: {type}})\n  }\n  addTransitionType(viewTransitionTypes[type])\n  // Used to mark that a themer transition is happening, can be styled with vanilla css, but also by setting class props on <ViewTransition>\n  addTransitionType(layoutTransitionType)\n}\n","import type {BuildThemeOptions} from '../theme/options'\nimport {presets} from '../theme/presets'\nimport type {ImagePalette} from './imagePalette'\n\n/**\n * Where a theme in the themer list comes from: the theme the Studio config\n * was generated from, one of the presets defined in code, or one the user\n * added in the tool. Only custom themes are editable — the others are\n * duplicated into a custom theme first.\n */\ntype ThemerThemeSource = 'config' | 'preset' | 'custom'\n\n/** A theme the themer tool lists @internal */\nexport interface ThemerTheme {\n  slug: string\n  title: string\n  options: BuildThemeOptions\n  source: ThemerThemeSource\n  /** The palette of the image the theme's colors were taken from, for custom themes */\n  palette?: ImagePalette\n}\n\n/** A theme the user added in the tool, as persisted @internal */\nexport interface CustomTheme {\n  slug: string\n  title: string\n  options: BuildThemeOptions\n  /** The palette of the image the theme's colors were taken from */\n  palette?: ImagePalette\n}\n\n/** The persisted themer state @internal */\nexport interface ThemerState {\n  /**\n   * The slug of the applied theme — `null` applies nothing on top of the\n   * Studio's configured theme\n   */\n  active: string | null\n  /** The themes the user added */\n  custom: CustomTheme[]\n  /** The slugs of the themes the user removed from the list */\n  removed: string[]\n  /**\n   * The slugs of the themes in the order the user arranged them — themes not\n   * in it (new presets, themes added since) follow in their default order\n   */\n  order: string[]\n}\n\n/** The slug of the theme the Studio config was generated from @internal */\nexport const CONFIG_SLUG = 'config'\n\n/** The title of the theme the Studio config was generated from */\nexport const CONFIG_TITLE = 'Studio config'\n\n/** The title new themes start out with @internal */\nexport const UNTITLED_THEME = 'Untitled theme'\n\n/** @internal */\nexport const initialThemerState: ThemerState = {active: null, custom: [], removed: [], order: []}\n\n/** The themes the tool works with, derived from the persisted state @internal */\nexport interface ResolvedThemes {\n  /** The themes to pick from, in list order */\n  themes: ThemerTheme[]\n  /** The removed themes, which can be restored */\n  removed: ThemerTheme[]\n  /** The applied theme */\n  active: ThemerTheme | undefined\n}\n\nconst presetsWithSource = presets.map((preset) =>\n  Object.assign({}, preset, {source: 'preset' as const}),\n)\n\n/**\n * Resolves the list of themes: the presets, then the user's own themes —\n * rearranged into the order the user dragged them into, with themes that\n * order does not know about kept in that default order after the ones it\n * does. Removed themes are set aside so they can be restored. The configured\n * theme is not in the list — `ThemeList` shows it ahead of it — and it is\n * what applies when no listed theme does: `active` is `undefined` for it, and\n * for an applied slug that no longer resolves.\n *\n * @internal\n */\nexport function resolveThemes(state: ThemerState): ResolvedThemes {\n  const all: ThemerTheme[] = [...presetsWithSource]\n\n  for (const theme of state.custom) {\n    all.push({\n      slug: theme.slug,\n      title: theme.title,\n      options: theme.options,\n      source: 'custom',\n      ...(theme.palette ? {palette: theme.palette} : {}),\n    })\n  }\n\n  const position = new Map(state.order.map((slug, index) => [slug, index]))\n  const rank = (theme: ThemerTheme) => position.get(theme.slug) ?? state.order.length\n\n  // A stable sort: the themes the order does not know about keep their default order\n  all.sort((a, b) => rank(a) - rank(b))\n\n  const removedSlugs = new Set(state.removed)\n  const themes = all.filter((theme) => !removedSlugs.has(theme.slug))\n  const removed = all.filter((theme) => removedSlugs.has(theme.slug))\n  const active = themes.find((theme) => theme.slug === state.active)\n\n  return {themes, removed, active}\n}\n\n/**\n * Creates a custom theme with a slug that cannot collide with the presets or\n * the configured theme.\n *\n * @internal\n */\nexport function createCustomTheme(\n  title: string,\n  options: BuildThemeOptions,\n  palette?: ImagePalette,\n): CustomTheme {\n  return {slug: `custom-${randomId()}`, title, options, ...(palette ? {palette} : {})}\n}\n\n/** The title of a duplicated theme @internal */\nexport function duplicateTitle(title: string): string {\n  return `${displayTitle(title)} copy`\n}\n\n/** The title to show for a theme, falling back when the user cleared it @internal */\nexport function displayTitle(title: string): string {\n  return title.trim() || UNTITLED_THEME\n}\n\nfunction randomId(): string {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID()\n  }\n\n  return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`\n}\n"],"mappings":";;;;;;AAYA,MAAa,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEL/B,SAAgB,wBAAwB,MAAwC;CAC9E,IAAI,EAAE,QAAQ,sBACZ,MAAU,MAAM,2BAA2B,EAAC,OAAO,EAAC,KAAI,EAAC,CAAC;CAI5D,AAFA,kBAAkB,oBAAoB,KAAK,GAE3C,kBAAkB,oBAAoB;AACxC;;ACoCA,MAAa,cAAc,UAGd,eAAe,iBAGf,iBAAiB,kBAGjB,qBAAkC;CAAC,QAAQ;CAAM,QAAQ,CAAC;CAAG,SAAS,CAAC;CAAG,OAAO,CAAC;AAAC,GAY1F,oBAAoB,QAAQ,KAAK,WACrC,OAAO,OAAO,CAAC,GAAG,QAAQ,EAAC,QAAQ,SAAiB,CAAC,CACvD;;;;;;;;;;;;AAaA,SAAgB,cAAc,OAAoC;CAChE,IAAM,MAAqB,CAAC,GAAG,iBAAiB;CAEhD,KAAK,IAAM,SAAS,MAAM,QACxB,IAAI,KAAK;EACP,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,SAAS,MAAM;EACf,QAAQ;EACR,GAAI,MAAM,UAAU,EAAC,SAAS,MAAM,QAAO,IAAI,CAAC;CAClD,CAAC;CAGH,IAAM,WAAW,IAAI,IAAI,MAAM,MAAM,KAAK,MAAM,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,GAClE,QAAQ,UAAuB,SAAS,IAAI,MAAM,IAAI,KAAK,MAAM,MAAM;CAG7E,IAAI,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC;CAEpC,IAAM,eAAe,IAAI,IAAI,MAAM,OAAO,GACpC,SAAS,IAAI,QAAQ,UAAU,CAAC,aAAa,IAAI,MAAM,IAAI,CAAC;CAIlE,OAAO;EAAC;EAAQ,SAHA,IAAI,QAAQ,UAAU,aAAa,IAAI,MAAM,IAAI,CAGjD;EAAS,QAFV,OAAO,MAAM,UAAU,MAAM,SAAS,MAAM,MAElC;CAAM;AACjC;;;;;;;AAQA,SAAgB,kBACd,OACA,SACA,SACa;CACb,OAAO;EAAC,MAAM,UAAU,SAAS;EAAK;EAAO;EAAS,GAAI,UAAU,EAAC,QAAO,IAAI,CAAC;CAAE;AACrF;;AAGA,SAAgB,eAAe,OAAuB;CACpD,OAAO,GAAG,aAAa,KAAK,EAAE;AAChC;;AAGA,SAAgB,aAAa,OAAuB;CAClD,OAAO,MAAM,KAAK,KAAA;AACpB;AAEA,SAAS,WAAmB;CAK1B,OAJI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aACzD,OAAO,WAAW,IAGpB,GAAG,KAAK,IAAI,CAAC,CAAC,SAAS,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE;AAC5E"}
+{"version":3,"file":"themes-sELelb-j.js","names":["\"default\""],"sources":["../src/tool/constants.ts","../src/tool/ViewTransitions.css.ts","../src/tool/addThemerTransitionType.ts","../src/tool/themes.ts"],"sourcesContent":["/**\n * The largest media index (`useMediaIndex` of `@sanity/ui`) that is too small\n * for the sidebar: up to it the Studio is on a phone-sized screen, which the\n * tool has no layout for yet, so the sidebar stays closed\n */\nexport const MIN_MEDIA_INDEX_FOR_SIDEBAR = 2\n/** The largest media index that is too small for the split preview — two Studios side by side take room */\nexport const MIN_MEDIA_INDEX_FOR_SPLIT_SCREEN = 3\n/**\n * The Studio navbar's root, the `Card` that draws its bottom border — its\n * test id is stable and unique to the navbar, unlike its `data-ui` name\n */\nexport const NAVBAR_SELECTOR = '[data-testid=\"studio-navbar\"]'\n","import {\n  createViewTransition,\n  globalStyle,\n  keyframes,\n  style,\n  type GlobalStyleRule,\n} from '@vanilla-extract/css'\nimport type {ViewTransitionClass} from 'react'\n\nfunction createViewTransitionType(\n  rules: Partial<Record<'new' | 'old' | 'group' | 'imagePair', GlobalStyleRule>>,\n  debugId?: string,\n) {\n  const type = style({}, debugId)\n  if (rules.new) {\n    globalStyle(`::view-transition-new(.${type})`, rules.new)\n  }\n  if (rules.old) {\n    globalStyle(`::view-transition-old(.${type})`, rules.old)\n  }\n  if (rules.group) {\n    globalStyle(`::view-transition-group(.${type})`, rules.group)\n  }\n  if (rules.imagePair) {\n    globalStyle(`::view-transition-image-pair(.${type})`, rules.imagePair)\n  }\n  return type\n}\n\n/**\n * The transition type of the layout's motions — what `ThemerLayout` adds to\n * every transition it starts, and React passes on to the view transition.\n * `:active-view-transition-type()` tells the layout's transitions from any\n * other on the page while they run.\n *\n * It's used on all transition types that userland might want to participate in, for example by setting their own:\n * ```tsx\n * <ViewTransition update={{'sanity-themer': 'auto', default: 'none'}}>\n * ```\n */\nexport const layoutTransitionType = 'sanity-themer'\n\n/**\n * Used with addTransitionType, and on `update` props on <ViewTransition> as the object key\n */\nexport const viewTransitionTypes = {\n  'open': createViewTransition('open'),\n  'close': createViewTransition('close'),\n  'split-screen:open': createViewTransition('split-screen-open'),\n  'split-screen:close': createViewTransition('split-screen-close'),\n  'crossfade': createViewTransition('crossfade'),\n}\n\nconst navbarButtonUpdateTransition = createViewTransitionType({\n  new: {animation: 'none'},\n  old: {display: 'none'},\n})\n\nconst resizeStudioRules = {inlineSize: '100%', blockSize: '100%', objectFit: 'fill'} as const\nconst resizeStudioTransition = createViewTransitionType(\n  {old: resizeStudioRules, new: resizeStudioRules},\n  'resizeStudio',\n)\n\n/**\n * The Studio blurs out of its old width and into its new one as the split copy\n * comes and goes. The blur sits on the image pair that holds both snapshots,\n * not on the snapshots themselves: Safari (WebKit, as of Technology Preview\n * 253) paints a filtered snapshot as raw layer contents, losing the\n * `object-fit` stretch of `resizeStudioRules`, so the Studio scaled wrongly\n * while it resized there. One blur peaking at the cross-over, where the two\n * snapshots meet at half opacity, looks the same as the pair of 12px blurs\n * the snapshots carried before — their visible blur peaked at 6px there too\n */\nconst splitScreenFilter = 'blur(6px)'\nconst splitStudioTransition = createViewTransitionType({\n  imagePair: {\n    animationName: keyframes({'50%': {filter: splitScreenFilter}}),\n    animationTimingFunction: 'inherit',\n  },\n  old: {...resizeStudioRules, animationName: keyframes({to: {opacity: 0}})},\n  new: {...resizeStudioRules, animationName: keyframes({from: {opacity: 0}})},\n})\n/**\n * The split copy slides in from the side, or out to it — hidden for the first\n * quarter of the way in, and for the last quarter of the way out\n */\nconst splitScreenSlideIn = keyframes({\n  'from': {transform: 'translateX(-100%)', opacity: 0},\n  '25%': {opacity: 0},\n})\nconst splitScreenSlideOut = keyframes({\n  'to': {transform: 'translateX(-100%)', opacity: 0},\n  '75%': {opacity: 0},\n})\n\nexport const viewTransitionClasses = {\n  navbarButton: {\n    update: {\n      [viewTransitionTypes['split-screen:open']]: 'none',\n      [viewTransitionTypes['split-screen:close']]: 'none',\n      [viewTransitionTypes.open]: navbarButtonUpdateTransition,\n      [viewTransitionTypes.close]: navbarButtonUpdateTransition,\n      [viewTransitionTypes.crossfade]: navbarButtonUpdateTransition,\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  navbarButtonTooltip: {\n    update: {\n      [viewTransitionTypes['split-screen:open']]: 'none',\n      [viewTransitionTypes['split-screen:close']]: 'none',\n      [viewTransitionTypes.open]: 'auto',\n      [viewTransitionTypes.close]: 'auto',\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  sidebar: {\n    enter: {\n      [viewTransitionTypes.open]: createViewTransitionType(\n        {new: {animationName: keyframes({from: {transform: 'translateX(100%)'}})}},\n        'panelSlideIn',\n      ),\n      default: 'none',\n    },\n    update: {\n      [viewTransitionTypes['split-screen:open']]: 'none',\n      [viewTransitionTypes['split-screen:close']]: 'none',\n      [viewTransitionTypes.crossfade]: 'auto',\n      default: 'none',\n    },\n    exit: {\n      [viewTransitionTypes.close]: createViewTransitionType(\n        {old: {animationName: keyframes({to: {transform: 'translateX(100%)'}})}},\n        'panelSlideOut',\n      ),\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  splitscreen: {\n    enter: {\n      [viewTransitionTypes['split-screen:open']]: createViewTransitionType({\n        new: {animationName: splitScreenSlideIn},\n      }),\n      default: 'none',\n    },\n    update: {\n      [viewTransitionTypes.crossfade]: 'auto',\n      default: 'none',\n    },\n    exit: {\n      [viewTransitionTypes['split-screen:close']]: createViewTransitionType({\n        old: {animationName: splitScreenSlideOut},\n      }),\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n  studio: {\n    update: {\n      [viewTransitionTypes['open']]: resizeStudioTransition,\n      [viewTransitionTypes['close']]: resizeStudioTransition,\n      [viewTransitionTypes['split-screen:open']]: splitStudioTransition,\n      [viewTransitionTypes['split-screen:close']]: splitStudioTransition,\n      [viewTransitionTypes.crossfade]: 'auto',\n      default: 'none',\n    },\n  } as const satisfies Record<string, ViewTransitionClass>,\n}\n\n/**\n * Default animation timings for all Themer view transitions\n */\nglobalStyle(\n  `:root:active-view-transition-type(${layoutTransitionType})::view-transition-group(*)`,\n  {animationDuration: '320ms', animationTimingFunction: 'cubic-bezier(0.65, 0, 0.35, 1)'},\n)\n\nglobalStyle(\n  [\n    `:root:active-view-transition-type(${viewTransitionTypes['split-screen:open']})::view-transition-group(*)`,\n    `:root:active-view-transition-type(${viewTransitionTypes['split-screen:close']})::view-transition-group(*)`,\n  ].join(','),\n  {animationDuration: '480ms'},\n)\n\n/** The layout's `Flex` positions the sidebar overlay on small screens */\nexport const layout = style({\n  position: 'relative',\n})\n\n/**\n * Disable animations automatically for themer view transitions if the user signals to do so\n */\nglobalStyle(\n  `:root:active-view-transition-type(${layoutTransitionType})::view-transition-group(*),:root:active-view-transition-type(${layoutTransitionType})::view-transition-old(*),:root:active-view-transition-type(${layoutTransitionType})::view-transition-new(*)`,\n  {\n    '@media': {\n      '(prefers-reduced-motion: reduce)': {\n        animationDuration: '0s !important',\n        animationDelay: '0s !important',\n      },\n    },\n  },\n)\n\n/**\n * Allow clicks and interactivity during themer animations\n */\nglobalStyle(`:root:active-view-transition-type(${layoutTransitionType})::view-transition`, {\n  pointerEvents: 'none',\n})\n","import {addTransitionType} from 'react'\n\nimport {layoutTransitionType, viewTransitionTypes} from './ViewTransitions.css'\n\n/**\n * Adds the default sanity-themer transition type, which allows custom view transition overrides, as well as customization in userland\n */\nexport function addThemerTransitionType(type: keyof typeof viewTransitionTypes) {\n  if (!(type in viewTransitionTypes)) {\n    throw new Error(`Invalid transition type`, {cause: {type}})\n  }\n  addTransitionType(viewTransitionTypes[type])\n  // Used to mark that a themer transition is happening, can be styled with vanilla css, but also by setting class props on <ViewTransition>\n  addTransitionType(layoutTransitionType)\n}\n","import type {BuildThemeOptions} from '../theme/options'\nimport {presets} from '../theme/presets'\nimport type {ImagePalette} from './imagePalette'\n\n/**\n * Where a theme in the themer list comes from: the theme the Studio config\n * was generated from, one of the presets defined in code, or one the user\n * added in the tool. Only custom themes are editable — the others are\n * duplicated into a custom theme first.\n */\ntype ThemerThemeSource = 'config' | 'preset' | 'custom'\n\n/** A theme the themer tool lists @internal */\nexport interface ThemerTheme {\n  slug: string\n  title: string\n  options: BuildThemeOptions\n  source: ThemerThemeSource\n  /** The palette of the image the theme's colors were taken from, for custom themes */\n  palette?: ImagePalette\n}\n\n/** A theme the user added in the tool, as persisted @internal */\nexport interface CustomTheme {\n  slug: string\n  title: string\n  options: BuildThemeOptions\n  /** The palette of the image the theme's colors were taken from */\n  palette?: ImagePalette\n}\n\n/** The persisted themer state @internal */\nexport interface ThemerState {\n  /**\n   * The slug of the applied theme — `null` applies nothing on top of the\n   * Studio's configured theme\n   */\n  active: string | null\n  /** The themes the user added */\n  custom: CustomTheme[]\n  /** The slugs of the themes the user removed from the list */\n  removed: string[]\n  /**\n   * The slugs of the themes in the order the user arranged them — themes not\n   * in it (new presets, themes added since) follow in their default order\n   */\n  order: string[]\n}\n\n/** The slug of the theme the Studio config was generated from @internal */\nexport const CONFIG_SLUG = 'config'\n\n/** The title of the theme the Studio config was generated from */\nexport const CONFIG_TITLE = 'Studio config'\n\n/** The title new themes start out with @internal */\nexport const UNTITLED_THEME = 'Untitled theme'\n\n/** @internal */\nexport const initialThemerState: ThemerState = {active: null, custom: [], removed: [], order: []}\n\n/** The themes the tool works with, derived from the persisted state @internal */\nexport interface ResolvedThemes {\n  /** The themes to pick from, in list order */\n  themes: ThemerTheme[]\n  /** The removed themes, which can be restored */\n  removed: ThemerTheme[]\n  /** The applied theme */\n  active: ThemerTheme | undefined\n}\n\nconst presetsWithSource = presets.map((preset) =>\n  Object.assign({}, preset, {source: 'preset' as const}),\n)\n\n/**\n * Resolves the list of themes: the presets, then the user's own themes —\n * rearranged into the order the user dragged them into, with themes that\n * order does not know about kept in that default order after the ones it\n * does. Removed themes are set aside so they can be restored. The configured\n * theme is not in the list — `ThemeList` shows it ahead of it — and it is\n * what applies when no listed theme does: `active` is `undefined` for it, and\n * for an applied slug that no longer resolves.\n *\n * @internal\n */\nexport function resolveThemes(state: ThemerState): ResolvedThemes {\n  const all: ThemerTheme[] = [...presetsWithSource]\n\n  for (const theme of state.custom) {\n    all.push({\n      slug: theme.slug,\n      title: theme.title,\n      options: theme.options,\n      source: 'custom',\n      ...(theme.palette ? {palette: theme.palette} : {}),\n    })\n  }\n\n  const position = new Map(state.order.map((slug, index) => [slug, index]))\n  const rank = (theme: ThemerTheme) => position.get(theme.slug) ?? state.order.length\n\n  // A stable sort: the themes the order does not know about keep their default order\n  all.sort((a, b) => rank(a) - rank(b))\n\n  const removedSlugs = new Set(state.removed)\n  const themes = all.filter((theme) => !removedSlugs.has(theme.slug))\n  const removed = all.filter((theme) => removedSlugs.has(theme.slug))\n  const active = themes.find((theme) => theme.slug === state.active)\n\n  return {themes, removed, active}\n}\n\n/**\n * Creates a custom theme with a slug that cannot collide with the presets or\n * the configured theme.\n *\n * @internal\n */\nexport function createCustomTheme(\n  title: string,\n  options: BuildThemeOptions,\n  palette?: ImagePalette,\n): CustomTheme {\n  return {slug: `custom-${randomId()}`, title, options, ...(palette ? {palette} : {})}\n}\n\n/** The title of a duplicated theme @internal */\nexport function duplicateTitle(title: string): string {\n  return `${displayTitle(title)} copy`\n}\n\n/** The title to show for a theme, falling back when the user cleared it @internal */\nexport function displayTitle(title: string): string {\n  return title.trim() || UNTITLED_THEME\n}\n\nfunction randomId(): string {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID()\n  }\n\n  return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`\n}\n"],"mappings":";;;;;;AAYA,MAAa,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEL/B,SAAgB,wBAAwB,MAAwC;CAC9E,IAAI,EAAE,QAAQ,sBACZ,MAAU,MAAM,2BAA2B,EAAC,OAAO,EAAC,KAAI,EAAC,CAAC;CAI5D,AAFA,kBAAkB,oBAAoB,KAAK,GAE3C,kBAAkB,oBAAoB;AACxC;;ACoCA,MAAa,cAAc,UAGd,eAAe,iBAGf,iBAAiB,kBAGjB,qBAAkC;CAAC,QAAQ;CAAM,QAAQ,CAAC;CAAG,SAAS,CAAC;CAAG,OAAO,CAAC;AAAC,GAY1F,oBAAoB,QAAQ,KAAK,WACrC,OAAO,OAAO,CAAC,GAAG,QAAQ,EAAC,QAAQ,SAAiB,CAAC,CACvD;;;;;;;;;;;;AAaA,SAAgB,cAAc,OAAoC;CAChE,IAAM,MAAqB,CAAC,GAAG,iBAAiB;CAEhD,KAAK,IAAM,SAAS,MAAM,QACxB,IAAI,KAAK;EACP,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,SAAS,MAAM;EACf,QAAQ;EACR,GAAI,MAAM,UAAU,EAAC,SAAS,MAAM,QAAO,IAAI,CAAC;CAClD,CAAC;CAGH,IAAM,WAAW,IAAI,IAAI,MAAM,MAAM,KAAK,MAAM,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,GAClE,QAAQ,UAAuB,SAAS,IAAI,MAAM,IAAI,KAAK,MAAM,MAAM;CAG7E,IAAI,MAAM,GAAG,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC;CAEpC,IAAM,eAAe,IAAI,IAAI,MAAM,OAAO,GACpC,SAAS,IAAI,QAAQ,UAAU,CAAC,aAAa,IAAI,MAAM,IAAI,CAAC;CAIlE,OAAO;EAAC;EAAQ,SAHA,IAAI,QAAQ,UAAU,aAAa,IAAI,MAAM,IAAI,CAGjD;EAAS,QAFV,OAAO,MAAM,UAAU,MAAM,SAAS,MAAM,MAElC;CAAM;AACjC;;;;;;;AAQA,SAAgB,kBACd,OACA,SACA,SACa;CACb,OAAO;EAAC,MAAM,UAAU,SAAS;EAAK;EAAO;EAAS,GAAI,UAAU,EAAC,QAAO,IAAI,CAAC;CAAE;AACrF;;AAGA,SAAgB,eAAe,OAAuB;CACpD,OAAO,GAAG,aAAa,KAAK,EAAE;AAChC;;AAGA,SAAgB,aAAa,OAAuB;CAClD,OAAO,MAAM,KAAK,KAAA;AACpB;AAEA,SAAS,WAAmB;CAK1B,OAJI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aACzD,OAAO,WAAW,IAGpB,GAAG,KAAK,IAAI,CAAC,CAAC,SAAS,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE;AAC5E"}

package/dist/tool.d.ts

@@ -41,6 +41,6 @@ interface ThemerToolOptions {
  *
  * @alpha
  */
-declare const themerTool: import("sanity").Plugin<void | ThemerToolOptions>;
-export { type ThemerToolOptions, themerTool };
+export declare const themerTool: import("sanity").Plugin<void | ThemerToolOptions>;
+export type { ThemerToolOptions };
 //# sourceMappingURL=tool.d.ts.map

package/dist/tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","names":[],"sources":["../src/tool/plugin.tsx"],"mappings":"AAeA;;;;;;;;UAAiB;;;;;EAKf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BW,6BAAU,cAAA"}
+{"version":3,"file":"tool.d.ts","names":[],"sources":["../src/tool/plugin.tsx"],"mappings":"AAeA;;;;;;;;UAAiB;;;;;EAKf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+BW,6BAAU,cAAA"}

package/dist/tool.js

@@ -1,6 +1,6 @@
 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-au1BLKmY.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-sELelb-j.js";
 import { c } from "react/compiler-runtime";
 import { definePlugin, useColorSchemeValue } from "sanity";
 import { ColorWheelIcon } from "@sanity/icons/ColorWheel";
@@ -932,34 +932,33 @@ function syncThemer(actorRef, options) {
 	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
+			if (message.type === "hello") leader ? answer(message.from) : unanswered.add(message.from);
+			else {
+				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
 						});
-						return;
+					} finally {
+						applying = !1;
 					}
-					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;
 				}
 			}
 		}
@@ -994,7 +993,7 @@ function PersistActorSnapshot(t0) {
 * 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-C1nr3Ls2.js"));
+const ResizableSidebar = lazy(() => import("./ResizableSidebar-B5Px5VCf.js"));
 /**
 * 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