@dsh-plugin/dsh-ui-experience 1.0.0-dev.43485427852 → 1.0.0-dev.43486958683

package/README.md

@@ -1,6 +1,6 @@
 # dsh-ui-experience
 
-DeepSeek Harness 界面体验插件（`@dsh-plugin/dsh-ui-experience`，仓库：<https://github.com/dsh-plugins/dsh-ui-experience>）：读取系统 matugen 生成的 Material You 配色，作为叠加层套在 DSH 当前主题上，并统一界面边框宽度。
+DeepSeek Harness 界面体验插件（`@dsh-plugin/dsh-ui-experience`，仓库：<https://github.com/dsh-plugins/dsh-ui-experience>）：读取系统 matugen 生成的 Material You 配色，作为叠加层套在 DSH 当前主题上；按 Material 3 曲线改写整个界面的过渡与关键帧动画；并统一界面边框宽度。
 
 ## 功能
 
@@ -8,6 +8,7 @@ DeepSeek Harness 界面体验插件（`@dsh-plugin/dsh-ui-experience`，仓库
 - 配色是叠加层，不改写原生「浅色 / 深色 / 跟随系统」偏好；开关关闭后回到原生配色。
 - 同一行可展开 **配色文件路径**，分别编辑 matugen 颜色文件与 DSH 令牌文件的路径，两者都会持久化；开关状态与路径均保存在 profile 配置里，重启应用后自动恢复。
 - 统一界面边框宽度：插件配置 `borderWidth`（默认 `0.5px`），仅在「Matugen 配色跟随」开启时生效。
+- 「设置 → 通用设置」另起一行 **M3 动效**，可选择 `M3` / `M3E` 两族曲线，并调时长倍率、时长对齐与减弱动效策略。它原地改写页面上已生效的样式规则，覆盖范围包含第三方插件注入的样式。
 - 配色文件只在本地读取，不上传。
 
 ## 使用
@@ -107,6 +108,60 @@ output_path = '~/.local/state/quickshell/user/generated/dsh-tokens.json'
 
 token 的值按原样写入 CSS 变量，因此 `color-mix(...)` 这类表达式可以直接写在模板里。改完模板后重新运行 matugen，插件在下一个轮询周期读到文件变化后生效。
 
