@adia-ai/web-components 0.0.12 → 0.0.14

package/components/tooltip/tooltip.yaml

@@ -6,14 +6,17 @@ tag: tooltip-ui
 component: Tooltip
 category: container
 version: 1
-description: Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.
+description: >-
+  Tooltip popup. Two modes — default `follows="trigger"` shows on hover/focus
+  anchored to wrapped children; `follows="pointer"` subscribes to chart-hover
+  events from [for] and renders a data-viz card that tracks the pointer.
 props:
   delay:
-    description: Delay in milliseconds before showing the tooltip on hover.
+    description: Delay in milliseconds before showing the tooltip on hover (trigger mode only).
     type: number
     default: 400
   placement:
-    description: Preferred position relative to the anchor element.
+    description: Preferred position relative to the anchor element (trigger mode only).
     type: string
     default: top
     enum:
@@ -26,9 +29,40 @@ props:
       - bottom-start
       - bottom-end
   text:
-    description: Tooltip text content displayed in the overlay.
+    description: Tooltip text content displayed in the overlay (trigger mode only).
     type: string
     default: ""
+  follows:
+    description: >-
+      `trigger` (default) pins to wrapped children via hover/focus. `pointer`
+      subscribes to chart-hover/chart-leave events from [for] and positions at
+      the pointer coordinates — used by chart-ui / heatmap-ui.
+    type: string
+    default: trigger
+    enum:
+      - trigger
+      - pointer
+    reflect: true
+  for:
+    description: >-
+      id-ref of a chart-ui / heatmap-ui to follow. Required when follows=pointer.
+      The target must dispatch `chart-hover` and `chart-leave` events.
+    type: string
+    default: ""
+    reflect: true
+  indicator:
+    description: >-
+      Color swatch shown beside each value row in pointer mode. `none` omits
+      the swatch. Swatch color reads `--tooltip-indicator-color` which the
+      host injects per-row from `--color-{seriesKey}`.
+    type: string
+    default: none
+    enum:
+      - none
+      - dot
+      - line
+      - dashed
+    reflect: true
 events: {}
 slots: {}
 states:

package/core/icons.js

@@ -84,6 +84,14 @@ try {
   weightModules = EMPTY_WEIGHTS;
 }
 
+/* Flag guarding the missing-icon warn below. In Vite dev, `weightModules`
+   is populated synchronously by the glob rewrite, so the registry is ready
+   before any icon-ui element connects. In non-Vite static deploys, the
+   manifest load is async and arrives some time after first paint — warning
+   during that window would false-positive for every icon on the page.
+   Flipped to `true` in the manifest `.then()` handler below. */
+let registryReady = hasViteGlob;
+
 // Non-Vite environments (plain static serving): fetch the build-time
 // manifest in the background and rebuild `weightModules` with lazy
 // fetch-based loaders. No top-level await — the module finishes loading
@@ -102,6 +110,7 @@ if (!hasViteGlob) {
       });
       return [weight, Object.fromEntries(entries)];
     }));
+    registryReady = true;
     // icon-ui elements that asked for an icon before the manifest loaded
     // gave up silently (resolveLoader returned null on EMPTY_WEIGHTS).
     // Re-request every <icon-ui name> now that a real loader map is in
@@ -114,7 +123,25 @@ if (!hasViteGlob) {
         if (name) loadIcon(name, weight);
       }
     }
