@artooi/ag-ui-web-component 0.48.0 → 0.49.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/token_styles.ts

@@ -58,6 +58,23 @@ 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. The
+     default 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 panel's hover shade. */
+  --_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 +447,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/quiet_styles.ts

@@ -24,14 +24,30 @@ ${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). So does their
+   rest opacity: 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 frame's own 0.85. */
 ${THEME_HOST.quiet} .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
+  opacity: var(--_header-fg-set, 0.85);
   border-radius: 8px;
 }
 
+/* The hover 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 panel shade.
+   The glyph takes the header text, which is the full ink when that is unset.
+   The opacity restates the frame's hover value, which the rest rule above
+   outweighs. */
 ${THEME_HOST.quiet} .header-btn:hover {
-  color: var(--_fg);
-  background: var(--_hover);
+  color: var(--_header-fg);
+  opacity: 1;
+  background: var(--_header-btn-hover);
 }
 
 ${THEME_HOST.quiet} .message--user {

package/src/version.ts

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