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

package/src/ui/interrupts/confirmation_styles.ts

@@ -0,0 +1,114 @@
+// The confirmation card for a destructive client tool, and the editable
+// arguments an approval shares with it.
+export const CONFIRMATION_STYLES: string = `
+/* Inline confirmation card — lives in the transcript, no focus-stealing overlay. */
+.confirm {
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
+  border-radius: 10px;
+}
+
+.confirm[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--_border);
+}
+
+.confirm-body {
+  font-weight: 600;
+}
+
+.confirm-args {
+  margin: 0;
+  padding: 8px 10px;
+  max-height: 140px;
+  overflow: auto;
+  font-size: 12px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  background: var(--_assistant-bg);
+  border-radius: 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.confirm-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.confirm-btn {
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.confirm-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.confirm-btn--confirm {
+  border-color: var(--_accent);
+  background: var(--_accent);
+  color: var(--_on-accent);
+}
+
+/* The session waiver. Deliberately the quietest of the three: it is the widest
+   decision on the card, so it should be reachable without being the one the eye
+   lands on when the user means to say yes once. */
+.confirm-btn--always {
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.confirm-btn--always:hover,
+.confirm-btn--always:focus-visible {
+  opacity: 1;
+}
+
+/* Editable arguments on an approval card. A plain field rather than a code
+   editor: it holds the JSON a card already displays, and the only interaction
+   is correcting a value before letting the call run. */
+.approval-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.approval-args {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.approval-args:focus-visible {
+  border-color: var(--_accent);
+  outline: none;
+}
+
+.approval-error {
+  font-size: 0.85em;
+  color: var(--_danger);
+}
+
+/* Message action row. Sits under a finished assistant bubble.
+`;

package/src/ui/interrupts/question_styles.ts

@@ -0,0 +1,73 @@
+// The question card the agent asks the user through.
+export const QUESTION_STYLES: string = `
+/* Question card — the built-in ask_user prompt (radios and/or free text). */
+.question {
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
+  border-radius: 10px;
+}
+
+.question[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--_border);
+}
+
+.question-body {
+  font-weight: 600;
+}
+
+.question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.question-choice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.question-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 10px;
+  font: inherit;
+  color: var(--_fg);
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+}
+
+.question-input:disabled {
+  opacity: 0.6;
+}
+
+.question-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.question-btn {
+  border: 1px solid var(--_accent);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--_accent);
+  color: var(--_on-accent);
+}
+
+.question-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+`;

package/src/ui/placement/collapse_styles.ts

