@artooi/ag-ui-web-component 0.44.0 → 0.46.0

package/src/ui/transcript/message_styles.ts

@@ -0,0 +1,262 @@
+// Messages: the answer well, incoming-text animations, rendered markdown,
+// code blocks and their copy button, tables, and the pending dots.
+export const MESSAGE_STYLES: string = `
+/* ── 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
+   unit. A flex column on the message-list gap, stretched to the list width so
+   its children keep their own left/right alignment. data-answer-well opts into
+   the bordered "well"; without it the turn renders as a flat stack. */
+.answer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--_space);
+  align-self: stretch;
+  min-width: 0;
+}
+
+:host([data-answer-well]) .answer {
+  padding: var(--_pad);
+  background: var(--_well-bg);
+  border: 1px solid var(--_well-border);
+  border-radius: var(--_well-radius);
+}
+
+.message {
+  max-width: 80%;
+  padding: var(--_msg-pad);
+  border-radius: var(--_msg-radius);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  /* overflow-wrap, not word-break, and the difference is the whole reason a
+     markdown table used to be unreadable.
+
+     Both stop one long unbroken token blowing out the bubble, which is all this
+     is for. But word-break: break-word is the legacy spelling of "break
+     anywhere", and breaking anywhere drops the *min-content* width of every
+     descendant to one character. A table's column algorithm takes min-content
+     as an input, so the table always fitted max-width: 100%, the overflow-x:
+     auto below it never had anything to scroll, and the columns absorbed the
+     pressure by rendering one letter per line instead. A seven-column header
+     came out 162px tall.
+
+     overflow-wrap: break-word breaks a word only when it would otherwise
+     overflow its line, and leaves min-content alone -- so the bubble is still
+     protected and the table is free to be wider than the panel and scroll. */
+  overflow-wrap: break-word;
+}
+
+/* ── Incoming-text animations (data-text-animation) ─────────────────────── */
+/* .message--restored (rehydrated history) is excluded: entrance animations are
+   for freshly-arriving messages, not the whole transcript replaying on reload.
+   Word mode is excluded implicitly — restored bubbles aren't wrapped. */
+:host([data-text-animation="fade"]) .message--assistant:not(.message--restored) {
+  animation: ag-ui-msg-fade 0.25s ease both;
+}
+
+@keyframes ag-ui-msg-fade {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+
+.message--assistant .word {
+  animation: ag-ui-word-in 0.3s ease both;
+  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);
+}
+
+@keyframes ag-ui-word-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([data-text-animation="fade"]) .message--assistant,
+  .message--assistant .word {
+    animation: none;
+  }
+}
+
+.message--user {
+  align-self: flex-end;
+  background: var(--_user-bg);
+  color: var(--_user-fg);
+  border-bottom-right-radius: 4px;
+}
+
+.message--assistant {
+  align-self: flex-start;
+  background: var(--_assistant-bg);
+  border-bottom-left-radius: 4px;
+  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source
+     whitespace the renderer leaves between block tags. */
+  white-space: normal;
+}
+
+/* Rendered-markdown elements inside an assistant bubble. */
+.message--assistant > :first-child {
+  margin-top: 0;
+}
+
+.message--assistant > :last-child {
+  margin-bottom: 0;
+}
+
+.message--assistant p,
+.message--assistant ul,
+.message--assistant ol,
+.message--assistant blockquote,
+.message--assistant pre {
+  margin: 0.5em 0;
+}
+
+.message--assistant ul,
+.message--assistant ol {
+  padding-left: 1.3em;
+}
+
+.message--assistant a {
+  color: var(--_accent);
+  text-decoration: underline;
+}
+
+.message--assistant code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.92em;
+  background: rgba(127, 127, 127, 0.16);
+  padding: 1px 4px;
+  border-radius: 4px;
+}
+
+.message--assistant pre {
+  padding: 8px 10px;
+  overflow: auto;
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: 6px;
+}
+
+.message--assistant pre code {
+  background: none;
+  padding: 0;
+}
+
+/* The copy button sits inside the block, so it scrolls with wide code rather
+   than floating over the bubble. Positioning is on the pre; the button only
+   appears once one has been attached. */
+.message--assistant pre.has-copy {
+  position: relative;
+}
+
+/* The only reader of --ag-ui-surface and --ag-ui-text. Their defaults are
+   transparent and the body foreground, which is what this button rendered as
+   before either token existed; changing them repaints only this control. */
+.code-copy {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 0.75em;
+  line-height: 1.6;
+  color: var(--_muted);
+  background: var(--_surface);
+  border: 1px solid var(--_border);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+/* Revealed on hover or keyboard focus. Focus matters as much as hover here:
+   hidden-until-hover is invisible to a keyboard user otherwise. */
+.message--assistant pre.has-copy:hover .code-copy,
+.code-copy:focus-visible {
+  opacity: 1;
+}
+
+.code-copy:hover {
+  color: var(--_text);
+  background: var(--_hover);
+}
+
+.code-copy[data-state="copied"] {
+  opacity: 1;
+  color: var(--_text);
+}
+
+.code-copy[data-state="failed"] {
+  opacity: 1;
+  color: var(--_danger, var(--_text));
+}
+
+.message--assistant blockquote {
+  padding-left: 10px;
+  border-left: 3px solid var(--_border);
+  color: var(--_muted);
+}
+
+/* Markdown tables. table/thead/tbody/tr/th/td are all in the sanitizer's
+   ALLOWED_TAGS, so an agent can emit one. A wide table must scroll inside its
+   own box rather than stretch the message: the bubble is width-constrained, so
+   without this the columns either crush or push the layout sideways. */
+.message--assistant table {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+
+.message--assistant th,
+.message--assistant td {
+  padding: 6px 10px;
+  border: 1px solid var(--_border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.message--assistant th {
+  background: var(--_hover);
+  font-weight: 600;
+}
+
+.pending {
+  align-self: flex-start;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 12px 14px;
+  background: var(--_assistant-bg);
+  border-radius: 14px;
+  border-bottom-left-radius: 4px;
+}
+
+.pending-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--_muted);
+  animation: ag-ui-pending 1.2s infinite ease-in-out both;
+}
+
+.pending-dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.pending-dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+@keyframes ag-ui-pending {
+  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-3px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pending-dot {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+`;

