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

package/src/ui/placement/place_widget.ts

@@ -0,0 +1,64 @@
+import type { ExpandCorner, Extent, LauncherBox } from "./launcher_placement.js";
+import type { PanelRect } from "./resize_handle.js";
+
+/** Where to put the host box, and where the launcher sits inside it. */
+export interface WidgetInsets {
+  /** An `inset` shorthand for the host box. */
+  readonly hostInset: string;
+  /** An `inset` shorthand for the launcher, relative to the host box. */
+  readonly launcherInset: string;
+}
+
+/**
+ * Express a panel and its launcher, both already positioned, as the two
+ * `inset` shorthands the element writes.
+ *
+ * Both are measured from the **same** corner, which is what stops a later
+ * resize from dragging the launcher: the pinned corner is the one edge a
+ * resize cannot move. Which corner that is says nothing about where either box
+ * ends up -- the positions are absolute and arrive decided -- so re-picking it
+ * moves nothing, and the launcher may sit outside its own host box. Nothing
+ * clips it there, and that is what lets a launcher be flush to a screen corner
+ * while the panel it opens keeps its margin.
+ *
+ * `screen` is the **whole** viewport, not the part a host has left free. These
+ * are CSS `inset` values on a fixed element, and the browser measures those
+ * from the real edges -- so a `bottom` expressed against a box inset from the
+ * top comes out short by exactly that inset. It only shows when the corner
+ * flips mid-drag, because that is when the same point stops being expressed
+ * from `top` and starts being expressed from `bottom`: the widget then leaps by
+ * the reserved edge, which is a jump the gesture cannot explain.
+ */
+export function placeWidget(
+  host: PanelRect,
+  launcher: LauncherBox,
+  corner: ExpandCorner,
+  screen: Extent,
+): WidgetInsets {
+  return {
+    hostInset: inset({
+      top: corner.y === "top" ? host.top : null,
+      right: corner.x === "right" ? screen.width - host.right : null,
+      bottom: corner.y === "bottom" ? screen.height - host.bottom : null,
+      left: corner.x === "left" ? host.left : null,
+    }),
+    launcherInset: inset({
+      top: corner.y === "top" ? launcher.top - host.top : null,
+      right: corner.x === "right" ? host.right - (launcher.left + launcher.width) : null,
+      bottom: corner.y === "bottom" ? host.bottom - (launcher.top + launcher.height) : null,
+      left: corner.x === "left" ? launcher.left - host.left : null,
+    }),
+  };
+}
+
+/** An `inset` shorthand; a null side is `auto`, so the opposite one pins it. */
+function inset(sides: {
+  top: number | null;
+  right: number | null;
+  bottom: number | null;
+  left: number | null;
+}): string {
+  const side = (value: number | null): string =>
+    value === null ? "auto" : `${Math.round(value)}px`;
+  return `${side(sides.top)} ${side(sides.right)} ${side(sides.bottom)} ${side(sides.left)}`;
+}

package/src/ui/placement/preset_styles.ts

@@ -0,0 +1,49 @@
+// The token values the bottom-left, side and full placements start from;
+// the default bottom-right corner is the token defaults themselves.
+export const PRESET_STYLES: string = `
+/* ── Placement presets ──────────────────────────────────────────────────── */
+/* Maximized, from the header control: a corner or docked panel takes the
+   maximized size on both axes. Set on the box rather than the size aliases, so
+   the size the user dragged is not read and the aliases stay the host's. The
+   element refuses the state on page, full, embedded and at 600px or less, so
+   no rule here has to. A collapsed attribute written straight on, which the
+   element is not told of, still draws the collapsed box. A side column grows
+   its width only, below and in the sidebar module. */
+:host([maximized]:not([collapsed]):not([placement="side"]):not([placement="sidebar"])) {
+  width: var(--_maximized-width);
+  height: var(--_maximized-height);
+}
+
+:host([placement="bottom-left"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto auto calc(var(--_edge-gutter) + var(--_viewport-inset-bottom) + var(--_keyboard-inset))
+      calc(var(--_edge-gutter) + var(--_viewport-inset-left))
+  );
+}
+
+:host([placement="side"]) {
+  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
+}
+
+:host([placement="side"][maximized]:not([collapsed])) {
+  width: var(--_maximized-width);
+}
+
+:host([placement="full"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+  );
+  --_width: var(--ag-ui-width, var(--_viewport-width));
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
+}
+`;

