@dsh-plugin/dsh-ui-experience 1.0.0-dev.43487914661 → 1.0.0-dev.43488816373

package/README.md

@@ -119,11 +119,13 @@ token 的值按原样写入 CSS 变量，因此 `color-mix(...)` 这类表达式
 | 位移（transform、宽高、内外距、gap、圆角…） | `cubic-bezier(0.05, 0.7, 0.1, 1)`（emphasized decelerate） | 声明时长 ≤200ms 用 `cubic-bezier(0.42, 1.67, 0.21, 0.9)`，否则用 `cubic-bezier(0.38, 1.21, 0.22, 1)` |
 | 效果（颜色、透明度、阴影、滤镜…） | `cubic-bezier(0.2, 0, 0, 1)`（standard） | `cubic-bezier(0.34, 0.8, 0.34, 1)` |
 
-两族都把「移动」和「效果」分开，原因在 M3E 上最直观：它的两条位移曲线带过冲，峰值分别为 1.092 与 1.014，效果曲线不过冲。物体移动有惯性，颜色过冲则会闪出调色板里不存在的颜色。M3 的分离幅度小些，但方向一致——加速段的 decelerate 曲线只给移动，其余走 standard。
+两族都把「移动」和「效果」分开，原因在 M3E 上最直观：它的两条位移曲线带过冲，峰值分别为 1.092 与 1.014，效果曲线不过冲。物体移动有惯性，颜色过冲则会闪出调色板里不存在的颜色。
 
-关闭「位移与效果使用不同曲线」后，两族都退化为只用效果曲线。
+M3 那侧的分离要说明白：Material 3 的 `emphasized` 整体是两段首尾相接的三次贝塞尔（`pathInterpolator(M 0,0 C 0.05,0,0.133333,0.06,0.166666,0.4 C 0.208333,0.82,0.25,1,1,1)`），`cubic-bezier()` 只能表达一段，所以 Material 官方的 Web token 表把 `emphasized` 标为不可用、回退到 `standard`。这里改用官方单列出来的 `emphasized-decelerate`（`cubic-bezier(0.05, 0.7, 0.1, 1)`）承担位移，效果侧用 `standard`——两个都是 Material 自己发布的 token，不是拼出来的近似。
+
+本层无法区分入场与出场，因此位移一律用 decelerate；Material 对出场建议用对应的 accelerate。
 
-M3 的 emphasized 整体是一条五次贝塞尔，`cubic-bezier()` 表达不了；这里用的是它减速段的等价三次形式，也正是 Material 官方 web token 里的 `emphasized-decelerate` 取值。
+关闭「位移与效果使用不同曲线」后，两族都退化为只用效果曲线。
 
 ### 为什么是改写 CSSOM，而不是注入覆盖样式表
 
@@ -147,7 +149,9 @@ M3 的 emphasized 整体是一条五次贝塞尔，`cubic-bezier()` 表达不了
 
 ### 时长
 
-- 「时长倍率」按 1× / 1.25× / 1.5× / 2× 缩放**写死的字面时长**；引用 `var(--ds-transition-duration*)` 的时长不动它本身，改为把这些自定义属性按同一倍率缩放，效果一致且不用逐条改。
+- 「时长倍率」在界面上提供 0.5× / 0.75× / 1× / 1.25× / 1.5× / 2×。配置里手工写入的其它值（schema 允许 0.5–2）会插入档位表并选中，不会被悄悄折回 1×。
+- 倍率作用于**写死的字面时长**；引用 `var(--ds-transition-duration*)` 的时长不动它本身，改为把这三个自定义属性按同一倍率缩放，效果一致且不用逐条改。缩放前会读取页面当前的计算值，DSH 改了基值也按新基值算。
+- `1ms` 及以下的时长视为「立即」，既不放缩也不吸附——DSH 的减弱动效规则里写的就是 `.01ms`，把它当成待调的时长去放大，本来即时完成的过渡会变成可见的一跳。
 - 无限循环的时长不缩放——1 秒的旋转是设计选定的速度，不是待调的过渡。
 - 「时长对齐到 Material 档位」把结果吸附到 50/100/150/200/250/300/350/400/450/500/550/600/700/800/900/1000ms。
 
