@dsh-plugin/dsh-ui-experience 1.0.0-dev.43493974985 → 1.0.0-dev.43522015745

package/lib/client.js

@@ -12,7 +12,13 @@
     spatialSplit: true,
     quantize: false,
     reduced: "system",
-    scroll: true
+    scroll: false,
+    stream: true,
+    followScroll: true,
+    streamRevealMinMs: 250,
+    streamRevealMaxMs: 1200,
+    streamEnterMs: 220,
+    streamRollMs: 260
   };
 
   // src/motion-plan.ts
@@ -403,8 +409,7 @@
     function bringsStylesheet(node) {
       if (node === void 0) return false;
       const name = node.nodeName?.toUpperCase();
-      if (name === "STYLE" || name === "LINK") return true;
-      return (node.querySelectorAll?.("style,link")?.length ?? 0) > 0;
+      return name === "STYLE" || name === "LINK";
     }
     function observeDocument() {
       const instance = new MutationObserver((records) => {
@@ -418,7 +423,7 @@
         }
       });
       instance.observe(document.head, { childList: true, subtree: true });
-      instance.observe(document.body, { childList: true, subtree: true });
+      instance.observe(document.body, { childList: true });
       return { disconnect: () => {
         instance.disconnect();
       } };
@@ -485,7 +490,20 @@
     "End",
     " "
   ]);