-  }).catch(() => { /* keep EMPTY_WEIGHTS */ });
+  }).catch(() => { /* keep EMPTY_WEIGHTS — registryReady stays false */ });
+}
+
+/* Track which (name, weight) pairs we've already warned about so the
+   console stays readable even when a missing icon is used many times on
+   a page (e.g. a broken Phosphor name in a list row repeated 50×). */
+const warnedMissingIcons = new Set();
+function warnMissingIcon(name, weight) {
+  const key = cacheKey(name, weight);
+  if (warnedMissingIcons.has(key)) return;
+  warnedMissingIcons.add(key);
+  const weightNote = weight !== DEFAULT_WEIGHT ? ` at weight="${weight}"` : '';
+  const alias = ICON_ALIASES[name];
+  const aliasNote = alias ? ` (alias "${name}" → "${alias}" — also not found)` : '';
+  console.warn(
+    `[icon-ui] Icon "${name}"${weightNote} not found in the registry${aliasNote}. ` +
+    `Check the name against @phosphor-icons/core, use an alias in ICON_ALIASES, ` +
+    `or register a custom SVG via registerIcon().`
+  );
 }
 
 /**
@@ -213,6 +240,13 @@ async function loadIcon(name, weight = DEFAULT_WEIGHT) {
 
     if (!loader) {
       pending.delete(key);
+      // Warn once per (name, weight) — but only if the registry is
+      // known-complete. In non-Vite pre-manifest mode, `weightModules` is
+      // empty and every lookup fails legitimately until the manifest
+      // resolves; warning there would be noise. The manifest `.then()`
+      // handler above re-triggers loadIcon for every element, so misses
+      // that survive the re-query are the ones worth warning about.
+      if (registryReady) warnMissingIcon(name, weight);
       return;
     }
 

package/core/index.js

@@ -0,0 +1,25 @@
+/**
+ * core barrel — re-exports every public core module.
+ *
+ * Consumers who want to build on AdiaElement or use the reactive
+ * signal system directly do:
+ *
+ *   import { AdiaElement } from '@adia-ai/web-components/core';
+ *   import { signal, effect } from '@adia-ai/web-components/core';
+ *
+ * Exports are flat — every symbol from the re-exported files is
+ * available at this level. Symbol collisions between files are not
+ * allowed (there are none currently; keep it that way).
+ */
+
+export * from './element.js';
+export * from './form.js';
+export * from './signals.js';
+export * from './template.js';
+export * from './controller.js';
+export * from './provider.js';
+export * from './anchor.js';
+export * from './icons.js';
+export * from './markdown.js';
+export * from './transport.js';
+export * from './polyfills.js';

package/core/provider.js

@@ -26,7 +26,7 @@ import { AdiaElement } from './element.js';
 import { BaseController } from './controller.js';
 
 // ═══════════════════════════════════════════════════════════════