@@ -0,0 +1,137 @@
+// Collapsing and expanding: the animation toward the launcher, and the
+// in-flow and page placements that collapse differently or not at all.
+export const COLLAPSE_STYLES: string = `
+/* ── Collapse ───────────────────────────────────────────────────────────────
+   Collapsing shrinks the widget to the round floating launcher: the panel
+   scales toward the launcher's corner and fades, the launcher pops in from the
+   same point. Both halves are transform and opacity only, so the morph runs on
+   the compositor and never reflows the host page.
+
+   The host box keeps its expanded size, since animating it would animate
+   layout and a dragged --ag-ui-width would fight the launcher's own size.
+   Nothing paints there once the panel is gone, so the box only has to stop
+   swallowing clicks: pointer events go to none and the launcher takes them.
+
+   Two placements do not use it: "sidebar" slides to its rail (below), and
+   "embedded" keeps its header bar, having no corner for a floating circle that
+   would escape the host's layout. "page" has no collapsed state at all. */
+:host([collapsed]) {
+  pointer-events: none;
+  /* A collapsed host has to be allowed to shrink, and in the layout hosts
+     actually use it is not. Every collapse path here works by letting the host
+     size to its content -- the in-flow ones set height: auto, the floating one
+     leaves only the launcher -- and a flex or grid parent whose align-items is
+     the default stretch value overrides all of it. The panel then hides and the box
+     it occupied stays: a header bar over several hundred pixels of nothing.
+     Every known consumer hit this, because putting the element in a flex column
+     beside the page content is the obvious way to embed it. */
+  align-self: start;
+}
+
+:host([collapsed]) .chat {
+  opacity: 0;
+  transform: scale(0.94);
+  visibility: hidden;
+}
+
+/* visibility keeps the panel out of the tab order and the a11y tree at rest
+   without display:none killing the transition. It interpolates so any progress
+   below 1 still counts as visible: the panel stays on screen for the whole
+   collapse, flips hidden exactly at the end, and on expand is visible from the
+   first frame. */
+.chat {
+  transform-origin: bottom right;
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility var(--_motion) var(--_ease);
+}
+
+:host([placement="bottom-left"]) .chat {
+  transform-origin: bottom left;
+}
+
+/* Once the launcher has been dragged the element places itself, and stamps the
+   corner it chose to open away from. The morph has to start at that same
+   corner: scaling out of the one the placement originally guessed reads as the
+   panel leaping across the screen before it opens.
+
+   Equal specificity to the placement rule above, so source order is what lets
+   the stamped value win -- the same arrangement the resize grip uses, and the
+   same trap. Write these with = on the whole hyphenated token; a ~= would match
+   whitespace-separated words and so could never match at all. */
+:host([data-expand-corner="top-left"]) .chat {
+  transform-origin: top left;
+}
+
+:host([data-expand-corner="top-right"]) .chat {
+  transform-origin: top right;
+}
+
+:host([data-expand-corner="bottom-left"]) .chat {
+  transform-origin: bottom left;
+}
+
+:host([data-expand-corner="bottom-right"]) .chat {
+  transform-origin: bottom right;
+}
+
+/* The in-flow placement keeps the original collapse: hide the body, let the
+   host shrink to the header bar. */
+:host([collapsed][placement="embedded"]) {
+  height: auto;
+  max-height: none;
+  pointer-events: auto;
+}
+
+:host([collapsed][placement="embedded"]) .chat {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+
+/* It keeps the header bar, so the launcher must stay out of the way: an
+   embedded host is position: static, which would let an absolutely-positioned
+   circle escape the layout and land against whatever the page positions. */
+:host([collapsed][placement="embedded"]) .launcher {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:host([collapsed][placement="embedded"]) .messages-wrap,
+:host([collapsed][placement="embedded"]) .messages,
+:host([collapsed][placement="embedded"]) .input-row,
+:host([collapsed][placement="embedded"]) .skill-chips,
+:host([collapsed][placement="embedded"]) .skill-palette,
+:host([collapsed][placement="embedded"]) .skill-hint {
+  display: none;
+}
+
+/* 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
+   is the one placement where the launcher that would bring it back is hidden.
+
+   Hiding the control is only half of it. The state has another way in -- the
+   attribute can be written straight onto the element, and a value stored under
+   a different placement is restored on connect -- and the JS guards that catch
+   those cannot see an attribute set directly. So the placement neutralises the
+   state here as well: with the collapse rules above no longer naming "page", an
+   unguarded collapsed attribute would otherwise fall through to the generic
+   rule that scales the panel away and drops pointer events, leaving nothing on
+   screen and no launcher to press. */
+:host([placement="page"]) .header-btn--collapse {
+  display: none;
+}
+
+:host([placement="page"][collapsed]) {
+  pointer-events: auto;
+  align-self: auto;
+}
+
+:host([placement="page"][collapsed]) .chat {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+`;

package/src/ui/placement/embedded_styles.ts

@@ -0,0 +1,14 @@
+// The embedded placement: no floating chrome, laid out by the host.
+export const EMBEDDED_STYLES: string = `
+/* Embedded: drop the floating chrome and the high z-index stacking context so
+   the widget lives in the host's own layout (fixes overlay/z-index clashes). */
+:host([placement="embedded"]) {
+  --_position: var(--ag-ui-position, static);
+  --_width: var(--ag-ui-width, 100%);
+  --_height: var(--ag-ui-height, 100%);
+  --_max-width: var(--ag-ui-max-width, 100%);
+  --_max-height: var(--ag-ui-max-height, 100%);
+  --_shadow: var(--ag-ui-shadow, none);
+  --_z-index: var(--ag-ui-z-index, auto);
+}
+`;

package/src/ui/placement/launcher_styles.ts