package/src/ui/placement/resize_handle.ts

@@ -0,0 +1,229 @@
+/**
+ * Which edges a grip drags. An axis left out is an axis the grip does not
+ * move: the left-edge grip is `{ x: "left" }`, the top-right corner is
+ * `{ x: "right", y: "top" }`.
+ */
+export interface ResizeGrip {
+  readonly x?: "left" | "right";
+  readonly y?: "top" | "bottom";
+}
+
+/** Which edges the layout holds still while the panel changes size. */
+export interface ResizeAnchor {
+  /** The horizontal edge that does not move. */
+  readonly x: "left" | "right";
+  /** The vertical edge that does not move. */
+  readonly y: "top" | "bottom";
+}
+
+/**
+ * What the current placement allows: both axes, width only, or nothing. Which
+ * edges a given grip drags is separate, and fixed when the grip is built.
+ */
+export type ResizeAxis = "none" | "width" | "both";
+
+/** Persisted size, in CSS pixels. Either axis may be absent. */
+export interface ResizeSize {
+  readonly width?: number;
+  readonly height?: number;
+}
+
+/** The panel's position on screen, in viewport coordinates. */
+export interface PanelRect {
+  readonly left: number;
+  readonly top: number;
+  readonly right: number;
+  readonly bottom: number;
+}
+
+/** What the handle needs from its host to do its job. */
+export interface ResizeOptions {
+  /**
+   * Which axes the current placement allows, read per interaction. A getter
+   * because `placement` is a live attribute, and a value read at construction
+   * would survive the host switching to a docked or full-bleed layout.
+   */
+  readonly axis: () => ResizeAxis;
+  /** The panel's current bounding box. */
+  readonly rect: () => PanelRect;
+  /** Apply a box (the host decides what that costs in properties). */
+  readonly apply: (box: PanelRect) => void;
+  /**
+   * Called once per completed resize, for persistence: on `pointerup` for a
+   * drag, and when the key comes up (or focus leaves the handle) for a key
+   * press. Never per pointer move, and never per key repeat.
+   */
+  readonly commit: (box: PanelRect) => void;
+  /** Accessible label. */
+  readonly label: string;
+}
+
+/** Smallest usable panel; below this the composer and header collide. */
+const MIN_WIDTH = 280;
+const MIN_HEIGHT = 240;
+
+/** Keyboard step, and the larger one Shift asks for. */
+const STEP = 16;
+const COARSE_STEP = 64;
+
+/**
+ * A drag handle that resizes the chat panel from one edge or corner.
+ *
+ * The rule that keeps it correct is that **the edge a grip does not drag is the
+ * one that stays put**. That is the whole model, and it is what lets the same
+ * code serve all eight grips: the left-edge grip moves the left edge and holds
+ * the right, the right-edge grip does the reverse, a corner does both axes.
+ *
+ * Which edge the *layout* pins is a different question and is deliberately not
+ * asked here. It matters only to the host, which has to rewrite its own
+ * position when a grip drags the very edge the layout was holding still --
+ * dragging the pinned edge of a panel is a move as much as a resize. The
+ * handle reports the box it wants; what that costs in CSS properties is the
+ * host's problem.
+ *
+ * An earlier version took the anchor and derived the direction from it, which
+ * is where the asymmetries lived: whether an arrow key grew or shrank the
+ * panel depended on which corner the single grip had been placed on. With the
+ * grip stated outright, an arrow simply moves the edge it names.
+ */
+export function createResizeHandle(grip: ResizeGrip, options: ResizeOptions): HTMLDivElement {
+  const handle = document.createElement("div");
+  handle.className = `resize-handle resize-handle--${gripName(grip)}`;
+  handle.setAttribute("part", `resize-handle resize-handle-${gripName(grip)}`);
+  // A separator with an orientation: an edge grip splits along one axis, and a
+  // corner has no single one to report.
+  handle.setAttribute("role", "separator");
+  if (grip.x === undefined) {
+    handle.setAttribute("aria-orientation", "horizontal");
+  } else if (grip.y === undefined) {
+    handle.setAttribute("aria-orientation", "vertical");
+  }
+  handle.setAttribute("aria-label", options.label);
+  handle.tabIndex = 0;
+
+  handle.addEventListener("pointerdown", (event: PointerEvent) => {
+    const axis = options.axis();
+    if (axis === "none" || !movable(grip, axis)) {
+      return;
+    }
+    // Captured once: the edges this grip is not dragging cannot move during
+    // the drag, and reading them live would chase the panel as it resizes.
+    const rect = options.rect();
+
+    const onMove = (move: PointerEvent): void => {
+      options.apply(boxAt(grip, axis, rect, move.clientX, move.clientY));
+    };
+
+    const onUp = (up: PointerEvent): void => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      handle.removeAttribute("data-dragging");
+      options.commit(boxAt(grip, axis, rect, up.clientX, up.clientY));
+    };
+
+    handle.setAttribute("data-dragging", "true");
+    // Listeners on `window`, not the handle: a fast drag outruns the pointer
+    // and would otherwise strand the panel mid-resize with no pointerup.
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    event.preventDefault();
+  });
+
+  // The box the current key gesture has applied but not yet persisted. The
+  // pointer path can commit inline because a drag has one unambiguous end;
+  // a key press does not, so the gesture's result is held here until it does.
+  let pending: PanelRect | null = null;
+
+  /** End a key gesture: persist what it applied, once. */
+  const settle = (): void => {
+    if (pending === null) {
+      return;
+    }
+    const box = pending;
+    pending = null;
+    options.commit(box);
+  };
+
+  // Keyboard parity: a pointer-only resize is unreachable without a mouse, and
+  // this control has no equivalent elsewhere in the UI. An arrow moves the edge
+  // this grip names, in the direction it names -- so the same key grows one
+  // side's grip and shrinks the opposite one, which is what a pointer does too.
+  handle.addEventListener("keydown", (event: KeyboardEvent) => {
+    const axis = options.axis();
+    if (axis === "none" || !movable(grip, axis)) {
+      return;
+    }
+    const step = event.shiftKey ? COARSE_STEP : STEP;
+    const rect = options.rect();
+    const delta = ARROWS[event.key];
+    if (delta === undefined) {
+      return;
+    }
+    // An arrow across this grip's fixed axis has no edge to move.
+    if ((delta.x !== 0 && grip.x === undefined) || (delta.y !== 0 && grip.y === undefined)) {
+      return;
+    }
+    event.preventDefault();
+    const x = (grip.x === "left" ? rect.left : rect.right) + delta.x * step;
+    const y = (grip.y === "top" ? rect.top : rect.bottom) + delta.y * step;
+    const next = boxAt(grip, axis, rect, x, y);
+    // Live feedback per key event, persistence only when the gesture ends:
+    // `commit` promises one call per completed resize, and a held arrow key
+    // repeats at the OS rate (20-30 events a second), so committing here would
+    // put that many storage writes or PATCHes behind a single press — landing
+    // hardest on the keyboard users this path exists for.
+    options.apply(next);
+    pending = next;
+  });
+
+  // The key coming up ends the gesture, mirroring `pointerup`. `blur` closes one
+  // whose keyup never arrives here — focus moved on mid-press — because a size
+  // that was applied but never committed is a resize the host silently forgets.
+  handle.addEventListener("keyup", settle);
+  handle.addEventListener("blur", settle);
+
+  return handle;
+}
+
+/** Which way each arrow key pushes the edge under it. */
+const ARROWS: Record<string, { x: number; y: number } | undefined> = {
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+};
+
+/** The hyphenated name of a grip, for its class and part. */
+export function gripName(grip: ResizeGrip): string {
+  return [grip.y, grip.x].filter((side) => side !== undefined).join("-");
+}
+
+/** Whether the current placement leaves this grip anything to move. */
+function movable(grip: ResizeGrip, axis: ResizeAxis): boolean {
+  // A docked panel owns its height, so a grip that only moves a horizontal
+  // edge has nothing to do and must not pretend otherwise.
+  return axis === "both" || grip.x !== undefined;
+}
+
+/**
+ * The box a pointer at (x, y) implies for this grip.
+ *
+ * Each axis is clamped by pushing the *dragged* edge back to the minimum,
+ * never by moving the edge that is supposed to be standing still: clamping the
+ * wrong one is how a panel dragged past its minimum starts travelling.
+ */
+function boxAt(
+  grip: ResizeGrip,
+  axis: ResizeAxis,
+  rect: PanelRect,
+  x: number,
+  y: number,
+): PanelRect {
+  const left = grip.x === "left" ? Math.min(x, rect.right - MIN_WIDTH) : rect.left;
+  const right = grip.x === "right" ? Math.max(x, rect.left + MIN_WIDTH) : rect.right;
+  // A placement that owns its height leaves the vertical edges where they are.
+  const vertical = axis === "both";
+  const top = vertical && grip.y === "top" ? Math.min(y, rect.bottom - MIN_HEIGHT) : rect.top;
+  const bottom = vertical && grip.y === "bottom" ? Math.max(y, rect.top + MIN_HEIGHT) : rect.bottom;
+  return { left, top, right, bottom };
+}