-// NANO PROVIDER (inline — tiny base class)
+// ADIA PROVIDER (inline — tiny base class)
 // ═══════════════════════════════════════════════════════════════
 
 class AdiaProvider extends AdiaElement {

package/index.css

@@ -0,0 +1,26 @@
+/**
+ * @adia-ai/web-components — the opinionated all-in-one stylesheet.
+ *
+ *   <link rel="stylesheet" href="@adia-ai/web-components/css" />
+ *
+ * Imports, in cascade order: design tokens (primitives + semantics
+ * + typography — via the colors tree) → component styles → global
+ * resets.
+ *
+ * Pattern CSS (adia-chat, adia-editor, app-shell, etc.) is NOT
+ * bundled here — each page links its own patterns explicitly.
+ * Opinionated theme overrides live in `./styles/themes.css`; link
+ * them separately when you want the 8 named themes.
+ *
+ * If you need a subset, skip this file and link the layers directly:
+ *   @adia-ai/web-components/styles/tokens.css
+ *   @adia-ai/web-components/styles/components.css
+ *   @adia-ai/web-components/styles/resets.css
+ *   @adia-ai/web-components/styles/themes.css      (optional)
+ *   @adia-ai/web-components/styles/prose.css       (optional)
+ *   @adia-ai/web-components/styles/typography.css  (standalone)
+ */
+
+@import "./styles/tokens.css";
+@import "./styles/components.css";
+@import "./styles/resets.css";

package/index.js

@@ -0,0 +1,18 @@
+/**
+ * @adia-ai/web-components — main entry.
+ *
+ *   import '@adia-ai/web-components';
+ *   import { AdiaButton, AdiaAppShell } from '@adia-ai/web-components';
+ *
+ * Loading this file registers every component + pattern custom
+ * element (side effect of each module's `customElements.define(...)`
+ * call). Pair with `@adia-ai/web-components/css` (the all-in-one
+ * stylesheet) or link tokens/components/resets individually.
+ *
+ * If you only want a subset, use the subpath imports:
+ *   import '@adia-ai/web-components/components/button';
+ *   import { AdiaAppShell } from '@adia-ai/web-components/patterns';
+ */
+
+export * from './components/index.js';
+export * from './patterns/index.js';

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
-    ".":         "./index.js",
-    "./css":     "./index.css",
-    "./a2ui":    "./a2ui/index.js",
-    "./core":    "./core/index.js",
-    "./patterns": "./patterns/index.js"
+    ".":              "./index.js",
+    "./css":          "./index.css",
+    "./a2ui":         "./a2ui/index.js",
+    "./core":         "./core/index.js",
+    "./core/*":       "./core/*.js",
+    "./components":   "./components/index.js",
+    "./components/*": "./components/*/*.js",
+    "./patterns":     "./patterns/index.js",
+    "./patterns/*":   "./patterns/*/*.js",
+    "./styles/*":     "./styles/*",
+    "./traits":       "./traits/index.js",
+    "./traits/*":     "./traits/*.js",
+    "./package.json": "./package.json"
   },
   "files": [
     "core/",

package/patterns/adia-chat/adia-chat.js

@@ -1,6 +1,6 @@
 import { AdiaElement } from '../../core/element.js';
 import { renderMarkdown } from '../../core/markdown.js';
-import { streamChat } from '../../../gen-ui/llm/adapters/index.js';
+import { streamChat } from '../../../a2ui/compose/llm/adapters/index.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

package/styles/colors/semantics.css

@@ -97,8 +97,9 @@
 
   /* L3 — short-alias matrix (the consumable API for neutral surfaces) */
   --a-bg:              var(--a-canvas-0);
-  --a-bg-subtle:       var(--a-canvas-2);
-  --a-bg-muted:        var(--a-canvas-1);
+  --a-bg-scrim:        var(--a-canvas-1-scrim);
+  --a-bg-subtle:       var(--a-canvas-1);
+  --a-bg-muted:        var(--a-canvas-2);
   --a-bg-strong:       var(--a-canvas-4);
   --a-bg-hover:        var(--a-canvas-3);
   --a-bg-active:       var(--a-canvas-pressed);
@@ -464,10 +465,10 @@
      UI (FIELD) — Form input surfaces
      ══════════════════════════════════════════════════════════════ */
 
-  --a-ui-bg:               var(--a-neutral-0-scrim);
-  --a-ui-bg-hover:         var(--a-neutral-2-scrim);
+  --a-ui-bg:               var(--a-canvas-0-scrim);
+  --a-ui-bg-hover:         var(--a-canvas-0-scrim);
   --a-ui-bg-active:        var(--a-canvas-0);
-  --a-ui-bg-selected:      var(--a-canvas-0-scrim);
+  --a-ui-bg-selected:      var(--a-canvas-bright);
   --a-ui-bg-disabled:      var(--a-canvas-1);
   --a-ui-bg-invalid:       var(--a-danger-muted);
 

package/styles/{styles.css → components.css}

@@ -1,5 +1,12 @@
 /**
- * Styles barrel — imports all component CSS + global reset.
+ * Components barrel — imports every component's CSS, in stamp order.
+ *
+ * This file is *only* the `packages/web-components/components/**`
+ * stylesheet set. Patterns (adia-chat, adia-editor, app-shell,
+ * app-nav, section-nav, gen-ui, etc.) are NOT imported here — each
+ * page links its own patterns explicitly. Global resets live in
+ * `resets.css` and must be linked separately.
+ *
  * All components use Light DOM — styles target tag names directly.
  */
 
@@ -46,6 +53,7 @@
 @import "../components/grid/grid.css";
 @import "../components/stack/stack.css";
 @import "../components/chart/chart.css";
+@import "../components/chart-legend/chart-legend.css";
 @import "../components/popover/popover.css";
 @import "../components/accordion/accordion.css";
 @import "../components/divider/divider.css";
@@ -82,113 +90,3 @@
 @import "../components/agent-suggestions/agent-suggestions.css";
 @import "../components/agent-questions/agent-questions.css";
 @import "../components/agent-artifact/agent-artifact.css";
-@import "../patterns/gen-ui/gen-ui.css";
-
-/* ── Reset ── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  scrollbar-width: none;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-/* Kill default focus outline — components manage their own via --a-focus-ring */
-*:focus {
-  outline: none;
-}
-
-/* Prevent text selection on all interactive components */
-:is(button-ui, kbd-ui, tag-ui, input-ui, textarea-ui, select-ui, check-ui, radio-ui, switch-ui,
-    slider-ui, range-ui, segmented-ui, segment-ui) {
-  user-select: none;
-}
-
-html {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-  hanging-punctuation: first last;
-  color-scheme: light dark;
-}
-
-body {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-
-  margin: 0;
-  font-family: var(--a-font-family);
-  font-size: var(--a-body-size);
-  font-style: normal;
-  font-variation-settings: 'slnt' 0, 'ital' 0;
-  line-height: 1.5;
-  color: var(--a-fg);
-  background: var(--a-bg);
-  min-block-size: 100dvb;
-}
-
-img,
-picture,
-svg,
-video,
-canvas {
-  display: block;
-  max-inline-size: 100%;
-  block-size: auto;
-}
-
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-  padding: 0;
-}
-
-/* ── Size-query provider utility ──────────────────────────────────
-   Opt any element into being a container-query size provider for
-   its descendants, without the nesting fragility of applying
-   container-type to every instance of a primitive. Use sparingly —
-   on panels, split-panes, cards that actually need responsive
-   children — and descendants query via bare `@container (width < Xrem)`
-   (matches nearest) or `@container container (...)` for clarity.
-
-   Why inline-size: block-direction height stays content-driven.
-   Why an attribute: explicit opt-in; avoids accidental containment
-   collapse when a primitive is composed inside another flex chain. */
-[provide-container-inline-size] {
-  container-type: inline-size;
-  container-name: container;
-}
-
-
-:focus-visible {
-  outline: var(--ui-focus-width, 2px) solid var(--ui-focus, Highlight);
-  outline-offset: 2px;
-}
-
-::selection {
-  background: var(--a-selection-bg);
-  color: var(--a-selection-text);
-  border-radius: var(--a-selection-radius);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-  line-height: 1.1;
-}
-
-p,
-li,
-figcaption {
-  text-wrap: pretty;
-}
-
-a:not([class]) {
-  text-underline-offset: 0.12em;
-}

