@fusion.dev/helix-headless 0.212.1 → 0.212.2

package/dist/chat/root/chat-root.d.ts

@@ -346,6 +346,8 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     private grower;
     /** What `grower` is watching, so a render that changed nothing re-observes nothing. */
     private watched;
+    /** The frame `watchSizes` will observe in, while one is booked. */
+    private watchFrame;
     /** The scroll offset this element last set, which the reader has not moved from. */
     private stuckAt;
     /** The turn at the top of the reader's view, and how far below the top it sat. */
@@ -424,7 +426,15 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * a reader asking to go to the bottom means.
      */
     resume(): void;
-    /** Scrolls to the bottom, and remembers where that was. */
+    /**
+     * Scrolls to the bottom, and remembers where that was.
+     *
+     * **At once, whatever `scroll-behavior` the page gives the log.** Pinned,
+     * this runs on every update, every token of a streaming turn included, and a
+     * smooth scroll sent again each time never arrives: in WebKit, a log that had
+     * streamed for a second under `scroll-behavior: smooth` rested 6 pixels short
+     * of the bottom, and `stuckAt` held where each scroll began.
+     */
     private stick;
     /**
      * Asks to pin or unpin, and reports whether the request stood.
@@ -496,8 +506,34 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * in a conversation of several knows who spoke.
      */
     private phrase;
-    /** Watches what is drawn for size, re-observing only when that changed. */
+    /**
+     * Watches what is drawn for size, re-observing only when that changed.
+     *
+     * **In the next frame's animation callbacks, never in the update that asked.**
+     * A resize notice asks for an update, the update draws new turns while the
+     * browser is still delivering notices, and turns observed then are held to
+     * the next frame with "ResizeObserver loop completed with undelivered
+     * notifications": twice in WebKit's run of Chat's specs and once in
+     * Chromium's, on October 11, 2026. Observed from the next frame's callbacks,
+     * their first notice comes before that frame paints, and a turn drawn for the
+     * first time is answered sooner still, by `settleDrawn`.
+     */
     private watchSizes;
+    /** Observes the log and the turns drawn now, where that changed. */
+    private observeSizes;
+    /**
+     * Answers the turns this render drew for the first time, once each has drawn
+     * what is in it: a microtask after this update, and before the frame.
+     *
+     * **Sooner than the resize observer, which `watchSizes` starts a frame
+     * later.** A turn is drawn empty and fills in after this update, and until
+     * it is measured the reader's turn sits where the estimates put it. A timer
+     * that ran before the next frame read that place as the reader's: on a Linux
+     * runner, the controller's rest after a scroll left a reader's turn 55.5
+     * pixels from where it was when history arrived above it, in WebKit, on
+     * October 11, 2026. Answered here, the history is held before any timer runs.
+     */
+    private settleDrawn;
     /**
      * A turn or the log changed size, which moves nothing on its own.
      *

package/dist/chat/root/chat-root.js

@@ -62,6 +62,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.settling = undefined;
         this.grower = undefined;
         this.watched = [];
+        this.watchFrame = 0;
         this.stuckAt = -1;
         this.anchor = undefined;
         this.asked = false;
@@ -259,7 +260,12 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     stick() {
         const log = this.log;
         if (log) {
-            log.scrollTop = log.scrollHeight;
+            if (typeof log.scrollTo === 'function') {
+                log.scrollTo({ behavior: 'instant', top: log.scrollHeight });
+            }
+            else {
+                log.scrollTop = log.scrollHeight;
+            }
             this.stuckAt = log.scrollTop;
         }
     }
@@ -335,7 +341,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         }
         const found = turns[low];
         this.anchor = found
-            ? { id: found.id, offset: found.element.getBoundingClientRect().top - top }
+            ? { at: log.scrollTop, id: found.id, offset: found.element.getBoundingClientRect().top - top }
             : undefined;
     }
     restore() {
@@ -344,6 +350,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (!log || !anchor || (this.fed && this.virtualize.scrolling())) {
             return;
         }
+        if (!this.fed && Math.abs(log.scrollTop - anchor.at) >= 1) {
+            this.remember();
+            return;
+        }
         const found = this.rendered().find((turn) => turn.id === anchor.id);
         if (!found) {
             return;
@@ -418,9 +428,21 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             : formatWords(this, 'arrivalLabel', { author: turn.by, text: turn.text });
     }
     watchSizes() {
-        if (typeof ResizeObserver === 'undefined') {
+        if (typeof ResizeObserver === 'undefined' || this.watchFrame !== 0) {
+            return;
+        }
+        if (typeof requestAnimationFrame !== 'function') {
+            this.observeSizes();
             return;
         }
+        this.watchFrame = requestAnimationFrame(() => {
+            this.watchFrame = 0;
+            if (this.isConnected) {
+                this.observeSizes();
+            }
+        });
+    }
+    observeSizes() {
         const log = this.log;
         const targets = [...(log ? [log] : []), ...this.rendered().map((turn) => turn.element)];
         if (targets.length === this.watched.length &&
@@ -434,6 +456,18 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         }
         this.watched = targets;
     }
+    settleDrawn() {
+        const waiting = this.drawn().filter((row) => !drawnInFull(row));
+        if (waiting.length === 0) {
+            return;
+        }
+        void Promise.all(waiting.map(({ element }) => element.firstElementChild
+            ?.updateComplete)).then(() => {
+            if (this.isConnected && this.fed) {
+                this.handleResize();
+            }
+        });
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
@@ -458,6 +492,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.settling = undefined;
         this.grower?.disconnect();
         this.watched = [];
+        if (this.watchFrame !== 0) {
+            cancelAnimationFrame(this.watchFrame);
+            this.watchFrame = 0;
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -518,6 +556,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         }
         if (this.fed) {
             this.virtualize.measure();
+            this.settleDrawn();
         }
         this.watchSizes();
         this.markScroller();