package/src/ui/placement/resize_styles.ts

@@ -0,0 +1,201 @@
+// The resize grips on every edge and corner, and which placements keep them.
+export const RESIZE_STYLES: string = `
+/* Resize grips: every edge and every corner, so the panel can be dragged from
+   whichever side the reader is already near. Absent entirely where the
+   placement is full-bleed, since there is nothing to drag.
+
+   The whole set is always laid out. Which edges the *layout* pins is not a
+   question the stylesheet needs to answer any more -- it decided where the one
+   grip went, and there is no longer one grip. The element still measures and
+   stamps data-resize-anchor, because it decides what a drag on a pinned edge
+   costs in position and which grip carries the tab stop, but no rule here
+   reads it. */
+.resize-handle {
+  position: absolute;
+  z-index: 2;
+  background: transparent;
+  touch-action: none;
+}
+
+/* No grips while maximized: the element refuses the resize, so restore always
+   lands on the size stored before it. */
+:host([maximized]) .resize-handle {
+  display: none;
+}
+
+.resize-handle:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+/* Corners first in the file and last in the DOM, so they take the pointer
+   where they overlap an edge strip. */
+.resize-handle--top-left,
+.resize-handle--top-right,
+.resize-handle--bottom-left,
+.resize-handle--bottom-right {
+  width: var(--_grip-corner);
+  height: var(--_grip-corner);
+}
+
+.resize-handle--top-left {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.resize-handle--top-right {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+.resize-handle--bottom-left {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.resize-handle--bottom-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+}
+
+/* Edge strips, held clear of the corners at both ends so a corner drag is
+   never swallowed by the edge next to it. */
+.resize-handle--left,
+.resize-handle--right {
+  top: var(--_grip-corner);
+  bottom: var(--_grip-corner);
+  width: var(--_grip-edge);
+  cursor: ew-resize;
+}
+
+.resize-handle--left {
+  left: 0;
+}
+
+.resize-handle--right {
+  right: 0;
+}
+
+.resize-handle--top,
+.resize-handle--bottom {
+  left: var(--_grip-corner);
+  right: var(--_grip-corner);
+  height: var(--_grip-edge);
+  cursor: ns-resize;
+}
+
+.resize-handle--top {
+  top: 0;
+}
+
+.resize-handle--bottom {
+  bottom: 0;
+}
+
+/* A docked panel a host sized to the whole window has nothing to give a grip: its size
+   is the host's, and a place a grip left would outlast that size with the bar back
+   under it. They go as they do on a phone. A corner panel keeps them, since it has no
+   bar to stand clear of and a grip's place is its own. */
+:host([data-collapsed-to="bar"][data-fills-window]) .resize-handle,
+:host([data-collapsed-to="none"][data-fills-window]) .resize-handle {
+  display: none;
+}
+
+/* Docked: the placement owns the height, so the horizontal edges and every
+   corner are inert and must not advertise a drag that does nothing. The two
+   vertical edges remain, which is the same affordance these placements had
+   when there was one grip -- now on both sides, since either may be the inner
+   one depending on which side the rail is docked to. */
+:host([placement="sidebar"]) .resize-handle--top,
+:host([placement="sidebar"]) .resize-handle--bottom,
+:host([placement="sidebar"]) .resize-handle--top-left,
+:host([placement="sidebar"]) .resize-handle--top-right,
+:host([placement="sidebar"]) .resize-handle--bottom-left,
+:host([placement="sidebar"]) .resize-handle--bottom-right,
+:host([placement="side"]) .resize-handle--top,
+:host([placement="side"]) .resize-handle--bottom,
+:host([placement="side"]) .resize-handle--top-left,
+:host([placement="side"]) .resize-handle--top-right,
+:host([placement="side"]) .resize-handle--bottom-left,
+:host([placement="side"]) .resize-handle--bottom-right {
+  display: none;
+}
+
+/* The vertical edges run the full height once no corner shares them. */
+:host([placement="sidebar"]) .resize-handle--left,
+:host([placement="sidebar"]) .resize-handle--right,
+:host([placement="side"]) .resize-handle--left,
+:host([placement="side"]) .resize-handle--right {
+  top: 0;
+  bottom: 0;
+  width: var(--_grip-edge-docked);
+}
+
+/* Full-bleed: nothing to drag. */
+:host([placement="full"]) .resize-handle,
+:host([placement="page"]) .resize-handle {
+  display: none;
+}
+
+/* The visible mark on a grip.
+
+   Filling the whole strip was what the single corner grip did, and at 14px
+   square nobody ever saw it. On a strip running the length of an edge the same
+   fill reads as a border the panel grew -- square ended, stopping short of the
+   corner radius at both ends, and easily mistaken for a rendering fault rather
+   than for something to grab.
+
+   So the hit area stays the full strip and the mark is a short pill centred on
+   it, which cannot be read as an edge of anything and never meets the radius.
+
+   It shows on hover and focus as well as during the drag. With eight grips, a
+   mark that appears only once you are already dragging is a mark that never
+   told anyone the grips were there. */
+.resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 999px;
+  background: var(--_accent);
+  opacity: 0;
+  transition: opacity var(--_motion) var(--_ease);
+}
+
+.resize-handle--top::after,
+.resize-handle--bottom::after {
+  width: var(--_grip-mark-length);
+  height: var(--_grip-mark-thickness);
+}
+
+.resize-handle--left::after,
+.resize-handle--right::after {
+  width: var(--_grip-mark-thickness);
+  height: var(--_grip-mark-length);
+}
+
+/* A corner has no length to run along, so it gets a dot instead of a pill. */
+.resize-handle--top-left::after,
+.resize-handle--top-right::after,
+.resize-handle--bottom-left::after,
+.resize-handle--bottom-right::after {
+  width: var(--_grip-mark-thickness);
+  height: var(--_grip-mark-thickness);
+}
+
+.resize-handle:hover::after,
+.resize-handle:focus-visible::after {
+  opacity: 0.5;
+}
+
+/* Equal specificity to the pair above, so source order is what makes the drag
+   the stronger of the two states. */
+.resize-handle[data-dragging]::after {
+  opacity: 0.9;
+}
+`;

