@adia-ai/web-modules 0.8.33 → 0.8.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/agent-admin/agent-admin/agent-admin.css +23 -13
- package/agent-admin/agent-admin/agent-admin.js +24 -0
- package/chat/chat-shell/css/chat-shell.tokens.css +1 -1
- package/chat/chat-thread/chat-thread.js +8 -1
- package/dist/chat/chat-shell.min.css +1 -1
- package/dist/chat/chat-shell.min.js +20 -20
- package/dist/editor/editor-shell.min.js +2 -2
- package/dist/everything.min.js +67 -67
- package/dist/shell/admin-shell.min.css +1 -1
- package/dist/shell/admin-shell.min.js +2 -2
- package/dist/simple/simple-shell.min.js +5 -5
- package/dist/web-modules.min.css +1 -1
- package/dist/web-modules.sheet.js +1 -1
- package/package.json +6 -6
- package/shell/admin-shell/css/admin-shell.templates.css +22 -0
- package/shell/admin-shell/css/admin-shell.tokens.css +10 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# Changelog — @adia-ai/web-modules
|
|
2
2
|
|
|
3
|
+
## [0.8.35] — 2026-08-13
|
|
4
|
+
|
|
5
|
+
### Maintenance
|
|
6
|
+
- **Source fixes this window are carried per-file below; the narrative CHANGELOG entries live with the substantive packages.** Bumped in lockstep per `scripts/release/check-lockstep.mjs`. Headline v0.8.35 work shipped in factory-DX program (scaffold boot+CSS fixes, class-B npm marketplace, consumer CI recipe, DX sweep) + audit-wave plugin hardening + ~20 component/pattern fixes. See `packages/plugins/adia-ui-factory/CHANGELOG.md#0835--2026-08-13` for details.
|
|
7
|
+
- **`billing/` touched in this release window** (2 file(s), e.g. `payment-method-list/payment-method-list.class.js`) — carried by the entries above.
|
|
8
|
+
- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
|
|
9
|
+
- **`form/` touched in this release window** (1 file(s), e.g. `form-popover/form-popover.examples.html`) — carried by the entries above.
|
|
10
|
+
- **`shell/` touched in this release window** (1 file(s), e.g. `css/admin-shell.tokens.css`) — carried by the entries above.
|
|
11
|
+
|
|
12
|
+
## [0.8.34] — 2026-08-11
|
|
13
|
+
|
|
14
|
+
### Fixed
|
|
15
|
+
|
|
16
|
+
- **`agent-admin-ui` — the composite demo rendered as garbled overlap (gh#956); three root causes fixed.** Column tokens were spacing tokens (`--a-space-12` = 48px roster, 77px settings — both panels clipped since WCH-5); now 13rem/17rem. The 900px stack breakpoint was a viewport `@media` query that never fired for a narrow CONTAINER on a wide screen; a ResizeObserver now reflects `[data-narrow]` below an 800px container width (SSR-guarded per the gh#285 pattern) and CSS keys the single-column stack on it. And `chat-thread`'s `empty` property defaulted true with reflection firing only on change, so a fresh thread never stamped `[empty]` and the CSS gate hid the authored empty state — `#syncEmptyFromChildren` now stamps the attribute directly (base-class fix in web-components gh#961 covers the whole latent class).
|
|
17
|
+
- **`chat-shell` — `--chat-code-bg` aligned to the container-low chip tier** (one inline-code language with `--richtext-code-bg`, gh#972).
|
|
18
|
+
- **`admin-shell` — `padded` standalone template variant (gh#964):** an isolated-doc iframe route can opt into the `doc` template's `<admin-page-body><section>` wrapper (`route.padded`), inheriting normal page padding/max-width instead of rendering full-bleed — the Pattern Library catalog pages are the first consumers.
|
|
19
|
+
- **`chat-empty` / `editor-canvas-empty` and 11 more doc pages — `.examples.html` source repairs (gh#959):** unescaped inline component-tag references in doc-header prose parsed as real elements and swallowed their sentences (8 files escaped to `<code><tag></code>`); admin-roster, admin-settings, and agent-admin gained the standard doc scaffold; responsive-shell-sidebar's examples file was a DOCTYPE-bearing duplicate of the standalone page and its route rendered empty — ported to fragment shape and registered in the sitemap.
|
|
20
|
+
|
|
21
|
+
### Maintenance
|
|
22
|
+
- **`dist/` bundles rebuilt** in this cut's window (7 file(s)) — regenerated from the source changes described above, not independent edits.
|
|
23
|
+
|
|
3
24
|
## [0.8.33] — 2026-08-11
|
|
4
25
|
|
|
5
26
|
### Fixed
|
|
@@ -10,14 +10,19 @@
|
|
|
10
10
|
@scope (agent-admin-ui) {
|
|
11
11
|
|
|
12
12
|
:where(:scope) {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
/* Real panel widths (gh#956): the module shipped with --a-space-12 —
|
|
14
|
+
a 48px SPACING token — as the roster column, rendering the roster
|
|
15
|
+
at 48px and settings at 77px (48 × 1.6): both panels clipped to
|
|
16
|
+
garble. 13rem/17rem fit the roster's persona entries and the
|
|
17
|
+
settings pane's prompt-section list. */
|
|
18
|
+
--agent-admin-roster-w: 13rem;
|
|
19
|
+
--agent-admin-settings-w: 17rem;
|
|
15
20
|
--agent-admin-border: var(--a-border-subtle);
|
|
16
21
|
}
|
|
17
22
|
|
|
18
23
|
:scope {
|
|
19
24
|
display: grid;
|
|
20
|
-
grid-template-columns: var(--agent-admin-roster-w) var(--agent-admin-settings-w) 1fr;
|
|
25
|
+
grid-template-columns: var(--agent-admin-roster-w) var(--agent-admin-settings-w) minmax(0, 1fr);
|
|
21
26
|
min-height: 0;
|
|
22
27
|
}
|
|
23
28
|
|
|
@@ -35,15 +40,20 @@
|
|
|
35
40
|
min-width: 0;
|
|
36
41
|
}
|
|
37
42
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
/* Single-column stack when the HOST is narrow — keyed on [data-narrow],
|
|
44
|
+
reflected by agent-admin.js's ResizeObserver (gh#956). The previous
|
|
45
|
+
`@media (max-width: 900px)` measured the VIEWPORT, so a narrow
|
|
46
|
+
container on a wide screen (the docs demo at 568px in a 1148px
|
|
47
|
+
window) never stacked — the 3-column grid crushed into the
|
|
48
|
+
container instead. Chat takes the leftover height (min 0, scrolls
|
|
49
|
+
inside) under a consumer-set fixed height. */
|
|
50
|
+
:scope[data-narrow] {
|
|
51
|
+
grid-template-columns: 1fr;
|
|
52
|
+
grid-template-rows: auto auto minmax(0, 1fr);
|
|
53
|
+
}
|
|
54
|
+
:scope[data-narrow] > admin-roster-ui,
|
|
55
|
+
:scope[data-narrow] > admin-settings-ui {
|
|
56
|
+
border-right: none;
|
|
57
|
+
border-bottom: 1px solid var(--agent-admin-border);
|
|
48
58
|
}
|
|
49
59
|
}
|
|
@@ -82,6 +82,16 @@ class UIAgentAdmin extends UIElement {
|
|
|
82
82
|
#activeStore = null;
|
|
83
83
|
#session = null;
|
|
84
84
|
#surfaceRegistry = NOOP_REGISTRY;
|
|
85
|
+
#resizeObserver = null;
|
|
86
|
+
|
|
87
|
+
/* Container width below which the 3-column grid stacks to one column
|
|
88
|
+
(CSS keys on the reflected [data-narrow] — agent-admin.css). Chosen
|
|
89
|
+
so the fixed rails (13rem + 17rem = 480px at 16px root) always
|
|
90
|
+
leave the chat pane ≥ ~320px before stacking kicks in. A container
|
|
91
|
+
measurement, not a viewport @media query — the docs demo renders
|
|
92
|
+
this module 568px wide inside a 1148px window, where a 900px
|
|
93
|
+
viewport query never fires (gh#956). */
|
|
94
|
+
static NARROW_BREAKPOINT = 800;
|
|
85
95
|
|
|
86
96
|
get personas() { return this.#personas; }
|
|
87
97
|
set personas(value) {
|
|
@@ -131,6 +141,18 @@ class UIAgentAdmin extends UIElement {
|
|
|
131
141
|
|
|
132
142
|
this.#syncRosterSummaries();
|
|
133
143
|
this.#activateInitialIfNeeded();
|
|
144
|
+
|
|
145
|
+
// gh#285 pattern — SSR DOM shims have no ResizeObserver global; the
|
|
146
|
+
// stacked layout is then reachable only via a consumer setting
|
|
147
|
+
// [data-narrow] themselves, which is fine server-side (no live resize).
|
|
148
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
149
|
+
this.#resizeObserver = new ResizeObserver((entries) => {
|
|
150
|
+
const w = entries[0]?.contentBoxSize?.[0]?.inlineSize
|
|
151
|
+
?? entries[0]?.contentRect?.width ?? 0;
|
|
152
|
+
this.toggleAttribute('data-narrow', w > 0 && w < UIAgentAdmin.NARROW_BREAKPOINT);
|
|
153
|
+
});
|
|
154
|
+
this.#resizeObserver.observe(this);
|
|
155
|
+
}
|
|
134
156
|
}
|
|
135
157
|
|
|
136
158
|
#activateInitialIfNeeded() {
|
|
@@ -143,6 +165,8 @@ class UIAgentAdmin extends UIElement {
|
|
|
143
165
|
this.#roster?.removeEventListener('persona-change', this.#onPersonaChange);
|
|
144
166
|
this.#roster?.removeEventListener('persona-import', this.#onPersonaImport);
|
|
145
167
|
this.#chat?.removeEventListener('submit', this.#onChatSubmit);
|
|
168
|
+
this.#resizeObserver?.disconnect();
|
|
169
|
+
this.#resizeObserver = null;
|
|
146
170
|
}
|
|
147
171
|
|
|
148
172
|
// ── the store-swap law ──────────────────────────────────────────
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
--chat-actions-gap: var(--a-space-1);
|
|
57
57
|
|
|
58
58
|
/* Code blocks inside messages */
|
|
59
|
-
--chat-code-bg:
|
|
59
|
+
--chat-code-bg: var(--md-sys-color-neutral-container-low); /* one chip language with --richtext-code-bg (gh#972) */
|
|
60
60
|
--chat-code-radius: var(--a-radius-md);
|
|
61
61
|
|
|
62
62
|
/* Typography */
|
|
@@ -78,7 +78,14 @@ class ChatThread extends UIElement {
|
|
|
78
78
|
const messageChildren = Array.from(this.children).filter(
|
|
79
79
|
(c) => c.tagName.toLowerCase() !== 'chat-empty'
|
|
80
80
|
);
|
|
81
|
-
|
|
81
|
+
const isEmpty = messageChildren.length === 0;
|
|
82
|
+
this.empty = isEmpty;
|
|
83
|
+
// Stamp the attribute directly as well (gh#956): `empty` DEFAULTS to
|
|
84
|
+
// true and the property system only reflects on CHANGE, so a fresh
|
|
85
|
+
// empty thread sets true-over-true, the attribute never lands, and
|
|
86
|
+
// the CSS gate `chat-thread:not([empty]) > chat-empty` hides the
|
|
87
|
+
// authored empty state forever — the docs demo's blank chat pane.
|
|
88
|
+
this.toggleAttribute('empty', isEmpty);
|
|
82
89
|
}
|
|
83
90
|
|
|
84
91
|
#setupChildObserver() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(chat-shell){--chat-bg:var(--a-canvas-0);--chat-border:unset;--chat-radius:unset;--chat-header-height:var(--a-chrome-app-header-height);--chat-header-px:var(--a-space-4);--chat-header-gap:var(--a-space-2);--chat-header-border:1px solid var(--md-sys-color-neutral-outline-variant);--chat-messages-px:var(--a-space-4);--chat-messages-py:var(--a-space-4);--chat-messages-gap:var(--a-space-3);--chat-message-max-width:85%;--chat-user-bg:var(--md-sys-color-primary);--chat-user-fg:var(--md-sys-color-primary-on-primary);--chat-user-radius:var(--a-radius-md);--chat-user-tail-radius:var(--a-radius-sm);--chat-user-px:var(--a-space-3);--chat-user-py:var(--a-space-1);--chat-assistant-bg:var(--a-canvas-2);--chat-assistant-fg:var(--md-sys-color-neutral-on-surface);--chat-assistant-radius:var(--a-radius-lg);--chat-assistant-tail-radius:var(--a-radius-sm);--chat-assistant-px:var(--a-space-3);--chat-assistant-py:var(--a-space-1);--chat-avatar-size:1.75rem;--chat-avatar-bg:var(--chat-assistant-bg);--chat-avatar-fg:var(--chat-assistant-fg);--chat-avatar-font:var(--a-ui-sm);--chat-avatar-weight:var(--a-weight-semibold);--chat-cursor-width:2px;--chat-cursor-color:currentColor;--chat-cursor-speed:.8s;--chat-footer-px:var(--a-space-3);--chat-footer-py:var(--a-space-3);--chat-actions-gap:var(--a-space-1);--chat-code-bg:var(--a-canvas-2);--chat-code-radius:var(--a-radius-md);--chat-font-size:var(--a-ui-size);--chat-line-height:var(--a-leading-normal);--chat-weight-semibold:var(--a-weight-semibold);--chat-header-name-font:var(--a-ui-lg);--chat-header-status-font:var(--a-ui-md);--chat-header-status-fg:var(--a-fg-muted);--chat-error-gap:var(--a-space-2);--chat-error-fg:var(--a-danger-strong);--chat-error-font:var(--a-ui-sm);--chat-actions-duration:var(--a-duration-fast);--chat-actions-easing:var(--a-easing);--chat-avatar-radius:var(--a-radius-full);--chat-thinking-fg:var(--a-fg-muted);--chat-code-inline-radius:var(--a-radius-sm);--chat-code-inline-family:var(--a-font-family-code);--chat-code-block-px:var(--a-space-3);--chat-code-block-my:var(--a-space-2);--chat-code-block-font:var(--a-ui-sm)}chat-shell{box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-bg);flex-direction:column;height:100%;display:flex;overflow:hidden}chat-shell>header{align-items:center;gap:var(--chat-header-gap);min-height:var(--chat-header-height);padding:0 var(--chat-header-px);border-bottom:var(--chat-header-border);flex-shrink:0;display:flex}chat-shell>header [data-chat-name]{font-weight:var(--chat-weight-semibold);font-size:var(--chat-header-name-font)}chat-shell>header chat-status{font-size:var(--chat-header-status-font);color:var(--chat-header-status-fg);margin-inline-start:auto}chat-shell>chat-thread,chat-shell>section{padding:var(--chat-messages-py) var(--chat-messages-px);gap:var(--chat-messages-gap);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}chat-shell>footer{padding:var(--chat-footer-py) var(--chat-footer-px);flex-shrink:0;align-items:center;display:flex}chat-shell>footer chat-input-ui{flex:1}chat-shell [data-role]{gap:var(--chat-header-gap);max-width:var(--chat-message-max-width);align-items:flex-end;display:flex}chat-shell [data-role=user]{flex-direction:row-reverse;align-self:flex-end}chat-shell [data-role=assistant]{align-self:flex-start}chat-shell [data-role] [data-avatar]{width:var(--chat-avatar-size);height:var(--chat-avatar-size);border-radius:var(--chat-avatar-radius);background:var(--chat-avatar-bg);color:var(--chat-avatar-fg);font-size:var(--chat-avatar-font);font-weight:var(--chat-avatar-weight);flex-shrink:0;justify-content:center;align-items:center;display:flex}chat-shell [data-role] [data-bubble]{padding:var(--chat-assistant-py) var(--chat-assistant-px);border-radius:var(--chat-assistant-radius);font-size:var(--chat-font-size);line-height:var(--chat-line-height);white-space:pre-wrap;word-break:break-word}chat-shell [data-role] [data-bubble]>:first-child{margin-block-start:0}chat-shell [data-role] [data-bubble]>:last-child{margin-block-end:0}chat-shell [data-role=user] [data-bubble]{background:var(--chat-user-bg);color:var(--chat-user-fg);padding:var(--chat-user-py) var(--chat-user-px);border-radius:var(--chat-user-radius);border-bottom-right-radius:var(--chat-user-tail-radius)}chat-shell [data-role=assistant] [data-bubble]{background:var(--chat-assistant-bg);color:var(--chat-assistant-fg);border-bottom-left-radius:var(--chat-assistant-tail-radius)}chat-shell [data-role]:has([data-bubble][data-surface]),chat-shell [data-role]:has([data-bubble]>[data-surface-root]){max-width:none}chat-shell [data-role=error]{align-self:center;align-items:center;gap:var(--chat-error-gap);max-width:none;color:var(--chat-error-fg);font-size:var(--chat-error-font);display:flex}chat-shell [data-role] [data-actions]{gap:var(--chat-actions-gap);opacity:0;transition:opacity var(--chat-actions-duration) var(--chat-actions-easing);display:flex}chat-shell [data-role]:hover [data-actions]{opacity:1}chat-shell [data-cursor]{width:var(--chat-cursor-width);background:var(--chat-cursor-color);vertical-align:text-bottom;height:1em;animation:chat-shell-blink var(--chat-cursor-speed) step-end infinite;margin-inline-start:1px;display:inline-block}@keyframes chat-shell-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){chat-shell [data-cursor]{opacity:.7;animation:none}}chat-shell [data-role=assistant][data-thinking] [data-bubble]{color:var(--chat-thinking-fg)}chat-shell [data-bubble] [data-content]{white-space:normal}chat-shell [data-bubble] [data-content] p{margin:0 0 .5em}chat-shell [data-bubble] [data-content] p:last-child{margin-bottom:0}chat-shell [data-bubble] [data-content] strong{font-weight:var(--chat-weight-semibold)}chat-shell [data-bubble] [data-content] code{background:var(--chat-code-bg);border-radius:var(--chat-code-inline-radius);font-family:var(--chat-code-inline-family);padding:.1em .15em;font-size:.875em}chat-shell [data-bubble] [data-content] pre{background:var(--chat-code-bg);border-radius:var(--chat-code-radius);padding:var(--chat-code-block-px);margin:var(--chat-code-block-my) 0;font-size:var(--chat-code-block-font);line-height:1.5;overflow-x:auto}chat-shell [data-bubble] [data-content] pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}chat-shell [data-bubble] [data-content] ul,chat-shell [data-bubble] [data-content] ol{margin:.25em 0;padding-inline-start:1.25em}chat-shell [data-bubble] [data-content] li{margin-bottom:.15em}chat-shell [data-bubble] [data-content] a{color:inherit;text-underline-offset:2px;text-decoration:underline}chat-shell [data-bubble] [data-content] h1,chat-shell [data-bubble] [data-content] h2,chat-shell [data-bubble] [data-content] h3,chat-shell [data-bubble] [data-content] h4{font-weight:var(--chat-weight-semibold);margin:.75em 0 .25em}chat-shell [data-bubble] [data-content] h1:first-child,chat-shell [data-bubble] [data-content] h2:first-child,chat-shell [data-bubble] [data-content] h3:first-child{margin-top:0}chat-shell chat-empty{margin:auto}chat-shell[streaming] chat-empty,chat-shell:has([data-role]) chat-empty{display:none}chat-shell>chat-header,chat-sidebar>chat-header[slot=header],chat-sidebar>chat-header:first-child{align-items:center;gap:var(--chat-header-gap,var(--a-space-2));padding:0 var(--chat-header-px,var(--a-space-3));height:var(--chat-header-height,var(--a-size-lg));font-size:var(--chat-header-font,var(--a-ui-size));border-bottom:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-header>[slot=name]{font-weight:var(--a-weight-medium,500);color:var(--md-sys-color-neutral-on-surface)}chat-header>[slot=status]{margin-inline-start:var(--a-space-2)}chat-header>[slot=action]:first-of-type{margin-inline-start:auto}chat-header>[slot=action-leading]{margin-inline-end:var(--a-space-2)}chat-status{align-items:center;gap:var(--a-space-1);font-size:var(--a-ui-sm);color:var(--a-fg-muted);display:inline-flex}chat-shell>chat-thread{overscroll-behavior:contain;gap:var(--chat-message-gap,var(--a-space-3));min-height:0;padding:var(--chat-thread-py,var(--a-space-4)) var(--chat-thread-px,var(--a-space-4));background:var(--chat-thread-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex:1;display:flex;overflow-y:auto}chat-thread:not([empty])>chat-empty{display:none}chat-thread[empty]>chat-empty{padding:var(--a-space-6);flex:1;justify-content:center;align-items:center;display:flex}chat-shell>chat-composer{align-items:stretch;gap:var(--a-space-2);padding:var(--chat-composer-py,var(--a-space-3)) var(--chat-composer-px,var(--a-space-3));border-top:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-composer>[slot=leading],chat-composer>[slot=attach],chat-composer>[slot=trailing]{align-items:center;gap:var(--a-space-1);flex-shrink:0;display:inline-flex}chat-composer>:is(chat-input-ui,input-ui,textarea-ui){flex:1;min-width:0}chat-composer[disabled]{opacity:.6;pointer-events:none}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing]){min-width:var(--chat-sidebar-min-width,48px);max-width:var(--chat-sidebar-max-width,480px);min-height:0;font-size:var(--chat-sidebar-font,var(--a-ui-size));transition:width var(--chat-duration,var(--a-duration,.2s)) var(--chat-easing,var(--a-easing,ease));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex-shrink:0;display:flex;position:relative;container:sidebar/inline-size}chat-sidebar[slot=leading]{width:var(--chat-sidebar-width-leading,240px);border-right:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}chat-sidebar[slot=trailing]{width:var(--chat-sidebar-width-trailing,320px);border-left:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]{cursor:col-resize;z-index:1;-webkit-user-select:none;user-select:none;width:6px;position:absolute;top:0;bottom:0}chat-sidebar[slot=leading]>[data-resize]{right:-3px}chat-sidebar[slot=trailing]>[data-resize]{left:-3px}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]:hover{background:var(--md-sys-color-primary);opacity:.5}chat-sidebar[resizing]{transition:none}chat-sidebar[resizing]>[data-resize]{background:var(--md-sys-color-primary);opacity:.8}chat-shell:has(>chat-sidebar){flex-direction:row;display:flex}chat-shell:has(>chat-sidebar)>:not(chat-sidebar){display:contents}
|
|
1
|
+
:where(chat-shell){--chat-bg:var(--a-canvas-0);--chat-border:unset;--chat-radius:unset;--chat-header-height:var(--a-chrome-app-header-height);--chat-header-px:var(--a-space-4);--chat-header-gap:var(--a-space-2);--chat-header-border:1px solid var(--md-sys-color-neutral-outline-variant);--chat-messages-px:var(--a-space-4);--chat-messages-py:var(--a-space-4);--chat-messages-gap:var(--a-space-3);--chat-message-max-width:85%;--chat-user-bg:var(--md-sys-color-primary);--chat-user-fg:var(--md-sys-color-primary-on-primary);--chat-user-radius:var(--a-radius-md);--chat-user-tail-radius:var(--a-radius-sm);--chat-user-px:var(--a-space-3);--chat-user-py:var(--a-space-1);--chat-assistant-bg:var(--a-canvas-2);--chat-assistant-fg:var(--md-sys-color-neutral-on-surface);--chat-assistant-radius:var(--a-radius-lg);--chat-assistant-tail-radius:var(--a-radius-sm);--chat-assistant-px:var(--a-space-3);--chat-assistant-py:var(--a-space-1);--chat-avatar-size:1.75rem;--chat-avatar-bg:var(--chat-assistant-bg);--chat-avatar-fg:var(--chat-assistant-fg);--chat-avatar-font:var(--a-ui-sm);--chat-avatar-weight:var(--a-weight-semibold);--chat-cursor-width:2px;--chat-cursor-color:currentColor;--chat-cursor-speed:.8s;--chat-footer-px:var(--a-space-3);--chat-footer-py:var(--a-space-3);--chat-actions-gap:var(--a-space-1);--chat-code-bg:var(--md-sys-color-neutral-container-low);--chat-code-radius:var(--a-radius-md);--chat-font-size:var(--a-ui-size);--chat-line-height:var(--a-leading-normal);--chat-weight-semibold:var(--a-weight-semibold);--chat-header-name-font:var(--a-ui-lg);--chat-header-status-font:var(--a-ui-md);--chat-header-status-fg:var(--a-fg-muted);--chat-error-gap:var(--a-space-2);--chat-error-fg:var(--a-danger-strong);--chat-error-font:var(--a-ui-sm);--chat-actions-duration:var(--a-duration-fast);--chat-actions-easing:var(--a-easing);--chat-avatar-radius:var(--a-radius-full);--chat-thinking-fg:var(--a-fg-muted);--chat-code-inline-radius:var(--a-radius-sm);--chat-code-inline-family:var(--a-font-family-code);--chat-code-block-px:var(--a-space-3);--chat-code-block-my:var(--a-space-2);--chat-code-block-font:var(--a-ui-sm)}chat-shell{box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-bg);flex-direction:column;height:100%;display:flex;overflow:hidden}chat-shell>header{align-items:center;gap:var(--chat-header-gap);min-height:var(--chat-header-height);padding:0 var(--chat-header-px);border-bottom:var(--chat-header-border);flex-shrink:0;display:flex}chat-shell>header [data-chat-name]{font-weight:var(--chat-weight-semibold);font-size:var(--chat-header-name-font)}chat-shell>header chat-status{font-size:var(--chat-header-status-font);color:var(--chat-header-status-fg);margin-inline-start:auto}chat-shell>chat-thread,chat-shell>section{padding:var(--chat-messages-py) var(--chat-messages-px);gap:var(--chat-messages-gap);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}chat-shell>footer{padding:var(--chat-footer-py) var(--chat-footer-px);flex-shrink:0;align-items:center;display:flex}chat-shell>footer chat-input-ui{flex:1}chat-shell [data-role]{gap:var(--chat-header-gap);max-width:var(--chat-message-max-width);align-items:flex-end;display:flex}chat-shell [data-role=user]{flex-direction:row-reverse;align-self:flex-end}chat-shell [data-role=assistant]{align-self:flex-start}chat-shell [data-role] [data-avatar]{width:var(--chat-avatar-size);height:var(--chat-avatar-size);border-radius:var(--chat-avatar-radius);background:var(--chat-avatar-bg);color:var(--chat-avatar-fg);font-size:var(--chat-avatar-font);font-weight:var(--chat-avatar-weight);flex-shrink:0;justify-content:center;align-items:center;display:flex}chat-shell [data-role] [data-bubble]{padding:var(--chat-assistant-py) var(--chat-assistant-px);border-radius:var(--chat-assistant-radius);font-size:var(--chat-font-size);line-height:var(--chat-line-height);white-space:pre-wrap;word-break:break-word}chat-shell [data-role] [data-bubble]>:first-child{margin-block-start:0}chat-shell [data-role] [data-bubble]>:last-child{margin-block-end:0}chat-shell [data-role=user] [data-bubble]{background:var(--chat-user-bg);color:var(--chat-user-fg);padding:var(--chat-user-py) var(--chat-user-px);border-radius:var(--chat-user-radius);border-bottom-right-radius:var(--chat-user-tail-radius)}chat-shell [data-role=assistant] [data-bubble]{background:var(--chat-assistant-bg);color:var(--chat-assistant-fg);border-bottom-left-radius:var(--chat-assistant-tail-radius)}chat-shell [data-role]:has([data-bubble][data-surface]),chat-shell [data-role]:has([data-bubble]>[data-surface-root]){max-width:none}chat-shell [data-role=error]{align-self:center;align-items:center;gap:var(--chat-error-gap);max-width:none;color:var(--chat-error-fg);font-size:var(--chat-error-font);display:flex}chat-shell [data-role] [data-actions]{gap:var(--chat-actions-gap);opacity:0;transition:opacity var(--chat-actions-duration) var(--chat-actions-easing);display:flex}chat-shell [data-role]:hover [data-actions]{opacity:1}chat-shell [data-cursor]{width:var(--chat-cursor-width);background:var(--chat-cursor-color);vertical-align:text-bottom;height:1em;animation:chat-shell-blink var(--chat-cursor-speed) step-end infinite;margin-inline-start:1px;display:inline-block}@keyframes chat-shell-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){chat-shell [data-cursor]{opacity:.7;animation:none}}chat-shell [data-role=assistant][data-thinking] [data-bubble]{color:var(--chat-thinking-fg)}chat-shell [data-bubble] [data-content]{white-space:normal}chat-shell [data-bubble] [data-content] p{margin:0 0 .5em}chat-shell [data-bubble] [data-content] p:last-child{margin-bottom:0}chat-shell [data-bubble] [data-content] strong{font-weight:var(--chat-weight-semibold)}chat-shell [data-bubble] [data-content] code{background:var(--chat-code-bg);border-radius:var(--chat-code-inline-radius);font-family:var(--chat-code-inline-family);padding:.1em .15em;font-size:.875em}chat-shell [data-bubble] [data-content] pre{background:var(--chat-code-bg);border-radius:var(--chat-code-radius);padding:var(--chat-code-block-px);margin:var(--chat-code-block-my) 0;font-size:var(--chat-code-block-font);line-height:1.5;overflow-x:auto}chat-shell [data-bubble] [data-content] pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}chat-shell [data-bubble] [data-content] ul,chat-shell [data-bubble] [data-content] ol{margin:.25em 0;padding-inline-start:1.25em}chat-shell [data-bubble] [data-content] li{margin-bottom:.15em}chat-shell [data-bubble] [data-content] a{color:inherit;text-underline-offset:2px;text-decoration:underline}chat-shell [data-bubble] [data-content] h1,chat-shell [data-bubble] [data-content] h2,chat-shell [data-bubble] [data-content] h3,chat-shell [data-bubble] [data-content] h4{font-weight:var(--chat-weight-semibold);margin:.75em 0 .25em}chat-shell [data-bubble] [data-content] h1:first-child,chat-shell [data-bubble] [data-content] h2:first-child,chat-shell [data-bubble] [data-content] h3:first-child{margin-top:0}chat-shell chat-empty{margin:auto}chat-shell[streaming] chat-empty,chat-shell:has([data-role]) chat-empty{display:none}chat-shell>chat-header,chat-sidebar>chat-header[slot=header],chat-sidebar>chat-header:first-child{align-items:center;gap:var(--chat-header-gap,var(--a-space-2));padding:0 var(--chat-header-px,var(--a-space-3));height:var(--chat-header-height,var(--a-size-lg));font-size:var(--chat-header-font,var(--a-ui-size));border-bottom:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-header>[slot=name]{font-weight:var(--a-weight-medium,500);color:var(--md-sys-color-neutral-on-surface)}chat-header>[slot=status]{margin-inline-start:var(--a-space-2)}chat-header>[slot=action]:first-of-type{margin-inline-start:auto}chat-header>[slot=action-leading]{margin-inline-end:var(--a-space-2)}chat-status{align-items:center;gap:var(--a-space-1);font-size:var(--a-ui-sm);color:var(--a-fg-muted);display:inline-flex}chat-shell>chat-thread{overscroll-behavior:contain;gap:var(--chat-message-gap,var(--a-space-3));min-height:0;padding:var(--chat-thread-py,var(--a-space-4)) var(--chat-thread-px,var(--a-space-4));background:var(--chat-thread-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex:1;display:flex;overflow-y:auto}chat-thread:not([empty])>chat-empty{display:none}chat-thread[empty]>chat-empty{padding:var(--a-space-6);flex:1;justify-content:center;align-items:center;display:flex}chat-shell>chat-composer{align-items:stretch;gap:var(--a-space-2);padding:var(--chat-composer-py,var(--a-space-3)) var(--chat-composer-px,var(--a-space-3));border-top:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-composer>[slot=leading],chat-composer>[slot=attach],chat-composer>[slot=trailing]{align-items:center;gap:var(--a-space-1);flex-shrink:0;display:inline-flex}chat-composer>:is(chat-input-ui,input-ui,textarea-ui){flex:1;min-width:0}chat-composer[disabled]{opacity:.6;pointer-events:none}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing]){min-width:var(--chat-sidebar-min-width,48px);max-width:var(--chat-sidebar-max-width,480px);min-height:0;font-size:var(--chat-sidebar-font,var(--a-ui-size));transition:width var(--chat-duration,var(--a-duration,.2s)) var(--chat-easing,var(--a-easing,ease));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex-shrink:0;display:flex;position:relative;container:sidebar/inline-size}chat-sidebar[slot=leading]{width:var(--chat-sidebar-width-leading,240px);border-right:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}chat-sidebar[slot=trailing]{width:var(--chat-sidebar-width-trailing,320px);border-left:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]{cursor:col-resize;z-index:1;-webkit-user-select:none;user-select:none;width:6px;position:absolute;top:0;bottom:0}chat-sidebar[slot=leading]>[data-resize]{right:-3px}chat-sidebar[slot=trailing]>[data-resize]{left:-3px}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]:hover{background:var(--md-sys-color-primary);opacity:.5}chat-sidebar[resizing]{transition:none}chat-sidebar[resizing]>[data-resize]{background:var(--md-sys-color-primary);opacity:.8}chat-shell:has(>chat-sidebar){flex-direction:row;display:flex}chat-shell:has(>chat-sidebar)>:not(chat-sidebar){display:contents}
|