+## M3 动效
+
+「设置 → 通用设置 → M3 动效」把界面的动画曲线换成 Material 3 / Material 3 Expressive 的曲线族。
+
+### 曲线族
+
+| 用途 | M3 | M3E |
+| --- | --- | --- |
+| 位移（transform、宽高、内外距、gap、圆角…） | `cubic-bezier(0.2, 0, 0, 1)` | 声明时长 ≤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)` | `cubic-bezier(0.34, 0.8, 0.34, 1)` |
+
+M3E 的两条位移曲线带过冲，峰值分别为 1.092 与 1.014；效果曲线不过冲。这正是 M3E 的设计意图：物体移动有惯性，颜色过冲会闪出调色板里不存在的颜色。所以位移与效果的曲线必须分开，关闭「位移与效果使用不同曲线」后一律用效果曲线。
+
+M3 族的 standard 与 emphasized 在 CSS 的三次贝塞尔下都退化为同一个值（M3 的 emphasized 是五次贝塞尔，`cubic-bezier()` 表达不了），因此 M3 族整个界面只有一条曲线，这是规范本身的形状，不是实现偷懒。
+
+### 为什么是改写 CSSOM，而不是注入覆盖样式表
+
+注入一张「覆盖表」有两种写法，都不成立：
+
+- **按类名覆盖**：需要为每个组件抄一遍选择器并保证优先级不低于原规则。这份抄件正是 DSH 改版时会失效的东西——和「把编译产物里的 hash 类名写死」是同一类错。
+- **`!important` 全覆盖**：会连带压掉刻意保留的例外，例如终端光标的 `step-end`、点阵揭示的 `steps()`。
+
+这里改为遍历 `document.styleSheets` 与 `document.adoptedStyleSheets`，递归进入 `@media` / `@supports` / `@layer` / 嵌套规则，对每条真正声明了 `transition` / `animation` 的规则，**原地改写它自己的长写属性**：
+
+- 优先级不变：改的是同一条规则，所以只在原规则生效的地方生效。
+- 例外自动保留：`steps()`、`step-end` 这类离散步进不动；无限循环上的 `linear` 不动（旋转指示器被任何缓动曲线处理都会显出一顿一顿）；`0s` 的可见性门控不动。
+- 无需随 DSH 更新维护：新增或改名的组件自动被覆盖。
+- 精确还原：写入前整块记录 `cssText`，关闭时原样写回；若期间被第三方改过则在日志中说明后仍然还原。
+
+### 关键帧感知
+
+动画该用哪条曲线，取决于它的 `@keyframes` 到底在动什么。扫描时先建立「关键帧名 → 它改动的属性集合」，再据此判定：同时含 `transform` 的是位移，纯 `opacity` 的是效果。查不到名字（定义在跨源样式表里）时按效果处理。
+
+无限循环的动画一律按效果处理：旋转、呼吸、骨架屏都是环境性的，不是一次性位移；给它套带过冲的位移曲线会让循环进度条每一轮都冲出轨道。
+
+### 时长
+
+- 「时长倍率」按 1× / 1.25× / 1.5× / 2× 缩放**写死的字面时长**；引用 `var(--ds-transition-duration*)` 的时长不动它本身，改为把这些自定义属性按同一倍率缩放，效果一致且不用逐条改。
+- 无限循环的时长不缩放——1 秒的旋转是设计选定的速度，不是待调的过渡。
+- 「时长对齐到 Material 档位」把结果吸附到 50/100/150/200/250/300/350/400/450/500/550/600/700/800/900/1000ms。
+
+### 减弱动效
+
+- `跟随系统`（默认）：系统开启「减弱动态效果」时，全部时长压到 1ms、动画只跑一轮。
+- `始终减弱动效`：无论系统设置，一律压制。
+
+这一条是整层里唯一使用 `!important` 的地方——它要压掉本层从未写过的声明，逐条改写做不到。压制期间不再改写曲线，因为没有可观察的时长。
+
+### 生效范围
+
+- 覆盖页面上的全部样式表，包括其他插件注入的。首次应用时全量扫描，之后用 `MutationObserver` 监视 `head`，新注入的样式表在下一个微任务内被补上。
+- 跨源样式表读不到 `cssRules`，会在 `~/.dsh/ui-experience.log` 记录一行并跳过——这类表的规则无法改写，静默跳过会让部分界面停留在原生曲线而无迹可循。
+- 状态会写在 `<html data-dsh-uix-motion="m3|m3e">` 上，便于区分曲线来源。
+
 ## 边框宽度
 
 - 插件配置 `borderWidth` 默认为 `0.5px`，只在「Matugen 配色跟随」开启时生效；关闭开关后边框立即恢复原生宽度。
@@ -118,6 +173,10 @@ token 的值按原样写入 CSS 变量，因此 `color-mix(...)` 这类表达式
 - 走 `colors.json` 路径时 matugen 只提供一套暗色方案，浅色与深色模式叠加同一张配色表，界面的明暗切换只影响未被覆盖的元素；需要两套配色时改用 `dsh-tokens.json`。
 - 配色检测周期为 2 秒，文件变化最多延迟约 2 秒生效。
 - 关闭开关后启动底色叠加立即撤销（由作用域属性控制）；注入的样式与脚本元素保留到下次刷新，但不产生视觉效果。
+- M3 动效的「位移 / 效果」判定依据属性名与关键帧内容，不分析属性的实际取值变化；判定不出来的情况（例如只由 `all` 声明的过渡）按效果处理，宁可不给过冲。
+- 跨源样式表里的规则无法改写，只会在日志中记录。
+- 本层只改写曲线与时长，不新增、不改写关键帧本身；DSH 没定义的动效不会因此出现。
+- 浏览器半在刷新页面时重载，宿主半只在进程重启时重载。两者版本不一致时（刚升级插件但没重启 DSH），M3 动效行会保持无操作并在控制台记录一行原因，配色功能不受影响。
 
 ## 样式基线
 
@@ -140,6 +199,8 @@ token 的值按原样写入 CSS 变量，因此 `color-mix(...)` 这类表达式
 | `.dsh-uix-save` | 配置表单的保存按钮 |
 | `.dsh-uix-reset` | `Button.module.css` `.outline` |
 | `.dsh-uix-switch` / `-thumb` | `Switch.module.css` `.switch` / `.thumb` |
+| `.dsh-uix-segment` / `-indicator` / `-tab` | `SegmentedControl.module.css` `.control` / `.indicator` / `.tab` |
+| `.dsh-uix-check` / `-label` / `-hint` | `Checkbox.module.css` `.checkbox` 及其原生输入 |
 
 所有颜色、圆角、焦点环都用 `--dsw-*` 主题 token，这些是跨版本稳定的公开契约；只有长度值（内距、尺寸、字号）可能随改版调整。升级 DSH 后，把上表的源文件与 `src/styles.ts` 对照一遍即可。
 

package/lib/client.js

@@ -3,8 +3,411 @@
   // src/shared.ts
   var REMOTE_SERVICE = "uiExperience";
   var BOOT_ATTRIBUTE = "data-dsh-uix-matugen";
+  var MOTION_ATTRIBUTE = "data-dsh-uix-motion";
   var DEFAULT_COLORS_PATH = "~/.local/state/quickshell/user/generated/colors.json";
   var DEFAULT_TOKENS_PATH = "~/.local/state/quickshell/user/generated/dsh-tokens.json";
+  var MOTION_OFF = {
+    mode: "off",
+    durationScale: 1,
+    spatialSplit: true,
+    quantize: false,
+    reduced: "system"
+  };
+
+  // src/motion-plan.ts
+  var SPATIAL_PROPERTIES = /* @__PURE__ */ new Set([
+    "transform",
+    "translate",
+    "rotate",
+    "scale",
+    "offset-distance",
+    "offset-path",
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "inset",
+    "inset-inline",
+    "inset-block",
+    "inset-inline-start",
+    "inset-inline-end",
+    "inset-block-start",
+    "inset-block-end",
+    "width",
+    "height",
+    "min-width",
+    "min-height",
+    "max-width",
+    "max-height",
+    "inline-size",
+    "block-size",
+    "min-inline-size",
+    "min-block-size",
+    "max-inline-size",
+    "max-block-size",
+    "flex-basis",
+    "margin",
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+    "margin-inline",
+    "margin-block",
+    "margin-inline-start",
+    "margin-inline-end",
+    "padding",
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+    "padding-inline",
+    "padding-block",
+    "padding-inline-start",
+    "padding-inline-end",
+    "gap",
+    "row-gap",
+    "column-gap",
+    "grid-template-columns",
+    "grid-template-rows",
+    "grid-auto-columns",
+    "grid-auto-rows",
+    "border-radius",
+    "border-top-left-radius",
+    "border-top-right-radius",
+    "border-bottom-left-radius",
+    "border-bottom-right-radius"
+  ]);
+  var CURVE_M3_SPATIAL = "cubic-bezier(0.2, 0, 0, 1)";
+  var CURVE_M3_EFFECTS = "cubic-bezier(0.2, 0, 0, 1)";
+  var CURVE_M3E_SPATIAL_FAST = "cubic-bezier(0.42, 1.67, 0.21, 0.9)";
+  var CURVE_M3E_SPATIAL = "cubic-bezier(0.38, 1.21, 0.22, 1)";
+  var CURVE_M3E_EFFECTS = "cubic-bezier(0.34, 0.8, 0.34, 1)";
+  var FAST_SPATIAL_MAX_MS = 200;
+  var MATERIAL_DURATIONS_MS = [
+    50,
+    100,
+    150,
+    200,
+    250,
+    300,
+    350,
+    400,
+    450,
+    500,
+    550,
+    600,
+    700,
+    800,
+    900,
+    1e3
+  ];
+  function splitList(value) {
+    if (value.trim() === "") return [];
+    const out = [];
+    let depth = 0;
+    let start = 0;
+    for (let index = 0; index < value.length; index += 1) {
+      const character = value[index];
+      if (character === "(") depth += 1;
+      else if (character === ")") depth = Math.max(0, depth - 1);
+      else if (character === "," && depth === 0) {
+        out.push(value.slice(start, index).trim());
+        start = index + 1;
+      }
+    }
+    out.push(value.slice(start).trim());
+    return out;
+  }
+  function entryAt(entries, index) {
+    if (entries.length === 0) return void 0;
+    return entries[index % entries.length];
+  }
+  var DURATION = /^([0-9]*\.?[0-9]+)(ms|s)$/;
+  function parseDurationMs(value) {
+    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) {
+    let best = MATERIAL_DURATIONS_MS[0] ?? 50;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const step of MATERIAL_DURATIONS_MS) {
+      const distance = Math.abs(step - ms);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = step;
+      }
+    }
+    return best;
+  }
+  var MAX_DURATION_MS = 1e4;
+  function retime(value, scale, quantize) {
+    const original = parseDurationMs(value);
+    if (original === void 0 || original === 0) return void 0;
+    const scaled = Math.round(original * scale);
+    const target = Math.min(MAX_DURATION_MS, Math.max(1, quantize ? quantizeMs(scaled) : scaled));
+    if (target === original) return void 0;
+    return `${target}ms`;
+  }
+  function isDiscrete(value) {
+    return /^(?:steps?\(|step-start$|step-end$)/.test(value.trim());
+  }
+  function classify(property) {
+    const name = property.trim().toLowerCase();
+    return SPATIAL_PROPERTIES.has(name) ? "spatial" : "effects";
+  }
+  function classifyAll(properties) {
+    for (const property of properties) {
+      if (classify(property) === "spatial") return "spatial";
+    }
+    return "effects";
+  }
+  function curveFor(mode, domain, spatialSplit, originalMs) {
+    if (mode === "m3") {
+      return domain === "spatial" ? CURVE_M3_SPATIAL : CURVE_M3_EFFECTS;
+    }
+    if (mode === "m3e" && spatialSplit && domain === "spatial") {
+      return originalMs !== void 0 && originalMs <= FAST_SPATIAL_MAX_MS ? CURVE_M3E_SPATIAL_FAST : CURVE_M3E_SPATIAL;
+    }
+    return CURVE_M3E_EFFECTS;
+  }
+
+  // src/motion.ts
+  var TRANSITIONS = {
+    selector: "transition-property",
+    duration: "transition-duration",
+    timing: "transition-timing-function"
+  };
+  var ANIMATIONS = {
+    selector: "animation-name",
+    duration: "animation-duration",
+    timing: "animation-timing-function",
+    iterations: "animation-iteration-count"
+  };
+  var DURATION_TOKENS = [
+    ["--ds-transition-duration", 200],
+    ["--ds-transition-duration-fast", 100],
+    ["--ds-transition-duration-slow", 300]
+  ];
+  function createMotion() {
+    const patches = /* @__PURE__ */ new Map();
+    const unreadable = /* @__PURE__ */ new Set();
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let settings;
+    let reducedSheet;
+    let reducedActive = false;
+    let observer;
+    let mediaListener;
+    let refreshPending = false;
+    function walk(rules, visit) {
+      for (let index = 0; index < rules.length; index += 1) {
+        const rule = rules[index];
+        if (rule === void 0) continue;
+        visit(rule);
+        if (rule.cssRules !== void 0) walk(rule.cssRules, visit);
+      }
+    }
+    function readableSheets() {
+      const out = [];
+      const collect = (sheet) => {
+        if (sheet === void 0) return;
+        try {
+          const rules = sheet.cssRules;
+          if (rules === void 0) return;
+          out.push(sheet);
+        } catch (error) {
+          const key = sheet.href ?? "(inline)";
+          if (unreadable.has(key)) return;
+          unreadable.add(key);
+          console.error(`ui-experience: motion cannot read stylesheet ${key}: ${error.message}`);
+        }
+      };
+      for (let index = 0; index < document.styleSheets.length; index += 1) {
+        collect(document.styleSheets[index]);
+      }
+      for (const sheet of document.adoptedStyleSheets ?? []) collect(sheet);
+      return out;
+    }
+    function keyframeProperties(sheets) {
+      const frames = /* @__PURE__ */ new Map();
+      for (const sheet of sheets) {
+        walk(sheet.cssRules, (rule) => {
+          if (rule.name === void 0 || rule.cssRules === void 0) return;
+          const properties = frames.get(rule.name) ?? [];
+          walk(rule.cssRules, (frame) => {
+            const declaration = frame.style;
+            if (declaration === void 0) return;
+            for (let index = 0; index < declaration.length; index += 1) {
+              const name = declaration.item(index);
+              if (name !== "" && !properties.includes(name)) properties.push(name);
+            }
+          });
+          frames.set(rule.name, properties);
+        });
+      }
+      return frames;
+    }
+    function rewriteFamily(declaration, family, frames, active) {
+      const selectors = splitList(declaration.getPropertyValue(family.selector));
+      const durations = splitList(declaration.getPropertyValue(family.duration));
+      const timings = splitList(declaration.getPropertyValue(family.timing));
+      const iterations = family.iterations === void 0 ? [] : splitList(declaration.getPropertyValue(family.iterations));
+      if (selectors.length === 0 && durations.length === 0 && timings.length === 0) return false;
+      const count = Math.max(selectors.length, durations.length, timings.length, 1);
+      const nextTimings = [];
+      const nextDurations = [];
+      let timingChanged = false;
+      let durationChanged = false;
+      for (let index = 0; index < count; index += 1) {
+        const selector = entryAt(selectors, index) ?? "all";
+        const originalTiming = entryAt(timings, index);
+        const originalDuration = entryAt(durations, index);
+        const originalMs = originalDuration === void 0 ? void 0 : parseDurationMs(originalDuration);
+        const infinite = entryAt(iterations, index) === "infinite";
+        if (selector === "none") {
+          if (originalTiming !== void 0) nextTimings.push(originalTiming);
+          if (originalDuration !== void 0) nextDurations.push(originalDuration);
+          continue;
+        }
+        const keepTiming = originalTiming !== void 0 && (isDiscrete(originalTiming) || infinite && originalTiming === "linear" || originalMs === 0);
+        const domain = infinite ? "effects" : family.selector === "transition-property" ? classify(selector) : classifyAll(frames.get(selector) ?? ["opacity"]);
+        const curve = keepTiming && originalTiming !== void 0 ? originalTiming : curveFor(active.mode, domain, active.spatialSplit, originalMs);
+        nextTimings.push(curve);
+        if (curve !== originalTiming) timingChanged = true;
+        if (originalDuration === void 0) continue;
+        const retimed = infinite ? void 0 : retime(originalDuration, active.durationScale, active.quantize);
+        nextDurations.push(retimed ?? originalDuration);
+        if (retimed !== void 0) durationChanged = true;
+      }
+      let changed = false;
+      if (timingChanged) {
+        declaration.setProperty(family.timing, nextTimings.join(", "));
+        changed = true;
+      }
+      if (durationChanged && nextDurations.length === count) {
+        declaration.setProperty(family.duration, nextDurations.join(", "));
+        changed = true;
+      }
+      return changed;
+    }
+    function scan() {
+      const active = settings;
+      if (active === void 0 || active.mode === "off") return;
+      const sheets = readableSheets();
+      const frames = keyframeProperties(sheets);
+      for (const sheet of sheets) {
+        walk(sheet.cssRules, (rule) => {
+          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;
+          patches.set(rule, { declaration, before, after: declaration.cssText });
+        });
+      }
+    }
+    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`);
+      }
+    }
+    function clearDurationTokens() {
+      for (const [token] of DURATION_TOKENS) document.documentElement.style.removeProperty(token);
+    }
+    function wantsReduced() {
+      const active = settings;
+      if (active === void 0) return false;
+      if (active.reduced === "always") return true;
+      return active.reduced === "system" && media.matches;
+    }
+    function syncReduced() {
+      const want = wantsReduced();
+      if (want === reducedActive) return;
+      reducedActive = want;
+      reducedSheet?.remove();
+      reducedSheet = void 0;
+      if (!want) return;
+      const sheet = document.createElement("style");
+      sheet.textContent = "*,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}";
+      document.head.appendChild(sheet);
+      reducedSheet = sheet;
+    }
+    function refresh() {
+      if (refreshPending) return;
+      refreshPending = true;
+      queueMicrotask(() => {
+        refreshPending = false;
+        const active = settings;
+        if (active === void 0 || active.mode === "off" || reducedActive) return;
+        scan();
+      });
+    }
+    function observeDocument() {
+      const instance = new MutationObserver(() => {
+        refresh();
+      });
+      instance.observe(document.head, { childList: true, subtree: true });
+      return { disconnect: () => {
+        instance.disconnect();
+      } };
+    }
+    function unwatchPreference() {
+      if (mediaListener === void 0) return;
+      media.removeEventListener?.("change", mediaListener);
+      mediaListener = void 0;
+    }
+    function watchPreference() {
+      if (mediaListener !== void 0) return;
+      mediaListener = () => {
+        syncReduced();
+      };
+      media.addEventListener?.("change", mediaListener);
+    }
+    function restore() {
+      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");
+        }
+        patch.declaration.cssText = patch.before;
+      }
+      patches.clear();
+      clearDurationTokens();
+      reducedSheet?.remove();
+      reducedSheet = void 0;
+      reducedActive = false;
+      unwatchPreference();
+      document.documentElement.removeAttribute(MOTION_ATTRIBUTE);
+    }
+    return {
+      apply(next) {
+        restore();
+        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);
+      },
+      refresh,
+      restore,
+      dispose() {
+        restore();
+        observer?.disconnect();
+        observer = void 0;
+        settings = void 0;
+      }
+    };
+  }
 
   // src/styles.ts
   var ROW_CSS = `
@@ -75,9 +478,52 @@
 .dsh-uix-switch-thumb{display:block;width:16px;height:16px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);transition:transform 120ms ease}
 .dsh-uix-switch[aria-checked=false] .dsh-uix-switch-thumb{background:var(--dsw-alias-switch-thumb)}
 .dsh-uix-switch[aria-checked=true] .dsh-uix-switch-thumb{transform:translate(16px)}
+
+/* A labelled control line: the caption column and the control that follows it,
+   mirroring the settings form's label/control pairing. */
+.dsh-uix-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.dsh-uix-choice-label{font-size:13px;font-weight:500;line-height:1.5;color:var(--dsw-alias-label-primary)}
+
+/* Segmented control: SegmentedControl.module.css .control / .indicator / .tab \u2014
+   a hover-wash track holding one sliding pill. The indicator is placed
+   arithmetically from the segment count and index carried as custom properties,
+   so nothing measures the DOM. */
+.dsh-uix-segment{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:4px;border-radius:var(--dsw-radius-md);background:var(--dsw-alias-interactive-bg-hover)}
+.dsh-uix-segment-indicator{position:absolute;top:4px;left:4px;width:calc((100% - 8px - 2px * (var(--dsh-segment-count) - 1)) / var(--dsh-segment-count));height:calc(100% - 8px);border:0;border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-soft);transform:translateX(calc(var(--dsh-segment-index) * (100% + 2px)));transition:transform 160ms ease;pointer-events:none}
+.dsh-uix-segment-tab{box-sizing:border-box;position:relative;z-index:1;height:28px;padding:0 16px;border:0;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;line-height:20px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color 120ms ease}
+.dsh-uix-segment-tab[aria-selected=true]{color:var(--dsw-alias-label-primary)}
+.dsh-uix-segment-tab:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
+.dsh-uix-segment-tab:disabled{cursor:default;opacity:.4}
+.dsh-uix-segment-tab:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
+
+/* Checkbox: Checkbox.module.css \u2014 a native input so the platform draws and keys
+   it, tinted with the brand accent, with the explanation stacked underneath. */
+.dsh-uix-check{display:flex;align-items:flex-start;gap:6px;padding:10px 0;font-size:14px;line-height:20px;color:var(--dsw-alias-label-primary);cursor:pointer}
+.dsh-uix-check+.dsh-uix-check{border-top:0.5px solid var(--dsw-alias-border-l2)}
+.dsh-uix-check input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;accent-color:var(--dsw-alias-brand-primary);cursor:inherit}
+.dsh-uix-check input:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsh-uix-check:has(input:disabled){cursor:default;opacity:.5}
+.dsh-uix-check-text{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dsh-uix-check-label{font-size:13px;font-weight:500;line-height:1.5;color:var(--dsw-alias-label-primary)}
+.dsh-uix-check-hint{font-size:12px;line-height:1.5;font-weight:400;color:var(--dsw-alias-label-tertiary)}
 `;
 
   // src/client.ts