@@ -160,8 +164,9 @@ M3 的 emphasized 整体是一条五次贝塞尔，`cubic-bezier()` 表达不了
 
 ### 生效范围
 
-- 覆盖页面上的全部样式表，包括其他插件注入的。首次应用时全量扫描，之后用 `MutationObserver` 监视 `head`，新注入的样式表在下一个微任务内被补上。
-- 跨源样式表读不到 `cssRules`，会在 `~/.dsh/ui-experience.log` 记录一行并跳过——这类表的规则无法改写，静默跳过会让部分界面停留在原生曲线而无迹可循。
+- 覆盖页面上的全部样式表，包括其他插件注入的。首次应用时全量扫描，之后用 `MutationObserver` 监视 `head` 与 `body`，新注入的 `<style>` 在下一个微任务内被补上。
+- 通过 `document.adoptedStyleSheets` 挂载的构造式样式表不是 DOM 变更，只在首次应用与下一次 `apply` 时被读取。
+- 跨源样式表读不到 `cssRules`，会在浏览器控制台记录一行并跳过——这类表的规则无法改写，静默跳过会让部分界面停留在原生曲线而无迹可循。（这条诊断走控制台而非 `~/.dsh/ui-experience.log`：后者由宿主半写入，浏览器半够不到文件系统。）
 - 状态会写在 `<html data-dsh-uix-motion="m3|m3e">` 上，便于区分曲线来源。
 
 ## 边框宽度

package/lib/client.js

@@ -127,7 +127,6 @@
     const match = DURATION.exec(value.trim());
     if (match === null) return void 0;
     const amount = Number(match[1]);
-    if (!Number.isFinite(amount) || amount < 0) return void 0;
     return match[2] === "s" ? amount * 1e3 : amount;
   }
   function quantizeMs(ms) {
@@ -143,11 +142,13 @@
     return best;
   }
   var MAX_DURATION_MS = 1e4;
+  var NEGLIGIBLE_MS = 1;
   function retime(value, scale, quantize) {
+    if (scale === 1 && !quantize) return void 0;
     const original = parseDurationMs(value);
-    if (original === void 0 || original === 0) return void 0;
+    if (original === void 0 || original <= NEGLIGIBLE_MS) return void 0;
     const scaled = Math.round(original * scale);
-    const target = Math.min(MAX_DURATION_MS, Math.max(1, quantize ? quantizeMs(scaled) : scaled));
+    const target = Math.min(MAX_DURATION_MS, Math.max(NEGLIGIBLE_MS, quantize ? quantizeMs(scaled) : scaled));
     if (target === original) return void 0;
     return `${target}ms`;
   }
@@ -175,6 +176,7 @@
   }
 
   // src/motion.ts
