@artooi/agents-web-components 0.0.0-stage → 0.1.1

package/src/ui/placement/panel_placement.ts

@@ -0,0 +1,1975 @@
+import { EDGE_MARGIN, SCREEN_EDGE_MARGIN, STORAGE_ROOT } from "../../constants.js";
+import type { ChatCorner, ChatSurfaceReport } from "../../tools/chat_surface_tools.js";
+import type { UiStrings } from "../ui_strings.js";
+import { clampLauncher } from "./clamp_launcher.js";
+import { clampPanel } from "./clamp_panel.js";
+import { enableLauncherDrag } from "./launcher_drag.js";
+import {
+  type ExpandCorner,
+  type Extent,
+  type LauncherBox,
+  launcherPlacement,
+  type ViewportBox,
+} from "./launcher_placement.js";
+import { enablePanelDrag } from "./panel_drag.js";
+import { placeWidget } from "./place_widget.js";
+import {
+  createResizeHandle,
+  gripName,
+  type PanelRect,
+  type ResizeAnchor,
+  type ResizeAxis,
+  type ResizeGrip,
+  type ResizeSize,
+} from "./resize_handle.js";
+import { type Surface, surfaceFor } from "./surface_for.js";
+
+/** Persistence key for the dragged panel sizes, one per placement in one record. */
+const SIZE_KEY = `${STORAGE_ROOT}:size`;
+
+/** The stored record: a dragged size per placement attribute value. */
+interface StoredSizes {
+  readonly v: 2;
+  readonly placements: Readonly<Record<string, ResizeSize>>;
+}
+
+/**
+ * The private properties a dragged size lives in. They are not the public
+ * `--ag-ui-width` / `--ag-ui-height` tokens, which belong to the host: an
+ * inline write there outranked every host rule and was read back by the
+ * small-viewport block, so a size dragged in a wide window leaked into the
+ * phone shape. The placement rules read these before the host token; the
+ * small-viewport block does not read them at all.
+ */
+const DRAG_WIDTH = "--_drag-width";
+const DRAG_HEIGHT = "--_drag-height";
+/**
+ * How far above the bottom of the layout viewport a docked panel stands, and
+ * how far in from its right edge: the bar's height, or the host anchor's top
+ * and right. Private and written inline, like the dragged size, and read only
+ * by the dock rules; never an inline --_inset, which would outrank the phone
+ * block and keep a docked panel off full-bleed on a phone.
+ */
+const DOCK_BOTTOM = "--_dock-bottom";
+const DOCK_RIGHT = "--_dock-right";
+const DOCK_TOP = "--_dock-top";
+
+/** The side of its anchor a panel under collapse-to="none" opens on. */
+type AnchorSide = "above" | "below";
+
+/** Per-tab persistence key for a dragged launcher position. */
+const LAUNCHER_KEY = `${STORAGE_ROOT}:launcher`;
+
+/**
+ * Persistence key for where the user dragged a docked panel. Its own key, not
+ * the launcher's: a spot stored under the corner launcher describes another
+ * surface, and reading it here would open every panel away from the bar for a
+ * host that switched to the bar after its users had dragged their corner
+ * panels.
+ */
+const DOCK_KEY = `${STORAGE_ROOT}:dock`;
+
+/**
+ * Where the user last put a corner panel's launcher, and the panel itself when
+ * they stated that too. The shape the launcher's record is stored in.
+ */
+interface CornerSpot {
+  readonly left: number;
+  readonly top: number;
+  readonly panel?: { readonly left: number; readonly top: number };
+}
+
+/** A stored `{ left, top }` pair, or null for anything that is not one. */
+function asPoint(value: unknown): { readonly left: number; readonly top: number } | null {
+  if (typeof value !== "object" || value === null) {
+    return null;
+  }
+  const { left, top } = value as { left?: unknown; top?: unknown };
+  return typeof left === "number" && typeof top === "number" ? { left, top } : null;
+}
+
+/**
+ * Whether a box covers the usable viewport, which is what full-bleed means.
+ *
+ * A pixel of slack on each axis, because a box sized from `100vw` and one sized
+ * from the visual viewport disagree by sub-pixel rounding, and a panel that
+ * fills the screen must not read as one that could still be moved within it.
+ */
+function coversViewport(box: Extent, viewport: Extent): boolean {
+  return box.width >= viewport.width - 1 && box.height >= viewport.height - 1;
+}
+
+/** One edge the host reserved, read off the probe's padding. */
+function reservedEdge(style: CSSStyleDeclaration, name: string): number {
+  const value = Number.parseFloat(style.getPropertyValue(name));
+  // A detached or not-yet-rendered probe resolves to nothing at all, and
+  // reserving NaN is worse than reserving zero in every case.
+  return Number.isFinite(value) ? value : 0;
+}
+
+/**
+ * Whether a box that covers the usable viewport stands off any edge of it.
+ *
+ * The far edges are read against the layout viewport rather than the usable box,
+ * because a keyboard shortens the second and pans the panel down inside the
+ * first: a phone's full-bleed panel is correctly past the usable box's foot then,
+ * and pinning it back would put its header above the screen.
+ */
+function hangsOff(box: PanelRect, viewport: ViewportBox, screen: Extent): boolean {
+  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
+  );
+}
+
+/** A box of the same size as `box`, standing at the start of the usable viewport. */
+function atStartOf(viewport: ViewportBox, box: PanelRect): PanelRect {
+  return {
+    left: viewport.left,
+    top: viewport.top,
+    right: viewport.left + (box.right - box.left),
+    bottom: viewport.top + (box.bottom - box.top),
+  };
+}
+
+/**
+ * The `--ag-ui-inset` value that pins `box` by `corner`.
+ *
+ * Only the two sides the corner names get a length; the other two are `auto`,
+ * so the box keeps its size and grows away from that corner. Right and bottom
+ * are measured from `screen`, the layout viewport, because that is what the
+ * browser measures a fixed element's inset from.
+ */
+function insetFrom(corner: ResizeAnchor, box: PanelRect, screen: Extent): string {
+  const side = (value: number): string => `${Math.round(value)}px`;
+  return [
+    corner.y === "top" ? side(box.top) : "auto",
+    corner.x === "right" ? side(screen.width - box.right) : "auto",
+    corner.y === "bottom" ? side(screen.height - box.bottom) : "auto",
+    corner.x === "left" ? side(box.left) : "auto",
+  ].join(" ");
+}
+
+/**
+ * Every edge and corner the panel can be dragged by. Corners last, so they sit
+ * above the edge strips they overlap and win the pointer at the corners.
+ */
+const RESIZE_GRIPS: readonly ResizeGrip[] = [
+  { y: "top" },
+  { y: "bottom" },
+  { x: "left" },
+  { x: "right" },
+  { x: "left", y: "top" },
+  { x: "right", y: "top" },
+  { x: "left", y: "bottom" },
+  { x: "right", y: "bottom" },
+];
+
+/**
+ * What the placement needs from the element that owns it.
+ *
+ * Everything the element keeps private is reached through a thunk here, the
+ * same shape `PanelDragOptions` and `ResizeOptions` already give their hosts:
+ * read per call, so a value the element replaces later (the resolved string
+ * table, the connected flag) is never captured stale.
+ */
+export interface PlacementHost {
+  /** The custom element itself: its inline style, attributes and box. */
+  readonly element: HTMLElement;
+  /** The collapsed widget's button, which a drag moves and a resize carries. */
+  readonly launcher: HTMLButtonElement;
+  /** The shadow root, searched for a header mid-drag. */
+  readonly root: ShadowRoot;
+  /** Whether the element is in the document. */
+  readonly connected: () => boolean;
+  /** Whether the widget is collapsed. */
+  readonly collapsed: () => boolean;
+  /** Whether the current placement has a collapsed state at all. */
+  readonly collapsible: () => boolean;
+  /** The resolved string table. */
+  readonly strings: () => UiStrings;
+  /** Read a layout preference, durable store first. */
+  readonly readPreference: (base: string) => string | null;
+  /** Persist a layout preference to both stores. */
+  readonly writePreference: (base: string, value: string) => void;
+  /** Drop a layout preference from both stores. */
+  readonly clearPreference: (base: string) => void;
+  /** Tell the reader the agent moved their window, with the way back. */
+  readonly announceSurfaceChange: (text: string, undo: () => void) => void;
+}
+
+/**
+ * Where the panel and its launcher sit, and how big the panel is: the dragged
+ * launcher, the dragged header, the eight resize grips, the corner the panel
+ * opens from, and the persisted record of all of it.
+ *
+ * Owned one-to-one by an `<ag-ui-chat>`, and holding no state outside the
+ * instance, so two elements on a page place themselves independently.
+ */
+export class PanelPlacement {
+  readonly #host: PlacementHost;
+
+  constructor(host: PlacementHost) {
+    this.#host = host;
+  }
+
+  /**
+   * Make the header a title bar. Only while open: a collapsed widget has no
+   * header on screen, and the launcher is the handle then.
+   */
+  enablePanelDrag(header: HTMLElement): void {
+    this.#header = header;
+    enablePanelDrag(header, {
+      enabled: () => !this.#host.collapsed() && this.#canDragPanel(),
+      rect: () => this.#host.element.getBoundingClientRect(),
+      apply: (box, from) => this.#movePanel(box, from),
+      commit: (box, from) => this.#commitPanel(box, from),
+    });
+  }
+
+  /**
+   * Let the launcher be dragged. Only while collapsed: the launcher is scaled
+   * away and unclickable behind the open panel, so a drag there would move
+   * something nobody can see.
+   */
+  enableLauncherDrag(signal: AbortSignal): void {
+    enableLauncherDrag(this.#host.launcher, {
+      signal,
+      enabled: () => this.#host.collapsed() && this.#launcherDraggable(),
+      rect: () => this.#launcherBox(),
+      viewport: () => this.#viewport(),
+      apply: (left, top) => this.#moveLauncher(left, top),
+      commit: (left, top) => this.#commitLauncher(left, top),
+    });
+  }
+
+  /** Build the eight resize grips into `chat`, with one of them in the tab order. */
+  mountResizeGrips(chat: HTMLElement): void {
+    // The grips a key gesture was on are gone, and a key that comes up on nothing
+    // ends nothing, so an element taken out mid-gesture would otherwise come back
+    // deaf to every window resize.
+    this.#resizing = false;
+    for (const grip of RESIZE_GRIPS) {
+      const handle = createResizeHandle(grip, {
+        axis: () => this.#resizeAxis(),
+        rect: () => this.#host.element.getBoundingClientRect(),
+        apply: (box) => {
+          this.#resizing = true;
+          this.#applyResize(grip, box);
+        },
+        commit: (box) => {
+          this.#resizing = false;
+          this.#commitResize(grip, box);
+        },
+        label: this.#host.strings().resizePanel,
+      });
+      // Only one of the eight is in the tab order: eight separators between the
+      // transcript and the composer would be an obstacle, and one grip reaches
+      // both axes. syncResizeAnchor picks the free corner, so an arrow key grows
+      // the panel rather than moving it.
+      handle.tabIndex = -1;
+      handle.setAttribute("aria-hidden", "true");
+      this.#resizeHandles.set(gripName(grip), handle);
+      chat.appendChild(handle);
+    }
+    this.#focusableGrip();
+  }
+
+  /** Restore the current placement's dragged size before the panel paints. */
+  restoreSize(): void {
+    // A reconnect may find the stored size gone, and a size kept inline would outlive it.
+    this.#host.element.style.removeProperty(DRAG_WIDTH);
+    this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    this.#applySize(this.#readSize());
+  }
+
+  /**
+   * Swap the dragged size for the one stored under the placement just set, so a
+   * floating drag never sizes a sidebar. Between two corner placements a stated
+   * spot moves with the size, as on resetSize, so the launcher keeps its corner.
+   * Before connect the namespace is unclaimed, and connect restores the size.
+   */
+  switchPlacement(previous: string | null): void {
+    const element = this.#host.element;
+    const sized = element.getBoundingClientRect();
+    element.style.removeProperty(DRAG_WIDTH);
+    element.style.removeProperty(DRAG_HEIGHT);
+    if (!this.#host.connected()) {
+      return;
+    }
+    this.#applySize(this.#readSize());
+    if (surfaceFor(previous, element.getAttribute("collapse-to")).launcherDraggable) {
+      this.#carrySpotWithSize(sized);
+    }
+  }
+
+  /**
+   * Drop the current placement's dragged size and its stored copy, so the
+   * placement's own size and the host's tokens apply again; other placements
+   * keep theirs. For a host entering a sized state of its
+   * own, which a user's drag would otherwise outrank.
+   *
+   * A docked panel the user dragged off its dock goes back to it as well, and
+   * the stored spot with it: there the position is part of the same resting
+   * state the host is asking for. A corner panel keeps a dragged position, as
+   * it always has.
+   */
+  resetSize(): void {
+    const sized = this.#host.element.getBoundingClientRect();
+    this.#host.element.style.removeProperty(DRAG_WIDTH);
+    this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    this.#writeSizes(this.#bucket(), null);
+    if (this.#docked()) {
+      if (this.#dockPos !== null) {
+        this.#host.element.style.removeProperty("--ag-ui-inset");
+      }
+      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);
+    }
+    // The anchor was measured against the dragged box; the resting one may
+    // pin different edges.
+    this.syncResizeAnchor();
+  }
+
+  /**
+   * Stand the larger panel back on the screen once the element has stamped the
+   * maximized state, whose rules size the box outright, over any dragged size
+   * still held inline. The stored size and every stored spot are kept: restore
+   * puts them back.
+   */
+  enterMaximized(): void {
+    this.#replace();
+  }
+
+  /** Put the stored size back once the element has left the maximized state. */
+  leaveMaximized(): void {
+    this.restoreSize();
+    this.#replace();
+  }
+
+  /** Re-place the panel from the record after its size changed under it. */
+  #replace(): void {
+    if (this.#docked()) {
+      this.#placeDocked();
+    } else {
+      this.restoreLauncherPosition();
+    }
+    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: DOMRect): void {
+    const element = this.#host.element;
+    const box = element.getBoundingClientRect();
+    const spot = this.#cornerSpot ?? this.#readLauncherPosition();
+    const style = getComputedStyle(element);
+    if (
+      spot?.panel === undefined ||
+      !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
+   * why a custom property cannot be read directly.
+   */
+  readonly probe = document.createElement("div");
+
+  /**
+   * Where the user dragged the launcher, in viewport coordinates, or null
+   * while the host's own CSS still places it. Set means this element owns its
+   * position -- see #applyLauncherPlacement for what that costs the host.
+   */
+  #launcherPos: { readonly left: number; readonly top: number } | null = null;
+
+  /**
+   * Where the user dragged the *panel*, in viewport coordinates, or null while
+   * its position is still derived from the launcher's.
+   *
+   * The two gestures state different things and are restored differently. A
+   * launcher drag says where the bubble goes and leaves the panel to open into
+   * whatever space the viewport has, so it is re-derived every time -- which is
+   * what lets a widget re-decide its direction when the window changes under
+   * it. A header drag states the panel's own position, and re-deriving that
+   * from the launcher would move the panel the user just placed.
+   */
+  #panelPos: { readonly left: number; readonly top: number } | null = 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, so a clamped
+   * position never quietly becomes the record.
+   */
+  #cornerSpot: CornerSpot | null = 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: string | null = 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: string | null = null;
+
+  /**
+   * Where the user dragged a docked panel, in viewport coordinates, or null
+   * while it stands on the bar or the anchor.
+   *
+   * Apart from the two corner positions above because it moves nothing else:
+   * a docked panel has no launcher to carry, and the corner it opens from is
+   * the dock's. Held as the user stated it and never as clamped, so a bar that
+   * grew, or a phone that took the panel full-bleed, gives the spot back
+   * unchanged once there is room for it again.
+   */
+  #dockPos: { readonly left: number; readonly top: number } | null = null;
+
+  /**
+   * The line a docked panel stays above, in viewport coordinates: the bar's
+   * top, or the anchor's. Infinite where neither is drawn. Measured by
+   * syncDock, which runs on every change either can make.
+   */
+  #dockTop = Number.POSITIVE_INFINITY;
+  /**
+   * The line a panel docked below its anchor stays below: the anchor's bottom.
+   * Negative infinity on every other dock.
+   */
+  #dockFloor = Number.NEGATIVE_INFINITY;
+  /** The side of the anchor the panel last stood on, held while a gesture runs. */
+  #anchorSide: AnchorSide = "above";
+  /** 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.
+   * Null means the host's layout still decides, and the anchor is measured.
+   */
+  #expandCorner: ExpandCorner | null = null;
+
+  /**
+   * The edges the layout is holding still, as last measured. Cached because a
+   * resize reads it per pointer move and measuring forces a reflow -- thirty a
+   * second while the panel is already being laid out on every one of them.
+   */
+  #anchor: ResizeAnchor = { x: "right", y: "bottom" };
+
+  /** The header the panel drag listens on, stamped by #stampHeader. */
+  #header: HTMLElement | null = 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. */
+  readonly #resizeHandles = new Map<string, HTMLDivElement>();
+
+  /**
+   * Hold a resized box inside the part of the screen the host left free.
+   *
+   * Each edge on its own, unlike the drag's clamp: a drag moves a box of fixed
+   * size, so pushing it back in is right, while a resize is anchored on the
+   * opposite edge and pushing it back would move the edge the user is not
+   * touching. Bounding each edge instead leaves the grip stopped at the limit
+   * -- the gesture keeps going and the panel simply stops growing, which is
+   * what dragging already does.
+   *
+   * The minimum size is the grip's own concern and is applied before this, so
+   * a panel that cannot fit the space is left at its minimum and overflowing
+   * rather than collapsed to nothing.
+   */
+  #withinViewport(box: PanelRect): PanelRect {
+    // A docked panel that moves has its room stop at the dock, so no grip
+    // pulls it over the bar it minimises to. A placement that owns its
+    // position keeps the bound it always had.
+    const viewport = this.#docked() && this.#panelMovable() ? this.#dockRoom() : this.#viewport();
+    // The same bound a drag stops at, so a grip pulled to the edge and a panel
+    // dragged to it come to rest on the same line. The inner Math.max/min pair
+    // keeps an already-inverted box from turning inside out.
+    const left = viewport.left + SCREEN_EDGE_MARGIN;
+    const top = viewport.top + SCREEN_EDGE_MARGIN;
+    const right = viewport.left + viewport.width - SCREEN_EDGE_MARGIN;
+    const bottom = viewport.top + viewport.height - SCREEN_EDGE_MARGIN;
+    return {
+      left: Math.min(Math.max(box.left, left), box.right),
+      top: Math.min(Math.max(box.top, top), box.bottom),
+      right: Math.max(Math.min(box.right, right), box.left),
+      bottom: Math.max(Math.min(box.bottom, bottom), box.top),
+    };
+  }
+
+  /**
+   * Whether a pointer or key gesture is currently placing the widget.
+   *
+   * 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. 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(): boolean {
+    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(): ChatSurfaceReport {
+    const box = this.#host.element.getBoundingClientRect();
+    const viewport = this.#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(),
+      maximized: this.#host.element.hasAttribute("maximized"),
+      movable: this.#panelMovable() && !fullBleed,
+      // The page's setting alone, true unless `data-launcher-drag="false"`, so
+      // it does not change with `collapse-to`; whether this panel moves is `movable`.
+      draggable: this.#host.element.getAttribute("data-launcher-drag") !== "false",
+      fullBleed,
+      box: {
+        left: Math.round(box.left),
+        top: Math.round(box.top),
+        width: Math.round(box.width),
+        height: Math.round(box.height),
+      },
+      viewport: {
+        left: Math.round(viewport.left),
+        top: Math.round(viewport.top),
+        width: Math.round(viewport.width),
+        height: Math.round(viewport.height),
+      },
+    };
+  }
+
+  /** The move behind `AgUiChat.moveTo`, whose doc is the contract. */
+  moveTo(corner: ChatCorner, options: { readonly announce?: boolean } = {}): boolean {
+    if (!this.#panelMovable()) {
+      return false;
+    }
+    const restore = options.announce === true ? this.#captureGeometry() : null;
+    const viewport = this.#viewport();
+    const box = this.#host.element.getBoundingClientRect();
+    if (coversViewport(box, this.#fillRoom())) {
+      return false;
+    }
+    const [edgeY, edgeX] = corner.split("-");
+    // A docked panel's bottom corners are above its dock, not on the bar.
+    const docked = this.#docked();
+    const room = docked ? this.#dockRoom() : viewport;
+    // Every term is an absolute screen coordinate, because that is what the
+    // clamps and the insets both speak. The usable box carries an origin, so
+    // its near edge is `viewport.left`, not zero, and its far edge is
+    // `viewport.left + viewport.width` -- a margin applied to the extents
+    // alone would send the agent's own move under the chrome the host
+    // reserved, which is the failure the usable box exists to prevent.
+    const nearX = room.left + EDGE_MARGIN;
+    const nearY = room.top + EDGE_MARGIN;
+    const left =
+      edgeX === "left" ? nearX : Math.max(nearX, room.left + room.width - EDGE_MARGIN - box.width);
+    const top =
+      edgeY === "top" ? nearY : Math.max(nearY, room.top + room.height - EDGE_MARGIN - box.height);
+    const host = { left, top, right: left + box.width, bottom: top + box.height };
+    if (docked) {
+      this.#dockPos = { left, top };
+      this.#writeDockInset(host);
+      this.#storeDockPosition(this.#dockPos);
+      if (restore !== null) {
+        this.#host.announceSurfaceChange(this.#host.strings().chatMoved, restore);
+      }
+      return true;
+    }
+    // Both axes measured, rather than one read twice: a host can restyle the
+    // launcher as a pill, and squaring it here would put it off the corner.
+    const launcherWidth = this.#host.launcher.offsetWidth;
+    const launcherHeight = this.#host.launcher.offsetHeight;
+    this.#placePanelAndLauncher(host, {
+      left: edgeX === "left" ? host.left : host.right - launcherWidth,
+      top: edgeY === "top" ? host.top : host.bottom - launcherHeight,
+      width: launcherWidth,
+      height: launcherHeight,
+    });
+    this.#storeLauncherPosition();
+    if (restore !== null) {
+      this.#host.announceSurfaceChange(this.#host.strings().chatMoved, restore);
+    }
+    return true;
+  }
+
+  /**
+   * Snapshot the panel's stated position, and return a function that puts it
+   * back.
+   *
+   * Both insets and the expand corner, because they are one decision: the
+   * 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. 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(): () => void {
+    const inset = this.#host.element.style.getPropertyValue("--ag-ui-inset");
+    const launcherInset = this.#host.element.style.getPropertyValue("--ag-ui-launcher-inset");
+    const corner = this.#host.element.getAttribute("data-expand-corner");
+    const launcherPos = this.#launcherPos;
+    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 () => {
+      this.#dockPos = dockPos;
+      this.#storeDockPosition(dockPos);
+      // Erased rather than rewritten when there was nothing to go back to,
+      // which would leave the move this is undoing sitting in storage -- and
+      // since that store outlives the tab, the next resize or reload would
+      // quietly put the panel back in the corner the user had just rejected.
+      if (cornerSpot === null) {
+        this.#cornerSpot = null;
+        this.#host.clearPreference(LAUNCHER_KEY);
+      } else {
+        this.#writeCornerSpot(cornerSpot);
+      }
+      if (owner === this.#positionOwner()) {
+        this.#restoreProperty("--ag-ui-inset", inset);
+        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();
+      }
+      // Against the viewport there is now, which may be a phone's: the insets
+      // put back above were written for the one the move was made in.
+      this.restoreLauncherPosition();
+      this.syncResizeAnchor();
+    };
+  }
+
+  /** Which of the three kinds of surface decides where the panel stands. */
+  #positionOwner(): "dock" | "corner" | "placement" {
+    if (this.#docked()) {
+      return "dock";
+    }
+    return this.#surface().launcherDraggable ? "corner" : "placement";
+  }
+
+  /**
+   * Which axes the current placement allows.
+   *
+   * A full-bleed layout is `100vw`/`100vh` by definition and cannot be resized
+   * at all; a docked panel owns its height, leaving only its inner edge. Read
+   * per interaction, because `placement` is a live attribute.
+   */
+  #resizeAxis(): ResizeAxis {
+    // Refused while maximized, so restore always lands on the size stored before it.
+    return this.#host.element.hasAttribute("maximized") ? "none" : this.#surface().resizeAxis;
+  }
+
+  /**
+   * Which edges the layout is holding still, by measuring rather than guessing:
+   * nudge the size by a pixel, see which edges stayed put, and undo. One forced
+   * reflow per drag.
+   *
+   * `placement` cannot answer this — an embedded panel goes wherever the page's
+   * CSS puts it — and see {@link createResizeHandle} for why guessing produces
+   * a visibly broken control.
+   */
+  #measureAnchor(): ResizeAnchor {
+    const before = this.#host.element.getBoundingClientRect();
+    const width = this.#host.element.style.getPropertyValue(DRAG_WIDTH);
+    const height = this.#host.element.style.getPropertyValue(DRAG_HEIGHT);
+    // Shrink first: at a size resting against max-width or max-height a grown
+    // box does not change, and every clamped axis would read as pinned on its
+    // free side (the default panel is born clamped under 428px). Shrinking is
+    // measured from the used width, so it always moves an edge.
+    const shrunk = this.#probeAnchor(before, -1);
+    // Unless a host rule sets a minimum, in which case that axis is asked the
+    // opposite question rather than left to a guess.
+    const grown = shrunk.x === null || shrunk.y === null ? this.#probeAnchor(before, 1) : shrunk;
+    // Restore exactly what was there, including "nothing" — leaving a probe
+    // value behind would pin a panel that had been sizing itself.
+    this.#restoreProperty(DRAG_WIDTH, width);
+    this.#restoreProperty(DRAG_HEIGHT, height);
+    return {
+      // Neither direction moved it: the axis cannot be resized at all, so the
+      // floating default is the best answer available and is the one the
+      // stylesheet would have used with no measurement at all.
+      x: shrunk.x ?? grown.x ?? "right",
+      y: shrunk.y ?? grown.y ?? "bottom",
+    };
+  }
+
+  /**
+   * Which edge each axis holds still when the panel changes size by `delta`.
+   *
+   * Null for an axis whose size did not change: nothing moved, so nothing was
+   * learned, and reporting the unmoved edge as the pinned one would be exactly
+   * backwards.
+   */
+  #probeAnchor(
+    before: DOMRect,
+    delta: number,
+  ): { x: "left" | "right" | null; y: "top" | "bottom" | null } {
+    this.#applySize({ width: before.width + delta, height: before.height + delta });
+    const after = this.#host.element.getBoundingClientRect();
+    const moved = (a: number, b: number): boolean => Math.abs(a - b) >= 0.5;
+    return {
+      x: moved(after.width, before.width)
+        ? moved(after.left, before.left)
+          ? "right"
+          : "left"
+        : null,
+      y: moved(after.height, before.height)
+        ? moved(after.top, before.top)
+          ? "bottom"
+          : "top"
+        : null,
+    };
+  }
+
+  /** Stamp the measured anchor so the shadow CSS can place the grip. */
+  syncResizeAnchor(): void {
+    if (!this.#host.connected()) {
+      return;
+    }
+    // When this element owns its position it knows which edges are pinned --
+    // it just wrote them -- so there is nothing to probe. The probe is also
+    // unreliable at a size resting against max-width or max-height, where a
+    // nudge moves no edge and every axis reads as pinned on the wrong side.
+    const anchor = this.#expandCorner ?? this.#measureAnchor();
+    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(): 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. */
+  #restoreProperty(name: string, value: string): void {
+    if (value === "") {
+      this.#host.element.style.removeProperty(name);
+      return;
+    }
+    this.#host.element.style.setProperty(name, value);
+  }
+
+  /**
+   * Write a dragged size onto the host, on the axes this placement leaves free.
+   *
+   * Writing a custom property rather than inline `width` / `height` does not
+   * by itself leave placement in charge: an inline custom property still
+   * outranks a `:host([placement=…])` rule setting the same property, so a
+   * height dragged while floating would cap a docked sidebar asking for
+   * `100vh`. The cascade cannot arbitrate this, so the axis check must — a
+   * placement owns the axes it fixes, and a persisted size is applied only to
+   * the ones it leaves free.
+   */
+  #applySize(size: ResizeSize): void {
+    const axis = this.#resizeAxis();
+    if (axis === "none") {
+      return;
+    }
+    // The placement's max-width and max-height are left alone, so a grip pushed
+    // against the edge the placement is not anchored to stops one gutter short:
+    // moving the cap would shift several resting sizes by a pixel. Staying inside
+    // what the host left free is enforced by #withinViewport.
+    if (size.width !== undefined) {
+      this.#host.element.style.setProperty(DRAG_WIDTH, `${size.width}px`);
+    }
+    if (size.height !== undefined && axis === "both") {
+      this.#host.element.style.setProperty(DRAG_HEIGHT, `${size.height}px`);
+    }
+  }
+
+  /**
+   * Drop any dragged size the new placement has taken ownership of.
+   *
+   * Without this a size survives the switch as an inline property and silently
+   * overrides the placement it moved to — the panel keeps a floating height
+   * while docked, and reads as a component that cannot do full height.
+   */
+  releaseOwnedAxes(): void {
+    const axis = this.#resizeAxis();
+    if (axis !== "both") {
+      this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    }
+    if (axis === "none") {
+      this.#host.element.style.removeProperty(DRAG_WIDTH);
+    }
+  }
+
+  /** The surface the live placement and collapse-to attributes describe. */
+  #surface(): Surface {
+    const element = this.#host.element;
+    return surfaceFor(element.getAttribute("placement"), element.getAttribute("collapse-to"));
+  }
+
+  /**
+   * Whether the panel rises from the bottom bar or the host's anchor, until the
+   * user drags it somewhere else.
+   */
+  #docked(): boolean {
+    const target = this.#surface().collapseTo;
+    return target === "bar" || target === "none";
+  }
+
+  /**
+   * Write where a docked panel stands, and return the bar's height.
+   *
+   * Under the bar it is the strip's border box, which is 0 whenever the strip
+   * is not drawn (a phone with the panel open, where the panel is the screen).
+   * Under a host anchor it is the anchor's top, or its bottom on the side below,
+   * and its right, measured against the
+   * layout viewport a fixed element is placed in; an anchor of null leaves the
+   * panel in its placement's own corner. Every other surface carries neither
+   * property, so nothing stale is left behind by a live switch.
+   */
+  syncDock(bar: HTMLElement, anchor: Element | null): number {
+    const element = this.#host.element;
+    const target = this.#surface().collapseTo;
+    const height = target === "bar" ? bar.offsetHeight : 0;
+    const rect = target === "none" && anchor !== null ? anchor.getBoundingClientRect() : null;
+    const side = rect === null ? null : this.#resolveSide(rect);
+    if (target === "bar") {
+      element.style.setProperty(DOCK_BOTTOM, `${height}px`);
+    } else if (rect !== null && side === "above") {
+      element.style.setProperty(DOCK_BOTTOM, `${Math.max(0, this.#screen().height - rect.top)}px`);
+    } else {
+      element.style.removeProperty(DOCK_BOTTOM);
+    }
+    if (rect !== null && side === "below") {
+      element.style.setProperty(DOCK_TOP, `${Math.max(0, rect.bottom)}px`);
+    } else {
+      element.style.removeProperty(DOCK_TOP);
+    }
+    if (rect !== null) {
+      element.style.setProperty(DOCK_RIGHT, `${this.#dockRight(rect)}px`);
+    } else {
+      element.style.removeProperty(DOCK_RIGHT);
+    }
+    if (side === null) {
+      element.removeAttribute("data-dock-anchored");
+    } else {
+      element.setAttribute("data-dock-anchored", side);
+    }
+    this.#barHeight = height;
+    if (target !== "bar") {
+      this.#barTaken = null;
+    }
+    this.#dockTop =
+      target === "bar" && height > 0
+        ? bar.getBoundingClientRect().top
+        : rect !== null && side === "above"
+          ? rect.top
+          : Number.POSITIVE_INFINITY;
+    this.#dockFloor = rect !== null && side === "below" ? rect.bottom : Number.NEGATIVE_INFINITY;
+    // Every change the dock can make passes through here -- the bar's height
+    // arrives by a ResizeObserver after the first restore, and a bar that grew
+    // since the drag would otherwise cover the panel's foot -- so the dragged
+    // spot is held against it here rather than only when it is restored.
+    this.#placeDocked();
+    return height;
+  }
+
+  /**
+   * The part of the usable viewport a docked panel may stand in: all of it
+   * above the dock's line. The bar is what it minimises to, and the anchor is
+   * the host's own way back, so a dragged panel never covers either.
+   */
+  #dockRoom(): ViewportBox {
+    const viewport = this.#viewport();
+    const top = Math.max(viewport.top, this.#dockFloor);
+    const bottom = Math.min(viewport.top + viewport.height, this.#dockTop);
+    return { ...viewport, top, height: Math.max(0, bottom - top) };
+  }
+
+  /**
+   * The side of the anchor the panel opens on: the host's anchor-side, or under
+   * auto the side with more of the usable viewport, kept while a gesture runs.
+   */
+  #resolveSide(rect: DOMRect): AnchorSide {
+    const stated = this.#host.element.getAttribute("anchor-side");
+    if (stated === "above" || stated === "below") {
+      this.#anchorSide = stated;
+    } else if (!this.dragging()) {
+      const viewport = this.#viewport();
+      const below = viewport.top + viewport.height - rect.bottom;
+      this.#anchorSide = below > rect.top - viewport.top ? "below" : "above";
+    }
+    return this.#anchorSide;
+  }
+
+  /**
+   * The panel's distance from the right edge: on the anchor's right, unless a
+   * panel that wide would then cross the gutter on the left of the usable box,
+   * and never inside the gutter on the right of it.
+   */
+  #dockRight(rect: DOMRect): number {
+    const screen = this.#screen();
+    const fits =
+      screen.width - this.#viewport().left - EDGE_MARGIN - this.#host.element.offsetWidth;
+    const floor = EDGE_MARGIN + reservedEdge(getComputedStyle(this.probe), "padding-right");
+    return Math.max(floor, Math.min(screen.width - rect.right, fits));
+  }
+
+  /**
+   * Put a docked panel back where the user dragged it, held inside its room.
+   *
+   * The inline inset comes off first, which is both how the panel's resting
+   * box is measured and what leaves a phone full-bleed: the small-viewport
+   * 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.#surface().panelMovable || this.dragging()) {
+      return;
+    }
+    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;
+    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
+    // dock holds still and a resize grows the panel away from it.
+    this.syncResizeAnchor();
+    this.#writeDockInset(
+      clampPanel(
+        { left: at.left, top: at.top, right: at.left + rest.width, bottom: at.top + rest.height },
+        this.#dockRoom(),
+        SCREEN_EDGE_MARGIN,
+      ),
+    );
+  }
+
+  /** Write the inset that stands a docked panel at `box`. */
+  #writeDockInset(box: PanelRect): void {
+    this.#host.element.style.setProperty(
+      "--ag-ui-inset",
+      insetFrom(this.#anchor, box, this.#screen()),
+    );
+  }
+
+  /** Remember a docked panel's dragged spot, or forget it for null. */
+  #storeDockPosition(at: { readonly left: number; readonly top: number } | null): void {
+    if (at === null) {
+      this.#host.clearPreference(DOCK_KEY);
+      return;
+    }
+    this.#host.writePreference(DOCK_KEY, JSON.stringify({ left: at.left, top: at.top }));
+  }
+
+  /** The stored spot of a docked panel, or null for none or anything corrupt. */
+  #readDockPosition(): { readonly left: number; readonly top: number } | null {
+    const raw = this.#host.readPreference(DOCK_KEY);
+    if (raw === null) {
+      return null;
+    }
+    try {
+      return asPoint(JSON.parse(raw));
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Whether the header drag and moveTo may move the open panel: the
+   * placement's answer, unless the host turned moving off.
+   */
+  #panelMovable(): boolean {
+    return (
+      this.#host.element.getAttribute("data-launcher-drag") !== "false" &&
+      this.#surface().panelMovable
+    );
+  }
+
+  /**
+   * 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(): boolean {
+    return this.#panelMovable() && !this.#fillsScreen();
+  }
+
+  /** Whether the panel covers the usable viewport, as it stands now. */
+  #fillsScreen(): boolean {
+    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,
+    );
+  }
+
+  /**
+   * Whether this placement lets the launcher be dragged, read per interaction
+   * because `placement` is a live attribute. `data-launcher-drag="false"` opts
+   * a host out without giving up the launcher itself.
+   */
+  #launcherDraggable(): boolean {
+    return (
+      this.#host.element.getAttribute("data-launcher-drag") !== "false" &&
+      this.#surface().launcherDraggable
+    );
+  }
+
+  /**
+   * The viewport the launcher and the panel both have to fit inside.
+   *
+   * The *visual* viewport, not the layout one, because they come apart exactly
+   * when this matters. An on-screen keyboard shrinks the visual viewport and
+   * leaves the layout viewport alone, so clamping against `innerHeight` parks
+   * the launcher behind the keyboard and decides which corner to open into
+   * using space that is not on the screen. Pinch-zoom does the same on both
+   * axes.
+   *
+   * Falls back where the API is absent, which keeps this working in the
+   * happy-dom project as well as in an old browser.
+   */
+  #viewport(): ViewportBox {
+    const visual = window.visualViewport;
+    const width = visual?.width ?? window.innerWidth;
+    const height = visual?.height ?? window.innerHeight;
+    // And minus whatever the host reserved for its own chrome. Without this a
+    // panel is clamped against the whole screen and settles happily underneath
+    // a sticky header, where it cannot be reached -- and where collapsing it,
+    // the one thing a user tries, hides it completely rather than rescuing it.
+    // Read as padding off the probe, not as custom properties off this
+    // element. `getPropertyValue` on an unregistered custom property returns
+    // the token stream rather than a length, so a host stating `4rem` reserves
+    // four pixels here and sixty-four in the stylesheet, and one stating
+    // `calc(56px + env(safe-area-inset-top))` -- which is the natural spelling
+    // of what the token's own documentation recommends -- parses as NaN and
+    // takes the panel's whole inset down with it.
+    const style = getComputedStyle(this.probe);
+    const left = reservedEdge(style, "padding-left");
+    const top = reservedEdge(style, "padding-top");
+    return {
+      left,
+      top,
+      width: Math.max(0, width - left - reservedEdge(style, "padding-right")),
+      height: Math.max(0, height - top - reservedEdge(style, "padding-bottom")),
+    };
+  }
+
+  /**
+   * The whole viewport, before anything the host reserved is taken out of it.
+   *
+   * Distinct from {@link #viewport} on purpose, and the two must not be
+   * swapped. The usable box decides where the widget may rest; this is what a
+   * CSS `inset` on a fixed element is measured from, because that is what the
+   * browser measures it from.
+   */
+  #screen(): Extent {
+    // The *layout* viewport, and `clientWidth`/`clientHeight` rather than
+    // `innerWidth`/`innerHeight`, because those two disagree by the width of a
+    // classic scrollbar and it is the smaller one a fixed element is laid out
+    // against. Reading the visual viewport here would be the same mistake one
+    // level up as clamping against the whole screen was one level down: a
+    // keyboard shrinks the visual viewport without moving the box CSS measures
+    // an inset from, so a panel the clamp had just held inside the visible
+    // band would be written back out behind the keyboard.
+    //
+    // The zero checks are for a detached or not-yet-laid-out document, where
+    // `clientWidth` is 0 and no viewport ever is.
+    const root = document.documentElement;
+    return {
+      width: root.clientWidth || window.innerWidth,
+      height: root.clientHeight || window.innerHeight,
+    };
+  }
+
+  /**
+   * Publish the measured viewport height so the stylesheet can size a
+   * full-bleed panel to what the user can see.
+   *
+   * No CSS length carries this. An on-screen keyboard has no effect on any
+   * viewport-percentage unit, so a panel sized from `100dvh` puts its composer
+   * behind the keyboard being typed into. Written inline, and read through a
+   * token the host's own `--ag-ui-viewport-height` still outranks.
+   *
+   * Removed rather than frozen when the two viewports agree, so a desktop that
+   * never diverges carries no inline override at all and the declared fallback
+   * stays in charge.
+   */
+  publishVisualViewport(): void {
+    const visual = window.visualViewport;
+    if (visual === null || visual === undefined) {
+      return;
+    }
+    // The layout viewport from the box a fixed element is laid out against,
+    // for the reasons #screen gives -- and one more that only a phone shows.
+    // While iOS Safari has the visible area panned down to show a focused
+    // field, innerHeight reads the layout height less the pan, and goes on
+    // reading it until a window scroll the element never hears about. Measured
+    // from that, the band below came out as nothing, and at the deepest pan the
+    // browser makes -- the one that shows a composer docked at the foot of the
+    // screen -- the shorter number equals the visible height, so the check
+    // below took every measurement back and put the panel at the layout top at
+    // full height, its header above the screen. clientHeight held the layout
+    // height throughout.
+    const layout = this.#screen().height;
+    if (Math.abs(visual.height - layout) < 1) {
+      this.#host.element.style.removeProperty("--ag-ui-visual-viewport-height");
+      this.#host.element.style.removeProperty("--ag-ui-visual-viewport-inset-bottom");
+      this.#host.element.style.removeProperty("--ag-ui-visual-viewport-inset-top");
+      return;
+    }
+    this.#host.element.style.setProperty(
+      "--ag-ui-visual-viewport-height",
+      `${Math.round(visual.height)}px`,
+    );
+    // What is hidden below the visible area, which is where a keyboard is. A
+    // shorter panel does not help anything anchored to the bottom: a floating
+    // widget is positioned against the layout viewport, so its bottom edge and
+    // the launcher at that corner stay behind the keyboard until this lifts
+    // them. Never negative -- a visual viewport panned up past the layout one
+    // would otherwise pull the panel down off the screen.
+    const hidden = layout - visual.height - visual.offsetTop;
+    this.#host.element.style.setProperty(
+      "--ag-ui-visual-viewport-inset-bottom",
+      `${Math.max(0, Math.round(hidden))}px`,
+    );
+    // And what is hidden above it. To show a field the keyboard would cover, a
+    // browser pans the visual viewport down the layout one, and a fixed panel
+    // anchored at the top stays at the layout top: sized to the visible height,
+    // it then shows only its lower part, from the pan down, with its header off
+    // the screen and page background under it. Never negative, for the same
+    // reason as the band below.
+    this.#host.element.style.setProperty(
+      "--ag-ui-visual-viewport-inset-top",
+      `${Math.max(0, Math.round(visual.offsetTop))}px`,
+    );
+  }
+
+  /**
+   * The launcher's box in viewport coordinates, with its transform divided out.
+   *
+   * The launcher is scaled in four states -- the collapse animation, hover,
+   * press, and the resting scale(0.4) it sits at while the panel is open -- and
+   * `getBoundingClientRect` reports every one of them. A drag that started from
+   * that rect would begin a couple of pixels off, because a press is one of
+   * those states.
+   *
+   * So the size comes from `offsetWidth`/`offsetHeight`, which are layout
+   * metrics no transform reaches, and the position from the rect's *centre*,
+   * which a centred scale is the one point that cannot move.
+   */
+  #launcherBox(): LauncherBox {
+    const width = this.#host.launcher.offsetWidth;
+    const height = this.#host.launcher.offsetHeight;
+    const dragged = this.#launcherPos;
+    if (dragged !== null) {
+      return { left: dragged.left, top: dragged.top, width, height };
+    }
+    const rect = this.#host.launcher.getBoundingClientRect();
+    return {
+      left: rect.left + rect.width / 2 - width / 2,
+      top: rect.top + rect.height / 2 - height / 2,
+      width,
+      height,
+    };
+  }
+
+  /**
+   * Place the host box and the launcher for the position the user dragged to.
+   *
+   * This writes `--ag-ui-inset`, which is a host-facing property: an inline
+   * value outranks the page's own rule for it, exactly as a dragged width
+   * outranks a placement's. That is the intent -- the user moved it -- and it
+   * is why switching to a placement that owns its position hands the property
+   * back rather than leaving a stale inline one behind.
+   */
+  #applyLauncherPlacement(at: { readonly left: number; readonly top: number }): void {
+    this.#launcherPos = at;
+    // Dropping the bubble hands the panel's position back to the placement.
+    // Keeping a stated one would pin the panel where it was dragged and leave
+    // the launcher deriving nothing, which is the gesture doing half its job.
+    this.#panelPos = null;
+    // The host box keeps its expanded size while collapsed, so its own rect is
+    // the panel's size in either state and needs no separate bookkeeping.
+    const panel = this.#host.element.getBoundingClientRect();
+    const placement = launcherPlacement(
+      this.#launcherBox(),
+      { width: panel.width, height: panel.height },
+      this.#viewport(),
+      this.#screen(),
+    );
+    this.#host.element.style.setProperty("--ag-ui-inset", placement.hostInset);
+    this.#host.element.style.setProperty("--ag-ui-launcher-inset", placement.launcherInset);
+    this.#expandCorner = placement.corner;
+    // The corner the panel grows from, for the open/close animation's origin.
+    this.#host.element.setAttribute(
+      "data-expand-corner",
+      `${placement.corner.y}-${placement.corner.x}`,
+    );
+    this.syncResizeAnchor();
+  }
+
+  /** Move the launcher live during a drag, without persisting. */
+  #moveLauncher(left: number, top: number): void {
+    // Stated from the first move, not the last: a key gesture only ends at its
+    // keyup, and an Enter pressed before then expands by way of a restore.
+    this.#cornerSpot = { left, top };
+    this.#applyLauncherPlacement({ left, top });
+  }
+
+  /** Move the launcher and remember where, per tab, like the dragged size. */
+  #commitLauncher(left: number, top: number): void {
+    this.#moveLauncher(left, top);
+    this.#storeLauncherPosition();
+  }
+
+  /**
+   * Move the panel live during a header drag, without persisting.
+   *
+   * Only the host box is written, and that is the whole trick: the launcher is
+   * positioned *inside* that box, so leaving its own inset alone carries it
+   * along by exactly the distance the panel travelled -- which is what a person
+   * dragging a window expects of the thing it collapses into. Placing it on the
+   * panel's pinned corner instead, as an earlier version did, sent it leaping
+   * across the panel the moment the drag re-picked that corner.
+   *
+   * The corner is therefore held for the length of the gesture. Both insets are
+   * measured from it, and rewriting one of them from a new corner while the
+   * other still names the old one would move the launcher for no reason.
+   */
+  #movePanel(box: PanelRect, from: PanelRect): { held: PanelRect; launcher: LauncherBox | null } {
+    if (this.#docked()) {
+      // Inside the room above the dock, with nothing carried along.
+      const held = clampPanel(box, this.#dockRoom(), SCREEN_EDGE_MARGIN);
+      this.#dockPos = { left: held.left, top: held.top };
+      this.#writeDockInset(held);
+      return { held, launcher: null };
+    }
+    if (!this.#launcherDraggable()) {
+      return { held: box, launcher: null };
+    }
+    // Where the launcher rests, recorded before the first move writes anything.
+    // From here on the DOM shows it mid-gesture, so this is the last moment it
+    // can be read rather than derived.
+    if (this.#launcherPos === null) {
+      const resting = this.#launcherBox();
+      this.#launcherPos = { left: resting.left, top: resting.top };
+    }
+    // The launcher as it was when the gesture began. Held for the whole drag:
+    // every move measures from here, so the two halves cannot drift apart.
+    const start = this.#launcherPos;
+    // The screen-edge bound, not the resting gutter: the 24px margin is where a
+    // placement rests one, not where a person may put it. Not zero either: the
+    // launcher is held the same distance off, and the restore below agrees.
+    const held = clampPanel(box, this.#viewport(), SCREEN_EDGE_MARGIN);
+    const corner = this.#expandCorner ?? this.#anchor;
+    // The usable box decides where the panel may rest, above; these insets are
+    // measured from the screen, as the browser measures a fixed element's.
+    this.#host.element.style.setProperty("--ag-ui-inset", insetFrom(corner, held, this.#screen()));
+    this.#panelPos = { left: held.left, top: held.top };
+
+    // Where the launcher has ended up, derived rather than read. During a
+    // header drag it rides inside the host box with its own inset untouched,
+    // so the DOM shows it moving while `#launcherPos` still holds where it
+    // started -- reading it back mid-gesture returns the stale value, and
+    // adding the panel's travel to that a second time on release is a jump.
+    // Measured from the box the press started on, so a long drag cannot
+    // accumulate the rounding each move writes.
+    const carried = {
+      ...this.#launcherBox(),
+      left: start.left + (held.left - from.left),
+      top: start.top + (held.top - from.top),
+    };
+    // A bubble carried into an edge the host reserved is one nobody can press.
+    // Clamping it live rather than at the end is what makes releasing the drag
+    // change nothing: leaving it until then parked it under a nav bar for the
+    // whole gesture and hopped it out on pointerup.
+    const launcher = { ...carried, ...clampLauncher(carried, this.#viewport()) };
+    this.#host.element.style.setProperty(
+      "--ag-ui-launcher-inset",
+      placeWidget(held, launcher, corner, this.#screen()).launcherInset,
+    );
+    return { held, launcher };
+  }
+
+  /**
+   * Finish a header drag: settle where both halves ended up, and remember it.
+   *
+   * The launcher travels the distance the panel actually travelled, which is
+   * the clamped distance rather than the pointer's -- a panel held against the
+   * viewport margin stops, and so does the bubble attached to it. Measured from
+   * the box the press started on, so a long drag cannot accumulate the rounding
+   * each move writes into the inset.
+   *
+   * Only now is the corner re-picked, from where the launcher has ended up, so
+   * the panel opens into clear space next time. Re-picking it moves nothing:
+   * both insets are rewritten from positions that are already decided.
+   */
+  #commitPanel(box: PanelRect, from: PanelRect): void {
+    // Exactly what the last move applied, rather than the same sum computed
+    // again. Recomputing it is how the two came apart: releasing the drag
+    // moved the bubble by the panel's whole travel a second time.
+    const { held, launcher } = this.#movePanel(box, from);
+    if (this.#docked()) {
+      this.#storeDockPosition({ left: held.left, top: held.top });
+      return;
+    }
+    if (launcher === null) {
+      return;
+    }
+    this.#placePanelAndLauncher(held, launcher);
+    this.#storeLauncherPosition();
+  }
+
+  /**
+   * Write both insets for a panel and launcher that are already positioned,
+   * re-picking the corner they are measured from.
+   */
+  #placePanelAndLauncher(host: PanelRect, launcher: LauncherBox): void {
+    const viewport = this.#viewport();
+    const screen = this.#screen();
+    const size = { width: host.right - host.left, height: host.bottom - host.top };
+    const { corner } = launcherPlacement(launcher, size, viewport, screen);
+    // The screen again, not the usable box: these are CSS insets on a fixed
+    // element and the browser measures them from the real edges.
+    const insets = placeWidget(host, launcher, corner, screen);
+    this.#host.element.style.setProperty("--ag-ui-inset", insets.hostInset);
+    this.#host.element.style.setProperty("--ag-ui-launcher-inset", insets.launcherInset);
+    this.#launcherPos = { left: launcher.left, top: launcher.top };
+    this.#panelPos = { left: host.left, top: host.top };
+    this.#expandCorner = corner;
+    this.#host.element.setAttribute("data-expand-corner", `${corner.y}-${corner.x}`);
+    this.syncResizeAnchor();
+  }
+
+  /**
+   * Re-apply a panel position the user stated, against the current viewport.
+   *
+   * The launcher keeps its offset from the panel through the clamp -- it was
+   * put where it is relative to the panel, and a viewport that has since shrunk
+   * is no reason to move one without the other -- and is then held on screen in
+   * its own right.
+   */
+  #restorePanelPosition(at: { readonly left: number; readonly top: number }): void {
+    const rect = this.#host.element.getBoundingClientRect();
+    // The same bound the drag itself used. Taking the default here instead is
+    // what made a panel dragged to an edge jump a whole resting gutter inward
+    // on the next resize, reload or expand -- re-placing a position the user
+    // had stated, against a limit they had never been shown.
+    const held = clampPanel(
+      { left: at.left, top: at.top, right: at.left + rect.width, bottom: at.top + rect.height },
+      this.#viewport(),
+      SCREEN_EDGE_MARGIN,
+    );
+    const launcher = this.#launcherBox();
+    const carried = {
+      ...launcher,
+      left: launcher.left + (held.left - at.left),
+      top: launcher.top + (held.top - at.top),
+    };
+    this.#placePanelAndLauncher(held, {
+      ...carried,
+      ...clampLauncher(carried, this.#viewport()),
+    });
+  }
+
+  /**
+   * Write the current position, if this element owns one.
+   *
+   * The panel's own position rides along only when the user stated it, because
+   * its presence is what tells a restore which of the two gestures to honour:
+   * 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(): void {
+    const position = this.#launcherPos;
+    if (position === null) {
+      return;
+    }
+    const panel = this.#panelPos;
+    this.#writeCornerSpot(panel === null ? position : { ...position, panel });
+  }
+
+  /** Make `spot` the stated one, and remember it. */
+  #writeCornerSpot(spot: CornerSpot): void {
+    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(): void {
+    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(): void {
+    this.#placeFromRecord(false);
+    this.#stampHeader();
+  }
+
+  /** The placing behind {@link restoreLauncherPosition}. */
+  #placeFromRecord(handBack: boolean): void {
+    // Before the launcher's record is read at all: it belongs to the corner
+    // surface, and seeding anything from it would put a spot dragged there on
+    // a panel that should stand on its dock.
+    if (this.#docked()) {
+      this.#placeDocked();
+      return;
+    }
+    if (!this.#surface().launcherDraggable) {
+      return;
+    }
+    // Under data-launcher-drag="false" the widget is wherever the host's CSS puts
+    // it, so a position this element took before the attribute went on is handed
+    // back here, at the first window resize or reopen, and the record stays for the
+    // day the attribute comes off. Nothing watches the attribute: it is read per
+    // interaction, like every other answer here.
+    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;
+    }
+    if (this.#standFullBleed(spot)) {
+      return;
+    }
+    if (spot.panel !== undefined) {
+      // Stated rather than derived: the launcher is only read here to keep the
+      // offset the two were left with, so it has to be seeded before the panel
+      // is placed around it.
+      this.#launcherPos = { left: spot.left, top: spot.top };
+      this.#restorePanelPosition(spot.panel);
+      return;
+    }
+    const box = this.#launcherBox();
+    this.#applyLauncherPlacement(
+      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: CornerSpot): boolean {
+    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(): void {
+    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: 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);
+    if (raw === null) {
+      return null;
+    }
+    try {
+      const parsed: unknown = JSON.parse(raw);
+      if (typeof parsed !== "object" || parsed === null) {
+        return null;
+      }
+      const { left, top, panel } = parsed as { left?: unknown; top?: unknown; panel?: unknown };
+      if (typeof left !== "number" || typeof top !== "number") {
+        return null;
+      }
+      // A record written before the panel could be dragged has no panel half,
+      // and one written by a launcher drag never will -- both restore by
+      // deriving the panel, which is what they meant.
+      const at = asPoint(panel);
+      return at === null ? { left, top } : { left, top, panel: at };
+    } catch {
+      // A corrupt entry is not worth failing a mount over; fall back to the
+      // placement's own corner.
+      return null;
+    }
+  }
+
+  /**
+   * Give the position back to the host when the new placement owns it, the way
+   * releaseOwnedAxes gives back a size. Without this a dragged inset survives
+   * the switch inline and pins a sidebar to wherever the floating launcher was.
+   */
+  releaseLauncherPosition(): void {
+    // A dragged dock spot belongs to a docked panel that moves. Any other
+    // surface hands it back; a docked one keeps it, and syncDock holds it
+    // against the new dock.
+    if (this.#dockPos !== null && !(this.#docked() && this.#panelMovable())) {
+      this.#dockPos = null;
+      this.#host.element.style.removeProperty("--ag-ui-inset");
+    }
+    if (this.#launcherDraggable()) {
+      return;
+    }
+    this.#forgetCornerPosition();
+  }
+
+  /** Take everything off that placed a corner panel, leaving its record alone. */
+  #forgetCornerPosition(): void {
+    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");
+  }
+
+  /**
+   * Apply the box a grip is asking for.
+   *
+   * The size is the easy half. The other half is that **dragging the edge the
+   * layout is holding still moves the panel as well as resizing it**, and the
+   * layout cannot express that on its own: a floating panel pinned bottom-right
+   * cannot grow rightward, because its right edge is what the placement fixed.
+   * So a grip on a pinned edge takes the position over -- which is the same
+   * ownership the launcher drag takes, written the same way.
+   *
+   * A grip on a free edge writes nothing but the size, exactly as before, so a
+   * host positioning the panel with its own rule keeps that rule until someone
+   * drags the edge it was holding.
+   */
+  #applyResize(grip: ResizeGrip, box: PanelRect): PanelRect {
+    box = this.#withinViewport(box);
+    if (this.#docked() && this.#dockPos === null) {
+      // A panel standing on its dock keeps it through a resize: the edges it
+      // stands on are the bar's or the anchor's, and a grip on one of them
+      // would write the position below and take the panel off its dock. So
+      // the pinned edges stay where they are and only the free ones follow.
+      // Once dragged off, it resizes like a corner panel, below.
+      const now = this.#host.element.getBoundingClientRect();
+      box = {
+        left: grip.x === this.#anchor.x ? now.left : box.left,
+        right: grip.x === this.#anchor.x ? now.right : box.right,
+        top: grip.y === this.#anchor.y ? now.top : box.top,
+        bottom: grip.y === this.#anchor.y ? now.bottom : box.bottom,
+      };
+      this.#applySize({ width: box.right - box.left, height: box.bottom - box.top });
+      return box;
+    }
+    this.#applySize({ width: box.right - box.left, height: box.bottom - box.top });
+    if (this.#docked()) {
+      // Any grip moves the top-left corner the spot is kept as, including one
+      // on a free edge, which leaves the inset alone.
+      this.#dockPos = { left: box.left, top: box.top };
+    }
+    if (grip.x === this.#anchor.x || grip.y === this.#anchor.y) {
+      // The whole screen, not the usable box: a CSS inset on a fixed element is
+      // measured from the real edges, so expressing a right or bottom against a
+      // box the host has inset comes out short by exactly that inset.
+      const anchor = this.#anchor;
+      const inset = insetFrom(anchor, box, this.#screen());
+      this.#host.element.style.setProperty("--ag-ui-inset", inset);
+      this.#gripInset = this.#launcherPos === null && !this.#docked() ? inset : null;
+      // The launcher lives at this corner of the panel, so a corner that moved
+      // takes it along. Without this the next expand would re-derive the panel's
+      // position from a launcher still standing where the panel used to be, and
+      // undo the move.
+      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,
+        };
+      }
+    }
+    // A stated corner panel's spot is a claim about this box, so it moves with
+    // it, by a free edge as well as by a pinned one. Read from what was drawn,
+    // not what the pointer asked for, because a host's maximum stops the box short
+    // of the pointer. Not while docked: this position belongs to the corner.
+    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: ResizeGrip, box: PanelRect): void {
+    // The bounded box, not the one the pointer asked for. Persisting the raw
+    // one would store a size the panel never had and restore it on the next
+    // mount, which is the same disagreement between apply and commit that made
+    // the header drag jump on release.
+    const held = this.#applyResize(grip, box);
+    // A grip on the free edges of a panel standing at the start of a filled window
+    // leaves that inset alone, and the size it stated takes the panel off the
+    // screen's shape. It has to stay where the grip left it, so the inset stops
+    // being one that lasts only as long as the host's size does.
+    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) {
+      this.#storeDockPosition(this.#dockPos);
+    }
+    // Re-stamp after the drag: a host whose layout changed underneath us would
+    // otherwise keep the tab-reachable grip in the old corner, which reads as
+    // the control being in the wrong place even though the drag was right.
+    this.syncResizeAnchor();
+  }
+
+  /**
+   * Put the tab stop on the grip diagonally opposite the pinned corner.
+   *
+   * That is the corner a resize grows the panel from, so an arrow key there
+   * changes the size and never the position -- the behaviour the single grip
+   * this replaced had, kept for the one path that cannot simply grab a
+   * different edge.
+   */
+  #focusableGrip(): void {
+    const free = `${this.#anchor.y === "top" ? "bottom" : "top"}-${
+      this.#anchor.x === "left" ? "right" : "left"
+    }`;
+    for (const [name, handle] of this.#resizeHandles) {
+      const reachable = name === free;
+      handle.tabIndex = reachable ? 0 : -1;
+      if (reachable) {
+        handle.removeAttribute("aria-hidden");
+      } else {
+        handle.setAttribute("aria-hidden", "true");
+      }
+    }
+  }
+
+  /**
+   * The stored-size bucket for the live placement: its attribute value, with
+   * absent and empty read as floating, as the stylesheet treats them.
+   */
+  #bucket(): string {
+    const placement = this.#host.element.getAttribute("placement");
+    return placement === null || placement === "" ? "floating" : placement;
+  }
+
+  /** Persist a dragged size under the current placement, keeping the others. */
+  #persistSize(size: ResizeSize): void {
+    this.#writeSizes(this.#bucket(), { ...this.#readSize(), ...size });
+  }
+
+  /** Store one placement's size, or drop it with null, clearing an emptied record. */
+  #writeSizes(bucket: string, size: ResizeSize | null): void {
+    const placements: Record<string, ResizeSize> = { ...this.#readSizes() };
+    if (size === null) {
+      delete placements[bucket];
+    } else {
+      placements[bucket] = size;
+    }
+    if (Object.keys(placements).length === 0) {
+      this.#host.clearPreference(SIZE_KEY);
+      return;
+    }
+    const stored: StoredSizes = { v: 2, placements };
+    this.#host.writePreference(SIZE_KEY, JSON.stringify(stored));
+  }
+
+  /** The persisted size for the current placement, or an empty record. */
+  #readSize(): ResizeSize {
+    return this.#readSizes()[this.#bucket()] ?? {};
+  }
+
+  /**
+   * Every persisted size by placement. A record from before sizes were kept per
+   * placement is one flat size, read as floating's, which is where it was
+   * nearly always dragged.
+   */
+  #readSizes(): Readonly<Record<string, ResizeSize>> {
+    const raw = this.#host.readPreference(SIZE_KEY);
+    if (raw === null) {
+      return {};
+    }
+    try {
+      const parsed: unknown = JSON.parse(raw);
+      if (typeof parsed !== "object" || parsed === null) {
+        return {};
+      }
+      const record = parsed as Partial<StoredSizes>;
+      if (record.v === 2 && typeof record.placements === "object" && record.placements !== null) {
+        return record.placements;
+      }
+      return { floating: parsed as ResizeSize };
+    } catch {
+      // A corrupt entry is not worth failing a mount over; fall back to the
+      // placement's own size.
+      return {};
+    }
+  }
+}