@artooi/ag-ui-web-component 0.38.0 → 0.40.0

package/src/ui/styles.ts

@@ -38,6 +38,12 @@ export const STYLES = `
   --_header-fg: var(--ag-ui-header-fg, #ffffff);
   --_border: var(--ag-ui-border, #e2e2ec);
   --_radius: var(--ag-ui-radius, 12px);
+  /* The panel's own frame, which is the one corner a placement can put against
+     the edge of the viewport. The placements that do (page, sidebar, side, full,
+     and all but embedded on a small viewport) square this and leave --_radius alone, so
+     the answer well and the controls inside the panel stay as round as the
+     theme says: none of them meets that edge. */
+  --_panel-radius: var(--ag-ui-panel-radius, var(--_radius));
 
   /* Body text and raised chrome, read only by the code-block copy button.
      The defaults restate what it inherits, so a host that sets neither sees
@@ -84,6 +90,7 @@ export const STYLES = `
   --_tool-icon-done: var(--ag-ui-tool-icon-done, "✓");
   --_tool-icon-error: var(--ag-ui-tool-icon-error, "✕");
   --_tool-icon-declined: var(--ag-ui-tool-icon-declined, "⊘");
+  --_tool-icon-interrupted: var(--ag-ui-tool-icon-interrupted, "◌");
 
   /* Disclosure marks on every expandable row. Tokenised for the same reason
      the status icons above are: a host re-theming one set and not the other
@@ -95,6 +102,7 @@ export const STYLES = `
   /* Answer well (opt-in via data-answer-well) — boxes a whole assistant turn. */
   --_well-bg: var(--ag-ui-well-bg, transparent);
   --_well-border: var(--ag-ui-well-border, var(--_border));
+  --_well-radius: var(--ag-ui-well-radius, var(--_radius));
 
   /* Surface — set --ag-ui-shadow: none for a flush, embedded panel. */
   --_shadow: var(--ag-ui-shadow, 0 12px 32px rgba(20, 20, 50, 0.18));
@@ -172,7 +180,24 @@ export const STYLES = `
      keyboard changes no viewport-percentage length -- not vh, not dvh, not svh
      -- so a full-bleed panel on a phone has to be told the height rather than
      deriving it. The value to publish there is the visual viewport's. */
-  --_viewport-height: var(--ag-ui-viewport-height, var(--_visual-viewport-height));
+  --_viewport-height: var(
+    --ag-ui-viewport-height,
+    calc(
+      min(var(--_visual-viewport-inset-top) + var(--_visual-viewport-height), 100dvh - var(--_viewport-inset-bottom)) -
+        var(--_viewport-inset-top) - var(--_keyboard-inset-top)
+    )
+  );
+  /* That default is the host's box cut to the part of the screen the user can
+     see: from the top the panel starts at, the host's reserved top moved down
+     by the keyboard inset below, to whichever is further up, the bottom of the
+     visible area or the host's reserved bottom. Where nothing has measured, the
+     visible area is the layout viewport with no pan, and this is the host's
+     box exactly.
+
+     Cut rather than replaced. A measured height used as the whole answer kept
+     a bar the host reserved at the top in the position and out of the height,
+     so the panel ran that far past the bottom of the visible area, with its
+     composer behind the keyboard. */
   /* The measured height of the part of the screen the user can actually see,
      written by the element from the visual viewport and falling back to the
      layout viewport where nothing has measured yet.
@@ -185,11 +210,15 @@ export const STYLES = `
 
      Separate from the token above so a host that states the usable height
      outright still wins: the element writes this one inline, and an inline
