@artooi/ag-ui-web-component 0.50.0 → 0.50.1

package/dist/ui/placement/collapse_styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse_styles.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/collapse_styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,EAAE,MA2X7B,CAAC"}
+{"version":3,"file":"collapse_styles.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/collapse_styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,EAAE,MAmY7B,CAAC"}

package/dist/ui/placement/panel_placement.d.ts

@@ -141,6 +141,8 @@ export declare class PanelPlacement {
      * reopen to happen: a line typed in the composer is one. A position waiting to
      * be handed back under data-launcher-drag="false" waits on, because a panel that leaves for the
      * host's corner as the reader starts typing is a jump with no cause they can see.
+     * It waits no longer than the panel stays on the screen: a host's size can stand
+     * it off an edge, where its header is out of reach until something else happens.
      */
     settleLauncherPosition(): void;
     /**

package/dist/ui/placement/panel_placement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel_placement.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/panel_placement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAsJlD;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC5B,uEAAuE;IACvE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,8EAA8E;IAC9E,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACrC,uDAAuD;IACvD,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,EAAE,MAAM,OAAO,CAAC;IAClC,uCAAuC;IACvC,QAAQ,CAAC,SAAS,EAAE,MAAM,OAAO,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,WAAW,EAAE,MAAM,OAAO,CAAC;IACpC,iCAAiC;IACjC,QAAQ,CAAC,OAAO,EAAE,MAAM,SAAS,CAAC;IAClC,qDAAqD;IACrD,QAAQ,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzD,kDAAkD;IAClD,QAAQ,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,iDAAiD;IACjD,QAAQ,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,uEAAuE;IACvE,QAAQ,CAAC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1E;AAED;;;;;;;GAOG;AACH,qBAAa,cAAc;;IAGzB,YAAY,IAAI,EAAE,aAAa,EAE9B;IAED;;;OAGG;IACH,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAQzC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAS5C;IAED,mFAAmF;IACnF,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA+BxC;IAED,sDAAsD;IACtD,WAAW,IAAI,IAAI,CAElB;IAED;;;;;;;;;OASG;IACH,SAAS,IAAI,IAAI,CAiBhB;IA2CD;;;;OAIG;IACH,QAAQ,CAAC,KAAK,iBAAiC;IA8H/C;;;;;;;;OAQG;IACH,QAAQ,IAAI,OAAO,CAOlB;IAED,+EAA+E;IAC/E,eAAe,IAAI,iBAAiB,CA8BnC;IAED,oEAAoE;IACpE,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE;QAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAO,GAAG,OAAO,CAmDjF;IAqJD,sEAAsE;IACtE,gBAAgB,IAAI,IAAI,CAavB;IAsDD;;;;;;OAMG;IACH,gBAAgB,IAAI,IAAI,CAQvB;IAiBD;;;;;;;;;OASG;IACH,QAAQ,CAAC,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,CA8BzD;IA2LD;;;;;;;;;;;;OAYG;IACH,qBAAqB,IAAI,IAAI,CAgD5B;IAyQD;;;;;;;;OAQG;IACH,uBAAuB,IAAI,IAAI,CAG9B;IAED;;;;;OAKG;IACH,sBAAsB,IAAI,IAAI,CAG7B;IAsJD;;;;OAIG;IACH,uBAAuB,IAAI,IAAI,CAY9B;CAyJF"}
+{"version":3,"file":"panel_placement.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/panel_placement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAsJlD;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC5B,uEAAuE;IACvE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,8EAA8E;IAC9E,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACrC,uDAAuD;IACvD,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,EAAE,MAAM,OAAO,CAAC;IAClC,uCAAuC;IACvC,QAAQ,CAAC,SAAS,EAAE,MAAM,OAAO,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,WAAW,EAAE,MAAM,OAAO,CAAC;IACpC,iCAAiC;IACjC,QAAQ,CAAC,OAAO,EAAE,MAAM,SAAS,CAAC;IAClC,qDAAqD;IACrD,QAAQ,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzD,kDAAkD;IAClD,QAAQ,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,iDAAiD;IACjD,QAAQ,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,uEAAuE;IACvE,QAAQ,CAAC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1E;AAED;;;;;;;GAOG;AACH,qBAAa,cAAc;;IAGzB,YAAY,IAAI,EAAE,aAAa,EAE9B;IAED;;;OAGG;IACH,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAQzC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAS5C;IAED,mFAAmF;IACnF,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA+BxC;IAED,sDAAsD;IACtD,WAAW,IAAI,IAAI,CAElB;IAED;;;;;;;;;OASG;IACH,SAAS,IAAI,IAAI,CAoBhB;IA2CD;;;;OAIG;IACH,QAAQ,CAAC,KAAK,iBAAiC;IAsI/C;;;;;;;;OAQG;IACH,QAAQ,IAAI,OAAO,CAOlB;IAED,+EAA+E;IAC/E,eAAe,IAAI,iBAAiB,CA8BnC;IAED,oEAAoE;IACpE,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE;QAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAO,GAAG,OAAO,CAmDjF;IA2JD,sEAAsE;IACtE,gBAAgB,IAAI,IAAI,CAavB;IA+ED;;;;;;OAMG;IACH,gBAAgB,IAAI,IAAI,CAQvB;IAiBD;;;;;;;;;OASG;IACH,QAAQ,CAAC,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,CAkCzD;IA6PD;;;;;;;;;;;;OAYG;IACH,qBAAqB,IAAI,IAAI,CAgD5B;IAyQD;;;;;;;;OAQG;IACH,uBAAuB,IAAI,IAAI,CAG9B;IAED;;;;;;;OAOG;IACH,sBAAsB,IAAI,IAAI,CAG7B;IAgKD;;;;OAIG;IACH,uBAAuB,IAAI,IAAI,CAY9B;CAyJF"}

package/dist/ui/placement/resize_styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize_styles.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/resize_styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa,EAAE,MAwL3B,CAAC"}
+{"version":3,"file":"resize_styles.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/resize_styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa,EAAE,MAiM3B,CAAC"}

package/dist/ui/transcript/transcript_styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transcript_styles.d.ts","sourceRoot":"","sources":["../../../src/ui/transcript/transcript_styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,EAAE,MAyI/B,CAAC"}
+{"version":3,"file":"transcript_styles.d.ts","sourceRoot":"","sources":["../../../src/ui/transcript/transcript_styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,EAAE,MAsJ/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.50.0",
+  "version": "0.50.1",
   "description": "Framework-free <ag-ui-chat> Web Component over the AG-UI protocol. Drop-in chat sidebar with a pluggable client-side tool registry, DOM driver primitives, animations, and destructive-action confirmation modal.",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/ag_ui_chat.ts

@@ -665,7 +665,27 @@ export class AgUiChat extends HTMLElement {
     // sent me looking -- that was an inset measured from the wrong box -- so it
     // is a guard against a fight that had not been observed rather than a fix
     // for one that had.
-    return !this.#placement.dragging();
+    //
+    // Nor while this element has no box, which is what hiding it reports to the
+    // transcript's observer: placing measures a rect of nothing and writes an inset
+    // from it. Showing it reports again, so nothing waits on this.
+    return !this.#placement.dragging() && this.#hasBox();
+  }
+
+  /**
+   * Whether this element generates a box at all. Hidden on itself or on any ancestor
+   * it does not; a host collapsed to its launcher does, whatever its size, and that
+   * launcher still has to be placed, which is why this is not a test of the size.
+   */
+  #hasBox(): boolean {
+    return this.getClientRects().length > 0;
+  }
+
+  /** Restore for a moment that is not a viewport's, which showing this reports anyway. */
+  #restoreIfBoxed(): void {
+    if (this.#hasBox()) {
+      this.#placement.restoreLauncherPosition();
+    }
   }
 
   /** Mic button mount point (input row); the control mounts on connect when enabled. */
