@artooi/ag-ui-web-component 0.47.0 → 0.48.0

package/src/ui/placement/dock_styles.ts

@@ -0,0 +1,91 @@
+// Where a docked panel stands: above the bottom bar under collapse-to="bar",
+// above the host's anchor under collapse-to="none". Token restatements only;
+// the bar's own shape is in the collapse module, after the launcher it
+// restyles.
+export const DOCK_STYLES: string = `
+/* ── Dock ────────────────────────────────────────────────────────────────────
+   A docked panel rises from the bar along the bottom edge, or from the host's
+   own control, instead of resting in a corner of its own. The element stamps
+   what it collapses to as data-collapsed-to, and writes where the dock is as
+   two private properties: --_dock-bottom, the bar's height or the distance
+   from the layout viewport's bottom to the anchor's top, and --_dock-right,
+   the anchor's distance from the right edge. Both are read with a 0px
+   fallback, so a panel measured before the bar has laid out stands where a
+   bar of no height would put it.
+
+   The cap follows the token block's rule: what the host left free less the
+   one gutter the anchored edge spends, so a panel grown to the cap runs from
+   just above the bar to the far edge. A host therefore needs no inset to keep
+   the panel off its bar; --ag-ui-inset still wins when set.
+
+   These blocks restate tokens and nothing else, and sit ahead of the phone
+   block at no more weight than it has, so on a phone the panel is the screen
+   as every other placement is there. The bar measures 0 while it is not drawn
+   (a phone with the panel open), which is what lets the side and full shapes
+   below fall back to the whole height without a phone rule of their own.
+
+   Each placement keeps its own side and shape; only the bottom edge moves. */
+:host([data-collapsed-to="bar"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto calc(var(--_edge-gutter) + var(--_viewport-inset-right))
+      calc(
+        var(--_edge-gutter) + var(--_viewport-inset-bottom) +
+          max(var(--_dock-bottom, 0px), var(--_keyboard-inset))
+      )
+      auto
+  );
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - var(--_edge-gutter)));
+}
+
+:host([data-collapsed-to="bar"][placement="bottom-left"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto auto
+      calc(
+        var(--_edge-gutter) + var(--_viewport-inset-bottom) +
+          max(var(--_dock-bottom, 0px), var(--_keyboard-inset))
+      )
+      calc(var(--_edge-gutter) + var(--_viewport-inset-left))
+  );
+}
+
+/* The column and the full-screen panel stop at the bar rather than covering
+   it, so the bar stays where the user minimises from. */
+:host([data-collapsed-to="bar"][placement="side"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-bottom) + var(--_dock-bottom, 0px)) auto
+  );
+  --_height: var(--ag-ui-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+}
+
+:host([data-collapsed-to="bar"][placement="full"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-bottom) + var(--_dock-bottom, 0px)) var(--_viewport-inset-left)
+  );
+  --_height: var(--ag-ui-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+}
+
+/* The host's own bar: the panel stands the anchor gap (8px unless the host
+   says otherwise) above the anchor and lines up with its right edge. Only
+   once the element found the anchor; until then, and when it never does, the
+   placement's own corner stands.
+
+   The cap spends the larger of the gap and the gutter. The gutter alone is
+   what this always spent, so the default is unchanged; but a host that opens
+   the gap past the gutter to clear a tall toolbar would otherwise push a
+   panel grown to the cap off the top of the window by the difference. */
+:host([data-collapsed-to="none"][data-dock-anchored]) {
+  --_inset: var(--ag-ui-inset, auto var(--_dock-right, 0px) calc(var(--_dock-bottom, 0px) + var(--_anchor-gap)) auto);
+  --_max-height: var(
+    --ag-ui-max-height,
+    calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - max(var(--_edge-gutter), var(--_anchor-gap)))
+  );
+}
+`;

package/src/ui/placement/panel_placement.ts

@@ -22,7 +22,7 @@ import {
   type ResizeGrip,
   type ResizeSize,
 } from "./resize_handle.js";
