@adia-ai/web-components 0.4.8 → 0.5.0

package/components/table/table.yaml

@@ -74,15 +74,67 @@ props:
     default: false
 events:
   cell-click:
-    description: Fired when a data cell is clicked.
+    description: Fired when a data cell is clicked. detail carries the cell location + value.
+    detail:
+      key:
+        type: string
+        description: Column key.
+      row:
+        type: object
+        description: Row data object.
+      value:
+        description: Cell value (type depends on column).
+      dataIndex:
+        type: number
+        description: Row index in the underlying data array.
+  filter-change:
+    description: Fired when an interactive filter row applies / clears. detail.filters is the current filter map.
+    detail:
+      filters:
+        type: object
+        description: "Map of `{ [columnKey]: filterValue }` reflecting active filters."
   page:
     description: Fired when the user navigates to a different page.
+    detail:
+      page:
+        type: number
+        description: New active page index (1-based).
   resize:
     description: Fired when a column is resized via drag.
+    detail:
+      key:
+        type: string
+        description: Column key being resized.
+      width:
+        type: number
+        description: New column width in pixels.
+  row-expand:
+    description: Fired when an expandable row's chevron is activated. detail.index is the row position; detail.row is the row data.
+    detail:
+      index:
+        type: number
+        description: Row index in the underlying data array.
+      row:
+        type: object
+        description: Row data object.
   select:
-    description: Fired when row selection changes.
+    description: Fired when row selection changes. detail.selected is an array of row indices or IDs.
+    detail:
+      selected:
+        type: array
+        description: Array of selected row indices or IDs (driven by [select-mode]).
   sort:
     description: Fired when sort state changes via header click.
+    detail:
+      key:
+        type: string
+        description: Column key being sorted.
+      dir:
+        type: string
+        description: Sort direction — "asc" / "desc" / null (cleared).
+      sortState:
+        type: array
+        description: Full sort state array (multi-column support).
 slots: {}
 states:
   - name: idle

package/components/tabs/tabs.a2ui.json

