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

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

@@ -61,18 +61,19 @@ export const TOKEN_STYLES: string = `
   /* 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). */
+     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 panel's hover shade. */
+     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));

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

@@ -26,28 +26,15 @@ ${THEME_HOST.quiet} .header-title {
 
 /* 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. */
+   the host's colour (see the switches in the token defaults). */
 ${THEME_HOST.quiet} .header-btn {
   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. */
+/* The glyph takes the header text, which is the full ink when that is unset. */
 ${THEME_HOST.quiet} .header-btn:hover {
   color: var(--_header-fg);
-  opacity: 1;
-  background: var(--_header-btn-hover);
 }
 
 ${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.49.0";
+export const VERSION: string = "0.50.0";