package/styles/resets.css

@@ -0,0 +1,116 @@
+/**
+ * Global resets — box-sizing, scrollbar hiding, focus management,
+ * element defaults, and the size-query provider utility.
+ *
+ * Imported from styles.css (the barrel). Targets document-level
+ * defaults and universal selectors; component-scoped rules live in
+ * each component's own CSS under `@scope (component-n)`.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* Kill default focus outline — components manage their own via --a-focus-ring */
+*:focus {
+  outline: none;
+}
+
+/* Prevent text selection on all interactive components */
+:is(button-ui, kbd-ui, tag-ui, input-ui, textarea-ui, select-ui, check-ui, radio-ui, switch-ui,
+    slider-ui, range-ui, segmented-ui, segment-ui) {
+  user-select: none;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  hanging-punctuation: first last;
+  color-scheme: light dark;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+
+  margin: 0;
+  font-family: var(--a-font-family);
+  font-size: var(--a-body-size);
+  font-style: normal;
+  font-variation-settings: 'slnt' 0, 'ital' 0;
+  line-height: 1.5;
+  color: var(--a-fg);
+  background: var(--a-bg);
+  min-block-size: 100dvb;
+}
+
+img,
+picture,
+svg,
+video,
+canvas {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
+/* ── Size-query provider utility ──────────────────────────────────
+   Opt any element into being a container-query size provider for
+   its descendants, without the nesting fragility of applying
+   container-type to every instance of a primitive. Use sparingly —
+   on panels, split-panes, cards that actually need responsive
+   children — and descendants query via bare `@container (width < Xrem)`
+   (matches nearest) or `@container container (...)` for clarity.
+
+   Why inline-size: block-direction height stays content-driven.
+   Why an attribute: explicit opt-in; avoids accidental containment
+   collapse when a primitive is composed inside another flex chain. */
+[provide-container-inline-size] {
+  container-type: inline-size;
+  container-name: container;
+}
+
+
+:focus-visible {
+  outline: var(--ui-focus-width, 2px) solid var(--ui-focus, Highlight);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--a-selection-bg);
+  color: var(--a-selection-text);
+  border-radius: var(--a-selection-radius);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  line-height: 1.1;
+}
+
+p,
+li,
+figcaption {
+  text-wrap: pretty;
+}
+
+a:not([class]) {
+  text-underline-offset: 0.12em;
+}

package/styles/tokens.css

@@ -16,10 +16,16 @@
    · Monospace font is the default — data-confident, technical character
    ═══════════════════════════════════════════════════════════════ */
 
+/* Color ramps + semantic role aliases + typography scale are
+   primitive-layer — every component consumes `--a-fg`, `--a-bg-*`,
+   `--a-font-family`, `--a-body-size`, etc. Kept bundled. */
 @import "./colors/index.css";
 @import "./typography.css";
-@import "./prose.css";
-@import "./themes.css";
+
+/* NOT imported here:
+   - styles/prose.css   — opt-in per-page; [prose] attribute only
+   - styles/themes.css  — opt-in per-page; 8 named themes + schemes
+   Link separately from HTML when needed. */
 
 /* ═══════════════════════════════════════════════════════════════
    PARAMETRIC MULTIPLIERS — @property declarations

package/core/_cm-core.js

@@ -1,38 +0,0 @@
-/**
- * CodeMirror 6 core re-exports.
- *
- * Thin shim so the rest of the AdiaUI codebase imports CM symbols from
- * `@core/_cm-core.js` and the production build can split them into a
- * single minified chunk (see scripts/build-site.mjs:bundleCodeEditor).
- */
-
-export {
-  EditorState,
-  EditorSelection,
-  Compartment,
-  StateEffect,
-} from '@codemirror/state';
-
-export {
-  EditorView,
-  lineNumbers,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  placeholder,
-  drawSelection,
-  keymap,
-} from '@codemirror/view';
-
-export {
-  defaultKeymap,
-  history,
-  historyKeymap,
-  indentWithTab,
-} from '@codemirror/commands';
-
-export {
-  HighlightStyle,
-  syntaxHighlighting,
-  LanguageSupport,
-  defaultHighlightStyle,
-} from '@codemirror/language';