-     value would otherwise outrank the host's own rule. */
-  --_visual-viewport-height: var(
-    --ag-ui-visual-viewport-height,
-    calc(100vh - var(--_viewport-inset-top) - var(--_viewport-inset-bottom))
-  );
+     value would otherwise outrank the host's own rule.
+
+     The fallback is dvh rather than vh because the browser's own bars do move
+     it, where a keyboard does not. iOS Safari resolves vh to the viewport with
+     its bars collapsed, so on a page that does not scroll them away a panel
+     sized from it ran under the address bar by the bars' height -- 40px on
+     the phone measured -- with a docked composer underneath. dvh is the
+     viewport with the bars as they are. */
+  --_visual-viewport-height: var(--ag-ui-visual-viewport-height, 100dvh);
   /* How much of the layout viewport is hidden below the visible one, measured
      and written by the element alongside the height above.
 
@@ -204,6 +233,24 @@ export const STYLES = `
      A host wanting no keyboard lift at all sets --ag-ui-keyboard-inset: 0px. */
   --_keyboard-inset: var(--ag-ui-keyboard-inset, var(--_visual-viewport-inset-bottom));
   --_visual-viewport-inset-bottom: var(--ag-ui-visual-viewport-inset-bottom, 0px);
+  /* How far a panel anchored at the top moves down for a keyboard, below the
+     top the host reserved. With the same two-token shape as the lift above;
+     0px keeps the panel at the host's top.
+
+     To show the field being typed into, a browser pans the visible area down
+     the layout viewport, and a fixed element stays against the layout top, so
+     a panel that did not move showed only its lower part, from the pan down,
+     with its header off the screen and an empty band under it. It moves by
+     what the pan goes past the host's reserved top, not by the whole pan: the
+     pan scrolls a bar reserved there away with the rest of the page rather
+     than pushing it down, and adding the two put the panel a whole bar below
+     the visible area. A corner panel anchored at the bottom does not use this,
+     because the band below already accounts for the pan. */
+  --_keyboard-inset-top: var(--ag-ui-keyboard-inset-top, max(0px, var(--_visual-viewport-inset-top) - var(--_viewport-inset-top)));
+  /* How much of the layout viewport is hidden above the visible one: how far
+     the browser panned. Measured and written by the element with the two
+     above. */
+  --_visual-viewport-inset-top: var(--ag-ui-visual-viewport-inset-top, 0px);
   --_viewport-width: var(
     --ag-ui-viewport-width,
     calc(100vw - var(--_viewport-inset-left) - var(--_viewport-inset-right))
@@ -254,11 +301,14 @@ export const STYLES = `
   --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_edge-gutter)));
   /* Reading-column width for placement="page" (full-bleed, centred content). */
   --_content-max-width: var(--ag-ui-content-max-width, 820px);
+  /* The greeting over an empty full-page conversation. The size scales with
+     the viewport between a phone and a desktop rather than stepping at a
+     breakpoint. */
+  --_greeting-font: var(--ag-ui-greeting-font, var(--_font));
+  --_greeting-size: var(--ag-ui-greeting-size, clamp(1.5rem, 4vw, 2.25rem));
   /* Slim rail the sidebar placement collapses to. Only that placement reads
      it, but it is declared here so every alias has a default in one place. */
   --_rail-width: var(--ag-ui-rail-width, 52px);
-  /* Width of the docked conversation list on a full-page chat. */
-  --_threads-rail-width: var(--ag-ui-threads-rail-width, 280px);
 
   position: var(--_position);
   inset: var(--_inset);
@@ -337,23 +387,24 @@ export const STYLES = `
 }
 
 :host([placement="side"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_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(--ag-ui-width, 420px);
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-  --_radius: var(--ag-ui-radius, 0);
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
 }
 
 :host([placement="full"]) {
   --_inset: var(
     --ag-ui-inset,
-    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+    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));
-  --_radius: var(--ag-ui-radius, 0);
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
 }
 
 /* Page: full-bleed background with a centred reading column capped at
@@ -364,13 +415,14 @@ export const STYLES = `
 :host([placement="page"]) {
   --_inset: var(
     --ag-ui-inset,
-    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+    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));
-  --_radius: var(--ag-ui-radius, 0);
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
 }
 
 :host([placement="page"]) .messages {
@@ -430,7 +482,7 @@ export const STYLES = `
   :host([placement=""]:not([data-small-viewport="off"])) {
     --_inset: var(
       --ag-ui-inset,
-      var(--_viewport-inset-top) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
         calc(var(--_viewport-inset-bottom) + var(--_keyboard-inset))
         var(--_viewport-inset-left)
     );
@@ -438,7 +490,7 @@ export const STYLES = `
     --_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));
-    --_radius: var(--ag-ui-radius, 0);
+    --_panel-radius: var(--ag-ui-panel-radius, 0);
     --_shadow: var(--ag-ui-shadow, none);
   }
 
@@ -460,16 +512,20 @@ export const STYLES = `
    --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, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_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(--ag-ui-width, 420px);
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
-  --_radius: var(--ag-ui-radius, 0);
+  --_panel-radius: var(--ag-ui-panel-radius, 0);
   transition: width var(--_motion) var(--_ease);
 }
 
 :host([placement="sidebar"][data-side="left"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) auto var(--_viewport-inset-bottom) var(--_viewport-inset-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
@@ -742,7 +798,7 @@ export const STYLES = `
   min-height: 0;
   background: var(--_bg);
   border: 1px solid var(--_border);
-  border-radius: var(--_radius);
+  border-radius: var(--_panel-radius);
   box-shadow: var(--_shadow);
   overflow: hidden;
 }
@@ -957,48 +1013,6 @@ export const STYLES = `
   display: none;
 }
 
-/* A docked conversation list: beside the transcript rather than over it.
-
-   A full-page chat is the one surface with width to spare, and covering the
-   conversation to show the list of conversations is the wrong trade there --
-   it hides the thing you are trying to get back to. Everywhere else the panel
-   is a few hundred pixels wide and a docked list would leave a column of
-   transcript narrower than the messages in it, so this is the only placement
-   that gets it.
-
-   The transcript is moved by padding on the shell rather than by making the
-   list a flex sibling: the drawer is the last child of the panel, and no
-   selector reaches backwards from it to the rows that have to shift. That is
-   also why the state is stamped on the host. */
-:host([data-threads-docked]) .drawer {
-  /* Not a scrim: the page behind it is still the user's to work in. */
-  pointer-events: none;
-}
-
-:host([data-threads-docked]) .drawer-backdrop {
-  display: none;
-}
-
-:host([data-threads-docked]) .drawer-panel {
-  width: var(--_threads-rail-width);
-  pointer-events: auto;
-  border-inline-end: 1px solid var(--_border);
-  box-shadow: none;
-}
-
-:host([data-threads-docked]) .messages,
-:host([data-threads-docked]) .input-row,
-:host([data-threads-docked]) .skill-chips,
-:host([data-threads-docked]) .attachment-tray {
-  padding-inline-start: calc(
-    var(--_threads-rail-width) + max(var(--_pad), (100% - var(--_content-max-width)) / 2)
-  );
-}
-
-:host([data-threads-docked]) .header {
-  padding-inline-start: calc(var(--_threads-rail-width) + var(--_pad));
-}
-
 /* The page placement has no collapsed state, so it offers no control for one.
    A dedicated route has no "away" to go to: shrinking it left a strip of
    application chrome fixed over a route that no longer had an owner, and this
@@ -1176,6 +1190,162 @@ export const STYLES = `
   display: none;
 }
 
+/* The greeting layout: a greeting over an empty conversation, and the
+   composer centred beneath it until the conversation has something in it.
+
+   On by default for the page placement, where a conversation is the whole
+   route; data-greeting="off" turns it off there. An embedded panel opts in
+   with any other data-greeting value. No other placement has it: a panel
+   opened from a launcher is already mid-task, and a greeting in a corner
+   panel costs space and says little.
+
+   The greeting itself renders under every placement and is hidden here, so a
+   placement switch at runtime needs nothing from script. */
+.greeting {
+  display: none;
+}
+
+:host([placement="page"]:not([data-greeting="off"])) .greeting,
+:host([placement="embedded"][data-greeting]:not([data-greeting="off"])) .greeting {
+  display: block;
+  margin-block-end: calc(var(--_space) * 2);
+  font-family: var(--_greeting-font);
+  font-size: var(--_greeting-size);
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--_fg);
+  overflow-wrap: anywhere;
+}
+
+/* Centring is two equal flexible boxes either side of the composer rows: the
+   transcript above, which already grows, and this one below. Equal zero bases
+   make the two halves the same height whatever they hold, so the rows sit in
+   the middle of the panel below its header, and stay there as a draft, an
+   attachment tray or a hint grows them, because growth splits into both
+   halves at once.
+
+   A pseudo element rather than a node, so no host layout and nothing that
+   counts children can see it. It exists whether or not the conversation is
+   empty and only its growth changes, because a box that appears and
+   disappears is a box nothing can ever transition.
+
+   Only the rule that generates it names the placements. The one that grows it
+   needs nothing but the state: where the first rule does not apply there is no
+   box to grow. The box is empty, so its automatic basis is already zero, the
+   same as the transcript's; nothing here writes the flex shorthand, because
+   this selector is the more specific of the two and a shorthand would win
+   over the growth. */
+:host([placement="page"]:not([data-greeting="off"])) .chat::after,
+:host([placement="embedded"][data-greeting]:not([data-greeting="off"])) .chat::after {
+  content: "";
+}
+
+/* Not while a restore is in flight: a conversation a remote store is still
+   fetching is more likely to have messages than not, and centring it first
+   would drop the composer the moment they land. */
+:host([data-empty]:not([data-restoring])) .chat::after {
+  flex-grow: 1;
+}
+
+/* Only the send that leaves the empty state travels. The element arms this for
+   that one change and disarms it whenever the transcript is cleared, so a
+   restored conversation, a thread switch and a new chat all snap. Growth rather
+   than a transform, because the rows between the transcript and the composer
+   move with it, and growth is continuous where a reorder is not. Reduced motion
+   needs no rule of its own: the motion token already collapses to a frame
+   there.
+
+   The rule over the composer fades in over the same stretch. Appearing at once,
+   it was drawn across the page at the composer's destination while the
+   composer was still on its way there. */
+:host([data-composer-settling]) .chat::after {
+  transition: flex-grow var(--_motion) var(--_ease);
+}
+
+:host([data-composer-settling]) .input-row {
+  transition: border-color var(--_motion) var(--_ease);
+}
+
+/* The greeting and whatever the host slotted sit at the foot of the upper
+   half, directly over the composer, rather than floating in its middle. The
+   region is hidden once the conversation has content, so this needs no state
+   of its own. */
+:host([placement="page"]:not([data-greeting="off"]):not([data-restoring])) .empty,
+:host([placement="embedded"][data-greeting]:not([data-greeting="off"]):not([data-restoring])) .empty {
+  margin: auto auto 0;
+}
+
+/* The rule over the composer separates it from a transcript. Over nothing it
+   is a line drawn across the middle of the page. */
+:host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring])) .input-row,
+:host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring])) .input-row {
+  border-block-start-color: transparent;
+}
+
+/* On a phone the composer stays at the foot and the greeting takes the room
+   above it, which is the other way round from everything above.
+
+   Centring is a shape for a screen with room to spare: the composer reads as
+   the one thing on the page, and whichever way the rows grow there is space
+   left on both sides of them. A phone has no space to spare, and the keyboard
+   is what takes it -- opening one leaves a 426px-tall visible area with the
+   composer halfway up it and an empty band underneath, which is the half of
+   the screen a thumb is already resting on. Docked, the field sits directly
+   over the keyboard, where every chat on the platform puts it, and the
+   greeting keeps the rest.
+
+   Both rules restate the selector they override, with the breakpoint's own
+   opt-out added: this is part of the shape a host keeps its desktop layout
+   instead of, so it goes the same way as the rest of that shape. Restating
+   rather than adding conditions to the originals keeps each of those rules
+   readable as one decision, and source order settles the pair. */
+@media (max-width: 600px) {
+  :host([data-empty]:not([data-restoring]):not([data-small-viewport="off"])) .chat::after {
+    flex-grow: 0;
+  }
+
+  /* The empty region fills the transcript instead of being centred in it as a
+     block, so the two things in it can go to different places: the prompts the
+     host offers to the foot, against the composer, and the greeting to the
+     middle of what they leave.
+
+     A prompt chip is a way into the conversation. Against the field it starts,
+     it reads as one; under the greeting halfway up the panel, with the field
+     at the foot, it reads as decoration next to something else. Nothing here
+     moves them on a screen where the composer is still centred: there the
+     whole region hangs at the foot of the upper half, directly over the
+     composer, and the prompts are already against it.
+
+     Auto block margins on the greeting are what centre it, and they take the
+     free space whether or not there are prompts below to leave any, so a host
+     that offers none gets a greeting in the middle of the transcript rather
+     than one clinging to the composer.
+     The region declares a display here, which outranks the rule collapsing a
+     hidden one, so it says it is not hidden itself. Nothing sets the two
+     apart today -- the transcript writes the hidden property and the host's
+     data-empty from one expression -- and that is exactly why: a rule holding
+     because of how a method in another file happens to be written is a rule
+     holding by luck. */
+  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]),
+  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]) {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting,
+  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting {
+    margin-block: auto;
+  }
+}
+
+/* Nor does the greeting paint while a restore is in flight. Hidden rather than
+   removed, so it keeps its place and nothing around it moves when it shows. */
+:host([data-restoring]) .greeting {
+  visibility: hidden;
+}
+
 /* ── Answer group / well ─────────────────────────────────────────
    One .answer per assistant turn wraps the streamed text, its tool cards,
    and the pending indicator so a whole answer reads (and can be boxed) as one
@@ -1194,7 +1364,7 @@ export const STYLES = `
   padding: var(--_pad);
   background: var(--_well-bg);
   border: 1px solid var(--_well-border);
-  border-radius: var(--_radius);
+  border-radius: var(--_well-radius);
 }
 
 .message {
@@ -1591,6 +1761,13 @@ export const STYLES = `
   color: var(--_muted);
 }
 
+/* Not finished: muted like declined, since nothing failed, but its own glyph,
+   since nobody refused it either. */
+.tool-call[data-status="interrupted"] .tool-call-icon::before {
+  content: var(--_tool-icon-interrupted);
+  color: var(--_muted);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .tool-call[data-status="pending"] .tool-call-icon {
     animation: none;
@@ -1629,7 +1806,8 @@ export const STYLES = `
   color: var(--_danger);
 }
 
-.tool-call[data-status="declined"] .tool-call-status {
+.tool-call[data-status="declined"] .tool-call-status,
+.tool-call[data-status="interrupted"] .tool-call-status {
   color: var(--_muted);
 }
 
@@ -1645,6 +1823,17 @@ export const STYLES = `
   gap: 3px;
 }
 
+/* A call with no arguments drops the region rather than framing an empty
+   object, and a settled card drops the result region until it has one -- both
+   by setting the hidden property, and an author display beats the user-agent
+   rule for that attribute. Without this the region kept laying out: 42px of
+   card holding the ARGUMENTS heading over nothing, on every call the agent
+   made with no arguments, in the display mode that shows arguments by
+   default. */
+.tool-call-section[hidden] {
+  display: none;
+}
+
 /* The heading that tells the two payloads apart. Without it the arguments and
    the result were one run of text and a reader had to guess the boundary. */
 .tool-call-section-label {
@@ -2315,8 +2504,8 @@ export const STYLES = `
   display: none;
 }
 
-/* The mic button's mount point; filled only once #wireVoice mounts the
-   control. */
+/* The mic button's mount point; filled only once ComposerVoice.wire mounts
+   the control, which it skips unless transcription is configured. */
 .voice-slot {
   display: contents;
 }
@@ -2993,6 +3182,15 @@ export const STYLES = `
   padding: 10px 12px;
 }
 
+/* The row is hidden whenever the host offers no skills, which is most elements
+   most of the time, and an author display beats the user-agent rule for the
+   hidden attribute. Without this it kept its padding: 20px of panel between
+   the transcript and the composer, under every placement, reading as the gap
+   under whatever the transcript ends with. */
+.skill-chips[hidden] {
+  display: none;
+}
+
 .skill-chip {
   border: 1px solid var(--_border);
   border-radius: 999px;
@@ -3050,6 +3248,14 @@ export const STYLES = `
   box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);
 }
 
+/* Closed nearly all of the time and mounted on every element. The display
+   above beats the user-agent rule for the hidden attribute, so without this a
+   closed palette still painted its margin, border and shadow as a line over
+   the composer. */
+.skill-palette[hidden] {
+  display: none;
+}
+
 .skill-item {
   display: flex;
   flex-direction: column;
@@ -3096,17 +3302,26 @@ export const STYLES = `
   inset: 0;
   z-index: 5;
   display: flex;
-  transition: visibility var(--_motion) var(--_ease);
+  /* Visible at once on the way in. Opening moves focus to the list in the
+     same task that unhides it, and an element still hidden cannot take focus:
+     a transition on visibility starts at its first value, so easing it in
+     left the drawer hidden at exactly that instant and the focus call was
+     dropped at every placement. Reduced motion shortens the transition
+     without removing it, so it had the same first frame. */
+  transition: visibility 0s;
 }
 
 /* Closed. The overlay keeps its box (display, not none) so the backdrop and
    panel inside it stay rendered and can transition both ways; visibility is
    what takes the whole subtree out of the tab order, the a11y tree and hit
-   testing at rest, and it holds off until the slide has finished. */
+   testing at rest. On the way out it is delayed rather than eased, so it
+   flips only once the slide has finished. A transition is read from the
+   state being entered, which is what lets the two directions differ. */
 .drawer[hidden] {
   display: flex;
   visibility: hidden;
   pointer-events: none;
+  transition: visibility 0s var(--_motion);
 }
 
 .drawer[hidden] .drawer-backdrop {
@@ -3135,20 +3350,29 @@ export const STYLES = `
   /* Scrolling past the end of this must not scroll the page behind it. */
   overscroll-behavior: contain;
   transform-origin: top center;
+  /* Visibility flips at once on the way in, for the drawer's reason: opening
+     focuses the panel in the same task that unhides it, and an element still
+     hidden cannot take focus. The fade and the scale still ease in. */
   transition:
     opacity var(--_motion) var(--_ease),
     transform var(--_motion) var(--_ease),
-    visibility var(--_motion) var(--_ease);
+    visibility 0s;
 }
 
 /* Same idiom as the drawer: laid out at rest, hidden by visibility, so the
-   popover can animate open and closed. */
+   popover can animate open and closed. The whole list is restated because a
+   transition is read from the state being entered; only visibility differs,
+   delayed rather than eased so it flips once the exit has played. */
 .checkpoints[hidden] {
   display: flex;
   visibility: hidden;
   pointer-events: none;
   opacity: 0;
   transform: scale(0.96) translateY(-6px);
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility 0s var(--_motion);
 }
 
 .checkpoints-title {
@@ -3346,6 +3570,13 @@ export const STYLES = `
   padding: 0 var(--_pad) var(--_space);
 }
 
+/* Empty whenever no run is in flight, and hidden then. Same reason as the
+   palette: the display above would otherwise keep the bottom padding as dead
+   space over the composer. */
+.queued[hidden] {
+  display: none;
+}
+
 .queued-chip {
   max-width: 100%;
   overflow: hidden;