package/src/ui/transcript/transcript.ts

@@ -8,8 +8,14 @@ import { fillUiString } from "../fill_ui_string.js";
 import { prettifyToolName } from "../progress/prettify_tool_name.js";
 import { renderRunNotice } from "../progress/run_notice.js";
 import { ThoughtsBlock } from "../progress/thoughts_block.js";
-import { ToolCallCard, type ToolPayload } from "../progress/tool_call_card.js";
+import {
+  ToolCallCard,
+  type ToolDisplayMode,
+  type ToolPayload,
+} from "../progress/tool_call_card.js";
+import { ToolStepGroup } from "../progress/tool_step_group.js";
 import type { UiStrings } from "../ui_strings.js";
+import { groupsToolSteps } from "./groups_tool_steps.js";
 import { renderMarkdown } from "./render_markdown.js";
 import { renderOrWarn } from "./render_or_warn.js";
 import { wrapWords } from "./reveal_words.js";
@@ -35,6 +41,8 @@ export interface TranscriptHost {
   readonly serverSummary: (name: string) => string | undefined;
   /** The element's `formatToolPayload`, asked per region of a card. */
   readonly formatToolPayload: (payload: ToolPayload) => Node | string | null;
+  /** The element's `toolDisplay`, read per card: it decides whether calls fold into a step group. */
+  readonly toolDisplay: () => ToolDisplayMode;
 }
 
 /**
@@ -54,6 +62,12 @@ export class Transcript {
   readonly #toolCards = new Map<string, ToolCallCard>();
   /** Card elements by call id, so a rendering handler can find its own card. */
   readonly #cardElements = new Map<string, HTMLElement>();