@@ -51,7 +51,13 @@
     ],
     "events": {
       "change": {
-        "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."
+        "description": "Fired when the value changes (on blur for inputs, on selection for pickers).",
+        "detail": {
+          "value": {
+            "description": "New active tab value.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/tabs/tabs.d.ts

@@ -12,7 +12,12 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type TabsChangeEvent = CustomEvent<unknown>;
+export interface TabsChangeEventDetail {
+  /** New active tab value. */
+  value: string;
+}
+
+export type TabsChangeEvent = CustomEvent<TabsChangeEventDetail>;
 
 export class UITabs extends UIElement {
   /** Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal. */

package/components/tabs/tabs.yaml

@@ -29,6 +29,10 @@ props:
 events:
   change:
     description: "Fired when the value changes (on blur for inputs, on selection for pickers)."
+    detail:
+      value:
+        type: string
+        description: New active tab value.
 slots:
   default:
     description: Child tab-ui elements that form the tab strip

package/components/tag/tag.a2ui.json

@@ -67,7 +67,17 @@
     "composes": [],
     "events": {
       "remove": {
-        "description": "Fired when the dismiss button is activated."
+        "description": "Fired when the dismiss button is activated.",
+        "detail": {
+          "text": {
+            "description": "Tag text content.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Tag value (same as text).",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/tag/tag.d.ts

@@ -12,7 +12,14 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type TagRemoveEvent = CustomEvent<unknown>;
+export interface TagRemoveEventDetail {
+  /** Tag text content. */
+  text: string;
+  /** Tag value (same as text). */
+  value: string;
+}
+
+export type TagRemoveEvent = CustomEvent<TagRemoveEventDetail>;
 
 export class UITag extends UIElement {
   /** Disables interaction and dims the tag. */

package/components/tag/tag.yaml

@@ -45,6 +45,13 @@ props:
 events:
   remove:
     description: Fired when the dismiss button is activated.
+    detail:
+      text:
+        type: string
+        description: Tag text content.
+      value:
+        type: string
+        description: Tag value (same as text).
 slots: {}
 states:
   - name: idle

package/components/timeline/timeline.a2ui.json

@@ -47,14 +47,10 @@
     ],
     "events": {
       "timeline-toggle": {
-        "description": "Fired when a collapsible timeline item is expanded or collapsed. Detail carries the toggled item's id + new open state.",
+        "description": "Fired when a collapsible timeline item is expanded or collapsed. detail.expanded carries the new open state.",
         "detail": {
-          "id": {
-            "description": "Item id (matches the timeline-item-ui's data-id attr).",
-            "type": "string"
-          },
-          "open": {
-            "description": "New open state after the toggle.",
+          "expanded": {
+            "description": "New open state of the toggled item after the press.",
             "type": "boolean"
           }
         }

package/components/timeline/timeline.d.ts

@@ -13,10 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export interface TimelineToggleEventDetail {
-  /** Item id (matches the timeline-item-ui's data-id attr). */
-  id: string;
-  /** New open state after the toggle. */
-  open: boolean;
+  /** New open state of the toggled item after the press. */
+  expanded: boolean;
 }
 
 export type TimelineToggleEvent = CustomEvent<TimelineToggleEventDetail>;

package/components/timeline/timeline.yaml

@@ -27,14 +27,11 @@ props:
     enum: [sm, md]
 events:
   timeline-toggle:
-    description: Fired when a collapsible timeline item is expanded or collapsed. Detail carries the toggled item's id + new open state.
+    description: Fired when a collapsible timeline item is expanded or collapsed. detail.expanded carries the new open state.
     detail:
-      id:
-        type: string
-        description: Item id (matches the timeline-item-ui's data-id attr).
-      open:
+      expanded:
         type: boolean
-        description: New open state after the toggle.
+        description: New open state of the toggled item after the press.
 slots:
   default:
     description: Accepts <timeline-item-ui> children.

package/components/toggle-group/toggle-group.a2ui.json

@@ -37,7 +37,13 @@
     "composes": [],
     "events": {
       "change": {
-        "description": "Fired when selection changes. detail: { value }"
+        "description": "Fired when selection changes. detail: { value }",
+        "detail": {
+          "value": {
+            "description": "New toggle-group value.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/toggle-group/toggle-group.d.ts

@@ -12,7 +12,12 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type ToggleGroupChangeEvent = CustomEvent<unknown>;
+export interface ToggleGroupChangeEventDetail {
+  /** New toggle-group value. */
+  value: string;
+}
+
+export type ToggleGroupChangeEvent = CustomEvent<ToggleGroupChangeEventDetail>;
 
 export class UIToggleGroup extends UIElement {
   /** When true, restrict to one active option (single-select). */

package/components/toggle-group/toggle-group.yaml

@@ -19,6 +19,10 @@ props:
 events:
   change:
     description: "Fired when selection changes. detail: { value }"
+    detail:
+      value:
+        type: string
+        description: New toggle-group value.
 slots:
   default:
     description: "Default slot — primary child content."

package/components/toggle-scheme/toggle-scheme.a2ui.json

@@ -129,7 +129,17 @@
     ],
     "events": {
       "scheme-change": {
-        "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }."
+        "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }.",
+        "detail": {
+          "scheme": {
+            "description": "Active color scheme (\"light\" or \"dark\").",
+            "type": "string"
+          },
+          "source": {
+            "description": "Change source — \"press\" / \"media\" / \"programmatic\".",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/toggle-scheme/toggle-scheme.d.ts

@@ -12,7 +12,14 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type ToggleSchemeSchemeChangeEvent = CustomEvent<unknown>;
+export interface ToggleSchemeSchemeChangeEventDetail {
+  /** Active color scheme ("light" or "dark"). */
+  scheme: string;
+  /** Change source — "press" / "media" / "programmatic". */
+  source: string;
+}
+
+export type ToggleSchemeSchemeChangeEvent = CustomEvent<ToggleSchemeSchemeChangeEventDetail>;
 
 export class UIToggleScheme extends UIElement {
   /** Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle(). */

package/components/toggle-scheme/toggle-scheme.yaml

@@ -124,6 +124,13 @@ events:
     description: >-
       Fired when the active scheme changes. detail contains
       { scheme: "light" | "dark", source: "press" | "media" | "programmatic" }.
+    detail:
+      scheme:
+        type: string
+        description: Active color scheme ("light" or "dark").
+      source:
+        type: string
+        description: Change source — "press" / "media" / "programmatic".
 slots: {}
 states:
   - name: idle

package/components/tree/tree.a2ui.json

@@ -29,7 +29,21 @@
     ],
     "events": {
       "tree-select": {
-        "description": "Fired when an item is selected. detail: { item, text, value }"
+        "description": "Fired when an item is selected. detail: { item, text, value }",
+        "detail": {
+          "item": {
+            "description": "Selected tree-item element.",
+            "type": "object"
+          },
+          "text": {
+            "description": "Item text content.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Item value attribute.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/tree/tree.d.ts

@@ -12,7 +12,16 @@
 
 import { UIElement } from '../../core/element.js';
 
-export type TreeSelectEvent = CustomEvent<unknown>;
+export interface TreeSelectEventDetail {
+  /** Selected tree-item element. */
+  item: Record<string, unknown>;
+  /** Item text content. */
+  text: string;
+  /** Item value attribute. */
+  value: string;
+}
+
+export type TreeSelectEvent = CustomEvent<TreeSelectEventDetail>;
 
 export class UITree extends UIElement {
 

package/components/tree/tree.yaml

@@ -16,6 +16,16 @@ props: {}
 events:
   tree-select:
     description: "Fired when an item is selected. detail: { item, text, value }"
+    detail:
+      item:
+        type: object
+        description: Selected tree-item element.
+      text:
+        type: string
+        description: Item text content.
+      value:
+        type: string
+        description: Item value attribute.
 slots:
   default (tree-item-ui children):
     description: "Child content region for the `default (tree-item-ui children)` slot."

package/core/data-stream.d.ts

@@ -0,0 +1,56 @@
+/**
+ * data-stream — attribute-driven data ingestion, signal-backed.
+ *
+ * Public API surface: read the shared registry (`streams`) or await a
+ * stream's registration (`whenStream`). The internal MutationObserver
+ * + transport machinery (HTTP / SSE / WS / JSON / CSV / TSV / JSONL /
+ * text) is implementation-only — consumers see the signal + the events
+ * (`stream-load`, `stream-error`) on the element.
+ *
+ * @see ../USAGE.md
+ */
+
+import type { ReadonlySignal, Signal } from './signals.js';
+
+/**
+ * One entry in the shared streams registry. `signal.value` carries the
+ * parsed payload (shape depends on the transport's `parse` option).
+ * `refs` is the active subscriber count; the registry tears the entry
+ * down when it returns to 0.
+ */
+export interface StreamEntry {
+  /** Signal whose `.value` carries the parsed payload. Subscribe with `effect()`. */
+  signal: ReadonlySignal<unknown>;
+  /** Active subscriber count. */
+  refs: number;
+  /** Transport metadata — opaque to consumers. */
+  transport: unknown;
+  /** Resolved options for the stream — opaque to consumers. */
+  opts: unknown;
+}
+
+/**
+ * Read-only public view of the streams registry. App code can do:
+ *
+ *     import { streams } from '@adia-ai/web-components/core/data-stream';
+ *     streams.get('rev')?.signal.value
+ *
+ * Subscribe via `effect()` on the entry's `signal`.
+ */
+export const streams: {
+  get(id: string): StreamEntry | undefined;
+  has(id: string): boolean;
+  keys(): MapIterator<string>;
+  size(): number;
+};
+
+/**
+ * Resolves with the stream entry once it's registered. If the stream
+ * already exists, resolves synchronously on the next microtask; if not,
+ * resolves the moment the first DOM consumer (or any caller of
+ * acquireStream) creates it. Useful for cross-package adapters
+ * (streams-bridge, A2UI surfaces) that may run before the DOM source
+ * has connected. The promise never rejects — pair with AbortSignal at
+ * the caller if you need cancellation.
+ */
+export function whenStream(id: string): Promise<StreamEntry>;

package/core/element.d.ts

@@ -13,6 +13,16 @@
 import type { ReadonlySignal, Signal } from './signals.js';
 import type { TemplateResult } from './template.js';
 
+// Mirror the runtime re-exports from element.js so a single import of
+// `@adia-ai/web-components/core/element` resolves both the UIElement
+// class AND the reactive/template helpers — matches the canonical
+// pattern documented in USAGE.md and the `element.js` runtime export
+// surface. Closes FEEDBACK-05 P1 (drift caught post-v0.4.9 upgrade).
+export { signal, computed, effect, batch, untracked, isSignal } from './signals.js';
+export type { ReadonlySignal, Signal, ComputedSignal, EffectOptions, EffectDisposer } from './signals.js';
+export { html, css, repeat } from './template.js';
+export type { TemplateResult } from './template.js';
+
 /** Property declaration in a component's `static properties = { … }` map. */
 export interface PropertyConfig<T = unknown> {
   /** Coercion target — `Boolean`, `Number`, `String`, or custom. */

package/core/index.d.ts

@@ -9,3 +9,9 @@ export * from './template.js';
 export * from './element.js';
 export * from './form.js';
 export * from './register.js';
+// Mirror the explicit re-export in core/index.js — `streams` + `whenStream`
+// (the public surface of the data-stream attribute-driven ingestion module).
+// `export *` from data-stream.js would also expose internals; keep the
+// explicit form so the type barrel matches the runtime exactly.
+export { streams, whenStream } from './data-stream.js';
+export type { StreamEntry } from './data-stream.js';

package/index.d.ts

@@ -86,6 +86,8 @@ export type {
   UIOtpInput,
   OtpInputEvent,
   OtpInputEventDetail,
+  OtpInputCompleteEvent,
+  OtpInputCompleteEventDetail,
 } from './components/otp-input/otp-input.js';
 
 export type {
@@ -99,9 +101,10 @@ export type {
   ColorFormat,
   ColorPickerChangeEvent,
   ColorPickerInputEvent,
-  ColorPickerFormatChangeEvent,
   ColorPickerChangeEventDetail,
-  ColorPickerFormatChangeEventDetail,
+  ColorPickerClampRecord,
+  ColorPickerConstraintClampEvent,
+  ColorPickerConstraintClampEventDetail,
 } from './components/color-picker/color-picker.js';
 
 export type {
@@ -115,6 +118,10 @@ export type {
   CodeChangeEvent,
   CodeInputEvent,
   CodeChangeEventDetail,
+  CodeSaveEvent,
+  CodeSaveEventDetail,
+  CodeLanguageLoadErrorEvent,
+  CodeLanguageLoadErrorEventDetail,
 } from './components/code/code.js';
 
 export type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -58,7 +58,7 @@
     "./core/icons-phosphor.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-runtime": "^0.4.0"
+    "@adia-ai/a2ui-runtime": "^0.5.0"
   },
   "publishConfig": {
     "access": "public",