@adia-ai/web-components 0.4.7 → 0.4.9

package/components/agent-questions/agent-questions.d.ts

@@ -5,12 +5,22 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export interface AgentQuestionsQuestionsAnswerEventDetail {
+  /** The full selected option object. */
+  option: Record<string, unknown>;
+  /** Array of selected option IDs. */
+  selected: unknown[];
+}
+
+export type AgentQuestionsQuestionsAnswerEvent = CustomEvent<AgentQuestionsQuestionsAnswerEventDetail>;
+
 export class UIAgentQuestions extends UIElement {
   /** Helper text. */
   helper: string;
@@ -20,4 +30,11 @@ export class UIAgentQuestions extends UIElement {
   question: string;
   /** Submit button label (multi mode). */
   submitLabel: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentQuestions, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'questions-answer', listener: (ev: AgentQuestionsQuestionsAnswerEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/agent-questions/agent-questions.yaml

@@ -7,6 +7,10 @@ component: AgentQuestions
 category: agent
 version: 1
 description: Multi-choice clarifying-question cards.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
 props:
   helper:
     description: Helper text.
@@ -28,6 +32,13 @@ props:
 events:
   questions-answer:
     description: "Fired on questions-answer."
+    detail:
+      selected:
+        type: array
+        description: Array of selected option IDs.
+      option:
+        type: object
+        description: The full selected option object.
 slots:
   default:
     description: "Default slot — primary child content."

package/components/agent-reasoning/agent-reasoning.a2ui.json

@@ -50,15 +50,41 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "timeline-ui",
+      "timeline-item-ui"
+    ],
     "events": {
       "reasoning-finish": {
-        "description": "Fired on reasoning-finish."
+        "description": "Fired on reasoning-finish.",
+        "detail": {
+          "status": {
+            "description": "Whether reasoning was resolved.",
+            "type": "boolean"
+          },
+          "summary": {
+            "description": "Summary label text rendered after finish.",
+            "type": "string"
+          }
+        }
       },
       "reasoning-step-toggle": {
-        "description": "Fired on reasoning-step-toggle."
+        "description": "Fired on reasoning-step-toggle.",
+        "detail": {
+          "stepId": {
+            "description": "ID of the toggled reasoning step (matches data-step-id).",
+            "type": "string"
+          }
+        }
       },
       "reasoning-toggle": {
-        "description": "Fired on reasoning-toggle."
+        "description": "Fired on reasoning-toggle.",
+        "detail": {
+          "collapsed": {
+            "description": "Whether the reasoning section is now collapsed.",
+            "type": "boolean"
+          }
+        }
       }
     },
     "examples": [

package/components/agent-reasoning/agent-reasoning.d.ts

@@ -5,12 +5,34 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export interface AgentReasoningReasoningFinishEventDetail {
+  /** Whether reasoning was resolved. */
+  status: boolean;
+  /** Summary label text rendered after finish. */
+  summary: string;
+}
+
+export type AgentReasoningReasoningFinishEvent = CustomEvent<AgentReasoningReasoningFinishEventDetail>;
+export interface AgentReasoningReasoningStepToggleEventDetail {
+  /** ID of the toggled reasoning step (matches data-step-id). */
+  stepId: string;
+}
+
+export type AgentReasoningReasoningStepToggleEvent = CustomEvent<AgentReasoningReasoningStepToggleEventDetail>;
+export interface AgentReasoningReasoningToggleEventDetail {
+  /** Whether the reasoning section is now collapsed. */
+  collapsed: boolean;
+}
+
+export type AgentReasoningReasoningToggleEvent = CustomEvent<AgentReasoningReasoningToggleEventDetail>;
+
 export class UIAgentReasoning extends UIElement {
   /** Start collapsed. */
   collapsed: boolean;
@@ -20,4 +42,13 @@ export class UIAgentReasoning extends UIElement {
   noAutocollapse: boolean;
   /** Drives the status icon — idle, active (spinner), done (check), error (warning). */
   status: 'idle' | 'active' | 'done' | 'error';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentReasoning, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'reasoning-finish', listener: (ev: AgentReasoningReasoningFinishEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'reasoning-step-toggle', listener: (ev: AgentReasoningReasoningStepToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'reasoning-toggle', listener: (ev: AgentReasoningReasoningToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/agent-reasoning/agent-reasoning.yaml

@@ -7,6 +7,11 @@ component: AgentReasoning
 category: agent
 version: 1
 description: Agent inner monologue + pipeline viewer with steps, thoughts, plans, and iterations.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - timeline-ui
+  - timeline-item-ui
 props:
   noAutocollapse:
     description: Disable auto-collapse after finish().
@@ -30,10 +35,25 @@ props:
 events:
   reasoning-finish:
     description: "Fired on reasoning-finish."
+    detail:
+      summary:
+        type: string
+        description: Summary label text rendered after finish.
+      status:
+        type: boolean
+        description: Whether reasoning was resolved.
   reasoning-step-toggle:
     description: "Fired on reasoning-step-toggle."
+    detail:
+      stepId:
+        type: string
+        description: ID of the toggled reasoning step (matches data-step-id).
   reasoning-toggle:
     description: "Fired on reasoning-toggle."
+    detail:
+      collapsed:
+        type: boolean
+        description: Whether the reasoning section is now collapsed.
 slots:
   default:
     description: "Default slot — primary child content."

package/components/agent-suggestions/agent-suggestions.a2ui.json

@@ -39,9 +39,26 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "suggestion-select": {
-        "description": "Fired on suggestion-select."
+        "description": "Fired on suggestion-select.",
+        "detail": {
+          "index": {
+            "description": "Index of the selected suggestion.",
+            "type": "number"
+          },
+          "label": {
+            "description": "Suggestion label text.",
+            "type": "string"
+          },
+          "prompt": {
+            "description": "Suggestion prompt content.",
+            "type": "string"
+          }
+        }
       }
     },
     "examples": [

package/components/agent-suggestions/agent-suggestions.d.ts

@@ -5,12 +5,24 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export interface AgentSuggestionsSuggestionSelectEventDetail {
+  /** Index of the selected suggestion. */
+  index: number;
+  /** Suggestion label text. */
+  label: string;
+  /** Suggestion prompt content. */
+  prompt: string;
+}
+
+export type AgentSuggestionsSuggestionSelectEvent = CustomEvent<AgentSuggestionsSuggestionSelectEventDetail>;
+
 export class UIAgentSuggestions extends UIElement {
   /** Disable all chips. */
   disabled: boolean;
@@ -18,4 +30,11 @@ export class UIAgentSuggestions extends UIElement {
   size: string;
   /** outline | ghost | subtle */
   variant: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentSuggestions, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'suggestion-select', listener: (ev: AgentSuggestionsSuggestionSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/agent-suggestions/agent-suggestions.yaml

@@ -7,6 +7,10 @@ component: AgentSuggestions
 category: agent
 version: 1
 description: Row of follow-up suggestion chips.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
 props:
   disabled:
     description: Disable all chips.
@@ -24,6 +28,16 @@ props:
 events:
   suggestion-select:
     description: "Fired on suggestion-select."
+    detail:
+      label:
+        type: string
+        description: Suggestion label text.
+      prompt:
+        type: string
+        description: Suggestion prompt content.
+      index:
+        type: number
+        description: Index of the selected suggestion.
 slots:
   default:
     description: "Default slot — primary child content."

package/components/agent-trace/agent-trace.a2ui.json

@@ -34,9 +34,16 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {
       "trace-toggle": {
-        "description": "Fired on trace-toggle."
+        "description": "Fired on trace-toggle.",
+        "detail": {
+          "collapsed": {
+            "description": "Whether the trace is now collapsed.",
+            "type": "boolean"
+          }
+        }
       }
     },
     "examples": [

package/components/agent-trace/agent-trace.d.ts

@@ -5,15 +5,30 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export interface AgentTraceTraceToggleEventDetail {
+  /** Whether the trace is now collapsed. */
+  collapsed: boolean;
+}
+
+export type AgentTraceTraceToggleEvent = CustomEvent<AgentTraceTraceToggleEventDetail>;
+
 export class UIAgentTrace extends UIElement {
   /** Hide the trace body. Default-visible disclosure (matches the agent-* family — agent-reasoning, agent-artifact). Set to opt out. */
   collapsed: boolean;
   /** Fallback summary label. */
   label: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentTrace, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'trace-toggle', listener: (ev: AgentTraceTraceToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/agent-trace/agent-trace.yaml

@@ -20,6 +20,10 @@ props:
 events:
   trace-toggle:
     description: "Fired on trace-toggle."
+    detail:
+      collapsed:
+        type: boolean
+        description: Whether the trace is now collapsed.
 slots:
   default:
     description: "Default slot — primary child content."

package/components/alert/alert.a2ui.json

@@ -68,6 +68,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {
       "close": {
         "description": "Fired when the close button is clicked"

package/components/alert/alert.d.ts

@@ -5,12 +5,15 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export type AlertCloseEvent = CustomEvent<unknown>;
+
 export class UIAlert extends UIElement {
   /** Bold headline rendered as the first line of the alert content. Pair with [description] for the canonical "banner" pattern (headline + body). When [title] or [description] is set, the [text] prop is ignored. */
   title: string;
@@ -26,4 +29,11 @@ export class UIAlert extends UIElement {
   text: string;
   /** Semantic color variant. */
   variant: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'neutral';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAlert, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'close', listener: (ev: AlertCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/aside/aside.a2ui.json

@@ -40,6 +40,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/avatar/avatar.a2ui.json

@@ -69,6 +69,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/avatar/avatar.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';

package/components/avatar/avatar.yaml

@@ -7,6 +7,10 @@ component: Avatar
 category: display
 version: 1
 description: Avatar with image → initials → empty fallback chain.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props:
   text:
     description: Display string (full name or initials). Initials derive from spaces — first letter of each word, max 2.

package/components/badge/badge.a2ui.json

@@ -78,6 +78,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/badge/badge.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';

package/components/badge/badge.yaml

@@ -7,6 +7,10 @@ component: Badge
 category: display
 version: 1
 description: Inline pill-shaped badge/tag. Text rendered via CSS attr().
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props:
   icon:
     description: Optional leading icon (any registered name). Use icon="dot" for chart-legend /

package/components/block/block.a2ui.json

@@ -50,6 +50,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/block/block.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';

package/components/breadcrumb/breadcrumb.a2ui.json

@@ -44,6 +44,11 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [
+      "menu-ui",
+      "button-ui",
+      "menu-item-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/breadcrumb/breadcrumb.d.ts

@@ -5,8 +5,9 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';

package/components/breadcrumb/breadcrumb.yaml

@@ -7,6 +7,12 @@ component: Breadcrumb
 category: navigation
 version: 1
 description: Breadcrumb trail with auto-inserted separators. Supports a leading icon (first child) and an overflow popover that collapses middle crumbs into a `…` menu.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - menu-ui
+  - button-ui
+  - menu-item-ui
 props:
   separator:
     description: Character or string rendered between breadcrumb items via CSS ::before.

package/components/button/button.a2ui.json

@@ -98,6 +98,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "action",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "press": {
         "description": "Fired on complete press (pointer up or Enter/Space)"

package/components/button/button.d.ts

@@ -5,12 +5,15 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export type ButtonPressEvent = CustomEvent<unknown>;
+
 export class UIButton extends UIElement {
   /** HTML button type (button, submit, reset) */
   type: string;
@@ -31,4 +34,11 @@ export class UIButton extends UIElement {
   /** Visual style — `solid` (default fill), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color="…"] alongside.
 For **inline navigation** (Terms of Service, Privacy Policy, footer links, "Sign in" / "Sign up" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces "link" instead of "button". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction. */
   variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'soft' | 'current';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIButton, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'press', listener: (ev: ButtonPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/button/button.yaml

@@ -7,6 +7,11 @@ component: Button
 category: action
 version: 1
 description: Clickable button with text, icon, and variant support. Supports submit type for forms.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# in their render() do NOT auto-import them. Consumer (or demo shell) must
+# explicitly import each composed primitive.
+composes:
+  - icon-ui  # created via document.createElement('icon-ui') when [icon] is set
 props:
   aria-label:
     description: Accessible label for screen readers. Auto-set from `text` when text is non-empty; meaningful override for icon-only buttons.

package/components/calendar-picker/calendar-picker.a2ui.json

@@ -79,6 +79,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when a date is selected"

package/components/canvas/canvas.a2ui.json

@@ -29,6 +29,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {
       "canvas-interaction": {
         "description": "Fired on canvas-interaction."

package/components/canvas/canvas.d.ts

@@ -5,13 +5,29 @@
  *
  * Type declarations generated by scripts/build/dts-codegen.mjs from
  * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
- * run `npm run components`, then `npm run codegen:dts` to regenerate;
- * or hand-author this file fully if rich event types are needed.
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
  */
 
 import { UIElement } from '../../core/element.js';
 
+export type CanvasInteractionEvent = CustomEvent<unknown>;
+export type CanvasChangeEvent = CustomEvent<unknown>;
+export type CanvasClickEvent = CustomEvent<unknown>;
+export type CanvasInputEvent = CustomEvent<unknown>;
+
 export class UICanvas extends UIElement {
   /** Component property: theme. */
   theme: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UICanvas, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'canvas-interaction', listener: (ev: CanvasInteractionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: CanvasChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'click', listener: (ev: CanvasClickEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: CanvasInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }