@dsh-plugin/dsh-ui-experience 1.0.0-dev.43492422772 → 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();
       } };
@@ -472,6 +477,8 @@
   var MAX_MS = 460;
   var FREE_PX = 240;
   var GROWTH_MS_PER_PX = 0.2;
+  var MOTION_EPSILON = 0.5;
+  var FOREIGN_TOLERANCE = 1;
   var SCROLL_KEYS = /* @__PURE__ */ new Set([
     "ArrowUp",
     "ArrowDown",
@@ -483,7 +490,20 @@
     "End",
     " "
   ]);
-  var TAKEOVER_EVENTS = ["wheel", "touchstart", "keydown"];
+  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) {
@@ -502,15 +522,12 @@
       left: Math.max(0, element.scrollWidth - element.clientWidth)
     };
   }
-  function scrollable(element) {
-    const max = maxima(element);
-    return max.top > 0 || max.left > 0;
-  }
   function containers(element) {
     const out = [];
     let node = element.parentElement;
     while (node !== null) {
-      if (scrollable(node)) out.push(node);
+      const max = maxima(node);
+      if (max.top > 0 || max.left > 0) out.push(node);
       node = node.parentElement;
     }
     return out;
@@ -521,149 +538,499 @@
       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() {
-      if (run === void 0) return;
-      window.cancelAnimationFrame(run.frame);
+    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;
+      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];
         if (leg === void 0 || written === void 0) continue;
-        if (Math.abs(leg.element.scrollTop - written.top) > 1 || Math.abs(leg.element.scrollLeft - written.left) > 1) {
+        if (Math.abs(leg.element.scrollTop - written.top) > FOREIGN_TOLERANCE || Math.abs(leg.element.scrollLeft - written.left) > FOREIGN_TOLERANCE) {
           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;
+        for (const leg of active.legs) release(leg.element, true);
+        for (const settle of active.done) settle();
         return;
       }
       active.frame = window.requestAnimationFrame(step);
     }
-    function start(legs) {
+    function start(legs, done) {
       cancel();
       const active = settings;
-      if (active === void 0) 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)
+        frame: window.requestAnimationFrame(step),
+        done: [done]
       };
     }
-    function defer(behavior) {
-      if (settings === void 0) return true;
-      if (behavior !== "smooth") return true;
-      return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    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 legsFor(element, top, left) {
+    function wantsInstant() {
+      const active = settings;
+      if (active.reduced === "always") return true;
+      return active.reduced === "system" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    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);
-      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) < 1 && Math.abs(toLeft - element.scrollLeft) < 1) return void 0;
-      return [{ element, fromTop: element.scrollTop, fromLeft: element.scrollLeft, toTop, toLeft }];
+      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 readOffsets(options, y, base) {
-      if (typeof options === "number") {
-        return { left: base.left + options, top: y === void 0 ? void 0 : base.top + y };
-      }
-      if (options === void 0 || options === null) return { top: void 0, left: void 0 };
-      return {
-        left: options.left === void 0 ? void 0 : base.left + options.left,
-        top: options.top === void 0 ? void 0 : base.top + options.top
+    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 patchedScrollTo(options, y) {
-      const behavior = typeof options === "object" && options !== null ? options.behavior : void 0;
-      if (defer(behavior)) {
-        ;
-        shipped.scrollTo.call(this, options, y);
+    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;
       }
-      const request = readOffsets(options, y, { top: 0, left: 0 });
-      const legs = legsFor(this, request.top, request.left);
-      if (legs !== void 0) start(legs);
+      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 patchedScrollBy(options, y) {
-      const behavior = typeof options === "object" && options !== null ? options.behavior : void 0;
-      if (defer(behavior)) {
-        ;
-        shipped.scrollBy.call(this, options, y);
-        return;
+    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();
       }
-      const request = readOffsets(options, y, { top: this.scrollTop, left: this.scrollLeft });
-      const legs = legsFor(this, request.top, request.left);
-      if (legs !== void 0) start(legs);
+      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 patchedScrollIntoView(options) {
-      const behavior = typeof options === "object" && options !== null ? options.behavior : void 0;
-      if (defer(behavior)) {
-        ;
-        shipped.scrollIntoView.call(this, options);
-        return;
+    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;
       }
-      const instant = { ...typeof options === "object" && options !== null ? options : {}, behavior: "instant" };
+      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") return shipped.scrollIntoView.apply(this, args);
+      const jump = { ...requested, behavior: "instant" };
+      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.scrollIntoView.call(this, instant);
+      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;
-        if (Math.abs(landed.top - origin.top) < 1 && Math.abs(landed.left - origin.left) < 1) continue;
+        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) {
+          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) start(legs);
+      if (legs.length === 0) return Promise.resolve();
+      return new Promise((resolve) => {
+        if (!merge(legs, resolve)) start(legs, resolve);
+      });
+    }
+    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 || target === null) return false;
+      if (!active.legs.some((leg) => leg.element.contains(target))) return false;
+      cancel();
+      return true;
     }
     function onTakeover(event) {
-      if (run === void 0) return;
-      if (event.type !== "keydown") {
-        cancel();
+      const key = event.type === "keydown";
+      if (key) {
+        if (event.key === void 0 || !SCROLL_KEYS.has(event.key)) return;
+        const focus = event.target;
+        if (focus instanceof Element && focus.closest(EDITABLE) !== null) return;
+      }
+      if (run === void 0) {
+        clearGrace();
         return;
       }
-      if (event.key !== void 0 && SCROLL_KEYS.has(event.key)) 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;
       const prototype = Element.prototype;
-      prototype.scrollTo = patchedScrollTo;
-      prototype.scrollBy = patchedScrollBy;
-      prototype.scrollIntoView = patchedScrollIntoView;
-      for (const kind of TAKEOVER_EVENTS) {
-        window.addEventListener(kind, onTakeover, true);
+      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;
+      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;
-      for (const kind of TAKEOVER_EVENTS) {
+      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);
       }
     }
@@ -672,7 +1039,552 @@
         uninstall();
         settings = next;
         if (!next.scroll || next.mode === "off") return;
-        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) 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
@@ -766,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
@@ -830,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")
       ]
     };
@@ -857,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.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": "\u63A5\u7BA1\u811A\u672C\u8C03\u7528\u7684\u5E73\u6ED1\u6EDA\u52A8\uFF08\u804A\u5929\u8DDF\u968F\u3001\u8F68\u8FF9\u5B9A\u4F4D\u3001\u5361\u7247\u5C45\u4E2D\uFF09\uFF0C\u6539\u7528\u672C\u9875\u66F2\u7EBF\u3002\u8BFB\u8005\u4E00\u65E6\u6EDA\u8F6E\u3001\u89E6\u6478\u6216\u6309\u952E\uFF0C\u811A\u672C\u6EDA\u52A8\u7ACB\u5373\u505C\u6B62\u5E76\u4EA4\u8FD8\u539F\u751F\u63A7\u5236\u3002",
+      "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"
@@ -889,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.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": "Take over scripted smooth scrolling \u2014 chat follow, trajectory locate, card centring \u2014 and drive it on this page's curve. Any wheel, touch, or scroll key stops the scripted motion at once and hands control back to the browser.",
+      "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."
@@ -936,6 +1873,7 @@
             borderWidth: "0.5px",
             paths: { colors: DEFAULT_COLORS_PATH, tokens: DEFAULT_TOKENS_PATH },
             motion: { ...MOTION_OFF },
+            streamUnsupported: false,
             problem: "",
             notice: "",
             saving: false
@@ -943,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();
@@ -959,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;
@@ -1011,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");
@@ -1084,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 {
@@ -1185,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));
@@ -1234,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;
@@ -1389,7 +2363,7 @@
             const policy = open ? h(
               "div",
               { className: "dsh-uix-form" },
-              checkbox(
+              option(
                 current.spatialSplit,
                 (next) => {
                   void saveMotion({ spatialSplit: next });
@@ -1398,7 +2372,7 @@
                 tr("motion.spatial-split-hint"),
                 locked
               ),
-              checkbox(
+              option(
                 current.quantize,
                 (next) => {
                   void saveMotion({ quantize: next });
@@ -1407,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 });
@@ -1416,7 +2408,7 @@
                 tr("motion.scroll-hint"),
                 locked
               ),
-              checkbox(
+              option(
                 current.reduced === "always",
                 (next) => {
                   void saveMotion({ reduced: next ? "always" : "system" });
@@ -1426,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" },
@@ -1475,7 +2507,8 @@
               disclosure(open, () => {
                 setOpen(!open);
               }, tr("motion.options")),
-              policy
+              policy,
+              timing
             );
           }
           ctx.effect(() => ctx.slots.inject("settings.general.item", () => ctx.slots.register({
@@ -1499,6 +2532,7 @@
               teardown();
               motion.restore();
               scrolling.restore();
+              streaming.restore();
             };
           }, "ui-experience: page-level layers");
           void poll();