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

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,46 @@ var PanelPlacement = class {
       }
       this.#dockPos = null;
       this.#storeDockPosition(null);
+    } 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 +6072,32 @@ 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 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.
+   */
+  #fillInset = null;
   /**
    * Where the user dragged a docked panel, in viewport coordinates, or null
    * while it stands on the bar or the anchor.
@@ -6042,6 +6126,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,10 +6164,12 @@ 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() {
@@ -6092,11 +6182,12 @@ var PanelPlacement = class {
       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),
@@ -6163,6 +6254,13 @@ var PanelPlacement = class {
    * 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.
+   *
+   * 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 +6268,44 @@ 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 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;
+      } 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 +6366,18 @@ 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());
   }
   /** Put a custom property back to a previous value, or remove it if there was none. */
   #restoreProperty(name, value) {
@@ -6427,15 +6548,16 @@ 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.#docked() || !coversViewport(this.#host.element.getBoundingClientRect(), this.#viewport());
+    return this.#panelMovable() && !this.#fillsScreen();
+  }
+  /** Whether the panel covers the usable viewport, as it stands now. */
+  #fillsScreen() {
+    return coversViewport(this.#host.element.getBoundingClientRect(), this.#viewport());
   }
   /**
    * Whether this placement lets the launcher be dragged, read per interaction
@@ -6568,9 +6690,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 +6710,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 +6815,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 +6840,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 +6850,140 @@ 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.
+   */
+  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) {
+        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 corner panel that has no spot, 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(), viewport)) {
+      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.#fillInset = insetFrom({ x: "left", y: "top" }, atStartOf(viewport, rest), screen);
+      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 +7018,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 +7062,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) {
@@ -10706,6 +10940,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 +10998,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 +11022,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 +11108,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 +11561,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 +11648,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 +11806,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 +11927,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 +12078,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 +12207,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);
@@ -19847,13 +20094,26 @@ var AgUiChat = class extends HTMLElement {
    * a field so `removeEventListener` on disconnect gets the same reference.
    */
   #onViewportResize = () => {
-    this.#placement.publishVisualViewport();
-    this.#syncDock();
-    if (this.#placement.dragging()) {
-      return;
+    if (this.#readyToPlace()) {
+      this.#placement.restoreLauncherPosition();
     }
-    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();
+    return !this.#placement.dragging();
+  }
   /** 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. */
@@ -20646,6 +20906,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(
@@ -21578,6 +21844,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 +22493,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.49.0";
+var VERSION = "0.50.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,