+  var KEYFRAMES_RULE = 7;
   var TRANSITIONS = {
     selector: "transition-property",
     duration: "transition-duration",
@@ -187,9 +189,9 @@
     iterations: "animation-iteration-count"
   };
   var DURATION_TOKENS = [
-    ["--ds-transition-duration", 200],
-    ["--ds-transition-duration-fast", 100],
-    ["--ds-transition-duration-slow", 300]
+    "--ds-transition-duration",
+    "--ds-transition-duration-fast",
+    "--ds-transition-duration-slow"
   ];
   function createMotion() {
     const patches = /* @__PURE__ */ new Map();
@@ -234,7 +236,7 @@
       const frames = /* @__PURE__ */ new Map();
       for (const sheet of sheets) {
         walk(sheet.cssRules, (rule) => {
-          if (rule.name === void 0 || rule.cssRules === void 0) return;
+          if (rule.type !== KEYFRAMES_RULE || rule.name === void 0 || rule.cssRules === void 0) return;
           const properties = frames.get(rule.name) ?? [];
           walk(rule.cssRules, (frame) => {
             const declaration = frame.style;
@@ -286,7 +288,7 @@
         declaration.setProperty(family.timing, nextTimings.join(", "));
         changed = true;
       }
-      if (durationChanged && nextDurations.length === count) {
+      if (durationChanged) {
         declaration.setProperty(family.duration, nextDurations.join(", "));
         changed = true;
       }
@@ -302,8 +304,9 @@
           const declaration = rule.style;
           if (declaration === void 0 || patches.has(rule)) return;
           const before = declaration.cssText;
-          const touched = rewriteFamily(declaration, TRANSITIONS, frames, active) || rewriteFamily(declaration, ANIMATIONS, frames, active);
-          if (!touched) return;
+          const movedTransition = rewriteFamily(declaration, TRANSITIONS, frames, active);
+          const movedAnimation = rewriteFamily(declaration, ANIMATIONS, frames, active);
+          if (!movedTransition && !movedAnimation) return;
           patches.set(rule, { declaration, before, after: declaration.cssText });
         });
       }
@@ -311,12 +314,19 @@
     function applyDurationTokens() {
       const active = settings;
       if (active === void 0 || active.durationScale === 1) return;
-      for (const [token, base] of DURATION_TOKENS) {
-        document.documentElement.style.setProperty(token, `${Math.round(base * active.durationScale)}ms`);
+      const root = document.documentElement;
+      const computed = window.getComputedStyle(root);
+      for (const token of DURATION_TOKENS) {
+        const base = parseDurationMs(computed.getPropertyValue(token).trim());
+        if (base === void 0) {
+          console.error(`ui-experience: motion cannot read ${token}; durations using it keep their shipped value`);
+          continue;
+        }
+        root.style.setProperty(token, `${Math.round(base * active.durationScale)}ms`);
       }
     }
     function clearDurationTokens() {
-      for (const [token] of DURATION_TOKENS) document.documentElement.style.removeProperty(token);
+      for (const token of DURATION_TOKENS) document.documentElement.style.removeProperty(token);
     }
     function wantsReduced() {
       const active = settings;
@@ -324,8 +334,7 @@
       if (active.reduced === "always") return true;
       return active.reduced === "system" && media.matches;
     }
-    function syncReduced() {
-      const want = wantsReduced();
+    function setReducedSheet(want) {
       if (want === reducedActive) return;
       reducedActive = want;
       reducedSheet?.remove();
@@ -336,13 +345,25 @@
       document.head.appendChild(sheet);
       reducedSheet = sheet;
     }
+    function realize() {
+      const active = settings;
+      if (active === void 0 || active.mode === "off") return;
+      const want = wantsReduced();
+      setReducedSheet(want);
+      if (want) {
+        restoreDeclarations();
+        clearDurationTokens();
+        return;
+      }
+      applyDurationTokens();
+      scan();
+      observer ??= observeDocument();
+    }
     function refresh() {
       if (refreshPending) return;
       refreshPending = true;
       queueMicrotask(() => {
         refreshPending = false;
-        const active = settings;
-        if (active === void 0 || active.mode === "off" || reducedActive) return;
         scan();
       });
     }
@@ -351,23 +372,24 @@
         refresh();
       });
       instance.observe(document.head, { childList: true, subtree: true });
+      instance.observe(document.body, { childList: true, subtree: true });
       return { disconnect: () => {
         instance.disconnect();
       } };
     }
     function unwatchPreference() {
       if (mediaListener === void 0) return;
-      media.removeEventListener?.("change", mediaListener);
+      media.removeEventListener("change", mediaListener);
       mediaListener = void 0;
     }
     function watchPreference() {
       if (mediaListener !== void 0) return;
       mediaListener = () => {
-        syncReduced();
+        realize();
       };
-      media.addEventListener?.("change", mediaListener);
+      media.addEventListener("change", mediaListener);
     }
-    function restore() {
+    function restoreDeclarations() {
       for (const patch of patches.values()) {
         if (patch.declaration.cssText !== patch.after) {
           console.error("ui-experience: motion restore overwrote a declaration that changed after this layer wrote it");
@@ -375,11 +397,15 @@
         patch.declaration.cssText = patch.before;
       }
       patches.clear();
+    }
+    function restore() {
+      restoreDeclarations();
       clearDurationTokens();
-      reducedSheet?.remove();
-      reducedSheet = void 0;
-      reducedActive = false;
+      setReducedSheet(false);
       unwatchPreference();
+      observer?.disconnect();
+      observer = void 0;
+      settings = void 0;
       document.documentElement.removeAttribute(MOTION_ATTRIBUTE);
     }
     return {
@@ -388,23 +414,13 @@
         settings = next;
         if (next.mode === "off") return;
         watchPreference();
-        syncReduced();
-        if (reducedActive) {
-          document.documentElement.setAttribute(MOTION_ATTRIBUTE, next.mode);
-          return;
-        }
-        applyDurationTokens();
-        scan();
-        observer ??= observeDocument();
         document.documentElement.setAttribute(MOTION_ATTRIBUTE, next.mode);
+        realize();
       },
       refresh,
       restore,
       dispose() {
         restore();
-        observer?.disconnect();
-        observer = void 0;
-        settings = void 0;
       }
     };
   }
@@ -579,7 +595,7 @@
       "palette.reset": "\u6062\u590D\u9ED8\u8BA4",
       "palette.paths-hint": "\u652F\u6301\u4EE5 ~ \u5F00\u5934\u7684\u8DEF\u5F84\uFF0C\u6216\u7EDD\u5BF9\u8DEF\u5F84\u3002\u989C\u8272\u6587\u4EF6\u63D0\u4F9B\u5B8C\u6574\u6620\u5C04\uFF0C\u4EE4\u724C\u6587\u4EF6\u91CC\u5217\u51FA\u7684 token \u9010\u9879\u8986\u76D6\u3002",
       "motion.title": "M3 \u52A8\u6548",
-      "motion.description": "\u6309 Material 3 \u66F2\u7EBF\u6539\u5199\u6574\u4E2A\u754C\u9762\u7684\u8FC7\u6E21\u4E0E\u5173\u952E\u5E27\u52A8\u753B\uFF0C\u539F\u5730\u6539\u5199\u5165\u5DF2\u751F\u6548\u7684\u6837\u5F0F\u89C4\u5219",
+      "motion.description": "\u6309 Material 3 \u66F2\u7EBF\u6539\u5199\u6574\u4E2A\u754C\u9762\u7684\u8FC7\u6E21\u4E0E\u5173\u952E\u5E27\u52A8\u753B\uFF0C\u76F4\u63A5\u6539\u5199\u5DF2\u751F\u6548\u7684\u6837\u5F0F\u89C4\u5219",
       "motion.mode": "\u66F2\u7EBF\u65CF",
       "motion.mode-off": "\u5173\u95ED",
       "motion.mode-m3": "M3",
@@ -587,7 +603,7 @@
       "motion.duration": "\u65F6\u957F\u500D\u7387",
       "motion.options": "\u9AD8\u7EA7\u9009\u9879",
       "motion.spatial-split": "\u4F4D\u79FB\u4E0E\u6548\u679C\u4F7F\u7528\u4E0D\u540C\u66F2\u7EBF",
-      "motion.spatial-split-hint": "M3E \u7684\u4F4D\u79FB\u66F2\u7EBF\u5E26\u6709\u7EA6 9% \u7684\u8FC7\u51B2\uFF0C\u6548\u679C\u66F2\u7EBF\u6CA1\u6709\u3002\u5173\u95ED\u540E\u5168\u90E8\u4F7F\u7528\u6548\u679C\u66F2\u7EBF\u3002",
+      "motion.spatial-split-hint": "\u4F4D\u79FB\u66F2\u7EBF\u5E26\u8FC7\u51B2\uFF08\u5FEB\u4F4D\u79FB\u7EA6 9%\uFF0C\u9ED8\u8BA4\u4F4D\u79FB\u7EA6 1.4%\uFF09\uFF0C\u6548\u679C\u66F2\u7EBF\u6CA1\u6709\u3002\u5173\u95ED\u540E\u5168\u90E8\u4F7F\u7528\u6548\u679C\u66F2\u7EBF\u3002",
       "motion.quantize": "\u65F6\u957F\u5BF9\u9F50\u5230 Material \u6863\u4F4D",
       "motion.quantize-hint": "\u628A\u6539\u5199\u540E\u7684\u65F6\u957F\u5438\u9644\u5230 50/100/150/200/250/300/350/400/450/500/550/600/700/800/900/1000ms\u3002",
       "motion.reduced": "\u59CB\u7EC8\u51CF\u5F31\u52A8\u6548",
@@ -617,7 +633,7 @@
       "motion.duration": "Duration scale",
       "motion.options": "Advanced options",
       "motion.spatial-split": "Spatial and effects take different curves",
-      "motion.spatial-split-hint": "The M3E spatial curve overshoots by about 9%, the effects curve does not. Turning this off uses the effects curve everywhere.",
+      "motion.spatial-split-hint": "The spatial curves overshoot (about 9% for the fast one, 1.4% for the default); the effects curve does not. Turning this off uses the effects curve everywhere.",
       "motion.quantize": "Snap durations to the Material ladder",
       "motion.quantize-hint": "Pull rewritten durations onto 50/100/150/200/250/300/350/400/450/500/550/600/700/800/900/1000 ms.",
       "motion.reduced": "Always reduce motion",
@@ -1103,12 +1119,13 @@
               { value: "m3", label: tr("motion.mode-m3") },
               { value: "m3e", label: tr("motion.mode-m3e") }
             ];
-            const scales = [
-              { value: "1", label: "1\xD7" },
-              { value: "1.25", label: "1.25\xD7" },
-              { value: "1.5", label: "1.5\xD7" },
-              { value: "2", label: "2\xD7" }
-            ];
+            const ladder = [0.5, 0.75, 1, 1.25, 1.5, 2];
+            if (!ladder.includes(current.durationScale)) ladder.push(current.durationScale);
+            ladder.sort((left, right) => left - right);
+            const scales = ladder.map((value) => ({
+              value: String(value),
+              label: `${value}\xD7`
+            }));
             const policy = open ? h(
               "div",
               { className: "dsh-uix-form" },

package/lib/index.js

@@ -579,9 +579,15 @@ var UiExperienceService = class extends TypertRemoteService {
     if (reduced !== void 0 && !MOTION_REDUCED.test(reduced)) {
       throw new Error(`ui-experience: unknown reduced-motion policy ${JSON.stringify(reduced)}`);
     }
-    if (scale !== void 0 && (!Number.isFinite(scale) || scale < 0.5 || scale > 2)) {
+    if (scale !== void 0 && (typeof scale !== "number" || !Number.isFinite(scale) || scale < 0.5 || scale > 2)) {
       throw new Error(`ui-experience: durationScale ${String(scale)} is outside 0.5\u20132`);
     }
+    if (spatialSplit !== void 0 && typeof spatialSplit !== "boolean") {
+      throw new Error(`ui-experience: spatialSplit must be a boolean, got ${typeof spatialSplit}`);
+    }
+    if (quantize !== void 0 && typeof quantize !== "boolean") {
+      throw new Error(`ui-experience: quantize must be a boolean, got ${typeof quantize}`);
+    }
     await this.persist((current) => ({
       ...current,
       ...mode === void 0 ? {} : { motion: mode },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plugin/dsh-ui-experience",
-  "version": "1.0.0-dev.43487914661",
+  "version": "1.0.0-dev.43488816373",
   "type": "module",
   "description": "UI experience enhancements for DeepSeek Harness: follow the system matugen Material You palette as the interface theme, and rewrite interface motion onto Material 3 / Material 3 Expressive curves.",
   "license": "MIT",