@@ -0,0 +1,189 @@
+// The launcher a collapsed widget shrinks to: the round button, its unread
+// badge, and the sidebar's edge rail, which is the same element styled again.
+export const LAUNCHER_STYLES: string = `
+/* ── Launcher ───────────────────────────────────────────────────────────────
+   What a collapsed widget shrinks to: a round floating button by default, the
+   sidebar's slim edge rail under that placement. A sibling of the panel, so it
+   survives the panel being hidden, and the only part of a collapsed widget
+   that takes pointer events. */
+.launcher {
+  display: flex;
+  position: absolute;
+  inset: var(--_launcher-inset);
+  align-items: center;
+  justify-content: center;
+  width: var(--_launcher-size);
+  height: var(--_launcher-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--_launcher-radius);
+  background: var(--_launcher-bg);
+  color: var(--_launcher-fg);
+  box-shadow: var(--_shadow);
+  font: inherit;
+  cursor: pointer;
+  pointer-events: auto;
+  /* A touch drag on the launcher moves it; without this the page scrolls under
+     the finger instead and the launcher never moves at all. */
+  touch-action: none;
+  opacity: 0;
+  transform: scale(0.4);
+  visibility: hidden;
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease-pop),
+    visibility var(--_motion) var(--_ease);
+}
+
+/* The launcher grows out of the corner the panel shrank into. It stays laid
+   out at rest rather than display:none, which is what lets it animate both in
+   and out: an unrendered element has no before-change style to transition
+   from, and one flipping display to none cannot transition at all. visibility
+   keeps it unpaintable, untabbable and unclickable in between, so the expanded
+   panel's own controls underneath stay reachable. */
+:host([collapsed]) .launcher {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+
+:host([collapsed]) .launcher:hover {
+  transform: scale(1.06);
+}
+
+:host([collapsed]) .launcher:active {
+  transform: scale(0.94);
+}
+
+/* A drag is a press and a hover at the same time, so both scale rules above are
+   live throughout it. Cancelling them is what keeps the launcher the size of
+   the thing under the pointer while it travels; the position itself comes from
+   inset, which nothing here transitions, so it tracks the pointer exactly. */
+:host([collapsed]) .launcher[data-dragging] {
+  transform: none;
+  cursor: grabbing;
+}
+
+.launcher .icon-holder {
+  width: var(--_launcher-icon-size);
+  height: var(--_launcher-icon-size);
+}
+
+/* The unread badge rides the launcher's top-right corner. The ring in the
+   widget's own background is what separates it from the launcher underneath,
+   whatever colour the host themes either one. */
+.launcher-badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--_badge-size);
+  height: var(--_badge-size);
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--_badge-bg);
+  color: var(--_badge-fg);
+  font-size: var(--_badge-font-size);
+  font-weight: 600;
+  line-height: 1;
+  box-shadow: 0 0 0 2px var(--_bg);
+}
+
+.launcher-badge[hidden] {
+  display: none;
+}
+
+/* The sidebar collapses to an edge rail instead: full height, square, flush
+   against the dock. It slides in with the panel rather than popping. */
+/* The edge rail. It reads as the docked edge of a panel rather than a coloured
+   stripe: the surface the panel is made of, a border on the side it docks
+   against, and the accent kept for the icon -- a full-height slab of accent is
+   the loudest thing on the page and says the least about itself.
+
+   Content sits at the top rather than centred, because a control floating in
+   the middle of a screen-high column has nothing to belong to. */
+:host([placement="sidebar"][collapsed]) .launcher {
+  inset: 0;
+  width: auto;
+  height: auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding-top: 14px;
+  border: 0;
+  border-inline-start: 1px solid var(--_border);
+  border-radius: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: none;
+  transform: none;
+}
+
+:host([placement="sidebar"][data-side="left"][collapsed]) .launcher {
+  border-inline-start: 0;
+  border-inline-end: 1px solid var(--_border);
+}
+
+/* The icon keeps the accent, so there is one obvious thing to press.
+
+   The glyph is sized here rather than left to fill the holder. A glyph in an
+   icon holder takes the holder's whole box by default, which is right where the
+   holder is only a box and wrong the moment it becomes a filled circle: the
+   mark then runs edge to edge and reads as a square crammed into a disc. The
+   proportion is the floating launcher's own -- a 26px glyph in a 56px bubble --
+   so the two collapsed states look like the same widget. */
+:host([placement="sidebar"][collapsed]) .launcher .icon-holder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--_header-bg);
+  color: var(--_header-fg);
+}
+
+:host([placement="sidebar"][collapsed]) .launcher .icon-holder .glyph,
+:host([placement="sidebar"][collapsed]) .launcher .icon-holder .icon-img {
+  width: 16px;
+  height: 16px;
+}
+
+/* Written down the rail, which is the only direction it fits. Reading upward
+   is the convention for a right-hand edge and matches how a docked panel's
+   label is set everywhere it appears. */
+.rail-label {
+  display: none;
+}
+
+:host([placement="sidebar"][collapsed]) .rail-label {
+  display: block;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  max-height: calc(100% - 96px);
+  overflow: hidden;
+  font-size: 0.9em;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:host([placement="sidebar"][data-side="left"][collapsed]) .rail-label {
+  writing-mode: vertical-rl;
+  transform: none;
+}
+
+/* Every transition in the stylesheet is timed by --_motion, so collapsing it to a
+   frame is the whole reduced-motion story: states still change (and display
+   still flips at the end of its discrete transition), nothing travels. */
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --_motion: var(--ag-ui-motion, 0.001s);
+  }
+}
+`;