+  var REDUCED_QUERY = "(prefers-reduced-motion: reduce)";
+  function queryReduced() {
+    return window.matchMedia(REDUCED_QUERY).matches;
+  }
+  function watchReduced(report) {
+    const media = window.matchMedia(REDUCED_QUERY);
+    const listener = () => {
+      report(media.matches);
+    };
+    report(media.matches);
+    media.addEventListener?.("change", listener);
+    return () => {
+      media.removeEventListener?.("change", listener);
+    };
+  }
   var SOURCE = "@dsh-plugin/dsh-ui-experience";
   var POLL_MS = 2e3;
   var IDLE_TICKS = 15;
@@ -108,7 +554,14 @@
       descriptors: [
         descriptor("poll", () => ({ known: zod.string().optional() }), "PollArgs"),
         descriptor("setActive", () => ({ active: zod.boolean().optional() }), "SetActiveArgs"),
-        descriptor("setPaths", () => ({ colorsPath: zod.string().optional(), tokensPath: zod.string().optional() }), "SetPathsArgs")
+        descriptor("setPaths", () => ({ colorsPath: zod.string().optional(), tokensPath: zod.string().optional() }), "SetPathsArgs"),
+        descriptor("setMotion", () => ({
+          mode: zod.string().optional(),
+          durationScale: zod.number().optional(),
+          spatialSplit: zod.boolean().optional(),
+          quantize: zod.boolean().optional(),
+          reduced: zod.string().optional()
+        }), "SetMotionArgs")
       ]
     };
   }