package/src/ui/placement/sidebar_styles.ts

@@ -0,0 +1,113 @@
+// The sidebar placement: a docked full-height panel that slides to a rail.
+export const SIDEBAR_STYLES: string = `
+/* Sidebar: a full-height docked panel that slides open/closed and
+   collapses to a slim icon rail (not the floating launcher). Docked right by
+   default; data-side="left" docks it left. Overlay by default — set
+   --ag-ui-position: static (and place this element in your own layout) for a
+   host-managed push instead. */
+:host([placement="sidebar"]) {
+  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
+  --_height: var(--ag-ui-height, var(--_viewport-height));
+  --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
+  transition: width var(--_motion) var(--_ease);
+}
+
+/* Maximized grows the column's width only: the host and the panel pinned
+   inside it, which reads its own width. */
+:host([placement="sidebar"][maximized]:not([collapsed])),
+:host([placement="sidebar"][maximized]:not([collapsed])) .chat {
+  width: var(--_maximized-width);
+}
+
+/* A side column leaves --ag-ui-min-page-width of the page beside it, whatever
+   its width came from: a drag, the token or maximize. Unset, the host keeps its
+   own cap (the fallback makes the second term endless) and the panel reads no
+   cap at all. Above the phone width only, where the column is the screen. */
+@media (min-width: 601px) {
+  :host([placement="sidebar"]),
+  :host([placement="side"]) {
+    max-width: min(
+      var(--_max-width),
+      calc(var(--_viewport-width) - var(--_min-page-width-set, calc(-1px * infinity)))
+    );
+  }
+
+  :host([placement="sidebar"]) .chat {
+    max-width: calc(var(--_viewport-width) - var(--_min-page-width-set));
+  }
+}
+
+:host([placement="sidebar"][data-side="left"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) auto var(--_viewport-inset-bottom)
+      var(--_viewport-inset-left)
+  );
+}
+
+/* The docked panel is pinned to the edge it docks against rather than filling
+   the host as a flex child. Collapsing shrinks the host to the rail width, and
+   a flex child would be squashed to 52px on the way out instead of sliding out
+   at full width. */
+/* The panel is taken out of flow so the collapse can slide it out at full
+   width; see the note above. That makes the host its containing block, and the
+   host is only one by accident: it is position: fixed by default. A host that
+   takes the documented route to a pushed layout instead of an overlay sets
+   --ag-ui-position: static, and a static element establishes nothing -- so the
+   panel resolved against the initial containing block, landed at the document
+   origin, and scrolled away with the page. Docked left it pinned to the
+   document's left edge rather than the host's.
+
+   It looked correct wherever it was first tried, because a full-height column
+   at the top of an unscrolled document is exactly where those two answers
+   coincide. Containment makes the host a containing block whatever its
+   position, so the panel stays in the box the host was given. It is a no-op in
+   the default case, which is already positioned. */
+:host([placement="sidebar"]) {
+  contain: layout;
+}
+
+:host([placement="sidebar"]) .chat {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: var(--_width);
+  transform-origin: right center;
+}
+
+:host([placement="sidebar"][data-side="left"]) .chat {
+  inset: 0 auto 0 0;
+  transform-origin: left center;
+}
+
+/* Collapsed sidebar: shrink the host to the rail width and slide the panel out
+   through the edge it docks against. Higher specificity than the generic
+   collapse rules, so it wins regardless of source order. */
+/* The rail is the full height of what the host left, not of the screen. It
+   said 100vh and pinned its own bottom, which put it under any chrome the host
+   had reserved -- and the icon lives at the top of the rail, so the one control
+   that reopens the panel was the first thing to disappear behind a sticky
+   header. */
+:host([placement="sidebar"][collapsed]) {
+  width: var(--_rail-width);
+  height: var(--_viewport-height);
+  max-height: var(--_viewport-height);
+  pointer-events: auto;
+}
+
+:host([placement="sidebar"][collapsed]) .chat {
+  transform: translateX(100%);
+}
+
+:host([placement="sidebar"][data-side="left"][collapsed]) .chat {
+  transform: translateX(-100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([placement="sidebar"]),
+  :host([placement="sidebar"]) .chat {
+    transition: none;
+  }
+}
+`;