-  var EDITABLE = 'input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]';
+  var EDITABLE = [
+    "input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=range])",
+    "textarea",
+    "select",
+    '[contenteditable=""]',
+    '[contenteditable="true"]',
+    '[contenteditable="plaintext-only"]'
+  ].join(", ");
+  var JUMP_ANIMATE_MIN = 24;
+  var WHEEL_SETTLE_PX = 0.5;
+  var PIXELS_PER_LINE = 40;
+  var PAGE_FRACTION = 0.875;
+  var PAGE_OVERLAP = 40;
+  var WHEEL_MAX_MS = 900;
   function scrollDistance(legs) {
     let distance = 0;
     for (const leg of legs) {
@@ -515,23 +533,77 @@
     return out;
   }
   function createScrollMotion() {
-    const shipped = Element.prototype.scrollIntoView;
+    const shipped = {
+      scrollTo: Element.prototype.scrollTo,
+      scrollBy: Element.prototype.scrollBy,
+      scrollIntoView: Element.prototype.scrollIntoView
+    };
+    const topAxis = Object.getOwnPropertyDescriptor(Element.prototype, "scrollTop");
+    const leftAxis = Object.getOwnPropertyDescriptor(Element.prototype, "scrollLeft");
     let settings;
     let run;
+    let wheel;
     let installed = false;
-    function cancel() {
+    let writing = 0;
+    const shadowed = /* @__PURE__ */ new WeakMap();
+    let dispatching = false;
+    const END_GRACE_MS = 400;
+    const graceful = /* @__PURE__ */ new Set();
+    function writeAxis(element, axis, value) {
+      const accessor = axis === "top" ? topAxis : leftAxis;
+      if (accessor !== void 0) {
+        writing += 1;
+        try {
+          accessor.set.call(element, value);
+        } finally {
+          writing -= 1;
+        }
+        return;
+      }
+      if (axis === "top") element.scrollTop = value;
+      else element.scrollLeft = value;
+    }
+    function clearGrace() {
+      for (const element of graceful) shadowed.delete(element);
+      graceful.clear();
+    }
+    function hold(element) {
+      shadowed.set(element, { until: Number.POSITIVE_INFINITY, top: 0, left: 0 });
+    }
+    function release(element, notify) {
+      if (!shadowed.has(element)) return;
+      shadowed.set(element, {
+        until: performance.now() + END_GRACE_MS,
+        top: element.scrollTop,
+        left: element.scrollLeft
+      });
+      graceful.add(element);
+      if (!notify) return;
+      queueMicrotask(() => {
+        if (shadowed.get(element)?.until === Number.POSITIVE_INFINITY) return;
+        dispatching = true;
+        try {
+          element.dispatchEvent(new Event("scrollend"));
+        } finally {
+          dispatching = false;
+        }
+      });
+    }
+    function cancel(notify = true) {
+      stopWheel();
       const active = run;
       if (active === void 0) return;
       window.cancelAnimationFrame(active.frame);
       run = void 0;
-      active.done();
+      for (const leg of active.legs) release(leg.element, notify);
+      for (const settle of active.done) settle();
     }
     function step(now) {
       const active = run;
       if (active === void 0) return;
       const elapsed = now - active.started;
       const progress = active.duration <= 0 ? 1 : Math.min(1, elapsed / active.duration);
-      const eased = easeCurve(effectCurvePoints(settings?.mode ?? "m3e"), progress);
+      const eased = easeCurve(effectCurvePoints(settings.mode), progress);
       for (let index = 0; index < active.legs.length; index += 1) {
         const leg = active.legs[index];
         const written = active.written[index];
@@ -540,16 +612,24 @@
           cancel();
           return;
         }
+      }
+      for (const leg of active.legs) {
         const top = progress >= 1 ? leg.toTop : leg.fromTop + (leg.toTop - leg.fromTop) * eased;
         const left = progress >= 1 ? leg.toLeft : leg.fromLeft + (leg.toLeft - leg.fromLeft) * eased;
-        if (leg.element.scrollTop !== top) leg.element.scrollTop = top;
-        if (leg.element.scrollLeft !== left) leg.element.scrollLeft = left;
+        if (leg.element.scrollTop !== top) writeAxis(leg.element, "top", top);
+        if (leg.element.scrollLeft !== left) writeAxis(leg.element, "left", left);
+      }
+      for (let index = 0; index < active.legs.length; index += 1) {
+        const leg = active.legs[index];
+        const written = active.written[index];
+        if (leg === void 0 || written === void 0) continue;
         written.top = leg.element.scrollTop;
         written.left = leg.element.scrollLeft;
       }
       if (progress >= 1) {
         run = void 0;
-        active.done();
+        for (const leg of active.legs) release(leg.element, true);
+        for (const settle of active.done) settle();
         return;
       }
       active.frame = window.requestAnimationFrame(step);
@@ -557,86 +637,400 @@
     function start(legs, done) {
       cancel();
       const active = settings;
-      if (active === void 0) {
-        done();
-        return;
-      }
+      for (const leg of legs) hold(leg.element);
       run = {
-        legs,
+        legs: [...legs],
         started: performance.now(),
         duration: scrollDurationMs(scrollDistance(legs), active),
         written: legs.map((leg) => ({ top: leg.element.scrollTop, left: leg.element.scrollLeft })),
         frame: window.requestAnimationFrame(step),
-        done
+        done: [done]
       };
     }
+    function merge(legs, done) {
+      const active = run;
+      if (active === void 0) return false;
+      if (active.legs.length !== legs.length) return false;
+      for (let index = 0; index < legs.length; index += 1) {
+        if (active.legs[index]?.element !== legs[index]?.element) return false;
+      }
+      active.legs = [...legs];
+      active.started = performance.now();
+      active.duration = scrollDurationMs(scrollDistance(legs), settings);
+      active.written = legs.map((leg) => ({ top: leg.element.scrollTop, left: leg.element.scrollLeft }));
+      active.done.push(done);
+      return true;
+    }
     function wantsInstant() {
       const active = settings;
-      if (active === void 0) return true;
       if (active.reduced === "always") return true;
       return active.reduced === "system" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     }
-    function patchedScrollIntoView(...args) {
+    const glides = /* @__PURE__ */ new Map();
+    const lastWrite = /* @__PURE__ */ new WeakMap();
+    const GLIDE_MIN_PX = 4;
+    const GLIDE_MAX_PX = 600;
+    const GLIDE_MIN_MS = 90;
+    const GLIDE_MAX_MS = 300;
+    const GLIDE_PX_PER_MS = 1.8;
+    const GLIDE_FRAME_GAP_MS = 32;
+    const GLIDE_MAX_LAG_PX = 40;
+    function shouldGlide(element, value, now) {
+      const active = settings;
+      if (active === void 0 || !active.followScroll) return false;
+      if (wantsInstant()) return false;
+      const max = maxima(element);
+      if (max.top <= 0) return false;
+      const delta = value - topAxis.get.call(element);
+      const size = Math.abs(delta);
+      if (size < GLIDE_MIN_PX || size > GLIDE_MAX_PX) return false;
+      if (delta > 0 && Math.abs(value - max.top) > 4) return false;
+      if (max.top - topAxis.get.call(element) > GLIDE_MAX_LAG_PX) return false;
+      const previous = lastWrite.get(element);
+      lastWrite.set(element, now);
+      if (previous !== void 0 && now - previous < GLIDE_FRAME_GAP_MS) return false;
+      return true;
+    }
+    function startGlide(element, target) {
+      const active = settings;
+      const existing = glides.get(element);
+      if (existing !== void 0) window.cancelAnimationFrame(existing.frame);
+      else hold(element);
+      const from = topAxis.get.call(element);
+      const raw = Math.abs(target - from) / GLIDE_PX_PER_MS;
+      const duration = Math.min(GLIDE_MAX_MS, Math.max(GLIDE_MIN_MS, raw)) * active.durationScale;
+      const glide = {
+        target,
+        from,
+        started: performance.now(),
+        duration: active.quantize ? quantizeMs(duration) : duration,
+        frame: 0,
+        written: from
+      };
+      glides.set(element, glide);
+      const mode = active.mode;
+      const step2 = (now) => {
+        const live = glides.get(element);
+        if (live !== glide) return;
+        if (Math.abs(topAxis.get.call(element) - glide.written) > 1) {
+          finishGlide(element, false);
+          return;
+        }
+        const progress = Math.min(1, (now - glide.started) / Math.max(1, glide.duration));
+        const eased = easeCurve(effectCurvePoints(mode), progress);
+        writeAxis(element, "top", glide.from + (glide.target - glide.from) * eased);
+        glide.written = topAxis.get.call(element);
+        if (progress >= 1) {
+          finishGlide(element, true);
+          return;
+        }
+        glide.frame = window.requestAnimationFrame(step2);
+      };
+      glide.frame = window.requestAnimationFrame(step2);
+    }
+    function finishGlide(element, landed) {
+      const glide = glides.get(element);
+      if (glide === void 0) return;
+      window.cancelAnimationFrame(glide.frame);
+      glides.delete(element);
+      if (landed) writeAxis(element, "top", glide.target);
+      release(element, true);
+    }
+    function finishGlides() {
+      for (const [element] of glides) finishGlide(element, true);
+    }
+    function stopWheel() {
+      const active = wheel;
+      if (active === void 0) return;
+      window.cancelAnimationFrame(active.frame);
+      wheel = void 0;
+      release(active.element, true);
+    }
+    function wheelStep(now) {
+      const active = wheel;
+      if (active === void 0) return;
+      const element = active.element;
+      const progress = active.duration <= 0 ? 1 : Math.min(1, (now - active.started) / active.duration);
+      const eased = easeCurve(effectCurvePoints(settings.mode), progress);
+      if (progress >= 1) {
+        writeAxis(element, "top", active.top);
+        writeAxis(element, "left", active.left);
+        wheel = void 0;
+        release(element, true);
+        return;
+      }
+      writeAxis(element, "top", active.fromTop + (active.top - active.fromTop) * eased);
+      writeAxis(element, "left", active.fromLeft + (active.left - active.fromLeft) * eased);
+      active.frame = window.requestAnimationFrame(wheelStep);
+    }
+    function onWheel(event) {
+      const active = settings;
+      if (active === void 0) return false;
+      if (event.ctrlKey || event.metaKey) return false;
+      if (wantsInstant()) return false;
+      const target = event.target;
+      if (target === null) return false;
+      if (target instanceof Element && target.closest(EDITABLE) !== null) return false;
+      if (event.deltaX === 0 && event.deltaY === 0) return false;
+      const element = scrollportOf(target, {
+        top: event.deltaY !== 0,
+        left: event.deltaX !== 0
+      });
+      if (element === null) return false;
+      const max = maxima(element);
+      const delta = pixelDelta(event, element);
+      const base = wheel?.element === element ? wheel : void 0;
+      const fromTop = element.scrollTop;
+      const fromLeft = element.scrollLeft;
+      const top = Math.min(max.top, Math.max(0, (base?.top ?? fromTop) + delta.y));
+      const left = Math.min(max.left, Math.max(0, (base?.left ?? fromLeft) + delta.x));
+      if (Math.abs(top - fromTop) < WHEEL_SETTLE_PX && Math.abs(left - fromLeft) < WHEEL_SETTLE_PX) return false;
+      event.preventDefault();
+      const stopped = run;
+      if (stopped !== void 0) {
+        window.cancelAnimationFrame(stopped.frame);
+        run = void 0;
+        for (const leg of stopped.legs) release(leg.element, true);
+        for (const settle of stopped.done) settle();
+      }
+      if (base === void 0) hold(element);
+      else window.cancelAnimationFrame(base.frame);
+      const travelled = Math.max(Math.abs(top - fromTop), Math.abs(left - fromLeft));
+      const segment = {
+        element,
+        top,
+        left,
+        fromTop,
+        fromLeft,
+        started: performance.now(),
+        duration: Math.min(WHEEL_MAX_MS, scrollDurationMs(travelled, active)),
+        frame: 0
+      };
+      wheel = segment;
+      segment.frame = window.requestAnimationFrame(wheelStep);
+      return true;
+    }
+    function scrollportOf(node, axis) {
+      let current = node;
+      while (current !== null) {
+        const max = maxima(current);
+        if (axis.top && max.top > 0 || axis.left && max.left > 0) return current;
+        current = current.parentElement;
+      }
+      return null;
+    }
+    function pageStep(length) {
+      return Math.max(1, Math.max(length * PAGE_FRACTION, length - PAGE_OVERLAP));
+    }
+    function pixelDelta(event, element) {
+      if (event.deltaMode === 0) return { x: event.deltaX, y: event.deltaY };
+      const unitY = event.deltaMode === 1 ? PIXELS_PER_LINE : pageStep(element.clientHeight);
+      const unitX = event.deltaMode === 1 ? PIXELS_PER_LINE : pageStep(element.clientWidth);
+      return { x: event.deltaX * unitX, y: event.deltaY * unitY };
+    }
+    function animates(behavior, distance) {
+      return behavior === "instant" && Math.max(distance.top, distance.left) >= JUMP_ANIMATE_MIN;
+    }
+    function scrollIntoView(...args) {
       const options = args[0];
       const requested = typeof options === "object" && options !== null ? options : void 0;
       const active = settings;
-      if (active === void 0 || requested?.behavior !== "smooth") {
-        shipped.apply(this, args);
-        return void 0;
-      }
+      if (active === void 0 || requested?.behavior !== "smooth") return shipped.scrollIntoView.apply(this, args);
       const jump = { ...requested, behavior: "instant" };
-      if (wantsInstant()) {
-        shipped.call(this, jump);
-        return void 0;
-      }
+      if (wantsInstant()) return shipped.scrollIntoView.call(this, jump);
       const tracked = containers(this);
+      for (const element of tracked) hold(element);
       const before = tracked.map((element) => ({ top: element.scrollTop, left: element.scrollLeft }));
-      shipped.call(this, jump);
+      shipped.scrollIntoView.call(this, jump);
       const legs = [];
       for (let index = 0; index < tracked.length; index += 1) {
         const element = tracked[index];
         const origin = before[index];
         if (element === void 0 || origin === void 0) continue;
         const landed = { top: element.scrollTop, left: element.scrollLeft };
-        element.scrollTop = origin.top;
-        element.scrollLeft = origin.left;
+        writeAxis(element, "top", origin.top);
+        writeAxis(element, "left", origin.left);
         const moved = Math.abs(landed.top - origin.top) > MOTION_EPSILON || Math.abs(landed.left - origin.left) > MOTION_EPSILON;
-        if (!moved) continue;
+        if (!moved) {
+          if (run?.legs.some((leg) => leg.element === element)) continue;
+          release(element, false);
+          continue;
+        }
         legs.push({ element, fromTop: origin.top, fromLeft: origin.left, toTop: landed.top, toLeft: landed.left });
       }
-      if (legs.length === 0) return void 0;
+      if (legs.length === 0) return Promise.resolve();
       return new Promise((resolve) => {
-        start(legs, resolve);
+        if (!merge(legs, resolve)) start(legs, resolve);
       });
     }
-    function onTakeover(event) {
+    function readOffsets(options, base) {
+      return {
+        left: options.left === void 0 ? void 0 : base.left + options.left,
+        top: options.top === void 0 ? void 0 : base.top + options.top
+      };
+    }
+    function legFor(element, top, left) {
+      const max = maxima(element);
+      const toTop = top === void 0 ? element.scrollTop : Math.min(max.top, Math.max(0, top));
+      const toLeft = left === void 0 ? element.scrollLeft : Math.min(max.left, Math.max(0, left));
+      if (Math.abs(toTop - element.scrollTop) < MOTION_EPSILON && Math.abs(toLeft - element.scrollLeft) < MOTION_EPSILON) return void 0;
+      return { element, fromTop: element.scrollTop, fromLeft: element.scrollLeft, toTop, toLeft };
+    }
+    function patchedOffset(element, args, shippedMethod, relative) {
+      if (writing > 0) return shippedMethod.apply(element, args);
+      const options = args[0];
+      const behavior = typeof options === "object" && options !== null ? options.behavior : void 0;
+      const active = settings;
+      if (active === void 0 || wantsInstant()) return shippedMethod.apply(element, args);
+      const base = relative ? { top: element.scrollTop, left: element.scrollLeft } : { top: 0, left: 0 };
+      const request = readOffsets(options, base);
+      const leg = legFor(element, request.top, request.left);
+      if (leg === void 0) return Promise.resolve();
+      if (behavior === "smooth") {
+        return new Promise((resolve) => {
+          if (!merge([leg], resolve)) start([leg], resolve);
+        });
+      }
+      if (!animates(behavior, {
+        top: Math.abs(leg.toTop - leg.fromTop),
+        left: Math.abs(leg.toLeft - leg.fromLeft)
+      })) {
+        shippedMethod.apply(element, args);
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        start([leg], resolve);
+      });
+    }
+    function scrollTo(...args) {
+      return patchedOffset(this, args, shipped.scrollTo, false);
+    }
+    function scrollBy(...args) {
+      return patchedOffset(this, args, shipped.scrollBy, true);
+    }
+    function resolveTarget(target) {
+      if (target === null) return null;
+      return target;
+    }
+    function onScrollEnd(event) {
+      if (dispatching) return;
+      const target = resolveTarget(event.target);
+      if (target === null) return;
+      const entry = shadowed.get(target);
+      if (entry === void 0) return;
+      if (entry.until === Number.POSITIVE_INFINITY) {
+        event.stopImmediatePropagation();
+        return;
+      }
+      const unmoved = Math.abs(target.scrollTop - entry.top) <= FOREIGN_TOLERANCE && Math.abs(target.scrollLeft - entry.left) <= FOREIGN_TOLERANCE;
+      if (!unmoved || performance.now() > entry.until) {
+        shadowed.delete(target);
+        graceful.delete(target);
+        return;
+      }
+      event.stopImmediatePropagation();
+    }
+    function onWheelBubble(event) {
+      cancelIfOwned(event.target);
+      if (event.defaultPrevented) return;
+      onWheel(event);
+    }
+    function cancelIfOwned(target) {
+      for (const [element] of glides) {
+        if (target === null || element.contains(target)) finishGlide(element, false);
+      }
       const active = run;
-      if (active === void 0) return;
-      if (event.type === "keydown") {
+      if (active === void 0 || target === null) return false;
+      if (!active.legs.some((leg) => leg.element.contains(target))) return false;
+      cancel();
+      return true;
+    }
+    function onTakeover(event) {
+      const key = event.type === "keydown";
+      if (key) {
         if (event.key === void 0 || !SCROLL_KEYS.has(event.key)) return;
-        const target2 = event.target;
-        if (target2 instanceof Element && target2.closest(EDITABLE) !== null) return;
-        cancel();
+        const focus = event.target;
+        if (focus instanceof Element && focus.closest(EDITABLE) !== null) return;
+      }
+      if (run === void 0) {
+        clearGrace();
         return;
       }
-      const target = event.target;
-      if (target === null || !active.legs.some((leg) => leg.element.contains(target))) return;
-      cancel();
+      if (key) cancel();
+      else cancelIfOwned(event.target);
+    }
+    function ownsPatches() {
+      const prototype = Element.prototype;
+      return prototype.scrollTo === scrollTo && prototype.scrollBy === scrollBy && prototype.scrollIntoView === scrollIntoView;
     }
     function install() {
       if (installed) return;
+      const current = Element.prototype;
+      if (current.scrollTo !== shipped.scrollTo || current.scrollIntoView !== shipped.scrollIntoView) {
+        console.error("ui-experience: scroll methods were already replaced when the motion layer started; scripted scrolling is left off until the page reloads");
+        return;
+      }
       installed = true;
-      Element.prototype.scrollIntoView = patchedScrollIntoView;
-      for (const kind of ["wheel", "touchstart", "keydown"]) {
+      const prototype = Element.prototype;
+      prototype.scrollTo = scrollTo;
+      prototype.scrollBy = scrollBy;
+      prototype.scrollIntoView = scrollIntoView;
+      if (topAxis !== void 0) {
+        Object.defineProperty(Element.prototype, "scrollTop", {
+          configurable: true,
+          enumerable: topAxis.enumerable,
+          get() {
+            const glide = glides.get(this);
+            return glide === void 0 ? topAxis.get.call(this) : glide.target;
+          },
+          set(value) {
+            if (writing > 0 || !shouldGlide(this, value, performance.now())) {
+              topAxis.set.call(this, value);
+              return;
+            }
+            startGlide(this, value);
+          }
+        });
+      }
+      window.addEventListener("scrollend", onScrollEnd, true);
+      window.addEventListener(
+        "wheel",
+        onWheelBubble,
+        { capture: false, passive: false }
+      );
+      for (const kind of ["touchstart", "keydown"]) {
         window.addEventListener(kind, onTakeover, { capture: true, passive: true });
       }
     }
     function uninstall() {
-      cancel();
+      finishGlides();
+      cancel(false);
+      clearGrace();
       if (!installed) return;
       installed = false;
-      Element.prototype.scrollIntoView = shipped;
-      for (const kind of ["wheel", "touchstart", "keydown"]) {
+      if (!ownsPatches()) {
+        console.error("ui-experience: the scroll methods were replaced while scripted scrolling was active; leaving the current implementations in place instead of restoring stale ones");
+        return;
+      }
+      const prototype = Element.prototype;
+      prototype.scrollTo = shipped.scrollTo;
+      prototype.scrollBy = shipped.scrollBy;
+      prototype.scrollIntoView = shipped.scrollIntoView;
+      if (topAxis !== void 0) {
+        Object.defineProperty(Element.prototype, "scrollTop", {
+          configurable: true,
+          enumerable: topAxis.enumerable,
+          get: topAxis.get,
+          set: topAxis.set
+        });
+      }
+      window.removeEventListener("scrollend", onScrollEnd, true);
+      window.removeEventListener(
+        "wheel",
+        onWheelBubble,
+        false
+      );
+      for (const kind of ["touchstart", "keydown"]) {
         window.removeEventListener(kind, onTakeover, true);
       }
     }
@@ -647,6 +1041,552 @@
         if (!next.scroll || next.mode === "off") return;
         install();
       },
+      restore() {
+        uninstall();
+        settings = void 0;
+      }
+    };
+  }
+
+  // src/stream.ts
+  var STREAM_ATTRIBUTE = "data-dsh-uix-stream";
+  var LAST_ATTRIBUTE = "data-dsh-uix-last";
+  var WIDTH_ATTRIBUTE = "data-dsh-uix-width";
+  var ENTER_ATTRIBUTE = "data-dsh-uix-enter";
+  var ROLL_ATTRIBUTE = "data-dsh-uix-rolling";
+  var ROW = "[data-chat-flow-kind], [data-chat-anchor-key], [data-submission-echo], [data-pending-steering]";
+  var ENTER_FALLBACK_MS = 220;
+  var LIVE = "[data-streaming], [data-process-activity] [data-shimmer]";
+  var MIN_REVEAL_PX = 0.5;
+  var REVEAL_EXPONENT = 0.62;
+  var ONE_LINE_PX = 24;
+  var FADE_BAND = 0.45;
+  var SINGLE_LINE_RATIO = 1.5;
+  var MIN_TILT_DEG = 15;
+  var MAX_TILT_DEG = 45;
+  var STREAM_CSS = `
+@property --dsh-uix-reveal {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --dsh-uix-edge {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --dsh-uix-tilt {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 180deg;
+}
+
+/* The mask is a tilted reveal line with a soft trailing edge, so text arrives out
+   of a gradient rather than at a hard boundary. The tilt is held inside 15deg-45deg
+   off horizontal, which is what makes the edge read as a diagonal wipe; any
+   shallower and it looks like a flat line across the block. */
+[${STREAM_ATTRIBUTE}="reveal"] {
+  --dsh-uix-reveal: 0px;
+  mask-image: linear-gradient(
+    var(--dsh-uix-tilt),
+    #000 calc(var(--dsh-uix-reveal) - ${FADE_BAND}lh),
+    transparent var(--dsh-uix-reveal)
+  );
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+}
+
+/* One-line labels: a horizontal edge at the end of the text a reader has already
+   seen sweeps out to the new width, so only the arriving characters are revealed.
+
+   The edge is a registered custom property driven by a transition. Keyframing the
+   gradient itself does not work: Chrome snaps between two linear-gradients instead of
+   interpolating them, which reads as no animation at all.
+
+   A TextShimmer root holds a decorative copy of its children for its own sweep, so
+   its mask goes on the readable first child. The reasoning summary masks itself,
+   which also replaces the static fade the application puts on it. */
+[${STREAM_ATTRIBUTE}="append"][data-shimmer] > :first-child,
+[${STREAM_ATTRIBUTE}="append"][data-streaming]:not([data-shimmer]) {
+  --dsh-uix-edge: 100000px;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(var(--dsh-uix-edge) - 1.2ch),
+    transparent var(--dsh-uix-edge)
+  );
+}
+
+/* A TextShimmer root draws a second, inert copy of its children and sweeps a band of
+   light through it \u2014 the application's own idle shimmer. This layer moves a mask over
+   the readable copy instead, so the two would run at once: a band of light crossing a
+   line whose text is also being uncovered, which reads as two animations fighting.
+
+   The decorative copy is always the second child, and only exists while the label is
+   active, so this matches nothing on an idle one. */
+[${STREAM_ATTRIBUTE}="append"][data-shimmer] > :nth-child(2),
+[${STREAM_ATTRIBUTE}="append"] [data-shimmer] > :nth-child(2) {
+  display: none;
+}
+
+/* A label arrives as a whole line and rises into place; only later growth is swept,
+   so arrival and extension read differently. */
+[${STREAM_ATTRIBUTE}="append"][data-shimmer][${ROLL_ATTRIBUTE}] > :first-child,
+[${STREAM_ATTRIBUTE}="append"][data-streaming]:not([data-shimmer])[${ROLL_ATTRIBUTE}] {
+  animation: dsh-uix-arrive var(--dsh-uix-roll, 260ms) var(--dsh-uix-ease, ease) both;
+}
+
+@keyframes dsh-uix-arrive {
+  from { transform: translateY(0.85lh); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* A row that arrives while the transcript is following its tail rises into place.
+   Only opacity and transform are animated, so the height the follow loop reads back
+   right after its write is the height it asked for. */
+[${ENTER_ATTRIBUTE}] {
+  animation: dsh-uix-enter var(--dsh-uix-enter, 220ms) var(--dsh-uix-ease, ease) both;
+}
+
+@keyframes dsh-uix-enter {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [${STREAM_ATTRIBUTE}="reveal"] {
+    mask-image: none;
+  }
+
+  [${ENTER_ATTRIBUTE}] {
+    animation: none;
+  }
+
+  [${STREAM_ATTRIBUTE}="append"][data-shimmer][${ROLL_ATTRIBUTE}] > :first-child,
+  [${STREAM_ATTRIBUTE}="append"][data-streaming]:not([data-shimmer])[${ROLL_ATTRIBUTE}] {
+    animation: none;
+  }
+
+  [${STREAM_ATTRIBUTE}="append"][data-shimmer] > :first-child,
+  [${STREAM_ATTRIBUTE}="append"][data-streaming]:not([data-shimmer]) {
+    mask-image: none;
+  }
+}
+`;
+  function createStreamMotion() {
+    const reveals = /* @__PURE__ */ new Map();
+    let knownRows = /* @__PURE__ */ new WeakSet();
+    let following = false;
+    let sheet;
+    let observer;
+    let settings;
+    let pending = false;
+    let installed = false;
+    let ease = "";
+    let rollMs = 260;
+    let enterMs = ENTER_FALLBACK_MS;
+    let revealMinMs = 250;
+    let revealMaxMs = 1200;
+    const generation = /* @__PURE__ */ new WeakMap();
+    const sweeps = /* @__PURE__ */ new WeakMap();
+    const rests = /* @__PURE__ */ new WeakMap();
+    const heights = /* @__PURE__ */ new WeakMap();
+    const rolls = /* @__PURE__ */ new WeakMap();
+    const slots = /* @__PURE__ */ new WeakMap();
+    function nextGeneration(element) {
+      const next = (generation.get(element) ?? 0) + 1;
+      generation.set(element, next);
+      return next;
+    }
+    function still() {
+      const active = settings;
+      if (active === void 0) return true;
+      if (active.reduced === "always") return true;
+      return active.reduced === "system" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    function lineHeightOf(element) {
+      const lineHeight = Number.parseFloat(window.getComputedStyle(element).lineHeight);
+      return Number.isFinite(lineHeight) && lineHeight > 0 ? lineHeight : 24;
+    }
+    function singleLine(element) {
+      return element.scrollHeight <= lineHeightOf(element) * SINGLE_LINE_RATIO;
+    }
+    function modeOf(element) {
+      if (element.hasAttribute("data-shimmer")) return "append";
+      if (window.getComputedStyle(element).whiteSpace === "nowrap") return "append";
+      return singleLine(element) ? "append" : "reveal";
+    }
+    function tiltFor(element, lineHeight) {
+      const width = element.clientWidth;
+      if (width <= 0 || lineHeight <= 0) return { angle: "180deg", sin: 0, cos: 1 };
+      const natural = Math.atan(lineHeight / width) * 180 / Math.PI;
+      const slant = Math.min(MAX_TILT_DEG, Math.max(MIN_TILT_DEG, natural)) * Math.PI / 180;
+      return {
+        angle: `${180 - slant * 180 / Math.PI}deg`,
+        sin: Math.sin(slant),
+        cos: Math.cos(slant)
+      };
+    }
+    function front(element, tilt, height, lineHeight) {
+      return tilt.sin * Math.max(0, element.clientWidth) + tilt.cos * height + lineHeight * FADE_BAND;
+    }
+    function textOf(element) {
+      return (element.textContent ?? "").replace(/\s+/g, " ").trim();
+    }
+    function labelText(element) {
+      if (!element.hasAttribute("data-shimmer")) return textOf(element);
+      const content = firstChild(element);
+      return content === null ? "" : textOf(content);
+    }
+    function contentWidth(element) {
+      const root = maskTarget(element);
+      if (root === null) return 0;
+      const origin = root.getBoundingClientRect().left;
+      const range = document.createRange();
+      const walker = document.createTreeWalker(root, 4);
+      let right = 0;
+      for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+        const text = node.textContent ?? "";
+        if (text.trim() === "") continue;
+        range.selectNodeContents(node);
+        right = Math.max(right, range.getBoundingClientRect().right - origin);
+      }
+      return right;
+    }
+    function firstChild(element) {
+      return element.firstElementChild ?? null;
+    }
+    function maskTarget(element) {
+      return element.hasAttribute("data-shimmer") ? firstChild(element) : element;
+    }
+    function slotOf(element) {
+      const parent = element.parentElement;
+      if (parent === null) return null;
+      const children = parent.children;
+      for (let index = 0; index < children.length; index += 1) {
+        if (children[index] === element) return { parent, index };
+      }
+      return null;
+    }
+    function readSlot(slot) {
+      if (slot === null) return void 0;
+      return slots.get(slot.parent)?.get(slot.index);
+    }
+    function writeSlot(slot, text, width) {
+      if (slot === null) return;
+      let entries = slots.get(slot.parent);
+      if (entries === void 0) {
+        entries = /* @__PURE__ */ new Map();
+        slots.set(slot.parent, entries);
+      }
+      entries.set(slot.index, { text, width });
+      const count = slot.parent.children.length;
+      for (const index of entries.keys()) {
+        if (index >= count) entries.delete(index);
+      }
+    }
+    function enterLabel(element) {
+      const run2 = (rolls.get(element) ?? 0) + 1;
+      rolls.set(element, run2);
+      element.removeAttribute(ROLL_ATTRIBUTE);
+      void element.scrollHeight;
+      element.setAttribute(ROLL_ATTRIBUTE, "");
+      window.setTimeout(() => {
+        if (rolls.get(element) === run2) element.removeAttribute(ROLL_ATTRIBUTE);
+      }, rollMs);
+    }
+    function append(element, previous, previousWidth) {
+      const now = labelText(element);
+      const target = maskTarget(element);
+      if (target === null) return;
+      const full = contentWidth(element);
+      element.setAttribute(WIDTH_ATTRIBUTE, String(full));
+      if (full <= 1) {
+        rest(element, target);
+        return;
+      }
+      const extending = previous !== "" && now.startsWith(previous) && previousWidth > 0;
+      const start = extending ? previousWidth : 0;
+      const gap = Math.max(MIN_REVEAL_PX, full - start);
+      const duration = revealDuration(gap);
+      const run2 = nextGeneration(element);
+      const continuing = extending && (sweeps.get(element) ?? 0) > performance.now();
+      target.style.removeProperty("mask-image");
+      if (!continuing) {
+        target.style.transition = "none";
+        target.style.setProperty("--dsh-uix-edge", `${start}px`);
+        void element.scrollHeight;
+      }
+      sweeps.set(element, performance.now() + duration);
+      target.style.transition = `--dsh-uix-edge ${duration}ms ${ease}`;
+      target.style.setProperty("--dsh-uix-edge", `${full}px`);
+      window.setTimeout(() => {
+        if (!owns(element, run2)) return;
+        sweeps.delete(element);
+        rest(element, target);
+      }, duration);
+    }
+    function rest(element, target) {
+      target.style.setProperty("mask-image", rests.get(element) ?? "none");
+      target.style.removeProperty("--dsh-uix-edge");
+      target.style.removeProperty("transition");
+    }
+    function owns(element, run2) {
+      return generation.get(element) === run2;
+    }
+    function revealDuration(gap) {
+      const active = settings;
+      const perLine = revealMinMs / Math.pow(ONE_LINE_PX, REVEAL_EXPONENT);
+      const shaped = perLine * Math.pow(Math.max(ONE_LINE_PX, gap), REVEAL_EXPONENT);
+      const scaled = Math.min(revealMaxMs, Math.max(revealMinMs, shaped)) * active.durationScale;
+      return active.quantize ? quantizeMs(scaled) : scaled;
+    }
+    function advance(element, state) {
+      const active = settings;
+      if (active === void 0) return;
+      const height = lineHeightOf(element);
+      const tilt = tiltFor(element, height);
+      element.style.setProperty("--dsh-uix-tilt", tilt.angle);
+      state.target = front(element, tilt, element.scrollHeight, height);
+      if (state.frame !== 0) return;
+      run(element, state);
+    }
+    function run(element, state) {
+      const active = settings;
+      if (active === void 0) return;
+      const gap = state.target - state.current;
+      if (gap < MIN_REVEAL_PX) {
+        state.frame = 0;
+        return;
+      }
+      state.from = state.current;
+      state.started = performance.now();
+      state.duration = revealDuration(gap);
+      const mode = active.mode;
+      const step = (now) => {
+        const live = reveals.get(element);
+        if (live === void 0 || live !== state) return;
+        const progress = Math.min(1, (now - state.started) / Math.max(1, state.duration));
+        const eased = easeCurve(effectCurvePoints(mode), progress);
+        state.current = state.from + (state.target - state.from) * eased;
+        element.style.setProperty("--dsh-uix-reveal", `${state.current}px`);
+        if (progress >= 1) {
+          state.current = state.target;
+          element.style.setProperty("--dsh-uix-reveal", `${state.target}px`);
+          state.frame = 0;
+          if (state.target - state.current >= MIN_REVEAL_PX) run(element, state);
+          return;
+        }
+        state.frame = window.requestAnimationFrame(step);
+      };
+      state.frame = window.requestAnimationFrame(step);
+    }
+    function forget(element, immediately = false) {
+      const state = reveals.get(element);
+      reveals.delete(element);
+      nextGeneration(element);
+      if (state !== void 0 && !immediately) {
+        element.style.setProperty("--dsh-uix-reveal", `${state.target + element.scrollHeight}px`);
+      }
+      element.removeAttribute(STREAM_ATTRIBUTE);
+      element.removeAttribute(LAST_ATTRIBUTE);
+      element.removeAttribute(WIDTH_ATTRIBUTE);
+      element.removeAttribute(ROLL_ATTRIBUTE);
+      rolls.delete(element);
+      const target = maskTarget(element);
+      const clear = () => {
+        element.style.removeProperty("--dsh-uix-reveal");
+        element.style.removeProperty("--dsh-uix-tilt");
+        element.style.removeProperty("transition");
+        target?.style.removeProperty("--dsh-uix-edge");
+        target?.style.removeProperty("transition");
+        target?.style.removeProperty("mask-image");
+      };
+      rests.delete(element);
+      if (immediately || state === void 0) clear();
+      else window.setTimeout(clear, revealMaxMs);
+    }
+    function measure() {
+      pending = false;
+      const active = settings;
+      if (active === void 0 || active.mode === "off" || still()) return;
+      const marked = document.querySelectorAll(`[${STREAM_ATTRIBUTE}]`);
+      for (let index = 0; index < marked.length; index += 1) {
+        const element = marked[index];
+        if (element === void 0) continue;
+        if (element.getAttribute(STREAM_ATTRIBUTE) !== "reveal") continue;
+        const state = reveals.get(element);
+        if (state === void 0) continue;
+        advance(element, state);
+      }
+    }
+    function schedule() {
+      if (pending) return;
+      pending = true;
+      window.requestAnimationFrame(measure);
+    }
+    function covered(element) {
+      let node = element.parentElement;
+      while (node !== null) {
+        if (node.getAttribute(STREAM_ATTRIBUTE) === "reveal") return true;
+        node = node.parentElement;
+      }
+      return false;
+    }
+    function mark() {
+      const active = settings;
+      if (active === void 0 || active.mode === "off" || still()) return;
+      const live = document.querySelectorAll(LIVE);
+      const seen = /* @__PURE__ */ new Set();
+      const containers2 = /* @__PURE__ */ new Set();
+      for (let index = 0; index < live.length; index += 1) {
+        const element = live[index];
+        if (element === void 0) continue;
+        for (let node = element.parentElement; node !== null; node = node.parentElement) {
+          containers2.add(node);
+        }
+      }
+      for (let index = 0; index < live.length; index += 1) {
+        const element = live[index];
+        if (element === void 0) continue;
+        const height = element.scrollHeight;
+        const lineHeight = lineHeightOf(element);
+        const before = heights.get(element);
+        heights.set(element, height);
+        if (covered(element)) continue;
+        const mode = modeOf(element);
+        if (mode === "append" && containers2.has(element)) {
+          if (element.hasAttribute(STREAM_ATTRIBUTE)) forget(element, true);
+          continue;
+        }
+        seen.add(element);
+        const marked2 = element.getAttribute(STREAM_ATTRIBUTE);
+        if (marked2 !== mode) {
+          if (marked2 !== null) forget(element, true);
+          if (mode === "reveal") {
+            const tilt = tiltFor(element, lineHeight);
+            const end = front(element, tilt, height, lineHeight);
+            const open = before === void 0 ? end : Math.min(end, front(element, tilt, before, lineHeight));
+            reveals.set(element, { current: open, from: open, target: open, frame: 0, started: 0, duration: 0 });
+            element.style.setProperty("--dsh-uix-tilt", tilt.angle);
+            element.style.setProperty("--dsh-uix-reveal", `${open}px`);
+          } else {
+            const target2 = maskTarget(element);
+            if (target2 !== null) rests.set(element, window.getComputedStyle(target2).maskImage);
+          }
+          element.setAttribute(STREAM_ATTRIBUTE, mode);
+          const target = maskTarget(element);
+          if (mode === "append" && target !== null) rest(element, target);
+        }
+        if (mode === "reveal") continue;
+        const text = labelText(element);
+        const width = contentWidth(element);
+        const slot = slotOf(element);
+        const prior = readSlot(slot);
+        const previous = prior?.text ?? element.getAttribute(LAST_ATTRIBUTE) ?? "";
+        const previousWidth = prior?.width ?? Number.parseFloat(element.getAttribute(WIDTH_ATTRIBUTE) ?? "0");
+        if (text === previous) continue;
+        writeSlot(slot, text, width);
+        element.setAttribute(LAST_ATTRIBUTE, text);
+        element.setAttribute(WIDTH_ATTRIBUTE, String(width));
+        const extending = previous !== "" && text.startsWith(previous) && previousWidth > 0;
+        if (!extending) enterLabel(element);
+        append(element, previous, Number.isFinite(previousWidth) ? previousWidth : 0);
+      }
+      unveil();
+      const marked = document.querySelectorAll(`[${STREAM_ATTRIBUTE}]`);
+      for (let index = 0; index < marked.length; index += 1) {
+        const element = marked[index];
+        if (element === void 0 || seen.has(element)) continue;
+        forget(element);
+      }
+      schedule();
+    }
+    function atTail() {
+      return document.querySelectorAll("[data-chat-following-tail]").length > 0;
+    }
+    function unveil() {
+      const rows = document.querySelectorAll(ROW);
+      if (rows.length === 0) return;
+      const pinned = atTail();
+      const next = /* @__PURE__ */ new WeakSet();
+      for (let index = 0; index < rows.length; index += 1) {
+        const row = rows[index];
+        if (row === void 0) continue;
+        next.add(row);
+        if (knownRows.has(row)) continue;
+        if (!pinned || !following) continue;
+        row.setAttribute(ENTER_ATTRIBUTE, "");
+        window.setTimeout(() => {
+          row.removeAttribute(ENTER_ATTRIBUTE);
+        }, enterMs);
+      }
+      knownRows = next;
+      following = pinned;
+    }
+    function install() {
+      if (installed) return;
+      installed = true;
+      sheet = document.createElement("style");
+      sheet.textContent = STREAM_CSS;
+      document.head.appendChild(sheet);
+      observer = new MutationObserver(() => {
+        mark();
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["data-streaming", "data-shimmer"]
+      });
+      const existing = document.querySelectorAll(ROW);
+      for (let index = 0; index < existing.length; index += 1) {
+        const row = existing[index];
+        if (row !== void 0) knownRows.add(row);
+      }
+      following = atTail();
+      mark();
+    }
+    function uninstall() {
+      observer?.disconnect();
+      observer = void 0;
+      sheet?.remove();
+      sheet = void 0;
+      installed = false;
+      document.documentElement.style.removeProperty("--dsh-uix-ease");
+      document.documentElement.style.removeProperty("--dsh-uix-roll");
+      document.documentElement.style.removeProperty("--dsh-uix-enter");
+      const entering = document.querySelectorAll(`[${ENTER_ATTRIBUTE}]`);
+      for (let index = 0; index < entering.length; index += 1) {
+        entering[index]?.removeAttribute(ENTER_ATTRIBUTE);
+      }
+      const marked = document.querySelectorAll(`[${STREAM_ATTRIBUTE}]`);
+      for (let index = 0; index < marked.length; index += 1) {
+        const element = marked[index];
+        if (element !== void 0) forget(element, true);
+      }
+      reveals.clear();
+    }
+    return {
+      apply(next) {
+        uninstall();
+        settings = next;
+        if (next.mode === "off" || !next.stream) return;
+        if (next.reduced === "system" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+        ease = `cubic-bezier(${effectCurvePoints(next.mode).join(", ")})`;
+        const scaled = next.streamRollMs * next.durationScale;
+        rollMs = next.quantize ? quantizeMs(scaled) : scaled;
+        document.documentElement.style.setProperty("--dsh-uix-ease", ease);
+        document.documentElement.style.setProperty("--dsh-uix-roll", `${rollMs}ms`);
+        const scaledEnter = next.streamEnterMs * next.durationScale;
+        enterMs = next.quantize ? quantizeMs(scaledEnter) : scaledEnter;
+        revealMinMs = next.streamRevealMinMs;
+        revealMaxMs = next.streamRevealMaxMs;
+        document.documentElement.style.setProperty("--dsh-uix-enter", `${enterMs}ms`);
+        install();
+      },
       restore: uninstall
     };
   }
@@ -738,16 +1678,14 @@
 .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)}
+/* Boolean option row: DeveloperToolsRow.module.css .row / .title / .description \u2014
+   the title column takes the width, the switch sits at the inline end. The copied
+   Switch above is the same control, so an option row and the row above it match. */
+.dsh-uix-option{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
+.dsh-uix-option+.dsh-uix-option{border-top:0.5px solid var(--dsw-alias-border-l2)}
+.dsh-uix-option-text{display:flex;flex-direction:column;gap:4px;min-width:0}
+.dsh-uix-option-title{font-size:13px;font-weight:500;line-height:1.5;color:var(--dsw-alias-label-primary)}
+.dsh-uix-option-desc{font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary)}
 `;
 
   // src/client.ts
@@ -802,7 +1740,14 @@
           durationScale: zod.number().optional(),
           spatialSplit: zod.boolean().optional(),
           quantize: zod.boolean().optional(),
-          reduced: zod.string().optional()
+          reduced: zod.string().optional(),
+          scroll: zod.boolean().optional(),
+          stream: zod.boolean().optional(),
+          followScroll: zod.boolean().optional(),
+          streamRevealMinMs: zod.number().optional(),
+          streamRevealMaxMs: zod.number().optional(),
+          streamEnterMs: zod.number().optional(),
+          streamRollMs: zod.number().optional()
         }), "SetMotionArgs")
       ]
     };
@@ -829,13 +1774,23 @@
       "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": "\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.spatial-split-hint": "\u4F4D\u79FB\u5E26\u8FC7\u51B2\uFF0C\u6548\u679C\u4E0D\u5E26\uFF1B\u5173\u95ED\u540E\u7EDF\u4E00\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.scroll": "\u5B9A\u4F4D\u6EDA\u52A8\u4F7F\u7528\u540C\u4E00\u66F2\u7EBF",
-      "motion.scroll-hint": "\u63A5\u7BA1 scrollIntoView \u7684\u5E73\u6ED1\u5B9A\u4F4D\uFF08\u8F68\u8FF9\u884C\u805A\u7126\u3001\u63D2\u4EF6\u5361\u7247\u5C45\u4E2D\uFF09\uFF0C\u6539\u7528\u672C\u9875\u66F2\u7EBF\u3002\u8BFB\u8005\u4E00\u65E6\u5728\u5BB9\u5668\u4E0A\u6EDA\u8F6E\u3001\u89E6\u6478\u6216\u6309\u6EDA\u52A8\u952E\uFF0C\u811A\u672C\u6EDA\u52A8\u7ACB\u5373\u505C\u6B62\u5E76\u4EA4\u8FD8\u539F\u751F\u63A7\u5236\u3002\u804A\u5929\u8DDF\u968F\u4E0E\u5404\u7C7B scrollTo \u6EDA\u52A8\u4FDD\u6301\u539F\u751F\uFF1A\u5B83\u4EEC\u9760\u6BCF\u6B21\u6EDA\u52A8\u53EA\u7ED3\u675F\u4E00\u6B21\u7684 scrollend \u5224\u65AD\u610F\u56FE\uFF0C\u800C\u9010\u5E27\u811A\u672C\u6EDA\u52A8\u4F1A\u6BCF\u5E27\u7ED3\u675F\u4E00\u6B21\u3002",
+      "motion.quantize-hint": "\u65F6\u957F\u5438\u9644\u5230 50 \u81F3 1000ms \u7684 Material \u6863\u4F4D\u3002",
+      "motion.stream": "\u6D41\u5F0F\u6587\u672C\u6E10\u8FDB\u663E\u73B0",
+      "motion.stream-hint": "\u6B63\u6587\u4E0E\u601D\u8003\u6458\u8981\u9010\u6BB5\u663E\u73B0\uFF1B\u53EA\u79FB\u52A8\u906E\u7F69\uFF0C\u4E0D\u622A\u65AD\u6587\u5B57\u3002",
+      "motion.stream-timing": "\u6D41\u5F0F\u52A8\u753B\u65F6\u957F",
+      "motion.follow-scroll": "\u8DDF\u968F\u5230\u5E95\u65F6\u5E73\u6ED1\u6ED1\u884C",
+      "motion.follow-scroll-hint": "\u5173\u95ED\u540E\u5E95\u90E8\u8DDF\u968F\u77AC\u65F6\u8D34\u9F50\uFF0C\u53EA\u6709\u6587\u5B57\u5728\u52A8\uFF1B\u5F00\u542F\u65F6\u89C6\u53E3\u6ED1\u8FC7\u53BB\uFF0C\u89C2\u611F\u66F4\u8FDE\u7EED\u4F46\u59CB\u7EC8\u843D\u540E\u7EA6\u4E00\u884C\u3002",
+      "motion.stream-reveal-min": "\u5355\u884C\u663E\u73B0\u4E0B\u9650\uFF08ms\uFF09",
+      "motion.stream-reveal-max": "\u6574\u5757\u663E\u73B0\u4E0A\u9650\uFF08ms\uFF09",
+      "motion.stream-enter": "\u65B0\u884C\u8FDB\u573A\uFF08ms\uFF09",
+      "motion.stream-roll": "\u6458\u8981\u6362\u884C\u6EDA\u52A8\uFF08ms\uFF09",
+      "motion.stream-timing-hint": "\u5355\u884C\u4E0B\u9650\u5C31\u662F\u7F13\u5B58\u7684\u53EF\u89C1\u7A97\u53E3\uFF1A\u8C03\u5927\u5B83\uFF0C\u8FB9\u754C\u540E\u65B9\u538B\u7740\u7684\u672A\u8BFB\u6587\u5B57\u66F4\u591A\u3001\u52A8\u753B\u66F4\u6162\u3002\u4E0A\u9650\u7528\u4E8E\u6574\u5757\u5185\u5BB9\u4E00\u6B21\u843D\u4E0B\u7684\u60C5\u5F62\u3002",
+      "motion.scroll": "\u6EDA\u52A8\u4F7F\u7528\u540C\u4E00\u66F2\u7EBF",
+      "motion.scroll-hint": "\u5E73\u6ED1\u6EDA\u52A8\u3001\u6EDA\u8F6E\u4E0E\u5B9A\u4F4D\u8DF3\u8F6C\u6539\u7528\u672C\u9875\u66F2\u7EBF\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.reduced-hint": "\u5FFD\u7565\u7CFB\u7EDF\u504F\u597D\uFF0C\u4E00\u5F8B\u628A\u65F6\u957F\u538B\u5230 1ms\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"
@@ -861,13 +1816,23 @@
       "motion.duration": "Duration scale",
       "motion.options": "Advanced options",
       "motion.spatial-split": "Spatial and effects take different curves",
-      "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.spatial-split-hint": "Movement overshoots, effects do not; off uses the effects curve for both.",
       "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.scroll": "Locating scroll on the same curve",
-      "motion.scroll-hint": "Take over the smooth locating jump of scrollIntoView \u2014 focus a trajectory row, centre a plugin card \u2014 and drive it on this page's curve. A wheel, touch, or scroll key over the container stops it at once. Chat follow and other scrollTo scrolling stay native: they read one end-of-scroll event per gesture to infer intent, and frame-by-frame scripted scrolling ends once per frame.",
+      "motion.quantize-hint": "Snap durations onto the 50-1000 ms Material ladder.",
+      "motion.stream": "Progressive streamed text",
+      "motion.stream-hint": "Reveal transcript and reasoning progressively; a mask moves, no text is cut.",
+      "motion.stream-timing": "Stream timing",
+      "motion.follow-scroll": "Glide when following the tail",
+      "motion.follow-scroll-hint": "Off keeps the tail pinned exactly and only the text moves. On eases the viewport along \u2014 smoother, but about a line behind.",
+      "motion.stream-reveal-min": "Reveal floor, one line (ms)",
+      "motion.stream-reveal-max": "Reveal ceiling, whole block (ms)",
+      "motion.stream-enter": "New row settle (ms)",
+      "motion.stream-roll": "Summary roll (ms)",
+      "motion.stream-timing-hint": "The floor is the visible buffer: raise it and more unread text stays behind the boundary, so the reveal reads slower. The ceiling covers a block that lands all at once.",
+      "motion.scroll": "Scroll on the same curve",
+      "motion.scroll-hint": "Drive smooth scrolling, the wheel, and locating jumps on this page's curve.",
       "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.reduced-hint": "Ignore the system preference and force every duration to 1 ms.",
       "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."
@@ -908,6 +1873,7 @@
             borderWidth: "0.5px",
             paths: { colors: DEFAULT_COLORS_PATH, tokens: DEFAULT_TOKENS_PATH },
             motion: { ...MOTION_OFF },
+            streamUnsupported: false,
             problem: "",
             notice: "",
             saving: false
@@ -915,6 +1881,7 @@
           const listeners = /* @__PURE__ */ new Set();
           const motion = createMotion();
           const scrolling = createScrollMotion();
+          const streaming = createStreamMotion();
           const publish = (patch) => {
             view = { ...view, ...patch };
             for (const listener of listeners) listener();
@@ -931,8 +1898,9 @@
             if (disposed) return;
             motion.apply(next);
             scrolling.apply(next);
+            streaming.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 || left.scroll !== right.scroll;
+          const motionDiffers = (left, right) => left.mode !== right.mode || left.durationScale !== right.durationScale || left.spatialSplit !== right.spatialSplit || left.quantize !== right.quantize || left.reduced !== right.reduced || left.scroll !== right.scroll || left.stream !== right.stream || left.followScroll !== right.followScroll || left.streamRevealMinMs !== right.streamRevealMinMs || left.streamRevealMaxMs !== right.streamRevealMaxMs || left.streamEnterMs !== right.streamEnterMs || left.streamRollMs !== right.streamRollMs;
           const clearOverride = () => {
             disposeOverride?.();
             disposeOverride = void 0;
@@ -983,7 +1951,12 @@
             return envelope.value;
           };
           const adopt = (answer) => {
-            const motionAnswer = answer.motion ?? MOTION_OFF;
+            const reported = answer.motion;
+            if (reported !== void 0 && reported.stream === void 0 && !view.streamUnsupported) {
+              console.error("ui-experience: this host build predates the stream setting; progressive streamed text stays on and its switch stays hidden until DSH restarts");
+              publish({ streamUnsupported: true });
+            }
+            const motionAnswer = reported === void 0 ? { ...MOTION_OFF } : { ...MOTION_OFF, ...reported, stream: reported.stream ?? true };
             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");
@@ -1056,6 +2029,10 @@
           };
           const saveMotion = async (change) => {
             if (disposed || writing) return;
+            if (view.streamUnsupported && change.stream !== void 0) {
+              console.error("ui-experience: the stream setting cannot be saved on this host build; restart DSH to pick it up");
+              return;
+            }
             writing = true;
             publish({ saving: true, problem: "", notice: "" });
             try {
@@ -1157,6 +2134,28 @@
             ),
             h("span", null, label)
           );
+          const numberRow = (label, hint, value, commit, disabled) => h(
+            "label",
+            { className: "dsh-uix-field" },
+            h("span", { className: "dsh-uix-label" }, label),
+            h(
+              "span",
+              { className: "dsh-uix-input-wrap" },
+              h("input", {
+                className: "dsh-uix-input",
+                type: "number",
+                min: 0,
+                step: 10,
+                defaultValue: String(value),
+                disabled,
+                onChange: (event) => {
+                  const parsed = event.target.valueAsNumber;
+                  if (Number.isFinite(parsed) && parsed >= 0) commit(Math.round(parsed));
+                }
+              })
+            ),
+            h("p", { className: "dsh-uix-hint" }, hint)
+          );
           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));
@@ -1206,23 +2205,26 @@
               }, segment.label))
             );
           };
-          const checkbox = (checked, set, label, hint, disabled) => h(
-            "label",
-            { className: "dsh-uix-check" },
-            h("input", {
-              type: "checkbox",
-              checked,
+          const option = (checked, set, label, hint, disabled) => h(
+            "div",
+            { className: "dsh-uix-option" },
+            h(
+              "div",
+              { className: "dsh-uix-option-text" },
+              h("div", { className: "dsh-uix-option-title" }, label),
+              hint === void 0 ? null : h("div", { className: "dsh-uix-option-desc" }, hint)
+            ),
+            h("button", {
+              type: "button",
+              role: "switch",
+              "aria-checked": checked,
+              "aria-label": label,
               disabled,
-              onChange: (event) => {
-                set(event.target.checked);
+              className: "dsh-uix-switch",
+              onClick: () => {
+                set(!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)
-            )
+            }, h("span", { className: "dsh-uix-switch-thumb", "aria-hidden": true }))
           );
           function PaletteRow(props) {
             const tr = props.t ?? t;
@@ -1361,7 +2363,7 @@
             const policy = open ? h(
               "div",
               { className: "dsh-uix-form" },
-              checkbox(
+              option(
                 current.spatialSplit,
                 (next) => {
                   void saveMotion({ spatialSplit: next });
@@ -1370,7 +2372,7 @@
                 tr("motion.spatial-split-hint"),
                 locked
               ),
-              checkbox(
+              option(
                 current.quantize,
                 (next) => {
                   void saveMotion({ quantize: next });
@@ -1379,7 +2381,25 @@
                 tr("motion.quantize-hint"),
                 locked
               ),
-              checkbox(
+              state.streamUnsupported ? null : option(
+                current.stream,
+                (next) => {
+                  void saveMotion({ stream: next });
+                },
+                tr("motion.stream"),
+                tr("motion.stream-hint"),
+                locked
+              ),
+              option(
+                current.followScroll,
+                (next) => {
+                  void saveMotion({ followScroll: next });
+                },
+                tr("motion.follow-scroll"),
+                tr("motion.follow-scroll-hint"),
+                locked
+              ),
+              option(
                 current.scroll,
                 (next) => {
                   void saveMotion({ scroll: next });
@@ -1388,7 +2408,7 @@
                 tr("motion.scroll-hint"),
                 locked
               ),
-              checkbox(
+              option(
                 current.reduced === "always",
                 (next) => {
                   void saveMotion({ reduced: next ? "always" : "system" });
@@ -1398,6 +2418,46 @@
                 locked
               )
             ) : null;
+            const timing = current.stream && !state.streamUnsupported && open ? h(
+              "div",
+              { className: "dsh-uix-form" },
+              numberRow(
+                tr("motion.stream-reveal-min"),
+                tr("motion.stream-timing-hint"),
+                current.streamRevealMinMs,
+                (next) => {
+                  void saveMotion({ streamRevealMinMs: next });
+                },
+                locked
+              ),
+              numberRow(
+                tr("motion.stream-reveal-max"),
+                "",
+                current.streamRevealMaxMs,
+                (next) => {
+                  void saveMotion({ streamRevealMaxMs: next });
+                },
+                locked
+              ),
+              numberRow(
+                tr("motion.stream-enter"),
+                "",
+                current.streamEnterMs,
+                (next) => {
+                  void saveMotion({ streamEnterMs: next });
+                },
+                locked
+              ),
+              numberRow(
+                tr("motion.stream-roll"),
+                "",
+                current.streamRollMs,
+                (next) => {
+                  void saveMotion({ streamRollMs: next });
+                },
+                locked
+              )
+            ) : null;
             return h(
               "div",
               { className: "dsh-uix-row" },
@@ -1447,7 +2507,8 @@
               disclosure(open, () => {
                 setOpen(!open);
               }, tr("motion.options")),
-              policy
+              policy,
+              timing
             );
           }
           ctx.effect(() => ctx.slots.inject("settings.general.item", () => ctx.slots.register({
@@ -1471,6 +2532,7 @@
               teardown();
               motion.restore();
               scrolling.restore();
+              streaming.restore();
             };
           }, "ui-experience: page-level layers");
           void poll();