@@ -124,7 +577,24 @@
       "palette.tokens-path": "DSH \u4EE4\u724C\u6587\u4EF6\uFF08\u5B58\u5728\u65F6\u4F18\u5148\uFF09",
       "palette.save": "\u4FDD\u5B58",
       "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"
+      "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.mode": "\u66F2\u7EBF\u65CF",
+      "motion.mode-off": "\u5173\u95ED",
+      "motion.mode-m3": "M3",
+      "motion.mode-m3e": "M3E",
+      "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.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",
+      "motion.reduced-hint": "\u5F00\u542F\u540E\u5FFD\u7565\u7CFB\u7EDF\u7684\u300C\u51CF\u5F31\u52A8\u6001\u6548\u679C\u300D\u504F\u597D\uFF0C\u4E00\u5F8B\u628A\u65F6\u957F\u538B\u5230 1ms\u3002\u5173\u95ED\u65F6\u8DDF\u968F\u7CFB\u7EDF\u3002",
+      "motion.system-reduced": "\u7CFB\u7EDF\u5DF2\u8BF7\u6C42\u51CF\u5F31\u52A8\u6548\uFF0C\u672C\u9875\u52A8\u753B\u6B63\u5728\u88AB\u538B\u5236\u3002",
+      "motion.save-failed": "\u52A8\u6548\u8BBE\u7F6E\u4FDD\u5B58\u5931\u8D25",
+      "motion.inert": "\u66F2\u7EBF\u65CF\u4E3A\u300C\u5173\u95ED\u300D\uFF0C\u4EE5\u4E0B\u9009\u9879\u4E0D\u4F1A\u751F\u6548\u3002"
     },
     en: {
       "palette.title": "Matugen palette sync",
@@ -137,7 +607,24 @@
       "palette.tokens-path": "DSH token file (preferred when present)",
       "palette.save": "Save",
       "palette.reset": "Restore defaults",
-      "palette.paths-hint": "Paths may start with ~, or be absolute. The colors file supplies the full mapping; tokens listed in the token file override it item by item."
+      "palette.paths-hint": "Paths may start with ~, or be absolute. The colors file supplies the full mapping; tokens listed in the token file override it item by item.",
+      "motion.title": "M3 motion",
+      "motion.description": "Rewrite every transition and keyframe animation in the interface onto Material 3 curves, in place on the rules already in the cascade",
+      "motion.mode": "Curve family",
+      "motion.mode-off": "Off",
+      "motion.mode-m3": "M3",
+      "motion.mode-m3e": "M3E",
+      "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.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",
+      "motion.reduced-hint": "Ignore the system reduce-motion preference and force every duration to 1 ms. Off follows the system.",
+      "motion.system-reduced": "The system asked for reduced motion; this page is being held still.",
+      "motion.save-failed": "Failed to save the motion settings",
+      "motion.inert": "The curve family is Off, so these options have no effect."
     }
   };
   function registerClient() {
@@ -166,6 +653,7 @@
           let idleTick = 0;
           let lastRpcProblem = "";
           let lastPaletteProblem = "";
+          let motionUnsupported = false;
           let paintedWidth = "";
           let disposeOverride;
           let borderSheet;
@@ -173,11 +661,13 @@
             active: false,
             borderWidth: "0.5px",
             paths: { colors: DEFAULT_COLORS_PATH, tokens: DEFAULT_TOKENS_PATH },
+            motion: { ...MOTION_OFF },
             problem: "",
             notice: "",
             saving: false
           };
           const listeners = /* @__PURE__ */ new Set();
