@domicile-desktop/component-library 0.0.0-alpha-5524dc6074c1 → 0.0.0-alpha-20719bea37b2

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-5524dc6074c1",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-5524dc6074c1",
+    "@domicile-desktop/sdk": "0.0.0-alpha-20719bea37b2",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-20719bea37b2",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -106,5 +106,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-5524dc6074c1"
+  "version": "0.0.0-alpha-20719bea37b2"
 }

package/src/ThemeSwitch/theme-core.ts

@@ -27,6 +27,9 @@ export const DEFAULT_THEME: Theme = "dark";
 /** What the preset's `_light` condition selects on. */
 const THEME_ATTRIBUTE = "data-theme";
 
+/** What the preset pauses the wipe on while windows turn. */
+const HOLDING_ATTRIBUTE = "data-theme-holding";
+
 /**
  * Applies a theme to `<html>` so the tokens resolve to it.
  *
@@ -58,7 +61,7 @@ export type FlipThemeOptions = {
    */
   applyNextTheme: () => void;
   /**
-   * Repaints the other windows after the wipe's start frame is captured. See
+   * Repaints the other windows once the wipe's start frame is on screen. See
    * {@link ThemeSource.turnWindows}.
    */
   turnWindows: () => Promise<void>;
@@ -114,12 +117,23 @@ export const flipThemeWithAnimation = ({
       // `data-theme-flip-to` sets the wipe direction.
       root.setAttribute("data-theme-flipping", "");
       root.setAttribute("data-theme-flip-to", next);
-      // The old frame is captured before this runs, and the wipe waits for
-      // it to settle, so the windows repaint behind the old frame.
-      const transition = document.startViewTransition(() => {
-        applyNextTheme();
-        return turnWindows();
-      });
+      // `data-theme-holding` pauses the wipe at its start, so only the old
+      // frame shows.
+      root.setAttribute(HOLDING_ATTRIBUTE, "");
+      const transition = document.startViewTransition(applyNextTheme);
+      // Turn the windows once the old frame is on screen. Until `ready`, the
+      // screen shows the page's live frame, with `<app>` windows in it, and
+      // the update callback runs before the capture has been drawn.
+      const turnWindowsBehindWipe = () =>
+        turnWindows().finally(() => {
+          root.removeAttribute(HOLDING_ATTRIBUTE);
+        });
+      transition.ready
+        .then(turnWindowsBehindWipe, turnWindowsBehindWipe)
+        .catch((error: unknown) => {
+          // biome-ignore lint/suspicious/noConsole: surfacing a failed turnover
+          console.error("Failed to turn the desk's windows", error);
+        });
       const cleanup = () => {
         root.removeAttribute("data-theme-flipping");
         root.removeAttribute("data-theme-flip-to");

package/src/ThemeSwitch/theme-source.ts

@@ -34,9 +34,9 @@ export type ThemeSource = {
   /**
    * Repaints the other windows in `theme` and settles once they have.
    *
-   * {@link flipThemeWithAnimation} calls this after capturing the wipe's start
-   * frame and holds that frame until it settles. Otherwise windows would
-   * change before or during the wipe.
+   * {@link flipThemeWithAnimation} calls this once the wipe's start frame is
+   * on screen and holds the wipe at its start until it settles. Otherwise
+   * windows would change before or during the wipe.
    */
   turnWindows: (theme: Theme) => Promise<void>;
 };

package/src/pandacss-preset.ts

@@ -69,6 +69,11 @@ export const domicilePreset = definePreset({
     "html[data-theme-flip-to='light']::view-transition-new(root)": {
       animationName: "themeSwipeFromBottom",
     },
+    // Held at the start, so only the old frame shows, while windows repaint
+    // behind it (`flipThemeWithAnimation`).
+    "html[data-theme-holding]::view-transition-new(root)": {
+      animationPlayState: "paused",
+    },
     // Disable element transitions during a theme change. Otherwise they are
     // mid-flight when the new snapshot is captured, so the snapshot shows the
     // old colors and the elements snap at the end. `!important` beats more