Improve example theme rendering performance and continuity

Author: justram

example/app.css

@@ -310,6 +310,124 @@ body {
   scroll-margin-top: 1.25rem;
 }
 
+@supports (content-visibility: auto) {
+  .card {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 48rem;
+  }
+}
+
+:root[data-theme-animating] {
+  transition:
+    --background var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --card var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --card-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --popover var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --popover-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --primary var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --primary-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --secondary var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --secondary-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --muted var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --muted-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --accent var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --accent-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --destructive var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --destructive-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --border var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --input var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
+    --ring var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.theme-transition-overlay {
+  --theme-transition-origin-x: calc(100% - 24px);
+  --theme-transition-origin-y: 24px;
+  --theme-transition-overlay-color: var(--background);
+  --theme-transition-overlay-contrast-color: var(--foreground);
+  --theme-transition-duration: 620ms;
+
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.theme-transition-overlay::before,
+.theme-transition-overlay::after {
+  content: "";
+  position: absolute;
+  inset: -24vmax;
+  transform-origin: var(--theme-transition-origin-x) var(--theme-transition-origin-y);
+  will-change: transform, opacity;
+}
+
+.theme-transition-overlay::before {
+  background: radial-gradient(
+    circle 8rem at var(--theme-transition-origin-x) var(--theme-transition-origin-y),
+    color-mix(in oklab, var(--theme-transition-overlay-color) 20%, transparent) 0%,
+    color-mix(in oklab, var(--theme-transition-overlay-color) 12%, transparent) 20%,
+    color-mix(in oklab, var(--theme-transition-overlay-color) 6%, transparent) 38%,
+    transparent 72%
+  );
+  opacity: 0;
+  transform: scale(0.55);
+}
+
+.theme-transition-overlay::after {
+  background: radial-gradient(
+    circle 7rem at var(--theme-transition-origin-x) var(--theme-transition-origin-y),
+    color-mix(in oklab, var(--theme-transition-overlay-contrast-color) 10%, transparent) 0%,
+    color-mix(in oklab, var(--theme-transition-overlay-contrast-color) 6%, transparent) 16%,
+    transparent 66%
+  );
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+.theme-transition-overlay.is-running::before {
+  animation: example-theme-fog var(--theme-transition-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.theme-transition-overlay.is-running::after {
+  animation: example-theme-ring var(--theme-transition-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes example-theme-fog {
+  0% {
+    opacity: 0.06;
+    transform: scale(0.55);
+  }
+
+  24% {
+    opacity: 0.22;
+    transform: scale(1.02);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.25);
+  }
+}
+
+@keyframes example-theme-ring {
+  0% {
+    opacity: 0.04;
+    transform: scale(0.6);
+  }
+
+  28% {
+    opacity: 0.14;
+    transform: scale(1.04);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.05);
+  }
+}
+
 body.layout-constrained .card {
   width: min(100%, 40rem);
 }
@@ -397,6 +515,10 @@ body.layout-fluid .card {
   justify-content: center;
 }
 
+.card-preview[data-mounted="false"] {
+  min-height: var(--preview-placeholder-height, 20rem);
+}
+
 .card-code-view {
   padding-inline: 0.25rem;
   padding-bottom: 0.25rem;

example/main.ts

@@ -136,6 +136,8 @@ function scrollContentToCard(
   updateHash = true,
   keepVisible = true,
 ) {
+  harness.ensurePreviewMounted(elementId);
+
   const targetCard = document.getElementById(`${elementId}-card`);
   if (!(targetCard instanceof HTMLElement)) {
     return;
@@ -385,7 +387,7 @@ const preferencesPanelReceipt = harness.mustGetReceipt("preferences-panel-receip
 const itemCarouselReceipt = harness.mustGetReceipt("item-carousel-receipt");
 const questionFlowReceipt = harness.mustGetReceipt("question-flow-receipt");
 
-const { refreshCardCode, refreshAllCardCode } = createCodeViewSync(MINI_TOOLUI_EXAMPLE_HARNESS_CARDS, harness);
+const { refreshCardCode } = createCodeViewSync(MINI_TOOLUI_EXAMPLE_HARNESS_CARDS, harness);
 
 const themeToggle = document.querySelector("#theme-toggle");
 const themeToggleLabel = document.querySelector("#theme-toggle-label");
@@ -409,7 +411,7 @@ applyTheme(initialTheme, themeElements);
 
 if (themeToggle) {
   themeToggle.addEventListener("click", () => {
-    const isCurrentlyDark = document.documentElement.classList.contains("dark");
+    const isCurrentlyDark = document.documentElement.getAttribute("data-theme") === "dark";
     const nextTheme = isCurrentlyDark ? "light" : "dark";
     window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
     changeThemeWithTransition(nextTheme, themeElements);
@@ -522,8 +524,6 @@ const {
   initialQuestionFlowPayload,
 } = applyInitialPayloads(harness.mustGetComponentElement, clonePayload);
 
-refreshAllCardCode();
-
 const unbindMiniToolActions = bindMiniToolUiExampleActions({
   optionListElement,
   approvalCardElement,

example/runtime/code-view.ts

@@ -1,6 +1,10 @@
 import { buildMiniToolUiExampleSnippetKey, renderMiniToolUiExampleSnippet } from "../code-snippets.js";
 import type { MiniToolUiExampleHarnessCard } from "../harness-config.js";
-import type { MiniToolUiExampleHarnessRuntime, RefreshCardCode } from "./types.js";
+import type {
+  MiniToolUiExampleHarnessRuntime,
+  MiniToolUiExampleModeChangeEventDetail,
+  RefreshCardCode,
+} from "./types.js";
 
 export function createCodeViewSync(
   cards: readonly MiniToolUiExampleHarnessCard[],
@@ -44,6 +48,17 @@ export function createCodeViewSync(
     }
   };
 
+  document.addEventListener("mini-toolui:card-mode-change", (event) => {
+    const customEvent = event as CustomEvent<MiniToolUiExampleModeChangeEventDetail>;
+    const detail = customEvent.detail;
+    if (!detail || detail.mode !== "code") {
+      return;
+    }
+
+    harness.ensureCodeRenderer(detail.elementId);
+    refreshCardCode(detail.elementId);
+  });
+
   return {
     refreshCardCode,
     refreshAllCardCode,