package/core/_cm-theme.js

@@ -1,58 +0,0 @@
-/**
- * AdiaUI base theme + highlight style for CodeMirror 6.
- *
- * The base theme is deliberately near-empty — it only sets the handful
- * of structural rules that MUST live inside `EditorView.theme()`. All
- * colors, spacing, font size, radius, and token-span styling live in
- * `components/code/code.css` inside `@scope (code-ui)` and consume
- * AdiaUI semantic tokens.
- *
- * CodeMirror injects its CSS-in-JS stylesheets at module load; AdiaUI's
- * authored stylesheet loads after that, so `@scope (code-ui) .cm-*`
- * overrides win on natural specificity — no `!important` needed.
- *
- * The highlight style uses `class:` rather than `color:` so CodeMirror
- * emits `<span class="tok-keyword">` instead of inline styles — exactly
- * what our CSS needs. See spec SPEC-CODE-EDITOR-001 §6.3 for the full
- * Lezer tag → class → token mapping.
- */
-
-import { EditorView } from '@codemirror/view';
-import { HighlightStyle } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
-
-export const adiaBaseTheme = EditorView.theme({
-  '&': {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    color: 'inherit',
-    backgroundColor: 'transparent',
-  },
-  '.cm-content': {
-    padding: '0',
-    caretColor: 'inherit',
-  },
-  '.cm-focused': {
-    outline: 'none',
-  },
-});
-
-export const adiaHighlightStyle = HighlightStyle.define([
-  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment],                   class: 'tok-comment' },
-  { tag: [t.keyword, t.controlKeyword, t.modifier, t.operatorKeyword],               class: 'tok-keyword' },
-  { tag: [t.string, t.character, t.regexp, t.escape, t.special(t.string)],           class: 'tok-string' },
-  { tag: [t.number, t.integer, t.float],                                             class: 'tok-number' },
-  { tag: [t.bool, t.null, t.atom],                                                   class: 'tok-boolean' },
-  { tag: [t.operator, t.logicOperator, t.arithmeticOperator, t.compareOperator,
-          t.updateOperator, t.definitionOperator],                                   class: 'tok-operator' },
-  { tag: [t.punctuation, t.bracket, t.paren, t.brace, t.squareBracket,
-          t.angleBracket, t.separator],                                              class: 'tok-punctuation' },
-  { tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName],     class: 'tok-function' },
-  { tag: [t.variableName, t.local(t.variableName), t.self],                          class: 'tok-variable' },
-  { tag: [t.typeName, t.className, t.namespace],                                     class: 'tok-type' },
-  { tag: [t.propertyName, t.labelName, t.definition(t.variableName)],                class: 'tok-property' },
-  { tag: [t.tagName, t.heading, t.contentSeparator],                                 class: 'tok-tag' },
-  { tag: [t.attributeName, t.attributeValue],                                        class: 'tok-attribute' },
-  { tag: [t.url, t.link],                                                            class: 'tok-url' },
-  { tag: [t.invalid, t.deleted],                                                     class: 'tok-invalid' },
-]);

package/core/_lang-css.js

@@ -1,2 +0,0 @@
-import { css } from '@codemirror/lang-css';
-export const extension = css();

package/core/_lang-html.js

@@ -1,2 +0,0 @@
-import { html } from '@codemirror/lang-html';
-export const extension = html();

package/core/_lang-javascript.js

@@ -1,2 +0,0 @@
-import { javascript } from '@codemirror/lang-javascript';
-export const extension = javascript({ jsx: false, typescript: false });

package/core/_lang-json.js

@@ -1,2 +0,0 @@
-import { json } from '@codemirror/lang-json';
-export const extension = json();

package/core/_lang-markdown.js

@@ -1,2 +0,0 @@
-import { markdown } from '@codemirror/lang-markdown';
-export const extension = markdown();

package/core/_lang-yaml.js

@@ -1,2 +0,0 @@
-import { yaml } from '@codemirror/lang-yaml';
-export const extension = yaml();