+  /**
+   * Cards whose call is being run, by call id. A card leaves the awaiting ones
+   * the moment its call is dispatched, and a handler that opens a prompt on its
+   * own card is still running long after, so it is found here.
+   */
+  readonly #running = new Map<string | undefined, ToolCallCard>();
   /**
    * Call ids whose card was already settled from a streamed server-side result
    * (`TOOL_CALL_RESULT`), so the post-run executeTool sweep doesn't overwrite
@@ -74,6 +88,24 @@ export class Transcript {
   // the answer group while a reasoning model thinks and collapsed once the
   // answer's first text token arrives. `null` outside a reasoning turn.
   #thoughts: ThoughtsBlock | null = null;
+  /** The step group behind each group element, so a new card can find its run. */
+  readonly #stepGroups = new WeakMap<Element, ToolStepGroup>();
+  /**
+   * An empty comment after each step group that has rendered output, which
+   * every later output is placed before, so a group's outputs come out in call
+   * order. Every card of a round joins its group before any handler runs, so
+   * placing each output straight after the group would put the newest first;
+   * and a marker rather than the last output, because an output may be a
+   * fragment, which leaves nothing behind to place the next one after.
+   */
+  readonly #groupEnds = new WeakMap<Element, Comment>();
+  /**
+   * The step group element each placed output belongs to. A tool's own output
+   * does not end its group: the next call joins the group above it. Without
+   * that, replay -- which draws each restored call's output before the next
+   * call's card -- would split a run the live stream drew as one group.
+   */
+  readonly #outputGroups = new WeakMap<Node, Element>();
 
   constructor(host: TranscriptHost) {
     this.#host = host;
@@ -185,6 +217,20 @@ export class Transcript {
   forgetCards(): void {
     this.#serverSettled.clear();
     this.#cardElements.clear();
+    this.#running.clear();
+  }
+
+  /** Remember the card of a call being run, for {@link setAsking}. */
+  holdRunning(callId: string, card: ToolCallCard): void {
+    this.#running.set(callId, card);
+  }
+
+  /**
+   * Say whether a prompt is open on the card of a running call. A call id of
+   * none, or one no card was held for, has no card to say it on.
+   */
+  setAsking(callId: string | undefined, asking: boolean): void {
+    this.#running.get(callId)?.setAsking(asking);
   }
 
   /** Empty the list back to its empty-state region. The last half of wiping it. */
@@ -383,7 +429,26 @@ export class Transcript {
     // `after` rather than an insert-or-append branch: both callers set the card
     // element immediately before calling, and a parentless anchor makes `after`
     // a no-op, so the alternative would be a branch nothing can reach.
-    this.#cardElements.get(call.id)?.after(node);
+    //
+    // A card folded into a step group has its output placed after the group
+    // rather than inside it, so a chart is never hidden one click down.
+    const anchor = this.#cardElements.get(call.id);
+    const group = anchor?.closest(".tool-group");
+    if (group === null || group === undefined) {
+      anchor?.after(node);
+    } else {
+      let end = this.#groupEnds.get(group);
+      if (end === undefined) {
+        end = document.createComment("");
+        group.after(end);
+        this.#groupEnds.set(group, end);
+      }
+      const placed = node instanceof DocumentFragment ? [...node.children] : [node];
+      end.before(node);
+      for (const output of placed) {
+        this.#outputGroups.set(output, group);
+      }
+    }
     this.afterGrew();
   }
 
@@ -421,9 +486,50 @@ export class Transcript {
       formatPayload: (payload) => this.#host.formatToolPayload(payload),
     });
     this.#toolCards.set(call.id, card);
-    this.ensureGroup().appendChild(card.element);
+    if (groupsToolSteps(this.#host.toolDisplay())) {
+      this.#stepGroup().add(card.element, summary);
+    } else {
+      this.ensureGroup().appendChild(card.element);
+    }
     this.updateEmptyState();
     this.follow();
     return card;
   }
+
+  /**
+   * Open the step group ``card`` sits in, at once, ahead of a prompt about to be
+   * drawn inside it. A no-op for a card drawn in a card display mode, which has
+   * no group.
+   */
+  revealStep(card: ToolCallCard): void {
+    const group = card.element.closest(".tool-group");
+    (group === null ? undefined : this.#stepGroups.get(group))?.reveal();
+  }
+
+  /**
+   * The step group a new card joins. Consecutive cards share one, and so do
+   * cards separated only by the group's own rendered output; anything else in
+   * between (text, a confirmation, a question) starts the next.
+   *
+   * The pending dots are not skipped over: a tool call takes them down before
+   * its card is drawn, so they are never what a card finds at the foot of the
+   * turn.
+   */
+  #stepGroup(): ToolStepGroup {
+    const answer = this.ensureGroup();
+    const last = answer.lastElementChild;
+    const existing =
+      last === null ? undefined : this.#stepGroups.get(this.#outputGroups.get(last) ?? last);
+    if (existing !== undefined) {
+      return existing;
+    }
+    const group = new ToolStepGroup(this.#host.strings());
+    this.#stepGroups.set(group.element, group);
+    if (last === null) {
+      answer.prepend(group.element);
+    } else {
+      last.after(group.element);
+    }
+    return group;
+  }
 }

package/src/ui/transcript/transcript_styles.ts

@@ -0,0 +1,140 @@
+// The scrolling message list and what is positioned against it: jump to
+// latest, the quote-selection offer, the live region and the inset probe.
+export const TRANSCRIPT_STYLES: string = `
+/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
+   something. Anchored to the panel rather than the list so it does not scroll
+   with the content it is offering to scroll to. */
+/* The transcript's own box, and the only one whose foot is the transcript's
+   foot. The panel's foot is below the composer, the chips and the footer. */
+.messages-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jump-latest {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--_pad);
+  z-index: 2;
+  display: none;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.4em 0.9em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  /* A raised surface, not the panel's own background. Reusing --_bg made the
+     pill the same colour as everything behind it, leaving a 1px border and a
+     shadow to carry the whole affordance -- and a dark-on-dark shadow carries
+     nothing. --_hover is the token that already means "lifted off the panel",
+     and it separates in both themes without competing with the accent the send
+     button owns. */
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+.jump-latest[data-missed="true"] {
+  display: flex;
+}
+
+.jump-latest:hover {
+  border-color: var(--_accent);
+}
+
+/* The offer to quote a selection. Positioned in script against the transcript
+   box, which is the only ancestor whose top and foot are the transcript's --
+   the same reason .jump-latest lives here. The translate is the half the
+   script does not do: script sets the point the offer hangs from, CSS decides
+   which corner of the offer that point is. */
+.quote-selection {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -100%);
+  padding: 0.25em 0.7em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.8em;
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+/* Flipped under the selection when there was no room above it. Only the
+   vertical half of the translate changes: it still hangs from its own centre
+   horizontally. */
+.quote-selection[data-below="true"] {
+  transform: translate(-50%, 0);
+}
+
+.quote-selection:hover {
+  border-color: var(--_accent);
+}
+
+/* Screen-reader-only status region. Off-screen rather than display:none or
+   visibility:hidden, both of which take the element out of the accessibility
+   tree entirely -- a hidden live region announces nothing at all, which is the
+   classic way this pattern is written wrong.
+
+   The 1px box with clip-path, rather than width/height 0, is the shape that
+   survives: a zero-sized element is dropped from the tree by some engines. */
+/* A used-value reader for the four viewport-inset tokens, and the only
+   reliable one. getComputedStyle().getPropertyValue() on an unregistered
+   custom property hands back the substituted token stream, not a length: it
+   returns "4rem" verbatim, and "calc(56px + env(safe-area-inset-top))" as
+   "calc(56px + 0px)" -- which parses as NaN and takes the whole inset with it.
+   Padding is a real property, so the same tokens come back resolved to px.
+
+   visibility rather than display: none, because a box that generates no
+   layout has no used values to read. Zero-sized, absolutely positioned and
+   inert, so it costs nothing but the read. */
+.viewport-probe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+  padding: var(--_viewport-inset-top) var(--_viewport-inset-right)
+    var(--_viewport-inset-bottom) var(--_viewport-inset-left);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
+  /* The browser's own scroll anchoring competes with the scroller for the same
+     job and wins unpredictably -- it can hold the view still exactly when we
+     want to follow. Turned off so following is decided in one place. Safari
+     does not implement it, which is itself a reason not to depend on it. */
+  overflow-anchor: none;
+  padding: var(--_pad);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_space);
+}
+`;

package/src/ui/ui_strings.ts

@@ -184,6 +184,29 @@ export interface UiStrings {
   /** Label on the toggle that expands a tool card's body. */
   details: string;
 
+  // ── Tool-step group ─────────────────────────────────────────────────────────
+  // The row a run's consecutive calls fold into under the default
+  // data-tool-display. A group of one shows that call's own label instead, so
+  // the three labels are filled with 2 or more; the notes count from 1.
+  /** The group's label while a step waits on the user. Token: `{count}` (steps). */
+  toolGroupSteps: string;
+  /** The group's label while a step runs. Token: `{count}` (steps). */
+  toolGroupWorking: string;
+  /** The group's label once every step has settled. Token: `{count}` (steps). */
+  toolGroupWorked: string;
+  /** Note on the group's row: steps waiting on the user. Token: `{count}`. */
+  toolGroupWaiting: string;
+  /** Note on the group's row: steps that failed. Token: `{count}`. */
+  toolGroupFailed: string;
+  /** Note on the group's row: steps that were declined. Token: `{count}`. */
+  toolGroupDeclined: string;
+  /**
+   * Set after a step's label when an earlier step in its group has the same
+   * one, so two "Fill field" steps read "Fill field" and "Fill field (2)".
+   * Grouped mode only. Token: `{n}` (which occurrence, from 2).
+   */
+  toolStepRepeat: string;
+
   // ── Delegated sub-agent ─────────────────────────────────────────────────────
   /**
    * The delegation row's text before the server's own status line lands.
@@ -423,6 +446,14 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   interruptedLabel: "Not finished",
   details: "Details",
 
+  toolGroupSteps: "{count} steps",
+  toolGroupWorking: "Working through {count} steps",
+  toolGroupWorked: "Worked through {count} steps",
+  toolGroupWaiting: "{count} waiting for you",
+  toolGroupFailed: "{count} failed",
+  toolGroupDeclined: "{count} declined",
+  toolStepRepeat: "({n})",
+
   subAgentWorking: "Working…",
   subAgentDelegatedTo: "Delegated to {agent}",
   subAgentFinished: "{agent} finished",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.44.0";
+export const VERSION: string = "0.46.0";

package/dist/ui/placement/is_collapsible_placement.d.ts

@@ -1,18 +0,0 @@
-/**
- * Whether `placement` has a collapsed state at all.
- *
- * `page` does not. It is a dedicated route rather than a panel sitting on
- * someone else's page, so there is no "away" for it to go to: collapsing it
- * left a strip of application chrome fixed over a route that no longer had an
- * owner. It is also the placement that hides the launcher, so the usual way
- * back does not exist here.
- *
- * The header hides its collapse control under this placement, but a control
- * removed from the UI is not a state removed from the model -- the property,
- * the attribute and a value restored from storage all still reach it. This is
- * what the reachable paths are gated on; the stylesheet covers the one path
- * that never passes through here, an attribute written straight onto the
- * element.
- */
-export declare function isCollapsiblePlacement(placement: string | null): boolean;
-//# sourceMappingURL=is_collapsible_placement.d.ts.map

package/dist/ui/placement/is_collapsible_placement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"is_collapsible_placement.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/is_collapsible_placement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAExE"}

package/dist/ui/placement/is_draggable_placement.d.ts

@@ -1,9 +0,0 @@
-/**
- * Whether `placement` is one whose launcher can be dragged.
- *
- * Asked by two owners: the placement, deciding whether a gesture may move the
- * widget, and the element, deciding whether a first mount starts collapsed --
- * the corner placements are the two with a launcher to collapse to.
- */
-export declare function isDraggablePlacement(placement: string | null): boolean;
-//# sourceMappingURL=is_draggable_placement.d.ts.map

package/dist/ui/placement/is_draggable_placement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"is_draggable_placement.d.ts","sourceRoot":"","sources":["../../../src/ui/placement/is_draggable_placement.ts"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAEtE"}

package/src/ui/placement/is_collapsible_placement.ts

@@ -1,19 +0,0 @@
-/**
- * Whether `placement` has a collapsed state at all.
- *
- * `page` does not. It is a dedicated route rather than a panel sitting on
- * someone else's page, so there is no "away" for it to go to: collapsing it
- * left a strip of application chrome fixed over a route that no longer had an
- * owner. It is also the placement that hides the launcher, so the usual way
- * back does not exist here.
- *
- * The header hides its collapse control under this placement, but a control
- * removed from the UI is not a state removed from the model -- the property,
- * the attribute and a value restored from storage all still reach it. This is
- * what the reachable paths are gated on; the stylesheet covers the one path
- * that never passes through here, an attribute written straight onto the
- * element.
- */
-export function isCollapsiblePlacement(placement: string | null): boolean {
-  return placement !== "page";
-}

package/src/ui/placement/is_draggable_placement.ts

@@ -1,23 +0,0 @@
-/**
- * Placements whose launcher can be dragged. The rest have nowhere to put it:
- * a sidebar collapses to a full-height edge rail, "embedded" and "page" hide
- * the launcher entirely and keep their header bar, and a full-bleed panel
- * covers the screen it would be opening into.
- */
-const DRAGGABLE_PLACEMENTS: ReadonlySet<string | null> = new Set([
-  null,
-  "",
-  "floating",
-  "bottom-left",
-]);
-
-/**
- * Whether `placement` is one whose launcher can be dragged.
- *
- * Asked by two owners: the placement, deciding whether a gesture may move the
- * widget, and the element, deciding whether a first mount starts collapsed --
- * the corner placements are the two with a launcher to collapse to.
- */
-export function isDraggablePlacement(placement: string | null): boolean {
-  return DRAGGABLE_PLACEMENTS.has(placement);
-}