agent-robot-avatar 0.2.0

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 ADDED
@@ -0,0 +1,60 @@
1
+ # Changelog
2
+
3
+ All notable user-facing changes to Agent Robot Avatar are documented here.
4
+
5
+ The project follows Semantic Versioning for public releases. Internal development build numbers are not part of the public version history.
6
+
7
+ ## [Unreleased]
8
+
9
+ ## [0.2.0] - 2026-09-04
10
+
11
+ First stable release of the backward-compatible 0.2 series.
12
+
13
+ ### Added
14
+
15
+ - Added Traditional Chinese, Japanese, Korean, Spanish, Portuguese, German, and French documentation.
16
+ - Added package, installation, server-import, and real-browser smoke tests.
17
+ - Added `setAntennaFlash(enabled)` for per-avatar antenna flashing.
18
+ - Added built-in TypeScript declarations for actions, events, and public methods.
19
+
20
+ ### Changed
21
+
22
+ - Added a lightweight animated GIF preview for the README documentation.
23
+ - Moved localized README files into the `docs/` directory and added a unified language selector.
24
+ - Moved the interactive Demo and Windows launcher into the `demo/` directory.
25
+ - Removed runtime Demo badge logic and cache-busting query strings from internal module imports.
26
+ - Made the package safe to import in server-side JavaScript without browser globals.
27
+ - Corrected package side-effect metadata so bundlers preserve custom-element registration.
28
+ - Added typed package exports and automated declaration checks for npm consumers.
29
+ - Added an npm release rehearsal command and forced publishing to the official npm registry.
30
+ - Replaced four layers of runtime method wrapping with a shared extension registry.
31
+ - Routed built-in actions and antenna drawing through the same registry, leaving one lifecycle entry point.
32
+ - Shared global input listeners across avatar instances and paused frame rendering after sleep animations settle.
33
+
34
+ ## [0.1.0] - 2026-09-02
35
+
36
+ First public release.
37
+
38
+ ### Added
39
+
40
+ - Reusable `<agent-robot-avatar>` Web Component built with SVG and vanilla JavaScript
41
+ - Public `play(name)` and `reset()` APIs
42
+ - Idle gaze, automatic blinking, pointer following, and inertial head movement
43
+ - Jelly-style local drag deformation with elastic recovery
44
+ - `idle`, `bored`, `waiting`, `input`, `send`, `success`, `failure`, `warning`, `inspect`, `angry`, `error`, `surprise`, `sleep`, and `wake` states
45
+ - Dedicated `startWaiting()` and `stopWaiting()` lifecycle for pending Agent requests
46
+ - Distinct semantics for task failure, system error, blocked content, warning confirmation, and result inspection
47
+ - Semantic aliases for failure, review / verification, blocked-content, and system / connection-error states
48
+ - `face-state` event for host application synchronization
49
+ - `setPointerFollow(enabled)` API
50
+ - Adjustable head shape with `setHeadRoundness(value)` and `getHeadRoundness()`
51
+ - `head-roundness-change` event
52
+ - Optional `size`, `color`, and `auto-sleep` attributes
53
+ - Floating antenna with optional status flashing, disabled by default
54
+ - Full interactive Demo and a minimal integration example
55
+ - English and Simplified Chinese documentation
56
+ - npm-compatible package metadata for later package publication
57
+ - Contribution guide, issue templates, pull request template, MIT License, and Ko-fi funding metadata
58
+
59
+ [0.2.0]: https://github.com/CX-ARTLab/agent-robot-avatar/releases/tag/v0.2.0
60
+ [0.1.0]: https://github.com/CX-ARTLab/agent-robot-avatar/releases/tag/v0.1.0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 CX ART Lab
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,286 @@
1
+ # Agent Robot Avatar
2
+
3
+ <p align="center">
4
+ <img src="./assets/readme/agent-robot-avatar-header.jpg" alt="Agent Robot Avatar">
5
+ </p>
6
+
7
+ [English](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/README.md) | [简体中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-CN.md) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.md) | [日本語](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ja.md) | [한국어](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ko.md) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.md) | [Português](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.pt.md) | [Deutsch](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.de.md) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.md)
8
+
9
+ ![Version](https://img.shields.io/badge/version-v0.2.0-111111?style=flat-square) [![License](https://img.shields.io/badge/license-MIT-0A7EA4?style=flat-square)](./LICENSE) [![CI](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml/badge.svg?branch=main)](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [![Ko-fi](https://img.shields.io/badge/Ko--fi-Support-FF5E5B?style=flat-square&logo=ko-fi&logoColor=white)](https://ko-fi.com/P0E625WIOI)
10
+
11
+ ![Vanilla JavaScript](https://img.shields.io/badge/Vanilla-JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=000) ![Web Component](https://img.shields.io/badge/Web-Native%20Component-5A67D8?style=flat-square) ![SVG](https://img.shields.io/badge/Rendering-SVG-FFB13B?style=flat-square&logo=svg&logoColor=000) ![Zero Dependencies](https://img.shields.io/badge/Dependencies-0-2EA44F?style=flat-square) ![14 Agent States](https://img.shields.io/badge/Agent%20states-14-8B5CF6?style=flat-square) ![Pointer Following](https://img.shields.io/badge/Pointer-following-00A67E?style=flat-square) ![Jelly Drag](https://img.shields.io/badge/Drag-jelly%20physics-FF69B4?style=flat-square)
12
+
13
+ A lightweight, expressive robot avatar Web Component for AI agents and other interactive applications.
14
+
15
+ Agent Robot Avatar is built with SVG and vanilla JavaScript. It has no third-party animation framework dependency, works as a native custom element, and exposes a compact API for expressions, interaction states, pointer behavior, waiting feedback, and head-shape customization.
16
+
17
+ **Current public version: v0.2.0**
18
+
19
+ <p align="center">
20
+ <img src="./assets/demo/agent-robot-avatar-demo.gif" alt="Agent Robot Avatar interactive animation demo" width="560">
21
+ </p>
22
+
23
+ ## Highlights
24
+
25
+ - Pure SVG + vanilla JavaScript
26
+ - Native Web Component
27
+ - No third-party animation framework
28
+ - Automatic blinking and subtle idle gaze
29
+ - Pointer-following eyes and inertial head movement
30
+ - Jelly-style local drag deformation with elastic recovery
31
+ - Programmatically controlled Agent states and expressions
32
+ - Distinct waiting, failure, warning, review, blocked-content, and system-error semantics
33
+ - Adjustable head roundness
34
+ - Floating antenna with optional status flashing
35
+ - Demo UI kept separate from the reusable component
36
+
37
+ ## Quick start
38
+
39
+ When using the repository source directly, keep `agent-robot-avatar.js` together with the `src/` directory, then load the public entry:
40
+
41
+ ```html
42
+ <script type="module" src="./agent-robot-avatar.js"></script>
43
+ ```
44
+
45
+ Add the custom element:
46
+
47
+ ```html
48
+ <agent-robot-avatar id="avatar"></agent-robot-avatar>
49
+ ```
50
+
51
+ The avatar enters its default idle behavior automatically. No initialization code is required.
52
+
53
+ A minimal runnable example is available at [`examples/basic.html`](./examples/basic.html).
54
+
55
+ Bundler-based projects can install and use the component from npm with:
56
+
57
+ ```bash
58
+ npm install agent-robot-avatar
59
+ ```
60
+
61
+ ```js
62
+ import 'agent-robot-avatar';
63
+ ```
64
+
65
+ The package includes TypeScript declarations for actions, events, and public methods. No TypeScript setup is required beyond normal package installation.
66
+
67
+ ## Basic API
68
+
69
+ Trigger an expression or state with `play()`:
70
+
71
+ ```js
72
+ const avatar = document.querySelector('#avatar');
73
+
74
+ avatar.play('success');
75
+ avatar.play('failure');
76
+ avatar.play('warning');
77
+ avatar.play('inspect');
78
+ avatar.play('angry');
79
+ avatar.play('error');
80
+ ```
81
+
82
+ Return to the default idle state:
83
+
84
+ ```js
85
+ avatar.reset();
86
+ ```
87
+
88
+ ## Actions and states
89
+
90
+ | State | API name | Intended use |
91
+ | --- | --- | --- |
92
+ | Idle | `idle` | Default idle state |
93
+ | Bored | `bored` | Long idle periods or no active task |
94
+ | Waiting | `waiting` | A request has been sent and a result is still pending |
95
+ | Input | `input` | The user is typing |
96
+ | Send | `send` | Content was sent / nod feedback |
97
+ | Success | `success` | A task completed successfully |
98
+ | Failure | `failure` | A task completed unsuccessfully |
99
+ | Warning | `warning` | A risky or destructive action needs confirmation |
100
+ | Inspect | `inspect` | Reviewing, checking, or verifying a result |
101
+ | Blocked | `angry` | A request is blocked, disallowed, or cannot proceed |
102
+ | System error | `error` | Connection, service, or system failure |
103
+ | Surprise | `surprise` | An unexpected event or result |
104
+ | Sleep | `sleep` | Enter the sleep state |
105
+ | Wake | `wake` | Wake from sleep |
106
+
107
+ The state names intentionally distinguish task results from system conditions. For example, `failure` means the requested task finished unsuccessfully, while `error` is reserved for connection, service, or system failures. `waiting` represents an active pending request; `bored` represents inactivity.
108
+
109
+ Semantic aliases are also available:
110
+
111
+ ```js
112
+ avatar.play('failed'); // same as failure
113
+ avatar.play('fail'); // same as failure
114
+ avatar.play('verify'); // same as inspect
115
+ avatar.play('review'); // same as inspect
116
+ avatar.play('blocked'); // same as angry
117
+ avatar.play('policy-blocked'); // same as angry
118
+ avatar.play('system-error'); // same as error
119
+ avatar.play('connection-error'); // same as error
120
+ ```
121
+
122
+ ## Continuous waiting
123
+
124
+ For real Agent workflows, use the dedicated waiting lifecycle when a request is in progress:
125
+
126
+ ```js
127
+ avatar.startWaiting();
128
+
129
+ // Stop when a response or result arrives.
130
+ avatar.stopWaiting();
131
+ ```
132
+
133
+ Calling another action also interrupts the active waiting state.
134
+
135
+ ## Pointer following
136
+
137
+ Pointer following is enabled by default and can be controlled programmatically:
138
+
139
+ ```js
140
+ avatar.setPointerFollow(false);
141
+ avatar.setPointerFollow(true);
142
+ ```
143
+
144
+ ## Antenna flashing
145
+
146
+ Antenna status flashing is disabled by default and can be enabled per avatar:
147
+
148
+ ```js
149
+ avatar.setAntennaFlash(true);
150
+ avatar.setAntennaFlash(false);
151
+ ```
152
+
153
+ ## Head roundness
154
+
155
+ The head shape can be adjusted from a squarer form to a rounder form without changing the eye clipping or drag-deformation system:
156
+
157
+ ```js
158
+ avatar.setHeadRoundness(0); // squarer
159
+ avatar.setHeadRoundness(50); // default
160
+ avatar.setHeadRoundness(100); // rounder
161
+
162
+ console.log(avatar.getHeadRoundness());
163
+ ```
164
+
165
+ Values are clamped to the `0–100` range. The interactive Demo uses three presets by default and can unlock continuous adjustment.
166
+
167
+ The component emits `head-roundness-change` when the value changes:
168
+
169
+ ```js
170
+ avatar.addEventListener('head-roundness-change', (event) => {
171
+ console.log(event.detail.value);
172
+ });
173
+ ```
174
+
175
+ ## State event
176
+
177
+ The component emits a `face-state` event whenever its visual state changes:
178
+
179
+ ```js
180
+ avatar.addEventListener('face-state', (event) => {
181
+ console.log(event.detail.state);
182
+ });
183
+ ```
184
+
185
+ Host applications can use this event to synchronize interface state, logs, Agent workflows, or accessibility feedback.
186
+
187
+ ## Attributes
188
+
189
+ ```html
190
+ <agent-robot-avatar
191
+ size="160"
192
+ color="#08090b"
193
+ auto-sleep="30000">
194
+ </agent-robot-avatar>
195
+ ```
196
+
197
+ | Attribute | Description |
198
+ | --- | --- |
199
+ | `size` | Component size in pixels |
200
+ | `color` | Main avatar color |
201
+ | `auto-sleep` | Idle time before automatic sleep, in milliseconds; `0` disables automatic sleep |
202
+
203
+ All attributes are optional.
204
+
205
+ ## Default behavior
206
+
207
+ Without explicit API calls, the avatar already provides subtle ambient behavior:
208
+
209
+ - Random blinking
210
+ - Subtle gaze wandering
211
+ - Pointer following when the cursor is nearby
212
+ - Light inertial head movement
213
+ - Natural return to idle
214
+ - Optional automatic sleep
215
+
216
+ ## Drag interaction
217
+
218
+ The avatar supports direct pointer dragging. The head deforms locally around the interaction point instead of moving as a rigid object.
219
+
220
+ - Strong outward pull: triggers `angry` after recovery
221
+ - Strong inward push toward the center: triggers `success` after recovery
222
+ - Small drag: deformation only, with no expression trigger
223
+
224
+ When released, the shape returns with an elastic rebound.
225
+
226
+ ## Interactive Demo
227
+
228
+ `demo/index.html` contains the full interactive Demo, including:
229
+
230
+ - All public expression states
231
+ - Pointer following
232
+ - Jelly drag deformation
233
+ - Waiting lifecycle
234
+ - Head-roundness presets and continuous adjustment
235
+ - Color and behavior controls
236
+ - Simulated Agent conversation states
237
+
238
+ The interactive Demo and Demo-only JavaScript are isolated in `demo/` and are not included in the reusable package runtime.
239
+
240
+ ## Project structure
241
+
242
+ ```text
243
+ agent-robot-avatar.js Public component entry
244
+ src/ Reusable component runtime and expression modules
245
+ demo/ Interactive Demo and Demo-only helpers
246
+ examples/ Minimal integration examples
247
+ assets/support/ Support / payment QR assets
248
+ docs/ Localized documentation
249
+ README.md English main documentation
250
+ CHANGELOG.md Public release history
251
+ CONTRIBUTING.md Contribution guide
252
+ package.json Package metadata
253
+ LICENSE MIT License
254
+ ```
255
+
256
+ ## Distribution
257
+
258
+ The package is published on npm as `agent-robot-avatar`. It includes the public entry, TypeScript declarations, runtime modules, documentation, and support assets.
259
+
260
+ The npm package intentionally includes only the public entry, TypeScript declarations, `src/` runtime, documentation, and support assets; Demo-only files are excluded.
261
+
262
+ ## Compatibility
263
+
264
+ Agent Robot Avatar is designed for modern browsers with support for ES modules, Custom Elements, SVG, Pointer Events, and the Web Animations API.
265
+
266
+ ## Contributing
267
+
268
+ Issues and pull requests are welcome. See [`CONTRIBUTING.md`](./CONTRIBUTING.md) before submitting changes.
269
+
270
+ ## Project status
271
+
272
+ v0.1.0 is the first public release line. The public API is intentionally small so it can evolve carefully before a future `1.0.0` stability commitment.
273
+
274
+ Agent Robot Avatar is independently developed and is not affiliated with, endorsed by, or representative of any AI platform or brand.
275
+
276
+ ## License
277
+
278
+ MIT License. See [`LICENSE`](./LICENSE).
279
+
280
+ ## Buy me a coffee
281
+
282
+ If this project is useful to you, you can buy me a coffee. Use whichever option is most convenient:
283
+
284
+ | Ko-fi | Alipay | WeChat Pay |
285
+ | --- | --- | --- |
286
+ | <a href='https://ko-fi.com/P0E625WIOI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> | <img src="./assets/support/alipay.png" alt="Alipay QR code" width="160"> | <img src="./assets/support/wechat-pay.png" alt="WeChat Pay QR code" width="160"> |
@@ -0,0 +1,16 @@
1
+ import AgentRobotAvatar from './src/agent-robot-avatar-extension-host.js';
2
+ import './src/agent-robot-avatar-actions.js';
3
+ import './src/agent-robot-avatar-antenna.js';
4
+ import './src/agent-robot-avatar-waiting.js';
5
+ import './src/agent-robot-avatar-antenna-flash.js';
6
+ import './src/agent-robot-avatar-inspect.js';
7
+ import './src/agent-robot-avatar-failure.js';
8
+ import './src/agent-robot-avatar-head-roundness.js';
9
+ import { VERSION } from './src/agent-robot-avatar-version.js';
10
+
11
+ if (typeof window !== 'undefined') {
12
+ window.AgentRobotAvatarVersion = VERSION;
13
+ }
14
+
15
+ export { AgentRobotAvatar, VERSION };
16
+ export default AgentRobotAvatar;
Binary file
Binary file
@@ -0,0 +1,152 @@
1
+ # Agent Robot Avatar
2
+
3
+ <p align="center">
4
+ <img src="../assets/readme/agent-robot-avatar-header.jpg" alt="Agent Robot Avatar">
5
+ </p>
6
+
7
+ [English](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/README.md) | [简体中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-CN.md) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.md) | [日本語](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ja.md) | [한국어](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ko.md) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.md) | [Português](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.pt.md) | [Deutsch](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.de.md) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.md)
8
+
9
+ ![Entwicklungsversion](https://img.shields.io/badge/version-v0.2.0-111111?style=flat-square) [![License](https://img.shields.io/badge/license-MIT-0A7EA4?style=flat-square)](../LICENSE) [![CI](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml/badge.svg?branch=main)](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [![Ko-fi](https://img.shields.io/badge/Ko--fi-Support-FF5E5B?style=flat-square&logo=ko-fi&logoColor=white)](https://ko-fi.com/P0E625WIOI)
10
+
11
+ Eine leichte, ausdrucksstarke Roboter-Avatar-Web-Component für KI-Agenten und andere interaktive Anwendungen.
12
+
13
+ Agent Robot Avatar basiert auf SVG und Vanilla JavaScript und benötigt kein externes Animationsframework. Die Komponente funktioniert als natives Custom Element und stellt eine kompakte API für Ausdrücke, Interaktionszustände, Pointer-Following, Wartefeedback und Kopfform bereit.
14
+
15
+ **Aktuelle öffentliche Version: v0.2.0**
16
+
17
+ <p align="center">
18
+ <img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Interaktive animierte Demo von Agent Robot Avatar" width="560">
19
+ </p>
20
+
21
+ ## Highlights
22
+
23
+ - SVG + Vanilla JavaScript
24
+ - Native Web Component
25
+ - Keine externe Animations-Framework-Abhängigkeit
26
+ - Automatisches Blinzeln und subtile Blickbewegung
27
+ - Pointer-Following und träge Kopfbewegung
28
+ - Lokale Jelly-Drag-Verformung mit elastischer Rückkehr
29
+ - Programmatisch steuerbare Agent-Zustände und Ausdrücke
30
+ - Getrennte Semantik für waiting, failure, warning, inspect, blocked und system error
31
+ - Einstellbare Kopfrundung
32
+ - Schwebende Antenne mit optionalem Statusblinken
33
+ - Demo klar vom wiederverwendbaren Component-Runtime getrennt
34
+
35
+ ## Schnellstart
36
+
37
+ ```html
38
+ <script type="module" src="./agent-robot-avatar.js"></script>
39
+ <agent-robot-avatar id="avatar"></agent-robot-avatar>
40
+ ```
41
+
42
+ Ein minimales Beispiel befindet sich unter [`examples/basic.html`](../examples/basic.html).
43
+
44
+ ## Basis-API
45
+
46
+ ```js
47
+ const avatar = document.querySelector('#avatar');
48
+ avatar.play('success');
49
+ avatar.play('failure');
50
+ avatar.play('warning');
51
+ avatar.play('inspect');
52
+ avatar.play('angry');
53
+ avatar.play('error');
54
+ avatar.reset();
55
+ ```
56
+
57
+ ## Zustände und Ausdrücke
58
+
59
+ | Zustand | API | Typische Verwendung |
60
+ | --- | --- | --- |
61
+ | Idle | `idle` | Normaler Bereitschaftszustand |
62
+ | Bored | `bored` | Längere Zeit ohne aktive Aufgabe |
63
+ | Waiting | `waiting` | Anfrage gesendet, Ergebnis steht noch aus |
64
+ | Input | `input` | Benutzer tippt |
65
+ | Send | `send` | Senden / Nicken als Feedback |
66
+ | Success | `success` | Aufgabe erfolgreich abgeschlossen |
67
+ | Failure | `failure` | Aufgabe wurde erfolglos abgeschlossen |
68
+ | Warning | `warning` | Eine wichtige Aktion benötigt Bestätigung |
69
+ | Inspect | `inspect` | Ergebnis prüfen oder verifizieren |
70
+ | Blocked | `angry` | Anfrage blockiert oder kann nicht fortgesetzt werden |
71
+ | System error | `error` | Verbindungs-, Dienst- oder Systemfehler |
72
+ | Surprise | `surprise` | Unerwartetes Ereignis oder Ergebnis |
73
+ | Sleep | `sleep` | Schlafzustand aktivieren |
74
+ | Wake | `wake` | Aus dem Schlafzustand zurückkehren |
75
+
76
+ `failure` beschreibt einen Fehlschlag der Aufgabe selbst; `error` ist für Verbindungs-, Dienst- oder Systemprobleme reserviert. `waiting` bezeichnet eine laufende Anfrage, `bored` dagegen Inaktivität.
77
+
78
+ ```js
79
+ avatar.startWaiting();
80
+ avatar.stopWaiting();
81
+ avatar.setPointerFollow(false);
82
+ avatar.setPointerFollow(true);
83
+ avatar.setHeadRoundness(0);
84
+ avatar.setHeadRoundness(50);
85
+ avatar.setHeadRoundness(100);
86
+ ```
87
+
88
+ `setHeadRoundness()` akzeptiert Werte von `0–100`. Änderungen lösen `head-roundness-change` aus. Visuelle Zustandsänderungen lösen `face-state` aus.
89
+
90
+ ## Attribute
91
+
92
+ ```html
93
+ <agent-robot-avatar size="160" color="#08090b" auto-sleep="30000"></agent-robot-avatar>
94
+ ```
95
+
96
+ | Attribut | Beschreibung |
97
+ | --- | --- |
98
+ | `size` | Component-Größe in Pixeln |
99
+ | `color` | Hauptfarbe des Avatars |
100
+ | `auto-sleep` | Inaktivitätszeit bis zum automatischen Schlaf in ms; `0` deaktiviert |
101
+
102
+ ## Standardverhalten und Drag
103
+
104
+ Ohne explizite API-Aufrufe bietet der Avatar zufälliges Blinzeln, subtile Blickbewegungen, Pointer-Following, leichte Trägheit und optionalen Auto-Sleep. Beim Ziehen verformt sich der Kopf lokal um den Interaktionspunkt und kehrt elastisch zurück.
105
+
106
+ - Stark nach außen ziehen: nach der Rückkehr `angry`
107
+ - Stark zur Mitte drücken: nach der Rückkehr `success`
108
+ - Kleine Bewegung: nur Verformung
109
+
110
+ ## Interaktive Demo
111
+
112
+ `demo/index.html` enthält alle öffentlichen Zustände, Pointer-Following, Jelly-Drag, den waiting-Lebenszyklus, Kopfrundung, Farb- und Verhaltenssteuerung sowie eine simulierte Agent-Unterhaltung. Demo-spezifisches JavaScript liegt unter `demo/` und ist nicht Teil des wiederverwendbaren npm-Runtimes.
113
+
114
+ ## Projektstruktur
115
+
116
+ ```text
117
+ agent-robot-avatar.js Öffentlicher Component-Einstieg
118
+ src/ Wiederverwendbarer Runtime und Ausdrucksmodule
119
+ demo/ Interaktive Demo und Demo-spezifische Skripte
120
+ examples/ Minimale Integrationsbeispiele
121
+ assets/support/ Support-/Zahlungs-QR-Ressourcen
122
+ docs/ Mehrsprachige Dokumentation
123
+ README.md Englische Hauptdokumentation
124
+ CHANGELOG.md Öffentliche Versionshistorie
125
+ CONTRIBUTING.md Beitragsleitfaden
126
+ package.json Paket-Metadaten
127
+ LICENSE MIT License
128
+ ```
129
+
130
+ ## Distribution und Kompatibilität
131
+
132
+ Das Paket ist als `agent-robot-avatar` auf npm veröffentlicht und enthält TypeScript-Deklarationen für Aktionen, Ereignisse und öffentliche Methoden. Unterstützt werden moderne Browser mit ES Modules, Custom Elements, SVG, Pointer Events und Web Animations API.
133
+
134
+ ## Beitragen
135
+
136
+ Issues und Pull Requests sind willkommen. Bitte vor Änderungen [`CONTRIBUTING.md`](../CONTRIBUTING.md) lesen.
137
+
138
+ ## Projektstatus
139
+
140
+ v0.1.0 ist die erste öffentliche Release-Linie. Die öffentliche API bleibt bewusst klein, damit sie vor einer späteren Stabilitätszusage mit `1.0.0` sorgfältig weiterentwickelt werden kann.
141
+
142
+ Agent Robot Avatar ist ein unabhängig entwickeltes Open-Source-Projekt und steht in keiner offiziellen Verbindung zu einer KI-Plattform oder Marke.
143
+
144
+ ## Lizenz
145
+
146
+ MIT License. Siehe [`LICENSE`](../LICENSE).
147
+
148
+ ## Unterstütze mich mit einem Kaffee
149
+
150
+ | Ko-fi | Alipay | WeChat Pay |
151
+ | --- | --- | --- |
152
+ | <a href='https://ko-fi.com/P0E625WIOI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> | <img src="../assets/support/alipay.png" alt="Alipay QR-Code" width="160"> | <img src="../assets/support/wechat-pay.png" alt="WeChat Pay QR-Code" width="160"> |