@adia-ai/web-modules 0.8.24 → 0.8.26

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.
Files changed (26) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/agent-admin/admin-roster/admin-roster.a2ui.json +171 -0
  3. package/agent-admin/admin-roster/admin-roster.css +112 -0
  4. package/agent-admin/admin-roster/admin-roster.d.ts +44 -0
  5. package/agent-admin/admin-roster/admin-roster.js +202 -0
  6. package/agent-admin/admin-roster/admin-roster.yaml +167 -0
  7. package/agent-admin/admin-settings/admin-settings.a2ui.json +156 -0
  8. package/agent-admin/admin-settings/admin-settings.css +114 -0
  9. package/agent-admin/admin-settings/admin-settings.d.ts +30 -0
  10. package/agent-admin/admin-settings/admin-settings.js +219 -0
  11. package/agent-admin/admin-settings/admin-settings.yaml +153 -0
  12. package/agent-admin/agent-admin/agent-admin.a2ui.json +135 -0
  13. package/agent-admin/agent-admin/agent-admin.css +49 -0
  14. package/agent-admin/agent-admin/agent-admin.d.ts +45 -0
  15. package/agent-admin/agent-admin/agent-admin.js +257 -0
  16. package/agent-admin/agent-admin/agent-admin.yaml +162 -0
  17. package/agent-admin/demo-seeds.js +95 -0
  18. package/agent-admin/index.js +13 -0
  19. package/agent-admin/live-persona.js +53 -0
  20. package/chat/chat-surfaces/chat-surfaces.d.ts +56 -0
  21. package/chat/chat-surfaces/chat-surfaces.js +242 -0
  22. package/chat/index.js +1 -0
  23. package/dist/everything.min.js +181 -110
  24. package/index.js +1 -0
  25. package/package.json +26 -5
  26. package/theme/theme-panel/theme-panel.js +71 -31
package/index.js CHANGED
@@ -20,3 +20,4 @@ export * from './dashboard/index.js';
20
20
  export * from './feedback/index.js';
21
21
  export * from './billing/index.js';
22
22
  export * from './settings/index.js';
23
+ export * from './agent-admin/index.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adia-ai/web-modules",
3
- "version": "0.8.24",
3
+ "version": "0.8.26",
4
4
  "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -217,6 +217,20 @@
217
217
  "types": "./css-module.d.ts",
218
218
  "default": "./form/*/*.css"
219
219
  },
220
+ "./agent-admin": {
221
+ "types": "./agent-admin/index.d.ts",
222
+ "import": "./agent-admin/index.js",
223
+ "default": "./agent-admin/index.js"
224
+ },
225
+ "./agent-admin/*": {
226
+ "types": "./agent-admin/*/*.d.ts",
227
+ "import": "./agent-admin/*/*.js",
228
+ "default": "./agent-admin/*/*.js"
229
+ },
230
+ "./agent-admin/*.css": {
231
+ "types": "./css-module.d.ts",
232
+ "default": "./agent-admin/*/*.css"
233
+ },
220
234
  "./package.json": "./package.json"
221
235
  },
222
236
  "files": [
@@ -253,6 +267,10 @@
253
267
  "!form/**/*.examples.html",
254
268
  "!form/**/*.examples.js",
255
269
  "!form/**/*.html",
270
+ "agent-admin/",
271
+ "!agent-admin/**/*.examples.html",
272
+ "!agent-admin/**/*.examples.js",
273
+ "!agent-admin/**/*.html",
256
274
  "!**/*.test.js",
257
275
  "index.js",
258
276
  "css-module.d.ts",
@@ -267,12 +285,15 @@
267
285
  "./chat/**/*.js",
268
286
  "./editor/**/*.js",
269
287
  "./runtime/**/*.js",
270
- "./theme/**/*.js"
288
+ "./theme/**/*.js",
289
+ "./agent-admin/**/*.js"
271
290
  ],
272
291
  "peerDependencies": {
273
- "@adia-ai/web-components": "0.8.24",
274
- "@adia-ai/a2ui-runtime": "0.8.24",
275
- "@adia-ai/llm": "0.8.24"
292
+ "@adia-ai/web-components": "0.8.26",
293
+ "@adia-ai/a2ui-runtime": "0.8.26",
294
+ "@adia-ai/llm": "0.8.26",
295
+ "@adia-ai/agent": "0.8.26",
296
+ "@adia-ai/persona": "0.8.26"
276
297
  },
