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

package/src/ui/placement/surface_for.ts

@@ -39,10 +39,18 @@ export interface Surface {
   readonly collapseTo: CollapseTarget;
   /**
    * Whether a gesture may move the launcher. The rest have nowhere to put it:
-   * the rail is a docked edge, `header` and `null` have no launcher, and a
-   * full-bleed panel covers the screen it would be opening into.
+   * the rail is a docked edge, `header` and `null` have no launcher, a
+   * full-bleed panel covers the screen it would be opening into, and the bar
+   * and the host's own control are not a launcher at all.
    */
   readonly launcherDraggable: boolean;
+  /**
+   * Whether the header drag and `moveTo` may move the open panel. The same
+   * answer as {@link launcherDraggable} for every placement on its own; the two
+   * part under `collapse-to="bar"` and `"none"`, where a corner panel still
+   * moves like one but has no launcher left to drag.
+   */
+  readonly panelMovable: boolean;
   /**
    * Which axes the resize grips may change. A full-bleed layout is the whole
    * viewport by definition and cannot be resized; a docked panel owns its
@@ -67,6 +75,7 @@ export interface Surface {
 const CORNER: Surface = {
   collapseTo: "launcher",
   launcherDraggable: true,
+  panelMovable: true,
   resizeAxis: "both",
   startsCollapsed: true,
 };
@@ -74,6 +83,7 @@ const CORNER: Surface = {
 const DOCKED: Surface = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "width",
   startsCollapsed: false,
 };
@@ -94,17 +104,30 @@ const SURFACES: ReadonlyMap<string | null, Surface> = new Map<string | null, Sur
     {
       collapseTo: "launcher",
       launcherDraggable: false,
+      panelMovable: false,
       resizeAxis: "none",
       startsCollapsed: false,
     },
   ],
   [
     "page",
-    { collapseTo: null, launcherDraggable: false, resizeAxis: "none", startsCollapsed: false },
+    {
+      collapseTo: null,
+      launcherDraggable: false,
+      panelMovable: false,
+      resizeAxis: "none",
+      startsCollapsed: false,
+    },
   ],
   [
     "embedded",
-    { collapseTo: "header", launcherDraggable: false, resizeAxis: "both", startsCollapsed: false },
+    {
+      collapseTo: "header",
+      launcherDraggable: false,
+      panelMovable: false,
+      resizeAxis: "both",
+      startsCollapsed: false,
+    },
   ],
 ]);
 
@@ -117,6 +140,7 @@ const SURFACES: ReadonlyMap<string | null, Surface> = new Map<string | null, Sur
 const UNKNOWN: Surface = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "both",
   startsCollapsed: false,
 };
@@ -129,10 +153,11 @@ const UNKNOWN: Surface = {
  * 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`.
+ * `auto` and any other value leave the placement as it was. Both turn the
+ * launcher drag off, because there is no launcher left to drag, and keep the
+ * placement's own answer for moving the panel: a corner panel rises from the
+ * bar or the anchor until the user drags it somewhere else, and a placement
+ * that owns its position keeps owning it.
  */
 export function surfaceFor(placement: string | null, collapseTo: string | null = null): Surface {
   const surface = SURFACES.get(placement) ?? UNKNOWN;

package/src/ui/progress/tool_group_styles.ts

@@ -173,7 +173,8 @@ ${GROUPED} .tool-group[data-open="false"] .tool-group-list {
 
 /* A card inside the group is one line of the list: icon, name, and its
    Details control at the end, with the arguments and result opening under
-   the whole row. */
+   the whole row. Its ink is the second ink in every theme, unless the host
+   set the tool token, which then reaches the grouped calls too. */
 ${GROUPED} .tool-group .tool-call {
   max-width: 100%;
   align-self: stretch;
@@ -184,7 +185,7 @@ ${GROUPED} .tool-group .tool-call {
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--_ink-2);
+  color: var(--_tool-fg-set, var(--_ink-2));
   font-family: inherit;
   font-size: var(--_text-sm);
 }

package/src/ui/shell/frame_styles.ts

@@ -44,6 +44,15 @@ export const FRAME_STYLES: string = `
   touch-action: auto;
 }
 
+/* A panel that is the screen has nowhere to go, so its header refuses the drag
+   and must not offer it. No selector can see that a host has sized the panel to
+   the window, so the placement stamps this from the measurement that refuses the
+   drag. :host is carried for the specificity, not the scope, as below. Before the
+   dragging rule, so a drag the header did take keeps its grabbing cursor. */
+:host .header[data-fills-screen] {
+  cursor: auto;
+}
+
 /* :host is carried for the specificity, not the scope: the placement rules
    above are a host selector plus a class plus an attribute, and a bare
    .header[data-dragging] loses to them -- silently, because the drag still
@@ -93,6 +102,14 @@ export const FRAME_STYLES: string = `
   flex: none;
 }
 
+/* Under every theme: once the host sets the header text, the header behind the
+   buttons is the host's colour, so their rest opacity goes. The frame's 0.85
+   lets the header through the glyph, which took white on a mid-blue header from
+   5.1:1 to 4.2:1. With the header text set, the opacity below reads a colour,
+   which no opacity can be, so it is invalid at computed-value time and falls to
+   the initial 1; unset, it reads the fallback. The glyph is each theme's own
+   business: this inherits the header text, and a theme that draws the buttons
+   in another ink reads the same switch to yield. */
 .header-btn {
   display: inline-flex;
   flex: 0 0 auto;
@@ -109,11 +126,14 @@ export const FRAME_STYLES: string = `
   padding: 0;
   border-radius: 6px;
   cursor: pointer;
-  opacity: 0.85;
+  opacity: var(--_header-fg-set, 0.85);
 }
 
+/* The square is the host's own when it set one; otherwise it is mixed from the
+   header text when the host set that, so it reads on any header the host
+   painted; otherwise it is the theme's own. See the alias in the token defaults. */
 .header-btn:hover {
   opacity: 1;
-  background: rgba(255, 255, 255, 0.18);
+  background: var(--_header-btn-hover);
 }
 `;

package/src/ui/shell/token_styles.ts

@@ -58,6 +58,24 @@ export const TOKEN_STYLES: string = `
   --_tool-fg: var(--ag-ui-tool-fg, var(--_ink-2));
   --_header-bg: var(--ag-ui-header-bg, var(--_bg));
   --_header-fg: var(--ag-ui-header-fg, var(--_fg));
+  /* Switches: a public token read with no fallback, named for it with -set.
+     With the token unset the switch computes to the guaranteed-invalid value,
+     so a rule that reads it with a fallback gets the fallback; that is how a
+     rule tells a token the host set from the theme's default for it. Every
+     theme's header buttons follow the header text only once a host sets it,
+     and a step group's calls follow the tool token only once a host sets it
+     (classic defaults --_tool-fg to the accent, which a group never drew). */
+  --_header-fg-set: var(--ag-ui-header-fg);
+  --_tool-fg-set: var(--ag-ui-tool-fg);
+  /* The header buttons' hover square, by default, once the header text is
+     set. Here it is the text at about a fifth, which every browser can mix;
+     where relative colour syntax is supported (see the block at the end) it
+     is the text's opposite instead. It reads the switch, so it is unset with
+     it, and the square below falls to the theme's own: the panel's hover shade
+     here, restated by each theme that draws another, so one rule in the frame
+     paints them all. */
+  --_header-btn-hover-auto: color-mix(in srgb, var(--_header-fg-set) 18%, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_border: var(--ag-ui-border, var(--_line));
   --_radius: var(--ag-ui-radius, 12px);
   /* The panel's own frame, which is the one corner a placement can put against
@@ -430,4 +448,17 @@ export const TOKEN_STYLES: string = `
     --_on-accent: var(--ag-ui-on-accent, #ffffff);
   }
 }
+
+/* The header buttons' default hover square as the header text's opposite,
+   so white text gets a darker square and dark text a lighter one. A square
+   mixed from the text itself moves the ground toward the glyph: white on a
+   mid-blue header fell from 5.1:1 to 3.75:1 under the pointer. Moving away
+   from it can only raise what the host's own pair reads. Gated on this
+   exact expression, so a browser that cannot compute it keeps the square
+   mixed from the text rather than losing the square altogether. */
+@supports (color: rgb(from red calc(255 - r) calc(255 - g) calc(255 - b))) {
+  :host {
+    --_header-btn-hover-auto: color-mix(in srgb, rgb(from var(--_header-fg-set) calc(255 - r) calc(255 - g) calc(255 - b)) 18%, transparent);
+  }
+}
 `;

package/src/ui/themes/classic_tokens.ts

@@ -18,6 +18,7 @@ export const CLASSIC_TOKENS: string = `
   --_tool-fg: var(--ag-ui-tool-fg, var(--_accent));
   --_header-bg: var(--ag-ui-header-bg, light-dark(var(--_accent), #1f1f30));
   --_header-fg: var(--ag-ui-header-fg, light-dark(#ffffff, #e8e8f2));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, rgba(255, 255, 255, 0.18)));
   --_border: var(--ag-ui-border, light-dark(#e2e2ec, #33334a));
   --_muted: var(--ag-ui-muted, light-dark(#6b7280, #9aa0b4));
   --_success: var(--ag-ui-success, #15803d);

package/src/ui/themes/ledger_styles.ts

@@ -32,14 +32,15 @@ export const LEDGER_STYLES: string = `
   vertical-align: 1px;
 }
 
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
 :host([theme~="ledger"]) .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 3px;
 }
 
 :host([theme~="ledger"]) .header-btn:hover {
-  background: var(--_hover);
-  color: var(--_fg);
+  color: var(--_header-fg-set, var(--_fg));
 }
 
 :host([theme~="ledger"]) .message--user {

package/src/ui/themes/ledger_tokens.ts

@@ -20,6 +20,7 @@ export const LEDGER_TOKENS: string = `
   --_msg-radius: var(--ag-ui-msg-radius, 0px);
   --_composer-radius: var(--ag-ui-composer-radius, 4px);
   --_user-bg: var(--ag-ui-user-bg, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_frame-shadow: var(--ag-ui-frame-shadow, 0 0 0 1px var(--_line-strong), 0 20px 40px -28px rgb(0 0 0 / 0.45));
   --_launcher-bg: var(--ag-ui-launcher-bg, var(--_fg));
   --_launcher-fg: var(--ag-ui-launcher-fg, var(--_bg));

package/src/ui/themes/quiet_styles.ts

@@ -24,14 +24,17 @@ ${THEME_HOST.quiet} .header-title {
   letter-spacing: -0.01em;
 }
 
+/* The buttons sit back in the third ink on the panel. Once the host sets the
+   header text they draw in it instead, since the header behind them is then
+   the host's colour (see the switches in the token defaults). */
 ${THEME_HOST.quiet} .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 8px;
 }
 
+/* The glyph takes the header text, which is the full ink when that is unset. */
 ${THEME_HOST.quiet} .header-btn:hover {
-  color: var(--_fg);
-  background: var(--_hover);
+  color: var(--_header-fg);
 }
 
 ${THEME_HOST.quiet} .message--user {

package/src/ui/themes/soft_styles.ts

@@ -31,14 +31,15 @@ export const SOFT_STYLES: string = `
   background: linear-gradient(140deg, color-mix(in oklch, var(--_accent) 55%, var(--_bg)), var(--_accent));
 }
 
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
 :host([theme~="soft"]) .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 10px;
 }
 
 :host([theme~="soft"]) .header-btn:hover {
-  background: var(--_tint-2);
-  color: var(--_accent-ink);
+  color: var(--_header-fg-set, var(--_accent-ink));
 }
 
 :host([theme~="soft"]) .messages {

package/src/ui/themes/soft_tokens.ts

@@ -10,6 +10,7 @@ export const SOFT_TOKENS: string = `
   --_tint: var(--ag-ui-tint, color-mix(in oklch, var(--_accent) 5%, var(--_bg)));
   --_tint-2: var(--ag-ui-tint-2, color-mix(in oklch, var(--_accent) 13%, var(--_bg)));
   --_header-bg: var(--ag-ui-header-bg, var(--_tint));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_tint-2)));
   --_user-bg: var(--ag-ui-user-bg, var(--_tint-2));
   --_border: var(--ag-ui-border, color-mix(in oklch, var(--_accent) 14%, var(--_bg)));
   --_radius: var(--ag-ui-radius, 16px);

package/src/version.ts

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