dsh-background-by-model 0.7.3 → 0.7.4

package/cordis.patch.yml

@@ -1,8 +1,8 @@
-# Deep Midnight theme plugin: bundle patch layer.
-# When this package is installed into a profile via `dsh plugin add`,
-# this patch is applied as a layer, inserting the theme plugin row
-# into the composed configuration.
-
-- insert:
-    - id: dsh-background-by-model
-      name: 'dsh-background-by-model'
+# Deep Midnight theme plugin: bundle patch layer.
+# When this package is installed into a profile via `dsh plugin add`,
+# this patch is applied as a layer, inserting the theme plugin row
+# into the composed configuration.
+
+- insert:
+    - id: dsh-background-by-model
+      name: 'dsh-background-by-model'

package/lib/client.js

@@ -1602,9 +1602,12 @@ window.__ModuleLoader__.load({
 			const names = Object.keys(input.initial).filter((n) => n.startsWith("--"));
 			if (names.length === 0) return "";
 			const css = registrations(names, input.initial);
-			if (!(input.durationMs > 0) || input.selectors.length === 0) return css;
-			const list = names.map((n) => `${n} ${input.durationMs}ms ${input.easing}`).join(",");
-			return `${css}${input.selectors.join(",")}{transition:${list}}`;
+			if (!(input.durationMs > 0)) return css;
+			const timing = (n) => `${n} ${input.durationMs}ms ${input.easing}`;
+			return `${css}${input.scopes.map((s) => ({
+				selector: s.selector,
+				transitions: [...s.tokens.filter((n) => names.includes(n)), ...s.properties ?? []]
+			})).filter((s) => s.transitions.length > 0).map((s) => `${s.selector}{transition:${s.transitions.map(timing).join(",")}}`).join("")}`;
 		}
 		/**
 		* The same fade for an element the plugin paints INLINE (its columns and cards).
@@ -2693,7 +2696,8 @@ window.__ModuleLoader__.load({
 		}
 		const SETTINGS_PANEL_SEL = "[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]";
 		const SETTINGS_STYLE_RULE = `${SETTINGS_PANEL_SEL}{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none);}html[${THEMED_ATTR}] ${SETTINGS_PANEL_SEL}{--dsw-alias-bg-layer-1:var(--dsh-any-bg-settings-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-bg-settings-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-bg-settings-layer-3)}${SETTINGS_PANEL_SEL} .dab-card{backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}`;
-		const INPUT_BLUR_RULE = "[data-composer-card],[data-cordis-panel]{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}";
+		const CORDIS_PANEL_SEL = "[data-cordis-panel]";
+		const INPUT_BLUR_RULE = `[data-composer-card],${CORDIS_PANEL_SEL}{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}${CORDIS_PANEL_SEL}{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}`;
 		function applyInputBlur(px) {
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-input-blur", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-input-blur");
@@ -2724,13 +2728,22 @@ window.__ModuleLoader__.load({
 			write("--dsh-any-traj-layer-2", "--dsw-alias-bg-layer-2");
 			write("--dsh-any-traj-layer-3", "--dsw-alias-bg-layer-3");
 		}
+		const TRAJECTORY_ROOT_SEL = "[data-conversation-composer-overlay]";
 		/** Elements whose own token declarations change when the palette does: the body
 		*  (which everything else inherits), and the two surfaces that RE-declare the
-		*  layer tokens instead of inheriting them. */
-		const FADE_SELECTORS = [
-			"body",
-			SETTINGS_PANEL_SEL,
-			"[data-conversation-composer-overlay]"
+		*  layer tokens instead of inheriting them.
+		*
+		*  The three layer tokens are also the ONLY ones those two surfaces may carry a
+		*  transition for. Handing them the full palette is not "more of the same": a
+		*  transition on an INHERITED token makes the element interpolate towards the
+		*  stale value it saw when the fade was armed, and everything under it rides that
+		*  lagged copy — the settings dialog's own controls (the holiday switch fill, the
+		*  active chips) then hold the previous theme colour for the whole switch and jump
+		*  at the end. See ./palette-fade for the measurement. */
+		const FADE_LAYER_TOKENS = [
+			"--dsw-alias-bg-layer-1",
+			"--dsw-alias-bg-layer-2",
+			"--dsw-alias-bg-layer-3"
 		];
 		/** The token names the plugin re-emits. One palette is enough: every branch
 		*  defines the same set, and an unknown name would only be registered when the
@@ -2738,6 +2751,43 @@ window.__ModuleLoader__.load({
 		function fadeTokenNames() {
 			return Object.keys(genTokens(220, .55, .25).tokens);
 		}
+		/** One `transition` list per element that DECLARES palette tokens, each carrying
+		*  only the tokens that element actually declares.
+		*
+		*  Two of the entries carry a STANDARD property instead, because those surfaces
+		*  are not painted from a registered token: the settings dialog's plate and the
+		*  file-preview panel read a colour the plugin owns as a plain variable
+		*  (`--dsh-any-bg-settings-surface`, `--dsh-any-bg-rightbar`) and would otherwise
+		*  snap in one frame while every surface around them fades. The Cordis panel is
+		*  the third case of the same kind — it re-declares `--dsw-specific-menu` from
+		*  `--dsh-any-op-menu-cordis`, which is also unregistered, but since the token it
+		*  re-declares IS one, naming the token is what reaches it. */
+		function fadeScopes() {
+			return [
+				{
+					selector: "body",
+					tokens: fadeTokenNames()
+				},
+				{
+					selector: SETTINGS_PANEL_SEL,
+					tokens: FADE_LAYER_TOKENS,
+					properties: ["background-color"]
+				},
+				{
+					selector: TRAJECTORY_ROOT_SEL,
+					tokens: FADE_LAYER_TOKENS
+				},
+				{
+					selector: RIGHTBAR_SEL,
+					tokens: [],
+					properties: ["background-color"]
+				},
+				{
+					selector: CORDIS_PANEL_SEL,
+					tokens: ["--dsw-specific-menu"]
+				}
+			];
+		}
 		let fadeStyleEl = null;
 		let fadeInitials = null;
 		let fadeCssCache = "";
@@ -2805,7 +2855,7 @@ window.__ModuleLoader__.load({
 		function applyPaletteFade(animate) {
 			const initials = fadeInitialsOf(fadeTokenNames());
 			const css = paletteFadeCss({
-				selectors: FADE_SELECTORS,
+				scopes: fadeScopes(),
 				initial: initials,
 				durationMs: animate ? paletteFadeMs() : 0,
 				easing: rTransition().easing
@@ -2818,7 +2868,8 @@ window.__ModuleLoader__.load({
 		function fadeInlineFor(animate) {
 			return paletteFadeInline(animate ? paletteFadeMs() : 0, rTransition().easing);
 		}
-		const RIGHTBAR_STYLE_RULE = "div[data-sidebar-right-panel]:not(:has([data-dockkit-content],[data-dockkit-empty]))[data-sidebar-right-open],div[data-sidebar-right-panel] [data-dockkit-content]:not([data-dockkit-float]),div[data-sidebar-right-panel] [data-dockkit-empty]{background:var(--dsh-any-bg-rightbar,var(--dsw-alias-bg-base))!important}div[data-sidebar-right-panel][data-sidebar-right-open]{-webkit-backdrop-filter:var(--dsh-any-blur-rightbar,none);backdrop-filter:var(--dsh-any-blur-rightbar,none)}";
+		const RIGHTBAR_SEL = "div[data-sidebar-right-panel]:not(:has([data-dockkit-content],[data-dockkit-empty]))[data-sidebar-right-open],div[data-sidebar-right-panel] [data-dockkit-content]:not([data-dockkit-float]),div[data-sidebar-right-panel] [data-dockkit-empty]";
+		const RIGHTBAR_STYLE_RULE = `${RIGHTBAR_SEL}{background:var(--dsh-any-bg-rightbar,var(--dsw-alias-bg-base))!important}div[data-sidebar-right-panel][data-sidebar-right-open]{-webkit-backdrop-filter:var(--dsh-any-blur-rightbar,none);backdrop-filter:var(--dsh-any-blur-rightbar,none)}`;
 		/** Paint the file-preview panel's surface from its own slider. */
 		function applyRightbarOverrides(op) {
 			const root = document.documentElement;