277
298
  "publishConfig": {
278
299
  "access": "public",
package/theme/theme-panel/theme-panel.js CHANGED
@@ -24,7 +24,7 @@
24
24
  * [register] renders the Scale row — one of the six
25
25
  * [scale] tiers (ui-sm/ui-md/ui-lg/
26
26
  * content-sm/content-md/content-lg)
27
- * [scheme-toggle] renders an integrated light/dark segmented-ui
27
+ * [scheme-toggle] renders an integrated System/Light/Dark segmented-ui
28
28
  * [persist] writes selections to localStorage
29
29
  * [storage-prefix="adia-theme-"] LS key namespace
30
30
  * [target=":root"] CSS selector for theme target (default <html>)
@@ -109,6 +109,7 @@ class ThemePanel extends UIElement {
109
109
  if (this.#stamped) return;
110
110
  this.#stamp();
111
111
  this.#stamped = true;
112
+ this.#syncParametricScope();
112
113
  this.#initState();
113
114
  this.#wirePrefersColorScheme();
114
115
  }
@@ -117,6 +118,7 @@ class ThemePanel extends UIElement {
117
118
  for (const cleanup of this.#cleanups) cleanup();
118
119
  this.#cleanups = [];
119
120
  this.#detachPcm();
121
+ if (this.parametric) this.#resolveTarget().removeAttribute('data-parametric-scope');
120
122
  }
121
123
 
122
124
  // ── Public API ──────────────────────────────────────────────────────
@@ -150,10 +152,11 @@ class ThemePanel extends UIElement {
150
152
  this.activeDensity = '';
151
153
  this.activeRadius = '';
152
154
  this.activeScale = '';
153
- // Resolved scheme falls back to prefers-color-scheme
154
- const resolved = this.#resolvePrefersScheme();
155
- this.activeScheme = resolved;
156
- if (this.#schemeEl) this.#schemeEl.value = resolved;
155
+ // Resolved scheme falls back to prefers-color-scheme; reset always
156
+ // returns the RAW intent to auto (System) regardless of resolution.
157
+ this.scheme = 'auto';
158
+ this.activeScheme = this.#resolvePrefersScheme();
159
+ if (this.#schemeEl) this.#schemeEl.value = 'auto';
157
160
  if (this.#densityEl) this.#densityEl.value = 1;
158
161
  if (this.#radiusEl) this.#radiusEl.value = 1;
159
162
  if (this.#scaleEl) this.#scaleEl.value = '';
@@ -172,13 +175,16 @@ class ThemePanel extends UIElement {
172
175
  scheme.setAttribute('part', 'scheme');
173
176
  const seg = document.createElement('segmented-ui');
174
177
  seg.id = `${this.#uid}-scheme`;
178
+ const segAuto = document.createElement('segment-ui');
179
+ segAuto.setAttribute('value', 'auto');
180
+ segAuto.setAttribute('text', 'System');
175
181
  const segLight = document.createElement('segment-ui');
176
182
  segLight.setAttribute('value', 'light');
177
183
  segLight.setAttribute('text', 'Light');
178
184
  const segDark = document.createElement('segment-ui');
179
185
  segDark.setAttribute('value', 'dark');
180
186
  segDark.setAttribute('text', 'Dark');
181
- seg.append(segLight, segDark);
187
+ seg.append(segAuto, segLight, segDark);
182
188
  scheme.appendChild(seg);
183
189
  frag.appendChild(scheme);
184
190
  this.#schemeEl = seg;
@@ -400,7 +406,7 @@ class ThemePanel extends UIElement {
400
406
  if (this.#schemeEl) {
401
407
  const handler = (e) => {
402
408
  const v = e.detail?.value ?? this.#schemeEl.value;
403
- if (v === 'light' || v === 'dark') this.#apply({ scheme: v }, 'scheme');
409
+ if (v === 'light' || v === 'dark' || v === 'auto') this.#apply({ scheme: v }, 'scheme');
404
410
  };
405
411
  this.#schemeEl.addEventListener('change', handler);
406
412
  this.#cleanups.push(() => this.#schemeEl.removeEventListener('change', handler));
@@ -433,22 +439,19 @@ class ThemePanel extends UIElement {
433
439
  }
434
440
  // Apply the theme (which may write [theme] on target)
435
441
  this.#apply({ theme: slug }, 'theme');
436
- // Then re-read computed values into sliders on next frame, so the
437
- // theme's [theme] block has taken effect.
438
- const sync = () => {
439
- const cs = getComputedStyle(target);
440
- const density = parseFloat(cs.getPropertyValue('--a-density')) || 1;
441
- const radius = parseFloat(cs.getPropertyValue('--a-radius-k')) || 1;
442
- if (this.#densityEl) this.#densityEl.value = density;
443
- if (this.#radiusEl) this.#radiusEl.value = radius;
444
- this.activeDensity = String(density);
445
- this.activeRadius = String(radius);
446
- };
447
- if (typeof requestAnimationFrame === 'function') {
448
- requestAnimationFrame(sync);
449
- } else {
450
- sync();
451
- }
442
+ // The density/radius overrides were just cleared above, so the panel
443
+ // holds no override — same "no override" state reset() and the
444
+ // "default" preset represent by showing 1×/1×, regardless of what the
445
+ // theme's own [theme] block declares for --a-density/--a-radius-k.
446
+ // The sliders track the panel's OWN applied state (write-only target,
447
+ // read-only-from-state display), never a getComputedStyle round-trip
448
+ // off the target — that read was timing-sensitive (needed a
449
+ // requestAnimationFrame hedge) and could lag or misread scoped
450
+ // overrides (gh#578).
451
+ if (this.#densityEl) this.#densityEl.value = 1;
452
+ if (this.#radiusEl) this.#radiusEl.value = 1;
453
+ this.activeDensity = '';
454
+ this.activeRadius = '';
452
455
  }
453
456
 
454
457
  #onPresetClick(name) {
@@ -501,6 +504,7 @@ class ThemePanel extends UIElement {
501
504
  const s = partial.scheme;
502
505
  if (s === 'auto') {
503
506
  target.style.removeProperty('color-scheme');
507
+ this.scheme = 'auto';
504
508
  this.activeScheme = this.#resolvePrefersScheme();
505
509
  if (this.persist) {
506
510
  try { localStorage.removeItem(`${this.storagePrefix}scheme`); } catch {}
@@ -508,6 +512,7 @@ class ThemePanel extends UIElement {
508
512
  this.#attachPcm();
509
513
  } else if (s === 'light' || s === 'dark') {
510
514
  target.style.setProperty('color-scheme', s);
515
+ this.scheme = s;
511
516
  this.activeScheme = s;
512
517
  if (this.persist) {
513
518
  try { localStorage.setItem(`${this.storagePrefix}scheme`, s); } catch {}
@@ -515,7 +520,9 @@ class ThemePanel extends UIElement {
515
520
  // User chose explicitly — PCM listener becomes a no-op
516
521
  this.#detachPcm();
517
522
  }
518
- if (this.#schemeEl) this.#schemeEl.value = this.activeScheme;
523
+ // Segment reflects the RAW intent (System stays selected even though
524
+ // it resolves to a concrete light/dark paint), not the resolved value.
525
+ if (this.#schemeEl) this.#schemeEl.value = this.scheme;
519
526
  }
520
527
 
521
528
  if (partial.scale !== undefined) {
@@ -583,6 +590,7 @@ class ThemePanel extends UIElement {
583
590
  // Apply scheme
584
591
  if (scheme === 'light' || scheme === 'dark') {
585
592
  target.style.setProperty('color-scheme', scheme);
593
+ this.scheme = scheme;
586
594
  this.activeScheme = scheme;
587
595
  if (this.#schemeEl) this.#schemeEl.value = scheme;
588
596
  } else {
@@ -592,9 +600,10 @@ class ThemePanel extends UIElement {
592
600
  target.style.setProperty('color-scheme', attr);
593
601
  this.activeScheme = attr;
594
602
  } else {
603
+ this.scheme = 'auto';
595
604
  this.activeScheme = this.#resolvePrefersScheme();
596
605
  }
597
- if (this.#schemeEl) this.#schemeEl.value = this.activeScheme;
606
+ if (this.#schemeEl) this.#schemeEl.value = this.scheme;
598
607
  }
599
608
 
600
609
  // Apply parametric values
@@ -603,9 +612,7 @@ class ThemePanel extends UIElement {
603
612
  this.activeDensity = String(density);
604
613
  if (this.#densityEl) this.#densityEl.value = density;
605
614
  } else if (this.#densityEl) {
606
- // Read computed from target
607
- const cs = getComputedStyle(target);
608
- const d = parseFloat(cs.getPropertyValue('--a-density')) || 1;
615
+ const d = this.#readInitialShape(target, '--a-density');
609
616
  this.#densityEl.value = d;
610
617
  this.activeDensity = String(d);
611
618
  }
@@ -615,8 +622,7 @@ class ThemePanel extends UIElement {
615
622
  this.activeRadius = String(radius);
616
623
  if (this.#radiusEl) this.#radiusEl.value = radius;
617
624
  } else if (this.#radiusEl) {
618
- const cs = getComputedStyle(target);
619
- const r = parseFloat(cs.getPropertyValue('--a-radius-k')) || 1;
625
+ const r = this.#readInitialShape(target, '--a-radius-k');
620
626
  this.#radiusEl.value = r;
621
627
  this.activeRadius = String(r);
622
628
  }
@@ -630,6 +636,22 @@ class ThemePanel extends UIElement {
630
636
  }
631
637
  }
632
638
 
639
+ // Initial-connect ONLY (#initState, no persisted value): the panel has no
640
+ // record of its own yet — [theme] may have been author-set directly in
641
+ // markup, outside any theme-panel write, so there's no this.activeDensity/
642
+ // activeRadius to fall back to. Reading the computed first-paint baseline
643
+ // here is the legitimate exception the framework's write-only-target /
644
+ // read-only-from-state rule allows (site/pages/patterns/appearance-
645
+ // settings.html): unlike #onThemeClick (gh#578), this call happens
646
+ // synchronously during connected(), after the theme attribute this same
647
+ // method just applied above — no requestAnimationFrame hedge needed, and
648
+ // the result becomes this.activeDensity/activeRadius, so every
649
+ // subsequent redraw stays read-only-from-state, never re-derived again.
650
+ #readInitialShape(target, prop) {
651
+ const cs = getComputedStyle(target);
652
+ return parseFloat(cs.getPropertyValue(prop)) || 1;
653
+ }
654
+
633
655
  // ── Internal — prefers-color-scheme ─────────────────────────────────
634
656
 
635
657
  #resolvePrefersScheme() {
@@ -659,7 +681,9 @@ class ThemePanel extends UIElement {
659
681
  this.#mqlHandler = () => {
660
682
  const resolved = this.#mql.matches ? 'dark' : 'light';
661
683
  this.activeScheme = resolved;
662
- if (this.#schemeEl) this.#schemeEl.value = resolved;
684
+ // Segment stays on System — only the resolved paint changed, the
685
+ // user's raw intent (auto) didn't.
686
+ if (this.#schemeEl) this.#schemeEl.value = 'auto';
663
687
  this.#emit('scheme');
664
688
  };
665
689
  this.#mql.addEventListener('change', this.#mqlHandler);
@@ -686,6 +710,22 @@ class ThemePanel extends UIElement {
686
710
  }
687
711
  }
688
712
 
713
+ // The parametric k-multiplier derived tokens (--a-radius-*, --a-space-*,
714
+ // --a-size-*) are declared once, on `:root, [data-parametric-scope]` —
715
+ // gh#570: a scoped element overriding --a-density/--a-radius-k never
716
+ // re-derives those tokens unless it ALSO matches the selector that
717
+ // declares them (custom properties resolve their calc()/clamp() formula
718
+ // at the DECLARING element's own cascade, then inherit the already-
719
+ // resolved value down — a descendant override doesn't retrigger it).
720
+ // [parametric] on a non-root target opts that element into re-derivation.
721
+ // documentElement is exempt: it always matches `:root` already.
722
+ #syncParametricScope() {
723
+ const target = this.#resolveTarget();
724
+ if (target === document.documentElement) return;
725
+ if (this.parametric) target.setAttribute('data-parametric-scope', '');
726
+ else target.removeAttribute('data-parametric-scope');
727
+ }
728
+
689
729
  // ── Internal — uid for nested element ids ───────────────────────────
690
730
 
691
731
  get #uid() {