-import { surfaceFor } from "./surface_for.js";
+import { type Surface, surfaceFor } from "./surface_for.js";
 
 /** Per-tab persistence key for a dragged panel size. */
 const SIZE_KEY = "ag-ui-chat:size";
@@ -37,6 +37,15 @@ const SIZE_KEY = "ag-ui-chat:size";
  */
 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";
 
 /** Per-tab persistence key for a dragged launcher position. */
 const LAUNCHER_KEY = "ag-ui-chat:launcher";
@@ -309,6 +318,7 @@ export class PanelPlacement {
     const fullBleed = coversViewport(box, viewport);
     return {
       placement: this.#host.element.getAttribute("placement"),
+      collapseTo: this.#surface().collapseTo,
       collapsed: this.#host.collapsed(),
       collapsible: this.#host.collapsible(),
       movable: this.#launcherDraggable() && !fullBleed,
@@ -425,7 +435,7 @@ export class PanelPlacement {
    * per interaction, because `placement` is a live attribute.
    */
   #resizeAxis(): ResizeAxis {
-    return surfaceFor(this.#host.element.getAttribute("placement")).resizeAxis;
+    return this.#surface().resizeAxis;
   }
 
   /**
@@ -567,6 +577,49 @@ export class PanelPlacement {
     }
   }
 
+  /** 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. */
+  #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 and 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;
+    if (target === "bar") {
+      element.style.setProperty(DOCK_BOTTOM, `${height}px`);
+    } else if (target === "none" && anchor !== null) {
+      const rect = anchor.getBoundingClientRect();
+      const screen = this.#screen();
+      element.style.setProperty(DOCK_BOTTOM, `${Math.max(0, screen.height - rect.top)}px`);
+      element.style.setProperty(DOCK_RIGHT, `${Math.max(0, screen.width - rect.right)}px`);
+    } else {
+      element.style.removeProperty(DOCK_BOTTOM);
+    }
+    if (target !== "none" || anchor === null) {
+      element.style.removeProperty(DOCK_RIGHT);
+    }
+    element.toggleAttribute("data-dock-anchored", target === "none" && anchor !== null);
+    return height;
+  }
+
   /**
    * Whether this placement lets the launcher be dragged, read per interaction
    * because `placement` is a live attribute. `data-launcher-drag="false"` opts
@@ -575,7 +628,7 @@ export class PanelPlacement {
   #launcherDraggable(): boolean {
     return (
       this.#host.element.getAttribute("data-launcher-drag") !== "false" &&
-      surfaceFor(this.#host.element.getAttribute("placement")).launcherDraggable
+      this.#surface().launcherDraggable
     );
   }
 
@@ -1057,6 +1110,21 @@ export class PanelPlacement {
    */
   #applyResize(grip: ResizeGrip, box: PanelRect): PanelRect {
     box = this.#withinViewport(box);
+    if (this.#docked()) {
+      // A docked panel keeps its resize but never its position: 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.
+      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 (grip.x !== this.#anchor.x && grip.y !== this.#anchor.y) {
       return box;

package/src/ui/placement/small_viewport_styles.ts

@@ -57,5 +57,14 @@ export const SMALL_VIEWPORT_STYLES: string = `
   :host([placement=""]:not([data-small-viewport="off"])) .resize-handle {
     display: none;
   }
+
+  /* The bottom bar shows only while collapsed. With the panel open the panel
+     is the screen, its header's minimise control is the way back, and a
+     second strip fixed to the bottom edge would sit under the keyboard while
+     the composer has focus. Hidden by display, so the bar measures 0 and the
+     host's padding goes with it. */
+  :host([data-collapsed-to="bar"]:not([collapsed]):not([data-small-viewport="off"])) .dock-bar {
+    display: none;
+  }
 }
 `;

package/src/ui/placement/surface_for.ts

@@ -1,20 +1,19 @@
 import type { ResizeAxis } from "./resize_handle.js";
 
 /**
- * What a collapsed panel shrinks to.
- *
- * Only `null` versus not-`null` is read today: every caller asks whether the
- * surface can collapse at all, never which target it collapses to. The three
- * names below therefore describe the surface rather than drive it, and nothing
- * relies on them (changing one fails only the test of this record). The
- * bottom-bar collapse is expected to read or replace them, and a reader that
- * does should come with a test outside this record's own.
+ * What a collapsed panel shrinks to, stamped on the element as
+ * data-collapsed-to so the stylesheet draws it.
  *
  * - `launcher` -- the round button in a corner.
  * - `rail` -- the slim full-height edge the sidebar docks against; the same
  *   launcher element, shaped by the stylesheet.
  * - `header` -- the in-flow collapse: the body hides and the header bar stays
  *   in the host's layout, so there is no launcher at all.
+ * - `bar` -- `collapse-to="bar"` over a placement that would otherwise
+ *   collapse to `launcher`: a strip along the bottom edge, the panel rising
+ *   from its right end.
+ * - `none` -- `collapse-to="none"` over any collapsible placement: collapsed
+ *   is hidden, and the host's own control brings the panel back.
  * - `null` -- no collapsed state. `page` is a dedicated route rather than a
  *   panel 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 with
@@ -25,7 +24,7 @@ import type { ResizeAxis } from "./resize_handle.js";
  *   those paths asks this record; the stylesheet covers the one path that
  *   never does, an attribute written straight onto the element.
  */
-export type CollapseTarget = "launcher" | "rail" | "header" | null;
+export type CollapseTarget = "launcher" | "rail" | "header" | "bar" | "none" | null;
 
 /**
  * Everything the script needs to know about one display surface, in one
@@ -36,11 +35,7 @@ export type CollapseTarget = "launcher" | "rail" | "header" | null;
  * under this directory); this is the part of a surface that code decides.
  */
 export interface Surface {
-  /**
-   * What collapsing shrinks the panel to; `null` when it cannot collapse. Only
-   * the `null` test is authoritative: the non-null names are descriptive (see
-   * {@link CollapseTarget}), and nothing branches on which one a surface has.
-   */
+  /** What collapsing shrinks the panel to; `null` when it cannot collapse. */
   readonly collapseTo: CollapseTarget;
   /**
    * Whether a gesture may move the launcher. The rest have nowhere to put it:
@@ -127,9 +122,25 @@ const UNKNOWN: Surface = {
 };
 
 /**
- * The surface `placement` describes. Read per interaction by every caller,
- * because `placement` is a live attribute.
+ * The surface `placement` and `collapse-to` describe together. Read per
+ * interaction by every caller, because both are live attributes.
+ *
+ * `collapse-to` only ever replaces the round launcher or the whole collapsed
+ * state, never a placement's own shape: `bar` applies where the placement
+ * collapses to `launcher`, so the sidebar keeps its rail and an embedded chat
+ * its header bar, and `none` applies to every collapsible placement. Absent,
+ * `auto` and any other value leave the placement as it was. A docked surface
+ * cannot be moved -- the panel rises from the bar or the host's anchor, and a
+ * position the user dragged would take it away from either -- so both turn
+ * the launcher drag off, and with it the header drag and `moveTo`.
  */
-export function surfaceFor(placement: string | null): Surface {
-  return SURFACES.get(placement) ?? UNKNOWN;
+export function surfaceFor(placement: string | null, collapseTo: string | null = null): Surface {
+  const surface = SURFACES.get(placement) ?? UNKNOWN;
+  if (collapseTo === "bar" && surface.collapseTo === "launcher") {
+    return { ...surface, collapseTo: "bar", launcherDraggable: false };
+  }
+  if (collapseTo === "none" && surface.collapseTo !== null) {
+    return { ...surface, collapseTo: "none", launcherDraggable: false };
+  }
+  return surface;
 }

package/src/ui/progress/tool_group_styles.ts

@@ -21,6 +21,18 @@ const GROUPED = `:host(:where(:not(${CARD_MODES})))`;
 /** The host in one of the four card modes, where a group drawn earlier is flattened. */
 const CARDS = `:host(:is(${CARD_MODES}))`;
 
+/**
+ * A card inside an opened group, with the host in grouped mode and the given
+ * data-tool-group-display. The inner attribute sits inside the same :host()
+ * as the grouped test, since the host is featureless outside it, and being
+ * grouped-only is what lets an outer card mode flatten the group into its own
+ * cards: none of these rules match there. Full is no rule at all, so an absent
+ * or unknown inner value draws the full card a group always drew.
+ */
+function inner(mode: string): string {
+  return `:host(:where(:not(${CARD_MODES}))[data-tool-group-display="${mode}"]) .tool-group-list .tool-call`;
+}
+
 export const TOOL_GROUP_STYLES: string = `
 /* ── The folded tool-step group ──────────────────────────────────
    One quiet row per run of consecutive calls, the cards one click down as
@@ -205,6 +217,43 @@ ${GROUPED} .tool-group .tool-call-subagent {
   flex-basis: 100%;
 }
 
+/* The inner display mode: how an opened group draws its calls. The same
+   visibility rules the card modes apply to a flat card, so a call inside the
+   group shows the regions the flat card of that mode shows. The flat inline
+   mode's chrome rule is left out on purpose: a card in the group has already
+   lost its box and is laid out as a row of the list, and that rule's padding
+   and gap would undo the row. Selected from the host attribute, so changing it
+   restyles groups already on screen. */
+${inner("compact")}[data-expanded="false"] .tool-call-section {
+  display: none;
+}
+
+${inner("inline")} .tool-call-section--args {
+  display: none;
+}
+
+${inner("minimal")} .tool-call-toggle,
+${inner("minimal")} .tool-call-body {
+  display: none;
+}
+
+/* A call waiting on an approval shows its arguments in every inner mode, as it
+   does in every card mode, and for the same reason: the arguments are what
+   tell three gated calls of one tool apart. These come after the hides above,
+   which they tie with on weight. The arguments region only, never every
+   section, since the result region carries the hidden attribute until a
+   result exists and a display value here would override it. The arguments
+   region carries it too when the call has none, so it is excluded while
+   hidden rather than framed empty. */
+${inner("minimal")}[data-status="deferred"] .tool-call-body {
+  display: flex;
+}
+
+${inner("compact")}[data-status="deferred"] .tool-call-section--args:not([hidden]),
+${inner("inline")}[data-status="deferred"] .tool-call-section--args:not([hidden]) {
+  display: flex;
+}
+
 /* Grouping is decided as each card is built, so a card mode set afterwards
    finds groups already drawn. It flattens them: the group and its list stop
    generating boxes, the row and the repeat ordinals go, and every card lays

package/src/ui/progress/tool_step_styles.ts

@@ -277,9 +277,11 @@ export const TOOL_STEP_STYLES: string = `
 
 /* The arguments region only, never every section: the result region carries the
    hidden attribute until a result exists, and a display value here overrides it,
-   framing an empty RESULT heading under the question. */
-:host([data-tool-display="compact"]) .tool-call[data-status="deferred"] .tool-call-section--args,
-:host([data-tool-display="inline"]) .tool-call[data-status="deferred"] .tool-call-section--args {
+   framing an empty RESULT heading under the question. The arguments region is
+   hidden too when the call has none, and is left alone then, or it would frame
+   an empty ARGUMENTS heading. */
+:host([data-tool-display="compact"]) .tool-call[data-status="deferred"] .tool-call-section--args:not([hidden]),
+:host([data-tool-display="inline"]) .tool-call[data-status="deferred"] .tool-call-section--args:not([hidden]) {
   display: flex;
 }
 

package/src/ui/shell/build_launcher.ts

@@ -7,21 +7,32 @@ export interface LauncherOptions {
   readonly launcher: HTMLButtonElement;
   readonly badge: HTMLElement;
   readonly railLabel: HTMLElement;
+  /** The bottom bar's wrapper, which holds the launcher and the history button. */
+  readonly bar: HTMLElement;
+  /** The bottom bar's history button, a sibling of the launcher in the bar. */
+  readonly barHistory: HTMLButtonElement;
   readonly titleText: string;
   readonly iconUrl: string | null;
   readonly strings: UiStrings;
   readonly signal: AbortSignal;
   readonly onOpen: () => void;
+  readonly onHistory: () => void;
 }
 
 /**
- * Build what a collapsed widget shrinks to: a round floating button, or the
- * slim edge rail under `placement="sidebar"` -- one element, shaped by the
- * stylesheet. The element mounts it as a sibling of the panel, so it survives
- * the panel being hidden.
+ * Build what a collapsed widget shrinks to: a round floating button, the slim
+ * edge rail under `placement="sidebar"`, or the strip along the bottom edge
+ * under `collapse-to="bar"` -- one element, shaped by the stylesheet. The
+ * element mounts the bar wrapper as a sibling of the panel, so it survives the
+ * panel being hidden.
+ *
+ * The wrapper is there for the bar's history button: a button cannot nest in
+ * a button, so the strip is the launcher and the history button side by side.
+ * Outside the bar the wrapper draws no box and the history button is not
+ * drawn, so the launcher lays out against the host exactly as it did alone.
  */
 export function buildLauncher(options: LauncherOptions): void {
-  const { launcher, badge, railLabel } = options;
+  const { launcher, badge, railLabel, bar, barHistory } = options;
   launcher.className = "launcher";
   launcher.type = "button";
   launcher.setAttribute("part", "launcher");
@@ -47,4 +58,20 @@ export function buildLauncher(options: LauncherOptions): void {
     badge,
   );
   launcher.addEventListener("click", options.onOpen, { signal: options.signal });
+  bar.className = "dock-bar";
+  bar.setAttribute("part", "bar");
+  barHistory.className = "bar-history";
+  barHistory.type = "button";
+  barHistory.setAttribute("part", "bar-history");
+  barHistory.title = options.strings.chatHistory;
+  barHistory.setAttribute("aria-label", options.strings.chatHistory);
+  // A glyph rather than the header's icon slot: a slot name may appear once
+  // per shadow root, and the header's history button already holds it.
+  const glyph = document.createElement("span");
+  glyph.className = "bar-history-glyph";
+  glyph.setAttribute("aria-hidden", "true");
+  glyph.textContent = "\u2630";
+  barHistory.replaceChildren(glyph);
+  barHistory.addEventListener("click", options.onHistory, { signal: options.signal });
+  bar.replaceChildren(launcher, barHistory);
 }

package/src/ui/shell/token_styles.ts

@@ -37,7 +37,15 @@ export const TOKEN_STYLES: string = `
   --_line-strong: var(--ag-ui-line-strong, color-mix(in oklch, var(--_fg) 20%, var(--_bg)));
   --_wash: var(--ag-ui-wash, color-mix(in oklch, var(--_fg) 4.5%, var(--_bg)));
   --_accent-ink: var(--ag-ui-accent-ink, color-mix(in oklch, var(--_accent) 82%, var(--_fg)));
-  --_ring: var(--ag-ui-ring, color-mix(in oklch, var(--_accent) 55%, transparent));
+  /* The focus ring is drawn on the panel, so it has to hold 3:1 against
+     --_bg whatever accent a host brings (WCAG 2.4.13). Two parts accent to
+     three parts ink does that at the worst case, an accent at the far end
+     from the ink (white on a light panel, black on a dark one): the ink
+     alone sits far above 3:1, and three fifths of it keeps the mix there
+     while the hue still reads as the accent. Half and half fell to 2.3:1
+     for black on the code theme. The accent over transparent, as before,
+     measured only the accent, and a light host accent fell to 1.6:1. */
+  --_ring: var(--ag-ui-ring, color-mix(in oklch, var(--_accent) 40%, var(--_fg)));
   /* The user's turn is the accent at a whisper. With Quiet's graphite accent
      that is a neutral wash; once a host sets a brand accent it becomes a tint
      of the brand, which is the one thing Soft does that Quiet keeps. */
@@ -300,6 +308,25 @@ export const TOKEN_STYLES: string = `
      grid/flex layout) to embed it in the page flow instead of floating. */
   --_position: var(--ag-ui-position, fixed);
   --_z-index: var(--ag-ui-z-index, 2147483000);
+  /* A size the user dragged, written inline on the host by the placement
+     code, and read ahead of the host's tokens so the drag wins. There is no
+     public token behind it; it is declared initial here only so a chat that
+     was never dragged does not inherit one, from a dragged chat it is
+     slotted into or from any page rule naming it. The inline value still
+     beats this default. */
+  --_drag-width: initial;
+  --_drag-height: initial;
+  /* Where a docked panel stands, written inline the same way by the placement
+     code: the bottom bar's height, or the host anchor's distance from the
+     bottom and right edges. Read only by the dock rules, each with a 0px
+     fallback; declared initial so it never inherits either. */
+  --_dock-bottom: initial;
+  --_dock-right: initial;
+  /* The gap between a panel and the host's own button it rises from under
+     collapse-to="none". The button usually sits inside a taller toolbar, so a
+     host sets this to the button's distance from the toolbar's top plus the
+     clearance it wants, and the panel stands clear of the toolbar. */
+  --_anchor-gap: var(--ag-ui-anchor-gap, 8px);
   --_width: var(--_drag-width, var(--ag-ui-width, 380px));
   --_height: var(--_drag-height, var(--ag-ui-height, 560px));
   /* The gutter a resting floating panel keeps between itself and the edge of

package/src/ui/styles.ts

@@ -23,6 +23,7 @@ import { APPROVAL_STYLES } from "./interrupts/approval_styles.js";
 import { CONFIRMATION_STYLES } from "./interrupts/confirmation_styles.js";
 import { QUESTION_STYLES } from "./interrupts/question_styles.js";
 import { COLLAPSE_STYLES } from "./placement/collapse_styles.js";
+import { DOCK_STYLES } from "./placement/dock_styles.js";
 import { EMBEDDED_STYLES } from "./placement/embedded_styles.js";
 import { LAUNCHER_STYLES } from "./placement/launcher_styles.js";
 import { PAGE_STYLES } from "./placement/page_styles.js";
@@ -65,6 +66,9 @@ export const STYLES: string = [
   THEME_STYLES,
   PRESET_STYLES,
   PAGE_STYLES,
+  // Ahead of the phone block and no heavier than it: a docked panel is still
+  // full-bleed on a phone.
+  DOCK_STYLES,
   SMALL_VIEWPORT_STYLES,
   SIDEBAR_STYLES,
   LAUNCHER_STYLES,

package/src/ui/themes/scheme_styles.ts

@@ -6,9 +6,18 @@ export const SCHEME_STYLES: string = `
    dark) and beside a theme name (soft dark). auto follows the operating
    system through color-scheme itself, with no media query to keep in step.
    code is a dark-only theme and has no light half. */
+/* Important, so a scheme word holds against a host rule that sets the
+   element's color-scheme (a page that follows its own dark mode). A rule
+   from outside the shadow tree beats every :host rule at normal weight, and
+   the theme toggle writes the word; without this its press changed nothing.
+   code stays last, so code light is still dark. */
+:host([theme~="light"]) {
+  color-scheme: light !important;
+}
+
 :host([theme~="dark"]),
 :host([theme~="code"]) {
-  color-scheme: dark;
+  color-scheme: dark !important;
 }
 
 :host([theme~="auto"]) {

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.47.0";
+export const VERSION: string = "0.48.0";