+          const motion = createMotion();
           const publish = (patch) => {
             view = { ...view, ...patch };
             for (const listener of listeners) listener();
@@ -190,6 +680,11 @@
             }
             return out;
           };
+          const applyMotion = (next) => {
+            if (disposed) return;
+            motion.apply(next);
+          };
+          const motionDiffers = (left, right) => left.mode !== right.mode || left.durationScale !== right.durationScale || left.spatialSplit !== right.spatialSplit || left.quantize !== right.quantize || left.reduced !== right.reduced;
           const clearOverride = () => {
             disposeOverride?.();
             disposeOverride = void 0;
@@ -240,13 +735,23 @@
             return envelope.value;
           };
           const adopt = (answer) => {
+            const motionAnswer = answer.motion ?? MOTION_OFF;
+            if (answer.motion === void 0 && !motionUnsupported) {
+              motionUnsupported = true;
+              console.error("ui-experience: this host build predates the motion settings; the M3 motion row stays inert until DSH restarts");
+            }
             if (answer.paths.colors !== view.paths.colors || answer.paths.tokens !== view.paths.tokens || answer.borderWidth !== view.borderWidth) {
               publish({ paths: answer.paths, borderWidth: answer.borderWidth });
             }
+            if (motionDiffers(view.motion, motionAnswer)) {
+              publish({ motion: motionAnswer });
+              if (bootstrapped) applyMotion(motionAnswer);
+            }
             if (!bootstrapped) {
               bootstrapped = true;
               setBootAttribute(answer.active);
               publish({ active: answer.active });
+              applyMotion(motionAnswer);
             } else if (!writing && view.active !== answer.active) {
               publish({ active: answer.active });
               if (answer.active) {
@@ -277,7 +782,7 @@
           };
           const poll = async () => {
             if (disposed || inflight) return;
-            if (bootstrapped && !view.active) {
+            if (bootstrapped && !view.active && view.motion.mode === "off") {
               idleTick = (idleTick + 1) % IDLE_TICKS;
               if (idleTick !== 0) return;
             } else {
@@ -301,6 +806,24 @@
             lastRpcProblem = "";
             adopt(answer);
           };
+          const saveMotion = async (change) => {
+            if (disposed || writing) return;
+            writing = true;
+            publish({ saving: true, problem: "", notice: "" });
+            try {
+              const applied = unwrap(await gateway.setMotion(change));
+              if (disposed) return;
+              publish({ motion: applied, notice: t("palette.saved") });
+              applyMotion(applied);
+            } catch (error) {
+              const message = error.message;
+              console.error(`ui-experience: failed to save the motion settings: ${message}`);
+              publish({ problem: `${t("motion.save-failed")}: ${message}` });
+            } finally {
+              writing = false;
+              publish({ saving: false });
+            }
+          };
           const setActive = async (next) => {
             if (disposed || writing) return;
             writing = true;
@@ -363,6 +886,97 @@
               publish({ saving: false });
             }
           };
+          const disclosure = (open, toggle, label) => h(
+            "button",
+            {
+              type: "button",
+              className: "dsh-uix-disclosure",
+              "aria-expanded": open,
+              onClick: toggle
+            },
+            h(
+              "span",
+              { className: "dsh-uix-disclosure-icon" },
+              h("svg", {
+                viewBox: "0 0 16 16",
+                width: 14,
+                height: 14,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 1,
+                "aria-hidden": true
+              }, h("path", { d: "M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6" }))
+            ),
+            h("span", null, label)
+          );
+          const WALK_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+          const segmented = (id, value, segments, select, label, disabled) => {
+            const selected = Math.max(0, segments.findIndex((segment) => segment.value === value));
+            const walk = (key) => {
+              if (segments.length === 0) return;
+              const current = segments[selected];
+              if (current === void 0) return;
+              let next;
+              if (key === "Home") next = 0;
+              else if (key === "End") next = segments.length - 1;
+              else {
+                const step = key === "ArrowRight" || key === "ArrowDown" ? 1 : -1;
+                next = ((selected + step) % segments.length + segments.length) % segments.length;
+              }
+              const target = segments[next];
+              if (target !== void 0 && target.value !== value) select(target.value);
+            };
+            return h(
+              "div",
+              {
+                role: "tablist",
+                "aria-label": label,
+                className: "dsh-uix-segment",
+                style: {
+                  "--dsh-segment-count": String(segments.length),
+                  "--dsh-segment-index": String(selected)
+                }
+              },
+              h("span", { "aria-hidden": true, className: "dsh-uix-segment-indicator" }),
+              ...segments.map((segment) => h("button", {
+                key: segment.value,
+                id: `${id}-${segment.value}`,
+                type: "button",
+                role: "tab",
+                "aria-selected": segment.value === value,
+                tabIndex: segment.value === value ? 0 : -1,
+                disabled,
+                className: "dsh-uix-segment-tab",
+                onClick: () => {
+                  if (segment.value !== value) select(segment.value);
+                },
+                onKeyDown: (event) => {
+                  if (!WALK_KEYS.includes(event.key)) return;
+                  event.preventDefault();
+                  walk(event.key);
+                }
+              }, segment.label))
+            );
+          };
+          const checkbox = (id, checked, set, label, hint, disabled) => h(
+            "label",
+            { className: "dsh-uix-check", htmlFor: id },
+            h("input", {
+              id,
+              type: "checkbox",
+              checked,
+              disabled,
+              onChange: (event) => {
+                set(event.target.checked);
+              }
+            }),
+            h(
+              "span",
+              { className: "dsh-uix-check-text" },
+              h("span", { className: "dsh-uix-check-label" }, label),
+              hint === void 0 ? null : h("span", { className: "dsh-uix-check-hint" }, hint)
+            )
+          );
           function PaletteRow(props) {
             const tr = props.t ?? t;
             const [state, setState] = React.useState(view);
@@ -461,32 +1075,125 @@
                 }, h("span", { className: "dsh-uix-switch-thumb", "aria-hidden": true }))
               ),
               status,
-              h(
-                "button",
-                {
-                  type: "button",
-                  className: "dsh-uix-disclosure",
-                  "aria-expanded": open,
-                  onClick: () => {
-                    setOpen(!open);
-                  }
+              disclosure(open, () => {
+                setOpen(!open);
+              }, tr("palette.paths")),
+              editor
+            );
+          }
+          function MotionRow(props) {
+            const tr = props.t ?? t;
+            const [state, setState] = React.useState(view);
+            const [open, setOpen] = React.useState(false);
+            const [systemReduced, setSystemReduced] = React.useState(queryReduced());
+            React.useEffect(() => {
+              const listener = () => {
+                setState(view);
+              };
+              listeners.add(listener);
+              return () => {
+                listeners.delete(listener);
+              };
+            }, []);
+            React.useEffect(() => watchReduced(setSystemReduced), []);
+            const current = state.motion;
+            const locked = state.saving;
+            const status = state.problem !== "" ? h("p", { className: "dsh-uix-problem", role: "alert" }, state.problem) : state.notice !== "" ? h("p", { className: "dsh-uix-notice" }, state.notice) : null;
+            const modes = [
+              { value: "off", label: tr("motion.mode-off") },
+              { 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 policy = open ? h(
+              "div",
+              { className: "dsh-uix-form" },
+              checkbox(
+                "dsh-uix-motion-split",
+                current.spatialSplit,
+                (next) => {
+                  void saveMotion({ spatialSplit: next });
+                },
+                tr("motion.spatial-split"),
+                tr("motion.spatial-split-hint"),
+                locked
+              ),
+              checkbox(
+                "dsh-uix-motion-quantize",
+                current.quantize,
+                (next) => {
+                  void saveMotion({ quantize: next });
+                },
+                tr("motion.quantize"),
+                tr("motion.quantize-hint"),
+                locked
+              ),
+              checkbox(
+                "dsh-uix-motion-reduced",
+                current.reduced === "always",
+                (next) => {
+                  void saveMotion({ reduced: next ? "always" : "system" });
                 },
+                tr("motion.reduced"),
+                tr("motion.reduced-hint"),
+                locked
+              )
+            ) : null;
+            return h(
+              "div",
+              { className: "dsh-uix-row" },
+              h(
+                "div",
+                { className: "dsh-uix-head" },
                 h(
-                  "span",
-                  { className: "dsh-uix-disclosure-icon" },
-                  h("svg", {
-                    viewBox: "0 0 16 16",
-                    width: 14,
-                    height: 14,
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: 1,
-                    "aria-hidden": true
-                  }, h("path", { d: "M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6" }))
-                ),
-                h("span", null, tr("palette.paths"))
+                  "div",
+                  { className: "dsh-uix-text" },
+                  h("div", { className: "dsh-uix-title" }, tr("motion.title")),
+                  h("div", { className: "dsh-uix-desc" }, tr("motion.description"))
+                )
               ),
-              editor
+              status,
+              h(
+                "div",
+                { className: "dsh-uix-choice" },
+                h("span", { className: "dsh-uix-choice-label" }, tr("motion.mode")),
+                segmented(
+                  "dsh-uix-motion-mode",
+                  current.mode,
+                  modes,
+                  (next) => {
+                    void saveMotion({ mode: next });
+                  },
+                  tr("motion.mode"),
+                  locked
+                )
+              ),
+              current.mode === "off" ? null : h(
+                "div",
+                { className: "dsh-uix-choice" },
+                h("span", { className: "dsh-uix-choice-label" }, tr("motion.duration")),
+                segmented(
+                  "dsh-uix-motion-scale",
+                  String(current.durationScale),
+                  scales,
+                  (next) => {
+                    void saveMotion({ durationScale: Number(next) });
+                  },
+                  tr("motion.duration"),
+                  locked
+                )
+              ),
+              current.mode !== "off" && systemReduced && current.reduced === "system" ? h("p", { className: "dsh-uix-hint" }, tr("motion.system-reduced")) : null,
+              current.mode === "off" ? h("p", { className: "dsh-uix-hint" }, tr("motion.inert")) : null,
+              disclosure(open, () => {
+                setOpen(!open);
+              }, tr("motion.options")),
+              policy
             );
           }
           ctx.effect(() => ctx.slots.inject("settings.general.item", () => ctx.slots.register({
@@ -495,6 +1202,12 @@
             order: 10.5,
             locale: "ui-experience"
           }, PaletteRow)), "ui-experience: settings row");
+          ctx.effect(() => ctx.slots.inject("settings.general.item", () => ctx.slots.register({
+            name: "settings.general.item",
+            id: "ui-experience.motion",
+            order: 10.6,
+            locale: "ui-experience"
+          }, MotionRow)), "ui-experience: motion row");
           ctx.effect(() => ctx.timer.interval(() => {
             void poll();
           }, POLL_MS), "ui-experience: palette polling");
@@ -502,8 +1215,9 @@
             return () => {
               disposed = true;
               teardown();
+              motion.dispose();
             };
-          }, "ui-experience: palette override");
+          }, "ui-experience: page-level layers");
           void poll();
         }
         return {

package/lib/index.js

@@ -28,11 +28,18 @@ function logLine(message) {
 }
 var BORDER_WIDTH = /^(?:0|[0-9]+(?:\.[0-9]+)?(?:px|rem|em))$/;
 var PATH_PATTERN = /^(?:~$|~\/|\/)/;
+var MOTION_MODE = /^(?:off|m3|m3e)$/;
+var MOTION_REDUCED = /^(?:system|always)$/;
 var Config = z.object({
   active: z.boolean().default(false).volatile(),
   borderWidth: z.string().pattern(BORDER_WIDTH).default("0.5px").volatile(),
   colorsPath: z.string().pattern(PATH_PATTERN).default(DEFAULT_COLORS_PATH).volatile(),
-  tokensPath: z.string().pattern(PATH_PATTERN).default(DEFAULT_TOKENS_PATH).volatile()
+  tokensPath: z.string().pattern(PATH_PATTERN).default(DEFAULT_TOKENS_PATH).volatile(),
+  motion: z.string().pattern(MOTION_MODE).default("off").volatile(),
+  motionDurationScale: z.number().min(0.5).max(2).default(1).volatile(),
+  motionSpatialSplit: z.boolean().default(true).volatile(),
+  motionQuantize: z.boolean().default(false).volatile(),
+  motionReduced: z.string().pattern(MOTION_REDUCED).default("system").volatile()
 });
 var REQUIRED_COLOR_KEYS = [
   "surface_container_lowest",
@@ -306,6 +313,15 @@ function resolvePath(raw, label) {
 function effectivePaths(config) {
   return { colors: config.colorsPath.get(), tokens: config.tokensPath.get() };
 }
+function effectiveMotion(config) {
+  return {
+    mode: config.motion.get(),
+    durationScale: config.motionDurationScale.get(),
+    spatialSplit: config.motionSpatialSplit.get(),
+    quantize: config.motionQuantize.get(),
+    reduced: config.motionReduced.get()
+  };
+}
 var paletteCache;
 var PALETTE_MAX_BYTES = 4 * 1024 * 1024;
 var readFileText = (path) => readFileAsync(path, "utf8");
@@ -466,7 +482,8 @@ var UiExperienceService = class extends TypertRemoteService {
   editor;
   /**
    * Remote poll endpoint: report the palette when it changed since the caller's
-   * known version, and always report the live switch, border width, and paths.
+   * known version, and always report the live switch, border width, paths, and
+   * motion settings.
    * @param args - the caller's last seen version.
    * @returns the poll payload.
    */
@@ -474,12 +491,22 @@ var UiExperienceService = class extends TypertRemoteService {
     const read = await readPalette(this.config);
     const active = this.config.active.get();
     const borderWidth = this.config.borderWidth.get();
+    const motion = effectiveMotion(this.config);
     if (!read.ok) {
-      return { status: read.status, message: read.message, active, borderWidth, paths: read.paths };
+      return { status: read.status, message: read.message, active, borderWidth, paths: read.paths, motion };
     }
     const { palette, paths } = read;
     if (args?.known === palette.version) {
-      return { status: "ok", changed: false, version: palette.version, source: palette.source, active, borderWidth, paths };
+      return {
+        status: "ok",
+        changed: false,
+        version: palette.version,
+        source: palette.source,
+        active,
+        borderWidth,
+        paths,
+        motion
+      };
     }
     return {
       status: "ok",
@@ -489,7 +516,8 @@ var UiExperienceService = class extends TypertRemoteService {
       source: palette.source,
       active,
       borderWidth,
-      paths
+      paths,
+      motion
     };
   }
   /**
@@ -529,6 +557,43 @@ var UiExperienceService = class extends TypertRemoteService {
     logLine(`setPaths: colors=${paths.colors} tokens=${paths.tokens}`);
     return { paths };
   }
+  /**
+   * Remote endpoint persisting the motion layer settings. Every field is
+   * optional, and an omitted field keeps its stored value so one control can be
+   * changed without resending the rest.
+   * @param args - the fields to write.
+   * @returns the settings now in effect.
+   */
+  async setMotion(args) {
+    const mode = args?.mode;
+    const reduced = args?.reduced;
+    const scale = args?.durationScale;
+    const spatialSplit = args?.spatialSplit;
+    const quantize = args?.quantize;
+    if (mode === void 0 && reduced === void 0 && scale === void 0 && spatialSplit === void 0 && quantize === void 0) {
+      throw new Error("ui-experience: setMotion requires at least one field");
+    }
+    if (mode !== void 0 && !MOTION_MODE.test(mode)) {
+      throw new Error(`ui-experience: unknown motion mode ${JSON.stringify(mode)}`);
+    }
+    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)) {
+      throw new Error(`ui-experience: durationScale ${String(scale)} is outside 0.5\u20132`);
+    }
+    await this.persist((current) => ({
+      ...current,
+      ...mode === void 0 ? {} : { motion: mode },
+      ...reduced === void 0 ? {} : { motionReduced: reduced },
+      ...scale === void 0 ? {} : { motionDurationScale: scale },
+      ...spatialSplit === void 0 ? {} : { motionSpatialSplit: spatialSplit },
+      ...quantize === void 0 ? {} : { motionQuantize: quantize }
+    }));
+    const applied = effectiveMotion(this.config);
+    logLine(`setMotion: mode=${applied.mode} durationScale=${String(applied.durationScale)} spatialSplit=${String(applied.spatialSplit)} quantize=${String(applied.quantize)} reduced=${applied.reduced}`);
+    return applied;
+  }
   /**
    * Write one configuration change through the config editor, logging the
    * failure before it reaches the caller.
@@ -554,13 +619,14 @@ Object.defineProperty(UiExperienceService.prototype, REMOTE_METHOD_DESCRIPTOR, {
     methods: Object.freeze([
       Object.freeze({ method: "poll", invocation: Object.freeze({ kind: "direct" }) }),
       Object.freeze({ method: "setActive", invocation: Object.freeze({ kind: "direct" }) }),
-      Object.freeze({ method: "setPaths", invocation: Object.freeze({ kind: "direct" }) })
+      Object.freeze({ method: "setPaths", invocation: Object.freeze({ kind: "direct" }) }),
+      Object.freeze({ method: "setMotion", invocation: Object.freeze({ kind: "direct" }) })
     ])
   })
 });
 var inject = ["configEditor"];
 function apply(ctx, config) {
-  logLine(`apply: active=${String(config.active.get())} borderWidth=${config.borderWidth.get()} colorsPath=${config.colorsPath.get()} tokensPath=${config.tokensPath.get()}`);
+  logLine(`apply: active=${String(config.active.get())} borderWidth=${config.borderWidth.get()} colorsPath=${config.colorsPath.get()} tokensPath=${config.tokensPath.get()} motion=${config.motion.get()} durationScale=${String(config.motionDurationScale.get())}`);
   try {
     new UiExperienceService(ctx, config, ctx.fiber.entry, ctx.configEditor);
   } catch (error) {

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Interface experience",
-    "description": "Make the DSH interface follow the Material You palette matugen generates on the system. After enabling Settings → General → Matugen palette sync, the palette is layered over the current theme and follows the file whenever matugen regenerates it. Expand Palette file paths on the same row to rewrite the matugen colors file or the DSH token file path (both default under ~/.local/state/quickshell/user/generated/, the token file wins when present). Palette files are read locally and never uploaded; turning the switch off returns the native colors. Also unifies the interface border width (config option borderWidth, default 0.5px); that override applies only while the switch is on and narrows decorative borders such as markdown quote rules."
+    "description": "Make the DSH interface follow the Material You palette matugen generates on the system. After enabling Settings → General → Matugen palette sync, the palette is layered over the current theme and follows the file whenever matugen regenerates it. Expand Palette file paths on the same row to rewrite the matugen colors file or the DSH token file path (both default under ~/.local/state/quickshell/user/generated/, the token file wins when present). Palette files are read locally and never uploaded; turning the switch off returns the native colors. Also unifies the interface border width (config option borderWidth, default 0.5px); that override applies only while the switch is on and narrows decorative borders such as markdown quote rules. A separate M3 motion row rewrites every transition and keyframe animation in the interface onto Material 3 / Material 3 Expressive curves, in place, with its own curve family, duration scale, duration snapping, and reduced-motion policy; the rewrite reaches styles injected by other plugins and restores everything exactly when switched off."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "界面体验",
-    "description": "让 DSH 界面跟随系统 matugen 生成的 Material You 配色：在「设置 → 通用设置 → Matugen 配色跟随」开启后，界面配色作为叠加层套在当前主题上，并随配色文件重新生成自动更新。可在同一行展开「配色文件路径」，改写 matugen 颜色文件或 DSH 令牌文件的路径（默认 ~/.local/state/quickshell/user/generated/ 下，令牌文件优先）。配色只在本地读取，不上传。关闭开关后回到原生配色。另统一界面边框宽度（配置项 borderWidth，默认 0.5px）。该覆盖仅在开关开启时生效，且会同时压窄正文引用块等装饰性边框。"
+    "description": "让 DSH 界面跟随系统 matugen 生成的 Material You 配色：在「设置 → 通用设置 → Matugen 配色跟随」开启后，界面配色作为叠加层套在当前主题上，并随配色文件重新生成自动更新。可在同一行展开「配色文件路径」，改写 matugen 颜色文件或 DSH 令牌文件的路径（默认 ~/.local/state/quickshell/user/generated/ 下，令牌文件优先）。配色只在本地读取，不上传。关闭开关后回到原生配色。另统一界面边框宽度（配置项 borderWidth，默认 0.5px）。该覆盖仅在开关开启时生效，且会同时压窄正文引用块等装饰性边框。还有一行「M3 动效」，按 Material 3 / Material 3 Expressive 曲线原地改写整个界面的过渡与关键帧动画，可调曲线族、时长倍率、时长对齐与减弱动效策略；改写覆盖其他插件注入的样式，关闭后原样还原。"
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@dsh-plugin/dsh-ui-experience",
-  "version": "1.0.0-dev.43485427852",
+  "version": "1.0.0-dev.43486958683",
   "type": "module",
-  "description": "UI experience enhancements for DeepSeek Harness: follow the system matugen Material You palette as the interface theme.",
+  "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",
   "repository": {
     "type": "git",