package/src/ui/placement/page_styles.ts

@@ -0,0 +1,47 @@
+// The page and full placements: a full-bleed surface with a reading column.
+export const PAGE_STYLES: string = `
+/* Page: full-bleed background with a centred reading column capped at
+   --ag-ui-content-max-width, where "full" is edge-to-edge and left-aligned.
+   The column comes from symmetric auto padding on the scroll area and
+   composer rather than a per-row wrapper, so user pills still right-align and
+   the assistant well spans the column. */
+:host([placement="page"]) {
+  --_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);
+}
+
+:host([placement="page"]) .messages {
+  padding-inline: max(var(--_pad), calc((100% - var(--_content-max-width)) / 2));
+}
+
+:host([placement="page"]) .input-row {
+  padding-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
+}
+
+/* The rows between the message list and the composer line up with the column
+   too. Chips and tray are padding-based while palette and hint are
+   margin-based, so each gets its own inline axis nudged by the same gutter. */
+:host([placement="page"]) .skill-chips,
+:host([placement="page"]) .attachment-tray {
+  padding-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
+}
+
+:host([placement="page"]) .skill-palette,
+:host([placement="page"]) .skill-hint {
+  margin-inline: max(12px, calc((100% - var(--_content-max-width)) / 2));
+}
+
+/* In the reading column the assistant well uses the full width; the user
+   message stays a right-aligned pill (its default align-self + max-width). */
+:host([placement="page"]) .message--assistant {
+  max-width: 100%;
+}
+`;

package/src/ui/placement/panel_placement.ts

@@ -3,7 +3,6 @@ import type { ChatCorner, ChatSurfaceReport } from "../../tools/chat_surface_too
 import type { UiStrings } from "../ui_strings.js";
 import { clampLauncher } from "./clamp_launcher.js";
 import { clampPanel } from "./clamp_panel.js";
-import { isDraggablePlacement } from "./is_draggable_placement.js";
 import { enableLauncherDrag } from "./launcher_drag.js";
 import {
   type ExpandCorner,
@@ -23,6 +22,7 @@ import {
   type ResizeGrip,
   type ResizeSize,
 } from "./resize_handle.js";
+import { surfaceFor } from "./surface_for.js";
 
 /** Per-tab persistence key for a dragged panel size. */
 const SIZE_KEY = "ag-ui-chat:size";
@@ -400,16 +400,7 @@ export class PanelPlacement {
    * per interaction, because `placement` is a live attribute.
    */
   #resizeAxis(): ResizeAxis {
-    switch (this.#host.element.getAttribute("placement")) {
-      case "full":
-      case "page":
-        return "none";
-      case "sidebar":
-      case "side":
-        return "width";
-      default:
-        return "both";
-    }
+    return surfaceFor(this.#host.element.getAttribute("placement")).resizeAxis;
   }
 
   /**
@@ -559,7 +550,7 @@ export class PanelPlacement {
   #launcherDraggable(): boolean {
     return (
       this.#host.element.getAttribute("data-launcher-drag") !== "false" &&
-      isDraggablePlacement(this.#host.element.getAttribute("placement"))
+      surfaceFor(this.#host.element.getAttribute("placement")).launcherDraggable
     );
   }
 

package/src/ui/placement/preset_styles.ts

@@ -0,0 +1,33 @@
+// 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 ──────────────────────────────────────────────────── */
+: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(--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="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);
+}
+`;