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

package/dist/index.js

@@ -5895,6 +5895,18 @@ function asPoint(value) {
 function coversViewport(box, viewport) {
   return box.width >= viewport.width - 1 && box.height >= viewport.height - 1;
 }
+function hangsOff(box, viewport, screen) {
+  const slack = 0.5;
+  return box.left < viewport.left - slack || box.top < viewport.top - slack || box.right > screen.width + slack || box.bottom > screen.height + slack;
+}
+function atStartOf(viewport, box) {
+  return {
+    left: viewport.left,
+    top: viewport.top,
+    right: viewport.left + (box.right - box.left),
+    bottom: viewport.top + (box.bottom - box.top)
+  };
+}
 function insetFrom(corner, box, screen) {
   const side = (value) => `${Math.round(value)}px`;
   return [
@@ -5924,6 +5936,7 @@ var PanelPlacement = class {
    * header on screen, and the launcher is the handle then.
    */
   enablePanelDrag(header) {
+    this.#header = header;
     enablePanelDrag(header, {
       enabled: () => !this.#host.collapsed() && this.#canDragPanel(),
       rect: () => this.#host.element.getBoundingClientRect(),
@@ -5948,12 +5961,19 @@ var PanelPlacement = class {
   }
   /** Build the eight resize grips into `chat`, with one of them in the tab order. */
   mountResizeGrips(chat) {
+    this.#resizing = false;
     for (const grip of RESIZE_GRIPS) {
       const handle = createResizeHandle(grip, {
         axis: () => this.#resizeAxis(),
         rect: () => this.#host.element.getBoundingClientRect(),
-        apply: (box) => this.#applyResize(grip, box),
-        commit: (box) => this.#commitResize(grip, box),
+        apply: (box) => {
+          this.#resizing = true;
+          this.#applyResize(grip, box);
+        },
+        commit: (box) => {
+          this.#resizing = false;
+          this.#commitResize(grip, box);
+        },
         label: this.#host.strings().resizePanel
       });
       handle.tabIndex = -1;
@@ -5978,6 +5998,7 @@ var PanelPlacement = class {
    * it always has.
    */
   resetSize() {
+    const sized = this.#host.element.getBoundingClientRect();
     this.#host.element.style.removeProperty(DRAG_WIDTH);
     this.#host.element.style.removeProperty(DRAG_HEIGHT);
     this.#host.clearPreference(SIZE_KEY);
@@ -5987,9 +6008,47 @@ var PanelPlacement = class {
       }
       this.#dockPos = null;
       this.#storeDockPosition(null);
+      this.#placeDocked();
+    } else {
+      this.#carrySpotWithSize(sized);
     }
     this.syncResizeAnchor();
   }
+  /**
+   * Carry a stated corner spot along with a dragged size coming off.
+   *
+   * The size comes off toward the corner the layout holds still, so the top-left
+   * the spot is kept as moves with it, and a restore from the old one would swing
+   * the panel away from its launcher. Only that movement goes onto the spot, not
+   * where the box stands: in a window narrower than the spot the box is held
+   * short of it, and that is not something the user stated.
+   *
+   * Left alone while a host's own size is in force, because that cannot be told
+   * from the dragged size coming off, and it may be a state the host is about to
+   * leave: counting it would throw the spot off by as much as that state is
+   * bigger. A panel that is the screen needs no case of its own: the small-viewport
+   * block ignores a dragged size, so its box does not move.
+   *
+   * Left alone too under data-launcher-drag="false", where a spot left over from
+   * before the attribute is a record kept for the day it comes off, and nothing
+   * that happens to the box now is a statement about it.
+   */
+  #carrySpotWithSize(sized) {
+    const element = this.#host.element;
+    const box = element.getBoundingClientRect();
+    const spot = this.#cornerSpot ?? this.#readLauncherPosition();
+    const style = getComputedStyle(element);
+    if (spot?.panel === void 0 || !this.#launcherDraggable() || style.getPropertyValue("--ag-ui-width") !== "" || style.getPropertyValue("--ag-ui-height") !== "") {
+      return;
+    }
+    this.#writeCornerSpot({
+      ...spot,
+      panel: {
+        left: spot.panel.left + box.left - sized.left,
+        top: spot.panel.top + box.top - sized.top
+      }
+    });
+  }
   /**
    * A zero-sized box carrying the host's viewport insets as padding, so they
    * can be read back as used pixel lengths. See the `.viewport-probe` rule for
@@ -6014,6 +6073,33 @@ var PanelPlacement = class {
    * from the launcher would move the panel the user just placed.
    */
   #panelPos = null;
+  /**
+   * The spot #launcherPos and #panelPos were last stated as, or null while
+   * nothing has been stated since this element connected.
+   *
+   * Those two say where the launcher and the panel stand now, held inside the
+   * viewport, because that is where a press finds them and a drag starts from.
+   * This is what the user asked for, kept apart so that a window narrower than
+   * the spot, or a phone that took the panel full-bleed, gives it back unchanged
+   * once there is room again. Only a gesture, a move or a dragged size coming off
+   * changes it; re-applying it against a viewport never does, which is the difference from a clamped
+   * position quietly becoming the record one resize at a time.
+   */
+  #cornerSpot = null;
+  /**
+   * The inset a grip wrote on a corner panel with no spot, or null. A grip on an
+   * edge the layout holds moves the panel without stating a spot, so this is the
+   * only way to tell its inline inset from one a host wrote there, which stays,
+   * and to give it back once a phone has taken the panel full-bleed.
+   */
+  #gripInset = null;
+  /**
+   * 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 = null;
   /**
    * Where the user dragged a docked panel, in viewport coordinates, or null
    * while it stands on the bar or the anchor.
@@ -6031,6 +6117,13 @@ var PanelPlacement = class {
    * 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 = null;
   /**
    * The corner the panel opens away from, once this element is placing itself.
    * Null means the host's layout still decides, and the anchor is measured.
@@ -6042,6 +6135,10 @@ var PanelPlacement = class {
    * second while the panel is already being laid out on every one of them.
    */
   #anchor = { x: "right", y: "bottom" };
+  /** The header the panel drag listens on, stamped by #stampHeader. */
+  #header = null;
+  /** Whether a grip has applied a box it has not committed yet. */
+  #resizing = false;
   /** The eight grips, by name, so the keyboard-reachable one can be moved. */
   #resizeHandles = /* @__PURE__ */ new Map();
   /**
@@ -6076,27 +6173,30 @@ var PanelPlacement = class {
    *
    * Read from the stamp the drag helpers already set, rather than tracked
    * separately: one source of truth, and it clears on `pointercancel` as well
-   * as `pointerup`, which is the end a touch gesture usually gets.
+   * as `pointerup`, which is the end a touch gesture usually gets. The one
+   * gesture that stamps nothing is an arrow key on a grip, which applies a box
+   * per key and states it only when the key comes up, hence #resizing.
    */
   dragging() {
-    return this.#host.launcher.hasAttribute("data-dragging") || this.#host.root.querySelector(".header[data-dragging]") !== null;
+    return this.#resizing || this.#host.launcher.hasAttribute("data-dragging") || this.#host.root.querySelector(".header[data-dragging], .resize-handle[data-dragging]") !== null;
   }
   /** The report behind `AgUiChat.describeSurface`, whose doc is the contract. */
   describeSurface() {
     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,
       collapsed: this.#host.collapsed(),
       collapsible: this.#host.collapsible(),
       movable: this.#panelMovable() && !fullBleed,
-      // Whether the page left moving on, which is not the same question as
-      // whether this panel moves: a docked sidebar's position is owned by its
-      // placement, and reporting that as the host having turned moving off is
-      // the sentence the move refusal would then get wrong.
-      draggable: this.#host.element.getAttribute("data-launcher-drag") !== "false" && (this.#surface().launcherDraggable || this.#docked()),
+      // The page's setting alone: true for every placement unless the host set
+      // `data-launcher-drag="false"`. Whether this panel moves is `movable`,
+      // and reading the launcher or the dock in here made the field change
+      // with `collapse-to`, so a docked sidebar reported that the page had
+      // turned moving off when the placement owned its position.
+      draggable: this.#host.element.getAttribute("data-launcher-drag") !== "false",
       fullBleed,
       box: {
         left: Math.round(box.left),
@@ -6120,7 +6220,7 @@ var PanelPlacement = class {
     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("-");
@@ -6162,7 +6262,16 @@ var PanelPlacement = class {
    * 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
+   * memory and the storage cannot disagree and the surface they belong to finds
+   * them when it comes back. The inline values only mean something to the surface
+   * they were read from: written on any other, they pin a sidebar to where a
+   * floating panel used to be.
    */
   #captureGeometry() {
     const inset2 = this.#host.element.style.getPropertyValue("--ag-ui-inset");
@@ -6170,33 +6279,48 @@ var PanelPlacement = class {
     const corner = this.#host.element.getAttribute("data-expand-corner");
     const launcherPos = this.#launcherPos;
     const panelPos = this.#panelPos;
-    const dockPos = this.#dockPos;
+    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 () => {
-      this.#restoreProperty("--ag-ui-inset", inset2);
-      this.#restoreProperty("--ag-ui-launcher-inset", launcherInset);
-      if (corner === null) {
-        this.#host.element.removeAttribute("data-expand-corner");
-      } else {
-        this.#host.element.setAttribute("data-expand-corner", corner);
-      }
-      this.#launcherPos = launcherPos;
-      this.#panelPos = panelPos;
       this.#dockPos = dockPos;
-      this.#expandCorner = expandCorner;
-      if (this.#docked()) {
-        this.#storeDockPosition(dockPos);
-        this.syncResizeAnchor();
-        return;
-      }
-      if (launcherPos === null) {
+      this.#storeDockPosition(dockPos);
+      if (cornerSpot === null) {
+        this.#cornerSpot = null;
         this.#host.clearPreference(LAUNCHER_KEY);
       } else {
-        this.#storeLauncherPosition();
+        this.#writeCornerSpot(cornerSpot);
+      }
+      if (owner === this.#positionOwner()) {
+        this.#restoreProperty("--ag-ui-inset", inset2);
+        this.#restoreProperty("--ag-ui-launcher-inset", launcherInset);
+        if (corner === null) {
+          this.#host.element.removeAttribute("data-expand-corner");
+        } else {
+          this.#host.element.setAttribute("data-expand-corner", corner);
+        }
+        this.#launcherPos = launcherPos;
+        this.#panelPos = panelPos;
+        this.#expandCorner = expandCorner;
+        this.#gripInset = gripInset;
+        this.#fillInset = fillInset;
+      } else {
+        this.#forgetCornerPosition();
       }
+      this.restoreLauncherPosition();
       this.syncResizeAnchor();
     };
   }
+  /** Which of the three kinds of surface decides where the panel stands. */
+  #positionOwner() {
+    if (this.#docked()) {
+      return "dock";
+    }
+    return this.#surface().launcherDraggable ? "corner" : "placement";
+  }
   /**
    * Which axes the current placement allows.
    *
@@ -6257,6 +6381,36 @@ var PanelPlacement = class {
     this.#anchor = anchor;
     this.#host.element.setAttribute("data-resize-anchor", `${anchor.y}-${anchor.x}`);
     this.#focusableGrip();
+    this.#stampHeader();
+  }
+  /**
+   * Tell the stylesheet whether the panel is the screen, for the header's cursor.
+   *
+   * Only this half of what refuses a header drag: the resting rules already answer
+   * for the placement and for data-launcher-drag="false", and neither of those
+   * re-applies anything when it changes, so a stamp taking them in would go on
+   * refusing, in the cursor, a drag the header would take.
+   */
+  #stampHeader() {
+    this.#header?.toggleAttribute("data-fills-screen", this.#fillsScreen());
+    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() {
+    return this.#fillsScreen() && this.#surface().panelMovable;
   }
   /** Put a custom property back to a previous value, or remove it if there was none. */
   #restoreProperty(name, value) {
@@ -6346,6 +6500,10 @@ var PanelPlacement = class {
       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 : target === "none" && anchor !== null ? anchor.getBoundingClientRect().top : Number.POSITIVE_INFINITY;
     this.#placeDocked();
     return height;
@@ -6368,19 +6526,43 @@ var PanelPlacement = class {
    * 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() {
-    if (!this.#docked() || !this.#panelMovable() || this.dragging()) {
+    if (!this.#docked() || !this.#surface().panelMovable || this.dragging()) {
       return;
     }
-    const at2 = this.#dockPos ?? this.#readDockPosition();
+    const element = this.#host.element;
+    const at2 = this.#panelMovable() ? this.#dockPos ?? this.#readDockPosition() : null;
     if (at2 === 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 = at2;
-    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;
     }
     this.syncResizeAnchor();
@@ -6427,15 +6609,52 @@ var PanelPlacement = class {
     return this.#host.element.getAttribute("data-launcher-drag") !== "false" && this.#surface().panelMovable;
   }
   /**
-   * Whether a header drag may start now. A docked panel on a phone is the
-   * screen, and a drag there would pull it off the edges it fills; a corner
-   * panel's header is left as it was.
+   * Whether a header drag may start now. A panel that is the screen, on a phone
+   * or by a host's own sizing, has nowhere to go, and a drag there would pull it
+   * off the edges it fills.
    */
   #canDragPanel() {
-    if (!this.#panelMovable()) {
-      return false;
+    return this.#panelMovable() && !this.#fillsScreen();
+  }
+  /** Whether the panel covers the usable viewport, as it stands now. */
+  #fillsScreen() {
+    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() {
+    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 !this.#docked() || !coversViewport(this.#host.element.getBoundingClientRect(), this.#viewport());
+    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() {
+    const screen = this.#screen();
+    return hangsOff(
+      this.#host.element.getBoundingClientRect(),
+      { left: 0, top: 0, ...screen },
+      screen
+    );
   }
   /**
    * Whether this placement lets the launcher be dragged, read per interaction
@@ -6568,9 +6787,6 @@ var PanelPlacement = class {
    * back rather than leaving a stale inline one behind.
    */
   #applyLauncherPlacement(at2) {
-    if (!this.#launcherDraggable()) {
-      return;
-    }
     this.#launcherPos = at2;
     this.#panelPos = null;
     const panel = this.#host.element.getBoundingClientRect();
@@ -6591,6 +6807,7 @@ var PanelPlacement = class {
   }
   /** Move the launcher live during a drag, without persisting. */
   #moveLauncher(left, top) {
+    this.#cornerSpot = { left, top };
     this.#applyLauncherPlacement({ left, top });
   }
   /** Move the launcher and remember where, per tab, like the dragged size. */
@@ -6695,9 +6912,6 @@ var PanelPlacement = class {
    * its own right.
    */
   #restorePanelPosition(at2) {
-    if (!this.#launcherDraggable()) {
-      return;
-    }
     const rect = this.#host.element.getBoundingClientRect();
     const held = clampPanel(
       { left: at2.left, top: at2.top, right: at2.left + rect.width, bottom: at2.top + rect.height },
@@ -6723,6 +6937,9 @@ var PanelPlacement = class {
    * with it, the panel goes back where it was put; without it, the panel is
    * re-derived from the launcher and opens into whatever room the viewport has
    * now.
+   *
+   * Every caller is a gesture ending or a move being made, so where the two
+   * stand now is what was stated. A restore never calls this.
    */
   #storeLauncherPosition() {
     const position = this.#launcherPos;
@@ -6730,38 +6947,151 @@ var PanelPlacement = class {
       return;
     }
     const panel = this.#panelPos;
-    this.#host.writePreference(
-      LAUNCHER_KEY,
-      JSON.stringify(panel === null ? position : { ...position, panel })
-    );
+    this.#writeCornerSpot(panel === null ? position : { ...position, panel });
+  }
+  /** Make `spot` the stated one, and remember it. */
+  #writeCornerSpot(spot) {
+    this.#cornerSpot = spot;
+    this.#host.writePreference(LAUNCHER_KEY, JSON.stringify(spot));
   }
   /**
    * Re-apply the dragged position against the current viewport: on connect,
    * whenever the window resizes, and before an expand. The viewport that
    * stored a position may since have shrunk, and a launcher past the edge is
    * unreachable -- it is the only way back to a collapsed conversation.
+   *
+   * The one gate on whether a stored position is this element's to honour: the
+   * gestures check their own before they ever reach the placing below.
    */
   restoreLauncherPosition() {
+    this.#placeFromRecord(true);
+    this.#stampHeader();
+  }
+  /**
+   * Re-apply it for a change in the panel's own layout, which needs no window or
+   * 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() {
+    this.#placeFromRecord(false);
+    this.#stampHeader();
+  }
+  /** The placing behind {@link restoreLauncherPosition}. */
+  #placeFromRecord(handBack) {
     if (this.#docked()) {
       this.#placeDocked();
       return;
     }
-    const stored = this.#readLauncherPosition();
-    const launcher = this.#launcherPos ?? stored;
-    if (launcher === null) {
+    if (!this.#surface().launcherDraggable) {
+      return;
+    }
+    const draggable = this.#launcherDraggable();
+    if (!draggable && this.#launcherPos !== null) {
+      if (!handBack && !this.#offScreen()) {
+        return;
+      }
+      this.releaseLauncherPosition();
+    }
+    const spot = draggable ? this.#cornerSpot ?? this.#readLauncherPosition() : null;
+    if (spot === null) {
+      this.#placeUnstated();
       return;
     }
-    const panel = this.#panelPos ?? stored?.panel ?? null;
-    if (panel !== null) {
-      this.#launcherPos = { left: launcher.left, top: launcher.top };
-      this.#restorePanelPosition(panel);
+    if (this.#standFullBleed(spot)) {
+      return;
+    }
+    if (spot.panel !== void 0) {
+      this.#launcherPos = { left: spot.left, top: spot.top };
+      this.#restorePanelPosition(spot.panel);
       return;
     }
     const box = this.#launcherBox();
     this.#applyLauncherPlacement(
-      clampLauncher({ ...box, left: launcher.left, top: launcher.top }, this.#viewport())
+      clampLauncher({ ...box, left: spot.left, top: spot.top }, this.#viewport())
     );
   }
+  /**
+   * Leave a corner panel full-bleed if it has become the screen, and say whether
+   * it has.
+   *
+   * The inline inset comes off, because the small-viewport block reads the
+   * host's inset before its own: a spot written there holds the panel off the
+   * edges it should fill, and past them by the same amount, since its size is
+   * the screen's. What the panel covers is read before that, from the size
+   * alone, which no inset changes.
+   *
+   * The launcher stays a place of its own. It is positioned from the host box,
+   * so it is measured again from the box that has just moved, and it is held on
+   * the screen, because it is the way back from a collapsed conversation. The
+   * spot itself is untouched, for the next time there is room for it.
+   *
+   * Above the breakpoint nothing in the stylesheet takes the panel to the edges.
+   * A host's own size makes it the screen while the resting inset still spends a
+   * gutter on one corner, which hangs the box off the opposite one, so there it
+   * stands at the start of the room the host left free and keeps that inset. A
+   * box the placement already holds on the screen has no inset to keep, which is
+   * every phone, and a host's rule that placed the box itself.
+   */
+  #standFullBleed(spot) {
+    const element = this.#host.element;
+    const viewport = this.#viewport();
+    if (!coversViewport(element.getBoundingClientRect(), viewport)) {
+      return false;
+    }
+    element.style.removeProperty("--ag-ui-inset");
+    const rest = element.getBoundingClientRect();
+    const hanging = hangsOff(rest, viewport, this.#screen());
+    const box = hanging ? atStartOf(viewport, rest) : rest;
+    const launcher = { ...this.#launcherBox(), left: spot.left, top: spot.top };
+    this.#placePanelAndLauncher(box, { ...launcher, ...clampLauncher(launcher, viewport) });
+    if (!hanging) {
+      element.style.removeProperty("--ag-ui-inset");
+    }
+    return true;
+  }
+  /**
+   * 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
+   * spot it never came from here.
+   */
+  #placeUnstated() {
+    const element = this.#host.element;
+    const inline = element.style.getPropertyValue("--ag-ui-inset");
+    const viewport = this.#viewport();
+    if (!coversViewport(element.getBoundingClientRect(), this.#fillRoom())) {
+      if (inline === "" || inline === this.#fillInset) {
+        this.#restoreProperty("--ag-ui-inset", this.#gripInset ?? "");
+        this.syncResizeAnchor();
+      }
+      this.#fillInset = null;
+      return;
+    }
+    if (inline === this.#gripInset || inline === this.#fillInset) {
+      element.style.removeProperty("--ag-ui-inset");
+    }
+    const rest = element.getBoundingClientRect();
+    const screen = this.#screen();
+    if (element.style.getPropertyValue("--ag-ui-inset") === "" && hangsOff(rest, viewport, screen)) {
+      this.#standAtStart(rest);
+    }
+  }
+  /** Stand a box a host's size fills at the start of the room the host left free. */
+  #standAtStart(rest) {
+    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() {
     const raw = this.#host.readPreference(LAUNCHER_KEY);
@@ -6796,9 +7126,15 @@ var PanelPlacement = class {
     if (this.#launcherDraggable()) {
       return;
     }
+    this.#forgetCornerPosition();
+  }
+  /** Take everything off that placed a corner panel, leaving its record alone. */
+  #forgetCornerPosition() {
     this.#launcherPos = null;
     this.#panelPos = null;
     this.#expandCorner = null;
+    this.#gripInset = null;
+    this.#fillInset = null;
     this.#host.element.style.removeProperty("--ag-ui-inset");
     this.#host.element.style.removeProperty("--ag-ui-launcher-inset");
     this.#host.element.removeAttribute("data-expand-corner");
@@ -6834,26 +7170,32 @@ var PanelPlacement = class {
     if (this.#docked()) {
       this.#dockPos = { left: box.left, top: box.top };
     }
-    if (grip.x !== this.#anchor.x && grip.y !== this.#anchor.y) {
-      return box;
-    }
-    const anchor = this.#anchor;
-    this.#host.element.style.setProperty("--ag-ui-inset", insetFrom(anchor, box, this.#screen()));
-    if (this.#launcherPos !== null) {
-      const size = this.#host.launcher.offsetWidth;
-      this.#launcherPos = {
-        left: anchor.x === "left" ? box.left : box.right - size,
-        top: anchor.y === "top" ? box.top : box.bottom - size
-      };
+    if (grip.x === this.#anchor.x || grip.y === this.#anchor.y) {
+      const anchor = this.#anchor;
+      const inset2 = insetFrom(anchor, box, this.#screen());
+      this.#host.element.style.setProperty("--ag-ui-inset", inset2);
+      this.#gripInset = this.#launcherPos === null && !this.#docked() ? inset2 : null;
+      if (this.#launcherPos !== null) {
+        const size = this.#host.launcher.offsetWidth;
+        this.#launcherPos = {
+          left: anchor.x === "left" ? box.left : box.right - size,
+          top: anchor.y === "top" ? box.top : box.bottom - size
+        };
+      }
     }
-    if (this.#panelPos !== null) {
-      this.#panelPos = { left: box.left, top: box.top };
+    if (this.#panelPos !== null && !this.#docked()) {
+      const drawn = this.#host.element.getBoundingClientRect();
+      this.#panelPos = { left: drawn.left, top: drawn.top };
     }
     return box;
   }
   /** Finish a resize: keep the box, remember it, and re-read the pinned edges. */
   #commitResize(grip, box) {
     const held = this.#applyResize(grip, box);
+    if (this.#host.element.style.getPropertyValue("--ag-ui-inset") === this.#fillInset) {
+      this.#gripInset = this.#fillInset;
+      this.#fillInset = null;
+    }
     this.#persistSize({ width: held.right - held.left, height: held.bottom - held.top });
     this.#storeLauncherPosition();
     if (this.#dockPos !== null) {
@@ -9001,6 +9343,14 @@ var COLLAPSE_STYLES = `
   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.
@@ -9553,6 +9903,15 @@ var RESIZE_STYLES = `
   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
@@ -10706,6 +11065,15 @@ var FRAME_STYLES = `
   touch-action: auto;
 }
 
+/* A panel that is the screen has nowhere to go, so its header refuses the drag
+   and must not offer it. No selector can see that a host has sized the panel to
+   the window, so the placement stamps this from the measurement that refuses the
+   drag. :host is carried for the specificity, not the scope, as below. Before the
+   dragging rule, so a drag the header did take keeps its grabbing cursor. */
+:host .header[data-fills-screen] {
+  cursor: auto;
+}
+
 /* :host is carried for the specificity, not the scope: the placement rules
    above are a host selector plus a class plus an attribute, and a bare
    .header[data-dragging] loses to them -- silently, because the drag still
@@ -10755,6 +11123,14 @@ var FRAME_STYLES = `
   flex: none;
 }
 
+/* Under every theme: once the host sets the header text, the header behind the
+   buttons is the host's colour, so their rest opacity goes. The frame's 0.85
+   lets the header through the glyph, which took white on a mid-blue header from
+   5.1:1 to 4.2:1. With the header text set, the opacity below reads a colour,
+   which no opacity can be, so it is invalid at computed-value time and falls to
+   the initial 1; unset, it reads the fallback. The glyph is each theme's own
+   business: this inherits the header text, and a theme that draws the buttons
+   in another ink reads the same switch to yield. */
 .header-btn {
   display: inline-flex;
   flex: 0 0 auto;
@@ -10771,12 +11147,15 @@ var FRAME_STYLES = `
   padding: 0;
   border-radius: 6px;
   cursor: pointer;
-  opacity: 0.85;
+  opacity: var(--_header-fg-set, 0.85);
 }
 
+/* The square is the host's own when it set one; otherwise it is mixed from the
+   header text when the host set that, so it reads on any header the host
+   painted; otherwise it is the theme's own. See the alias in the token defaults. */
 .header-btn:hover {
   opacity: 1;
-  background: rgba(255, 255, 255, 0.18);
+  background: var(--_header-btn-hover);
 }
 `;
 
@@ -10854,18 +11233,19 @@ var TOKEN_STYLES = `
   /* Switches: a public token read with no fallback, named for it with -set.
      With the token unset the switch computes to the guaranteed-invalid value,
      so a rule that reads it with a fallback gets the fallback; that is how a
-     rule tells a token the host set from the theme's default for it. The
-     default theme's header buttons follow the header text only once a host
-     sets it, and a step group's calls follow the tool token only once a host
-     sets it (classic defaults --_tool-fg to the accent, which a group never
-     drew). */
+     rule tells a token the host set from the theme's default for it. Every
+     theme's header buttons follow the header text only once a host sets it,
+     and a step group's calls follow the tool token only once a host sets it
+     (classic defaults --_tool-fg to the accent, which a group never drew). */
   --_header-fg-set: var(--ag-ui-header-fg);
   --_tool-fg-set: var(--ag-ui-tool-fg);
   /* The header buttons' hover square, by default, once the header text is
      set. Here it is the text at about a fifth, which every browser can mix;
      where relative colour syntax is supported (see the block at the end) it
      is the text's opposite instead. It reads the switch, so it is unset with
-     it, and the square below falls to the panel's hover shade. */
+     it, and the square below falls to the theme's own: the panel's hover shade
+     here, restated by each theme that draws another, so one rule in the frame
+     paints them all. */
   --_header-btn-hover-auto: color-mix(in srgb, var(--_header-fg-set) 18%, transparent);
   --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_border: var(--ag-ui-border, var(--_line));
@@ -11306,6 +11686,7 @@ var CLASSIC_TOKENS = `
   --_tool-fg: var(--ag-ui-tool-fg, var(--_accent));
   --_header-bg: var(--ag-ui-header-bg, light-dark(var(--_accent), #1f1f30));
   --_header-fg: var(--ag-ui-header-fg, light-dark(#ffffff, #e8e8f2));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, rgba(255, 255, 255, 0.18)));
   --_border: var(--ag-ui-border, light-dark(#e2e2ec, #33334a));
   --_muted: var(--ag-ui-muted, light-dark(#6b7280, #9aa0b4));
   --_success: var(--ag-ui-success, #15803d);
@@ -11392,14 +11773,15 @@ var LEDGER_STYLES = `
   vertical-align: 1px;
 }
 
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
 :host([theme~="ledger"]) .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 3px;
 }
 
 :host([theme~="ledger"]) .header-btn:hover {
-  background: var(--_hover);
-  color: var(--_fg);
+  color: var(--_header-fg-set, var(--_fg));
 }
 
 :host([theme~="ledger"]) .message--user {
@@ -11549,6 +11931,7 @@ var LEDGER_TOKENS = `
   --_msg-radius: var(--ag-ui-msg-radius, 0px);
   --_composer-radius: var(--ag-ui-composer-radius, 4px);
   --_user-bg: var(--ag-ui-user-bg, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_frame-shadow: var(--ag-ui-frame-shadow, 0 0 0 1px var(--_line-strong), 0 20px 40px -28px rgb(0 0 0 / 0.45));
   --_launcher-bg: var(--ag-ui-launcher-bg, var(--_fg));
   --_launcher-fg: var(--ag-ui-launcher-fg, var(--_bg));
@@ -11669,28 +12052,15 @@ ${THEME_HOST.quiet} .header-title {
 
 /* The buttons sit back in the third ink on the panel. Once the host sets the
    header text they draw in it instead, since the header behind them is then
-   the host's colour (see the switches in the token defaults). So does their
-   rest opacity: the frame's 0.85 lets the header through the glyph, which
-   took white on a mid-blue header from 5.1:1 to 4.2:1. With the header text
-   set, the opacity below reads a colour, which no opacity can be, so it is
-   invalid at computed-value time and falls to the initial 1; unset, it reads
-   the fallback, the frame's own 0.85. */
+   the host's colour (see the switches in the token defaults). */
 ${THEME_HOST.quiet} .header-btn {
   color: var(--_header-fg-set, var(--_ink-3));
-  opacity: var(--_header-fg-set, 0.85);
   border-radius: 8px;
 }
 
-/* The hover square is the host's own when it set one; otherwise it is mixed
-   from the header text when the host set that, so it reads on any header the
-   host painted; otherwise it is the panel shade.
-   The glyph takes the header text, which is the full ink when that is unset.
-   The opacity restates the frame's hover value, which the rest rule above
-   outweighs. */
+/* The glyph takes the header text, which is the full ink when that is unset. */
 ${THEME_HOST.quiet} .header-btn:hover {
   color: var(--_header-fg);
-  opacity: 1;
-  background: var(--_header-btn-hover);
 }
 
 ${THEME_HOST.quiet} .message--user {
@@ -11833,14 +12203,15 @@ var SOFT_STYLES = `
   background: linear-gradient(140deg, color-mix(in oklch, var(--_accent) 55%, var(--_bg)), var(--_accent));
 }
 
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
 :host([theme~="soft"]) .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 10px;
 }
 
 :host([theme~="soft"]) .header-btn:hover {
-  background: var(--_tint-2);
-  color: var(--_accent-ink);
+  color: var(--_header-fg-set, var(--_accent-ink));
 }
 
 :host([theme~="soft"]) .messages {
@@ -11961,6 +12332,7 @@ var SOFT_TOKENS = `
   --_tint: var(--ag-ui-tint, color-mix(in oklch, var(--_accent) 5%, var(--_bg)));
   --_tint-2: var(--ag-ui-tint-2, color-mix(in oklch, var(--_accent) 13%, var(--_bg)));
   --_header-bg: var(--ag-ui-header-bg, var(--_tint));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_tint-2)));
   --_user-bg: var(--ag-ui-user-bg, var(--_tint-2));
   --_border: var(--ag-ui-border, color-mix(in oklch, var(--_accent) 14%, var(--_bg)));
   --_radius: var(--ag-ui-radius, 16px);
@@ -12778,7 +13150,18 @@ var TRANSCRIPT_STYLES = `
 
    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;
@@ -12787,6 +13170,8 @@ var TRANSCRIPT_STYLES = `
   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);
 }
@@ -19847,13 +20232,40 @@ var AgUiChat = class extends HTMLElement {
    * a field so `removeEventListener` on disconnect gets the same reference.
    */
   #onViewportResize = () => {
+    if (this.#readyToPlace()) {
+      this.#placement.restoreLauncherPosition();
+    }
+  };
+  /**
+   * The same for a change only the panel's own layout shows: a host's size, a
+   * viewport inset token, a line typed in the composer. Not a moment to hand a
+   * position back, so a panel under data-launcher-drag="false" stays put.
+   */
+  #onLayoutChange = () => {
+    if (this.#readyToPlace()) {
+      this.#placement.settleLauncherPosition();
+    }
+  };
+  /** Bring the viewport's readings up to date, and say whether placing may follow. */
+  #readyToPlace() {
     this.#placement.publishVisualViewport();
     this.#syncDock();
-    if (this.#placement.dragging()) {
-      return;
+    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() {
+    return this.getClientRects().length > 0;
+  }
+  /** Restore for a moment that is not a viewport's, which showing this reports anyway. */
+  #restoreIfBoxed() {
+    if (this.#hasBox()) {
+      this.#placement.restoreLauncherPosition();
     }
-    this.#placement.restoreLauncherPosition();
-  };
+  }
   /** Mic button mount point (input row); the control mounts on connect when enabled. */
   #voiceSlot;
   /** The composer's mic, mounted on connect when transcription is available. */
@@ -20624,7 +21036,7 @@ var AgUiChat = class extends HTMLElement {
     this.#chatRegistration.join();
     this.#placement.restoreSize();
     requestAnimationFrame(() => {
-      this.#placement.restoreLauncherPosition();
+      this.#restoreIfBoxed();
       this.#placement.syncResizeAnchor();
     });
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
@@ -20646,6 +21058,12 @@ var AgUiChat = class extends HTMLElement {
     const dockObserver = new ResizeObserver(() => this.#syncDock());
     dockObserver.observe(this.#dockBar);
     this.#connection.signal.addEventListener("abort", () => dockObserver.disconnect());
+    const layoutObserver = new ResizeObserver(this.#onLayoutChange);
+    layoutObserver.observe(this.#messages);
+    this.#connection.signal.addEventListener("abort", () => layoutObserver.disconnect());
+    this.#placement.probe.addEventListener("transitionrun", this.#onLayoutChange, {
+      signal: this.#connection.signal
+    });
     this.#syncDock();
     if (this.#surface().collapseTo === "none") {
       this.dispatchEvent(
@@ -20868,7 +21286,7 @@ var AgUiChat = class extends HTMLElement {
       this.#announceSurfaceChange(this.#strings.chatMinimised, null);
     }
     if (!collapsed) {
-      this.#placement.restoreLauncherPosition();
+      this.#restoreIfBoxed();
     }
     if (collapsed) {
       this.setAttribute("collapsed", "");
@@ -20964,7 +21382,7 @@ var AgUiChat = class extends HTMLElement {
     if (!this.isConnected) {
       return;
     }
-    const height = this.#placement.syncDock(this.#dockBar, this.#resolveAnchor());
+    const height = this.#hasBox() ? this.#placement.syncDock(this.#dockBar, this.#resolveAnchor()) : 0;
     if (height === this.#barHeight) {
       return;
     }
@@ -21578,6 +21996,8 @@ var AgUiChat = class extends HTMLElement {
     const probe = this.#placement.probe;
     probe.className = "viewport-probe";
     probe.setAttribute("aria-hidden", "true");
+    probe.style.borderRadius = "var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)";
+    probe.style.transition = "border-radius 1ms";
     this.#root.replaceChildren(probe, this.#announcer.region, this.#chat, this.#dockBar);
   }
   /**
@@ -22225,7 +22645,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.49.0";
+var VERSION = "0.50.1";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,