重构生命周期演示：支持可中断回放

docs/assets/app.js

@@ -58,15 +58,36 @@
 
   const saveLab = document.querySelector("[data-save-lab]");
   const runSave = saveLab?.querySelector("[data-run-save]");
+  const saveTrace = saveLab?.querySelector("[data-save-trace]");
   const saveOutput = saveLab?.querySelector("[data-save-output]");
   const saveSteps = Array.from(saveLab?.querySelectorAll("[data-mechanism]") || []);
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const SAVE_TRACE_RESET_MS = 180;
+  const SAVE_TRACE_STEP_MS = 480;
   let saveTimers = [];
+  let saveRunId = 0;
 
   function clearSaveTimers() {
     saveTimers.forEach((timer) => window.clearTimeout(timer));
     saveTimers = [];
   }
 
+  function cancelSaveTrace() {
+    saveRunId += 1;
+    clearSaveTimers();
+    saveTrace?.removeAttribute("aria-busy");
+    return saveRunId;
+  }
+
+  function scheduleSaveTimer(runId, callback, delay) {
+    const timer = window.setTimeout(() => {
+      saveTimers = saveTimers.filter((pending) => pending !== timer);
+      if (runId !== saveRunId) return;
+      callback();
+    }, delay);
+    saveTimers.push(timer);
+  }
+
   function resetSaveTrace() {
     saveSteps.forEach((step) => {
       step.classList.remove("is-active", "is-complete");
@@ -89,41 +110,54 @@
     }
   }
 
-  function finishSaveTrace() {
+  function finishSaveTrace(runId) {
+    if (runId !== saveRunId) return;
     saveSteps.forEach((step) => {
       step.classList.remove("is-active");
       step.classList.add("is-complete");
       step.removeAttribute("aria-current");
     });
-    saveLab?.removeAttribute("aria-busy");
-    if (runSave) {
-      runSave.disabled = false;
-      runSave.textContent = "Replay Save trace";
-    }
+    saveTrace?.removeAttribute("aria-busy");
+    if (runSave) runSave.textContent = "Replay Save trace";
     if (saveOutput) saveOutput.textContent = "Save 完成：closure 回传后，列表 snapshot 已刷新。";
   }
 
-  if (saveLab && runSave && saveSteps.length === 4) {
+  function startSaveTrace() {
+    const wasRunning = saveTrace?.getAttribute("aria-busy") === "true";
+    const runId = cancelSaveTrace();
+    resetSaveTrace();
+    runSave.textContent = "Restart Save trace";
+    saveTrace.setAttribute("aria-busy", "true");
+    if (saveOutput) {
+      saveOutput.textContent = wasRunning
+        ? "上一轮已取消。Save trace 已重新开始，准备进入 01 · delegate。"
+        : "Save trace 已开始，准备进入 01 · delegate。";
+    }
+
+    if (reducedMotion.matches) {
+      saveSteps.forEach((_, index) => activateSaveStep(index));
+      finishSaveTrace(runId);
+      return;
+    }
+
+    saveSteps.forEach((_, index) => {
+      scheduleSaveTimer(
+        runId,
+        () => activateSaveStep(index),
+        SAVE_TRACE_RESET_MS + index * SAVE_TRACE_STEP_MS,
+      );
+    });
+    scheduleSaveTimer(
+      runId,
+      () => finishSaveTrace(runId),
+      SAVE_TRACE_RESET_MS + saveSteps.length * SAVE_TRACE_STEP_MS,
+    );
+  }
+
+  if (saveLab && runSave && saveTrace && saveSteps.length === 4) {
     saveLab.classList.add("is-enhanced");
     runSave.hidden = false;
-    runSave.addEventListener("click", () => {
-      clearSaveTimers();
-      resetSaveTrace();
-      runSave.disabled = true;
-      runSave.textContent = "Running Save trace…";
-      saveLab.setAttribute("aria-busy", "true");
-
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        saveSteps.forEach((_, index) => activateSaveStep(index));
-        finishSaveTrace();
-        return;
-      }
-
-      saveSteps.forEach((_, index) => {
-        saveTimers.push(window.setTimeout(() => activateSaveStep(index), index * 480));
-      });
-      saveTimers.push(window.setTimeout(finishSaveTrace, saveSteps.length * 480));
-    });
+    runSave.addEventListener("click", startSaveTrace);
   }
 
   media.addEventListener("change", () => {

docs/assets/jx/VERSION

@@ -1 +1 @@
-2.1.0
+2.2.0

docs/assets/jx/base.css

@@ -1,4 +1,4 @@
-/* Jason DS · Base v2.0.0
+/* Jason DS · Base v2.2.0
  * 默认 reset + body 排版基底 + chrome layer 强制 sans
  */
 
@@ -155,11 +155,7 @@ hr {
   color: var(--jx-ink);
 }
 
-/* Reduce motion */
+/* Reduced motion keeps semantic color/opacity feedback; components remove travel. */
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
-  * {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
 }

docs/assets/jx/components.css

@@ -82,7 +82,7 @@
   --_chip-glyph: var(--jx-state-archived-glyph);
 }
 
-/* Jason DS · External Pill v1.0.0
+/* Jason DS · External Pill v2.2.0
  * 出站链接统一 hairline + 右上 ↗ 箭头 (no icon font)
  */
 
@@ -112,15 +112,25 @@
   color: var(--jx-accent);
   box-shadow: 0 0 0 1px var(--jx-accent);
 }
-.jx-pill:hover::after {
-  color: var(--jx-accent);
-  transform: translate(1px, -1px);
-}
+.jx-pill:hover::after { color: var(--jx-accent); }
 .jx-pill:focus-visible {
   outline: none;
   box-shadow: var(--jx-shadow-focus);
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .jx-pill:hover::after {
+    transform: translate(1px, -1px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .jx-pill::after {
+    transform: none;
+    transition: color var(--jx-duration-fast) var(--jx-ease-out);
+  }
+}
+
 /* Jason DS · Footer v1.0.0
  * 三栏：colophon / 索引 / last-updated
  * Layer 1：9 仓必有此结构
@@ -207,7 +217,7 @@
   box-shadow: var(--jx-shadow-focus);
 }
 
-/* Jason DS · Site chrome v2.0.0
+/* Jason DS · Site chrome v2.2.0
  * Shared identity, accessible navigation, skip link, and action styles.
  */
 
@@ -237,6 +247,7 @@
   background: color-mix(in oklab, var(--jx-paper), transparent 8%);
   border-bottom: 1px solid var(--jx-rule);
   backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
 }
 
 .jx-site-header__inner {
@@ -311,13 +322,18 @@
   font-weight: var(--jx-weight-ui);
   line-height: 1;
   text-decoration: none;
-  transition: transform var(--jx-duration-fast) var(--jx-easing),
-              background var(--jx-duration-fast) var(--jx-easing);
+  transition: transform var(--jx-duration-press) var(--jx-ease-out),
+              color var(--jx-duration-fast) var(--jx-ease-out),
+              background-color var(--jx-duration-fast) var(--jx-ease-out),
+              border-color var(--jx-duration-fast) var(--jx-ease-out);
 }
 
 .jx-action:hover {
   color: var(--jx-cta-fg);
-  transform: translateY(-1px);
+}
+
+.jx-action:active {
+  transform: scale(var(--jx-press-scale));
 }
 
 .jx-action--secondary {
@@ -331,6 +347,54 @@
   background: var(--jx-surface-sunk);
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .jx-action:hover {
+    transform: translateY(-1px);
+  }
+
+  .jx-action:active {
+    transform: scale(var(--jx-press-scale));
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .jx-site-header {
+    background: var(--jx-paper);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .jx-site-header {
+    background: var(--jx-paper);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  .jx-site-header {
+    background: var(--jx-paper);
+    border-bottom-color: var(--jx-rule-strong);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .jx-skip-link {
+    transition: none;
+  }
+
+  .jx-action,
+  .jx-action:hover,
+  .jx-action:active {
+    transform: none;
+    transition-property: color, background-color, border-color;
+    transition-duration: var(--jx-duration-fast);
+    transition-timing-function: var(--jx-ease-out);
+  }
+}
+
 @media (max-width: 760px) {
   .jx-site-header__inner {
     align-items: flex-start;
@@ -383,7 +447,6 @@
   }
 }
 
-
 /* Jason DS · Project proof v2.0.0
  * Hiring-facing evidence block used on project and documentation homepages.
  */

docs/assets/jx/tokens.css

@@ -1,4 +1,4 @@
-/* Jason DS · Tokens v2.0.0
+/* Jason DS · Tokens v2.2.0
  * SoT: dotfiles/home-claude/design-system/jx-tokens.css
  * 展示站通过 vendor copy 同步：scripts/sync-jx-to-repos.sh
  *
@@ -134,12 +134,18 @@
   --jx-shadow-focus: 0 0 0 3px var(--jx-focus-ring);
   --jx-shadow-press: inset 0 1px 0 rgba(22,24,29,0.06);
 
-  /* ── Motion ── */
-  --jx-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --jx-easing-press: cubic-bezier(0.4, 0, 0.6, 1);
+  /* ── Motion · responsive by default, quiet by frequency ── */
+  --jx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --jx-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --jx-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --jx-easing: var(--jx-ease-out); /* compatibility alias */
+  --jx-easing-press: var(--jx-ease-out);
   --jx-duration-fast: 120ms;
+  --jx-duration-press: 140ms;
+  --jx-duration-popover: 180ms;
   --jx-duration-base: 200ms;
   --jx-duration-slow: 320ms;
+  --jx-press-scale: 0.97;
 }
 
 /* ── Color · dark mirror ── */