@@ -1567,7 +1587,7 @@ export class AgUiChat extends HTMLElement {
     requestAnimationFrame(() => {
       // Before the anchor, which the placement stamps itself once a dragged
       // position exists.
-      this.#placement.restoreLauncherPosition();
+      this.#restoreIfBoxed();
       this.#placement.syncResizeAnchor();
     });
     // Resolve the string table before rendering any chrome (defaults are the
@@ -1924,7 +1944,7 @@ export class AgUiChat extends HTMLElement {
       // Re-decide which way to open before opening: the viewport may have
       // changed since the launcher was dropped, and this corner is what the
       // panel grows from.
-      this.#placement.restoreLauncherPosition();
+      this.#restoreIfBoxed();
     }
     if (collapsed) {
       this.setAttribute("collapsed", "");
@@ -2036,7 +2056,12 @@ export class AgUiChat extends HTMLElement {
     if (!this.isConnected) {
       return;
     }
-    const height = this.#placement.syncDock(this.#dockBar, this.#resolveAnchor());
+    // With no box there is no bar drawn, which the host still hears of, and nothing to
+    // measure: syncing would place a dragged panel from a rect of nothing. Showing this
+    // element resizes the bar or the transcript, and their observers sync it then.
+    const height = this.#hasBox()
+      ? this.#placement.syncDock(this.#dockBar, this.#resolveAnchor())
+      : 0;
     if (height === this.#barHeight) {
       return;
     }

package/src/ui/placement/collapse_styles.ts

@@ -300,6 +300,14 @@ export const COLLAPSE_STYLES: string = `
   display: none;
 }
 
+/* A panel a host sized to the whole window stands on the strip, whose fixed box would
+   draw over the composer's foot. So it goes as it does on a phone, by display, so the
+   bar measures 0 and the host's padding goes with it, and the header's minimise
+   control is the way back. Collapsed, the strip is the way back, so it stays. */
+:host([data-collapsed-to="bar"][data-fills-window]:not([collapsed])) .dock-bar {
+  display: none;
+}
+
 /* History from the bar: the panel's own drawer, moved beside the bar while
    the panel is away, drawn as a popover standing on the bar's end. There is
    no backdrop; a press outside the bar closes it, as Escape does.

package/src/ui/placement/panel_placement.ts

@@ -288,6 +288,9 @@ export class PanelPlacement {
       }
       this.#dockPos = null;
       this.#storeDockPosition(null);
+      // A size the host holds does not change here, so no observer is coming to
+      // stand a panel that fills the window back on the screen.
+      this.#placeDocked();
     } else {
       this.#carrySpotWithSize(sized);
     }
@@ -387,9 +390,10 @@ export class PanelPlacement {
   #gripInset: string | null = null;
 
   /**
-   * The inset standing a panel with no spot at the start of a window a host's
-   * size fills, or null. Told apart from a host's own for the same reason, and it
-   * lasts only as long as that size does.
+   * The inset standing a panel at the start of a window a host's size fills, or
+   * null: a corner panel with no spot, or a docked one with or without one. Told
+   * apart from a host's own for the same reason, and it lasts only as long as that
+   * size does.
    */
   #fillInset: string | null = null;
 
@@ -411,6 +415,13 @@ export class PanelPlacement {
    * syncDock, which runs on every change either can make.
    */
   #dockTop = Number.POSITIVE_INFINITY;
+  /** The bar's height, as last measured: what a fill takes away when it stamps. */
+  #barHeight = 0;
+  /**
+   * What the usable box and the window measured when a fill took the bar away, and what
+   * the bar was. Null while no fill holds it. See {@link #fillRoom}.
+   */
+  #barTaken: { readonly room: number; readonly window: number; readonly bar: number } | null = null;
 
   /**
    * The corner the panel opens away from, once this element is placing itself.
@@ -490,7 +501,7 @@ export class PanelPlacement {
   describeSurface(): ChatSurfaceReport {
     const box = this.#host.element.getBoundingClientRect();
     const viewport = this.#viewport();
-    const fullBleed = coversViewport(box, viewport);
+    const fullBleed = coversViewport(box, this.#fillRoom());
     return {
       placement: this.#host.element.getAttribute("placement"),
       collapseTo: this.#surface().collapseTo,
@@ -527,7 +538,7 @@ export class PanelPlacement {
     const restore = options.announce === true ? this.#captureGeometry() : null;
     const viewport = this.#viewport();
     const box = this.#host.element.getBoundingClientRect();
-    if (coversViewport(box, viewport)) {
+    if (coversViewport(box, this.#fillRoom())) {
       return false;
     }
     const [edgeY, edgeX] = corner.split("-");
@@ -581,7 +592,9 @@ export class PanelPlacement {
    * corner is what the panel grows from, so restoring a position without it
    * puts the box back and animates it out of the wrong side. Absent values are
    * captured as absent and removed on the way back, rather than written as
-   * empty strings that would outrank the placement.
+   * empty strings that would outrank the placement. And what the inset is, because
+   * one put back with no record of having come from a grip or a fill reads as a
+   * host's own, and a phone would leave it holding the panel off the screen.
    *
    * The surface may have changed by the time of the undo, so the two halves are
    * put back apart. Both records are, always, each to its own store, so the
@@ -598,6 +611,8 @@ export class PanelPlacement {
     const panelPos = this.#panelPos;
     const dockPos = this.#dockPos ?? this.#readDockPosition();
     const expandCorner = this.#expandCorner;
+    const gripInset = this.#gripInset;
+    const fillInset = this.#fillInset;
     const cornerSpot = this.#cornerSpot ?? this.#readLauncherPosition();
     const owner = this.#positionOwner();
     return () => {
@@ -624,6 +639,8 @@ export class PanelPlacement {
         this.#launcherPos = launcherPos;
         this.#panelPos = panelPos;
         this.#expandCorner = expandCorner;
+        this.#gripInset = gripInset;
+        this.#fillInset = fillInset;
       } else {
         this.#forgetCornerPosition();
       }
@@ -746,6 +763,31 @@ export class PanelPlacement {
    */
   #stampHeader(): void {
     this.#header?.toggleAttribute("data-fills-screen", this.#fillsScreen());
+    // And for the bar and the grips, which go while it does. The next frame, because
+    // this runs inside the transcript's observer, and the bar it takes away sits
+    // above that in the tree: its own observer would be left undelivered, which the
+    // browser reports on the window, where a host's error tracking counts it.
+    const element = this.#host.element;
+    if (this.#fillsWindow() !== element.hasAttribute("data-fills-window")) {
+      requestAnimationFrame(() => {
+        const fills = this.#fillsWindow();
+        if (fills !== element.hasAttribute("data-fills-window")) {
+          this.#barTaken = fills
+            ? { room: this.#viewport().height, window: this.#screen().height, bar: this.#barHeight }
+            : null;
+          element.toggleAttribute("data-fills-window", fills);
+        }
+      });
+    }
+  }
+
+  /**
+   * Whether the panel fills the window in a placement it can move in. Not one that owns
+   * its position: full stops at the bar, so taking the bar away would make it fill the
+   * window, and that would take the bar away for good.
+   */
+  #fillsWindow(): boolean {
+    return this.#fillsScreen() && this.#surface().panelMovable;
   }
 
   /** Put a custom property back to a previous value, or remove it if there was none. */
@@ -848,6 +890,10 @@ export class PanelPlacement {
       element.style.removeProperty(DOCK_RIGHT);
     }
     element.toggleAttribute("data-dock-anchored", target === "none" && anchor !== null);
+    this.#barHeight = height;
+    if (target !== "bar") {
+      this.#barTaken = null;
+    }
     this.#dockTop =
       target === "bar" && height > 0
         ? bar.getBoundingClientRect().top
@@ -881,19 +927,43 @@ export class PanelPlacement {
    * block reads the host's inset before its own, so a dragged spot written
    * there would hold the panel off the screen's edges. The spot itself stays,
    * for the next time there is room for it.
+   *
+   * A host's size that makes the panel the window hangs it off the resting inset's
+   * far side, past the top of the window with the header on it under the bar, so
+   * it stands at the start of the room instead, moved or not, as a corner panel
+   * does, and the stylesheet takes the bar away for as long as it does. A placement
+   * that owns its position keeps it, whatever the host's size.
+   *
+   * Under data-launcher-drag="false" a spot from before the attribute is left alone
+   * while the panel is on the screen, as a corner panel's is, and the record stays
+   * for the day the attribute comes off.
    */
   #placeDocked(): void {
-    if (!this.#docked() || !this.#panelMovable() || this.dragging()) {
+    if (!this.#docked() || !this.#surface().panelMovable || this.dragging()) {
       return;
     }
-    const at = this.#dockPos ?? this.#readDockPosition();
+    const element = this.#host.element;
+    const at = this.#panelMovable() ? (this.#dockPos ?? this.#readDockPosition()) : null;
     if (at === null) {
+      if (this.#dockPos !== null) {
+        const filling = element.style.getPropertyValue("--ag-ui-inset") === this.#fillInset;
+        if (!filling && !this.#offScreen()) {
+          return;
+        }
+        this.#dockPos = null;
+        element.style.removeProperty("--ag-ui-inset");
+      }
+      this.#placeUnstated();
       return;
     }
     this.#dockPos = at;
-    this.#host.element.style.removeProperty("--ag-ui-inset");
-    const rest = this.#host.element.getBoundingClientRect();
-    if (coversViewport(rest, this.#viewport())) {
+    element.style.removeProperty("--ag-ui-inset");
+    const rest = element.getBoundingClientRect();
+    const viewport = this.#viewport();
+    if (coversViewport(rest, this.#fillRoom())) {
+      if (hangsOff(rest, viewport, this.#screen())) {
+        this.#standAtStart(rest);
+      }
       return;
     }
     // Measured at the dock, so the inset below is written from the corner the
@@ -960,7 +1030,49 @@ export class PanelPlacement {
 
   /** Whether the panel covers the usable viewport, as it stands now. */
   #fillsScreen(): boolean {
-    return coversViewport(this.#host.element.getBoundingClientRect(), this.#viewport());
+    return coversViewport(this.#host.element.getBoundingClientRect(), this.#fillRoom());
+  }
+
+  /**
+   * The box a fill is judged against: the usable one, unless taking the bar away is
+   * what grew it.
+   *
+   * A host can write the bar's height into the inset it reserves. The panel fills the
+   * box that leaves, so the bar goes, the height says 0, the host writes that, the box
+   * grows by what the bar took, and the panel no longer fills it. Judged against that,
+   * the bar comes back and it all goes round again every frame without end. So on the
+   * same window, a box grown by the bar's height is the box it was, and the panel
+   * stands where it stood with the bar gone. Grown by anything else, or on a window of
+   * another size, it is a change of the host's or the reader's and is judged as one.
+   * The slack is the pixel a host rounding the height up can add.
+   */
+  #fillRoom(): ViewportBox {
+    const viewport = this.#viewport();
+    const taken = this.#barTaken;
+    if (
+      taken !== null &&
+      taken.window === this.#screen().height &&
+      Math.abs(viewport.height - taken.room - taken.bar) <= 1
+    ) {
+      return { ...viewport, height: taken.room };
+    }
+    return viewport;
+  }
+
+  /**
+   * Whether the panel stands off an edge of the screen, as it stands now.
+   *
+   * The screen rather than the usable box: a panel under chrome the host reserved
+   * has its controls where the host can still bring them back, and is not what a
+   * position kept under data-launcher-drag="false" has to give way to.
+   */
+  #offScreen(): boolean {
+    const screen = this.#screen();
+    return hangsOff(
+      this.#host.element.getBoundingClientRect(),
+      { left: 0, top: 0, ...screen },
+      screen,
+    );
   }
 
   /**
@@ -1392,6 +1504,8 @@ export class PanelPlacement {
    * reopen to happen: a line typed in the composer is one. A position waiting to
    * be handed back under data-launcher-drag="false" waits on, because a panel that leaves for the
    * host's corner as the reader starts typing is a jump with no cause they can see.
+   * It waits no longer than the panel stays on the screen: a host's size can stand
+   * it off an edge, where its header is out of reach until something else happens.
    */
   settleLauncherPosition(): void {
     this.#placeFromRecord(false);
@@ -1417,7 +1531,7 @@ export class PanelPlacement {
     // interaction, like every other answer here.
     const draggable = this.#launcherDraggable();
     if (!draggable && this.#launcherPos !== null) {
-      if (!handBack) {
+      if (!handBack && !this.#offScreen()) {
         return;
       }
       this.releaseLauncherPosition();
@@ -1485,8 +1599,9 @@ export class PanelPlacement {
   }
 
   /**
-   * Place a corner panel that has no spot, the half of {@link #standFullBleed}
-   * with nothing stated to keep and no launcher of its own to measure.
+   * Place a panel that has no spot, a corner one or a docked one, the half of
+   * {@link #standFullBleed} with nothing stated to keep and no launcher of its own
+   * to measure.
    *
    * Only an inset this element wrote comes off or goes back. One the host wrote
    * inline is a token a host may state on a phone as anywhere else, and with no
@@ -1496,7 +1611,7 @@ export class PanelPlacement {
     const element = this.#host.element;
     const inline = element.style.getPropertyValue("--ag-ui-inset");
     const viewport = this.#viewport();
-    if (!coversViewport(element.getBoundingClientRect(), viewport)) {
+    if (!coversViewport(element.getBoundingClientRect(), this.#fillRoom())) {
       if (inline === "" || inline === this.#fillInset) {
         this.#restoreProperty("--ag-ui-inset", this.#gripInset ?? "");
         this.syncResizeAnchor();
@@ -1513,12 +1628,21 @@ export class PanelPlacement {
       element.style.getPropertyValue("--ag-ui-inset") === "" &&
       hangsOff(rest, viewport, screen)
     ) {
-      this.#fillInset = insetFrom({ x: "left", y: "top" }, atStartOf(viewport, rest), screen);
-      element.style.setProperty("--ag-ui-inset", this.#fillInset);
-      this.syncResizeAnchor();
+      this.#standAtStart(rest);
     }
   }
 
+  /** Stand a box a host's size fills at the start of the room the host left free. */
+  #standAtStart(rest: PanelRect): void {
+    this.#fillInset = insetFrom(
+      { x: "left", y: "top" },
+      atStartOf(this.#viewport(), rest),
+      this.#screen(),
+    );
+    this.#host.element.style.setProperty("--ag-ui-inset", this.#fillInset);
+    this.syncResizeAnchor();
+  }
+
   /** The persisted position for this instance, or null. */
   #readLauncherPosition(): CornerSpot | null {
     const raw = this.#host.readPreference(LAUNCHER_KEY);

package/src/ui/placement/resize_styles.ts

@@ -90,6 +90,15 @@ export const RESIZE_STYLES: string = `
   bottom: 0;
 }
 
+/* A docked panel a host sized to the whole window has nothing to give a grip: its size
+   is the host's, and a place a grip left would outlast that size with the bar back
+   under it. They go as they do on a phone. A corner panel keeps them, since it has no
+   bar to stand clear of and a grip's place is its own. */
+:host([data-collapsed-to="bar"][data-fills-window]) .resize-handle,
+:host([data-collapsed-to="none"][data-fills-window]) .resize-handle {
+  display: none;
+}
+
 /* Docked: the placement owns the height, so the horizontal edges and every
    corner are inert and must not advertise a drag that does nothing. The two
    vertical edges remain, which is the same affordance these placements had

package/src/ui/transcript/transcript_styles.ts

@@ -97,7 +97,18 @@ export const TRANSCRIPT_STYLES: string = `
 
    visibility rather than display: none, because a box that generates no
    layout has no used values to read. Zero-sized, absolutely positioned and
-   inert, so it costs nothing but the read. */
+   inert, so it costs nothing but the read.
+
+   The padding gives that box the size of the tokens, which a card narrower than
+   one of them would scroll to reach. Scrollable overflow counts a box as its
+   transform draws it, so a scale of nothing takes it out of that count on every
+   side and in either direction, and leaves what is read: the padding's used values,
+   and the containing block a percentage resolves against. Position fixed would add
+   no scroll either, and would change that block.
+
+   From its own corner, which is inside whatever holds it where the centre of the
+   padding need not be: kept for an engine that counts a point with no area. Chromium
+   does not, so the suite cannot pin the origin. */
 .viewport-probe {
   position: absolute;
   top: 0;
@@ -106,6 +117,8 @@ export const TRANSCRIPT_STYLES: string = `
   height: 0;
   visibility: hidden;
   pointer-events: none;
+  transform: scale(0);
+  transform-origin: 0 0;
   padding: var(--_viewport-inset-top) var(--_viewport-inset-right)
     var(--_viewport-inset-bottom) var(--_viewport-inset-left);
 }

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.50.0";
+export const VERSION: string = "0.50.1";