minecodex 2.0.32 → 2.0.33

package/apps/dashboard/app.js

@@ -417,20 +417,43 @@ function applyTheme() {
   document.documentElement.dataset.theme = dark ? "dark" : "light";
   elements.themeToggle.setAttribute("aria-label", locale === "zh-CN" ? "外观" : "Appearance");
   for (const button of elements.themeButtons) {
-    button.setAttribute("aria-label", button.dataset.themeChoice === "light" ? copy.lightAppearance : copy.darkAppearance);
-    button.setAttribute("aria-pressed", String(button.dataset.themeChoice === (dark ? "dark" : "light")));
-    button.setAttribute("data-minecodex-tooltip", button.getAttribute("aria-label"));
+    button.dataset.themeChoice = dark ? "dark" : "light";
+    button.querySelector(".ui-icon").className = `ui-icon ${dark ? "moon" : "sun"}-icon`;
+    const current = dark ? copy.darkAppearance : copy.lightAppearance;
+    const next = dark ? copy.lightAppearance : copy.darkAppearance;
+    const label = locale === "zh-CN" ? `${current} · 切换为${next}` : `${current} · Switch to ${next.toLowerCase()}`;
+    button.setAttribute("aria-label", label);
+    button.setAttribute("data-minecodex-tooltip", label);
   }
 }
-elements.themeToggle.addEventListener("click", (event) => {
-  const button = event.target.closest("[data-theme-choice]");
-  if (!button) return;
+let themeTransition = null;
+async function toggleTheme(button) {
+  if (themeTransition) return;
   previews.close();
-  selectedTheme = button.dataset.themeChoice;
+  selectedTheme = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
   if (!window.minecodexMcpApp) {
     try { localStorage.setItem("minecodex-appearance", selectedTheme); } catch { /* 保留内存中的选择。 */ }
   }
-  applyTheme();
+  if (!document.startViewTransition || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    applyTheme(); return;
+  }
+  const rect = button.getBoundingClientRect();
+  const x = rect.left + rect.width / 2, y = rect.top + rect.height / 2;
+  const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+  const transition = document.startViewTransition(applyTheme);
+  themeTransition = transition;
+  try {
+    await transition.ready;
+    document.documentElement.animate({clipPath:[`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]}, {
+      duration:420, easing:"cubic-bezier(0.23, 1, 0.32, 1)", pseudoElement:"::view-transition-new(root)",
+    });
+    await transition.finished;
+  } catch { transition.skipTransition(); }
+  finally { themeTransition = null; }
+}
+elements.themeToggle.addEventListener("click", event => {
+  const button = event.target.closest("[data-theme-choice]");
+  if (button) void toggleTheme(button);
 });
 elements.languageToggle.addEventListener("click", (event) => {
   const button = event.target.closest("[data-language-choice]");

package/apps/dashboard/index.html

@@ -22,9 +22,7 @@
             </div>
           </div>
           <div class="theme-toggle" role="group" aria-label="Appearance">
-            <span class="theme-selection" aria-hidden="true"></span>
-            <button data-theme-choice="light" type="button" aria-label="Light appearance" aria-pressed="false"><span class="ui-icon sun-icon" aria-hidden="true"></span></button>
-            <button data-theme-choice="dark" type="button" aria-label="Dark appearance" aria-pressed="false"><span class="ui-icon moon-icon" aria-hidden="true"></span></button>
+            <button id="theme-button" data-theme-choice="light" type="button" aria-label="Light appearance"><span class="ui-icon sun-icon" aria-hidden="true"></span></button>
           </div>
       </div>
       <header class="page-header">

package/apps/dashboard/styles.css

@@ -17,7 +17,7 @@
   --shadow: 0 4px 16px -6px #00000012;
   --focus: 0 0 0 3px #3a83f766;
   --card-radius: 20px;
-  --grid-gap: 16px;
+  --grid-gap: 24px;
   --card-padding: 24px;
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -102,11 +102,12 @@ h1 { display: flex; flex-direction: column; align-items: center; gap: 16px; font
 .refresh-icon { --icon: url("/assets/refresh-cw.svg"); }
 .info-icon { --icon: url("/assets/info.svg"); }
 .alert-icon { --icon: url("/assets/triangle-alert.svg"); }
-.theme-toggle { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
-.theme-toggle button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-secondary); cursor: pointer; }
-.theme-toggle button[aria-pressed="true"] { color: var(--ink); }
-.theme-selection { position: absolute; inset: 4px auto auto 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-elevated); box-shadow: 0 1px 3px #0002; transition: transform 180ms var(--ease-out); }
-:root[data-theme="dark"] .theme-selection { transform: translateX(36px); }
+.theme-toggle { display:flex; }
+.theme-toggle button, .language-button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-secondary); cursor:pointer; }
+.theme-toggle button:hover, .language-button:hover { color:var(--ink); background:color-mix(in srgb,var(--ink) 5%,transparent); }
+::view-transition-image-pair(root) { isolation:auto; }
+::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
+::view-transition-new(root) { z-index:1; }
 
 h2 { font-size: 14px; font-weight: 620; }
 
@@ -117,8 +118,7 @@ h2 { font-size: 14px; font-weight: 620; }
 }
 
 .header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-shrink: 0; }
-.language-toggle { display: flex; padding: 4px; border-radius: 999px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
-.language-button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-secondary); cursor:pointer; }
+.language-toggle { display:flex; }
 .language-icon { --icon: url("/assets/languages.svg"); }
 .language-menu { position: fixed; inset: auto; margin:0; padding:6px; min-width:140px; border:1px solid var(--border-heavy); border-radius:14px; background:var(--surface-elevated); color:var(--ink); box-shadow:var(--shadow); }
 .language-menu button { display:block; width:100%; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--ink-secondary); text-align:left; cursor:pointer; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecodex",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "Lightweight, local-first plugins for the Codex desktop app.",
   "license": "MIT",
   "type": "module",