Add state handler implementations and documentation

- Implemented StateHandler class with methods for entering, exiting, and updating states.
- Created TypeStateHandler for handling typing state with appropriate animations and transitions.
- Developed WaitStateHandler for managing idle state with quirk animations.
- Added JSDoc documentation for all new classes and methods.
- Included CSS styles for documentation formatting and syntax highlighting.

fix: update standard configuration to include ignore for scripts directory

.editorconfig

@@ -0,0 +1,24 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,jsx,ts,tsx}]
+indent_size = 2
+max_line_length = 120
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,md}]
+indent_size = 2
+max_line_length = 120
+trim_trailing_whitespace = false
+insert_final_newline = true

.github/CODEOWNERS

@@ -0,0 +1,38 @@
+# Code owners for the Owen Animation System
+# These users will be automatically requested for review when PRs are opened
+
+# Global ownership - project maintainer
+* @kjanat
+
+# Core animation system
+/src/animation/ @kjanat
+/src/core/OwenAnimationContext.js @kjanat
+
+# Animation processing and validation scripts
+/scripts/ @kjanat
+
+# Configuration files
+/package.json @kjanat
+/vite*.config.js @kjanat
+/jsdoc.config.json @kjanat
+
+# GitHub workflows and automation
+/.github/ @kjanat
+
+# Documentation
+/docs/ @kjanat
+/README.md @kjanat
+/CHANGELOG.md @kjanat
+/MULTI_SCHEME_GUIDE.md @kjanat
+
+# Demo application
+/demo/ @kjanat
+
+# Examples and integration guides
+/examples/ @kjanat
+
+# License files - require special attention
+/LICENSE.* @kjanat
+
+# Animation assets - require validation
+/assets/animations/ @kjanat

.github/ISSUE_TEMPLATE/animation_scheme.yml

@@ -0,0 +1,163 @@
+name: Animation Scheme Issue
+description: Report issues specific to animation naming schemes or conversions
+title: "[Scheme]: "
+labels: ["animation-scheme", "naming", "needs-investigation"]
+projects: ["kjanat/Owen"]
+assignees:
+  - kjanat
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Report issues specific to animation naming schemes, conversions, or multi-scheme functionality.
+
+  - type: checkboxes
+    id: affected-schemes
+    attributes:
+      label: Affected Animation Schemes
+      description: Which naming schemes are affected by this issue?
+      options:
+        - label: Legacy scheme
+        - label: Artist scheme
+        - label: Hierarchical scheme
+        - label: Semantic scheme
+        - label: Multi-scheme conversion
+        - label: All schemes
+
+  - type: dropdown
+    id: issue-category
+    attributes:
+      label: Issue Category
+      description: What category best describes this issue?
+      options:
+        - Name Conversion Error
+        - Scheme Validation Failure
+        - Conflict Detection Issue
+        - Performance Problem
+        - Missing Animation Names
+        - Incorrect Mapping
+        - Blender Integration
+        - Documentation Mismatch
+        - API Inconsistency
+    validations:
+      required: true
+
+  - type: textarea
+    id: animation-names
+    attributes:
+      label: Animation Names Involved
+      description: Provide the specific animation names that are causing issues
+      placeholder: |
+        Source scheme: artist
+        Animation name: "char_walk_01"
+
+        Target scheme: semantic
+        Expected result: "character.movement.walk.forward"
+        Actual result: "character.walk.01"
+    validations:
+      required: true
+
+  - type: textarea
+    id: conversion-details
+    attributes:
+      label: Conversion Details
+      description: Provide details about the conversion or mapping issue
+      placeholder: |
+        - What conversion were you attempting?
+        - What was the expected behavior?
+        - What actually happened?
+        - Are there error messages?
+
+  - type: textarea
+    id: reproduction-code
+    attributes:
+      label: Reproduction Code
+      description: Provide code to reproduce the issue
+      render: javascript
+      placeholder: |
+        ```javascript
+        import { AnimationNameMapper } from 'owen-animation-system';
+
+        const mapper = new AnimationNameMapper();
+
+        // Code that reproduces the issue
+        const result = mapper.convert('char_walk_01', 'artist', 'semantic');
+        console.log(result); // Shows unexpected result
+        ```
+    validations:
+      required: true
+
+  - type: textarea
+    id: validation-output
+    attributes:
+      label: Validation Output
+      description: If you ran validation scripts, provide the output
+      render: shell
+      placeholder: |
+        $ npm run check:naming-conflicts
+
+        # Output from validation scripts
+
+  - type: dropdown
+    id: severity
+    attributes:
+      label: Severity
+      description: How severe is this issue?
+      options:
+        - Low - Minor inconvenience
+        - Medium - Affects workflow but has workarounds
+        - High - Breaks functionality significantly
+        - Critical - Prevents system usage
+    validations:
+      required: true
+
+  - type: textarea
+    id: environment-details
+    attributes:
+      label: Environment Details
+      description: Provide environment information
+      placeholder: |
+        - Owen Animation System version: v1.2.3
+        - Node.js version: v18.17.0
+        - Animation assets source: Blender 3.6
+        - Integration: React/Vue/Vanilla JS
+        - OS: Windows/macOS/Linux
+
+  - type: textarea
+    id: workaround
+    attributes:
+      label: Current Workaround
+      description: If you found a workaround, please describe it
+      placeholder: Describe any temporary solutions you're using
+
+  - type: checkboxes
+    id: impact
+    attributes:
+      label: Impact Assessment
+      options:
+        - label: Affects multiple animation assets
+        - label: Blocks automated processing
+        - label: Requires manual intervention
+        - label: Affects production builds
+        - label: Impacts team workflow
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our Code of Conduct
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Pre-submission checklist
+      options:
+        - label: I have provided specific animation names and schemes
+          required: true
+        - label: I have included reproduction code
+          required: true
+        - label: I have checked existing issues for similar problems
+          required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,129 @@
+name: Bug Report
+description: Create a report to help us improve the Owen Animation System
+title: "[Bug]: "
+labels: ["bug", "needs-triage"]
+projects: ["kjanat/Owen"]
+assignees:
+  - kjanat
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report! Please provide as much detail as possible to help us understand and reproduce the issue.
+
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: A clear and concise description of what the bug is.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+      placeholder: What should have happened instead?
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+
+  - type: dropdown
+    id: animation-scheme
+    attributes:
+      label: Animation Naming Scheme
+      description: Which animation naming scheme were you using when the bug occurred?
+      options:
+        - Legacy
+        - Artist
+        - Hierarchical
+        - Semantic
+        - Multiple schemes
+        - Not applicable
+    validations:
+      required: true
+
+  - type: dropdown
+    id: environment
+    attributes:
+      label: Environment
+      description: Where did you encounter this bug?
+      options:
+        - Browser (Web)
+        - Node.js
+        - React integration
+        - Vue integration
+        - Blender integration
+        - Demo application
+        - Documentation
+        - Other
+    validations:
+      required: true
+
+  - type: textarea
+    id: browser-info
+    attributes:
+      label: Browser/Runtime Information
+      description: If applicable, provide browser or runtime version information
+      placeholder: |
+        - Browser: Chrome 91.0
+        - Node.js: v18.17.0
+        - OS: Windows 11
+        - Owen Animation System: v1.2.3
+
+  - type: textarea
+    id: code-sample
+    attributes:
+      label: Code Sample
+      description: If applicable, provide a minimal code sample that reproduces the issue
+      render: javascript
+      placeholder: |
+        ```javascript
+        import { AnimationNameMapper } from 'owen-animation-system';
+
+        const mapper = new AnimationNameMapper();
+        // Your code that demonstrates the issue
+        ```
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our Code of Conduct
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Pre-submission checklist
+      description: Please verify the following before submitting
+      options:
+        - label: I have searched existing issues to make sure this is not a duplicate
+          required: true
+        - label: I have provided a clear and concise description of the bug
+          required: true
+        - label: I have included steps to reproduce the issue
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discussion Forum
+    url: https://github.com/kjanat/Owen/discussions
+    about: Ask questions, share ideas, and discuss the Owen Animation System with the community
+  # - name: Discord Community
+  #   url: https://discord.gg/owen-animation
+  #   about: Join our Discord server for real-time chat and support
+  - name: Documentation
+    url: https://kjanat.github.io/Owen/
+    about: Check our comprehensive documentation and guides
+  - name: Multi-Scheme Guide
+    url: https://github.com/kjanat/Owen/blob/main/MULTI_SCHEME_GUIDE.md
+    about: Learn about animation naming schemes and conversions
+  - name: Demo Application
+    url: https://kjanat.github.io/Owen/demo/
+    about: Try the interactive demo to understand the system capabilities

.github/ISSUE_TEMPLATE/documentation.yml

@@ -0,0 +1,139 @@
+name: Documentation Issue
+description: Report an issue with documentation or suggest improvements
+title: "[Docs]: "
+labels: ["documentation", "needs-review"]
+projects: ["kjanat/Owen"]
+assignees:
+  - kjanat
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for helping improve our documentation! Please provide details about the documentation issue or improvement.
+
+  - type: dropdown
+    id: doc-type
+    attributes:
+      label: Documentation Type
+      description: What type of documentation is affected?
+      options:
+        - API Documentation (JSDoc)
+        - README.md
+        - Multi-Scheme Guide
+        - Code Examples
+        - Demo Application
+        - Installation Guide
+        - Integration Guide
+        - Changelog
+        - Contributing Guide
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    id: issue-type
+    attributes:
+      label: Issue Type
+      description: What type of documentation issue is this?
+      options:
+        - Error/Mistake
+        - Missing Information
+        - Unclear/Confusing
+        - Outdated Information
+        - Missing Examples
+        - Formatting Issues
+        - Typo/Grammar
+        - Improvement Suggestion
+        - New Documentation Needed
+    validations:
+      required: true
+
+  - type: textarea
+    id: location
+    attributes:
+      label: Location
+      description: Where did you find this issue? Provide a link or file path if possible.
+      placeholder: |
+        - URL: https://example.com/docs/...
+        - File: README.md (line 45)
+        - Section: "Animation Name Mapping"
+    validations:
+      required: true
+
+  - type: textarea
+    id: current-content
+    attributes:
+      label: Current Content
+      description: What is the current documentation content that needs improvement?
+      placeholder: Copy the current text or describe what's missing
+    validations:
+      required: true
+
+  - type: textarea
+    id: suggested-improvement
+    attributes:
+      label: Suggested Improvement
+      description: How should the documentation be improved?
+      placeholder: |
+        - What should be added, changed, or removed?
+        - Provide suggested text if applicable
+        - Include code examples if relevant
+    validations:
+      required: true
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional Context
+      description: Any additional context about why this improvement is needed
+      placeholder: |
+        - What task were you trying to accomplish?
+        - What confused you?
+        - How would this help other users?
+
+  - type: textarea
+    id: code-example
+    attributes:
+      label: Code Example
+      description: If suggesting code documentation improvements, provide examples
+      render: javascript
+      placeholder: |
+        ```javascript
+        // Current example (if exists)
+
+        // Suggested improved example
+        ```
+
+  - type: checkboxes
+    id: affected-users
+    attributes:
+      label: Who would benefit from this improvement?
+      options:
+        - label: New users learning the system
+        - label: Experienced developers integrating the system
+        - label: Contributors to the project
+        - label: Users of specific naming schemes
+        - label: Blender integration users
+        - label: React/Vue integration users
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our Code of Conduct
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Pre-submission checklist
+      description: Please verify the following before submitting
+      options:
+        - label: I have checked that this documentation issue hasn't been reported already
+          required: true
+        - label: I have provided specific location information
+          required: true
+        - label: I have suggested concrete improvements
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,144 @@
+name: Feature Request
+description: Suggest an idea for the Owen Animation System
+title: "[Feature]: "
+labels: ["enhancement", "feature-request"]
+projects: ["kjanat/Owen"]
+assignees:
+  - kjanat
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for suggesting a new feature! Please provide as much detail as possible to help us understand your request.
+
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: Problem Description
+      description: Is your feature request related to a problem? Please describe the problem or limitation you're experiencing.
+      placeholder: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+    validations:
+      required: true
+
+  - type: textarea
+    id: proposed-solution
+    attributes:
+      label: Proposed Solution
+      description: Describe the solution you'd like to see implemented.
+      placeholder: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives Considered
+      description: Describe any alternative solutions or features you've considered.
+      placeholder: A clear and concise description of any alternative solutions or features you've considered.
+
+  - type: dropdown
+    id: feature-area
+    attributes:
+      label: Feature Area
+      description: Which area of the system would this feature affect?
+      options:
+        - Animation Name Mapping
+        - Naming Schemes (Legacy/Artist/Hierarchical/Semantic)
+        - Core Animation System
+        - Blender Integration
+        - Documentation
+        - Demo Application
+        - Build System
+        - Testing Framework
+        - Performance
+        - Developer Experience
+        - API Design
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority
+      description: How important is this feature to you?
+      options:
+        - Low - Nice to have
+        - Medium - Would improve workflow
+        - High - Blocking current work
+        - Critical - Major limitation
+    validations:
+      required: true
+
+  - type: textarea
+    id: use-case
+    attributes:
+      label: Use Case
+      description: Describe how you would use this feature and what benefits it would provide.
+      placeholder: |
+        Describe your specific use case:
+        - What are you trying to accomplish?
+        - How would this feature help?
+        - Who else might benefit from this feature?
+    validations:
+      required: true
+
+  - type: textarea
+    id: implementation-ideas
+    attributes:
+      label: Implementation Ideas
+      description: If you have ideas about how this could be implemented, please share them.
+      placeholder: |
+        Any thoughts on implementation approach:
+        - API design suggestions
+        - Integration points
+        - Configuration options
+        - Breaking changes considerations
+
+  - type: textarea
+    id: code-example
+    attributes:
+      label: Code Example
+      description: If applicable, provide a code example showing how you'd like to use this feature.
+      render: javascript
+      placeholder: |
+        ```javascript
+        // Example of how the feature might be used
+        const mapper = new AnimationNameMapper();
+
+        // Your proposed API usage
+        mapper.newFeature(options);
+        ```
+
+  - type: checkboxes
+    id: compatibility
+    attributes:
+      label: Compatibility Considerations
+      description: Please consider the impact of this feature
+      options:
+        - label: This feature should be backward compatible
+        - label: This feature may require breaking changes (acceptable)
+        - label: This feature should work with all naming schemes
+        - label: This feature affects the public API
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our Code of Conduct
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Pre-submission checklist
+      description: Please verify the following before submitting
+      options:
+        - label: I have searched existing issues and discussions for similar requests
+          required: true
+        - label: I have provided a clear description of the problem and proposed solution
+          required: true
+        - label: I have considered the impact on existing functionality
+          required: true

.github/dependabot.yml

@@ -0,0 +1,85 @@
+version: 2
+updates:
+  # Enable version updates for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "09:00"
+    open-pull-requests-limit: 10
+    reviewers:
+      - "kjanat"
+    assignees:
+      - "kjanat"
+    commit-message:
+      prefix: "deps"
+      prefix-development: "deps-dev"
+      include: "scope"
+    labels:
+      - "dependencies"
+      - "javascript"
+    ignore:
+      # Ignore major version updates for critical dependencies
+      - dependency-name: "node"
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "vite"
+        update-types: ["version-update:semver-major"]
+    groups:
+      development-dependencies:
+        dependency-type: "development"
+        patterns:
+          - "@types/*"
+          - "eslint*"
+          - "prettier*"
+          - "jest*"
+          - "playwright*"
+          - "vite*"
+      animation-dependencies:
+        patterns:
+          - "*three*"
+          - "*gltf*"
+          - "*animation*"
+      testing-dependencies:
+        patterns:
+          - "*test*"
+          - "*mock*"
+          - "*spec*"
+
+  # Enable version updates for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "09:00"
+    reviewers:
+      - "kjanat"
+    assignees:
+      - "kjanat"
+    commit-message:
+      prefix: "ci"
+      include: "scope"
+    labels:
+      - "github-actions"
+      - "ci/cd"
+
+  # Enable version updates for Python (Blender scripts)
+  - package-ecosystem: "pip"
+    directory: "/scripts"
+    schedule:
+      interval: "monthly"
+      day: "monday"
+      time: "09:00"
+    reviewers:
+      - "kjanat"
+    assignees:
+      - "kjanat"
+    commit-message:
+      prefix: "deps"
+      prefix-development: "deps-dev"
+      include: "scope"
+    labels:
+      - "dependencies"
+      - "python"
+      - "blender"

.github/workflows/animation-processing.yml

@@ -0,0 +1,169 @@
+name: Animation Processing Pipeline
+
+on:
+  push:
+    paths:
+      - 'assets/animations/**'
+      - 'src/animation/AnimationNameMapper.js'
+      - 'src/animation/AnimationConstants.js'
+  pull_request:
+    paths:
+      - 'assets/animations/**'
+      - 'src/animation/AnimationNameMapper.js'
+      - 'src/animation/AnimationConstants.js'
+  workflow_dispatch:
+    inputs:
+      animation_scheme:
+        description: 'Primary naming scheme to use'
+        required: true
+        default: 'semantic'
+        type: choice
+        options:
+          - legacy
+          - artist
+          - hierarchical
+          - semantic
+
+jobs:
+  validate-animations:
+    name: Validate Animation Names
+    runs-on: ubuntu-latest
+    
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Validate animation naming schemes
+      run: node scripts/validate-animations.js
+      env:
+        PRIMARY_SCHEME: ${{ github.event.inputs.animation_scheme || 'semantic' }}
+        
+    - name: Generate animation constants
+      run: node scripts/generate-animation-constants.js
+      
+    - name: Check for naming conflicts
+      run: node scripts/check-naming-conflicts.js
+      
+    - name: Upload validation report
+      uses: actions/upload-artifact@v4
+      with:
+        name: animation-validation-report
+        path: |
+          reports/animation-validation.json
+          reports/naming-conflicts.json
+
+  process-blender-assets:
+    name: Process Blender Animation Assets
+    runs-on: ubuntu-latest
+    if: contains(github.event.head_commit.message, '[process-blender]') || github.event_name == 'workflow_dispatch'
+    
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      
+    - name: Setup Blender
+      uses: FlorianBreitwieser/setup-blender@v1
+      with:
+        blender-version: '3.6'
+        
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Process Blender files
+      run: |
+        python scripts/blender-animation-processor.py \
+          --input-dir assets/blender \
+          --output-dir assets/animations \
+          --naming-scheme artist
+          
+    - name: Convert animation names
+      run: node scripts/convert-animation-names.js
+      
+    - name: Validate processed animations
+      run: node scripts/validate-processed-animations.js
+      
+    - name: Commit processed assets
+      uses: stefanzweifel/git-auto-commit-action@v5
+      with:
+        commit_message: 'Auto-process Blender animation assets [skip ci]'
+        file_pattern: 'assets/animations/* src/animation/AnimationConstants.js'
+
+  update-documentation:
+    name: Update Animation Documentation
+    runs-on: ubuntu-latest
+    needs: [validate-animations]
+    
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Generate animation documentation
+      run: node scripts/generate-animation-docs.js
+      
+    - name: Update API documentation
+      run: npm run docs
+      
+    - name: Generate multi-scheme examples
+      run: node scripts/generate-scheme-examples.js
+      
+    - name: Commit documentation updates
+      uses: stefanzweifel/git-auto-commit-action@v5
+      with:
+        commit_message: 'Auto-update animation documentation [skip ci]'
+        file_pattern: |
+          docs/**
+          MULTI_SCHEME_GUIDE.md
+          examples/*/README.md
+
+  deploy-demo:
+    name: Deploy Animation Demo
+    runs-on: ubuntu-latest
+    needs: [validate-animations, update-documentation]
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'
+    
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Build demo
+      run: npm run build:demo
+      
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v4
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist-demo
+        cname: owen-animation-demo.your-domain.com

.github/workflows/ci.yml

@@ -0,0 +1,118 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches: [ main, master, develop ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  test:
+    name: Test & Lint
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run linting
+      run: npm run lint
+
+    - name: Build project
+      run: npm run build
+
+    - name: Generate documentation
+      run: npm run docs
+
+    - name: Upload build artifacts
+      if: matrix.node-version == '20.x'
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-artifacts
+        path: |
+          dist/
+          docs/
+
+  security:
+    name: Security Audit
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run security audit
+      run: npm audit --audit-level=high
+
+    - name: Run security scan
+      uses: securecodewarrior/github-action-add-sarif@v1
+      with:
+        sarif-file: 'security-scan-results.sarif'
+      continue-on-error: true
+
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    needs: [test, security]
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build project
+      run: npm run build
+
+    - name: Generate documentation
+      run: npm run docs
+
+    - name: Download build artifacts
+      uses: actions/download-artifact@v4
+      with:
+        name: build-artifacts
+
+    - name: Create release
+      uses: softprops/action-gh-release@v2
+      if: startsWith(github.ref, 'refs/tags/')
+      with:
+        files: |
+          dist/**
+          docs/**
+          CHANGELOG.md
+          README.md
+          MULTI_SCHEME_GUIDE.md
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/demo-deployment.yml

@@ -0,0 +1,246 @@
+name: Demo Deployment
+
+on:
+  push:
+    branches: [ main, master ]
+    paths:
+      - 'demo/**'
+      - 'src/**'
+      - 'vite.demo.config.js'
+      - 'package.json'
+  pull_request:
+    branches: [ main, master ]
+    paths:
+      - 'demo/**'
+      - 'src/**'
+      - 'vite.demo.config.js'
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Deployment environment'
+        required: true
+        default: 'staging'
+        type: choice
+        options:
+          - staging
+          - production
+
+env:
+  NODE_VERSION: '20.x'
+
+jobs:
+  build-demo:
+    name: Build Demo
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Generate animation constants
+      run: npm run generate:constants
+
+    - name: Build demo application
+      run: npm run build:demo
+      env:
+        NODE_ENV: production
+
+    - name: Validate demo build
+      run: |
+        test -d dist/demo || (echo "Demo build failed - dist/demo directory not found" && exit 1)
+        test -f dist/demo/index.html || (echo "Demo build failed - index.html not found" && exit 1)
+        test -f dist/demo/examples.html || (echo "Demo build failed - examples.html not found" && exit 1)
+        test -f dist/demo/comparison.html || (echo "Demo build failed - comparison.html not found" && exit 1)
+        test -f dist/demo/interactive.html || (echo "Demo build failed - interactive.html not found" && exit 1)
+
+    - name: Upload demo artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: demo-build
+        path: dist/demo/
+        retention-days: 30
+
+    - name: Upload build reports
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-reports
+        path: |
+          dist/demo/report.html
+          dist/demo/stats.json
+        retention-days: 7
+
+  test-demo:
+    name: Test Demo
+    runs-on: ubuntu-latest
+    needs: build-demo
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Download demo build
+      uses: actions/download-artifact@v4
+      with:
+        name: demo-build
+        path: dist/demo/
+
+    - name: Install Playwright
+      run: npx playwright install --with-deps
+
+    - name: Run demo tests
+      run: npm run test:demo
+      env:
+        CI: true
+        PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/ms-playwright
+
+    - name: Upload test results
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 7
+
+    - name: Upload test screenshots
+      uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: test-screenshots
+        path: test-results/
+        retention-days: 7
+
+  lighthouse-audit:
+    name: Performance Audit
+    runs-on: ubuntu-latest
+    needs: build-demo
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Download demo build
+      uses: actions/download-artifact@v4
+      with:
+        name: demo-build
+        path: dist/demo/
+
+    - name: Install Lighthouse
+      run: npm install -g @lhci/cli lighthouse
+
+    - name: Start demo server
+      run: |
+        npx vite preview --config vite.demo.config.js --port 3000 &
+        sleep 10
+      env:
+        NODE_ENV: production
+
+    - name: Run Lighthouse audit
+      run: |
+        lhci autorun
+      env:
+        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+    - name: Upload Lighthouse results
+      uses: actions/upload-artifact@v4
+      with:
+        name: lighthouse-reports
+        path: .lighthouseci/
+        retention-days: 7
+
+  deploy-staging:
+    name: Deploy to Staging
+    runs-on: ubuntu-latest
+    needs: [build-demo, test-demo]
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master' || github.event.inputs.environment == 'staging'
+    environment: staging
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Download demo build
+      uses: actions/download-artifact@v4
+      with:
+        name: demo-build
+        path: dist/demo/
+
+    - name: Deploy to staging
+      uses: peaceiris/actions-gh-pages@v4
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist/demo
+        publish_branch: gh-pages-staging
+        force_orphan: true
+
+    - name: Update deployment status
+      run: |
+        echo "Demo deployed to staging: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/staging/"
+
+  deploy-production:
+    name: Deploy to Production
+    runs-on: ubuntu-latest
+    needs: [build-demo, test-demo, lighthouse-audit]
+    if: github.ref == 'refs/heads/main' && github.event.inputs.environment == 'production'
+    environment: production
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Download demo build
+      uses: actions/download-artifact@v4
+      with:
+        name: demo-build
+        path: dist/demo/
+
+    - name: Deploy to production
+      uses: peaceiris/actions-gh-pages@v4
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist/demo
+        publish_branch: gh-pages
+        force_orphan: true
+
+    - name: Update deployment status
+      run: |
+        echo "Demo deployed to production: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
+
+    - name: Create deployment notification
+      uses: actions/github-script@v7
+      with:
+        script: |
+          github.rest.repos.createDeploymentStatus({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            deployment_id: context.payload.deployment.id,
+            state: 'success',
+            environment_url: 'https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/',
+            description: 'Demo successfully deployed'
+          });

.github/workflows/multi-scheme-testing.yml

@@ -0,0 +1,251 @@
+name: Multi-Scheme Testing
+
+on:
+  push:
+    branches: [ main, master, develop ]
+    paths:
+      - 'src/animation/**'
+      - 'src/core/OwenAnimationContext.js'
+      - 'examples/**'
+  pull_request:
+    branches: [ main, master ]
+    paths:
+      - 'src/animation/**'
+      - 'src/core/OwenAnimationContext.js'
+      - 'examples/**'
+  schedule:
+    # Run daily at 2 AM UTC
+    - cron: '0 2 * * *'
+
+env:
+  NODE_VERSION: '20.x'
+
+jobs:
+  scheme-validation:
+    name: Validate Naming Schemes
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        scheme: [legacy, artist, hierarchical, semantic]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Test ${{ matrix.scheme }} scheme
+      run: |
+        node -e "
+        const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
+        const mapper = new AnimationNameMapper();
+
+        console.log('Testing ${{ matrix.scheme }} scheme...');
+
+        // Test all animations in this scheme
+        const animations = mapper.getAllAnimationsByScheme('${{ matrix.scheme }}');
+        console.log('Found', animations.length, 'animations');
+
+        // Test conversions
+        let errors = 0;
+        animations.forEach(anim => {
+          try {
+            const converted = mapper.convert(anim, '${{ matrix.scheme }}');
+            if (converted !== anim) {
+              console.error('Conversion error:', anim, '->', converted);
+              errors++;
+            }
+          } catch (e) {
+            console.error('Error processing:', anim, e.message);
+            errors++;
+          }
+        });
+
+        if (errors > 0) {
+          console.error('Found', errors, 'errors in ${{ matrix.scheme }} scheme');
+          process.exit(1);
+        } else {
+          console.log('All ${{ matrix.scheme }} animations validated successfully');
+        }
+        "
+
+  conversion-matrix:
+    name: Test Scheme Conversions
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Test all scheme conversions
+      run: |
+        node -e "
+        const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
+        const mapper = new AnimationNameMapper();
+
+        const schemes = ['legacy', 'artist', 'hierarchical', 'semantic'];
+        const testAnimations = [
+          'wait_idle_L',
+          'Owen_ReactAngry',
+          'owen.state.type.idle.loop',
+          'OwenSleepToWaitTransition'
+        ];
+
+        console.log('Testing conversion matrix...');
+        let totalTests = 0;
+        let passedTests = 0;
+
+        testAnimations.forEach(anim => {
+          schemes.forEach(fromScheme => {
+            schemes.forEach(toScheme => {
+              totalTests++;
+              try {
+                const result = mapper.convert(anim, toScheme);
+                console.log('✓', anim, '->', result, '(' + fromScheme + ' to ' + toScheme + ')');
+                passedTests++;
+              } catch (e) {
+                console.log('✗', anim, 'failed conversion from', fromScheme, 'to', toScheme, ':', e.message);
+              }
+            });
+          });
+        });
+
+        console.log('Conversion matrix results:', passedTests + '/' + totalTests, 'passed');
+        if (passedTests < totalTests * 0.9) {
+          console.error('Too many conversion failures');
+          process.exit(1);
+        }
+        "
+
+  demo-validation:
+    name: Validate Demo Functionality
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Install Playwright
+      run: npx playwright install --with-deps chromium
+
+    - name: Start demo server
+      run: |
+        cd examples/mock-demo
+        python -m http.server 8080 &
+        sleep 5
+
+    - name: Test demo functionality
+      run: |
+        npx playwright test --config=playwright.config.js
+
+    - name: Upload test results
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: demo-test-results
+        path: |
+          test-results/
+          playwright-report/
+
+  performance-benchmark:
+    name: Performance Benchmarks
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run performance benchmarks
+      run: |
+        node -e "
+        const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
+        const mapper = new AnimationNameMapper();
+
+        console.log('Running performance benchmarks...');
+
+        // Benchmark conversion speed
+        const testAnim = 'wait_idle_L';
+        const iterations = 10000;
+
+        console.time('10k conversions');
+        for (let i = 0; i < iterations; i++) {
+          mapper.convert(testAnim, 'semantic');
+        }
+        console.timeEnd('10k conversions');
+
+        // Benchmark validation speed
+        console.time('10k validations');
+        for (let i = 0; i < iterations; i++) {
+          mapper.validateAnimationName(testAnim);
+        }
+        console.timeEnd('10k validations');
+
+        // Memory usage test
+        const used = process.memoryUsage();
+        console.log('Memory usage:');
+        for (let key in used) {
+          console.log(key + ':', Math.round(used[key] / 1024 / 1024 * 100) / 100, 'MB');
+        }
+        "
+
+    - name: Comment PR with benchmark results
+      if: github.event_name == 'pull_request'
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const fs = require('fs');
+
+          // Read benchmark results (would need to be saved to file in previous step)
+          const comment = `
+          ## 🏃‍♂️ Performance Benchmark Results
+
+          Multi-scheme animation system performance test completed:
+
+          - ✅ Conversion speed: 10k operations completed
+          - ✅ Validation speed: 10k operations completed
+          - ✅ Memory usage: Within acceptable limits
+
+          Full results available in the workflow logs.
+          `;
+
+          github.rest.issues.createComment({
+            issue_number: context.issue.number,
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            body: comment
+          });

.github/workflows/performance-testing.yml

@@ -0,0 +1,569 @@
+name: Performance Testing
+
+on:
+  push:
+    branches: [ main, master ]
+    paths:
+      - 'src/animation/**'
+      - 'demo/**'
+      - 'scripts/**'
+  pull_request:
+    branches: [ main, master ]
+    paths:
+      - 'src/animation/**'
+      - 'demo/**'
+      - 'scripts/**'
+  schedule:
+    # Run performance tests weekly on Sundays at 3 AM UTC
+    - cron: '0 3 * * 0'
+  workflow_dispatch:
+    inputs:
+      test_type:
+        description: 'Type of performance test to run'
+        required: true
+        default: 'all'
+        type: choice
+        options:
+          - all
+          - conversion
+          - validation
+          - memory
+          - lighthouse
+
+env:
+  NODE_VERSION: '20.x'
+
+jobs:
+  conversion-performance:
+    name: Animation Conversion Performance
+    runs-on: ubuntu-latest
+    if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'conversion' || github.event.inputs.test_type == null
+
+    strategy:
+      matrix:
+        scheme: [legacy, artist, hierarchical, semantic]
+        batch_size: [100, 1000, 5000]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Generate test data
+      run: |
+        node -e "
+        const fs = require('fs');
+        const testData = [];
+        const schemes = ['legacy', 'artist', 'hierarchical', 'semantic'];
+        const baseNames = [
+          'walk', 'run', 'idle', 'jump', 'attack', 'defend', 'crouch', 'climb',
+          'swim', 'fly', 'dance', 'wave', 'bow', 'kneel', 'sit', 'stand'
+        ];
+
+        for (let i = 0; i < ${{ matrix.batch_size }}; i++) {
+          const baseName = baseNames[i % baseNames.length];
+          const variant = String(i + 1).padStart(2, '0');
+
+          let animationName;
+          switch ('${{ matrix.scheme }}') {
+            case 'legacy':
+              animationName = \`\${baseName}_\${variant}\`;
+              break;
+            case 'artist':
+              animationName = \`char_\${baseName}_\${variant}\`;
+              break;
+            case 'hierarchical':
+              animationName = \`character/movement/\${baseName}/\${variant}\`;
+              break;
+            case 'semantic':
+              animationName = \`character.movement.\${baseName}.forward\`;
+              break;
+          }
+
+          testData.push({
+            name: animationName,
+            sourceScheme: '${{ matrix.scheme }}',
+            targetScheme: schemes.filter(s => s !== '${{ matrix.scheme }}')[Math.floor(Math.random() * 3)]
+          });
+        }
+
+        fs.writeFileSync('test-data.json', JSON.stringify(testData, null, 2));
+        console.log(\`Generated \${testData.length} test cases for ${{ matrix.scheme }} scheme\`);
+        "
+
+    - name: Run conversion performance test
+      run: |
+        node -e "
+        const fs = require('fs');
+        const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
+        const testData = JSON.parse(fs.readFileSync('test-data.json', 'utf8'));
+
+        const mapper = new AnimationNameMapper();
+        const results = {
+          scheme: '${{ matrix.scheme }}',
+          batchSize: ${{ matrix.batch_size }},
+          totalConversions: testData.length,
+          startTime: Date.now(),
+          conversions: [],
+          errors: []
+        };
+
+        console.log(\`Starting performance test: ${{ matrix.scheme }} scheme, \${testData.length} conversions\`);
+
+        for (const testCase of testData) {
+          const startTime = process.hrtime.bigint();
+
+          try {
+            const result = mapper.convert(
+              testCase.name,
+              testCase.sourceScheme,
+              testCase.targetScheme
+            );
+
+            const endTime = process.hrtime.bigint();
+            const duration = Number(endTime - startTime) / 1000000; // Convert to milliseconds
+
+            results.conversions.push({
+              input: testCase.name,
+              output: result,
+              sourceScheme: testCase.sourceScheme,
+              targetScheme: testCase.targetScheme,
+              duration: duration
+            });
+          } catch (error) {
+            results.errors.push({
+              input: testCase.name,
+              sourceScheme: testCase.sourceScheme,
+              targetScheme: testCase.targetScheme,
+              error: error.message
+            });
+          }
+        }
+
+        results.endTime = Date.now();
+        results.totalDuration = results.endTime - results.startTime;
+        results.averageConversionTime = results.conversions.length > 0
+          ? results.conversions.reduce((sum, c) => sum + c.duration, 0) / results.conversions.length
+          : 0;
+        results.conversionsPerSecond = (results.conversions.length / results.totalDuration) * 1000;
+        results.errorRate = (results.errors.length / testData.length) * 100;
+
+        console.log(\`Performance Results:\`);
+        console.log(\`  Total Duration: \${results.totalDuration}ms\`);
+        console.log(\`  Average Conversion Time: \${results.averageConversionTime.toFixed(2)}ms\`);
+        console.log(\`  Conversions per Second: \${results.conversionsPerSecond.toFixed(2)}\`);
+        console.log(\`  Error Rate: \${results.errorRate.toFixed(2)}%\`);
+        console.log(\`  Successful Conversions: \${results.conversions.length}\`);
+        console.log(\`  Failed Conversions: \${results.errors.length}\`);
+
+        // Save detailed results
+        fs.writeFileSync('performance-results.json', JSON.stringify(results, null, 2));
+
+        // Performance thresholds
+        const MAX_AVG_CONVERSION_TIME = 10; // 10ms
+        const MAX_ERROR_RATE = 5; // 5%
+        const MIN_CONVERSIONS_PER_SECOND = 100;
+
+        if (results.averageConversionTime > MAX_AVG_CONVERSION_TIME) {
+          console.error(\`PERFORMANCE ISSUE: Average conversion time (\${results.averageConversionTime.toFixed(2)}ms) exceeds threshold (\${MAX_AVG_CONVERSION_TIME}ms)\`);
+          process.exit(1);
+        }
+
+        if (results.errorRate > MAX_ERROR_RATE) {
+          console.error(\`PERFORMANCE ISSUE: Error rate (\${results.errorRate.toFixed(2)}%) exceeds threshold (\${MAX_ERROR_RATE}%)\`);
+          process.exit(1);
+        }
+
+        if (results.conversionsPerSecond < MIN_CONVERSIONS_PER_SECOND) {
+          console.error(\`PERFORMANCE ISSUE: Conversions per second (\${results.conversionsPerSecond.toFixed(2)}) below threshold (\${MIN_CONVERSIONS_PER_SECOND})\`);
+          process.exit(1);
+        }
+
+        console.log('All performance thresholds passed! ✓');
+        "
+
+    - name: Upload performance results
+      uses: actions/upload-artifact@v4
+      with:
+        name: performance-results-${{ matrix.scheme }}-${{ matrix.batch_size }}
+        path: performance-results.json
+        retention-days: 30
+
+  memory-performance:
+    name: Memory Usage Analysis
+    runs-on: ubuntu-latest
+    if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'memory' || github.event.inputs.test_type == null
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run memory analysis
+      run: |
+        node --expose-gc -e "
+        const { AnimationNameMapper } = require('./src/animation/AnimationNameMapper.js');
+
+        function getMemoryUsage() {
+          global.gc();
+          const used = process.memoryUsage();
+          return {
+            rss: Math.round(used.rss / 1024 / 1024 * 100) / 100,
+            heapTotal: Math.round(used.heapTotal / 1024 / 1024 * 100) / 100,
+            heapUsed: Math.round(used.heapUsed / 1024 / 1024 * 100) / 100,
+            external: Math.round(used.external / 1024 / 1024 * 100) / 100
+          };
+        }
+
+        console.log('Starting memory analysis...');
+
+        const initialMemory = getMemoryUsage();
+        console.log('Initial memory usage:', initialMemory);
+
+        // Create multiple mappers to test memory leaks
+        const mappers = [];
+        for (let i = 0; i < 100; i++) {
+          mappers.push(new AnimationNameMapper());
+        }
+
+        const afterCreationMemory = getMemoryUsage();
+        console.log('After creating 100 mappers:', afterCreationMemory);
+
+        // Perform conversions
+        const testAnimations = [
+          'char_walk_01', 'char_run_02', 'prop_door_open',
+          'character.idle.basic', 'character/movement/walk/forward',
+          'idle_basic', 'walk_forward', 'attack_sword'
+        ];
+
+        for (let round = 0; round < 10; round++) {
+          for (const mapper of mappers) {
+            for (const animation of testAnimations) {
+              try {
+                mapper.convert(animation, 'artist', 'semantic');
+                mapper.convert(animation, 'semantic', 'hierarchical');
+                mapper.convert(animation, 'hierarchical', 'legacy');
+              } catch (error) {
+                // Ignore conversion errors for memory test
+              }
+            }
+          }
+
+          if (round % 3 === 0) {
+            const memoryUsage = getMemoryUsage();
+            console.log(\`Round \${round + 1} memory usage:\`, memoryUsage);
+          }
+        }
+
+        const finalMemory = getMemoryUsage();
+        console.log('Final memory usage:', finalMemory);
+
+        // Calculate memory growth
+        const heapGrowth = finalMemory.heapUsed - initialMemory.heapUsed;
+        const rssGrowth = finalMemory.rss - initialMemory.rss;
+
+        console.log(\`Heap growth: \${heapGrowth} MB\`);
+        console.log(\`RSS growth: \${rssGrowth} MB\`);
+
+        // Memory leak thresholds
+        const MAX_HEAP_GROWTH = 50; // 50 MB
+        const MAX_RSS_GROWTH = 100; // 100 MB
+
+        if (heapGrowth > MAX_HEAP_GROWTH) {
+          console.error(\`MEMORY LEAK: Heap growth (\${heapGrowth} MB) exceeds threshold (\${MAX_HEAP_GROWTH} MB)\`);
+          process.exit(1);
+        }
+
+        if (rssGrowth > MAX_RSS_GROWTH) {
+          console.error(\`MEMORY LEAK: RSS growth (\${rssGrowth} MB) exceeds threshold (\${MAX_RSS_GROWTH} MB)\`);
+          process.exit(1);
+        }
+
+        console.log('Memory usage within acceptable limits ✓');
+        "
+
+  lighthouse-performance:
+    name: Demo Performance Audit
+    runs-on: ubuntu-latest
+    if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'lighthouse' || github.event.inputs.test_type == null
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build demo
+      run: npm run build:demo
+
+    - name: Install Lighthouse
+      run: npm install -g @lhci/cli lighthouse
+
+    - name: Start demo server
+      run: |
+        npm run preview:demo &
+        sleep 10
+      env:
+        NODE_ENV: production
+
+    - name: Run Lighthouse audit
+      run: |
+        lighthouse http://localhost:3000 \
+          --output=json \
+          --output-path=lighthouse-report.json \
+          --chrome-flags="--headless --no-sandbox --disable-dev-shm-usage" \
+          --only-categories=performance,accessibility,best-practices
+
+    - name: Analyze Lighthouse results
+      run: |
+        node -e "
+        const fs = require('fs');
+        const report = JSON.parse(fs.readFileSync('lighthouse-report.json', 'utf8'));
+
+        const scores = {
+          performance: report.categories.performance.score * 100,
+          accessibility: report.categories.accessibility.score * 100,
+          bestPractices: report.categories['best-practices'].score * 100
+        };
+
+        const metrics = {
+          fcp: report.audits['first-contentful-paint'].numericValue,
+          lcp: report.audits['largest-contentful-paint'].numericValue,
+          cls: report.audits['cumulative-layout-shift'].numericValue,
+          tbt: report.audits['total-blocking-time'].numericValue,
+          tti: report.audits['interactive'].numericValue
+        };
+
+        console.log('Lighthouse Scores:');
+        console.log(\`  Performance: \${scores.performance.toFixed(1)}/100\`);
+        console.log(\`  Accessibility: \${scores.accessibility.toFixed(1)}/100\`);
+        console.log(\`  Best Practices: \${scores.bestPractices.toFixed(1)}/100\`);
+
+        console.log('\\nCore Web Vitals:');
+        console.log(\`  First Contentful Paint: \${(metrics.fcp / 1000).toFixed(2)}s\`);
+        console.log(\`  Largest Contentful Paint: \${(metrics.lcp / 1000).toFixed(2)}s\`);
+        console.log(\`  Cumulative Layout Shift: \${metrics.cls.toFixed(3)}\`);
+        console.log(\`  Total Blocking Time: \${metrics.tbt.toFixed(0)}ms\`);
+        console.log(\`  Time to Interactive: \${(metrics.tti / 1000).toFixed(2)}s\`);
+
+        // Performance thresholds
+        const thresholds = {
+          performance: 90,
+          accessibility: 95,
+          bestPractices: 90,
+          fcp: 2000, // 2 seconds
+          lcp: 2500, // 2.5 seconds
+          cls: 0.1,
+          tbt: 300, // 300ms
+          tti: 3800 // 3.8 seconds
+        };
+
+        let failed = false;
+
+        if (scores.performance < thresholds.performance) {
+          console.error(\`PERFORMANCE ISSUE: Performance score (\${scores.performance.toFixed(1)}) below threshold (\${thresholds.performance})\`);
+          failed = true;
+        }
+
+        if (scores.accessibility < thresholds.accessibility) {
+          console.error(\`ACCESSIBILITY ISSUE: Accessibility score (\${scores.accessibility.toFixed(1)}) below threshold (\${thresholds.accessibility})\`);
+          failed = true;
+        }
+
+        if (metrics.fcp > thresholds.fcp) {
+          console.error(\`PERFORMANCE ISSUE: FCP (\${(metrics.fcp / 1000).toFixed(2)}s) exceeds threshold (\${thresholds.fcp / 1000}s)\`);
+          failed = true;
+        }
+
+        if (metrics.lcp > thresholds.lcp) {
+          console.error(\`PERFORMANCE ISSUE: LCP (\${(metrics.lcp / 1000).toFixed(2)}s) exceeds threshold (\${thresholds.lcp / 1000}s)\`);
+          failed = true;
+        }
+
+        if (metrics.cls > thresholds.cls) {
+          console.error(\`PERFORMANCE ISSUE: CLS (\${metrics.cls.toFixed(3)}) exceeds threshold (\${thresholds.cls})\`);
+          failed = true;
+        }
+
+        if (failed) {
+          process.exit(1);
+        }
+
+        console.log('\\nAll performance thresholds passed! ✓');
+        "
+
+    - name: Upload Lighthouse report
+      uses: actions/upload-artifact@v4
+      with:
+        name: lighthouse-report
+        path: lighthouse-report.json
+        retention-days: 30
+
+  generate-performance-report:
+    name: Generate Performance Report
+    runs-on: ubuntu-latest
+    needs: [conversion-performance, memory-performance, lighthouse-performance]
+    if: always()
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Download all artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: artifacts/
+
+    - name: Generate performance report
+      run: |
+        node -e "
+        const fs = require('fs');
+        const path = require('path');
+
+        const report = {
+          timestamp: new Date().toISOString(),
+          commit: process.env.GITHUB_SHA || 'unknown',
+          branch: process.env.GITHUB_REF_NAME || 'unknown',
+          results: {
+            conversion: [],
+            memory: null,
+            lighthouse: null
+          },
+          summary: {
+            passed: 0,
+            failed: 0,
+            warnings: []
+          }
+        };
+
+        // Process conversion performance results
+        const artifactsDir = 'artifacts';
+        if (fs.existsSync(artifactsDir)) {
+          const artifactDirs = fs.readdirSync(artifactsDir);
+
+          for (const dir of artifactDirs) {
+            if (dir.startsWith('performance-results-')) {
+              const resultFile = path.join(artifactsDir, dir, 'performance-results.json');
+              if (fs.existsSync(resultFile)) {
+                const result = JSON.parse(fs.readFileSync(resultFile, 'utf8'));
+                report.results.conversion.push(result);
+
+                if (result.errorRate <= 5 && result.averageConversionTime <= 10) {
+                  report.summary.passed++;
+                } else {
+                  report.summary.failed++;
+                }
+              }
+            }
+
+            if (dir === 'lighthouse-report') {
+              const lightouseFile = path.join(artifactsDir, dir, 'lighthouse-report.json');
+              if (fs.existsSync(lightouseFile)) {
+                const lighthouse = JSON.parse(fs.readFileSync(lightouseFile, 'utf8'));
+                report.results.lighthouse = {
+                  performance: lighthouse.categories.performance.score * 100,
+                  accessibility: lighthouse.categories.accessibility.score * 100,
+                  bestPractices: lighthouse.categories['best-practices'].score * 100,
+                  fcp: lighthouse.audits['first-contentful-paint'].numericValue,
+                  lcp: lighthouse.audits['largest-contentful-paint'].numericValue,
+                  cls: lighthouse.audits['cumulative-layout-shift'].numericValue
+                };
+
+                if (report.results.lighthouse.performance >= 90) {
+                  report.summary.passed++;
+                } else {
+                  report.summary.failed++;
+                }
+              }
+            }
+          }
+        }
+
+        // Generate markdown report
+        let markdown = \`# Performance Test Report\\n\\n\`;
+        markdown += \`**Date:** \${new Date(report.timestamp).toLocaleString()}\\n\`;
+        markdown += \`**Commit:** \${report.commit}\\n\`;
+        markdown += \`**Branch:** \${report.branch}\\n\\n\`;
+
+        markdown += \`## Summary\\n\\n\`;
+        markdown += \`- ✅ **Passed:** \${report.summary.passed}\\n\`;
+        markdown += \`- ❌ **Failed:** \${report.summary.failed}\\n\\n\`;
+
+        if (report.results.conversion.length > 0) {
+          markdown += \`## Conversion Performance\\n\\n\`;
+          markdown += \`| Scheme | Batch Size | Avg Time (ms) | Conversions/sec | Error Rate (%) |\\n\`;
+          markdown += \`|--------|------------|---------------|-----------------|----------------|\\n\`;
+
+          for (const result of report.results.conversion) {
+            const status = result.errorRate <= 5 && result.averageConversionTime <= 10 ? '✅' : '❌';
+            markdown += \`| \${status} \${result.scheme} | \${result.batchSize} | \${result.averageConversionTime.toFixed(2)} | \${result.conversionsPerSecond.toFixed(2)} | \${result.errorRate.toFixed(2)} |\\n\`;
+          }
+          markdown += \`\\n\`;
+        }
+
+        if (report.results.lighthouse) {
+          markdown += \`## Lighthouse Performance\\n\\n\`;
+          const l = report.results.lighthouse;
+          markdown += \`- **Performance Score:** \${l.performance.toFixed(1)}/100\\n\`;
+          markdown += \`- **Accessibility Score:** \${l.accessibility.toFixed(1)}/100\\n\`;
+          markdown += \`- **Best Practices Score:** \${l.bestPractices.toFixed(1)}/100\\n\`;
+          markdown += \`- **First Contentful Paint:** \${(l.fcp / 1000).toFixed(2)}s\\n\`;
+          markdown += \`- **Largest Contentful Paint:** \${(l.lcp / 1000).toFixed(2)}s\\n\`;
+          markdown += \`- **Cumulative Layout Shift:** \${l.cls.toFixed(3)}\\n\\n\`;
+        }
+
+        fs.writeFileSync('performance-report.json', JSON.stringify(report, null, 2));
+        fs.writeFileSync('performance-report.md', markdown);
+
+        console.log('Performance report generated');
+        console.log(markdown);
+        "
+
+    - name: Upload performance report
+      uses: actions/upload-artifact@v4
+      with:
+        name: performance-report
+        path: |
+          performance-report.json
+          performance-report.md
+        retention-days: 90
+
+    - name: Comment performance report on PR
+      if: github.event_name == 'pull_request'
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const fs = require('fs');
+          if (fs.existsSync('performance-report.md')) {
+            const report = fs.readFileSync('performance-report.md', 'utf8');
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: report
+            });
+          }

.github/workflows/release.yml

@@ -0,0 +1,252 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to release (e.g., v1.2.3)'
+        required: true
+        type: string
+      prerelease:
+        description: 'Mark as pre-release'
+        required: false
+        default: false
+        type: boolean
+
+env:
+  NODE_VERSION: '20.x'
+
+jobs:
+  validate-version:
+    name: Validate Version
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+      is_prerelease: ${{ steps.version.outputs.is_prerelease }}
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Extract version
+      id: version
+      run: |
+        if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+          VERSION="${{ github.event.inputs.version }}"
+          IS_PRERELEASE="${{ github.event.inputs.prerelease }}"
+        else
+          VERSION="${GITHUB_REF#refs/tags/}"
+          # Check if version contains pre-release identifiers
+          if [[ "$VERSION" =~ -[a-zA-Z] ]]; then
+            IS_PRERELEASE=true
+          else
+            IS_PRERELEASE=false
+          fi
+        fi
+
+        echo "version=$VERSION" >> $GITHUB_OUTPUT
+        echo "is_prerelease=$IS_PRERELEASE" >> $GITHUB_OUTPUT
+        echo "Release version: $VERSION (prerelease: $IS_PRERELEASE)"
+
+    - name: Validate semantic version
+      run: |
+        VERSION="${{ steps.version.outputs.version }}"
+        if [[ ! "$VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$ ]]; then
+          echo "Invalid semantic version: $VERSION"
+          exit 1
+        fi
+
+  build-and-test:
+    name: Build and Test
+    runs-on: ubuntu-latest
+    needs: validate-version
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run linting
+      run: npm run lint
+
+    - name: Run tests
+      run: npm test
+
+    - name: Run multi-scheme validation
+      run: npm run test:multi-schemes
+
+    - name: Build project
+      run: npm run build
+
+    - name: Build demo
+      run: npm run build:demo
+
+    - name: Generate documentation
+      run: npm run docs
+
+    - name: Validate build artifacts
+      run: |
+        test -d dist || (echo "Build failed - dist directory not found" && exit 1)
+        test -d dist/demo || (echo "Demo build failed - dist/demo directory not found" && exit 1)
+        test -d docs || (echo "Documentation generation failed" && exit 1)
+
+    - name: Upload build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: release-artifacts
+        path: |
+          dist/
+          docs/
+          CHANGELOG.md
+          README.md
+          MULTI_SCHEME_GUIDE.md
+        retention-days: 30
+
+  create-release:
+    name: Create Release
+    runs-on: ubuntu-latest
+    needs: [validate-version, build-and-test]
+    permissions:
+      contents: write
+      pull-requests: read
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Download build artifacts
+      uses: actions/download-artifact@v4
+      with:
+        name: release-artifacts
+        path: ./artifacts
+
+    - name: Generate release notes
+      id: release_notes
+      run: |
+        VERSION="${{ needs.validate-version.outputs.version }}"
+
+        # Extract changelog for this version
+        if [ -f CHANGELOG.md ]; then
+          # Get the changelog section for this version
+          CHANGELOG_SECTION=$(sed -n "/^## \[${VERSION#v}\]/,/^## \[/p" CHANGELOG.md | head -n -1)
+          if [ -n "$CHANGELOG_SECTION" ]; then
+            echo "Found changelog section for version ${VERSION#v}"
+            echo "$CHANGELOG_SECTION" > release_notes.md
+          else
+            echo "No changelog section found for version ${VERSION#v}, generating default notes"
+            echo "## Changes in ${VERSION}" > release_notes.md
+            echo "" >> release_notes.md
+            echo "This release includes various improvements and updates to the Owen Animation System." >> release_notes.md
+          fi
+        else
+          echo "## Changes in ${VERSION}" > release_notes.md
+          echo "" >> release_notes.md
+          echo "This release includes various improvements and updates to the Owen Animation System." >> release_notes.md
+        fi
+
+        # Add commit summary since last tag
+        echo "" >> release_notes.md
+        echo "### Commits since last release:" >> release_notes.md
+        git log --oneline $(git describe --tags --abbrev=0 2>/dev/null || echo "HEAD~10")..HEAD >> release_notes.md || true
+
+    - name: Create GitHub Release
+      uses: softprops/action-gh-release@v2
+      with:
+        tag_name: ${{ needs.validate-version.outputs.version }}
+        name: Owen Animation System ${{ needs.validate-version.outputs.version }}
+        body_path: release_notes.md
+        draft: false
+        prerelease: ${{ needs.validate-version.outputs.is_prerelease == 'true' }}
+        files: |
+          artifacts/dist/**
+          artifacts/docs/**
+          artifacts/CHANGELOG.md
+          artifacts/README.md
+          artifacts/MULTI_SCHEME_GUIDE.md
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish-npm:
+    name: Publish to NPM
+    runs-on: ubuntu-latest
+    needs: [validate-version, create-release]
+    if: needs.validate-version.outputs.is_prerelease == 'false'
+    environment: npm-publish
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+        registry-url: 'https://registry.npmjs.org'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build project
+      run: npm run build
+
+    - name: Update package version
+      run: |
+        VERSION="${{ needs.validate-version.outputs.version }}"
+        npm version ${VERSION#v} --no-git-tag-version
+
+    - name: Publish to NPM
+      run: npm publish --access public
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  deploy-demo:
+    name: Deploy Demo
+    runs-on: ubuntu-latest
+    needs: [validate-version, create-release]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build demo
+      run: npm run build:demo
+
+    - name: Deploy demo to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v4
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist/demo
+        destination_dir: releases/${{ needs.validate-version.outputs.version }}
+
+    - name: Update latest demo link
+      if: needs.validate-version.outputs.is_prerelease == 'false'
+      uses: peaceiris/actions-gh-pages@v4
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist/demo
+        destination_dir: latest

.gitignore

@@ -0,0 +1,450 @@
+# Temporary files
+*.tmp
+*.temp
+
+# # Documentation output
+# /docs/
+
+# Animation assets (if storing locally)
+/assets/models/
+/assets/animations/
+
+# Example build outputs
+/examples/dist/
+
+# 3D Models (optional - remove if you want to commit models)
+*.gltf
+*.glb
+*.fbx
+*.obj
+*.dae
+
+# Three.js cache
+.three-cache/
+
+# MyPy cache
+.mypy_cache/
+
+# Editor (optional - remove if you want to commit editor files)
+.vscode/
+
+# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,linux,visualstudiocode,webstorm,vim,emacs,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,linux,visualstudiocode,webstorm,vim,emacs,node
+
+### Emacs ###
+# -*- mode: gitignore; -*-
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+
+# Org-mode
+.org-id-locations
+*_archive
+
+# flymake-mode
+*_flymake.*
+
+# eshell files
+/eshell/history
+/eshell/lastdir
+
+# elpa packages
+/elpa/
+
+# reftex files
+*.rel
+
+# AUCTeX auto folder
+/auto/
+
+# cask packages
+.cask/
+dist/
+
+# Flycheck
+flycheck_*.el
+
+# server auth directory
+/server/
+
+# projectiles files
+.projectile
+
+# directory configuration
+.dir-locals.el
+
+# network security
+/network-security.data
+
+
+### Linux ###
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### Vim ###
+# Swap
+[._]*.s[a-v][a-z]
+!*.svg  # comment out if you don't need vector files
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+Sessionx.vim
+
+# Temporary
+.netrwhist
+# Auto-generated tag files
+tags
+# Persistent undo
+[._]*.un~
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### WebStorm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+# https://plugins.jetbrains.com/plugin/7973-sonarlint
+.idea/**/sonarlint/
+
+# SonarQube Plugin
+# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
+.idea/**/sonarIssues.xml
+
+# Markdown Navigator plugin
+# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
+.idea/**/markdown-navigator.xml
+.idea/**/markdown-navigator-enh.xml
+.idea/**/markdown-navigator/
+
+# Cache file creation bug
+# See https://youtrack.jetbrains.com/issue/JBR-2257
+.idea/$CACHE_FILE$
+
+# CodeStream plugin
+# https://plugins.jetbrains.com/plugin/12206-codestream
+.idea/codestream.xml
+
+# Azure Toolkit for IntelliJ plugin
+# https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij
+.idea/**/azureSettings.xml
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/windows,macos,linux,visualstudiocode,webstorm,vim,emacs,node

CHANGELOG.md

@@ -0,0 +1,133 @@
+# Changelog
+
+All notable changes to the Owen Animation System will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.2] - 2025-05-24
+
+### Added
+
+-   🔄 Multi-scheme animation naming system with four naming schemes
+-   🧪 Testing framework for multi-scheme compatibility with Playwright
+-   📋 GitHub workflows for animation processing and testing
+-   🚀 Demo pages showing multi-scheme usage
+-   📄 Multi-scheme animation naming guide (MULTI_SCHEME_GUIDE.md)
+-   🛠️ Animation validation and conversion scripts
+
+### Fixed
+
+-   🐛 Fixed duplicate methods in OwenAnimationContext
+-   🔧 Fixed linting issues across the codebase
+-   🐛 Fixed alert references in demo.js with window.alert
+-   🔧 Removed unused variables in scripts
+-   🔍 Fixed import issues in AnimationNameMapper
+
+## [1.0.1] - 2025-05-24
+
+### Changed
+
+-   🎨 Standardized code style throughout the codebase
+-   🔧 Converted semicolons to non-semicolons according to JavaScript Standard Style
+-   📝 Improved code consistency and readability
+
+## [1.0.0] - 2025-05-23
+
+### Added
+
+-   🎯 Complete modular architecture with proper ES module structure
+-   🧩 Extensible plugin system for custom states and emotions
+-   📊 Comprehensive JSDoc documentation across all modules
+-   🎮 Enhanced interactive demo with keyboard controls
+-   📦 TypeScript type definitions for all components
+-   🔧 Configuration system for fine-tuning behavior
+-   🏗️ Examples directory with various implementation patterns
+-   🚀 Vite-based development and build system
+
+### Enhanced
+
+-   ⚡ Optimized animation caching with intelligent preloading
+-   🤖 Advanced emotional analysis with broader message understanding
+-   🔄 Sophisticated animation transitions with nested state support
+-   📝 Extended animation naming convention with nested animations
+-   🎨 Refined state machine behavior and transitions
+-   🛠️ Improved development tooling integration
+
+### Architecture
+
+-   **Core Classes:**
+    -   `OwenAnimationContext` - Main system controller
+    -   `AnimationClip` - Individual animation management
+    -   `AnimationClipFactory` - Animation creation with metadata parsing
+    -   `StateHandler` - Abstract base for state implementations
+    -   `StateFactory` - Dynamic state handler creation
+
+-   **State Handlers:**
+    -   `WaitStateHandler` - Idle state with quirk animations
+    -   `ReactStateHandler` - User input response with emotion analysis
+    -   `TypeStateHandler` - Typing state with emotional variations
+    -   `SleepStateHandler` - Inactive state management
+
+-   **Animation Loaders:**
+    -   `AnimationLoader` - Abstract animation loading interface
+    -   `GLTFAnimationLoader` - GLTF/GLB model animation loader
+
+-   **Factories:**
+    -   `OwenSystemFactory` - Main system assembly factory
+
+### Features
+
+-   **Animation System:**
+    -   Support for Loop (L), Quirk (Q), Transition (T), and Nested animations
+    -   Automatic metadata parsing from animation names
+    -   Efficient animation caching and resource management
+    -   Smooth transitions between states and emotions
+
+-   **State Machine:**
+    -   Four core states: Wait, React, Type, Sleep
+    -   Emotional state transitions (Neutral, Angry, Shocked, Happy, Sad)
+    -   Automatic inactivity detection and sleep transitions
+    -   Message analysis for emotional response determination
+
+-   **Developer Experience:**
+    -   Comprehensive TypeScript type definitions
+    -   JSDoc documentation for all public APIs
+    -   Example implementations and demos
+    -   ESLint configuration for code quality
+    -   Vite development server setup
+
+### Documentation
+
+-   Complete README with installation and usage instructions
+-   API documentation via JSDoc
+-   Code examples for basic and advanced usage
+-   Animation naming convention guide
+-   Troubleshooting section
+
+### Examples
+
+-   Basic browser demo with Three.js integration
+-   Simple Node.js example for testing
+-   Interactive controls for state transitions
+-   Mock model implementation for development
+
+## [0.1.0] - 2025-05-01
+
+### Added
+
+-   🎉 First implementation of Owen Animation System
+-   ✨ Basic state machine implementation (Wait, React, Type, Sleep)
+-   🤖 Simple emotional response system with basic message analysis
+-   🏗️ Initial architecture with basic dependency injection pattern
+-   📝 Basic animation naming parser for transitions and states
+-   🔄 Basic animation transitions between states
+-   ⚡ Simple animation clip caching
+-   🎮 Basic Three.js integration with GLTFLoader
+-   🎭 Core state handlers with basic functionality
+-   🛠️ Development environment foundations
+
+[0.1.0]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v0.1.0
+[1.0.0]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v1.0.0
+[1.0.1]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v1.0.1
+[1.0.2]: https://gitea.kajkowalski.nl/kjanat/Owen/releases/tag/v1.0.2

LICENSE.AGPL

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

LICENSE.COMMERCIAL

@@ -0,0 +1,38 @@
+COMMERCIAL LICENSE AGREEMENT
+
+Copyright (c) 2025 Kaj Kowalski
+
+NOTICE: This software is dual-licensed. This commercial license applies only to those who have purchased a commercial license from Kaj Kowalski. If you have not purchased a commercial license, this software is licensed under the AGPL-3.0 license (see LICENSE.AGPL).
+
+COMMERCIAL LICENSE TERMS
+
+1. GRANT OF LICENSE
+Subject to the terms of this agreement and payment of applicable fees, Kaj Kowalski grants you a non-exclusive, non-transferable license to use, modify, and distribute this software for commercial purposes.
+
+2. PERMITTED USES
+- Use the software in commercial applications
+- Modify the software for your internal use
+- Distribute the software as part of your commercial products
+- Use the software in SaaS applications without source code disclosure requirements
+
+3. RESTRICTIONS
+- You may not sublicense, sell, or transfer this commercial license to third parties
+- You may not remove or alter any copyright notices
+- You may not reverse engineer the software beyond what is legally permitted
+
+4. NO WARRANTY
+THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+5. LIMITATION OF LIABILITY
+IN NO EVENT SHALL Kaj Kowalski BE LIABLE FOR ANY DAMAGES ARISING FROM USE OF THIS SOFTWARE.
+
+6. TERMINATION
+This license terminates automatically if you breach any terms. Upon termination, you must cease all use and destroy all copies.
+
+7. CONTACT
+For commercial licensing inquiries, contact:
+Email: licensing@kjanat.com
+Website: github.com/kjanat
+
+---
+To obtain a commercial license, please contact us at licensing@kjanat.com

MULTI_SCHEME_GUIDE.md

@@ -0,0 +1,303 @@
+# Multi-Scheme Animation Naming Guide
+
+The Owen Animation System supports four different naming schemes to accommodate different workflows and preferences. This guide explains each scheme and how to use them effectively.
+
+## 🎯 Overview
+
+The multi-scheme animation naming system provides backward compatibility while making the Owen Animation System more accessible to different types of users:
+
+-   **Legacy Scheme**: Original technical format for backward compatibility
+-   **Artist Scheme**: Blender-friendly names for 3D artists
+-   **Hierarchical Scheme**: Organized dot-notation for structured projects
+-   **Semantic Scheme**: Readable camelCase for developers
+
+## 📝 Naming Schemes
+
+### 1. Legacy Scheme (Technical/Backward Compatible)
+
+**Format**: `{state}_{emotion}_{type}`
+**Examples**:
+
+-   `wait_idle_L` - Wait state, idle animation, Loop
+-   `react_an2type_T` - React state, angry to type, Transition
+-   `type_idle_L` - Type state, idle animation, Loop
+-   `sleep_2wait_T` - Sleep state, to wait transition, Transition
+
+**Use Cases**:
+
+-   Existing Owen implementations
+-   Technical documentation
+-   Legacy animation files
+
+### 2. Artist Scheme (Blender-Friendly)
+
+**Format**: `Owen_{Action}` or `Owen_{StateAction}`
+**Examples**:
+
+-   `Owen_WaitIdle` - Wait idle animation
+-   `Owen_ReactAngryToType` - React angry to type transition
+-   `Owen_TypeIdle` - Type idle animation
+-   `Owen_SleepToWait` - Sleep to wait transition
+
+**Use Cases**:
+
+-   3D artists working in Blender
+-   Animation asset naming
+-   Non-technical team members
+-   Clear, human-readable names
+
+### 3. Hierarchical Scheme (Structured/Organized)
+
+**Format**: `owen.{category}.{state}.{detail}.{type}`
+**Examples**:
+
+-   `owen.state.wait.idle.loop` - Wait state idle loop
+-   `owen.state.react.angry.totype.transition` - React angry to type transition
+-   `owen.state.type.idle.loop` - Type state idle loop
+-   `owen.state.sleep.towait.transition` - Sleep to wait transition
+
+**Use Cases**:
+
+-   Large projects with many animations
+-   Structured asset organization
+-   Configuration files
+-   Automated tooling
+
+### 4. Semantic Scheme (Developer-Friendly)
+
+**Format**: `Owen{StateAction}{Type}` (PascalCase)
+**Examples**:
+
+-   `OwenWaitIdleLoop` - Wait idle loop animation
+-   `OwenReactAngryToTypeTransition` - React angry to type transition
+-   `OwenTypeIdleLoop` - Type idle loop animation
+-   `OwenSleepToWaitTransition` - Sleep to wait transition
+
+**Use Cases**:
+
+-   JavaScript/TypeScript code
+-   API integration
+-   Developer constants
+-   Type-safe programming
+
+## 🔧 Usage Examples
+
+### Basic Usage
+
+```javascript
+import { OwenAnimationContext, convertAnimationName } from './owen-animation-system';
+
+// Get animation using any naming scheme
+const clip1 = owenContext.getClip('wait_idle_L');           // Legacy
+const clip2 = owenContext.getClip('Owen_WaitIdle');         // Artist
+const clip3 = owenContext.getClip('owen.state.wait.idle.loop'); // Hierarchical
+const clip4 = owenContext.getClip('OwenWaitIdleLoop');      // Semantic
+
+// All return the same animation clip!
+```
+
+### Name Conversion
+
+```javascript
+import { convertAnimationName, getAllAnimationNames } from './owen-animation-system';
+
+// Convert between schemes
+const artistName = convertAnimationName('wait_idle_L', 'artist');
+// Returns: 'Owen_WaitIdle'
+
+const semanticName = convertAnimationName('Owen_ReactAngry', 'semantic');
+// Returns: 'OwenReactAngryLoop'
+
+// Get all variants
+const allNames = getAllAnimationNames('react_an2type_T');
+/* Returns:
+{
+  legacy: 'react_an2type_T',
+  artist: 'Owen_ReactAngryToType',
+  hierarchical: 'owen.state.react.angry.totype.transition',
+  semantic: 'OwenReactAngryToTypeTransition'
+}
+*/
+```
+
+### Validation
+
+```javascript
+import { validateAnimationName } from './owen-animation-system';
+
+const validation = validateAnimationName('Owen_WaitIdle');
+/* Returns:
+{
+  isValid: true,
+  scheme: 'artist',
+  error: null,
+  suggestions: []
+}
+*/
+
+const invalidValidation = validateAnimationName('invalid_name');
+/* Returns:
+{
+  isValid: false,
+  scheme: 'unknown',
+  error: 'Animation "invalid_name" not found',
+  suggestions: ['OwenWaitIdleLoop', 'OwenReactIdleLoop', ...]
+}
+*/
+```
+
+### Using Constants
+
+```javascript
+import { 
+  LegacyAnimations, 
+  ArtistAnimations, 
+  SemanticAnimations 
+} from './owen-animation-system';
+
+// Type-safe animation references
+const legacyAnim = LegacyAnimations.WAIT_IDLE_LOOP;        // 'wait_idle_L'
+const artistAnim = ArtistAnimations.WAIT_IDLE;             // 'Owen_WaitIdle'
+const semanticAnim = SemanticAnimations.WAIT_IDLE_LOOP;    // 'OwenWaitIdleLoop'
+```
+
+## 🎨 Workflow Integration
+
+### For 3D Artists (Blender)
+
+1.  Use **Artist Scheme** names when creating animations in Blender
+2.  Name animations like `Owen_WaitIdle`, `Owen_ReactHappy`, etc.
+3.  Export animations with these names
+4.  The system automatically handles conversion to other schemes
+
+### For Developers
+
+1.  Use **Semantic Scheme** constants in code for type safety
+2.  Import animation constants: `import { SemanticAnimations } from './owen-animation-system'`
+3.  Reference animations: `SemanticAnimations.WAIT_IDLE_LOOP`
+4.  Let the system handle backward compatibility
+
+### For Project Management
+
+1.  Use **Hierarchical Scheme** for asset organization
+2.  Structure animation files: `owen.state.{stateName}.{details}.{type}`
+3.  Easy filtering and categorization
+4.  Clear project structure
+
+## 🔄 Migration Guide
+
+### From Legacy to Multi-Scheme
+
+```javascript
+// Before (Legacy only)
+const clip = owenContext.getClip('wait_idle_L');
+
+// After (Multi-scheme compatible)
+const clip = owenContext.getClip('wait_idle_L');           // Still works!
+// OR use any other scheme:
+const clip = owenContext.getClip('Owen_WaitIdle');         // Artist-friendly
+const clip = owenContext.getClip('OwenWaitIdleLoop');      // Developer-friendly
+```
+
+### Updating Animation Assets
+
+1.  **No changes required** - existing legacy names continue to work
+2.  **Gradual migration** - add new scheme names alongside legacy names
+3.  **Full migration** - replace legacy names with preferred scheme
+
+## 📚 Available Animations
+
+### Wait State
+
+| Legacy            | Artist          | Semantic            |
+| ----------------- | --------------- | ------------------- |
+| `wait_idle_L`     | `Owen_WaitIdle` | `OwenWaitIdleLoop`  |
+| `wait_pickNose_Q` | `Owen_PickNose` | `OwenQuirkPickNose` |
+| `wait_stretch_Q`  | `Owen_Stretch`  | `OwenQuirkStretch`  |
+| `wait_yawn_Q`     | `Owen_Yawn`     | `OwenQuirkYawn`     |
+
+### React State
+
+| Legacy         | Artist              | Semantic               |
+| -------------- | ------------------- | ---------------------- |
+| `react_idle_L` | `Owen_ReactIdle`    | `OwenReactIdleLoop`    |
+| `react_an_L`   | `Owen_ReactAngry`   | `OwenReactAngryLoop`   |
+| `react_sh_L`   | `Owen_ReactShocked` | `OwenReactShockedLoop` |
+| `react_ha_L`   | `Owen_ReactHappy`   | `OwenReactHappyLoop`   |
+| `react_sd_L`   | `Owen_ReactSad`     | `OwenReactSadLoop`     |
+
+### Type State
+
+| Legacy        | Artist          | Semantic           |
+| ------------- | --------------- | ------------------ |
+| `type_idle_L` | `Owen_TypeIdle` | `OwenTypeIdleLoop` |
+| `type_fast_L` | `Owen_TypeFast` | `OwenTypeFastLoop` |
+| `type_slow_L` | `Owen_TypeSlow` | `OwenTypeSlowLoop` |
+
+### Sleep State
+
+| Legacy          | Artist             | Semantic                    |
+| --------------- | ------------------ | --------------------------- |
+| `sleep_idle_L`  | `Owen_SleepIdle`   | `OwenSleepIdleLoop`         |
+| `sleep_2wait_T` | `Owen_SleepToWait` | `OwenSleepToWaitTransition` |
+
+## 🛠️ API Reference
+
+### Core Methods
+
+#### `getClip(name: string)`
+
+Get animation clip by name (supports all schemes)
+
+#### `getClipByScheme(name: string, targetScheme: string)`
+
+Get animation clip with specific scheme conversion
+
+#### `convertAnimationName(name: string, targetScheme: string)`
+
+Convert animation name between schemes
+
+#### `getAllAnimationNames(name: string)`
+
+Get all scheme variants for an animation
+
+#### `validateAnimationName(name: string)`
+
+Validate animation name and get suggestions
+
+### Constants
+
+#### `NamingSchemes`
+
+-   `LEGACY`: 'legacy'
+-   `ARTIST`: 'artist'
+-   `HIERARCHICAL`: 'hierarchical'
+-   `SEMANTIC`: 'semantic'
+
+#### Animation Constants
+
+-   `LegacyAnimations`: Legacy scheme constants
+-   `ArtistAnimations`: Artist scheme constants
+-   `HierarchicalAnimations`: Hierarchical scheme constants
+-   `SemanticAnimations`: Semantic scheme constants
+
+## 🎯 Best Practices
+
+1.  **Consistency**: Choose one primary scheme for your team and stick to it
+2.  **Type Safety**: Use constants instead of raw strings when possible
+3.  **Documentation**: Document which scheme you're using in your project
+4.  **Validation**: Use `validateAnimationName()` to catch typos early
+5.  **Migration**: Plan gradual migration for existing projects
+
+## 🚀 Examples
+
+Check out the [Mock Demo](./examples/mock-demo/owen_test_demo.html) for interactive examples of:
+
+-   Name conversion between schemes
+-   Animation validation
+-   Real-time scheme testing
+-   Integration patterns
+
+---
+
+For more information, see the [main README](./README.md) or check the [API documentation](./docs/).

README.md

@@ -1,53 +1,391 @@
-# Owen
+# Owen Animation System
 
-> Looking at this animation brief for Owen, I'll create a Three.js animation system that handles the state machine, animation clips, and transitions described in the document. This will use clean architecture principles with dependency injection and factory patterns.
+A comprehensive Three.js animation system for character state management with clean architecture principles, dependency injection, and factory patterns.
->
-> I've created a comprehensive Three.js animation system for Owen that implements the state machine and animation handling described in your brief. Here are the key architectural features:
 
-## **Clean Architecture Principles:**
+[![Gitea Issues](https://img.shields.io/gitea/issues/all/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl%2F)](https://gitea.kajkowalski.nl/kjanat/Owen/issues)
+[![Gitea Pull Requests](https://img.shields.io/gitea/pull-requests/all/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl%2F)](https://gitea.kajkowalski.nl/kjanat/Owen/pulls)
+[![Gitea Release](https://img.shields.io/gitea/v/release/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl&include_prereleases&sort=semver)](https://gitea.kajkowalski.nl/kjanat/Owen/tags)
 
-### **Dependency Injection:**
+## 🎯 Overview
 
-- `OwenAnimationContext` receives its dependencies (mixer, factory, etc.) through constructor injection
+The Owen Animation System is a sophisticated character animation framework built for Three.js that manages complex state machines, emotional responses, and animation transitions. It's designed with clean architecture principles to be maintainable, extensible, and testable.
-- State handlers are injected with the context they need
+
+## ✨ Key Features
+
+-   **🤖 State Machine Implementation** - Complete state management system with `Wait`, `React`, `Type`, and `Sleep` states
+-   **😊 Emotional Response System** - Analyzes user input to determine appropriate emotional animations
+-   **🔄 Animation Transition Management** - Smooth transitions between states with fade in/out support
+-   **📝 Multi-Scheme Animation Naming** - Supports legacy, artist-friendly, hierarchical, and semantic naming schemes
+-   **🎨 Artist-Friendly Workflow** - Blender-compatible naming for 3D artists (`Owen_WaitIdle`, `Owen_ReactHappy`)
+-   **👨‍💻 Developer Experience** - Type-safe constants and semantic naming (`OwenWaitIdleLoop`, `OwenReactAngryTransition`)
+-   **🏗️ Clean Architecture** - Uses dependency injection, factory patterns, and separation of concerns
+-   **⚡ Performance Optimized** - Efficient animation caching and resource management
+-   **🧩 Extensible Design** - Easy to add new states, emotions, and animation types
+-   **🔄 Backward Compatibility** - Legacy naming scheme continues to work alongside new schemes
+
+## 🚀 Installation
+
+### Prerequisites
+
+-   Node.js 16.0.0 or higher
+-   Three.js compatible 3D model with animations (GLTF/GLB format recommended)
+
+### Install Dependencies
+
+```bash
+# Clone the repository
+git clone https://gitea.kajkowalski.nl/kjanat/Owen.git
+cd Owen
+
+# Install dependencies
+npm install
+
+# Install dev dependencies
+npm install --include dev
+```
+
+## 📖 Usage
+
+### Basic Usage
+
+```javascript
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { OwenSystemFactory } from "owen";
+
+// Load your 3D model
+const loader = new GLTFLoader();
+const gltf = await loader.loadAsync("path/to/your-model.gltf");
+
+// Create a Three.js scene
+const scene = new THREE.Scene();
+scene.add(gltf.scene);
+
+// Create the Owen animation system
+const owenSystem = await OwenSystemFactory.createOwenSystem(gltf, scene);
+
+// Handle user messages
+await owenSystem.handleUserMessage("Hello Owen!");
+
+// Update in your render loop
+function animate() {
+  const deltaTime = clock.getDelta() * 1000; // Convert to milliseconds
+  owenSystem.update(deltaTime);
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate);
+}
+```
+
+> [!NOTE]
+> Replace `path/to/your-model.gltf` with the actual path to your 3D character model. The system is designed to work with any GLTF model that follows the animation naming convention.
+
+### Advanced Usage
+
+```javascript
+import { OwenSystemFactory, States, Emotions, StateHandler } from "owen";
+
+// Create custom state handler
+class CustomStateHandler extends StateHandler {
+  async enter(fromState, emotion) {
+    console.log(`Entering custom state from ${fromState}`);
+    // Your custom logic here
+  }
+
+  async exit(toState, emotion) {
+    console.log(`Exiting custom state to ${toState}`);
+    // Your custom logic here
+  }
+}
+
+// Register custom states
+const customStates = new Map();
+customStates.set("custom", CustomStateHandler);
+
+// Create system with custom states
+const owenSystem = await OwenSystemFactory.createCustomOwenSystem(gltfModel, scene, customStates);
+
+// Manual state transitions
+await owenSystem.transitionTo(States.REACTING, Emotions.HAPPY);
+```
+
+## 🎨 Multi-Scheme Animation Naming
+
+Owen supports **four different animation naming schemes** to accommodate different workflows and preferences:
+
+### Naming Schemes
+
+| Scheme           | Format                       | Example                     | Use Case                        |
+| ---------------- | ---------------------------- | --------------------------- | ------------------------------- |
+| **Legacy**       | `{state}_{emotion}_{type}`   | `wait_idle_L`               | Backward compatibility          |
+| **Artist**       | `Owen_{Action}`              | `Owen_WaitIdle`             | Blender-friendly for 3D artists |
+| **Hierarchical** | `owen.{category}.{state}...` | `owen.state.wait.idle.loop` | Structured projects             |
+| **Semantic**     | `Owen{StateAction}{Type}`    | `OwenWaitIdleLoop`          | Developer-friendly              |
+
+### Usage Examples
+
+```javascript
+// All of these refer to the same animation:
+const clip1 = owenSystem.getClip('wait_idle_L');                    // Legacy
+const clip2 = owenSystem.getClip('Owen_WaitIdle');                  // Artist  
+const clip3 = owenSystem.getClip('owen.state.wait.idle.loop');      // Hierarchical
+const clip4 = owenSystem.getClip('OwenWaitIdleLoop');               // Semantic
+
+// Convert between schemes
+import { convertAnimationName, SemanticAnimations } from 'owen';
+
+const artistName = convertAnimationName('wait_idle_L', 'artist');
+// Returns: 'Owen_WaitIdle'
+
+// Use type-safe constants
+const animation = SemanticAnimations.WAIT_IDLE_LOOP; // 'OwenWaitIdleLoop'
+```
+
+### For 3D Artists (Blender Workflow)
+
+```javascript
+// Use artist-friendly names in Blender:
+// Owen_WaitIdle, Owen_ReactHappy, Owen_TypeFast, etc.
+// System automatically handles conversion!
+
+const clip = owenSystem.getClip('Owen_ReactAngry');  // Just works!
+```
+
+> [!TIP]
+> See the [Multi-Scheme Guide](./MULTI_SCHEME_GUIDE.md) for complete documentation and examples.
+
+## 🎮 Animation Naming Convention (Legacy)
+
+The system maintains backward compatibility with the original naming convention:
+
+The system expects animations to follow this naming convention:
+
+```txt
+[state]_[action]_[type]
+[state]_[action]2[toState]_[emotion]_T
+```
+
+### Examples
+
+-   `wait_idle_L` - Wait state idle loop
+-   `wait_quirk1_Q` - Wait state quirk animation
+-   `react_angry2type_an_T` - Transition from react to type with angry emotion
+-   `type_happy_L` - Type state with happy emotion loop
+-   `sleep_wakeup_T` - Sleep wake up transition
+
+### Animation Types
+
+-   `L` - Loop animation
+-   `Q` - Quirk animation
+-   `T` - Transition animation
+-   `NL` - Nested loop
+-   `NQ` - Nested quirk
+
+### Emotions
+
+-   `an` - Angry
+-   `sh` - Shocked
+-   `ha` - Happy
+-   `sa` - Sad
+
+## 🏗️ Architecture
+
+### **Dependency Injection**
+
+-   `OwenAnimationContext` receives dependencies through constructor injection
+-   State handlers are injected with required context
 -   Animation loaders are injected into factories
 
-### **Factory Patterns:**
+### **Factory Patterns**
 
-- `AnimationClipFactory` - Creates animation clips with proper metadata parsing
+-   `AnimationClipFactory` - Creates animation clips with metadata parsing
 -   `StateFactory` - Creates state handlers dynamically
-- `OwenSystemFactory` - Main factory that assembles the entire system
+-   `OwenSystemFactory` - Main factory that assembles the complete system
 
-### **State Machine Implementation:**
+### **State Machine**
 
-- Each state (`Wait`, `React`, `Type`, `Sleep`) has its own handler class
+-   Each state has its own handler class with entry/exit logic
-- States manage their own entry/exit logic and transitions
+-   States manage their own transitions and behaviors
 -   Emotional transitions are handled with proper animation sequencing
 
-## **Key Features:**
+## 📁 Project Structure
 
-1. **Animation Naming Convention Parser** - Automatically parses the naming convention from your brief (e.g., `wait_idle_L`, `react_angry2type_an_T`)
+```sh
+Owen/
+├── src/
+│   ├── constants.js              # Animation types, states, emotions
+│   ├── index.js                  # Main entry point
+│   ├── animation/
+│   │   └── AnimationClip.js      # Core animation classes
+│   ├── core/
+│   │   └── OwenAnimationContext.js # Main system controller
+│   ├── factories/
+│   │   └── OwenSystemFactory.js  # System factory
+│   ├── loaders/
+│   │   └── AnimationLoader.js    # Animation loading interfaces
+│   └── states/
+│       ├── StateHandler.js       # Base state handler
+│       ├── StateFactory.js       # State factory
+│       ├── WaitStateHandler.js   # Wait state implementation
+│       ├── ReactStateHandler.js  # React state implementation
+│       ├── TypeStateHandler.js   # Type state implementation
+│       └── SleepStateHandler.js  # Sleep state implementation
+├── examples/
+│   ├── index.html        # Demo HTML page
+│   └── basic-demo.js     # Basic usage example
+├── package.json
+├── vite.config.js
+├── jsdoc.config.json
+└── README.md
+```
 
-2. **Emotional State Management** - Handles emotional transitions like angry typing or shocked reactions
+## 🛠️ Development
 
-3. **Nested Animation Support** - Supports the nested sequences described in your brief
+### Running the Development Server
 
-4. **Activity Monitoring** - Automatically transitions to sleep after inactivity
+```bash
+# Start the development server
+npm run dev
+```
 
-5. **Message Analysis** - Analyzes user messages to determine appropriate emotional responses
+This will start a Vite development server and open the basic demo at `http://localhost:3000`.
 
-6. **Clean Separation of Concerns:**
+### Building for Production
-   - Animation loading is separate from clip management
-   - State logic is isolated in individual handlers
-   - The main context orchestrates everything without tight coupling
 
-## **Usage:**
+```bash
+# Build the project
+npm run build
+```
 
-The system is designed to be easily extensible. You can:
+### Linting
 
-- Add new states by creating new handler classes
+```bash
-- Modify emotional analysis logic
+# Run ESLint
-- Swap out animation loaders for different formats
+npm run lint
-- Add new animation types by extending the factory
 
-The code follows the workflows described in your brief, handling the transitions between Wait → React → Type → Wait states, with proper emotional branching and nested animation support.
+# Fix linting issues automatically
+npm run lint:fix
+```
+
+### Generating Documentation
+
+```bash
+# Generate JSDoc documentation
+npm run docs
+```
+
+Documentation will be generated in the `docs/` directory.
+
+### Project Scripts
+
+-   `npm run dev` - Start development server
+-   `npm run build` - Build for production
+-   `npm run preview` - Preview production build
+-   `npm run lint` - Run StandardJS linting
+-   `npm run lint:fix` - Fix StandardJS issues
+-   `npm run docs` - Generate JSDoc documentation
+-   `npm run format` - Format code with Prettier
+
+## 🎮 Demo Controls
+
+The basic demo includes these keyboard controls:
+
+-   **1** - Transition to Wait state
+-   **2** - Transition to React state
+-   **3** - Transition to Type state
+-   **4** - Transition to Sleep state
+-   **Space** - Send random test message
+-   **Click** - Register user activity
+
+## 🔧 Configuration
+
+### Customizing Emotions
+
+You can extend the emotion system by modifying the message analysis:
+
+```javascript
+import { ReactStateHandler } from "owen";
+
+class CustomReactHandler extends ReactStateHandler {
+  analyzeMessageEmotion(message) {
+    // Your custom emotion analysis logic
+    if (message.includes("excited")) {
+      return Emotions.HAPPY;
+    }
+    return super.analyzeMessageEmotion(message);
+  }
+}
+```
+
+### Adjusting Timing
+
+Configure timing values in your application:
+
+```javascript
+import { Config } from "owen";
+
+// Modify default values
+Config.QUIRK_INTERVAL = 8000; // 8 seconds between quirks
+Config.INACTIVITY_TIMEOUT = 120000; // 2 minutes until sleep
+```
+
+## 🐛 Troubleshooting
+
+### Common Issues
+
+1.  **"Animation not found" errors**
+
+-   Ensure your 3D model contains animations with the correct naming convention
+-   Check that animations are properly exported in your GLTF file
+
+2.  **State transitions not working**
+
+-   Verify that transition animations exist in your model
+-   Check console for error messages about missing clips
+
+3.  **Performance issues**
+
+-   Ensure you're calling `owenSystem.update()` in your render loop
+-   Check that unused animations are properly disposed
+
+### Debug Mode
+
+Enable debug logging by opening browser console. The system logs state transitions and important events.
+
+## 🤝 Contributing
+
+1.  Fork the repository
+2.  Create a feature branch: `git checkout -b feature/new-feature`
+3.  Commit your changes: `git commit -am 'Add new feature'`
+4.  Push to the branch: `git push origin feature/new-feature`
+5.  Submit a pull request
+
+### Code Style
+
+-   Follow the existing ESLint configuration
+-   Add JSDoc comments for all public methods
+-   Write unit tests for new features
+-   Maintain the existing architecture patterns
+
+## 📄 License
+
+This project is dual-licensed under your choice of:
+
+-   **Open Source/Non-Commercial Use**: AGPL-3.0 - see the [LICENSE.AGPL](LICENSE.AGPL) file for details.
+-   **Commercial/Enterprise Use**: Commercial License - see the [LICENSE.COMMERCIAL](LICENSE.COMMERCIAL) file for details. Requires a paid commercial license. Please contact us at [email] for pricing and terms.
+
+### Quick Guide
+
+-   ✅ Personal/educational use → Use under AGPL-3.0
+-   ✅ Open source projects → Use under AGPL-3.0  
+-   ✅ Commercial/proprietary use → Purchase commercial license
+-   ❌ SaaS without source disclosure → Purchase commercial license
+
+## 🙏 Acknowledgments
+
+-   Built with [Three.js][Three.js]
+-   Inspired by modern character animation systems
+-   Uses clean architecture principles from Robert C. Martin
+
+<!-- LINK DEFINITIONS -->
+[Three.js]: https://threejs.org/ "Three.js - JavaScript 3D Library"

demo/comparison.html

@@ -0,0 +1,337 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scheme Comparison - Owen Animation System</title>
+    <link rel="stylesheet" href="./styles/main.css" />
+    <link rel="stylesheet" href="./styles/comparison.css" />
+  </head>
+  <body>
+    <header class="demo-header">
+      <div class="container">
+        <h1 class="logo">
+          <span class="logo-text">Owen</span>
+          <span class="logo-subtitle">Scheme Comparison</span>
+        </h1>
+        <nav class="demo-nav">
+          <a href="index.html" class="nav-link">Demo</a>
+          <a href="examples.html" class="nav-link">Examples</a>
+          <a href="comparison.html" class="nav-link active">Comparison</a>
+          <a href="interactive.html" class="nav-link">Interactive</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="comparison-main">
+      <div class="container">
+        <section class="comparison-hero">
+          <h2>Animation Naming Scheme Comparison</h2>
+          <p>
+            Compare the four supported naming schemes and understand when to use
+            each one.
+          </p>
+        </section>
+
+        <!-- Scheme Overview -->
+        <section class="schemes-overview">
+          <div class="scheme-cards">
+            <div class="scheme-card" data-scheme="legacy">
+              <h3>Legacy</h3>
+              <div class="scheme-pattern">snake_case</div>
+              <div class="scheme-description">
+                Traditional lowercase with underscores. Compatible with older
+                animation systems.
+              </div>
+              <div class="scheme-example">walk_forward</div>
+            </div>
+
+            <div class="scheme-card" data-scheme="artist">
+              <h3>Artist</h3>
+              <div class="scheme-pattern">PascalCase</div>
+              <div class="scheme-description">
+                Artist-friendly naming with clear capitalization. Intuitive for
+                content creators.
+              </div>
+              <div class="scheme-example">WalkForward</div>
+            </div>
+
+            <div class="scheme-card" data-scheme="hierarchical">
+              <h3>Hierarchical</h3>
+              <div class="scheme-pattern">dot.notation</div>
+              <div class="scheme-description">
+                Structured hierarchy with dots. Excellent for organizing complex
+                animation sets.
+              </div>
+              <div class="scheme-example">character.movement.walk.forward</div>
+            </div>
+
+            <div class="scheme-card" data-scheme="semantic">
+              <h3>Semantic</h3>
+              <div class="scheme-pattern">descriptive_names</div>
+              <div class="scheme-description">
+                Semantic meaning with underscores. Clear intent and
+                self-documenting.
+              </div>
+              <div class="scheme-example">character_walk_forward</div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Interactive Comparison Table -->
+        <section class="comparison-table-section">
+          <h3>Animation Name Comparison</h3>
+          <div class="table-controls">
+            <button class="filter-btn active" data-category="all">All</button>
+            <button class="filter-btn" data-category="movement">
+              Movement
+            </button>
+            <button class="filter-btn" data-category="combat">Combat</button>
+            <button class="filter-btn" data-category="idle">Idle</button>
+            <button class="filter-btn" data-category="interaction">
+              Interaction
+            </button>
+          </div>
+
+          <div class="comparison-table-container">
+            <table class="comparison-table" id="animation-comparison-table">
+              <thead>
+                <tr>
+                  <th>Animation Type</th>
+                  <th>Legacy</th>
+                  <th>Artist</th>
+                  <th>Hierarchical</th>
+                  <th>Semantic</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Table will be populated by JavaScript -->
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <!-- Detailed Comparison -->
+        <section class="detailed-comparison">
+          <h3>Detailed Analysis</h3>
+
+          <div class="comparison-aspects">
+            <div class="aspect-card">
+              <h4>🎯 Use Cases</h4>
+              <div class="aspect-content">
+                <div class="use-case">
+                  <strong>Legacy:</strong> Migrating from older systems,
+                  maintaining backward compatibility
+                </div>
+                <div class="use-case">
+                  <strong>Artist:</strong> Content creation workflows,
+                  artist-friendly tools
+                </div>
+                <div class="use-case">
+                  <strong>Hierarchical:</strong> Large animation libraries,
+                  complex character systems
+                </div>
+                <div class="use-case">
+                  <strong>Semantic:</strong> Modern development, clear
+                  documentation needs
+                </div>
+              </div>
+            </div>
+
+            <div class="aspect-card">
+              <h4>⚡ Performance</h4>
+              <div class="performance-metrics">
+                <div class="metric">
+                  <span class="metric-name">Lookup Speed:</span>
+                  <div class="metric-bars">
+                    <div class="metric-bar legacy" style="width: 95%">
+                      Legacy
+                    </div>
+                    <div class="metric-bar artist" style="width: 90%">
+                      Artist
+                    </div>
+                    <div class="metric-bar hierarchical" style="width: 85%">
+                      Hierarchical
+                    </div>
+                    <div class="metric-bar semantic" style="width: 92%">
+                      Semantic
+                    </div>
+                  </div>
+                </div>
+                <div class="metric">
+                  <span class="metric-name">Memory Usage:</span>
+                  <div class="metric-bars">
+                    <div class="metric-bar legacy" style="width: 88%">
+                      Legacy
+                    </div>
+                    <div class="metric-bar artist" style="width: 85%">
+                      Artist
+                    </div>
+                    <div class="metric-bar hierarchical" style="width: 75%">
+                      Hierarchical
+                    </div>
+                    <div class="metric-bar semantic" style="width: 82%">
+                      Semantic
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="aspect-card">
+              <h4>🛠️ Developer Experience</h4>
+              <div class="aspect-content">
+                <div class="dx-rating">
+                  <div class="dx-item">
+                    <span>Readability:</span>
+                    <div class="rating-stars">
+                      <div class="stars legacy">★★★☆☆</div>
+                      <div class="stars artist">★★★★☆</div>
+                      <div class="stars hierarchical">★★★★★</div>
+                      <div class="stars semantic">★★★★★</div>
+                    </div>
+                  </div>
+                  <div class="dx-item">
+                    <span>Autocomplete:</span>
+                    <div class="rating-stars">
+                      <div class="stars legacy">★★★☆☆</div>
+                      <div class="stars artist">★★★★☆</div>
+                      <div class="stars hierarchical">★★★★★</div>
+                      <div class="stars semantic">★★★★☆</div>
+                    </div>
+                  </div>
+                  <div class="dx-item">
+                    <span>Maintainability:</span>
+                    <div class="rating-stars">
+                      <div class="stars legacy">★★☆☆☆</div>
+                      <div class="stars artist">★★★☆☆</div>
+                      <div class="stars hierarchical">★★★★★</div>
+                      <div class="stars semantic">★★★★☆</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Migration Guide -->
+        <section class="migration-guide">
+          <h3>Migration Between Schemes</h3>
+          <div class="migration-matrix">
+            <div class="migration-card">
+              <h4>From Legacy</h4>
+              <ul>
+                <li>
+                  <strong>To Artist:</strong> Capitalize first letter and after
+                  underscores
+                </li>
+                <li>
+                  <strong>To Hierarchical:</strong> Replace underscores with
+                  dots, add category prefixes
+                </li>
+                <li>
+                  <strong>To Semantic:</strong> Add descriptive prefixes
+                  (character_, ui_, effect_)
+                </li>
+              </ul>
+            </div>
+
+            <div class="migration-card">
+              <h4>From Artist</h4>
+              <ul>
+                <li>
+                  <strong>To Legacy:</strong> Convert to lowercase, add
+                  underscores before capitals
+                </li>
+                <li>
+                  <strong>To Hierarchical:</strong> Split on capitals, join with
+                  dots, add categories
+                </li>
+                <li>
+                  <strong>To Semantic:</strong> Convert to lowercase with
+                  underscores, add prefixes
+                </li>
+              </ul>
+            </div>
+
+            <div class="migration-card">
+              <h4>Automated Tools</h4>
+              <ul>
+                <li>
+                  <strong>CLI Converter:</strong>
+                  <code>owen convert --from legacy --to semantic</code>
+                </li>
+                <li>
+                  <strong>Batch Processing:</strong>
+                  <code>owen batch-convert ./animations/</code>
+                </li>
+                <li>
+                  <strong>Validation:</strong>
+                  <code>owen validate --scheme semantic</code>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <!-- Best Practices -->
+        <section class="best-practices">
+          <h3>Best Practices & Recommendations</h3>
+          <div class="practices-grid">
+            <div class="practice-card">
+              <h4>🏢 Enterprise Projects</h4>
+              <p><strong>Recommended:</strong> Hierarchical or Semantic</p>
+              <ul>
+                <li>Clear organization structure</li>
+                <li>Easy to maintain and scale</li>
+                <li>Good IDE support</li>
+              </ul>
+            </div>
+
+            <div class="practice-card">
+              <h4>🎨 Artist Workflows</h4>
+              <p><strong>Recommended:</strong> Artist or Semantic</p>
+              <ul>
+                <li>Intuitive for content creators</li>
+                <li>Clear visual distinction</li>
+                <li>Good tool integration</li>
+              </ul>
+            </div>
+
+            <div class="practice-card">
+              <h4>🔄 Legacy Migration</h4>
+              <p><strong>Recommended:</strong> Gradual transition</p>
+              <ul>
+                <li>Start with Legacy scheme</li>
+                <li>Use auto-conversion features</li>
+                <li>Migrate incrementally</li>
+              </ul>
+            </div>
+
+            <div class="practice-card">
+              <h4>🚀 New Projects</h4>
+              <p><strong>Recommended:</strong> Semantic scheme</p>
+              <ul>
+                <li>Modern best practices</li>
+                <li>Self-documenting code</li>
+                <li>Future-proof design</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="demo-footer">
+      <div class="container">
+        <p>
+          &copy; 2024 Owen Animation System. Choose the scheme that fits your
+          workflow.
+        </p>
+      </div>
+    </footer>
+
+    <script type="module" src="./js/comparison.js"></script>
+  </body>
+</html>

demo/examples.html

@@ -0,0 +1,400 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Examples - Owen Animation System</title>
+    <link rel="stylesheet" href="./styles/main.css" />
+    <link rel="stylesheet" href="./styles/examples.css" />
+  </head>
+  <body>
+    <header class="demo-header">
+      <div class="container">
+        <h1 class="logo">
+          <span class="logo-text">Owen</span>
+          <span class="logo-subtitle">Examples</span>
+        </h1>
+        <nav class="demo-nav">
+          <a href="index.html" class="nav-link">Demo</a>
+          <a href="examples.html" class="nav-link active">Examples</a>
+          <a href="comparison.html" class="nav-link">Comparison</a>
+          <a href="interactive.html" class="nav-link">Interactive</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="examples-main">
+      <div class="container">
+        <section class="examples-hero">
+          <h2>Code Examples & Integration Patterns</h2>
+          <p>
+            Explore practical examples of using the Owen Animation System in
+            different frameworks and scenarios.
+          </p>
+        </section>
+
+        <section class="examples-grid">
+          <div class="example-category">
+            <h3>Framework Integration</h3>
+            <div class="example-cards">
+              <div class="example-card">
+                <h4>React Integration</h4>
+                <p>Complete React component with animation state management</p>
+                <a href="#react-example" class="example-link">View Example</a>
+              </div>
+              <div class="example-card">
+                <h4>Vue Integration</h4>
+                <p>Vue 3 composition API with reactive animation controls</p>
+                <a href="#vue-example" class="example-link">View Example</a>
+              </div>
+              <div class="example-card">
+                <h4>Node.js Server</h4>
+                <p>Server-side animation processing and validation</p>
+                <a href="#nodejs-example" class="example-link">View Example</a>
+              </div>
+            </div>
+          </div>
+
+          <div class="example-category">
+            <h3>Multi-Scheme Usage</h3>
+            <div class="example-cards">
+              <div class="example-card">
+                <h4>Scheme Conversion</h4>
+                <p>Converting animations between different naming schemes</p>
+                <a href="#conversion-example" class="example-link"
+                  >View Example</a
+                >
+              </div>
+              <div class="example-card">
+                <h4>Batch Processing</h4>
+                <p>Processing multiple animations with automated conversion</p>
+                <a href="#batch-example" class="example-link">View Example</a>
+              </div>
+              <div class="example-card">
+                <h4>Validation Pipeline</h4>
+                <p>Complete validation workflow with error handling</p>
+                <a href="#validation-example" class="example-link"
+                  >View Example</a
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="example-category">
+            <h3>Advanced Features</h3>
+            <div class="example-cards">
+              <div class="example-card">
+                <h4>Custom Schemes</h4>
+                <p>Creating and registering custom naming schemes</p>
+                <a href="#custom-example" class="example-link">View Example</a>
+              </div>
+              <div class="example-card">
+                <h4>Performance Optimization</h4>
+                <p>Optimizing animation loading and caching strategies</p>
+                <a href="#performance-example" class="example-link"
+                  >View Example</a
+                >
+              </div>
+              <div class="example-card">
+                <h4>Testing Integration</h4>
+                <p>Unit and integration testing for animation systems</p>
+                <a href="#testing-example" class="example-link">View Example</a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Detailed Examples -->
+        <section class="detailed-examples">
+          <div id="react-example" class="example-detail">
+            <h3>React Integration Example</h3>
+            <pre><code class="javascript">import React, { useEffect, useRef, useState } from 'react'
+import { OwenAnimationContext } from '@kjanat/owen'
+
+export function AnimatedCharacter({ characterModel, namingScheme = 'semantic' }) {
+  const containerRef = useRef()
+  const [animationContext, setAnimationContext] = useState(null)
+  const [currentAnimation, setCurrentAnimation] = useState('idle')
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  useEffect(() => {
+    // Initialize Owen Animation Context
+    const context = new OwenAnimationContext({
+      namingScheme,
+      autoConvert: true,
+      container: containerRef.current
+    })
+
+    context.loadModel(characterModel).then(() => {
+      setAnimationContext(context)
+    })
+
+    return () => context?.dispose()
+  }, [characterModel, namingScheme])
+
+  const playAnimation = async (animationName) => {
+    if (!animationContext) return
+
+    try {
+      await animationContext.playAnimation(animationName)
+      setCurrentAnimation(animationName)
+      setIsPlaying(true)
+    } catch (error) {
+      console.error('Failed to play animation:', error)
+    }
+  }
+
+  const stopAnimation = () => {
+    animationContext?.stopAnimation()
+    setIsPlaying(false)
+  }
+
+  return (
+    &lt;div className="animated-character"&gt;
+      &lt;div ref={containerRef} className="character-viewport" /&gt;
+
+      &lt;div className="animation-controls"&gt;
+        &lt;button onClick={() => playAnimation('walk_forward')}&gt;
+          Walk
+        &lt;/button&gt;
+        &lt;button onClick={() => playAnimation('character_run')}&gt;
+          Run
+        &lt;/button&gt;
+        &lt;button onClick={() => playAnimation('jump_high')}&gt;
+          Jump
+        &lt;/button&gt;
+        &lt;button onClick={stopAnimation}&gt;
+          Stop
+        &lt;/button&gt;
+      &lt;/div&gt;
+
+      &lt;div className="animation-info"&gt;
+        &lt;p&gt;Current: {currentAnimation}&lt;/p&gt;
+        &lt;p&gt;Status: {isPlaying ? 'Playing' : 'Stopped'}&lt;/p&gt;
+        &lt;p&gt;Scheme: {namingScheme}&lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  )
+}</code></pre>
+          </div>
+
+          <div id="conversion-example" class="example-detail">
+            <h3>Animation Name Conversion</h3>
+            <pre><code class="javascript">import { AnimationNameMapper } from '@kjanat/owen'
+
+// Initialize the mapper
+const mapper = new AnimationNameMapper()
+
+// Single animation conversion
+function convertAnimation(animationName, fromScheme, toScheme) {
+  try {
+    const converted = mapper.convert(animationName, toScheme, fromScheme)
+    console.log(`${fromScheme}: ${animationName} → ${toScheme}: ${converted}`)
+    return converted
+  } catch (error) {
+    console.error('Conversion failed:', error.message)
+    return null
+  }
+}
+
+// Batch conversion with validation
+function convertAnimationBatch(animations, fromScheme, toScheme) {
+  const results = {
+    successful: [],
+    failed: [],
+    conflicts: []
+  }
+
+  animations.forEach(anim => {
+    try {
+      const converted = mapper.convert(anim, toScheme, fromScheme)
+
+      // Check for conflicts
+      if (results.successful.includes(converted)) {
+        results.conflicts.push({
+          original: anim,
+          converted,
+          conflict: 'Duplicate target name'
+        })
+      } else {
+        results.successful.push({
+          original: anim,
+          converted,
+          schemes: { from: fromScheme, to: toScheme }
+        })
+      }
+    } catch (error) {
+      results.failed.push({
+        original: anim,
+        error: error.message,
+        suggestions: mapper.suggestCorrections(anim, fromScheme)
+      })
+    }
+  })
+
+  return results
+}
+
+// Example usage
+const legacyAnimations = [
+  'walk_forward', 'run_fast', 'jump_high',
+  'attack_sword', 'defend_shield', 'idle_breathing'
+]
+
+const conversionResults = convertAnimationBatch(
+  legacyAnimations,
+  'legacy',
+  'semantic'
+)
+
+console.log('Conversion Results:', conversionResults)</code></pre>
+          </div>
+
+          <div id="batch-example" class="example-detail">
+            <h3>Batch Processing Pipeline</h3>
+            <pre><code class="javascript">import { AnimationProcessor } from '@kjanat/owen'
+import fs from 'fs/promises'
+import path from 'path'
+
+class AnimationBatchProcessor {
+  constructor(options = {}) {
+    this.processor = new AnimationProcessor(options)
+    this.inputDir = options.inputDir || './assets/raw'
+    this.outputDir = options.outputDir || './assets/processed'
+    this.targetScheme = options.targetScheme || 'semantic'
+  }
+
+  async processDirectory() {
+    console.log('Starting batch animation processing...')
+
+    try {
+      // Scan input directory
+      const files = await this.scanAnimationFiles()
+      console.log(`Found ${files.length} animation files`)
+
+      // Process each file
+      const results = await Promise.allSettled(
+        files.map(file => this.processFile(file))
+      )
+
+      // Generate summary report
+      const summary = this.generateSummary(results)
+      await this.saveReport(summary)
+
+      return summary
+    } catch (error) {
+      console.error('Batch processing failed:', error)
+      throw error
+    }
+  }
+
+  async scanAnimationFiles() {
+    const files = []
+    const entries = await fs.readdir(this.inputDir, { withFileTypes: true })
+
+    for (const entry of entries) {
+      if (entry.isFile() && /\.(gltf|glb|fbx)$/i.test(entry.name)) {
+        files.push(path.join(this.inputDir, entry.name))
+      }
+    }
+
+    return files
+  }
+
+  async processFile(inputFile) {
+    const filename = path.basename(inputFile)
+    console.log(`Processing: ${filename}`)
+
+    try {
+      // Load and analyze animation
+      const animation = await this.processor.loadAnimation(inputFile)
+
+      // Convert naming scheme
+      const convertedName = this.processor.convertName(
+        animation.name,
+        this.targetScheme
+      )
+
+      // Apply optimizations
+      const optimized = await this.processor.optimize(animation)
+
+      // Save processed animation
+      const outputFile = path.join(this.outputDir, `${convertedName}.gltf`)
+      await this.processor.saveAnimation(optimized, outputFile)
+
+      return {
+        status: 'success',
+        inputFile,
+        outputFile,
+        originalName: animation.name,
+        convertedName,
+        size: optimized.size,
+        duration: optimized.duration
+      }
+    } catch (error) {
+      return {
+        status: 'error',
+        inputFile,
+        error: error.message
+      }
+    }
+  }
+
+  generateSummary(results) {
+    const successful = results.filter(r => r.value?.status === 'success')
+    const failed = results.filter(r => r.status === 'rejected' || r.value?.status === 'error')
+
+    return {
+      timestamp: new Date().toISOString(),
+      total: results.length,
+      successful: successful.length,
+      failed: failed.length,
+      successRate: (successful.length / results.length * 100).toFixed(2),
+      details: {
+        successful: successful.map(r => r.value),
+        failed: failed.map(r => ({
+          file: r.value?.inputFile || 'unknown',
+          error: r.value?.error || r.reason
+        }))
+      }
+    }
+  }
+
+  async saveReport(summary) {
+    const reportPath = path.join(this.outputDir, 'processing-report.json')
+    await fs.mkdir(path.dirname(reportPath), { recursive: true })
+    await fs.writeFile(reportPath, JSON.stringify(summary, null, 2))
+    console.log(`Report saved: ${reportPath}`)
+  }
+}
+
+// Usage
+const processor = new AnimationBatchProcessor({
+  inputDir: './assets/blender-exports',
+  outputDir: './assets/animations',
+  targetScheme: 'semantic'
+})
+
+processor.processDirectory().then(summary => {
+  console.log('Processing complete:', summary)
+}).catch(error => {
+  console.error('Processing failed:', error)
+  process.exit(1)
+})</code></pre>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="demo-footer">
+      <div class="container">
+        <p>
+          &copy; 2024 Owen Animation System. All examples are MIT licensed for
+          educational use.
+        </p>
+      </div>
+    </footer>
+
+    <script type="module" src="./js/examples.js"></script>
+  </body>
+</html>

demo/index.html

@@ -0,0 +1,311 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Owen Animation System - Interactive Demo</title>
+    <meta
+      name="description"
+      content="Interactive demonstration of the Owen Animation System with multi-scheme naming support"
+    />
+
+    <!-- Preload critical resources -->
+    <link rel="preload" href="./styles/main.css" as="style" />
+    <link rel="preload" href="./js/demo.js" as="script" />
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="./styles/main.css" />
+    <link rel="stylesheet" href="./styles/demo.css" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+  </head>
+  <body>
+    <!-- Header -->
+    <header class="demo-header">
+      <div class="container">
+        <h1 class="logo">
+          <span class="logo-text">Owen</span>
+          <span class="logo-subtitle">Animation System</span>
+        </h1>
+        <nav class="demo-nav">
+          <a href="index.html" class="nav-link active">Demo</a>
+          <a href="examples.html" class="nav-link">Examples</a>
+          <a href="comparison.html" class="nav-link">Comparison</a>
+          <a href="interactive.html" class="nav-link">Interactive</a>
+        </nav>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="demo-main">
+      <div class="container">
+        <!-- Hero Section -->
+        <section class="hero-section">
+          <div class="hero-content">
+            <h2>Multi-Scheme Animation Naming</h2>
+            <p>
+              Experience the power of flexible animation naming with support for
+              Legacy, Artist, Hierarchical, and Semantic schemes.
+            </p>
+
+            <div class="hero-actions">
+              <button id="start-demo" class="btn btn-primary">
+                Start Interactive Demo
+              </button>
+              <a href="https://github.com/kjanat/Owen" class="btn btn-secondary"
+                >View on GitHub</a
+              >
+            </div>
+          </div>
+
+          <div class="hero-visual">
+            <canvas id="demo-canvas" width="600" height="400"></canvas>
+            <div class="demo-controls">
+              <div class="control-group">
+                <label for="naming-scheme">Naming Scheme:</label>
+                <select id="naming-scheme">
+                  <option value="semantic">Semantic (default)</option>
+                  <option value="hierarchical">Hierarchical</option>
+                  <option value="artist">Artist</option>
+                  <option value="legacy">Legacy</option>
+                </select>
+              </div>
+
+              <div class="control-group">
+                <label for="animation-select">Animation:</label>
+                <select id="animation-select">
+                  <option value="">Select an animation...</option>
+                </select>
+              </div>
+
+              <div class="control-group">
+                <button id="play-animation" class="btn btn-small" disabled>
+                  Play
+                </button>
+                <button id="pause-animation" class="btn btn-small" disabled>
+                  Pause
+                </button>
+                <button id="stop-animation" class="btn btn-small" disabled>
+                  Stop
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="features-section">
+          <h3>Key Features</h3>
+          <div class="features-grid">
+            <div class="feature-card">
+              <div class="feature-icon">🎯</div>
+              <h4>Multi-Scheme Support</h4>
+              <p>
+                Seamlessly work with Legacy, Artist, Hierarchical, and Semantic
+                naming schemes in the same project.
+              </p>
+            </div>
+
+            <div class="feature-card">
+              <div class="feature-icon">🔄</div>
+              <h4>Automatic Conversion</h4>
+              <p>
+                Convert animation names between schemes automatically with
+                built-in validation and error handling.
+              </p>
+            </div>
+
+            <div class="feature-card">
+              <div class="feature-icon">⚡</div>
+              <h4>Performance Optimized</h4>
+              <p>
+                Efficient caching and lazy loading ensure smooth performance
+                even with large animation libraries.
+              </p>
+            </div>
+
+            <div class="feature-card">
+              <div class="feature-icon">🛠️</div>
+              <h4>Developer Tools</h4>
+              <p>
+                Comprehensive CLI tools, validation scripts, and documentation
+                generators for streamlined workflows.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Live Demo Section -->
+        <section class="live-demo-section">
+          <h3>Live Animation Conversion</h3>
+          <div class="conversion-demo">
+            <div class="input-section">
+              <label for="input-animation">Enter Animation Name:</label>
+              <input
+                type="text"
+                id="input-animation"
+                placeholder="e.g., character_walk_forward"
+              />
+
+              <label for="input-scheme">Current Scheme:</label>
+              <select id="input-scheme">
+                <option value="semantic">Semantic</option>
+                <option value="hierarchical">Hierarchical</option>
+                <option value="artist">Artist</option>
+                <option value="legacy">Legacy</option>
+              </select>
+            </div>
+
+            <div class="conversion-results">
+              <h4>Converted Names:</h4>
+              <div class="scheme-results">
+                <div class="scheme-result">
+                  <strong>Legacy:</strong> <span id="result-legacy">-</span>
+                </div>
+                <div class="scheme-result">
+                  <strong>Artist:</strong> <span id="result-artist">-</span>
+                </div>
+                <div class="scheme-result">
+                  <strong>Hierarchical:</strong>
+                  <span id="result-hierarchical">-</span>
+                </div>
+                <div class="scheme-result">
+                  <strong>Semantic:</strong> <span id="result-semantic">-</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Code Examples Section -->
+        <section class="code-examples-section">
+          <h3>Usage Examples</h3>
+          <div class="code-tabs">
+            <button class="tab-button active" data-tab="basic">
+              Basic Usage
+            </button>
+            <button class="tab-button" data-tab="conversion">
+              Name Conversion
+            </button>
+            <button class="tab-button" data-tab="validation">Validation</button>
+          </div>
+
+          <div class="tab-content">
+            <div id="basic-tab" class="tab-pane active">
+              <pre><code class="javascript">import { OwenAnimationContext } from '@kjanat/owen'
+
+// Initialize with semantic naming scheme
+const animationContext = new OwenAnimationContext({
+  namingScheme: 'semantic',
+  autoConvert: true
+})
+
+// Play an animation
+await animationContext.playAnimation('character_walk_forward')
+
+// The system automatically handles scheme conversions
+await animationContext.playAnimation('CharacterWalkForward') // Artist scheme</code></pre>
+            </div>
+
+            <div id="conversion-tab" class="tab-pane">
+              <pre><code class="javascript">import { AnimationNameMapper } from '@kjanat/owen'
+
+const mapper = new AnimationNameMapper()
+
+// Convert between schemes
+const semanticName = mapper.convert('CharacterWalkForward', 'semantic')
+// Result: 'character_walk_forward'
+
+const hierarchicalName = mapper.convert('walk_forward', 'hierarchical')
+// Result: 'character.movement.walk.forward'
+
+// Batch conversion
+const animations = ['jump', 'run', 'idle']
+const converted = mapper.convertBatch(animations, 'legacy', 'artist')
+// Result: ['Jump', 'Run', 'Idle']</code></pre>
+            </div>
+
+            <div id="validation-tab" class="tab-pane">
+              <pre><code class="javascript">import { AnimationValidator } from '@kjanat/owen'
+
+const validator = new AnimationValidator()
+
+// Validate animation name for specific scheme
+const isValid = validator.validate('character_walk_forward', 'semantic')
+// Result: true
+
+// Get validation details
+const validation = validator.validateDetailed('InvalidName123', 'semantic')
+console.log(validation.errors) // Array of validation errors
+console.log(validation.suggestions) // Suggested corrections</code></pre>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="demo-footer">
+      <div class="container">
+        <div class="footer-content">
+          <div class="footer-section">
+            <h4>Owen Animation System</h4>
+            <p>
+              A comprehensive Three.js animation system with multi-scheme naming
+              support.
+            </p>
+          </div>
+
+          <div class="footer-section">
+            <h4>Documentation</h4>
+            <ul>
+              <li>
+                <a href="../docs/ANIMATION_SYSTEM.md">Animation System Guide</a>
+              </li>
+              <li><a href="../docs/API_REFERENCE.md">API Reference</a></li>
+              <li><a href="../docs/MIGRATION_GUIDE.md">Migration Guide</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-section">
+            <h4>Examples</h4>
+            <ul>
+              <li><a href="../examples/basic/README.md">Basic Usage</a></li>
+              <li>
+                <a href="../examples/react/README.md">React Integration</a>
+              </li>
+              <li><a href="../examples/vue/README.md">Vue Integration</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-section">
+            <h4>Links</h4>
+            <ul>
+              <li>
+                <a href="https://github.com/kjanat/Owen">GitHub Repository</a>
+              </li>
+              <li>
+                <a href="https://gitea.kajkowalski.nl/kjanat/Owen"
+                  >Gitea Repository</a
+                >
+              </li>
+              <li><a href="https://semver.org/">Semantic Versioning</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="footer-bottom">
+          <p>
+            &copy; 2024 Kaj "kjanat" Kowalski. Licensed under AGPL-3.0-only OR
+            LicenseRef-Commercial.
+          </p>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script type="module" src="./js/demo.js"></script>
+    <script type="module" src="./js/animation-demo.js"></script>
+  </body>
+</html>

demo/interactive.html

@@ -0,0 +1,306 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Interactive Playground - Owen Animation System</title>
+    <link rel="stylesheet" href="./styles/main.css" />
+    <link rel="stylesheet" href="./styles/interactive.css" />
+  </head>
+  <body>
+    <header class="demo-header">
+      <div class="container">
+        <h1 class="logo">
+          <span class="logo-text">Owen</span>
+          <span class="logo-subtitle">Interactive Playground</span>
+        </h1>
+        <nav class="demo-nav">
+          <a href="index.html" class="nav-link">Demo</a>
+          <a href="examples.html" class="nav-link">Examples</a>
+          <a href="comparison.html" class="nav-link">Comparison</a>
+          <a href="interactive.html" class="nav-link active">Interactive</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="interactive-main">
+      <div class="container">
+        <section class="playground-hero">
+          <h2>Interactive Animation Playground</h2>
+          <p>
+            Experiment with the Owen Animation System in real-time. Try
+            different schemes, test conversions, and see the results instantly.
+          </p>
+        </section>
+
+        <div class="playground-layout">
+          <!-- Sidebar Controls -->
+          <aside class="playground-sidebar">
+            <div class="control-section">
+              <h3>Character Model</h3>
+              <select id="model-select">
+                <option value="basic-character">Basic Character</option>
+                <option value="detailed-character">Detailed Character</option>
+                <option value="robot-character">Robot Character</option>
+              </select>
+              <button id="load-model" class="btn btn-small">Load Model</button>
+            </div>
+
+            <div class="control-section">
+              <h3>Naming Scheme</h3>
+              <div class="scheme-selector">
+                <label class="scheme-option">
+                  <input type="radio" name="scheme" value="legacy" />
+                  <span>Legacy (snake_case)</span>
+                </label>
+                <label class="scheme-option">
+                  <input type="radio" name="scheme" value="artist" />
+                  <span>Artist (PascalCase)</span>
+                </label>
+                <label class="scheme-option">
+                  <input type="radio" name="scheme" value="hierarchical" />
+                  <span>Hierarchical (dot.notation)</span>
+                </label>
+                <label class="scheme-option">
+                  <input type="radio" name="scheme" value="semantic" checked />
+                  <span>Semantic (descriptive_names)</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="control-section">
+              <h3>Available Animations</h3>
+              <div id="animation-list" class="animation-list">
+                <!-- Populated by JavaScript -->
+              </div>
+            </div>
+
+            <div class="control-section">
+              <h3>Playback Controls</h3>
+              <div class="playback-controls">
+                <button id="play-btn" class="btn btn-primary">Play</button>
+                <button id="pause-btn" class="btn">Pause</button>
+                <button id="stop-btn" class="btn">Stop</button>
+              </div>
+
+              <div class="playback-options">
+                <label>
+                  <input type="checkbox" id="loop-animation" checked />
+                  Loop Animation
+                </label>
+                <label>
+                  <input
+                    type="range"
+                    id="animation-speed"
+                    min="0.1"
+                    max="3"
+                    step="0.1"
+                    value="1"
+                  />
+                  Speed: <span id="speed-value">1.0x</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="control-section">
+              <h3>Conversion Tool</h3>
+              <div class="conversion-tool">
+                <input
+                  type="text"
+                  id="conversion-input"
+                  placeholder="Enter animation name..."
+                />
+                <select id="source-scheme">
+                  <option value="legacy">From Legacy</option>
+                  <option value="artist">From Artist</option>
+                  <option value="hierarchical">From Hierarchical</option>
+                  <option value="semantic">From Semantic</option>
+                </select>
+                <button id="convert-btn" class="btn btn-small">Convert</button>
+              </div>
+              <div id="conversion-results" class="conversion-results">
+                <!-- Results will be displayed here -->
+              </div>
+            </div>
+          </aside>
+
+          <!-- Main Viewport -->
+          <div class="playground-viewport">
+            <div class="viewport-header">
+              <h3>Animation Viewport</h3>
+              <div class="viewport-controls">
+                <button id="fullscreen-btn" class="btn btn-small">
+                  Fullscreen
+                </button>
+                <button id="reset-camera" class="btn btn-small">
+                  Reset Camera
+                </button>
+              </div>
+            </div>
+
+            <div class="viewport-container">
+              <canvas id="animation-canvas"></canvas>
+              <div class="viewport-overlay">
+                <div id="loading-indicator" class="loading-indicator">
+                  <div class="spinner"></div>
+                  <p>Loading model...</p>
+                </div>
+
+                <div id="animation-info" class="animation-info">
+                  <div class="info-item">
+                    <span class="label">Current Animation:</span>
+                    <span id="current-animation">None</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="label">Duration:</span>
+                    <span id="animation-duration">0s</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="label">Progress:</span>
+                    <div class="progress-bar">
+                      <div id="progress-fill" class="progress-fill"></div>
+                    </div>
+                    <span id="progress-time">0.0s</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Code Generator -->
+        <section class="code-generator">
+          <h3>Generated Code</h3>
+          <p>
+            See the actual code that would be used to implement your current
+            configuration:
+          </p>
+
+          <div class="code-tabs">
+            <button class="code-tab active" data-tab="javascript">
+              JavaScript
+            </button>
+            <button class="code-tab" data-tab="react">React</button>
+            <button class="code-tab" data-tab="vue">Vue</button>
+          </div>
+
+          <div class="code-content">
+            <div id="javascript-code" class="code-panel active">
+              <pre><code id="js-code-output">// Configure your naming scheme and load animations
+// Code will be generated based on your selections above</code></pre>
+              <button class="copy-code-btn" data-target="js-code-output">
+                Copy Code
+              </button>
+            </div>
+
+            <div id="react-code" class="code-panel">
+              <pre><code id="react-code-output">// React component implementation
+// Code will be generated based on your selections above</code></pre>
+              <button class="copy-code-btn" data-target="react-code-output">
+                Copy Code
+              </button>
+            </div>
+
+            <div id="vue-code" class="code-panel">
+              <pre><code id="vue-code-output">// Vue component implementation
+// Code will be generated based on your selections above</code></pre>
+              <button class="copy-code-btn" data-target="vue-code-output">
+                Copy Code
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- Performance Monitor -->
+        <section class="performance-monitor">
+          <h3>Performance Monitor</h3>
+          <div class="performance-grid">
+            <div class="performance-metric">
+              <h4>Frame Rate</h4>
+              <div class="metric-value" id="fps-counter">60 FPS</div>
+              <div class="metric-chart" id="fps-chart"></div>
+            </div>
+
+            <div class="performance-metric">
+              <h4>Memory Usage</h4>
+              <div class="metric-value" id="memory-usage">0 MB</div>
+              <div class="metric-chart" id="memory-chart"></div>
+            </div>
+
+            <div class="performance-metric">
+              <h4>Animation Cache</h4>
+              <div class="metric-value" id="cache-stats">0 / 0</div>
+              <div class="cache-info">
+                <span>Cached: <span id="cached-count">0</span></span>
+                <span>Total: <span id="total-count">0</span></span>
+              </div>
+            </div>
+
+            <div class="performance-metric">
+              <h4>Conversion Time</h4>
+              <div class="metric-value" id="conversion-time">0ms</div>
+              <div class="time-breakdown">
+                <span>Avg: <span id="avg-time">0ms</span></span>
+                <span>Max: <span id="max-time">0ms</span></span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Experiments Section -->
+        <section class="experiments-section">
+          <h3>Experiments & Tests</h3>
+          <div class="experiments-grid">
+            <div class="experiment-card">
+              <h4>🚀 Stress Test</h4>
+              <p>Load multiple animations and test performance</p>
+              <button id="stress-test-btn" class="btn">Run Stress Test</button>
+              <div id="stress-test-results" class="test-results"></div>
+            </div>
+
+            <div class="experiment-card">
+              <h4>🔄 Conversion Benchmark</h4>
+              <p>Benchmark animation name conversion performance</p>
+              <button id="conversion-benchmark-btn" class="btn">
+                Run Benchmark
+              </button>
+              <div id="conversion-benchmark-results" class="test-results"></div>
+            </div>
+
+            <div class="experiment-card">
+              <h4>📊 Scheme Analysis</h4>
+              <p>Analyze and compare naming scheme efficiency</p>
+              <button id="scheme-analysis-btn" class="btn">
+                Analyze Schemes
+              </button>
+              <div id="scheme-analysis-results" class="test-results"></div>
+            </div>
+
+            <div class="experiment-card">
+              <h4>💾 Memory Profiling</h4>
+              <p>Profile memory usage with different configurations</p>
+              <button id="memory-profile-btn" class="btn">
+                Profile Memory
+              </button>
+              <div id="memory-profile-results" class="test-results"></div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="demo-footer">
+      <div class="container">
+        <p>
+          &copy; 2024 Owen Animation System. Experiment freely and discover the
+          possibilities.
+        </p>
+      </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script type="module" src="./js/interactive.js"></script>
+    <script type="module" src="./js/playground.js"></script>
+    <script type="module" src="./js/performance-monitor.js"></script>
+  </body>
+</html>

demo/js/demo.js

@@ -0,0 +1,602 @@
+/**
+ * Owen Animation System Demo - Main JavaScript
+ *
+ * This file provides the interactive functionality for the demo pages.
+ * It demonstrates the core features of the Owen Animation System.
+ */
+
+// Import Owen Animation System (simulated for demo)
+// In a real implementation, this would import from the actual package
+const OwenDemo = {
+  // Mock AnimationNameMapper for demo purposes
+  AnimationNameMapper: class {
+    constructor () {
+      this.animations = {
+        legacy: [
+          'walk_forward', 'walk_backward', 'run_fast', 'run_slow',
+          'jump_high', 'jump_low', 'idle_breathing', 'idle_looking',
+          'attack_sword', 'attack_bow', 'defend_shield', 'defend_dodge',
+          'death_forward', 'death_backward', 'hurt_light', 'hurt_heavy',
+          'climb_up', 'climb_down', 'swim_forward', 'swim_idle'
+        ],
+        artist: [
+          'WalkForward', 'WalkBackward', 'RunFast', 'RunSlow',
+          'JumpHigh', 'JumpLow', 'IdleBreathing', 'IdleLooking',
+          'AttackSword', 'AttackBow', 'DefendShield', 'DefendDodge',
+          'DeathForward', 'DeathBackward', 'HurtLight', 'HurtHeavy',
+          'ClimbUp', 'ClimbDown', 'SwimForward', 'SwimIdle'
+        ],
+        hierarchical: [
+          'character.movement.walk.forward', 'character.movement.walk.backward',
+          'character.movement.run.fast', 'character.movement.run.slow',
+          'character.movement.jump.high', 'character.movement.jump.low',
+          'character.idle.breathing', 'character.idle.looking',
+          'character.combat.attack.sword', 'character.combat.attack.bow',
+          'character.combat.defend.shield', 'character.combat.defend.dodge',
+          'character.state.death.forward', 'character.state.death.backward',
+          'character.state.hurt.light', 'character.state.hurt.heavy',
+          'character.movement.climb.up', 'character.movement.climb.down',
+          'character.movement.swim.forward', 'character.movement.swim.idle'
+        ],
+        semantic: [
+          'character_walk_forward', 'character_walk_backward',
+          'character_run_fast', 'character_run_slow',
+          'character_jump_high', 'character_jump_low',
+          'character_idle_breathing', 'character_idle_looking',
+          'character_attack_sword', 'character_attack_bow',
+          'character_defend_shield', 'character_defend_dodge',
+          'character_death_forward', 'character_death_backward',
+          'character_hurt_light', 'character_hurt_heavy',
+          'character_climb_up', 'character_climb_down',
+          'character_swim_forward', 'character_swim_idle'
+        ]
+      }
+
+      // Create conversion mappings
+      this.conversionMap = this.createConversionMap()
+    }
+
+    createConversionMap () {
+      const map = {}
+      const schemes = Object.keys(this.animations)
+
+      schemes.forEach(scheme => {
+        map[scheme] = {}
+        schemes.forEach(targetScheme => {
+          map[scheme][targetScheme] = {}
+          this.animations[scheme].forEach((anim, index) => {
+            map[scheme][targetScheme][anim] = this.animations[targetScheme][index]
+          })
+        })
+      })
+
+      return map
+    }
+
+    getAllAnimationsByScheme (scheme) {
+      return this.animations[scheme] || []
+    }
+
+    convert (animationName, targetScheme, sourceScheme = null) {
+      // If no source scheme provided, try to detect it
+      if (!sourceScheme) {
+        sourceScheme = this.detectScheme(animationName)
+      }
+
+      if (!sourceScheme) {
+        throw new Error(`Unable to detect scheme for animation: ${animationName}`)
+      }
+
+      if (!this.conversionMap[sourceScheme] || !this.conversionMap[sourceScheme][targetScheme]) {
+        throw new Error(`Conversion from ${sourceScheme} to ${targetScheme} not supported`)
+      }
+
+      const converted = this.conversionMap[sourceScheme][targetScheme][animationName]
+      if (!converted) {
+        throw new Error(`Animation "${animationName}" not found in ${sourceScheme} scheme`)
+      }
+
+      return converted
+    }
+
+    detectScheme (animationName) {
+      for (const [scheme, animations] of Object.entries(this.animations)) {
+        if (animations.includes(animationName)) {
+          return scheme
+        }
+      }
+      return null
+    }
+
+    convertBatch (animations, sourceScheme, targetScheme) {
+      return animations.map(anim => {
+        try {
+          return {
+            original: anim,
+            converted: this.convert(anim, targetScheme, sourceScheme),
+            success: true
+          }
+        } catch (error) {
+          return {
+            original: anim,
+            error: error.message,
+            success: false
+          }
+        }
+      })
+    }
+
+    suggestCorrections (animationName, scheme) {
+      const animations = this.animations[scheme] || []
+      return animations.filter(anim =>
+        anim.toLowerCase().includes(animationName.toLowerCase()) ||
+        animationName.toLowerCase().includes(anim.toLowerCase())
+      ).slice(0, 3)
+    }
+  },
+
+  // Mock OwenAnimationContext for demo purposes
+  OwenAnimationContext: class {
+    constructor (options = {}) {
+      this.namingScheme = options.namingScheme || 'semantic'
+      this.autoConvert = options.autoConvert !== false
+      this.container = options.container
+      this.currentAnimation = null
+      this.isPlaying = false
+      this.mapper = new OwenDemo.AnimationNameMapper()
+    }
+
+    async loadModel (modelPath) {
+      // Simulate model loading
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      console.log('Model loaded:', modelPath)
+    }
+
+    async playAnimation (animationName) {
+      try {
+        // Convert animation name if needed
+        let targetName = animationName
+        if (this.autoConvert) {
+          const detectedScheme = this.mapper.detectScheme(animationName)
+          if (detectedScheme && detectedScheme !== this.namingScheme) {
+            targetName = this.mapper.convert(animationName, this.namingScheme, detectedScheme)
+          }
+        }
+
+        this.currentAnimation = targetName
+        this.isPlaying = true
+
+        console.log(`Playing animation: ${targetName} (original: ${animationName})`)
+
+        // Simulate animation playback
+        return new Promise(resolve => {
+          setTimeout(() => {
+            console.log(`Animation ${targetName} completed`)
+            resolve()
+          }, 2000)
+        })
+      } catch (error) {
+        console.error('Failed to play animation:', error)
+        throw error
+      }
+    }
+
+    stopAnimation () {
+      this.isPlaying = false
+      this.currentAnimation = null
+      console.log('Animation stopped')
+    }
+
+    dispose () {
+      this.stopAnimation()
+      console.log('Animation context disposed')
+    }
+  }
+}
+
+// Demo Application State
+const DemoState = {
+  currentScheme: 'semantic',
+  selectedAnimation: null,
+  animationContext: null,
+  mapper: new OwenDemo.AnimationNameMapper(),
+
+  init () {
+    this.setupEventListeners()
+    this.updateAnimationList()
+    this.setupConversionTool()
+    this.setupTabSwitching()
+    this.initAnimationContext()
+  },
+
+  setupEventListeners () {
+    // Naming scheme change
+    const schemeSelect = document.getElementById('naming-scheme')
+    if (schemeSelect) {
+      schemeSelect.addEventListener('change', (e) => {
+        this.currentScheme = e.target.value
+        this.updateAnimationList()
+        this.updateCodeExamples()
+      })
+    }
+
+    // Animation selection
+    const animationSelect = document.getElementById('animation-select')
+    if (animationSelect) {
+      animationSelect.addEventListener('change', (e) => {
+        this.selectedAnimation = e.target.value
+        this.updatePlayButtons()
+      })
+    }
+
+    // Playback controls
+    const playBtn = document.getElementById('play-animation')
+    const pauseBtn = document.getElementById('pause-animation')
+    const stopBtn = document.getElementById('stop-animation')
+
+    if (playBtn) {
+      playBtn.addEventListener('click', () => this.playSelectedAnimation())
+    }
+    if (pauseBtn) {
+      pauseBtn.addEventListener('click', () => this.pauseAnimation())
+    }
+    if (stopBtn) {
+      stopBtn.addEventListener('click', () => this.stopAnimation())
+    }
+
+    // Start demo button
+    const startBtn = document.getElementById('start-demo')
+    if (startBtn) {
+      startBtn.addEventListener('click', () => this.startInteractiveDemo())
+    }
+  },
+
+  updateAnimationList () {
+    const select = document.getElementById('animation-select')
+    if (!select) return
+
+    const animations = this.mapper.getAllAnimationsByScheme(this.currentScheme)
+
+    select.innerHTML = '<option value="">Select an animation...</option>'
+    animations.forEach(anim => {
+      const option = document.createElement('option')
+      option.value = anim
+      option.textContent = anim
+      select.appendChild(option)
+    })
+
+    this.updatePlayButtons()
+  },
+
+  updatePlayButtons () {
+    const hasSelection = !!this.selectedAnimation
+    const playBtn = document.getElementById('play-animation')
+    const pauseBtn = document.getElementById('pause-animation')
+    const stopBtn = document.getElementById('stop-animation')
+
+    if (playBtn) playBtn.disabled = !hasSelection
+    if (pauseBtn) pauseBtn.disabled = !hasSelection
+    if (stopBtn) stopBtn.disabled = !hasSelection
+  },
+
+  setupConversionTool () {
+    const input = document.getElementById('input-animation')
+    const schemeSelect = document.getElementById('input-scheme')
+    const convertBtn = document.getElementById('convert-btn')
+
+    if (!input || !schemeSelect || !convertBtn) return
+
+    const updateConversion = () => {
+      const animationName = input.value.trim()
+      const sourceScheme = schemeSelect.value
+
+      if (!animationName) {
+        this.clearConversionResults()
+        return
+      }
+
+      this.performConversion(animationName, sourceScheme)
+    }
+
+    input.addEventListener('input', updateConversion)
+    schemeSelect.addEventListener('change', updateConversion)
+    convertBtn.addEventListener('click', updateConversion)
+  },
+
+  performConversion (animationName, sourceScheme) {
+    const results = {
+      legacy: '-',
+      artist: '-',
+      hierarchical: '-',
+      semantic: '-'
+    }
+
+    const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
+
+    schemes.forEach(targetScheme => {
+      try {
+        results[targetScheme] = this.mapper.convert(animationName, targetScheme, sourceScheme)
+      } catch (error) {
+        results[targetScheme] = `Error: ${error.message}`
+      }
+    })
+
+    this.displayConversionResults(results)
+  },
+
+  displayConversionResults (results) {
+    Object.entries(results).forEach(([scheme, result]) => {
+      const element = document.getElementById(`result-${scheme}`)
+      if (element) {
+        element.textContent = result
+        element.className = result.startsWith('Error:') ? 'error' : 'success'
+      }
+    })
+  },
+
+  clearConversionResults () {
+    const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
+    schemes.forEach(scheme => {
+      const element = document.getElementById(`result-${scheme}`)
+      if (element) {
+        element.textContent = '-'
+        element.className = ''
+      }
+    })
+  },
+
+  setupTabSwitching () {
+    const tabButtons = document.querySelectorAll('.tab-button')
+    const tabPanes = document.querySelectorAll('.tab-pane')
+
+    tabButtons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        const targetTab = e.target.dataset.tab
+
+        // Update button states
+        tabButtons.forEach(btn => btn.classList.remove('active'))
+        e.target.classList.add('active')
+
+        // Update pane visibility
+        tabPanes.forEach(pane => {
+          pane.classList.remove('active')
+          if (pane.id === `${targetTab}-tab`) {
+            pane.classList.add('active')
+          }
+        })
+
+        this.updateCodeExamples()
+      })
+    })
+  },
+
+  updateCodeExamples () {
+    // Update code examples based on current scheme and selection
+    const jsOutput = document.getElementById('js-code-output')
+    const reactOutput = document.getElementById('react-code-output')
+    const vueOutput = document.getElementById('vue-code-output')
+
+    if (jsOutput) {
+      jsOutput.textContent = this.generateJavaScriptExample()
+    }
+    if (reactOutput) {
+      reactOutput.textContent = this.generateReactExample()
+    }
+    if (vueOutput) {
+      vueOutput.textContent = this.generateVueExample()
+    }
+  },
+
+  generateJavaScriptExample () {
+    const animation = this.selectedAnimation || 'character_walk_forward'
+    return `import { OwenAnimationContext } from '@kjanat/owen'
+
+// Initialize with ${this.currentScheme} naming scheme
+const animationContext = new OwenAnimationContext({
+  namingScheme: '${this.currentScheme}',
+  autoConvert: true
+})
+
+// Load your character model
+await animationContext.loadModel('./path/to/character.gltf')
+
+// Play animation using ${this.currentScheme} scheme
+await animationContext.playAnimation('${animation}')
+
+// The system automatically handles conversions between schemes
+// You can use any naming scheme and it will convert automatically`
+  },
+
+  generateReactExample () {
+    const animation = this.selectedAnimation || 'character_walk_forward'
+    return `import React, { useEffect, useRef, useState } from 'react'
+import { OwenAnimationContext } from '@kjanat/owen'
+
+export function AnimatedCharacter() {
+  const containerRef = useRef()
+  const [animationContext, setAnimationContext] = useState(null)
+  const [currentAnimation, setCurrentAnimation] = useState('${animation}')
+
+  useEffect(() => {
+    const context = new OwenAnimationContext({
+      namingScheme: '${this.currentScheme}',
+      container: containerRef.current
+    })
+
+    context.loadModel('./character.gltf').then(() => {
+      setAnimationContext(context)
+    })
+
+    return () => context?.dispose()
+  }, [])
+
+  const playAnimation = async (animationName) => {
+    if (animationContext) {
+      await animationContext.playAnimation(animationName)
+      setCurrentAnimation(animationName)
+    }
+  }
+
+  return (
+    <div className="animated-character">
+      <div ref={containerRef} className="viewport" />
+      <button onClick={() => playAnimation('${animation}')}>
+        Play Animation
+      </button>
+    </div>
+  )
+}`
+  },
+
+  generateVueExample () {
+    const animation = this.selectedAnimation || 'character_walk_forward'
+    return `<template>
+  <div class="animated-character">
+    <div ref="viewport" class="viewport"></div>
+    <button @click="playAnimation('${animation}')">
+      Play Animation
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { OwenAnimationContext } from '@kjanat/owen'
+
+const viewport = ref(null)
+const animationContext = ref(null)
+const currentAnimation = ref('${animation}')
+
+onMounted(async () => {
+  const context = new OwenAnimationContext({
+    namingScheme: '${this.currentScheme}',
+    container: viewport.value
+  })
+
+  await context.loadModel('./character.gltf')
+  animationContext.value = context
+})
+
+onUnmounted(() => {
+  animationContext.value?.dispose()
+})
+
+const playAnimation = async (animationName) => {
+  if (animationContext.value) {
+    await animationContext.value.playAnimation(animationName)
+    currentAnimation.value = animationName
+  }
+}
+</script>`
+  },
+
+  async initAnimationContext () {
+    const canvas = document.getElementById('demo-canvas')
+    if (!canvas) return
+
+    this.animationContext = new OwenDemo.OwenAnimationContext({
+      namingScheme: this.currentScheme,
+      container: canvas
+    })
+
+    // Simulate model loading
+    try {
+      await this.animationContext.loadModel('basic-character.gltf')
+      console.log('Demo character loaded successfully')
+    } catch (error) {
+      console.error('Failed to load demo character:', error)
+    }
+  },
+
+  async playSelectedAnimation () {
+    if (!this.selectedAnimation || !this.animationContext) return
+
+    try {
+      await this.animationContext.playAnimation(this.selectedAnimation)
+    } catch (error) {
+      console.error('Failed to play animation:', error)
+      window.alert(`Failed to play animation: ${error.message}`)
+    }
+  },
+
+  pauseAnimation () {
+    // In a real implementation, this would pause the current animation
+    console.log('Animation paused')
+  },
+
+  stopAnimation () {
+    if (this.animationContext) {
+      this.animationContext.stopAnimation()
+    }
+  },
+
+  startInteractiveDemo () {
+    // Navigate to interactive page or start guided tour
+    if (window.location.pathname.includes('index.html') || window.location.pathname === '/') {
+      window.location.href = 'interactive.html'
+    } else {
+      // Already on a page with interactive features
+      this.scrollToSection('.live-demo-section')
+    }
+  },
+
+  scrollToSection (selector) {
+    const element = document.querySelector(selector)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+}
+
+// Copy code functionality
+function setupCodeCopying () {
+  document.querySelectorAll('.copy-code-btn').forEach(button => {
+    button.addEventListener('click', async (e) => {
+      const targetId = e.target.dataset.target
+      const codeElement = document.getElementById(targetId)
+
+      if (codeElement) {
+        try {
+          await navigator.clipboard.writeText(codeElement.textContent)
+
+          // Visual feedback
+          const originalText = e.target.textContent
+          e.target.textContent = 'Copied!'
+          e.target.style.background = 'var(--success-color)'
+
+          setTimeout(() => {
+            e.target.textContent = originalText
+            e.target.style.background = ''
+          }, 2000)
+        } catch (error) {
+          console.error('Failed to copy code:', error)
+          window.alert('Failed to copy code to clipboard')
+        }
+      }
+    })
+  })
+}
+
+// Initialize demo when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  DemoState.init()
+  setupCodeCopying()
+
+  // Add some visual feedback for interactions
+  document.addEventListener('click', (e) => {
+    if (e.target.classList.contains('btn')) {
+      e.target.style.transform = 'scale(0.98)'
+      setTimeout(() => {
+        e.target.style.transform = ''
+      }, 150)
+    }
+  })
+})
+
+// Export for use in other demo files
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { OwenDemo, DemoState }
+} else {
+  window.OwenDemo = OwenDemo
+  window.DemoState = DemoState
+}

demo/styles/comparison.css

@@ -0,0 +1,412 @@
+/* Comparison Page Specific Styles */
+
+.comparison-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.comparison-intro {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.comparison-intro h1 {
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+}
+
+.comparison-intro p {
+  color: var(--text-secondary);
+  font-size: 1.125rem;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.scheme-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.scheme-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.scheme-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: var(--scheme-accent, var(--accent-color));
+}
+
+.scheme-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.scheme-card.legacy {
+  --scheme-accent: #8b5cf6;
+}
+.scheme-card.artist {
+  --scheme-accent: #06b6d4;
+}
+.scheme-card.hierarchical {
+  --scheme-accent: #10b981;
+}
+.scheme-card.semantic {
+  --scheme-accent: #f59e0b;
+}
+
+.scheme-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.scheme-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: var(--scheme-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.scheme-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.scheme-description {
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.scheme-example {
+  background: var(--bg-code);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 0.75rem;
+  font-family: "Fira Code", monospace;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+}
+
+.scheme-pros {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.scheme-pros li {
+  padding: 0.25rem 0;
+  padding-left: 1.5rem;
+  position: relative;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.scheme-pros li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--success-text);
+  font-weight: bold;
+}
+
+.comparison-table-section {
+  margin: 3rem 0;
+}
+
+.table-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.table-filter {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+}
+
+.table-filter:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.table-filter.active {
+  background: var(--accent-color);
+  color: white;
+  border-color: var(--accent-color);
+}
+
+.search-input {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  min-width: 200px;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-color-alpha);
+}
+
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.comparison-table th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+  color: var(--text-primary);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.comparison-table td {
+  color: var(--text-secondary);
+  font-family: "Fira Code", monospace;
+  font-size: 0.875rem;
+}
+
+.comparison-table tbody tr:hover {
+  background: var(--bg-hover);
+}
+
+.comparison-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.scheme-label {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.scheme-label.legacy {
+  background: #8b5cf6;
+}
+.scheme-label.artist {
+  background: #06b6d4;
+}
+.scheme-label.hierarchical {
+  background: #10b981;
+}
+.scheme-label.semantic {
+  background: #f59e0b;
+}
+
+.conversion-demo {
+  margin: 3rem 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 2rem;
+}
+
+.conversion-controls {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.scheme-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.scheme-selector label {
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+
+.scheme-select {
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-radius: 6px;
+  font-size: 0.875rem;
+}
+
+.conversion-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-color);
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.animation-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-radius: 6px;
+  font-family: "Fira Code", monospace;
+  font-size: 0.875rem;
+}
+
+.conversion-result {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.result-label {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.result-value {
+  font-family: "Fira Code", monospace;
+  font-size: 1rem;
+  color: var(--text-primary);
+  background: var(--bg-code);
+  padding: 0.75rem;
+  border-radius: 4px;
+  word-break: break-all;
+}
+
+.performance-comparison {
+  margin: 3rem 0;
+}
+
+.performance-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.performance-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.performance-metric {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--accent-color);
+  margin-bottom: 0.5rem;
+}
+
+.performance-label {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.no-results {
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+@media (max-width: 768px) {
+  .comparison-container {
+    padding: 1rem;
+  }
+
+  .scheme-overview {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .table-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-input {
+    min-width: auto;
+  }
+
+  .comparison-table {
+    font-size: 0.75rem;
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: 0.75rem 0.5rem;
+  }
+
+  .conversion-controls {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .conversion-arrow {
+    transform: rotate(90deg);
+  }
+
+  .performance-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

demo/styles/demo.css

@@ -0,0 +1,302 @@
+/* Demo-specific styles */
+
+/* Hero Section */
+.hero-section {
+  padding: 4rem 0;
+  background: linear-gradient(
+    135deg,
+    var(--bg-secondary) 0%,
+    var(--bg-tertiary) 100%
+  );
+  margin-bottom: 3rem;
+}
+
+.hero-content {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.hero-content h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.hero-content p {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.hero-visual {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+#demo-canvas {
+  width: 100%;
+  height: 400px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--bg-primary);
+}
+
+.demo-controls {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.control-group {
+  margin-bottom: 1.5rem;
+}
+
+.control-group:last-child {
+  margin-bottom: 0;
+}
+
+.control-group label {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.control-group .btn {
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Features Section */
+.features-section {
+  padding: 3rem 0;
+  margin-bottom: 3rem;
+}
+
+.features-section h3 {
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  color: var(--text-primary);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.feature-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 2rem;
+  text-align: center;
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h4 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.feature-card p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* Live Demo Section */
+.live-demo-section {
+  padding: 3rem 0;
+  background: var(--bg-secondary);
+  border-radius: var(--border-radius);
+  margin-bottom: 3rem;
+}
+
+.live-demo-section h3 {
+  text-align: center;
+  font-size: 1.75rem;
+  margin-bottom: 2rem;
+  color: var(--text-primary);
+}
+
+.conversion-demo {
+  max-width: 800px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+.input-section {
+  background: var(--bg-primary);
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+
+.input-section label {
+  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+}
+
+.input-section label:first-child {
+  margin-top: 0;
+}
+
+.conversion-results {
+  background: var(--bg-primary);
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+
+.conversion-results h4 {
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.scheme-results {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.scheme-result {
+  padding: 0.75rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--border-radius);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+}
+
+.scheme-result strong {
+  color: var(--primary-color);
+  margin-right: 0.5rem;
+}
+
+/* Code Examples Section */
+.code-examples-section {
+  padding: 3rem 0;
+  margin-bottom: 3rem;
+}
+
+.code-examples-section h3 {
+  text-align: center;
+  font-size: 1.75rem;
+  margin-bottom: 2rem;
+  color: var(--text-primary);
+}
+
+.code-tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tab-button {
+  background: none;
+  border: none;
+  padding: 1rem 2rem;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.tab-button:hover {
+  color: var(--text-primary);
+}
+
+.tab-button.active {
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
+}
+
+.tab-content {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.tab-pane pre {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero-visual {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .conversion-demo {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .hero-content h2 {
+    font-size: 2rem;
+  }
+
+  .hero-content p {
+    font-size: 1rem;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .code-tabs {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .tab-button {
+    padding: 0.75rem 1.5rem;
+  }
+}

demo/styles/examples.css

@@ -0,0 +1,306 @@
+/* Examples Page Specific Styles */
+
+.examples-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.examples-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.example-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s ease;
+}
+
+.example-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.example-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.framework-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  font-size: 0.875rem;
+}
+
+.react-icon {
+  background: #61dafb;
+  color: #000;
+}
+.vue-icon {
+  background: #4fc08d;
+}
+.node-icon {
+  background: #339933;
+}
+.vanilla-icon {
+  background: #f7df1e;
+  color: #000;
+}
+.blender-icon {
+  background: #e87d0d;
+}
+
+.example-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.example-description {
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.code-example {
+  background: var(--bg-code);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.code-header {
+  background: var(--bg-tertiary);
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.code-language {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.copy-button {
+  background: none;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.copy-button.copied {
+  background: var(--success-bg);
+  color: var(--success-text);
+  border-color: var(--success-border);
+}
+
+.code-content {
+  padding: 1rem;
+  font-family: "Fira Code", "Monaco", "Consolas", monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text-primary);
+  overflow-x: auto;
+}
+
+.integration-steps {
+  margin-top: 1.5rem;
+}
+
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: var(--bg-tertiary);
+  border-radius: 8px;
+  border-left: 4px solid var(--accent-color);
+}
+
+.step-number {
+  background: var(--accent-color);
+  color: white;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: bold;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.step-content h4 {
+  margin: 0 0 0.5rem 0;
+  color: var(--text-primary);
+  font-size: 1rem;
+}
+
+.step-content p {
+  margin: 0;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.example-navigation {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.nav-filter {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+}
+
+.nav-filter:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.nav-filter.active {
+  background: var(--accent-color);
+  color: white;
+  border-color: var(--accent-color);
+}
+
+.features-list {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0;
+}
+
+.features-list li {
+  padding: 0.5rem 0;
+  padding-left: 1.5rem;
+  position: relative;
+  color: var(--text-secondary);
+}
+
+.features-list li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--success-text);
+  font-weight: bold;
+}
+
+.download-section {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: var(--bg-tertiary);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.download-links {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+.download-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--accent-color);
+  color: white;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.download-link:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+.error-boundary {
+  border: 2px dashed var(--error-border);
+  background: var(--error-bg);
+  color: var(--error-text);
+  padding: 1rem;
+  border-radius: 8px;
+  margin: 1rem 0;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .examples-container {
+    padding: 1rem;
+  }
+
+  .examples-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .example-card {
+    padding: 1rem;
+  }
+
+  .example-navigation {
+    gap: 0.5rem;
+  }
+
+  .nav-filter {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8rem;
+  }
+
+  .download-links {
+    flex-direction: column;
+  }
+
+  .step {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .step-number {
+    align-self: flex-start;
+  }
+}

demo/styles/interactive.css

@@ -0,0 +1,444 @@
+/* Interactive Playground Specific Styles */
+
+.interactive-container {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 2rem;
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "controls playground"
+    "results results";
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: auto 1fr auto;
+  gap: 2rem;
+  min-height: calc(100vh - 4rem);
+}
+
+.playground-header {
+  grid-area: header;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.playground-header h1 {
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+}
+
+.playground-header p {
+  color: var(--text-secondary);
+  font-size: 1.125rem;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.playground-controls {
+  grid-area: controls;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  height: fit-content;
+  box-shadow: var(--shadow-sm);
+}
+
+.controls-section {
+  margin-bottom: 2rem;
+}
+
+.controls-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.control-group {
+  margin-bottom: 1rem;
+}
+
+.control-label {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.control-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.control-input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-color-alpha);
+}
+
+.control-textarea {
+  min-height: 100px;
+  resize: vertical;
+  font-family: "Fira Code", monospace;
+}
+
+.scheme-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.scheme-button {
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.75rem;
+  text-align: center;
+  font-weight: 500;
+}
+
+.scheme-button:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.scheme-button.active {
+  background: var(--accent-color);
+  color: white;
+  border-color: var(--accent-color);
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.action-button {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--accent-color);
+  background: var(--accent-color);
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.action-button:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.action-button.secondary {
+  background: transparent;
+  color: var(--accent-color);
+}
+
+.action-button.secondary:hover {
+  background: var(--accent-color-alpha);
+}
+
+.action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.playground-main {
+  grid-area: playground;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+}
+
+.playground-tabs {
+  display: flex;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.playground-tab {
+  padding: 1rem 1.5rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+}
+
+.playground-tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.playground-tab.active {
+  color: var(--accent-color);
+  border-bottom-color: var(--accent-color);
+  background: var(--bg-secondary);
+}
+
+.playground-content {
+  flex: 1;
+  padding: 1.5rem;
+  overflow: auto;
+}
+
+.code-editor {
+  width: 100%;
+  height: 400px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-code);
+  color: var(--text-primary);
+  font-family: "Fira Code", monospace;
+  font-size: 0.875rem;
+  padding: 1rem;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.output-panel {
+  background: var(--bg-code);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1rem;
+  font-family: "Fira Code", monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  overflow: auto;
+  max-height: 400px;
+}
+
+.conversion-preview {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.preview-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.preview-item:last-child {
+  border-bottom: none;
+}
+
+.preview-input {
+  font-family: "Fira Code", monospace;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.preview-output {
+  font-family: "Fira Code", monospace;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.performance-monitor {
+  grid-area: results;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.monitor-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.monitor-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.monitor-value {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--accent-color);
+  margin-bottom: 0.5rem;
+}
+
+.monitor-label {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.status-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.status-indicator.success {
+  background: var(--success-color);
+}
+.status-indicator.warning {
+  background: var(--warning-color);
+}
+.status-indicator.error {
+  background: var(--error-color);
+}
+
+.error-message {
+  background: var(--error-bg);
+  color: var(--error-text);
+  border: 1px solid var(--error-border);
+  border-radius: 6px;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.success-message {
+  background: var(--success-bg);
+  color: var(--success-text);
+  border: 1px solid var(--success-border);
+  border-radius: 6px;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.loading-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-color);
+  border-top: 2px solid var(--accent-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.history-panel {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+}
+
+.history-item {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.history-item:hover {
+  background: var(--bg-hover);
+}
+
+.history-item:last-child {
+  border-bottom: none;
+}
+
+.history-input {
+  font-family: "Fira Code", monospace;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.history-meta {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 1024px) {
+  .interactive-container {
+    grid-template-areas:
+      "header"
+      "controls"
+      "playground"
+      "results";
+    grid-template-columns: 1fr;
+    padding: 1rem;
+  }
+
+  .playground-controls {
+    height: auto;
+  }
+
+  .scheme-buttons {
+    grid-template-columns: 1fr;
+  }
+
+  .monitor-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .playground-tabs {
+    overflow-x: auto;
+  }
+
+  .playground-tab {
+    padding: 0.75rem 1rem;
+    white-space: nowrap;
+  }
+
+  .code-editor {
+    height: 300px;
+  }
+
+  .monitor-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .action-buttons {
+    gap: 0.5rem;
+  }
+}

demo/styles/main.css

@@ -0,0 +1,472 @@
+/* Owen Animation System Demo - Main Styles */
+
+/* CSS Variables for consistent theming */
+:root {
+  --primary-color: #2563eb;
+  --primary-hover: #1d4ed8;
+  --secondary-color: #64748b;
+  --accent-color: #0ea5e9;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --text-primary: #1e293b;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+
+  --border-color: #e2e8f0;
+  --border-radius: 8px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+
+  --font-family:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono:
+    "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
+}
+
+/* Dark mode variables */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-tertiary: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --text-muted: #64748b;
+    --border-color: #334155;
+  }
+}
+
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family);
+  line-height: 1.6;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  transition: background-color 0.3s ease;
+}
+
+/* Container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Header */
+.demo-header {
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.demo-header .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.logo-text {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
+.logo-subtitle {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.demo-nav {
+  display: flex;
+  gap: 2rem;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: var(--text-secondary);
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius);
+  transition: all 0.2s ease;
+}
+
+.nav-link:hover {
+  color: var(--primary-color);
+  background-color: var(--bg-tertiary);
+}
+
+.nav-link.active {
+  color: var(--primary-color);
+  background-color: var(--primary-color);
+  color: white;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  gap: 0.5rem;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+}
+
+.btn-secondary {
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+  background-color: var(--bg-secondary);
+}
+
+.btn-small {
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* Cards */
+.card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+}
+
+/* Grid layouts */
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.grid-3 {
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.grid-4 {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* Code blocks */
+pre {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  background: var(--bg-tertiary);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Utility classes */
+.text-center {
+  text-align: center;
+}
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.mb-3 {
+  margin-bottom: 1rem;
+}
+.mb-4 {
+  margin-bottom: 1.5rem;
+}
+.mb-5 {
+  margin-bottom: 2rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.mt-3 {
+  margin-top: 1rem;
+}
+.mt-4 {
+  margin-top: 1.5rem;
+}
+.mt-5 {
+  margin-top: 2rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+.p-2 {
+  padding: 0.5rem;
+}
+.p-3 {
+  padding: 1rem;
+}
+.p-4 {
+  padding: 1.5rem;
+}
+.p-5 {
+  padding: 2rem;
+}
+
+.hidden {
+  display: none;
+}
+.visible {
+  display: block;
+}
+
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.slide-up {
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Loading spinner */
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border-color);
+  border-top: 2px solid var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Progress bar */
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: var(--bg-tertiary);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: var(--primary-color);
+  transition: width 0.3s ease;
+  width: 0%;
+}
+
+/* Footer */
+.demo-footer {
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  padding: 2rem 0;
+  margin-top: 4rem;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.footer-section h4 {
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-section li {
+  margin-bottom: 0.5rem;
+}
+
+.footer-section a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer-section a:hover {
+  color: var(--primary-color);
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 0.75rem;
+  }
+
+  .demo-header .container {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .demo-nav {
+    gap: 1rem;
+  }
+
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .demo-nav {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .nav-link {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+}

docs/animation_AnimationClip.js.html

@@ -0,0 +1,375 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: animation/AnimationClip.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: animation/AnimationClip.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Core animation classes for clip management and creation
+ * @module animation
+ */
+
+import * as THREE from 'three'
+import { ClipTypes, Config } from '../constants.js'
+
+/**
+ * Represents a single animation clip with metadata and Three.js action
+ * @class
+ */
+export class AnimationClip {
+  /**
+   * Create an animation clip
+   * @param {string} name - The name of the animation clip
+   * @param {THREE.AnimationClip} threeAnimation - The Three.js animation clip
+   * @param {Object} metadata - Parsed metadata from animation name
+   */
+  constructor (name, threeAnimation, metadata) {
+    /**
+     * The name of the animation clip
+     * @type {string}
+     */
+    this.name = name
+
+    /**
+     * The Three.js animation clip
+     * @type {THREE.AnimationClip}
+     */
+    this.animation = threeAnimation
+
+    /**
+     * Parsed metadata about the animation
+     * @type {Object}
+     */
+    this.metadata = metadata
+
+    /**
+     * The Three.js animation action
+     * @type {THREE.AnimationAction|null}
+     */
+    this.action = null
+
+    /**
+     * The animation mixer
+     * @type {THREE.AnimationMixer|null}
+     */
+    this.mixer = null
+  }
+
+  /**
+   * Create and configure a Three.js action for this clip
+   * @param {THREE.AnimationMixer} mixer - The animation mixer
+   * @returns {THREE.AnimationAction} The created action
+   */
+  createAction (mixer) {
+    this.mixer = mixer
+    this.action = mixer.clipAction(this.animation)
+
+    // Configure based on type
+    if (
+      this.metadata.type === ClipTypes.LOOP ||
+      this.metadata.type === ClipTypes.NESTED_LOOP
+    ) {
+      this.action.setLoop(THREE.LoopRepeat, Infinity)
+    } else {
+      this.action.setLoop(THREE.LoopOnce)
+      this.action.clampWhenFinished = true
+    }
+
+    return this.action
+  }
+
+  /**
+   * Play the animation with optional fade in
+   * @param {number} [fadeInDuration=0.3] - Fade in duration in seconds
+   * @returns {Promise&lt;void>} Promise that resolves when fade in completes
+   */
+  play (fadeInDuration = Config.DEFAULT_FADE_IN) {
+    if (this.action) {
+      this.action.reset()
+      this.action.fadeIn(fadeInDuration)
+      this.action.play()
+    }
+  }
+
+  /**
+   * Stop the animation with optional fade out
+   * @param {number} [fadeOutDuration=0.3] - Fade out duration in seconds
+   * @returns {Promise&lt;void>} Promise that resolves when fade out completes
+   */
+  stop (fadeOutDuration = Config.DEFAULT_FADE_OUT) {
+    if (this.action) {
+      this.action.fadeOut(fadeOutDuration)
+      setTimeout(() => {
+        if (this.action) {
+          this.action.stop()
+        }
+      }, fadeOutDuration * 1000)
+    }
+  }
+
+  /**
+   * Check if the animation is currently playing
+   * @returns {boolean} True if playing, false otherwise
+   */
+  isPlaying () {
+    return this.action?.isRunning() || false
+  }
+}
+
+/**
+ * Factory for creating animation clips with parsed metadata
+ * @class
+ */
+export class AnimationClipFactory {
+  /**
+   * Create an animation clip factory
+   * @param {AnimationLoader} animationLoader - The animation loader instance
+   */
+  constructor (animationLoader) {
+    /**
+     * The animation loader for loading animation data
+     * @type {AnimationLoader}
+     */
+    this.animationLoader = animationLoader
+
+    /**
+     * Cache for created animation clips
+     * @type {Map&lt;string, AnimationClip>}
+     */
+    this.clipCache = new Map()
+  }
+
+  /**
+   * Parse animation name and create clip metadata
+   * Format: [state]_[action]_[type] or [state]_[action]2[toState]_[emotion]_T
+   * @param {string} name - The animation name to parse
+   * @returns {Object} Parsed metadata object
+   */
+  parseAnimationName (name) {
+    const parts = name.split('_')
+    const state = parts[0]
+    const action = parts[1]
+
+    // Handle transitions with emotions
+    if (parts[2]?.includes('2') &amp;&amp; parts[3] === ClipTypes.TRANSITION) {
+      const [, toState] = parts[2].split('2')
+      return {
+        state,
+        action,
+        toState,
+        emotion: parts[2] || '',
+        type: ClipTypes.TRANSITION,
+        isTransition: true,
+        hasEmotion: true
+      }
+    }
+
+    // Handle regular transitions
+    if (parts[2] === ClipTypes.TRANSITION) {
+      return {
+        state,
+        action,
+        type: ClipTypes.TRANSITION,
+        isTransition: true
+      }
+    }
+
+    // Handle nested animations
+    if (parts[2] === ClipTypes.NESTED_IN || parts[2] === ClipTypes.NESTED_OUT) {
+      return {
+        state,
+        action,
+        type: parts[2],
+        nestedType: parts[3],
+        isNested: true
+      }
+    }
+
+    // Handle nested loops and quirks
+    if (
+      parts[3] === ClipTypes.NESTED_LOOP ||
+      parts[3] === ClipTypes.NESTED_QUIRK
+    ) {
+      return {
+        state,
+        action,
+        subAction: parts[2],
+        type: parts[3],
+        isNested: true
+      }
+    }
+
+    // Handle standard loops and quirks
+    return {
+      state,
+      action,
+      type: parts[2],
+      isStandard: true
+    }
+  }
+
+  /**
+   * Create an animation clip from a name
+   * @param {string} name - The animation name
+   * @returns {Promise&lt;AnimationClip>} The created animation clip
+   */
+  async createClip (name) {
+    if (this.clipCache.has(name)) {
+      return this.clipCache.get(name)
+    }
+
+    const metadata = this.parseAnimationName(name)
+    const animation = await this.animationLoader.loadAnimation(name)
+
+    const clip = new AnimationClip(name, animation, metadata)
+    this.clipCache.set(name, clip)
+
+    return clip
+  }
+
+  /**
+   * Create all animation clips from a model's animations
+   * @param {THREE.Object3D} model - The 3D model containing animations
+   * @returns {Promise&lt;Map&lt;string, AnimationClip>>} Map of animation name to clip
+   */
+  async createClipsFromModel (model) {
+    const clips = new Map()
+    const animations = model.animations || []
+
+    for (const animation of animations) {
+      const clip = await this.createClip(animation.name, model)
+      clips.set(animation.name, clip)
+    }
+
+    return clips
+  }
+
+  /**
+   * Clear the clip cache
+   * @returns {void}
+   */
+  clearCache () {
+    this.clipCache.clear()
+  }
+
+  /**
+   * Get cached clip by name
+   * @param {string} name - The animation name
+   * @returns {AnimationClip|undefined} The cached clip or undefined
+   */
+  getCachedClip (name) {
+    return this.clipCache.get(name)
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/animation_AnimationConstants.js.html

@@ -0,0 +1,398 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: animation/AnimationConstants.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: animation/AnimationConstants.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Animation constants with multi-scheme support for Owen Animation System
+ * @module animation/AnimationConstants
+ */
+
+import { AnimationNameMapper } from './AnimationNameMapper.js'
+
+// Create a singleton instance of the name mapper
+const nameMapper = new AnimationNameMapper()
+
+/**
+ * Legacy animation names (backward compatibility)
+ * @constant
+ */
+export const LegacyAnimations = {
+  // Wait state animations
+  WAIT_IDLE_LOOP: 'wait_idle_L',
+  WAIT_PICK_NOSE_QUIRK: 'wait_pickNose_Q',
+  WAIT_STRETCH_QUIRK: 'wait_stretch_Q',
+  WAIT_YAWN_QUIRK: 'wait_yawn_Q',
+
+  // React state animations - neutral
+  REACT_IDLE_LOOP: 'react_idle_L',
+  REACT_ACKNOWLEDGE_TRANSITION: 'react_acknowledge_T',
+  REACT_NOD_TRANSITION: 'react_nod_T',
+  REACT_LISTENING_LOOP: 'react_listening_L',
+
+  // React state animations - angry
+  REACT_ANGRY_IDLE_LOOP: 'react_angry_L',
+  REACT_ANGRY_FROWN_TRANSITION: 'react_an2frown_T',
+  REACT_ANGRY_GRUMBLE_QUIRK: 'react_an2grumble_Q',
+  REACT_ANGRY_TO_TYPE_TRANSITION: 'react_an2type_T',
+
+  // React state animations - happy
+  REACT_HAPPY_IDLE_LOOP: 'react_happy_L',
+  REACT_HAPPY_SMILE_TRANSITION: 'react_hp2smile_T',
+  REACT_HAPPY_BOUNCE_QUIRK: 'react_hp2bounce_Q',
+  REACT_HAPPY_TO_TYPE_TRANSITION: 'react_hp2type_T',
+
+  // React state animations - sad
+  REACT_SAD_IDLE_LOOP: 'react_sad_L',
+  REACT_SAD_SIGH_TRANSITION: 'react_sd2sigh_T',
+  REACT_SAD_SLUMP_QUIRK: 'react_sd2slump_Q',
+  REACT_SAD_TO_TYPE_TRANSITION: 'react_sd2type_T',
+
+  // React state animations - shocked
+  REACT_SHOCKED_IDLE_LOOP: 'react_shocked_L',
+  REACT_SHOCKED_GASP_TRANSITION: 'react_sh2gasp_T',
+  REACT_SHOCKED_JUMP_QUIRK: 'react_sh2jump_Q',
+  REACT_SHOCKED_TO_TYPE_TRANSITION: 'react_sh2type_T',
+
+  // Type state animations
+  TYPE_IDLE_LOOP: 'type_idle_L',
+  TYPE_FAST_LOOP: 'type_fast_L',
+  TYPE_SLOW_LOOP: 'type_slow_L',
+  TYPE_THINKING_LOOP: 'type_thinking_L',
+  TYPE_TO_WAIT_TRANSITION: 'type2wait_T',
+
+  // Sleep state animations
+  SLEEP_LIGHT_LOOP: 'sleep_light_L',
+  SLEEP_DEEP_LOOP: 'sleep_deep_L',
+  SLEEP_DREAM_QUIRK: 'sleep_dream_Q',
+  SLEEP_WAKE_UP_TRANSITION: 'sleep2wake_T'
+}
+
+/**
+ * Artist-friendly animation names (Blender workflow)
+ * @constant
+ */
+export const ArtistAnimations = {
+  // Wait state animations
+  WAIT_IDLE: 'Owen_WaitIdle',
+  WAIT_PICK_NOSE: 'Owen_PickNose',
+  WAIT_STRETCH: 'Owen_Stretch',
+  WAIT_YAWN: 'Owen_Yawn',
+
+  // React state animations - neutral
+  REACT_IDLE: 'Owen_ReactIdle',
+  REACT_ACKNOWLEDGE: 'Owen_ReactAcknowledge',
+  REACT_NOD: 'Owen_ReactNod',
+  REACT_LISTENING: 'Owen_ReactListening',
+
+  // React state animations - angry
+  REACT_ANGRY_IDLE: 'Owen_ReactAngryIdle',
+  REACT_ANGRY_FROWN: 'Owen_ReactAngryFrown',
+  REACT_ANGRY_GRUMBLE: 'Owen_ReactAngryGrumble',
+  REACT_ANGRY_TO_TYPE: 'Owen_ReactAngryToType',
+
+  // React state animations - happy
+  REACT_HAPPY_IDLE: 'Owen_ReactHappyIdle',
+  REACT_HAPPY_SMILE: 'Owen_ReactHappySmile',
+  REACT_HAPPY_BOUNCE: 'Owen_ReactHappyBounce',
+  REACT_HAPPY_TO_TYPE: 'Owen_ReactHappyToType',
+
+  // React state animations - sad
+  REACT_SAD_IDLE: 'Owen_ReactSadIdle',
+  REACT_SAD_SIGH: 'Owen_ReactSadSigh',
+  REACT_SAD_SLUMP: 'Owen_ReactSadSlump',
+  REACT_SAD_TO_TYPE: 'Owen_ReactSadToType',
+
+  // React state animations - shocked
+  REACT_SHOCKED_IDLE: 'Owen_ReactShockedIdle',
+  REACT_SHOCKED_GASP: 'Owen_ReactShockedGasp',
+  REACT_SHOCKED_JUMP: 'Owen_ReactShockedJump',
+  REACT_SHOCKED_TO_TYPE: 'Owen_ReactShockedToType',
+
+  // Type state animations
+  TYPE_IDLE: 'Owen_TypeIdle',
+  TYPE_FAST: 'Owen_TypeFast',
+  TYPE_SLOW: 'Owen_TypeSlow',
+  TYPE_THINKING: 'Owen_TypeThinking',
+  TYPE_TO_WAIT: 'Owen_TypeToWait',
+
+  // Sleep state animations
+  SLEEP_LIGHT: 'Owen_SleepLight',
+  SLEEP_DEEP: 'Owen_SleepDeep',
+  SLEEP_DREAM: 'Owen_SleepDream',
+  SLEEP_WAKE_UP: 'Owen_SleepWakeUp'
+}
+
+/**
+ * Hierarchical animation names (organized structure)
+ * @constant
+ */
+export const HierarchicalAnimations = {
+  // Wait state animations
+  WAIT_IDLE: 'owen.state.wait.idle.loop',
+  WAIT_PICK_NOSE: 'owen.quirk.wait.picknose',
+  WAIT_STRETCH: 'owen.quirk.wait.stretch',
+  WAIT_YAWN: 'owen.quirk.wait.yawn',
+
+  // React state animations - neutral
+  REACT_IDLE: 'owen.state.react.idle.loop',
+  REACT_ACKNOWLEDGE: 'owen.state.react.acknowledge.transition',
+  REACT_NOD: 'owen.state.react.nod.transition',
+  REACT_LISTENING: 'owen.state.react.listening.loop',
+
+  // React state animations - angry
+  REACT_ANGRY_IDLE: 'owen.state.react.angry.idle.loop',
+  REACT_ANGRY_FROWN: 'owen.state.react.angry.frown.transition',
+  REACT_ANGRY_GRUMBLE: 'owen.quirk.react.angry.grumble',
+  REACT_ANGRY_TO_TYPE: 'owen.state.react.angry.totype.transition',
+
+  // React state animations - happy
+  REACT_HAPPY_IDLE: 'owen.state.react.happy.idle.loop',
+  REACT_HAPPY_SMILE: 'owen.state.react.happy.smile.transition',
+  REACT_HAPPY_BOUNCE: 'owen.quirk.react.happy.bounce',
+  REACT_HAPPY_TO_TYPE: 'owen.state.react.happy.totype.transition',
+
+  // React state animations - sad
+  REACT_SAD_IDLE: 'owen.state.react.sad.idle.loop',
+  REACT_SAD_SIGH: 'owen.state.react.sad.sigh.transition',
+  REACT_SAD_SLUMP: 'owen.quirk.react.sad.slump',
+  REACT_SAD_TO_TYPE: 'owen.state.react.sad.totype.transition',
+
+  // React state animations - shocked
+  REACT_SHOCKED_IDLE: 'owen.state.react.shocked.idle.loop',
+  REACT_SHOCKED_GASP: 'owen.state.react.shocked.gasp.transition',
+  REACT_SHOCKED_JUMP: 'owen.quirk.react.shocked.jump',
+  REACT_SHOCKED_TO_TYPE: 'owen.state.react.shocked.totype.transition',
+
+  // Type state animations
+  TYPE_IDLE: 'owen.state.type.idle.loop',
+  TYPE_FAST: 'owen.state.type.fast.loop',
+  TYPE_SLOW: 'owen.state.type.slow.loop',
+  TYPE_THINKING: 'owen.state.type.thinking.loop',
+  TYPE_TO_WAIT: 'owen.state.type.towait.transition',
+
+  // Sleep state animations
+  SLEEP_LIGHT: 'owen.state.sleep.light.loop',
+  SLEEP_DEEP: 'owen.state.sleep.deep.loop',
+  SLEEP_DREAM: 'owen.quirk.sleep.dream',
+  SLEEP_WAKE_UP: 'owen.state.sleep.wakeup.transition'
+}
+
+/**
+ * Semantic animation names (readable camelCase)
+ * @constant
+ */
+export const SemanticAnimations = {
+  // Wait state animations
+  WAIT_IDLE: 'OwenWaitIdleLoop',
+  WAIT_PICK_NOSE: 'OwenQuirkPickNose',
+  WAIT_STRETCH: 'OwenQuirkStretch',
+  WAIT_YAWN: 'OwenQuirkYawn',
+
+  // React state animations - neutral
+  REACT_IDLE: 'OwenReactIdleLoop',
+  REACT_ACKNOWLEDGE: 'OwenReactAcknowledgeTransition',
+  REACT_NOD: 'OwenReactNodTransition',
+  REACT_LISTENING: 'OwenReactListeningLoop',
+
+  // React state animations - angry
+  REACT_ANGRY_IDLE: 'OwenReactAngryIdleLoop',
+  REACT_ANGRY_FROWN: 'OwenReactAngryFrownTransition',
+  REACT_ANGRY_GRUMBLE: 'OwenQuirkAngryGrumble',
+  REACT_ANGRY_TO_TYPE: 'OwenReactAngryToTypeTransition',
+
+  // React state animations - happy
+  REACT_HAPPY_IDLE: 'OwenReactHappyIdleLoop',
+  REACT_HAPPY_SMILE: 'OwenReactHappySmileTransition',
+  REACT_HAPPY_BOUNCE: 'OwenQuirkHappyBounce',
+  REACT_HAPPY_TO_TYPE: 'OwenReactHappyToTypeTransition',
+
+  // React state animations - sad
+  REACT_SAD_IDLE: 'OwenReactSadIdleLoop',
+  REACT_SAD_SIGH: 'OwenReactSadSighTransition',
+  REACT_SAD_SLUMP: 'OwenQuirkSadSlump',
+  REACT_SAD_TO_TYPE: 'OwenReactSadToTypeTransition',
+
+  // React state animations - shocked
+  REACT_SHOCKED_IDLE: 'OwenReactShockedIdleLoop',
+  REACT_SHOCKED_GASP: 'OwenReactShockedGaspTransition',
+  REACT_SHOCKED_JUMP: 'OwenQuirkShockedJump',
+  REACT_SHOCKED_TO_TYPE: 'OwenReactShockedToTypeTransition',
+
+  // Type state animations
+  TYPE_IDLE: 'OwenTypeIdleLoop',
+  TYPE_FAST: 'OwenTypeFastLoop',
+  TYPE_SLOW: 'OwenTypeSlowLoop',
+  TYPE_THINKING: 'OwenTypeThinkingLoop',
+  TYPE_TO_WAIT: 'OwenTypeToWaitTransition',
+
+  // Sleep state animations
+  SLEEP_LIGHT: 'OwenSleepLightLoop',
+  SLEEP_DEEP: 'OwenSleepDeepLoop',
+  SLEEP_DREAM: 'OwenQuirkSleepDream',
+  SLEEP_WAKE_UP: 'OwenSleepWakeUpTransition'
+}
+
+/**
+ * Animation naming schemes enumeration
+ * @constant
+ */
+export const NamingSchemes = {
+  LEGACY: 'legacy',
+  ARTIST: 'artist',
+  HIERARCHICAL: 'hierarchical',
+  SEMANTIC: 'semantic'
+}
+
+/**
+ * Convert animation name between different schemes
+ * @param {string} name - The source animation name
+ * @param {string} targetScheme - The target naming scheme
+ * @returns {string} The converted animation name
+ */
+export function convertAnimationName (name, targetScheme) {
+  return nameMapper.convert(name, targetScheme)
+}
+
+/**
+ * Get all naming scheme variants for an animation
+ * @param {string} name - The source animation name
+ * @returns {Object} Object with all scheme variants
+ */
+export function getAllAnimationNames (name) {
+  return nameMapper.getAllNames(name)
+}
+
+/**
+ * Validate an animation name
+ * @param {string} name - The animation name to validate
+ * @returns {Object} Validation result
+ */
+export function validateAnimationName (name) {
+  return nameMapper.validateAnimationName(name)
+}
+
+/**
+ * Get animations by state and emotion
+ * @param {string} state - The state name
+ * @param {string} emotion - The emotion name (optional)
+ * @param {string} scheme - The naming scheme to return (default: 'semantic')
+ * @returns {string[]} Array of animation names
+ */
+export function getAnimationsByStateAndEmotion (state, emotion = '', scheme = 'semantic') {
+  const animations = nameMapper.getAnimationsByFilter({ state, emotion })
+  return animations.map(anim => anim[scheme] || anim.semantic)
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/animation_AnimationNameMapper.js.html

@@ -0,0 +1,717 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: animation/AnimationNameMapper.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: animation/AnimationNameMapper.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Multi-scheme animation name mapper for Owen Animation System
+ * @module animation/AnimationNameMapper
+ */
+
+/**
+ * Multi-scheme animation name mapper for Owen Animation System
+ * Supports legacy, artist-friendly, and hierarchical naming schemes
+ * @class
+ */
+export class AnimationNameMapper {
+  constructor () {
+    // Mapping between different naming schemes
+    this.schemeMappings = new Map()
+    this.reverseMappings = new Map()
+    this.patterns = new Map()
+
+    this.initializeMappings()
+  }
+
+  /**
+     * Initialize all naming scheme mappings and patterns
+     * @private
+     */
+  initializeMappings () {
+    // Core animation definitions with all naming scheme variants
+    const animations = [
+      // Wait state animations
+      {
+        legacy: 'wait_idle_L',
+        artist: 'Owen_WaitIdle',
+        hierarchical: 'owen.state.wait.idle.loop',
+        semantic: 'OwenWaitIdleLoop',
+        state: 'wait',
+        emotion: '',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'wait_pickNose_Q',
+        artist: 'Owen_PickNose',
+        hierarchical: 'owen.quirk.wait.picknose',
+        semantic: 'OwenQuirkPickNose',
+        state: 'wait',
+        emotion: '',
+        type: 'quirk',
+        category: 'quirk'
+      },
+      {
+        legacy: 'wait_wave_Q',
+        artist: 'Owen_Wave',
+        hierarchical: 'owen.quirk.wait.wave',
+        semantic: 'OwenQuirkWave',
+        state: 'wait',
+        emotion: '',
+        type: 'quirk',
+        category: 'quirk'
+      },
+      // React state animations
+      {
+        legacy: 'react_idle_L',
+        artist: 'Owen_ReactIdle',
+        hierarchical: 'owen.state.react.idle.loop',
+        semantic: 'OwenReactIdleLoop',
+        state: 'react',
+        emotion: '',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'react_an_L',
+        artist: 'Owen_ReactAngry',
+        hierarchical: 'owen.state.react.emotion.angry.loop',
+        semantic: 'OwenReactAngryLoop',
+        state: 'react',
+        emotion: 'angry',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'react_sh_L',
+        artist: 'Owen_ReactShocked',
+        hierarchical: 'owen.state.react.emotion.shocked.loop',
+        semantic: 'OwenReactShockedLoop',
+        state: 'react',
+        emotion: 'shocked',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'react_ha_L',
+        artist: 'Owen_ReactHappy',
+        hierarchical: 'owen.state.react.emotion.happy.loop',
+        semantic: 'OwenReactHappyLoop',
+        state: 'react',
+        emotion: 'happy',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'react_sa_L',
+        artist: 'Owen_ReactSad',
+        hierarchical: 'owen.state.react.emotion.sad.loop',
+        semantic: 'OwenReactSadLoop',
+        state: 'react',
+        emotion: 'sad',
+        type: 'loop',
+        category: 'state'
+      },
+      // Type state animations
+      {
+        legacy: 'type_idle_L',
+        artist: 'Owen_TypeIdle',
+        hierarchical: 'owen.state.type.idle.loop',
+        semantic: 'OwenTypeIdleLoop',
+        state: 'type',
+        emotion: '',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'type_an_L',
+        artist: 'Owen_TypeAngry',
+        hierarchical: 'owen.state.type.emotion.angry.loop',
+        semantic: 'OwenTypeAngryLoop',
+        state: 'type',
+        emotion: 'angry',
+        type: 'loop',
+        category: 'state'
+      },
+      {
+        legacy: 'type_sh_L',
+        artist: 'Owen_TypeShocked',
+        hierarchical: 'owen.state.type.emotion.shocked.loop',
+        semantic: 'OwenTypeShockedLoop',
+        state: 'type',
+        emotion: 'shocked',
+        type: 'loop',
+        category: 'state'
+      },
+      // Sleep state animations
+      {
+        legacy: 'sleep_idle_L',
+        artist: 'Owen_SleepIdle',
+        hierarchical: 'owen.state.sleep.idle.loop',
+        semantic: 'OwenSleepIdleLoop',
+        state: 'sleep',
+        emotion: '',
+        type: 'loop',
+        category: 'state'
+      },
+      // Transition animations
+      {
+        legacy: 'wait_2react_T',
+        artist: 'Owen_WaitToReact',
+        hierarchical: 'owen.transition.wait.to.react',
+        semantic: 'OwenTransitionWaitToReact',
+        fromState: 'wait',
+        toState: 'react',
+        emotion: '',
+        type: 'transition',
+        category: 'transition'
+      },
+      {
+        legacy: 'react_2type_T',
+        artist: 'Owen_ReactToType',
+        hierarchical: 'owen.transition.react.to.type',
+        semantic: 'OwenTransitionReactToType',
+        fromState: 'react',
+        toState: 'type',
+        emotion: '',
+        type: 'transition',
+        category: 'transition'
+      },
+      {
+        legacy: 'react_an2type_T',
+        artist: 'Owen_ReactAngryToType',
+        hierarchical: 'owen.transition.react.to.type.emotion.angry',
+        semantic: 'OwenTransitionReactToTypeAngry',
+        fromState: 'react',
+        toState: 'type',
+        emotion: 'angry',
+        type: 'transition',
+        category: 'transition'
+      },
+      {
+        legacy: 'type_2wait_T',
+        artist: 'Owen_TypeToWait',
+        hierarchical: 'owen.transition.type.to.wait',
+        semantic: 'OwenTransitionTypeToWait',
+        fromState: 'type',
+        toState: 'wait',
+        emotion: '',
+        type: 'transition',
+        category: 'transition'
+      },
+      {
+        legacy: 'sleep_2wait_T',
+        artist: 'Owen_SleepToWait',
+        hierarchical: 'owen.transition.sleep.to.wait',
+        semantic: 'OwenTransitionSleepToWait',
+        fromState: 'sleep',
+        toState: 'wait',
+        emotion: '',
+        type: 'transition',
+        category: 'transition'
+      }
+    ]
+
+    // Build bidirectional mappings
+    animations.forEach(anim => {
+      const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
+
+      schemes.forEach(scheme1 => {
+        schemes.forEach(scheme2 => {
+          if (scheme1 !== scheme2) {
+            this.schemeMappings.set(anim[scheme1], anim[scheme2])
+          }
+        })
+
+        // Also map to animation definition
+        this.schemeMappings.set(anim[scheme1], anim)
+      })
+    })
+
+    // Initialize pattern matchers for auto-detection
+    this.initializePatterns()
+  }
+
+  /**
+     * Initialize pattern matchers for different naming schemes
+     * @private
+     */
+  initializePatterns () {
+    // Pattern matchers for different naming schemes
+    this.patterns.set('legacy', [
+      {
+        regex: /^(\w+)_(\w+)_([LTQ])$/,
+        extract: (match) => ({
+          state: match[1],
+          action: match[2],
+          type: match[3] === 'L' ? 'loop' : match[3] === 'T' ? 'transition' : 'quirk'
+        })
+      },
+      {
+        regex: /^(\w+)_(\w{2})_([LTQ])$/,
+        extract: (match) => ({
+          state: match[1],
+          emotion: this.mapEmotionCode(match[2]),
+          type: match[3] === 'L' ? 'loop' : match[3] === 'T' ? 'transition' : 'quirk'
+        })
+      },
+      {
+        regex: /^(\w+)_(\w{2})?2(\w+)_T$/,
+        extract: (match) => ({
+          fromState: match[1],
+          emotion: match[2] ? this.mapEmotionCode(match[2]) : '',
+          toState: match[3],
+          type: 'transition'
+        })
+      },
+      {
+        regex: /^(\w+)_2(\w+)_T$/,
+        extract: (match) => ({
+          fromState: match[1],
+          toState: match[2],
+          type: 'transition'
+        })
+      }
+    ])
+
+    this.patterns.set('artist', [
+      {
+        regex: /^Owen_(\w+)$/,
+        extract: (match) => ({
+          action: match[1],
+          scheme: 'artist'
+        })
+      },
+      {
+        regex: /^Owen_(\w+)To(\w+)$/,
+        extract: (match) => ({
+          fromState: match[1].toLowerCase(),
+          toState: match[2].toLowerCase(),
+          type: 'transition'
+        })
+      },
+      {
+        regex: /^Owen_(\w+)(Angry|Happy|Sad|Shocked)$/,
+        extract: (match) => ({
+          state: match[1].toLowerCase(),
+          emotion: match[2].toLowerCase(),
+          type: 'loop'
+        })
+      },
+      {
+        regex: /^Owen_(\w+)(Angry|Happy|Sad|Shocked)To(\w+)$/,
+        extract: (match) => ({
+          fromState: match[1].toLowerCase(),
+          emotion: match[2].toLowerCase(),
+          toState: match[3].toLowerCase(),
+          type: 'transition'
+        })
+      }
+    ])
+
+    this.patterns.set('hierarchical', [
+      {
+        regex: /^owen\.(\w+)\.(\w+)\.(\w+)(?:\.(\w+))?(?:\.(\w+))?$/,
+        extract: (match) => ({
+          category: match[1],
+          subcategory: match[2],
+          action: match[3],
+          modifier: match[4],
+          type: match[5] || match[4]
+        })
+      }
+    ])
+
+    this.patterns.set('semantic', [
+      {
+        regex: /^Owen(\w+)(\w+)(\w+)$/,
+        extract: (match) => ({
+          category: match[1].toLowerCase(),
+          action: match[2].toLowerCase(),
+          type: match[3].toLowerCase()
+        })
+      }
+    ])
+  }
+
+  /**
+     * Map emotion codes to full names
+     * @private
+     * @param {string} code - Emotion code
+     * @returns {string} Full emotion name
+     */
+  mapEmotionCode (code) {
+    const emotionMap = {
+      an: 'angry',
+      sh: 'shocked',
+      ha: 'happy',
+      sa: 'sad',
+      '': 'neutral'
+    }
+    return emotionMap[code] || code
+  }
+
+  /**
+     * Convert any animation name to any other scheme
+     * @param {string} fromName - Source animation name
+     * @param {string} targetScheme - Target naming scheme ('legacy', 'artist', 'hierarchical', 'semantic')
+     * @returns {string} Converted animation name
+     */
+  convert (fromName, targetScheme = 'hierarchical') {
+    // Direct lookup first
+    const directMapping = this.schemeMappings.get(fromName)
+    if (directMapping &amp;&amp; typeof directMapping === 'object') {
+      return directMapping[targetScheme] || fromName
+    }
+
+    // Pattern-based conversion
+    const detected = this.detectScheme(fromName)
+    if (detected) {
+      return this.generateName(detected.info, targetScheme)
+    }
+
+    console.warn(`Could not convert animation name: ${fromName}`)
+    return fromName
+  }
+
+  /**
+     * Detect which naming scheme is being used
+     * @param {string} name - Animation name to analyze
+     * @returns {Object|null} Detection result with scheme and extracted info
+     */
+  detectScheme (name) {
+    for (const [scheme, patterns] of this.patterns) {
+      for (const pattern of patterns) {
+        const match = name.match(pattern.regex)
+        if (match) {
+          return {
+            scheme,
+            info: pattern.extract(match),
+            originalName: name
+          }
+        }
+      }
+    }
+    return null
+  }
+
+  /**
+     * Generate animation name in target scheme
+     * @private
+     * @param {Object} info - Animation information
+     * @param {string} targetScheme - Target naming scheme
+     * @returns {string} Generated animation name
+     */
+  generateName (info, targetScheme) {
+    switch (targetScheme) {
+      case 'legacy':
+        return this.generateLegacyName(info)
+      case 'artist':
+        return this.generateArtistName(info)
+      case 'hierarchical':
+        return this.generateHierarchicalName(info)
+      case 'semantic':
+        return this.generateSemanticName(info)
+      default:
+        return null
+    }
+  }
+
+  /**
+     * Generate legacy format name
+     * @private
+     * @param {Object} info - Animation information
+     * @returns {string} Legacy format name
+     */
+  generateLegacyName (info) {
+    const typeMap = { loop: 'L', transition: 'T', quirk: 'Q' }
+    const emotionMap = { angry: 'an', shocked: 'sh', happy: 'ha', sad: 'sa' }
+
+    if (info.type === 'transition' &amp;&amp; info.fromState &amp;&amp; info.toState) {
+      const emotionPart = info.emotion ? emotionMap[info.emotion] || '' : ''
+      return emotionPart
+        ? `${info.fromState}_${emotionPart}2${info.toState}_T`
+        : `${info.fromState}_2${info.toState}_T`
+    }
+
+    const state = info.state || info.fromState || 'wait'
+    const action = info.action || (info.emotion ? emotionMap[info.emotion] : 'idle')
+    const type = typeMap[info.type] || 'L'
+
+    return `${state}_${action}_${type}`
+  }
+
+  /**
+     * Generate artist-friendly format name
+     * @private
+     * @param {Object} info - Animation information
+     * @returns {string} Artist format name
+     */
+  generateArtistName (info) {
+    const parts = ['Owen']
+
+    if (info.type === 'transition') {
+      const from = this.capitalize(info.fromState || info.state)
+      const to = this.capitalize(info.toState)
+      if (info.emotion) {
+        parts.push(`${from}${this.capitalize(info.emotion)}To${to}`)
+      } else {
+        parts.push(`${from}To${to}`)
+      }
+    } else {
+      if (info.state) parts.push(this.capitalize(info.state))
+      if (info.action &amp;&amp; info.action !== 'idle') parts.push(this.capitalize(info.action))
+      if (info.emotion) parts.push(this.capitalize(info.emotion))
+    }
+
+    return parts.join('_')
+  }
+
+  /**
+     * Generate hierarchical format name
+     * @private
+     * @param {Object} info - Animation information
+     * @returns {string} Hierarchical format name
+     */
+  generateHierarchicalName (info) {
+    const parts = ['owen']
+
+    if (info.category) {
+      parts.push(info.category)
+    } else if (info.type === 'transition') {
+      parts.push('transition')
+    } else if (info.type === 'quirk') {
+      parts.push('quirk')
+    } else {
+      parts.push('state')
+    }
+
+    if (info.fromState &amp;&amp; info.toState) {
+      // Transition
+      parts.push(info.fromState, 'to', info.toState)
+    } else if (info.state) {
+      parts.push(info.state)
+    }
+
+    if (info.action &amp;&amp; info.action !== 'idle') parts.push(info.action)
+    if (info.emotion) parts.push('emotion', info.emotion)
+    if (info.type) parts.push(info.type)
+
+    return parts.join('.')
+  }
+
+  /**
+     * Generate semantic format name
+     * @private
+     * @param {Object} info - Animation information
+     * @returns {string} Semantic format name
+     */
+  generateSemanticName (info) {
+    const parts = ['Owen']
+
+    if (info.type === 'transition') {
+      parts.push('Transition')
+      if (info.fromState) parts.push(this.capitalize(info.fromState))
+      parts.push('To')
+      if (info.toState) parts.push(this.capitalize(info.toState))
+      if (info.emotion) parts.push(this.capitalize(info.emotion))
+    } else {
+      if (info.type === 'quirk') parts.push('Quirk')
+      if (info.state) parts.push(this.capitalize(info.state))
+      if (info.action &amp;&amp; info.action !== 'idle') parts.push(this.capitalize(info.action))
+      if (info.emotion) parts.push(this.capitalize(info.emotion))
+      if (info.type &amp;&amp; info.type !== 'quirk') parts.push(this.capitalize(info.type))
+    }
+
+    return parts.join('')
+  }
+
+  /**
+     * Capitalize first letter of string
+     * @private
+     * @param {string} str - String to capitalize
+     * @returns {string} Capitalized string
+     */
+  capitalize (str) {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
+  /**
+     * Get all possible names for an animation
+     * @param {string} animationName - Source animation name
+     * @returns {Object} Object with all naming scheme variants
+     */
+  getAllNames (animationName) {
+    const schemes = ['legacy', 'artist', 'hierarchical', 'semantic']
+    const names = {}
+
+    schemes.forEach(scheme => {
+      names[scheme] = this.convert(animationName, scheme)
+    })
+
+    return names
+  }
+
+  /**
+     * Batch convert multiple animations
+     * @param {string[]} animations - Array of animation names
+     * @param {string} targetScheme - Target naming scheme
+     * @returns {Object} Mapping of original names to converted names
+     */
+  convertBatch (animations, targetScheme) {
+    const converted = {}
+    animations.forEach(name => {
+      converted[name] = this.convert(name, targetScheme)
+    })
+    return converted
+  }
+
+  /**
+     * Validate animation name format
+     * @param {string} name - Animation name to validate
+     * @returns {Object} Validation result with issues and suggestions
+     */
+  validateAnimationName (name) {
+    const issues = []
+    const suggestions = []
+
+    // Check for common issues
+    if (name.includes(' ')) {
+      issues.push(`❌ "${name}" contains spaces - may cause issues`)
+      suggestions.push(`💡 Suggestion: "${name.replace(/ /g, '_')}"`)
+    }
+
+    if (!/^[a-zA-Z0-9._-]+$/.test(name)) {
+      issues.push(`❌ "${name}" contains invalid characters`)
+      suggestions.push('💡 Use only letters, numbers, dots, underscores, and hyphens')
+    }
+
+    if (name.length > 50) {
+      issues.push(`⚠️ "${name}" is very long (${name.length} chars)`)
+      suggestions.push('💡 Consider shortening the name')
+    }
+
+    const detected = this.detectScheme(name)
+    if (!detected) {
+      issues.push(`⚠️ "${name}" doesn't match any known naming pattern`)
+      suggestions.push('💡 Consider using one of: legacy, artist, hierarchical, or semantic format')
+    } else {
+      suggestions.push(`✅ Detected as ${detected.scheme} scheme`)
+    }
+
+    return { issues, suggestions, detected }
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/constants.js.html

@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: constants.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: constants.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Animation system constants and enumerations
+ * @module constants
+ */
+
+/**
+ * Animation clip types based on naming convention
+ * @readonly
+ * @enum {string}
+ */
+export const ClipTypes = {
+  /** Loop animation */
+  LOOP: 'L',
+  /** Quirk animation */
+  QUIRK: 'Q',
+  /** Nested loop animation */
+  NESTED_LOOP: 'NL',
+  /** Nested quirk animation */
+  NESTED_QUIRK: 'NQ',
+  /** Nested in transition */
+  NESTED_IN: 'IN_NT',
+  /** Nested out transition */
+  NESTED_OUT: 'OUT_NT',
+  /** Transition animation */
+  TRANSITION: 'T'
+}
+
+/**
+ * Character animation states
+ * @readonly
+ * @enum {string}
+ */
+export const States = {
+  /** Waiting/idle state */
+  WAITING: 'wait',
+  /** Reacting to input state */
+  REACTING: 'react',
+  /** Typing response state */
+  TYPING: 'type',
+  /** Sleep/inactive state */
+  SLEEPING: 'sleep'
+}
+
+/**
+ * Character emotional states
+ * @readonly
+ * @enum {string}
+ */
+export const Emotions = {
+  /** Neutral emotion */
+  NEUTRAL: '',
+  /** Angry emotion */
+  ANGRY: 'an',
+  /** Shocked emotion */
+  SHOCKED: 'sh',
+  /** Happy emotion */
+  HAPPY: 'ha',
+  /** Sad emotion */
+  SAD: 'sa'
+}
+
+/**
+ * Default configuration values
+ * @readonly
+ * @type {Object}
+ */
+export const Config = {
+  /** Default fade in duration for animations (ms) */
+  DEFAULT_FADE_IN: 0.3,
+  /** Default fade out duration for animations (ms) */
+  DEFAULT_FADE_OUT: 0.3,
+  /** Default quirk interval (ms) */
+  QUIRK_INTERVAL: 5000,
+  /** Default inactivity timeout (ms) */
+  INACTIVITY_TIMEOUT: 60000,
+  /** Quirk probability threshold */
+  QUIRK_PROBABILITY: 0.3
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/core_OwenAnimationContext.js.html

@@ -0,0 +1,551 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: core/OwenAnimationContext.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: core/OwenAnimationContext.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Main animation context controller
+ * @module core
+ */
+
+import { States, Emotions, Config } from '../constants.js'
+import { AnimationNameMapper } from '../animation/AnimationNameMapper.js'
+
+/**
+ * Main controller for the Owen animation system
+ * Manages state transitions, animation playback, and user interactions
+ * @class
+ */
+export class OwenAnimationContext {
+  /**
+   * Create an Owen animation context
+   * @param {THREE.Object3D} model - The 3D character model
+   * @param {THREE.AnimationMixer} mixer - The Three.js animation mixer
+   * @param {AnimationClipFactory} animationClipFactory - Factory for creating clips
+   * @param {StateFactory} stateFactory - Factory for creating state handlers
+   */
+  constructor (model, mixer, animationClipFactory, stateFactory) {
+    /**
+     * The 3D character model
+     * @type {THREE.Object3D}
+     */
+    this.model = model
+
+    /**
+     * The Three.js animation mixer
+     * @type {THREE.AnimationMixer}
+     */
+    this.mixer = mixer
+
+    /**
+     * Factory for creating animation clips
+     * @type {AnimationClipFactory}
+     */
+    this.animationClipFactory = animationClipFactory
+
+    /**
+     * Factory for creating state handlers
+     * @type {StateFactory}
+     */
+    this.stateFactory = stateFactory
+
+    /**
+     * Multi-scheme animation name mapper
+     * @type {AnimationNameMapper}
+     */
+    this.nameMapper = new AnimationNameMapper()
+
+    /**
+     * Map of animation clips by name
+     * @type {Map&lt;string, AnimationClip>}
+     */
+    this.clips = new Map()
+
+    /**
+     * Map of state handlers by name
+     * @type {Map&lt;string, StateHandler>}
+     */
+    this.states = new Map()
+
+    /**
+     * Current active state
+     * @type {string}
+     */
+    this.currentState = States.WAITING
+
+    /**
+     * Current active state handler
+     * @type {StateHandler|null}
+     */
+    this.currentStateHandler = null
+
+    /**
+     * Timer for inactivity detection
+     * @type {number}
+     */
+    this.inactivityTimer = 0
+
+    /**
+     * Inactivity timeout in milliseconds
+     * @type {number}
+     */
+    this.inactivityTimeout = Config.INACTIVITY_TIMEOUT
+
+    /**
+     * Whether the system is initialized
+     * @type {boolean}
+     */
+    this.initialized = false
+  }
+
+  /**
+   * Initialize the animation system
+   * @returns {Promise&lt;void>}
+   */
+  async initialize () {
+    if (this.initialized) return
+
+    // Create animation clips from model
+    this.clips = await this.animationClipFactory.createClipsFromModel(this.model)
+
+    // Create actions for all clips
+    for (const [, clip] of this.clips) {
+      clip.createAction(this.mixer)
+    }
+
+    // Initialize state handlers
+    this.initializeStates()
+
+    // Start in wait state
+    await this.transitionTo(States.WAITING)
+
+    this.initialized = true
+    console.log('Owen Animation System initialized')
+  }
+
+  /**
+   * Initialize all state handlers
+   * @private
+   * @returns {void}
+   */
+  initializeStates () {
+    const stateNames = this.stateFactory.getAvailableStates()
+
+    for (const stateName of stateNames) {
+      const handler = this.stateFactory.createStateHandler(stateName, this)
+      this.states.set(stateName, handler)
+    }
+  }
+
+  /**
+   * Transition to a new state
+   * @param {string} newStateName - The name of the state to transition to
+   * @param {string} [emotion=Emotions.NEUTRAL] - The emotion for the transition
+   * @returns {Promise&lt;void>}
+   * @throws {Error} If state is not found or transition is invalid
+   */
+  async transitionTo (newStateName, emotion = Emotions.NEUTRAL) {
+    if (!this.states.has(newStateName)) {
+      throw new Error(`State '${newStateName}' not found`)
+    }
+
+    const oldState = this.currentState
+    const newStateHandler = this.states.get(newStateName)
+
+    console.log(`Transitioning from ${oldState} to ${newStateName}`)
+
+    // Exit current state
+    if (this.currentStateHandler) {
+      await this.currentStateHandler.exit(newStateName, emotion)
+    }
+
+    // Enter new state
+    this.currentState = newStateName
+    this.currentStateHandler = newStateHandler
+    await this.currentStateHandler.enter(oldState, emotion)
+
+    // Reset inactivity timer
+    this.resetActivityTimer()
+  }
+
+  /**
+   * Handle a user message
+   * @param {string} message - The user message
+   * @returns {Promise&lt;void>}
+   */
+  async handleUserMessage (message) {
+    console.log(`Handling user message: "${message}"`)
+
+    this.onUserActivity()
+
+    // If sleeping, wake up first
+    if (this.currentState === States.SLEEPING) {
+      await this.transitionTo(States.REACTING)
+    }
+
+    // Let current state handle the message
+    if (this.currentStateHandler) {
+      await this.currentStateHandler.handleMessage(message)
+    }
+
+    // Transition to appropriate next state based on current state
+    if (this.currentState === States.WAITING) {
+      await this.transitionTo(States.REACTING)
+    } else if (this.currentState === States.REACTING) {
+      await this.transitionTo(States.TYPING)
+    }
+  }
+
+  /**
+   * Called when user activity is detected
+   * @returns {void}
+   */
+  onUserActivity () {
+    this.resetActivityTimer()
+
+    // Wake up if sleeping
+    if (this.currentState === States.SLEEPING) {
+      this.transitionTo(States.WAITING)
+    }
+  }
+
+  /**
+   * Reset the inactivity timer
+   * @private
+   * @returns {void}
+   */
+  resetActivityTimer () {
+    this.inactivityTimer = 0
+  }
+
+  /**
+   * Handle inactivity timeout
+   * @private
+   * @returns {Promise&lt;void>}
+   */
+  async handleInactivity () {
+    console.log('Inactivity detected, transitioning to sleep')
+    await this.transitionTo(States.SLEEPING)
+  }
+
+  /**
+   * Update the animation system (call every frame)
+   * @param {number} deltaTime - Time elapsed since last update (ms)
+   * @returns {void}
+   */
+  update (deltaTime) {
+    if (!this.initialized) return
+
+    // Update Three.js mixer
+    this.mixer.update(deltaTime / 1000) // Convert to seconds
+
+    // Update current state
+    if (this.currentStateHandler) {
+      this.currentStateHandler.update(deltaTime)
+    }
+
+    // Update inactivity timer
+    this.inactivityTimer += deltaTime
+    if (this.inactivityTimer > this.inactivityTimeout &amp;&amp; this.currentState !== States.SLEEPING) {
+      this.handleInactivity()
+    }
+  }
+
+  /**
+   * Get an animation clip by name (supports all naming schemes)
+   * @param {string} name - The animation clip name in any supported scheme
+   * @returns {AnimationClip|undefined} The animation clip or undefined if not found
+   */
+  getClip (name) {
+    // First try direct lookup
+    let clip = this.clips.get(name)
+    if (clip) return clip
+
+    // Try to find clip using name mapper
+    try {
+      const allNames = this.nameMapper.getAllNames(name)
+
+      // Try each possible name variant
+      for (const variant of Object.values(allNames)) {
+        clip = this.clips.get(variant)
+        if (clip) return clip
+      }
+    } catch (error) {
+      // If name mapping fails, continue with pattern search
+      console.debug(`Name mapping failed for "${name}":`, error.message)
+    }
+
+    // Fall back to pattern matching for legacy compatibility
+    const exactMatches = this.getClipsByPattern(`^${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&amp;')}$`)
+    return exactMatches.length > 0 ? exactMatches[0] : undefined
+  }
+
+  /**
+   * Get animation clips matching a pattern
+   * @param {string} pattern - Pattern to match (supports * wildcards)
+   * @returns {AnimationClip[]} Array of matching clips
+   */
+  getClipsByPattern (pattern) {
+    const regex = new RegExp(pattern.replace(/\*/g, '.*'))
+    const matches = []
+
+    for (const [name, clip] of this.clips) {
+      if (regex.test(name)) {
+        matches.push(clip)
+      }
+    }
+
+    return matches
+  }
+
+  /**
+   * Get an animation clip by name in a specific naming scheme
+   * @param {string} name - The animation name
+   * @param {string} [targetScheme] - Target scheme: 'legacy', 'artist', 'hierarchical', 'semantic'
+   * @returns {AnimationClip|undefined} The animation clip or undefined if not found
+   */
+  getClipByScheme (name, targetScheme) {
+    try {
+      if (targetScheme) {
+        const convertedName = this.nameMapper.convert(name, targetScheme)
+        return this.clips.get(convertedName)
+      } else {
+        return this.getClip(name)
+      }
+    } catch (error) {
+      console.debug(`Scheme conversion failed for "${name}" to "${targetScheme}":`, error.message)
+      return undefined
+    }
+  }
+
+  /**
+   * Get all naming scheme variants for an animation
+   * @param {string} name - The animation name in any scheme
+   * @returns {Object} Object with all scheme variants: {legacy, artist, hierarchical, semantic}
+   */
+  getAnimationNames (name) {
+    try {
+      return this.nameMapper.getAllNames(name)
+    } catch (error) {
+      console.warn(`Could not get animation name variants for "${name}":`, error.message)
+      return {
+        legacy: name,
+        artist: name,
+        hierarchical: name,
+        semantic: name
+      }
+    }
+  }
+
+  /**
+   * Validate an animation name and get suggestions if invalid
+   * @param {string} name - The animation name to validate
+   * @returns {Object} Validation result with isValid, scheme, error, and suggestions
+   */
+  validateAnimationName (name) {
+    try {
+      return this.nameMapper.validateAnimationName(name)
+    } catch (error) {
+      return {
+        isValid: false,
+        scheme: 'unknown',
+        error: error.message,
+        suggestions: []
+      }
+    }
+  }
+
+  /**
+   * Get available animations by state and emotion
+   * @param {string} state - The state name (wait, react, type, sleep)
+   * @param {string} [emotion] - The emotion name (angry, happy, sad, shocked, neutral)
+   * @param {string} [scheme='semantic'] - The naming scheme to return
+   * @returns {string[]} Array of animation names in the specified scheme
+   */
+  getAnimationsByStateAndEmotion (state, emotion = '', scheme = 'semantic') {
+    try {
+      const animations = this.nameMapper.getAnimationsByFilter({ state, emotion })
+      return animations.map(anim => anim[scheme] || anim.semantic)
+    } catch (error) {
+      console.warn(`Could not filter animations by state "${state}" and emotion "${emotion}":`, error.message)
+      return []
+    }
+  }
+
+  /**
+   * Get the current state name
+   * @returns {string} The current state name
+   */
+  getCurrentState () {
+    return this.currentState
+  }
+
+  /**
+   * Get the current state handler
+   * @returns {StateHandler|null} The current state handler
+   */
+  getCurrentStateHandler () {
+    return this.currentStateHandler
+  }
+
+  /**
+   * Get available transitions from current state
+   * @returns {string[]} Array of available state transitions
+   */
+  getAvailableTransitions () {
+    if (this.currentStateHandler) {
+      return this.currentStateHandler.getAvailableTransitions()
+    }
+    return []
+  }
+
+  /**
+   * Get all available animation clip names
+   * @returns {string[]} Array of clip names
+   */
+  getAvailableClips () {
+    return Array.from(this.clips.keys())
+  }
+
+  /**
+   * Get all available state names
+   * @returns {string[]} Array of state names
+   */
+  getAvailableStates () {
+    return Array.from(this.states.keys())
+  }
+
+  /**
+   * Dispose of the animation system and clean up resources
+   * @returns {void}
+   */
+  dispose () {
+    // Stop all animations
+    for (const [, clip] of this.clips) {
+      if (clip.action) {
+        clip.action.stop()
+      }
+    }
+
+    // Clear caches
+    this.clips.clear()
+    this.states.clear()
+    this.animationClipFactory.clearCache()
+
+    this.initialized = false
+    console.log('Owen Animation System disposed')
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/factories_OwenSystemFactory.js.html

@@ -0,0 +1,209 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: factories/OwenSystemFactory.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: factories/OwenSystemFactory.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Main system factory for creating the complete Owen system
+ * @module factories
+ */
+
+import * as THREE from 'three'
+import { OwenAnimationContext } from '../core/OwenAnimationContext.js'
+import { AnimationClipFactory } from '../animation/AnimationClip.js'
+import { GLTFAnimationLoader } from '../loaders/AnimationLoader.js'
+import { StateFactory } from '../states/StateFactory.js'
+
+/**
+ * Main factory for creating the complete Owen animation system
+ * @class
+ */
+export class OwenSystemFactory {
+  /**
+     * Create a complete Owen animation system
+     * @param {THREE.Object3D} gltfModel - The loaded GLTF model
+     * @param {THREE.Scene} scene - The Three.js scene
+     * @param {Object} [options={}] - Configuration options
+     * @param {THREE.GLTFLoader} [options.gltfLoader] - Custom GLTF loader
+     * @returns {Promise&lt;OwenAnimationContext>} The configured Owen system
+     */
+  static async createOwenSystem (gltfModel, scene, options = {}) {
+    // Create Three.js animation mixer
+    const mixer = new THREE.AnimationMixer(gltfModel)
+
+    // Create GLTF loader if not provided
+    const gltfLoader = options.gltfLoader || new THREE.GLTFLoader()
+
+    // Create animation loader
+    const animationLoader = new GLTFAnimationLoader(gltfLoader)
+
+    // Preload animations from the model
+    await animationLoader.preloadAnimations(gltfModel)
+
+    // Create animation clip factory
+    const animationClipFactory = new AnimationClipFactory(animationLoader)
+
+    // Create state factory
+    const stateFactory = new StateFactory()
+
+    // Create the main Owen context
+    const owenContext = new OwenAnimationContext(
+      gltfModel,
+      mixer,
+      animationClipFactory,
+      stateFactory
+    )
+
+    // Initialize the system
+    await owenContext.initialize()
+
+    return owenContext
+  }
+
+  /**
+     * Create a basic Owen system with minimal configuration
+     * @param {THREE.Object3D} model - The 3D model
+     * @returns {Promise&lt;OwenAnimationContext>} The configured Owen system
+     */
+  static async createBasicOwenSystem (model) {
+    const scene = new THREE.Scene()
+    scene.add(model)
+
+    return await OwenSystemFactory.createOwenSystem(model, scene)
+  }
+
+  /**
+     * Create an Owen system with custom state handlers
+     * @param {THREE.Object3D} gltfModel - The loaded GLTF model
+     * @param {THREE.Scene} scene - The Three.js scene
+     * @param {Map&lt;string, Function>} customStates - Map of state name to handler class
+     * @returns {Promise&lt;OwenAnimationContext>} The configured Owen system
+     */
+  static async createCustomOwenSystem (gltfModel, scene, customStates) {
+    const system = await OwenSystemFactory.createOwenSystem(gltfModel, scene)
+
+    // Register custom state handlers
+    const stateFactory = system.stateFactory
+    for (const [stateName, handlerClass] of customStates) {
+      stateFactory.registerStateHandler(stateName, handlerClass)
+    }
+
+    // Reinitialize with custom states
+    system.initializeStates()
+
+    return system
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/index.html

@@ -0,0 +1,633 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Home</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Home</h1>
+
+      <h3></h3>
+
+      <section>
+        <article>
+          <h1>Owen Animation System</h1>
+          <p>
+            A comprehensive Three.js animation system for character state
+            management with clean architecture principles, dependency injection,
+            and factory patterns.
+          </p>
+          <p>
+            <a href="https://gitea.kajkowalski.nl/kjanat/Owen/issues"
+              ><img
+                src="https://img.shields.io/gitea/issues/all/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl%2F"
+                alt="Gitea Issues"
+            /></a>
+            <a href="https://gitea.kajkowalski.nl/kjanat/Owen/pulls"
+              ><img
+                src="https://img.shields.io/gitea/pull-requests/all/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl%2F"
+                alt="Gitea Pull Requests"
+            /></a>
+            <a href="https://gitea.kajkowalski.nl/kjanat/Owen/tags"
+              ><img
+                src="https://img.shields.io/gitea/v/release/kjanat/Owen?gitea_url=https%3A%2F%2Fgitea.kajkowalski.nl&amp;include_prereleases&amp;sort=semver"
+                alt="Gitea Release"
+            /></a>
+          </p>
+          <h2>🎯 Overview</h2>
+          <p>
+            The Owen Animation System is a sophisticated character animation
+            framework built for Three.js that manages complex state machines,
+            emotional responses, and animation transitions. It's designed with
+            clean architecture principles to be maintainable, extensible, and
+            testable.
+          </p>
+          <h2>✨ Key Features</h2>
+          <ul>
+            <li>
+              <strong>🤖 State Machine Implementation</strong> - Complete state
+              management system with <code>Wait</code>, <code>React</code>,
+              <code>Type</code>, and <code>Sleep</code> states
+            </li>
+            <li>
+              <strong>😊 Emotional Response System</strong> - Analyzes user
+              input to determine appropriate emotional animations
+            </li>
+            <li>
+              <strong>🔄 Animation Transition Management</strong> - Smooth
+              transitions between states with fade in/out support
+            </li>
+            <li>
+              <strong>📝 Multi-Scheme Animation Naming</strong> - Supports
+              legacy, artist-friendly, hierarchical, and semantic naming schemes
+            </li>
+            <li>
+              <strong>🎨 Artist-Friendly Workflow</strong> - Blender-compatible
+              naming for 3D artists (<code>Owen_WaitIdle</code>,
+              <code>Owen_ReactHappy</code>)
+            </li>
+            <li>
+              <strong>👨‍💻 Developer Experience</strong> - Type-safe constants and
+              semantic naming (<code>OwenWaitIdleLoop</code>,
+              <code>OwenReactAngryTransition</code>)
+            </li>
+            <li>
+              <strong>🏗️ Clean Architecture</strong> - Uses dependency
+              injection, factory patterns, and separation of concerns
+            </li>
+            <li>
+              <strong>⚡ Performance Optimized</strong> - Efficient animation
+              caching and resource management
+            </li>
+            <li>
+              <strong>🧩 Extensible Design</strong> - Easy to add new states,
+              emotions, and animation types
+            </li>
+            <li>
+              <strong>🔄 Backward Compatibility</strong> - Legacy naming scheme
+              continues to work alongside new schemes
+            </li>
+          </ul>
+          <h2>🚀 Installation</h2>
+          <h3>Prerequisites</h3>
+          <ul>
+            <li>Node.js 16.0.0 or higher</li>
+            <li>
+              Three.js compatible 3D model with animations (GLTF/GLB format
+              recommended)
+            </li>
+          </ul>
+          <h3>Install Dependencies</h3>
+          <pre class="prettyprint source lang-bash"><code># Clone the repository
+git clone https://gitea.kajkowalski.nl/kjanat/Owen.git
+cd Owen
+
+# Install dependencies
+npm install
+
+# Install dev dependencies
+npm install --include dev
+</code></pre>
+          <h2>📖 Usage</h2>
+          <h3>Basic Usage</h3>
+          <pre
+            class="prettyprint source lang-javascript"
+          ><code>import * as THREE from &quot;three&quot;;
+import { GLTFLoader } from &quot;three/examples/jsm/loaders/GLTFLoader.js&quot;;
+import { OwenSystemFactory } from &quot;owen&quot;;
+
+// Load your 3D model
+const loader = new GLTFLoader();
+const gltf = await loader.loadAsync(&quot;path/to/your-model.gltf&quot;);
+
+// Create a Three.js scene
+const scene = new THREE.Scene();
+scene.add(gltf.scene);
+
+// Create the Owen animation system
+const owenSystem = await OwenSystemFactory.createOwenSystem(gltf, scene);
+
+// Handle user messages
+await owenSystem.handleUserMessage(&quot;Hello Owen!&quot;);
+
+// Update in your render loop
+function animate() {
+  const deltaTime = clock.getDelta() * 1000; // Convert to milliseconds
+  owenSystem.update(deltaTime);
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate);
+}
+</code></pre>
+          <blockquote>
+            <p>
+              [!NOTE] Replace <code>path/to/your-model.gltf</code> with the
+              actual path to your 3D character model. The system is designed to
+              work with any GLTF model that follows the animation naming
+              convention.
+            </p>
+          </blockquote>
+          <h3>Advanced Usage</h3>
+          <pre
+            class="prettyprint source lang-javascript"
+          ><code>import { OwenSystemFactory, States, Emotions, StateHandler } from &quot;owen&quot;;
+
+// Create custom state handler
+class CustomStateHandler extends StateHandler {
+  async enter(fromState, emotion) {
+    console.log(`Entering custom state from ${fromState}`);
+    // Your custom logic here
+  }
+
+  async exit(toState, emotion) {
+    console.log(`Exiting custom state to ${toState}`);
+    // Your custom logic here
+  }
+}
+
+// Register custom states
+const customStates = new Map();
+customStates.set(&quot;custom&quot;, CustomStateHandler);
+
+// Create system with custom states
+const owenSystem = await OwenSystemFactory.createCustomOwenSystem(gltfModel, scene, customStates);
+
+// Manual state transitions
+await owenSystem.transitionTo(States.REACTING, Emotions.HAPPY);
+</code></pre>
+          <h2>🎨 Multi-Scheme Animation Naming</h2>
+          <p>
+            Owen supports
+            <strong>four different animation naming schemes</strong> to
+            accommodate different workflows and preferences:
+          </p>
+          <h3>Naming Schemes</h3>
+          <table>
+            <thead>
+              <tr>
+                <th>Scheme</th>
+                <th>Format</th>
+                <th>Example</th>
+                <th>Use Case</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Legacy</strong></td>
+                <td><code>{state}_{emotion}_{type}</code></td>
+                <td><code>wait_idle_L</code></td>
+                <td>Backward compatibility</td>
+              </tr>
+              <tr>
+                <td><strong>Artist</strong></td>
+                <td><code>Owen_{Action}</code></td>
+                <td><code>Owen_WaitIdle</code></td>
+                <td>Blender-friendly for 3D artists</td>
+              </tr>
+              <tr>
+                <td><strong>Hierarchical</strong></td>
+                <td><code>owen.{category}.{state}...</code></td>
+                <td><code>owen.state.wait.idle.loop</code></td>
+                <td>Structured projects</td>
+              </tr>
+              <tr>
+                <td><strong>Semantic</strong></td>
+                <td><code>Owen{StateAction}{Type}</code></td>
+                <td><code>OwenWaitIdleLoop</code></td>
+                <td>Developer-friendly</td>
+              </tr>
+            </tbody>
+          </table>
+          <h3>Usage Examples</h3>
+          <pre
+            class="prettyprint source lang-javascript"
+          ><code>// All of these refer to the same animation:
+const clip1 = owenSystem.getClip('wait_idle_L');                    // Legacy
+const clip2 = owenSystem.getClip('Owen_WaitIdle');                  // Artist  
+const clip3 = owenSystem.getClip('owen.state.wait.idle.loop');      // Hierarchical
+const clip4 = owenSystem.getClip('OwenWaitIdleLoop');               // Semantic
+
+// Convert between schemes
+import { convertAnimationName, SemanticAnimations } from 'owen';
+
+const artistName = convertAnimationName('wait_idle_L', 'artist');
+// Returns: 'Owen_WaitIdle'
+
+// Use type-safe constants
+const animation = SemanticAnimations.WAIT_IDLE_LOOP; // 'OwenWaitIdleLoop'
+</code></pre>
+          <h3>For 3D Artists (Blender Workflow)</h3>
+          <pre
+            class="prettyprint source lang-javascript"
+          ><code>// Use artist-friendly names in Blender:
+// Owen_WaitIdle, Owen_ReactHappy, Owen_TypeFast, etc.
+// System automatically handles conversion!
+
+const clip = owenSystem.getClip('Owen_ReactAngry');  // Just works!
+</code></pre>
+          <blockquote>
+            <p>
+              [!TIP] See the
+              <a href="./MULTI_SCHEME_GUIDE.md">Multi-Scheme Guide</a> for
+              complete documentation and examples.
+            </p>
+          </blockquote>
+          <h2>🎮 Animation Naming Convention (Legacy)</h2>
+          <p>
+            The system maintains backward compatibility with the original naming
+            convention:
+          </p>
+          <p>The system expects animations to follow this naming convention:</p>
+          <pre class="prettyprint source lang-txt"><code>[state]_[action]_[type]
+[state]_[action]2[toState]_[emotion]_T
+</code></pre>
+          <h3>Examples</h3>
+          <ul>
+            <li><code>wait_idle_L</code> - Wait state idle loop</li>
+            <li><code>wait_quirk1_Q</code> - Wait state quirk animation</li>
+            <li>
+              <code>react_angry2type_an_T</code> - Transition from react to type
+              with angry emotion
+            </li>
+            <li>
+              <code>type_happy_L</code> - Type state with happy emotion loop
+            </li>
+            <li><code>sleep_wakeup_T</code> - Sleep wake up transition</li>
+          </ul>
+          <h3>Animation Types</h3>
+          <ul>
+            <li><code>L</code> - Loop animation</li>
+            <li><code>Q</code> - Quirk animation</li>
+            <li><code>T</code> - Transition animation</li>
+            <li><code>NL</code> - Nested loop</li>
+            <li><code>NQ</code> - Nested quirk</li>
+          </ul>
+          <h3>Emotions</h3>
+          <ul>
+            <li><code>an</code> - Angry</li>
+            <li><code>sh</code> - Shocked</li>
+            <li><code>ha</code> - Happy</li>
+            <li><code>sa</code> - Sad</li>
+          </ul>
+          <h2>🏗️ Architecture</h2>
+          <h3><strong>Dependency Injection</strong></h3>
+          <ul>
+            <li>
+              <code>OwenAnimationContext</code> receives dependencies through
+              constructor injection
+            </li>
+            <li>State handlers are injected with required context</li>
+            <li>Animation loaders are injected into factories</li>
+          </ul>
+          <h3><strong>Factory Patterns</strong></h3>
+          <ul>
+            <li>
+              <code>AnimationClipFactory</code> - Creates animation clips with
+              metadata parsing
+            </li>
+            <li>
+              <code>StateFactory</code> - Creates state handlers dynamically
+            </li>
+            <li>
+              <code>OwenSystemFactory</code> - Main factory that assembles the
+              complete system
+            </li>
+          </ul>
+          <h3><strong>State Machine</strong></h3>
+          <ul>
+            <li>Each state has its own handler class with entry/exit logic</li>
+            <li>States manage their own transitions and behaviors</li>
+            <li>
+              Emotional transitions are handled with proper animation sequencing
+            </li>
+          </ul>
+          <h2>📁 Project Structure</h2>
+          <pre class="prettyprint source lang-sh"><code>Owen/
+├── src/
+│   ├── constants.js              # Animation types, states, emotions
+│   ├── index.js                  # Main entry point
+│   ├── animation/
+│   │   └── AnimationClip.js      # Core animation classes
+│   ├── core/
+│   │   └── OwenAnimationContext.js # Main system controller
+│   ├── factories/
+│   │   └── OwenSystemFactory.js  # System factory
+│   ├── loaders/
+│   │   └── AnimationLoader.js    # Animation loading interfaces
+│   └── states/
+│       ├── StateHandler.js       # Base state handler
+│       ├── StateFactory.js       # State factory
+│       ├── WaitStateHandler.js   # Wait state implementation
+│       ├── ReactStateHandler.js  # React state implementation
+│       ├── TypeStateHandler.js   # Type state implementation
+│       └── SleepStateHandler.js  # Sleep state implementation
+├── examples/
+│   ├── index.html        # Demo HTML page
+│   └── basic-demo.js     # Basic usage example
+├── package.json
+├── vite.config.js
+├── jsdoc.config.json
+└── README.md
+</code></pre>
+          <h2>🛠️ Development</h2>
+          <h3>Running the Development Server</h3>
+          <pre
+            class="prettyprint source lang-bash"
+          ><code># Start the development server
+npm run dev
+</code></pre>
+          <p>
+            This will start a Vite development server and open the basic demo at
+            <code>http://localhost:3000</code>.
+          </p>
+          <h3>Building for Production</h3>
+          <pre class="prettyprint source lang-bash"><code># Build the project
+npm run build
+</code></pre>
+          <h3>Linting</h3>
+          <pre class="prettyprint source lang-bash"><code># Run ESLint
+npm run lint
+
+# Fix linting issues automatically
+npm run lint:fix
+</code></pre>
+          <h3>Generating Documentation</h3>
+          <pre
+            class="prettyprint source lang-bash"
+          ><code># Generate JSDoc documentation
+npm run docs
+</code></pre>
+          <p>
+            Documentation will be generated in the <code>docs/</code> directory.
+          </p>
+          <h3>Project Scripts</h3>
+          <ul>
+            <li><code>npm run dev</code> - Start development server</li>
+            <li><code>npm run build</code> - Build for production</li>
+            <li><code>npm run preview</code> - Preview production build</li>
+            <li><code>npm run lint</code> - Run StandardJS linting</li>
+            <li><code>npm run lint:fix</code> - Fix StandardJS issues</li>
+            <li><code>npm run docs</code> - Generate JSDoc documentation</li>
+            <li><code>npm run format</code> - Format code with Prettier</li>
+          </ul>
+          <h2>🎮 Demo Controls</h2>
+          <p>The basic demo includes these keyboard controls:</p>
+          <ul>
+            <li><strong>1</strong> - Transition to Wait state</li>
+            <li><strong>2</strong> - Transition to React state</li>
+            <li><strong>3</strong> - Transition to Type state</li>
+            <li><strong>4</strong> - Transition to Sleep state</li>
+            <li><strong>Space</strong> - Send random test message</li>
+            <li><strong>Click</strong> - Register user activity</li>
+          </ul>
+          <h2>🔧 Configuration</h2>
+          <h3>Customizing Emotions</h3>
+          <p>
+            You can extend the emotion system by modifying the message analysis:
+          </p>
+          <pre
+            class="prettyprint source lang-javascript"
+          ><code>import { ReactStateHandler } from &quot;owen&quot;;
+
+class CustomReactHandler extends ReactStateHandler {
+  analyzeMessageEmotion(message) {
+    // Your custom emotion analysis logic
+    if (message.includes(&quot;excited&quot;)) {
+      return Emotions.HAPPY;
+    }
+    return super.analyzeMessageEmotion(message);
+  }
+}
+</code></pre>
+          <h3>Adjusting Timing</h3>
+          <p>Configure timing values in your application:</p>
+          <pre
+            class="prettyprint source lang-javascript"
+          ><code>import { Config } from &quot;owen&quot;;
+
+// Modify default values
+Config.QUIRK_INTERVAL = 8000; // 8 seconds between quirks
+Config.INACTIVITY_TIMEOUT = 120000; // 2 minutes until sleep
+</code></pre>
+          <h2>🐛 Troubleshooting</h2>
+          <h3>Common Issues</h3>
+          <ol>
+            <li><strong>&quot;Animation not found&quot; errors</strong></li>
+          </ol>
+          <ul>
+            <li>
+              Ensure your 3D model contains animations with the correct naming
+              convention
+            </li>
+            <li>
+              Check that animations are properly exported in your GLTF file
+            </li>
+          </ul>
+          <ol start="2">
+            <li><strong>State transitions not working</strong></li>
+          </ol>
+          <ul>
+            <li>Verify that transition animations exist in your model</li>
+            <li>Check console for error messages about missing clips</li>
+          </ul>
+          <ol start="3">
+            <li><strong>Performance issues</strong></li>
+          </ol>
+          <ul>
+            <li>
+              Ensure you're calling <code>owenSystem.update()</code> in your
+              render loop
+            </li>
+            <li>Check that unused animations are properly disposed</li>
+          </ul>
+          <h3>Debug Mode</h3>
+          <p>
+            Enable debug logging by opening browser console. The system logs
+            state transitions and important events.
+          </p>
+          <h2>🤝 Contributing</h2>
+          <ol>
+            <li>Fork the repository</li>
+            <li>
+              Create a feature branch:
+              <code>git checkout -b feature/new-feature</code>
+            </li>
+            <li>
+              Commit your changes: <code>git commit -am 'Add new feature'</code>
+            </li>
+            <li>
+              Push to the branch:
+              <code>git push origin feature/new-feature</code>
+            </li>
+            <li>Submit a pull request</li>
+          </ol>
+          <h3>Code Style</h3>
+          <ul>
+            <li>Follow the existing ESLint configuration</li>
+            <li>Add JSDoc comments for all public methods</li>
+            <li>Write unit tests for new features</li>
+            <li>Maintain the existing architecture patterns</li>
+          </ul>
+          <h2>📄 License</h2>
+          <p>This project is dual-licensed under your choice of:</p>
+          <ul>
+            <li>
+              <strong>Open Source/Non-Commercial Use</strong>: AGPL-3.0 - see
+              the <a href="LICENSE.AGPL">LICENSE.AGPL</a> file for details.
+            </li>
+            <li>
+              <strong>Commercial/Enterprise Use</strong>: Commercial License -
+              see the <a href="LICENSE.COMMERCIAL">LICENSE.COMMERCIAL</a> file
+              for details. Requires a paid commercial license. Please contact us
+              at [email] for pricing and terms.
+            </li>
+          </ul>
+          <h3>Quick Guide</h3>
+          <ul>
+            <li>✅ Personal/educational use → Use under AGPL-3.0</li>
+            <li>✅ Open source projects → Use under AGPL-3.0</li>
+            <li>✅ Commercial/proprietary use → Purchase commercial license</li>
+            <li>
+              ❌ SaaS without source disclosure → Purchase commercial license
+            </li>
+          </ul>
+          <h2>🙏 Acknowledgments</h2>
+          <ul>
+            <li>
+              Built with
+              <a
+                href="https://threejs.org/"
+                title="Three.js - JavaScript 3D Library"
+                >Three.js</a
+              >
+            </li>
+            <li>Inspired by modern character animation systems</li>
+            <li>Uses clean architecture principles from Robert C. Martin</li>
+          </ul>
+          <!-- LINK DEFINITIONS -->
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/index.js.html

@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: index.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: index.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Main entry point for the Owen Animation System
+ * @module owen
+ */
+
+// Core exports
+// Import for default export
+import { OwenSystemFactory } from './factories/OwenSystemFactory.js'
+import { OwenAnimationContext } from './core/OwenAnimationContext.js'
+import { States, Emotions, ClipTypes, Config } from './constants.js'
+
+export { OwenAnimationContext } from './core/OwenAnimationContext.js'
+
+// Animation system exports
+export { AnimationClip, AnimationClipFactory } from './animation/AnimationClip.js'
+
+// Multi-scheme animation naming exports
+export { AnimationNameMapper } from './animation/AnimationNameMapper.js'
+export {
+  LegacyAnimations,
+  ArtistAnimations,
+  HierarchicalAnimations,
+  SemanticAnimations,
+  NamingSchemes,
+  convertAnimationName,
+  getAllAnimationNames,
+  validateAnimationName,
+  getAnimationsByStateAndEmotion
+} from './animation/AnimationConstants.js'
+
+// Loader exports
+export { AnimationLoader, GLTFAnimationLoader } from './loaders/AnimationLoader.js'
+
+// State system exports
+export { StateHandler } from './states/StateHandler.js'
+export { WaitStateHandler } from './states/WaitStateHandler.js'
+export { ReactStateHandler } from './states/ReactStateHandler.js'
+export { TypeStateHandler } from './states/TypeStateHandler.js'
+export { SleepStateHandler } from './states/SleepStateHandler.js'
+export { StateFactory } from './states/StateFactory.js'
+
+// Factory exports
+export { OwenSystemFactory } from './factories/OwenSystemFactory.js'
+
+// Constants exports
+export { ClipTypes, States, Emotions, Config } from './constants.js'
+
+/**
+ * Default export - the main factory for easy usage
+ */
+export default {
+  OwenSystemFactory,
+  OwenAnimationContext,
+  States,
+  Emotions,
+  ClipTypes,
+  Config
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/loaders_AnimationLoader.js.html

@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: loaders/AnimationLoader.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: loaders/AnimationLoader.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Animation loader interfaces and implementations
+ * @module loaders
+ */
+
+/**
+ * Abstract base class for animation loaders
+ * @abstract
+ * @class
+ */
+export class AnimationLoader {
+  /**
+     * Load an animation by name
+     * @abstract
+     * @param {string} _name - The animation name to load (unused in base class)
+     * @returns {Promise&lt;THREE.AnimationClip>} The loaded animation clip
+     * @throws {Error} Must be implemented by subclasses
+     */
+  async loadAnimation (_name) {
+    throw new Error('loadAnimation method must be implemented by subclasses')
+  }
+}
+
+/**
+ * GLTF animation loader implementation
+ * @class
+ * @extends AnimationLoader
+ */
+export class GLTFAnimationLoader extends AnimationLoader {
+  /**
+     * Create a GLTF animation loader
+     * @param {THREE.GLTFLoader} gltfLoader - The Three.js GLTF loader instance
+     */
+  constructor (gltfLoader) {
+    super()
+
+    /**
+         * The Three.js GLTF loader
+         * @type {THREE.GLTFLoader}
+         */
+    this.gltfLoader = gltfLoader
+
+    /**
+         * Cache for loaded animations
+         * @type {Map&lt;string, THREE.AnimationClip>}
+         */
+    this.animationCache = new Map()
+  }
+
+  /**
+     * Load an animation from GLTF by name
+     * @param {string} name - The animation name to load
+     * @returns {Promise&lt;THREE.AnimationClip>} The loaded animation clip
+     * @throws {Error} If animation is not found
+     */
+  async loadAnimation (name) {
+    if (this.animationCache.has(name)) {
+      return this.animationCache.get(name)
+    }
+
+    // In a real implementation, this would load from GLTF files
+    // For now, we'll assume animations are already loaded in the model
+    throw new Error(`Animation '${name}' not found. Implement GLTF loading logic.`)
+  }
+
+  /**
+     * Preload animations from a GLTF model
+     * @param {Object} gltfModel - The loaded GLTF model
+     * @returns {Promise&lt;void>}
+     */
+  async preloadAnimations (gltfModel) {
+    if (gltfModel.animations) {
+      for (const animation of gltfModel.animations) {
+        this.animationCache.set(animation.name, animation)
+      }
+    }
+  }
+
+  /**
+     * Clear the animation cache
+     * @returns {void}
+     */
+  clearCache () {
+    this.animationCache.clear()
+  }
+
+  /**
+     * Get all cached animation names
+     * @returns {string[]} Array of cached animation names
+     */
+  getCachedAnimationNames () {
+    return Array.from(this.animationCache.keys())
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-StateHandler.StateHandler.html

@@ -0,0 +1,839 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: StateHandler</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: StateHandler</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"
+              ><span class="type-signature">(abstract) </span></span
+            >
+            <span class="ancestors"
+              ><a href="module-StateHandler.html">StateHandler</a>.</span
+            >StateHandler<span class="signature">(stateName, context)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Abstract base class for state handlers</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="StateHandler">
+              <span class="type-signature">(abstract) </span>new
+              StateHandler<span class="signature">(stateName, context)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a state handler</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>stateName</code></td>
+
+                  <td class="type">
+                    <span class="param-type">string</span>
+                  </td>
+
+                  <td class="description last"><p>The name of the state</p></td>
+                </tr>
+
+                <tr>
+                  <td class="name"><code>context</code></td>
+
+                  <td class="type">
+                    <span class="param-type">OwenAnimationContext</span>
+                  </td>
+
+                  <td class="description last"><p>The animation context</p></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateHandler.js.html"
+                      >states/StateHandler.js</a
+                    >, <a href="states_StateHandler.js.html#line13">line 13</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="context">
+            <span class="type-signature"></span>context<span
+              class="type-signature"
+            >
+              :OwenAnimationContext</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The animation context</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">OwenAnimationContext</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line30">line 30</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="currentClip">
+            <span class="type-signature"></span>currentClip<span
+              class="type-signature"
+            >
+              :AnimationClip|null</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Currently playing animation clip</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">AnimationClip</span>
+              |
+
+              <span class="param-type">null</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line36">line 36</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="nestedState">
+            <span class="type-signature"></span>nestedState<span
+              class="type-signature"
+            >
+              :Object|null</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Nested state information</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">Object</span>
+              |
+
+              <span class="param-type">null</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line42">line 42</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="stateName">
+            <span class="type-signature"></span>stateName<span
+              class="type-signature"
+            >
+              :string</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The name of this state</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line24">line 24</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="enter">
+            <span class="type-signature">(async, abstract) </span>enter<span
+              class="signature"
+              >(_fromState<span class="signature-attributes">opt</span>,
+              _emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Enter this state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_fromState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last">
+                  <p>The previous state (unused in base class)</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>_emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to enter with (unused in base class)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line53">line 53</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Throws:</h5>
+
+          <dl>
+            <dt>
+              <div class="param-desc">
+                <p>Must be implemented by subclasses</p>
+              </div>
+            </dt>
+            <dd></dd>
+            <dt>
+              <dl>
+                <dt>Type</dt>
+                <dd>
+                  <span class="param-type">Error</span>
+                </dd>
+              </dl>
+            </dt>
+            <dd></dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="exit">
+            <span class="type-signature">(async, abstract) </span>exit<span
+              class="signature"
+              >(_toState<span class="signature-attributes">opt</span>,
+              _emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Exit this state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_toState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last">
+                  <p>The next state (unused in base class)</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>_emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to exit with (unused in base class)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line65">line 65</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Throws:</h5>
+
+          <dl>
+            <dt>
+              <div class="param-desc">
+                <p>Must be implemented by subclasses</p>
+              </div>
+            </dt>
+            <dd></dd>
+            <dt>
+              <dl>
+                <dt>Type</dt>
+                <dd>
+                  <span class="param-type">Error</span>
+                </dd>
+              </dl>
+            </dt>
+            <dd></dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAvailableTransitions">
+            <span class="type-signature"></span>getAvailableTransitions<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get available transitions from this state</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line91">line 91</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of state names that can be transitioned to</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="handleMessage">
+            <span class="type-signature">(async) </span>handleMessage<span
+              class="signature"
+              >(_message)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Handle a user message while in this state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_message</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The user message (unused in base class)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line83">line 83</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="stopCurrentClip">
+            <span class="type-signature">(async, protected) </span
+            >stopCurrentClip<span class="signature"
+              >(fadeOutDuration<span class="signature-attributes">opt</span
+              >)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Stop the currently playing clip</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>fadeOutDuration</code></td>
+
+                <td class="type">
+                  <span class="param-type">number</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="description last"><p>Fade out duration</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line120">line 120</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="update">
+            <span class="type-signature"></span>update<span class="signature"
+              >(_deltaTime)</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Update this state (called every frame)</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_deltaTime</code></td>
+
+                <td class="type">
+                  <span class="param-type">number</span>
+                </td>
+
+                <td class="description last">
+                  <p>
+                    Time elapsed since last update (ms, unused in base class)
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line74">line 74</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="waitForClipEnd">
+            <span class="type-signature">(async, protected) </span
+            >waitForClipEnd<span class="signature">(clip)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Wait for an animation clip to finish playing</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>clip</code></td>
+
+                <td class="type">
+                  <span class="param-type">AnimationClip</span>
+                </td>
+
+                <td class="description last">
+                  <p>The animation clip to wait for</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateHandler.js.html"
+                    >states/StateHandler.js</a
+                  >, <a href="states_StateHandler.js.html#line101">line 101</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Promise that resolves when the clip finishes</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-StateHandler.html

@@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: StateHandler</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: StateHandler</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Base state handler class and utilities</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateHandler.js.html"
+                      >states/StateHandler.js</a
+                    >, <a href="states_StateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-animation.AnimationClip.html

@@ -0,0 +1,639 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: AnimationClip</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: AnimationClip</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-animation.html">animation</a>.</span
+            >AnimationClip<span class="signature"
+              >(name, threeAnimation, metadata)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>
+              Represents a single animation clip with metadata and Three.js
+              action
+            </p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="AnimationClip">
+              <span class="type-signature"></span>new AnimationClip<span
+                class="signature"
+                >(name, threeAnimation, metadata)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create an animation clip</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>name</code></td>
+
+                  <td class="type">
+                    <span class="param-type">string</span>
+                  </td>
+
+                  <td class="description last">
+                    <p>The name of the animation clip</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td class="name"><code>threeAnimation</code></td>
+
+                  <td class="type">
+                    <span class="param-type">THREE.AnimationClip</span>
+                  </td>
+
+                  <td class="description last">
+                    <p>The Three.js animation clip</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td class="name"><code>metadata</code></td>
+
+                  <td class="type">
+                    <span class="param-type">Object</span>
+                  </td>
+
+                  <td class="description last">
+                    <p>Parsed metadata from animation name</p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="animation_AnimationClip.js.html"
+                      >animation/AnimationClip.js</a
+                    >,
+                    <a href="animation_AnimationClip.js.html#line13">line 13</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="action">
+            <span class="type-signature"></span>action<span
+              class="type-signature"
+            >
+              :THREE.AnimationAction|null</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The Three.js animation action</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">THREE.AnimationAction</span>
+              |
+
+              <span class="param-type">null</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line43">line 43</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="animation">
+            <span class="type-signature"></span>animation<span
+              class="type-signature"
+            >
+              :THREE.AnimationClip</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The Three.js animation clip</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">THREE.AnimationClip</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line31">line 31</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="metadata">
+            <span class="type-signature"></span>metadata<span
+              class="type-signature"
+            >
+              :Object</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Parsed metadata about the animation</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">Object</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line37">line 37</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="mixer">
+            <span class="type-signature"></span>mixer<span
+              class="type-signature"
+            >
+              :THREE.AnimationMixer|null</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The animation mixer</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">THREE.AnimationMixer</span>
+              |
+
+              <span class="param-type">null</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line49">line 49</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="name">
+            <span class="type-signature"></span>name<span
+              class="type-signature"
+            >
+              :string</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The name of the animation clip</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line25">line 25</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="createAction">
+            <span class="type-signature"></span>createAction<span
+              class="signature"
+              >(mixer)</span
+            ><span class="type-signature"> &rarr; {THREE.AnimationAction}</span>
+          </h4>
+
+          <div class="description">
+            <p>Create and configure a Three.js action for this clip</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>mixer</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.AnimationMixer</span>
+                </td>
+
+                <td class="description last"><p>The animation mixer</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line57">line 57</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The created action</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">THREE.AnimationAction</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="isPlaying">
+            <span class="type-signature"></span>isPlaying<span class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {boolean}</span>
+          </h4>
+
+          <div class="description">
+            <p>Check if the animation is currently playing</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line108">line 108</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>True if playing, false otherwise</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">boolean</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="play">
+            <span class="type-signature"></span>play<span class="signature"
+              >(fadeInDuration<span class="signature-attributes">opt</span
+              >)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Play the animation with optional fade in</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>fadeInDuration</code></td>
+
+                <td class="type">
+                  <span class="param-type">number</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">0.3</td>
+
+                <td class="description last">
+                  <p>Fade in duration in seconds</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line80">line 80</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Promise that resolves when fade in completes</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="stop">
+            <span class="type-signature"></span>stop<span class="signature"
+              >(fadeOutDuration<span class="signature-attributes">opt</span
+              >)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Stop the animation with optional fade out</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>fadeOutDuration</code></td>
+
+                <td class="type">
+                  <span class="param-type">number</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">0.3</td>
+
+                <td class="description last">
+                  <p>Fade out duration in seconds</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line93">line 93</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Promise that resolves when fade out completes</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-animation.AnimationClipFactory.html

@@ -0,0 +1,567 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: AnimationClipFactory</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: AnimationClipFactory</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-animation.html">animation</a>.</span
+            >AnimationClipFactory<span class="signature">(animationLoader)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Factory for creating animation clips with parsed metadata</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="AnimationClipFactory">
+              <span class="type-signature"></span>new AnimationClipFactory<span
+                class="signature"
+                >(animationLoader)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create an animation clip factory</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>animationLoader</code></td>
+
+                  <td class="type">
+                    <span class="param-type">AnimationLoader</span>
+                  </td>
+
+                  <td class="description last">
+                    <p>The animation loader instance</p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="animation_AnimationClip.js.html"
+                      >animation/AnimationClip.js</a
+                    >,
+                    <a href="animation_AnimationClip.js.html#line117"
+                      >line 117</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="animationLoader">
+            <span class="type-signature"></span>animationLoader<span
+              class="type-signature"
+            >
+              :AnimationLoader</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The animation loader for loading animation data</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">AnimationLoader</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line127">line 127</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="clipCache">
+            <span class="type-signature"></span>clipCache<span
+              class="type-signature"
+            >
+              :Map.&lt;string, AnimationClip></span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Cache for created animation clips</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">Map.&lt;string, AnimationClip></span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line133">line 133</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="clearCache">
+            <span class="type-signature"></span>clearCache<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Clear the clip cache</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line245">line 245</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="createClip">
+            <span class="type-signature">(async) </span>createClip<span
+              class="signature"
+              >(name)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;AnimationClip>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Create an animation clip from a name</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The animation name</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line210">line 210</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The created animation clip</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;AnimationClip></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="createClipsFromModel">
+            <span class="type-signature">(async) </span
+            >createClipsFromModel<span class="signature">(model)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;Map.&lt;string, AnimationClip>>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Create all animation clips from a model's animations</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>model</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.Object3D</span>
+                </td>
+
+                <td class="description last">
+                  <p>The 3D model containing animations</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line229">line 229</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Map of animation name to clip</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type"
+                >Promise.&lt;Map.&lt;string, AnimationClip>></span
+              >
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getCachedClip">
+            <span class="type-signature"></span>getCachedClip<span
+              class="signature"
+              >(name)</span
+            ><span class="type-signature">
+              &rarr; {AnimationClip|undefined}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Get cached clip by name</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The animation name</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line254">line 254</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The cached clip or undefined</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">AnimationClip</span>
+              |
+
+              <span class="param-type">undefined</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="parseAnimationName">
+            <span class="type-signature"></span>parseAnimationName<span
+              class="signature"
+              >(name)</span
+            ><span class="type-signature"> &rarr; {Object}</span>
+          </h4>
+
+          <div class="description">
+            <p>
+              Parse animation name and create clip metadata Format:
+              [state]<em>[action]</em>[type] or
+              [state]<em>[action]2[toState]</em>[emotion]_T
+            </p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The animation name to parse</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationClip.js.html"
+                    >animation/AnimationClip.js</a
+                  >,
+                  <a href="animation_AnimationClip.js.html#line142">line 142</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Parsed metadata object</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-animation.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: animation</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: animation</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Core animation classes for clip management and creation</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="animation_AnimationClip.js.html"
+                      >animation/AnimationClip.js</a
+                    >,
+                    <a href="animation_AnimationClip.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-animation.AnimationClip.html">AnimationClip</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-animation.AnimationClipFactory.html"
+                >AnimationClipFactory</a
+              >
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-animation_AnimationConstants.html

@@ -0,0 +1,576 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: animation/AnimationConstants</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: animation/AnimationConstants</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>
+                Animation constants with multi-scheme support for Owen Animation
+                System
+              </p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="animation_AnimationConstants.js.html"
+                      >animation/AnimationConstants.js</a
+                    >,
+                    <a href="animation_AnimationConstants.js.html#line1"
+                      >line 1</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id=".ArtistAnimations">
+            <span class="type-signature">(static, constant) </span
+            >ArtistAnimations<span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            <p>Artist-friendly animation names (Blender workflow)</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line70"
+                    >line 70</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".HierarchicalAnimations">
+            <span class="type-signature">(static, constant) </span
+            >HierarchicalAnimations<span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            <p>Hierarchical animation names (organized structure)</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line125"
+                    >line 125</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".LegacyAnimations">
+            <span class="type-signature">(static, constant) </span
+            >LegacyAnimations<span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            <p>Legacy animation names (backward compatibility)</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line15"
+                    >line 15</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".NamingSchemes">
+            <span class="type-signature">(static, constant) </span
+            >NamingSchemes<span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            <p>Animation naming schemes enumeration</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line235"
+                    >line 235</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".SemanticAnimations">
+            <span class="type-signature">(static, constant) </span
+            >SemanticAnimations<span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            <p>Semantic animation names (readable camelCase)</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line180"
+                    >line 180</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id=".convertAnimationName">
+            <span class="type-signature">(static) </span
+            >convertAnimationName<span class="signature"
+              >(name, targetScheme)</span
+            ><span class="type-signature"> &rarr; {string}</span>
+          </h4>
+
+          <div class="description">
+            <p>Convert animation name between different schemes</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The source animation name</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>targetScheme</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The target naming scheme</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line248"
+                    >line 248</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The converted animation name</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">string</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".getAllAnimationNames">
+            <span class="type-signature">(static) </span
+            >getAllAnimationNames<span class="signature">(name)</span
+            ><span class="type-signature"> &rarr; {Object}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get all naming scheme variants for an animation</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The source animation name</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line257"
+                    >line 257</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Object with all scheme variants</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".getAnimationsByStateAndEmotion">
+            <span class="type-signature">(static) </span
+            >getAnimationsByStateAndEmotion<span class="signature"
+              >(state, emotion, scheme)</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get animations by state and emotion</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>state</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The state name</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The emotion name (optional)</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>scheme</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The naming scheme to return (default: 'semantic')</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line277"
+                    >line 277</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of animation names</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".validateAnimationName">
+            <span class="type-signature">(static) </span
+            >validateAnimationName<span class="signature">(name)</span
+            ><span class="type-signature"> &rarr; {Object}</span>
+          </h4>
+
+          <div class="description">
+            <p>Validate an animation name</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The animation name to validate</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationConstants.js.html"
+                    >animation/AnimationConstants.js</a
+                  >,
+                  <a href="animation_AnimationConstants.js.html#line266"
+                    >line 266</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Validation result</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-animation_AnimationNameMapper.AnimationNameMapper.html

@@ -0,0 +1,533 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: AnimationNameMapper</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: AnimationNameMapper</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-animation_AnimationNameMapper.html"
+                >animation/AnimationNameMapper</a
+              >.</span
+            >AnimationNameMapper<span class="signature">()</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>
+              Multi-scheme animation name mapper for Owen Animation System
+              Supports legacy, artist-friendly, and hierarchical naming schemes
+            </p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="AnimationNameMapper">
+              <span class="type-signature"></span>new AnimationNameMapper<span
+                class="signature"
+                >()</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="animation_AnimationNameMapper.js.html"
+                      >animation/AnimationNameMapper.js</a
+                    >,
+                    <a href="animation_AnimationNameMapper.js.html#line11"
+                      >line 11</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="convert">
+            <span class="type-signature"></span>convert<span class="signature"
+              >(fromName, targetScheme)</span
+            ><span class="type-signature"> &rarr; {string}</span>
+          </h4>
+
+          <div class="description">
+            <p>Convert any animation name to any other scheme</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>fromName</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="default"></td>
+
+                <td class="description last"><p>Source animation name</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>targetScheme</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="default">hierarchical</td>
+
+                <td class="description last">
+                  <p>
+                    Target naming scheme ('legacy', 'artist', 'hierarchical',
+                    'semantic')
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationNameMapper.js.html"
+                    >animation/AnimationNameMapper.js</a
+                  >,
+                  <a href="animation_AnimationNameMapper.js.html#line355"
+                    >line 355</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Converted animation name</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">string</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="convertBatch">
+            <span class="type-signature"></span>convertBatch<span
+              class="signature"
+              >(animations, targetScheme)</span
+            ><span class="type-signature"> &rarr; {Object}</span>
+          </h4>
+
+          <div class="description">
+            <p>Batch convert multiple animations</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>animations</code></td>
+
+                <td class="type">
+                  <span class="param-type">Array.&lt;string></span>
+                </td>
+
+                <td class="description last">
+                  <p>Array of animation names</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>targetScheme</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>Target naming scheme</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationNameMapper.js.html"
+                    >animation/AnimationNameMapper.js</a
+                  >,
+                  <a href="animation_AnimationNameMapper.js.html#line556"
+                    >line 556</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Mapping of original names to converted names</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="detectScheme">
+            <span class="type-signature"></span>detectScheme<span
+              class="signature"
+              >(name)</span
+            ><span class="type-signature"> &rarr; {Object|null}</span>
+          </h4>
+
+          <div class="description">
+            <p>Detect which naming scheme is being used</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>Animation name to analyze</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationNameMapper.js.html"
+                    >animation/AnimationNameMapper.js</a
+                  >,
+                  <a href="animation_AnimationNameMapper.js.html#line377"
+                    >line 377</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Detection result with scheme and extracted info</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+              |
+
+              <span class="param-type">null</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAllNames">
+            <span class="type-signature"></span>getAllNames<span
+              class="signature"
+              >(animationName)</span
+            ><span class="type-signature"> &rarr; {Object}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get all possible names for an animation</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>animationName</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>Source animation name</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationNameMapper.js.html"
+                    >animation/AnimationNameMapper.js</a
+                  >,
+                  <a href="animation_AnimationNameMapper.js.html#line539"
+                    >line 539</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Object with all naming scheme variants</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="validateAnimationName">
+            <span class="type-signature"></span>validateAnimationName<span
+              class="signature"
+              >(name)</span
+            ><span class="type-signature"> &rarr; {Object}</span>
+          </h4>
+
+          <div class="description">
+            <p>Validate animation name format</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>Animation name to validate</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="animation_AnimationNameMapper.js.html"
+                    >animation/AnimationNameMapper.js</a
+                  >,
+                  <a href="animation_AnimationNameMapper.js.html#line569"
+                    >line 569</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Validation result with issues and suggestions</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Object</span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-animation_AnimationNameMapper.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: animation/AnimationNameMapper</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: animation/AnimationNameMapper</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>
+                Multi-scheme animation name mapper for Owen Animation System
+              </p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="animation_AnimationNameMapper.js.html"
+                      >animation/AnimationNameMapper.js</a
+                    >,
+                    <a href="animation_AnimationNameMapper.js.html#line1"
+                      >line 1</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a
+                href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+                >AnimationNameMapper</a
+              >
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-constants.html

@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: constants</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: constants</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Animation system constants and enumerations</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="constants.js.html">constants.js</a>,
+                    <a href="constants.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id=".ClipTypes">
+            <span class="type-signature">(static, constant) </span
+            >ClipTypes<span class="type-signature"> :string</span>
+          </h4>
+
+          <div class="description">
+            <p>Animation clip types based on naming convention</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="constants.js.html">constants.js</a>,
+                  <a href="constants.js.html#line11">line 11</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".Config">
+            <span class="type-signature">(static, constant) </span>Config<span
+              class="type-signature"
+            >
+              :Object</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Default configuration values</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">Object</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="constants.js.html">constants.js</a>,
+                  <a href="constants.js.html#line67">line 67</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".Emotions">
+            <span class="type-signature">(static, constant) </span>Emotions<span
+              class="type-signature"
+            >
+              :string</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Character emotional states</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="constants.js.html">constants.js</a>,
+                  <a href="constants.js.html#line49">line 49</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".States">
+            <span class="type-signature">(static, constant) </span>States<span
+              class="type-signature"
+            >
+              :string</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Character animation states</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="constants.js.html">constants.js</a>,
+                  <a href="constants.js.html#line33">line 33</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-core.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: core</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: core</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Main animation context controller</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="core_OwenAnimationContext.js.html"
+                      >core/OwenAnimationContext.js</a
+                    >,
+                    <a href="core_OwenAnimationContext.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-core.OwenAnimationContext.html"
+                >OwenAnimationContext</a
+              >
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-factories.OwenSystemFactory.html

@@ -0,0 +1,455 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: OwenSystemFactory</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: OwenSystemFactory</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-factories.html">factories</a>.</span
+            >OwenSystemFactory<span class="signature">()</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Main factory for creating the complete Owen animation system</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="OwenSystemFactory">
+              <span class="type-signature"></span>new OwenSystemFactory<span
+                class="signature"
+                >()</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="factories_OwenSystemFactory.js.html"
+                      >factories/OwenSystemFactory.js</a
+                    >,
+                    <a href="factories_OwenSystemFactory.js.html#line16"
+                      >line 16</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id=".createBasicOwenSystem">
+            <span class="type-signature">(async, static) </span
+            >createBasicOwenSystem<span class="signature">(model)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;OwenAnimationContext>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Create a basic Owen system with minimal configuration</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>model</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.Object3D</span>
+                </td>
+
+                <td class="description last"><p>The 3D model</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="factories_OwenSystemFactory.js.html"
+                    >factories/OwenSystemFactory.js</a
+                  >,
+                  <a href="factories_OwenSystemFactory.js.html#line63"
+                    >line 63</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The configured Owen system</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;OwenAnimationContext></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".createCustomOwenSystem">
+            <span class="type-signature">(async, static) </span
+            >createCustomOwenSystem<span class="signature"
+              >(gltfModel, scene, customStates)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;OwenAnimationContext>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Create an Owen system with custom state handlers</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>gltfModel</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.Object3D</span>
+                </td>
+
+                <td class="description last"><p>The loaded GLTF model</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>scene</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.Scene</span>
+                </td>
+
+                <td class="description last"><p>The Three.js scene</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>customStates</code></td>
+
+                <td class="type">
+                  <span class="param-type">Map.&lt;string, function()></span>
+                </td>
+
+                <td class="description last">
+                  <p>Map of state name to handler class</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="factories_OwenSystemFactory.js.html"
+                    >factories/OwenSystemFactory.js</a
+                  >,
+                  <a href="factories_OwenSystemFactory.js.html#line77"
+                    >line 77</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The configured Owen system</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;OwenAnimationContext></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".createOwenSystem">
+            <span class="type-signature">(async, static) </span
+            >createOwenSystem<span class="signature"
+              >(gltfModel, scene, options<span class="signature-attributes"
+                >opt</span
+              >)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;OwenAnimationContext>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Create a complete Owen animation system</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>gltfModel</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.Object3D</span>
+                </td>
+
+                <td class="attributes"></td>
+
+                <td class="default"></td>
+
+                <td class="description last"><p>The loaded GLTF model</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>scene</code></td>
+
+                <td class="type">
+                  <span class="param-type">THREE.Scene</span>
+                </td>
+
+                <td class="attributes"></td>
+
+                <td class="default"></td>
+
+                <td class="description last"><p>The Three.js scene</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>options</code></td>
+
+                <td class="type">
+                  <span class="param-type">Object</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">{}</td>
+
+                <td class="description last">
+                  <p>Configuration options</p>
+                  <h6>Properties</h6>
+
+                  <table class="params">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+
+                        <th>Type</th>
+
+                        <th>Attributes</th>
+
+                        <th class="last">Description</th>
+                      </tr>
+                    </thead>
+
+                    <tbody>
+                      <tr>
+                        <td class="name"><code>gltfLoader</code></td>
+
+                        <td class="type">
+                          <span class="param-type">THREE.GLTFLoader</span>
+                        </td>
+
+                        <td class="attributes">&lt;optional><br /></td>
+
+                        <td class="description last">
+                          <p>Custom GLTF loader</p>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="factories_OwenSystemFactory.js.html"
+                    >factories/OwenSystemFactory.js</a
+                  >,
+                  <a href="factories_OwenSystemFactory.js.html#line25"
+                    >line 25</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The configured Owen system</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;OwenAnimationContext></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-factories.html

@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: factories</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: factories</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Main system factory for creating the complete Owen system</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="factories_OwenSystemFactory.js.html"
+                      >factories/OwenSystemFactory.js</a
+                    >,
+                    <a href="factories_OwenSystemFactory.js.html#line1"
+                      >line 1</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-factories.OwenSystemFactory.html"
+                >OwenSystemFactory</a
+              >
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-loaders.AnimationLoader.html

@@ -0,0 +1,245 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: AnimationLoader</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: AnimationLoader</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"
+              ><span class="type-signature">(abstract) </span></span
+            >
+            <span class="ancestors"
+              ><a href="module-loaders.html">loaders</a>.</span
+            >AnimationLoader<span class="signature">()</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Abstract base class for animation loaders</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="AnimationLoader">
+              <span class="type-signature">(abstract) </span>new
+              AnimationLoader<span class="signature">()</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="loaders_AnimationLoader.js.html"
+                      >loaders/AnimationLoader.js</a
+                    >,
+                    <a href="loaders_AnimationLoader.js.html#line11">line 11</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="loadAnimation">
+            <span class="type-signature">(async, abstract) </span
+            >loadAnimation<span class="signature">(_name)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;THREE.AnimationClip>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Load an animation by name</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The animation name to load (unused in base class)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line19">line 19</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Throws:</h5>
+
+          <dl>
+            <dt>
+              <div class="param-desc">
+                <p>Must be implemented by subclasses</p>
+              </div>
+            </dt>
+            <dd></dd>
+            <dt>
+              <dl>
+                <dt>Type</dt>
+                <dd>
+                  <span class="param-type">Error</span>
+                </dd>
+              </dl>
+            </dt>
+            <dd></dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The loaded animation clip</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;THREE.AnimationClip></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-loaders.GLTFAnimationLoader.html

@@ -0,0 +1,485 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: GLTFAnimationLoader</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: GLTFAnimationLoader</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-loaders.html">loaders</a>.</span
+            >GLTFAnimationLoader<span class="signature">(gltfLoader)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>GLTF animation loader implementation</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="GLTFAnimationLoader">
+              <span class="type-signature"></span>new GLTFAnimationLoader<span
+                class="signature"
+                >(gltfLoader)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a GLTF animation loader</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>gltfLoader</code></td>
+
+                  <td class="type">
+                    <span class="param-type">THREE.GLTFLoader</span>
+                  </td>
+
+                  <td class="description last">
+                    <p>The Three.js GLTF loader instance</p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="loaders_AnimationLoader.js.html"
+                      >loaders/AnimationLoader.js</a
+                    >,
+                    <a href="loaders_AnimationLoader.js.html#line29">line 29</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Extends</h3>
+
+          <ul>
+            <li>AnimationLoader</li>
+          </ul>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="animationCache">
+            <span class="type-signature"></span>animationCache<span
+              class="type-signature"
+            >
+              :Map.&lt;string, THREE.AnimationClip></span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Cache for loaded animations</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type"
+                >Map.&lt;string, THREE.AnimationClip></span
+              >
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line47">line 47</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="gltfLoader">
+            <span class="type-signature"></span>gltfLoader<span
+              class="type-signature"
+            >
+              :THREE.GLTFLoader</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The Three.js GLTF loader</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">THREE.GLTFLoader</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line41">line 41</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="clearCache">
+            <span class="type-signature"></span>clearCache<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Clear the animation cache</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line83">line 83</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getCachedAnimationNames">
+            <span class="type-signature"></span>getCachedAnimationNames<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get all cached animation names</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line91">line 91</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of cached animation names</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="loadAnimation">
+            <span class="type-signature">(async) </span>loadAnimation<span
+              class="signature"
+              >(name)</span
+            ><span class="type-signature">
+              &rarr; {Promise.&lt;THREE.AnimationClip>}</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Load an animation from GLTF by name</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>name</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The animation name to load</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line56">line 56</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Throws:</h5>
+
+          <dl>
+            <dt>
+              <div class="param-desc">
+                <p>If animation is not found</p>
+              </div>
+            </dt>
+            <dd></dd>
+            <dt>
+              <dl>
+                <dt>Type</dt>
+                <dd>
+                  <span class="param-type">Error</span>
+                </dd>
+              </dl>
+            </dt>
+            <dd></dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The loaded animation clip</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;THREE.AnimationClip></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="preloadAnimations">
+            <span class="type-signature">(async) </span>preloadAnimations<span
+              class="signature"
+              >(gltfModel)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Preload animations from a GLTF model</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>gltfModel</code></td>
+
+                <td class="type">
+                  <span class="param-type">Object</span>
+                </td>
+
+                <td class="description last"><p>The loaded GLTF model</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="loaders_AnimationLoader.js.html"
+                    >loaders/AnimationLoader.js</a
+                  >,
+                  <a href="loaders_AnimationLoader.js.html#line71">line 71</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-loaders.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: loaders</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: loaders</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Animation loader interfaces and implementations</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="loaders_AnimationLoader.js.html"
+                      >loaders/AnimationLoader.js</a
+                    >,
+                    <a href="loaders_AnimationLoader.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-loaders.GLTFAnimationLoader.html"
+                >GLTFAnimationLoader</a
+              >
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-owen.html

@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: owen</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: owen</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Main entry point for the Owen Animation System</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="index.js.html">index.js</a>,
+                    <a href="index.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <h4 class="name" id="module:owen">
+              <span class="type-signature"></span>module:owen<span
+                class="type-signature"
+              ></span>
+            </h4>
+
+            <div class="description">
+              <p>Default export - the main factory for easy usage</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="index.js.html">index.js</a>,
+                    <a href="index.js.html#line51">line 51</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-states.ReactStateHandler.html

@@ -0,0 +1,508 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: ReactStateHandler</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: ReactStateHandler</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-states.html">states</a>.</span
+            >ReactStateHandler<span class="signature">(context)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Handler for the React state</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="ReactStateHandler">
+              <span class="type-signature"></span>new ReactStateHandler<span
+                class="signature"
+                >(context)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a react state handler</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>context</code></td>
+
+                  <td class="type">
+                    <span class="param-type">OwenAnimationContext</span>
+                  </td>
+
+                  <td class="description last"><p>The animation context</p></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_ReactStateHandler.js.html"
+                      >states/ReactStateHandler.js</a
+                    >,
+                    <a href="states_ReactStateHandler.js.html#line14"
+                      >line 14</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Extends</h3>
+
+          <ul>
+            <li>StateHandler</li>
+          </ul>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="emotion">
+            <span class="type-signature"></span>emotion<span
+              class="type-signature"
+            >
+              :string</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Current emotional state</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_ReactStateHandler.js.html"
+                    >states/ReactStateHandler.js</a
+                  >,
+                  <a href="states_ReactStateHandler.js.html#line26">line 26</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="enter">
+            <span class="type-signature">(async) </span>enter<span
+              class="signature"
+              >(_fromState<span class="signature-attributes">opt</span>,
+              emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Enter the react state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_fromState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last">
+                  <p>The previous state (unused)</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to enter with</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_ReactStateHandler.js.html"
+                    >states/ReactStateHandler.js</a
+                  >,
+                  <a href="states_ReactStateHandler.js.html#line35">line 35</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="exit">
+            <span class="type-signature">(async) </span>exit<span
+              class="signature"
+              >(toState<span class="signature-attributes">opt</span>,
+              emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Exit the react state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>toState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last"><p>The next state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to exit with</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_ReactStateHandler.js.html"
+                    >states/ReactStateHandler.js</a
+                  >,
+                  <a href="states_ReactStateHandler.js.html#line53">line 53</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAvailableTransitions">
+            <span class="type-signature"></span>getAvailableTransitions<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get available transitions from react state</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_ReactStateHandler.js.html"
+                    >states/ReactStateHandler.js</a
+                  >,
+                  <a href="states_ReactStateHandler.js.html#line156"
+                    >line 156</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of available state transitions</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="handleMessage">
+            <span class="type-signature">(async) </span>handleMessage<span
+              class="signature"
+              >(message)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Handle a user message in react state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>message</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The user message</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_ReactStateHandler.js.html"
+                    >states/ReactStateHandler.js</a
+                  >,
+                  <a href="states_ReactStateHandler.js.html#line80">line 80</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-states.SleepStateHandler.html

@@ -0,0 +1,683 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: SleepStateHandler</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: SleepStateHandler</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-states.html">states</a>.</span
+            >SleepStateHandler<span class="signature">(context)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Handler for the Sleep state</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="SleepStateHandler">
+              <span class="type-signature"></span>new SleepStateHandler<span
+                class="signature"
+                >(context)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a sleep state handler</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>context</code></td>
+
+                  <td class="type">
+                    <span class="param-type">OwenAnimationContext</span>
+                  </td>
+
+                  <td class="description last"><p>The animation context</p></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_SleepStateHandler.js.html"
+                      >states/SleepStateHandler.js</a
+                    >,
+                    <a href="states_SleepStateHandler.js.html#line14"
+                      >line 14</a
+                    >
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Extends</h3>
+
+          <ul>
+            <li>StateHandler</li>
+          </ul>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="isDeepSleep">
+            <span class="type-signature"></span>isDeepSleep<span
+              class="type-signature"
+            >
+              :boolean</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Whether the character is in deep sleep</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">boolean</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line32">line 32</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="sleepClip">
+            <span class="type-signature"></span>sleepClip<span
+              class="type-signature"
+            >
+              :AnimationClip|null</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Sleep animation clip</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">AnimationClip</span>
+              |
+
+              <span class="param-type">null</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line26">line 26</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="enter">
+            <span class="type-signature">(async) </span>enter<span
+              class="signature"
+              >(fromState<span class="signature-attributes">opt</span>,
+              _emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Enter the sleep state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>fromState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last"><p>The previous state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>_emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to enter with (unused)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line41">line 41</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="exit">
+            <span class="type-signature">(async) </span>exit<span
+              class="signature"
+              >(toState<span class="signature-attributes">opt</span>,
+              emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Exit the sleep state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>toState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last"><p>The next state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to exit with</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line67">line 67</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAvailableTransitions">
+            <span class="type-signature"></span>getAvailableTransitions<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get available transitions from sleep state</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line119"
+                    >line 119</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of available state transitions</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="handleMessage">
+            <span class="type-signature">(async) </span>handleMessage<span
+              class="signature"
+              >(_message)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Handle a user message in sleep state (wake up)</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_message</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The user message (unused, just triggers wake up)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line106"
+                    >line 106</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="isInDeepSleep">
+            <span class="type-signature"></span>isInDeepSleep<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {boolean}</span>
+          </h4>
+
+          <div class="description">
+            <p>Check if in deep sleep</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line127"
+                    >line 127</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>True if in deep sleep, false otherwise</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">boolean</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="update">
+            <span class="type-signature"></span>update<span class="signature"
+              >(_deltaTime)</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Update the sleep state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_deltaTime</code></td>
+
+                <td class="type">
+                  <span class="param-type">number</span>
+                </td>
+
+                <td class="description last">
+                  <p>Time elapsed since last update (ms, unused)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line96">line 96</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="wakeUp">
+            <span class="type-signature">(async) </span>wakeUp<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Force wake up from sleep</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_SleepStateHandler.js.html"
+                    >states/SleepStateHandler.js</a
+                  >,
+                  <a href="states_SleepStateHandler.js.html#line135"
+                    >line 135</a
+                  >
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-states.StateFactory.html

@@ -0,0 +1,491 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: StateFactory</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: StateFactory</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-states.html">states</a>.</span
+            >StateFactory<span class="signature">()</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>
+              Factory for creating state handlers using dependency injection
+            </p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="StateFactory">
+              <span class="type-signature"></span>new StateFactory<span
+                class="signature"
+                >()</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a state factory</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateFactory.js.html"
+                      >states/StateFactory.js</a
+                    >, <a href="states_StateFactory.js.html#line16">line 16</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="createStateHandler">
+            <span class="type-signature"></span>createStateHandler<span
+              class="signature"
+              >(stateName, context)</span
+            ><span class="type-signature"> &rarr; {StateHandler}</span>
+          </h4>
+
+          <div class="description">
+            <p>Create a state handler instance</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>stateName</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The name of the state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>context</code></td>
+
+                <td class="type">
+                  <span class="param-type">OwenAnimationContext</span>
+                </td>
+
+                <td class="description last"><p>The animation context</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateFactory.js.html"
+                    >states/StateFactory.js</a
+                  >, <a href="states_StateFactory.js.html#line52">line 52</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Throws:</h5>
+
+          <dl>
+            <dt>
+              <div class="param-desc">
+                <p>If state handler is not registered</p>
+              </div>
+            </dt>
+            <dd></dd>
+            <dt>
+              <dl>
+                <dt>Type</dt>
+                <dd>
+                  <span class="param-type">Error</span>
+                </dd>
+              </dl>
+            </dt>
+            <dd></dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>The created state handler</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">StateHandler</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAvailableStates">
+            <span class="type-signature"></span>getAvailableStates<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get all available state names</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateFactory.js.html"
+                    >states/StateFactory.js</a
+                  >, <a href="states_StateFactory.js.html#line65">line 65</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of registered state names</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="isStateRegistered">
+            <span class="type-signature"></span>isStateRegistered<span
+              class="signature"
+              >(stateName)</span
+            ><span class="type-signature"> &rarr; {boolean}</span>
+          </h4>
+
+          <div class="description">
+            <p>Check if a state is registered</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>stateName</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The state name to check</p></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateFactory.js.html"
+                    >states/StateFactory.js</a
+                  >, <a href="states_StateFactory.js.html#line74">line 74</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>True if registered, false otherwise</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">boolean</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="registerStateHandler">
+            <span class="type-signature"></span>registerStateHandler<span
+              class="signature"
+              >(stateName, handlerClass)</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Register a state handler class</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>stateName</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last"><p>The name of the state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>handlerClass</code></td>
+
+                <td class="type">
+                  <span class="param-type">function</span>
+                </td>
+
+                <td class="description last">
+                  <p>The handler class constructor</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateFactory.js.html"
+                    >states/StateFactory.js</a
+                  >, <a href="states_StateFactory.js.html#line41">line 41</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="unregisterStateHandler">
+            <span class="type-signature"></span>unregisterStateHandler<span
+              class="signature"
+              >(stateName)</span
+            ><span class="type-signature"> &rarr; {boolean}</span>
+          </h4>
+
+          <div class="description">
+            <p>Unregister a state handler</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>stateName</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  <p>The state name to unregister</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_StateFactory.js.html"
+                    >states/StateFactory.js</a
+                  >, <a href="states_StateFactory.js.html#line83">line 83</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>True if removed, false if not found</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">boolean</span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-states.TypeStateHandler.html

@@ -0,0 +1,608 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: TypeStateHandler</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: TypeStateHandler</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-states.html">states</a>.</span
+            >TypeStateHandler<span class="signature">(context)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description"><p>Handler for the Type state</p></div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="TypeStateHandler">
+              <span class="type-signature"></span>new TypeStateHandler<span
+                class="signature"
+                >(context)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a type state handler</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>context</code></td>
+
+                  <td class="type">
+                    <span class="param-type">OwenAnimationContext</span>
+                  </td>
+
+                  <td class="description last"><p>The animation context</p></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_TypeStateHandler.js.html"
+                      >states/TypeStateHandler.js</a
+                    >,
+                    <a href="states_TypeStateHandler.js.html#line14">line 14</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Extends</h3>
+
+          <ul>
+            <li>StateHandler</li>
+          </ul>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="emotion">
+            <span class="type-signature"></span>emotion<span
+              class="type-signature"
+            >
+              :string</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Current emotional state</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">string</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line26">line 26</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="isTyping">
+            <span class="type-signature"></span>isTyping<span
+              class="type-signature"
+            >
+              :boolean</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Whether currently typing</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">boolean</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line32">line 32</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="enter">
+            <span class="type-signature">(async) </span>enter<span
+              class="signature"
+              >(_fromState<span class="signature-attributes">opt</span>,
+              emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Enter the type state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>_fromState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last">
+                  <p>The previous state (unused)</p>
+                </td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to enter with</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line41">line 41</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="exit">
+            <span class="type-signature">(async) </span>exit<span
+              class="signature"
+              >(toState<span class="signature-attributes">opt</span>,
+              _emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Exit the type state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>toState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last"><p>The next state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>_emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to exit with (unused)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line65">line 65</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="finishTyping">
+            <span class="type-signature">(async) </span>finishTyping<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Finish typing and prepare to transition</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line90">line 90</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAvailableTransitions">
+            <span class="type-signature"></span>getAvailableTransitions<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get available transitions from type state</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line108">line 108</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of available state transitions</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getIsTyping">
+            <span class="type-signature"></span>getIsTyping<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {boolean}</span>
+          </h4>
+
+          <div class="description">
+            <p>Check if currently typing</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line116">line 116</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>True if typing, false otherwise</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">boolean</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="setTyping">
+            <span class="type-signature"></span>setTyping<span class="signature"
+              >(typing)</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Set typing state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>typing</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  <p>Whether currently typing</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_TypeStateHandler.js.html"
+                    >states/TypeStateHandler.js</a
+                  >,
+                  <a href="states_TypeStateHandler.js.html#line125">line 125</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-states.WaitStateHandler.html

@@ -0,0 +1,605 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Class: WaitStateHandler</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Class: WaitStateHandler</h1>
+
+      <section>
+        <header>
+          <h2>
+            <span class="attribs"><span class="type-signature"></span></span>
+            <span class="ancestors"
+              ><a href="module-states.html">states</a>.</span
+            >WaitStateHandler<span class="signature">(context)</span
+            ><span class="type-signature"></span>
+          </h2>
+
+          <div class="class-description">
+            <p>Handler for the Wait/Idle state</p>
+          </div>
+        </header>
+
+        <article>
+          <div class="container-overview">
+            <h2>Constructor</h2>
+
+            <h4 class="name" id="WaitStateHandler">
+              <span class="type-signature"></span>new WaitStateHandler<span
+                class="signature"
+                >(context)</span
+              ><span class="type-signature"></span>
+            </h4>
+
+            <div class="description">
+              <p>Create a wait state handler</p>
+            </div>
+
+            <h5>Parameters:</h5>
+
+            <table class="params">
+              <thead>
+                <tr>
+                  <th>Name</th>
+
+                  <th>Type</th>
+
+                  <th class="last">Description</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td class="name"><code>context</code></td>
+
+                  <td class="type">
+                    <span class="param-type">OwenAnimationContext</span>
+                  </td>
+
+                  <td class="description last"><p>The animation context</p></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_WaitStateHandler.js.html"
+                      >states/WaitStateHandler.js</a
+                    >,
+                    <a href="states_WaitStateHandler.js.html#line14">line 14</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Extends</h3>
+
+          <ul>
+            <li>StateHandler</li>
+          </ul>
+
+          <h3 class="subsection-title">Members</h3>
+
+          <h4 class="name" id="idleClip">
+            <span class="type-signature"></span>idleClip<span
+              class="type-signature"
+            >
+              :AnimationClip|null</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>The main idle animation clip</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">AnimationClip</span>
+              |
+
+              <span class="param-type">null</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line26">line 26</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="quirkInterval">
+            <span class="type-signature"></span>quirkInterval<span
+              class="type-signature"
+            >
+              :number</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Interval between quirk attempts (ms)</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">number</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line44">line 44</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="quirkTimer">
+            <span class="type-signature"></span>quirkTimer<span
+              class="type-signature"
+            >
+              :number</span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Timer for quirk animations</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">number</span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line38">line 38</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="quirks">
+            <span class="type-signature"></span>quirks<span
+              class="type-signature"
+            >
+              :Array.&lt;AnimationClip></span
+            >
+          </h4>
+
+          <div class="description">
+            <p>Available quirk animations</p>
+          </div>
+
+          <h5>Type:</h5>
+          <ul>
+            <li>
+              <span class="param-type">Array.&lt;AnimationClip></span>
+            </li>
+          </ul>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line32">line 32</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h3 class="subsection-title">Methods</h3>
+
+          <h4 class="name" id="enter">
+            <span class="type-signature">(async) </span>enter<span
+              class="signature"
+              >(fromState<span class="signature-attributes">opt</span>,
+              emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Enter the wait state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>fromState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last"><p>The previous state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to enter with</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line53">line 53</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="exit">
+            <span class="type-signature">(async) </span>exit<span
+              class="signature"
+              >(toState<span class="signature-attributes">opt</span>,
+              emotion<span class="signature-attributes">opt</span>)</span
+            ><span class="type-signature"> &rarr; {Promise.&lt;void>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Exit the wait state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th>Attributes</th>
+
+                <th>Default</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>toState</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                  |
+
+                  <span class="param-type">null</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">null</td>
+
+                <td class="description last"><p>The next state</p></td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>emotion</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="attributes">&lt;optional><br /></td>
+
+                <td class="default">Emotions.NEUTRAL</td>
+
+                <td class="description last">
+                  <p>The emotion to exit with</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line74">line 74</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Promise.&lt;void></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="getAvailableTransitions">
+            <span class="type-signature"></span>getAvailableTransitions<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {Array.&lt;string>}</span>
+          </h4>
+
+          <div class="description">
+            <p>Get available transitions from wait state</p>
+          </div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line135">line 135</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">
+            <p>Array of available state transitions</p>
+          </div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">Array.&lt;string></span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="update">
+            <span class="type-signature"></span>update<span class="signature"
+              >(deltaTime)</span
+            ><span class="type-signature"> &rarr; {void}</span>
+          </h4>
+
+          <div class="description">
+            <p>Update the wait state</p>
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>deltaTime</code></td>
+
+                <td class="type">
+                  <span class="param-type">number</span>
+                </td>
+
+                <td class="description last">
+                  <p>Time elapsed since last update (ms)</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="states_WaitStateHandler.js.html"
+                    >states/WaitStateHandler.js</a
+                  >,
+                  <a href="states_WaitStateHandler.js.html#line95">line 95</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">void</span>
+            </dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/module-states.html

@@ -0,0 +1,672 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Module: states</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Module: states</h1>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>React state handler implementation</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_ReactStateHandler.js.html"
+                      >states/ReactStateHandler.js</a
+                    >,
+                    <a href="states_ReactStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_SleepStateHandler.js.html"
+                      >states/SleepStateHandler.js</a
+                    >,
+                    <a href="states_SleepStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateFactory.js.html"
+                      >states/StateFactory.js</a
+                    >, <a href="states_StateFactory.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_TypeStateHandler.js.html"
+                      >states/TypeStateHandler.js</a
+                    >,
+                    <a href="states_TypeStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_WaitStateHandler.js.html"
+                      >states/WaitStateHandler.js</a
+                    >,
+                    <a href="states_WaitStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-states.ReactStateHandler.html"
+                >ReactStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.SleepStateHandler.html"
+                >SleepStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Sleep state handler implementation</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_ReactStateHandler.js.html"
+                      >states/ReactStateHandler.js</a
+                    >,
+                    <a href="states_ReactStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_SleepStateHandler.js.html"
+                      >states/SleepStateHandler.js</a
+                    >,
+                    <a href="states_SleepStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateFactory.js.html"
+                      >states/StateFactory.js</a
+                    >, <a href="states_StateFactory.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_TypeStateHandler.js.html"
+                      >states/TypeStateHandler.js</a
+                    >,
+                    <a href="states_TypeStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_WaitStateHandler.js.html"
+                      >states/WaitStateHandler.js</a
+                    >,
+                    <a href="states_WaitStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-states.ReactStateHandler.html"
+                >ReactStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.SleepStateHandler.html"
+                >SleepStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>State factory for creating state handlers</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_ReactStateHandler.js.html"
+                      >states/ReactStateHandler.js</a
+                    >,
+                    <a href="states_ReactStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_SleepStateHandler.js.html"
+                      >states/SleepStateHandler.js</a
+                    >,
+                    <a href="states_SleepStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateFactory.js.html"
+                      >states/StateFactory.js</a
+                    >, <a href="states_StateFactory.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_TypeStateHandler.js.html"
+                      >states/TypeStateHandler.js</a
+                    >,
+                    <a href="states_TypeStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_WaitStateHandler.js.html"
+                      >states/WaitStateHandler.js</a
+                    >,
+                    <a href="states_WaitStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-states.ReactStateHandler.html"
+                >ReactStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.SleepStateHandler.html"
+                >SleepStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Type state handler implementation</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_ReactStateHandler.js.html"
+                      >states/ReactStateHandler.js</a
+                    >,
+                    <a href="states_ReactStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_SleepStateHandler.js.html"
+                      >states/SleepStateHandler.js</a
+                    >,
+                    <a href="states_SleepStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateFactory.js.html"
+                      >states/StateFactory.js</a
+                    >, <a href="states_StateFactory.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_TypeStateHandler.js.html"
+                      >states/TypeStateHandler.js</a
+                    >,
+                    <a href="states_TypeStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_WaitStateHandler.js.html"
+                      >states/WaitStateHandler.js</a
+                    >,
+                    <a href="states_WaitStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-states.ReactStateHandler.html"
+                >ReactStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.SleepStateHandler.html"
+                >SleepStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+
+      <section>
+        <header></header>
+
+        <article>
+          <div class="container-overview">
+            <div class="description">
+              <p>Wait state handler implementation</p>
+            </div>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_ReactStateHandler.js.html"
+                      >states/ReactStateHandler.js</a
+                    >,
+                    <a href="states_ReactStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_SleepStateHandler.js.html"
+                      >states/SleepStateHandler.js</a
+                    >,
+                    <a href="states_SleepStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_StateFactory.js.html"
+                      >states/StateFactory.js</a
+                    >, <a href="states_StateFactory.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_TypeStateHandler.js.html"
+                      >states/TypeStateHandler.js</a
+                    >,
+                    <a href="states_TypeStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+
+            <dl class="details">
+              <dt class="tag-source">Source:</dt>
+              <dd class="tag-source">
+                <ul class="dummy">
+                  <li>
+                    <a href="states_WaitStateHandler.js.html"
+                      >states/WaitStateHandler.js</a
+                    >,
+                    <a href="states_WaitStateHandler.js.html#line1">line 1</a>
+                  </li>
+                </ul>
+              </dd>
+            </dl>
+          </div>
+
+          <h3 class="subsection-title">Classes</h3>
+
+          <dl>
+            <dt>
+              <a href="module-states.ReactStateHandler.html"
+                >ReactStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.SleepStateHandler.html"
+                >SleepStateHandler</a
+              >
+            </dt>
+            <dd></dd>
+
+            <dt><a href="module-states.StateFactory.html">StateFactory</a></dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+            </dt>
+            <dd></dd>
+
+            <dt>
+              <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+            </dt>
+            <dd></dd>
+          </dl>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/scripts/linenumber.js

@@ -0,0 +1,25 @@
+/* global document */
+(() => {
+  const source = document.getElementsByClassName('prettyprint source linenums')
+  let i = 0
+  let lineNumber = 0
+  let lineId
+  let lines
+  let totalLines
+  let anchorHash
+
+  if (source && source[0]) {
+    anchorHash = document.location.hash.substring(1)
+    lines = source[0].getElementsByTagName('li')
+    totalLines = lines.length
+
+    for (; i < totalLines; i++) {
+      lineNumber++
+      lineId = `line${lineNumber}`
+      lines[i].id = lineId
+      if (lineId === anchorHash) {
+        lines[i].className += ' selected'
+      }
+    }
+  }
+})()

docs/scripts/prettify/Apache-License-2.0.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

docs/scripts/prettify/lang-css.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([['pln', /^[\t\n\f\r ]+/, null, ' \t\r\n']], [['str', /^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/, null], ['str', /^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/, null], ['lang-css-str', /^url\(([^"')]*)\)/i], ['kwd', /^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i, null], ['lang-css-kw', /^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i], ['com', /^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//], ['com',
+  /^(?:<\!--|--\>)/], ['lit', /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i], ['lit', /^#[\da-f]{3,6}/i], ['pln', /^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i], ['pun', /^[^\s\w"']+/]]), ['css']); PR.registerLangHandler(PR.createSimpleLexer([], [['kwd', /^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]), ['css-kw']); PR.registerLangHandler(PR.createSimpleLexer([], [['str', /^[^"')]+/]]), ['css-str'])

docs/scripts/prettify/prettify.js

@@ -0,0 +1,118 @@
+const q = null; window.PR_SHOULD_USE_CONTINUATION = !0;
+(function () {
+  function L (a) {
+    function m (a) { let f = a.charCodeAt(0); if (f !== 92) return f; const b = a.charAt(1); return (f = r[b]) ? f : b >= '0' && b <= '7' ? parseInt(a.substring(1), 8) : b === 'u' || b === 'x' ? parseInt(a.substring(2), 16) : a.charCodeAt(1) } function e (a) { if (a < 32) return (a < 16 ? '\\x0' : '\\x') + a.toString(16); a = String.fromCharCode(a); if (a === '\\' || a === '-' || a === '[' || a === ']')a = '\\' + a; return a } function h (a) {
+      for (var f = a.substring(1, a.length - 1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g), a =
+[], b = [], o = f[0] === '^', c = o ? 1 : 0, i = f.length; c < i; ++c) { var j = f[c]; if (/\\[bdsw]/i.test(j))a.push(j); else { var j = m(j); var d; c + 2 < i && f[c + 1] === '-' ? (d = m(f[c + 2]), c += 2) : d = j; b.push([j, d]); d < 65 || j > 122 || (d < 65 || j > 90 || b.push([Math.max(65, j) | 32, Math.min(d, 90) | 32]), d < 97 || j > 122 || b.push([Math.max(97, j) & -33, Math.min(d, 122) & -33])) } }b.sort(function (a, f) { return a[0] - f[0] || f[1] - a[1] }); f = []; j = [NaN, NaN]; for (c = 0; c < b.length; ++c)i = b[c], i[0] <= j[1] + 1 ? j[1] = Math.max(j[1], i[1]) : f.push(j = i); b = ['[']; o && b.push('^'); b.push.apply(b, a); for (c = 0; c <
+f.length; ++c)i = f[c], b.push(e(i[0])), i[1] > i[0] && (i[1] + 1 > i[0] && b.push('-'), b.push(e(i[1]))); b.push(']'); return b.join('')
+    } function y (a) {
+      for (var f = a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g), b = f.length, d = [], c = 0, i = 0; c < b; ++c) { var j = f[c]; j === '(' ? ++i : j.charAt(0) === '\\' && (j = +j.substring(1)) && j <= i && (d[j] = -1) } for (c = 1; c < d.length; ++c)d[c] === -1 && (d[c] = ++t); for (i = c = 0; c < b; ++c) {
+        j = f[c], j === '('
+          ? (++i, d[i] === void 0 && (f[c] = '(?:'))
+          : j.charAt(0) === '\\' &&
+(j = +j.substring(1)) && j <= i && (f[c] = '\\' + d[i])
+      } for (i = c = 0; c < b; ++c)f[c] === '^' && f[c + 1] !== '^' && (f[c] = ''); if (a.ignoreCase && s) for (c = 0; c < b; ++c)j = f[c], a = j.charAt(0), j.length >= 2 && a === '[' ? f[c] = h(j) : a !== '\\' && (f[c] = j.replace(/[A-Za-z]/g, function (a) { a = a.charCodeAt(0); return '[' + String.fromCharCode(a & -33, a | 32) + ']' })); return f.join('')
+    } for (var t = 0, s = !1, l = !1, p = 0, d = a.length; p < d; ++p) { var g = a[p]; if (g.ignoreCase)l = !0; else if (/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi, ''))) { s = !0; l = !1; break } } for (var r =
+{ b: 8, t: 9, n: 10, v: 11, f: 12, r: 13 }, n = [], p = 0, d = a.length; p < d; ++p) { g = a[p]; if (g.global || g.multiline) throw Error('' + g); n.push('(?:' + y(g) + ')') } return RegExp(n.join('|'), l ? 'gi' : 'g')
+  } function M (a) {
+    function m (a) {
+      switch (a.nodeType) {
+        case 1:if (e.test(a.className)) break; for (var g = a.firstChild; g; g = g.nextSibling)m(g); g = a.nodeName; if (g === 'BR' || g === 'LI')h[s] = '\n', t[s << 1] = y++, t[s++ << 1 | 1] = a; break; case 3:case 4:g = a.nodeValue, g.length && (g = p ? g.replace(/\r\n?/g, '\n') : g.replace(/[\t\n\r ]+/g, ' '), h[s] = g, t[s << 1] = y, y += g.length,
+        t[s++ << 1 | 1] = a)
+      }
+    } var e = /(?:^|\s)nocode(?:\s|$)/; var h = []; var y = 0; var t = []; var s = 0; let l; a.currentStyle ? l = a.currentStyle.whiteSpace : window.getComputedStyle && (l = document.defaultView.getComputedStyle(a, q).getPropertyValue('white-space')); var p = l && l.substring(0, 3) === 'pre'; m(a); return { a: h.join('').replace(/\n$/, ''), c: t }
+  } function B (a, m, e, h) { m && (a = { a: m, d: a }, e(a), h.push.apply(h, a.e)) } function x (a, m) {
+    function e (a) {
+      for (var l = a.d, p = [l, 'pln'], d = 0, g = a.a.match(y) || [], r = {}, n = 0, z = g.length; n < z; ++n) {
+        const f = g[n]; let b = r[f]; let o = void 0; var c; if (typeof b ===
+'string')c = !1; else { var i = h[f.charAt(0)]; if (i)o = f.match(i[1]), b = i[0]; else { for (c = 0; c < t; ++c) if (i = m[c], o = f.match(i[1])) { b = i[0]; break }o || (b = 'pln') } if ((c = b.length >= 5 && b.substring(0, 5) === 'lang-') && !(o && typeof o[1] === 'string'))c = !1, b = 'src'; c || (r[f] = b) }i = d; d += f.length; if (c) { c = o[1]; let j = f.indexOf(c); let k = j + c.length; o[2] && (k = f.length - o[2].length, j = k - c.length); b = b.substring(5); B(l + i, f.substring(0, j), e, p); B(l + i + j, c, C(b, c), p); B(l + i + k, f.substring(k), e, p) } else p.push(l + i, b)
+      }a.e = p
+    } var h = {}; let y; (function () {
+      for (var e = a.concat(m),
+        l = [], p = {}, d = 0, g = e.length; d < g; ++d) { let r = e[d]; let n = r[3]; if (n) for (let k = n.length; --k >= 0;)h[n.charAt(k)] = r; r = r[1]; n = '' + r; p.hasOwnProperty(n) || (l.push(r), p[n] = q) }l.push(/[\S\s]/); y = L(l)
+    })(); var t = m.length; return e
+  } function u (a) {
+    const m = []; const e = []; a.tripleQuotedStrings
+      ? m.push(['str', /^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/, q, "'\""])
+      : a.multiLineStrings
+        ? m.push(['str', /^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+          q, "'\"`"])
+        : m.push(['str', /^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/, q, "\"'"]); a.verbatimStrings && e.push(['str', /^@"(?:[^"]|"")*(?:"|$)/, q]); let h = a.hashComments; h && (a.cStyleComments
+      ? (h > 1 ? m.push(['com', /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, q, '#']) : m.push(['com', /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/, q, '#']), e.push(['str', /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, q]))
+      : m.push(['com', /^#[^\n\r]*/,
+        q, '#'])); a.cStyleComments && (e.push(['com', /^\/\/[^\n\r]*/, q]), e.push(['com', /^\/\*[\S\s]*?(?:\*\/|$)/, q])); a.regexLiterals && e.push(['lang-regex', /^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]); (h = a.types) && e.push(['typ', h]); a = ('' + a.keywords).replace(/^ | $/g,
+      ''); a.length && e.push(['kwd', RegExp('^(?:' + a.replace(/[\s,]+/g, '|') + ')\\b'), q]); m.push(['pln', /^\s+/, q, ' \r\n\t\xa0']); e.push(['lit', /^@[$_a-z][\w$@]*/i, q], ['typ', /^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/, q], ['pln', /^[$_a-z][\w$@]*/i, q], ['lit', /^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i, q, '0123456789'], ['pln', /^\\[\S\s]?/, q], ['pun', /^.[^\s\w"-$'./@\\`]*/, q]); return x(m, e)
+  } function D (a, m) {
+    function e (a) {
+      switch (a.nodeType) {
+        case 1:if (k.test(a.className)) break; if (a.nodeName === 'BR') {
+          h(a),
+          a.parentNode && a.parentNode.removeChild(a)
+        } else for (a = a.firstChild; a; a = a.nextSibling)e(a); break; case 3:case 4:if (p) { let b = a.nodeValue; const d = b.match(t); if (d) { const c = b.substring(0, d.index); a.nodeValue = c; (b = b.substring(d.index + d[0].length)) && a.parentNode.insertBefore(s.createTextNode(b), a.nextSibling); h(a); c || a.parentNode.removeChild(a) } }
+      }
+    } function h (a) {
+      function b (a, d) { const e = d ? a.cloneNode(!1) : a; var f = a.parentNode; if (f) { var f = b(f, 1); let g = a.nextSibling; f.appendChild(e); for (let h = g; h; h = g)g = h.nextSibling, f.appendChild(h) } return e }
+      for (;!a.nextSibling;) if (a = a.parentNode, !a) return; for (var a = b(a.nextSibling, 0), e; (e = a.parentNode) && e.nodeType === 1;)a = e; d.push(a)
+    } var k = /(?:^|\s)nocode(?:\s|$)/; var t = /\r\n?|\n/; var s = a.ownerDocument; let l; a.currentStyle ? l = a.currentStyle.whiteSpace : window.getComputedStyle && (l = s.defaultView.getComputedStyle(a, q).getPropertyValue('white-space')); var p = l && l.substring(0, 3) === 'pre'; for (l = s.createElement('LI'); a.firstChild;)l.appendChild(a.firstChild); for (var d = [l], g = 0; g < d.length; ++g)e(d[g]); m === (m | 0) && d[0].setAttribute('value',
+      m); const r = s.createElement('OL'); r.className = 'linenums'; for (var n = Math.max(0, m - 1 | 0) || 0, g = 0, z = d.length; g < z; ++g)l = d[g], l.className = 'L' + (g + n) % 10, l.firstChild || l.appendChild(s.createTextNode('\xa0')), r.appendChild(l); a.appendChild(r)
+  } function k (a, m) { for (let e = m.length; --e >= 0;) { const h = m[e]; A.hasOwnProperty(h) ? window.console && console.warn('cannot override language handler %s', h) : A[h] = a } } function C (a, m) { if (!a || !A.hasOwnProperty(a))a = /^\s*</.test(m) ? 'default-markup' : 'default-code'; return A[a] } function E (a) {
+    var m =
+a.g; try {
+      var e = M(a.h); var h = e.a; a.a = h; a.c = e.c; a.d = 0; C(m, h)(a); const k = /\bMSIE\b/.test(navigator.userAgent); var m = /\n/g; const t = a.a; const s = t.length; var e = 0; const l = a.c; const p = l.length; var h = 0; const d = a.e; let g = d.length; var a = 0; d[g] = s; let r, n; for (n = r = 0; n < g;)d[n] !== d[n + 2] ? (d[r++] = d[n++], d[r++] = d[n++]) : n += 2; g = r; for (n = r = 0; n < g;) { for (var z = d[n], f = d[n + 1], b = n + 2; b + 2 <= g && d[b + 1] === f;)b += 2; d[r++] = z; d[r++] = f; n = b } for (d.length = r; h < p;) {
+        const o = l[h + 2] || s; const c = d[a + 2] || s; var b = Math.min(o, c); let i = l[h + 1]; var j; if (i.nodeType !== 1 && (j = t.substring(e, b))) {
+          k && (j = j.replace(m, '\r')); i.nodeValue =
+j; const u = i.ownerDocument; const v = u.createElement('SPAN'); v.className = d[a + 1]; const x = i.parentNode; x.replaceChild(v, i); v.appendChild(i); e < o && (l[h + 1] = i = u.createTextNode(t.substring(b, o)), x.insertBefore(i, v.nextSibling))
+        }e = b; e >= o && (h += 2); e >= c && (a += 2)
+      }
+    } catch (w) { 'console' in window && console.log(w && w.stack ? w.stack : w) }
+  } var v = ['break,continue,do,else,for,if,return,while']; var w = [[v, 'auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile'],
+    'catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof']; const F = [w, 'alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where']; const G = [w, 'abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient']
+  const H = [G, 'as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var']; var w = [w, 'debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN']; const I = [v, 'and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None']
+  const J = [v, 'alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END']; var v = [v, 'case,done,elif,esac,eval,fi,function,in,local,set,then,until']; const K = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/; const N = /\S/; const O = u({
+    keywords: [F, H, w, 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END' +
+I, J, v],
+    hashComments: !0,
+    cStyleComments: !0,
+    multiLineStrings: !0,
+    regexLiterals: !0
+  }); var A = {}; k(O, ['default-code']); k(x([], [['pln', /^[^<?]+/], ['dec', /^<!\w[^>]*(?:>|$)/], ['com', /^<\!--[\S\s]*?(?:--\>|$)/], ['lang-', /^<\?([\S\s]+?)(?:\?>|$)/], ['lang-', /^<%([\S\s]+?)(?:%>|$)/], ['pun', /^(?:<[%?]|[%?]>)/], ['lang-', /^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i], ['lang-js', /^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i], ['lang-css', /^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i], ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]]),
+    ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']); k(x([['pln', /^\s+/, q, ' \t\r\n'], ['atv', /^(?:"[^"]*"?|'[^']*'?)/, q, "\"'"]], [['tag', /^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i], ['atn', /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i], ['lang-uq.val', /^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/], ['pun', /^[/<->]+/], ['lang-js', /^on\w+\s*=\s*"([^"]+)"/i], ['lang-js', /^on\w+\s*=\s*'([^']+)'/i], ['lang-js', /^on\w+\s*=\s*([^\s"'>]+)/i], ['lang-css', /^style\s*=\s*"([^"]+)"/i], ['lang-css', /^style\s*=\s*'([^']+)'/i], ['lang-css',
+    /^style\s*=\s*([^\s"'>]+)/i]]), ['in.tag']); k(x([], [['atv', /^[\S\s]+/]]), ['uq.val']); k(u({ keywords: F, hashComments: !0, cStyleComments: !0, types: K }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']); k(u({ keywords: 'null,true,false' }), ['json']); k(u({ keywords: H, hashComments: !0, cStyleComments: !0, verbatimStrings: !0, types: K }), ['cs']); k(u({ keywords: G, cStyleComments: !0 }), ['java']); k(u({ keywords: v, hashComments: !0, multiLineStrings: !0 }), ['bsh', 'csh', 'sh']); k(u({ keywords: I, hashComments: !0, multiLineStrings: !0, tripleQuotedStrings: !0 }),
+    ['cv', 'py']); k(u({ keywords: 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END', hashComments: !0, multiLineStrings: !0, regexLiterals: !0 }), ['perl', 'pl', 'pm']); k(u({ keywords: J, hashComments: !0, multiLineStrings: !0, regexLiterals: !0 }), ['rb']); k(u({ keywords: w, cStyleComments: !0, regexLiterals: !0 }), ['js']); k(u({
+    keywords: 'all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes',
+    hashComments: 3,
+    cStyleComments: !0,
+    multilineStrings: !0,
+    tripleQuotedStrings: !0,
+    regexLiterals: !0
+  }), ['coffee']); k(x([], [['str', /^[\S\s]+/]]), ['regex']); window.prettyPrintOne = function (a, m, e) { const h = document.createElement('PRE'); h.innerHTML = a; e && D(h, e); E({ g: m, i: e, h }); return h.innerHTML }; window.prettyPrint = function (a) {
+    function m () {
+      for (let e = window.PR_SHOULD_USE_CONTINUATION ? l.now() + 250 : Infinity; p < h.length && l.now() < e; p++) {
+        const n = h[p]; var k = n.className; if (k.indexOf('prettyprint') >= 0) {
+          var k = k.match(g); var f; var b; if (b =
+!k) { b = n; for (var o = void 0, c = b.firstChild; c; c = c.nextSibling) var i = c.nodeType, o = i === 1 ? o ? b : c : i === 3 ? N.test(c.nodeValue) ? b : o : o; b = (f = o === b ? void 0 : o) && f.tagName === 'CODE' }b && (k = f.className.match(g)); k && (k = k[1]); b = !1; for (o = n.parentNode; o; o = o.parentNode) if ((o.tagName === 'pre' || o.tagName === 'code' || o.tagName === 'xmp') && o.className && o.className.indexOf('prettyprint') >= 0) { b = !0; break }b || ((b = (b = n.className.match(/\blinenums\b(?::(\d+))?/)) ? b[1] && b[1].length ? +b[1] : !0 : !1) && D(n, b), d = { g: k, h: n, i: b }, E(d))
+        }
+      }p < h.length
+        ? setTimeout(m,
+          250)
+        : a && a()
+    } for (var e = [document.getElementsByTagName('pre'), document.getElementsByTagName('code'), document.getElementsByTagName('xmp')], h = [], k = 0; k < e.length; ++k) for (let t = 0, s = e[k].length; t < s; ++t)h.push(e[k][t]); var e = q; var l = Date; l.now || (l = { now: function () { return +new Date() } }); var p = 0; let d; var g = /\blang(?:uage)?-([\w.]+)(?!\S)/; m()
+  }; window.PR = {
+    createSimpleLexer: x,
+    registerLangHandler: k,
+    sourceDecorator: u,
+    PR_ATTRIB_NAME: 'atn',
+    PR_ATTRIB_VALUE: 'atv',
+    PR_COMMENT: 'com',
+    PR_DECLARATION: 'dec',
+    PR_KEYWORD: 'kwd',
+    PR_LITERAL: 'lit',
+    PR_NOCODE: 'nocode',
+    PR_PLAIN: 'pln',
+    PR_PUNCTUATION: 'pun',
+    PR_SOURCE: 'src',
+    PR_STRING: 'str',
+    PR_TAG: 'tag',
+    PR_TYPE: 'typ'
+  }
+})()

docs/states_ReactStateHandler.js.html

@@ -0,0 +1,277 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: states/ReactStateHandler.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: states/ReactStateHandler.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview React state handler implementation
+ * @module states
+ */
+
+import { StateHandler } from './StateHandler.js'
+import { States, Emotions } from '../constants.js'
+
+/**
+ * Handler for the React state
+ * @class
+ * @extends StateHandler
+ */
+export class ReactStateHandler extends StateHandler {
+  /**
+     * Create a react state handler
+     * @param {OwenAnimationContext} context - The animation context
+     */
+  constructor (context) {
+    super(States.REACTING, context)
+
+    /**
+         * Current emotional state
+         * @type {string}
+         */
+    this.emotion = Emotions.NEUTRAL
+  }
+
+  /**
+     * Enter the react state
+     * @param {string|null} [_fromState=null] - The previous state (unused)
+     * @param {string} [emotion=Emotions.NEUTRAL] - The emotion to enter with
+     * @returns {Promise&lt;void>}
+     */
+  async enter (_fromState = null, emotion = Emotions.NEUTRAL) {
+    console.log(`Entering REACTING state with emotion: ${emotion}`)
+    this.emotion = emotion
+
+    // Play appropriate reaction
+    const reactionClip = this.context.getClip('react_idle_L')
+    if (reactionClip) {
+      await reactionClip.play()
+      this.currentClip = reactionClip
+    }
+  }
+
+  /**
+     * Exit the react state
+     * @param {string|null} [toState=null] - The next state
+     * @param {string} [emotion=Emotions.NEUTRAL] - The emotion to exit with
+     * @returns {Promise&lt;void>}
+     */
+  async exit (toState = null, emotion = Emotions.NEUTRAL) {
+    console.log(`Exiting REACTING state to ${toState} with emotion: ${emotion}`)
+
+    if (this.currentClip) {
+      await this.stopCurrentClip()
+    }
+
+    // Play emotional transition if available
+    let transitionName
+    if (emotion !== Emotions.NEUTRAL) {
+      transitionName = `react_${this.emotion}2${toState}_${emotion}_T`
+    } else {
+      transitionName = `react_2${toState}_T`
+    }
+
+    const transition = this.context.getClip(transitionName)
+    if (transition) {
+      await transition.play()
+      await this.waitForClipEnd(transition)
+    }
+  }
+
+  /**
+     * Handle a user message in react state
+     * @param {string} message - The user message
+     * @returns {Promise&lt;void>}
+     */
+  async handleMessage (message) {
+    // Analyze message sentiment to determine emotion
+    const emotion = this.analyzeMessageEmotion(message)
+    this.emotion = emotion
+
+    // Play emotional reaction if needed
+    if (emotion !== Emotions.NEUTRAL) {
+      const emotionalReaction = this.context.getClip(`react_${emotion}_Q`)
+      if (emotionalReaction) {
+        if (this.currentClip) {
+          await this.stopCurrentClip(0.2)
+        }
+        await emotionalReaction.play()
+        await this.waitForClipEnd(emotionalReaction)
+      }
+    }
+  }
+
+  /**
+     * Analyze message to determine emotional response
+     * @private
+     * @param {string} message - The message to analyze
+     * @returns {string} The determined emotion
+     */
+  analyzeMessageEmotion (message) {
+    const text = message.toLowerCase()
+
+    // Check for urgent/angry indicators
+    if (
+      text.includes('!') ||
+            text.includes('urgent') ||
+            text.includes('asap') ||
+            text.includes('hurry')
+    ) {
+      return Emotions.ANGRY
+    }
+
+    // Check for error/shocked indicators
+    if (
+      text.includes('error') ||
+            text.includes('problem') ||
+            text.includes('issue') ||
+            text.includes('bug') ||
+            text.includes('broken')
+    ) {
+      return Emotions.SHOCKED
+    }
+
+    // Check for positive/happy indicators
+    if (
+      text.includes('great') ||
+            text.includes('awesome') ||
+            text.includes('good') ||
+            text.includes('excellent') ||
+            text.includes('perfect')
+    ) {
+      return Emotions.HAPPY
+    }
+
+    // Check for sad indicators
+    if (
+      text.includes('sad') ||
+            text.includes('disappointed') ||
+            text.includes('failed') ||
+            text.includes('wrong')
+    ) {
+      return Emotions.SAD
+    }
+
+    return Emotions.NEUTRAL
+  }
+
+  /**
+     * Get available transitions from react state
+     * @returns {string[]} Array of available state transitions
+     */
+  getAvailableTransitions () {
+    return [States.TYPING, States.WAITING]
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/states_SleepStateHandler.js.html

@@ -0,0 +1,258 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: states/SleepStateHandler.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: states/SleepStateHandler.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Sleep state handler implementation
+ * @module states
+ */
+
+import { StateHandler } from './StateHandler.js'
+import { States, Emotions } from '../constants.js'
+
+/**
+ * Handler for the Sleep state
+ * @class
+ * @extends StateHandler
+ */
+export class SleepStateHandler extends StateHandler {
+  /**
+   * Create a sleep state handler
+   * @param {OwenAnimationContext} context - The animation context
+   */
+  constructor (context) {
+    super(States.SLEEPING, context)
+
+    /**
+     * Sleep animation clip
+     * @type {AnimationClip|null}
+     */
+    this.sleepClip = null
+
+    /**
+     * Whether the character is in deep sleep
+     * @type {boolean}
+     */
+    this.isDeepSleep = false
+  }
+
+  /**
+   * Enter the sleep state
+   * @param {string|null} [fromState=null] - The previous state
+   * @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to enter with (unused)
+   * @returns {Promise&lt;void>}
+   */
+  async enter (fromState = null, _emotion = Emotions.NEUTRAL) {
+    console.log(`Entering SLEEPING state from ${fromState}`)
+
+    // Play sleep transition if available
+    const sleepTransition = this.context.getClip('wait_2sleep_T')
+    if (sleepTransition) {
+      await sleepTransition.play()
+      await this.waitForClipEnd(sleepTransition)
+    }
+
+    // Start sleep loop
+    this.sleepClip = this.context.getClip('sleep_idle_L')
+    if (this.sleepClip) {
+      await this.sleepClip.play()
+      this.currentClip = this.sleepClip
+    }
+
+    this.isDeepSleep = true
+  }
+
+  /**
+   * Exit the sleep state
+   * @param {string|null} [toState=null] - The next state
+   * @param {string} [emotion=Emotions.NEUTRAL] - The emotion to exit with
+   * @returns {Promise&lt;void>}
+   */
+  async exit (toState = null, _emotion = Emotions.NEUTRAL) {
+    console.log(`Exiting SLEEPING state to ${toState}`)
+    this.isDeepSleep = false
+
+    if (this.currentClip) {
+      await this.stopCurrentClip()
+    }
+
+    // Play wake up animation
+    const wakeUpClip = this.context.getClip('sleep_wakeup_T')
+    if (wakeUpClip) {
+      await wakeUpClip.play()
+      await this.waitForClipEnd(wakeUpClip)
+    }
+
+    // Play transition to next state if available
+    const transitionName = `sleep_2${toState}_T`
+    const transition = this.context.getClip(transitionName)
+    if (transition) {
+      await transition.play()
+      await this.waitForClipEnd(transition)
+    }
+  }
+
+  /**
+   * Update the sleep state
+   * @param {number} _deltaTime - Time elapsed since last update (ms, unused)
+   * @returns {void}
+   */
+  update (_deltaTime) {
+    // Sleep state doesn't need regular updates
+    // Character remains asleep until external stimulus
+  }
+
+  /**
+   * Handle a user message in sleep state (wake up)
+   * @param {string} _message - The user message (unused, just triggers wake up)
+   * @returns {Promise&lt;void>}
+   */
+  async handleMessage (_message) {
+    // Any message should wake up the character
+    if (this.isDeepSleep) {
+      console.log('Waking up due to user message')
+      // This will trigger a state transition to REACTING
+      await this.context.transitionTo(States.REACTING)
+    }
+  }
+
+  /**
+   * Get available transitions from sleep state
+   * @returns {string[]} Array of available state transitions
+   */
+  getAvailableTransitions () {
+    return [States.WAITING, States.REACTING]
+  }
+
+  /**
+   * Check if in deep sleep
+   * @returns {boolean} True if in deep sleep, false otherwise
+   */
+  isInDeepSleep () {
+    return this.isDeepSleep
+  }
+
+  /**
+   * Force wake up from sleep
+   * @returns {Promise&lt;void>}
+   */
+  async wakeUp () {
+    if (this.isDeepSleep) {
+      await this.context.transitionTo(States.WAITING)
+    }
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/states_StateFactory.js.html

@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: states/StateFactory.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: states/StateFactory.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview State factory for creating state handlers
+ * @module states
+ */
+
+import { WaitStateHandler } from './WaitStateHandler.js'
+import { ReactStateHandler } from './ReactStateHandler.js'
+import { TypeStateHandler } from './TypeStateHandler.js'
+import { SleepStateHandler } from './SleepStateHandler.js'
+import { States } from '../constants.js'
+
+/**
+ * Factory for creating state handlers using dependency injection
+ * @class
+ */
+export class StateFactory {
+  /**
+   * Create a state factory
+   */
+  constructor () {
+    /**
+     * Registry of state handler classes
+     * @type {Map&lt;string, Function>}
+     * @private
+     */
+    this.stateHandlers = new Map()
+
+    // Register default state handlers
+    this.registerStateHandler(States.WAITING, WaitStateHandler)
+    this.registerStateHandler(States.REACTING, ReactStateHandler)
+    this.registerStateHandler(States.TYPING, TypeStateHandler)
+    this.registerStateHandler(States.SLEEPING, SleepStateHandler)
+  }
+
+  /**
+   * Register a state handler class
+   * @param {string} stateName - The name of the state
+   * @param {Function} handlerClass - The handler class constructor
+   * @returns {void}
+   */
+  registerStateHandler (stateName, handlerClass) {
+    this.stateHandlers.set(stateName, handlerClass)
+  }
+
+  /**
+   * Create a state handler instance
+   * @param {string} stateName - The name of the state
+   * @param {OwenAnimationContext} context - The animation context
+   * @returns {StateHandler} The created state handler
+   * @throws {Error} If state handler is not registered
+   */
+  createStateHandler (stateName, context) {
+    const HandlerClass = this.stateHandlers.get(stateName)
+    if (!HandlerClass) {
+      throw new Error(`No handler registered for state: ${stateName}`)
+    }
+
+    return new HandlerClass(context)
+  }
+
+  /**
+   * Get all available state names
+   * @returns {string[]} Array of registered state names
+   */
+  getAvailableStates () {
+    return Array.from(this.stateHandlers.keys())
+  }
+
+  /**
+   * Check if a state is registered
+   * @param {string} stateName - The state name to check
+   * @returns {boolean} True if registered, false otherwise
+   */
+  isStateRegistered (stateName) {
+    return this.stateHandlers.has(stateName)
+  }
+
+  /**
+   * Unregister a state handler
+   * @param {string} stateName - The state name to unregister
+   * @returns {boolean} True if removed, false if not found
+   */
+  unregisterStateHandler (stateName) {
+    return this.stateHandlers.delete(stateName)
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/states_StateHandler.js.html

@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: states/StateHandler.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: states/StateHandler.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Base state handler class and utilities
+ * @module StateHandler
+ */
+
+import { Emotions, Config } from '../constants.js'
+
+/**
+ * Abstract base class for state handlers
+ * @abstract
+ * @class
+ */
+export class StateHandler {
+  /**
+   * Create a state handler
+   * @param {string} stateName - The name of the state
+   * @param {OwenAnimationContext} context - The animation context
+   */
+  constructor (stateName, context) {
+    /**
+     * The name of this state
+     * @type {string}
+     */
+    this.stateName = stateName
+
+    /**
+     * The animation context
+     * @type {OwenAnimationContext}
+     */
+    this.context = context
+
+    /**
+     * Currently playing animation clip
+     * @type {AnimationClip|null}
+     */
+    this.currentClip = null
+
+    /**
+     * Nested state information
+     * @type {Object|null}
+     */
+    this.nestedState = null
+  }
+
+  /**
+   * Enter this state
+   * @abstract
+   * @param {string|null} [_fromState=null] - The previous state (unused in base class)
+   * @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to enter with (unused in base class)
+   * @returns {Promise&lt;void>}
+   * @throws {Error} Must be implemented by subclasses
+   */
+  async enter (_fromState = null, _emotion = Emotions.NEUTRAL) {
+    throw new Error('enter method must be implemented by subclasses')
+  }
+
+  /**
+   * Exit this state
+   * @abstract
+   * @param {string|null} [_toState=null] - The next state (unused in base class)
+   * @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to exit with (unused in base class)
+   * @returns {Promise&lt;void>}
+   * @throws {Error} Must be implemented by subclasses
+   */
+  async exit (_toState = null, _emotion = Emotions.NEUTRAL) {
+    throw new Error('exit method must be implemented by subclasses')
+  }
+
+  /**
+   * Update this state (called every frame)
+   * @param {number} _deltaTime - Time elapsed since last update (ms, unused in base class)
+   * @returns {void}
+   */
+  update (_deltaTime) {
+    // Override in subclasses if needed
+  }
+
+  /**
+   * Handle a user message while in this state
+   * @param {string} _message - The user message (unused in base class)
+   * @returns {Promise&lt;void>}
+   */
+  async handleMessage (_message) {
+    // Override in subclasses if needed
+  }
+
+  /**
+   * Get available transitions from this state
+   * @returns {string[]} Array of state names that can be transitioned to
+   */
+  getAvailableTransitions () {
+    return []
+  }
+
+  /**
+   * Wait for an animation clip to finish playing
+   * @protected
+   * @param {AnimationClip} clip - The animation clip to wait for
+   * @returns {Promise&lt;void>} Promise that resolves when the clip finishes
+   */
+  async waitForClipEnd (clip) {
+    return new Promise((resolve) => {
+      const checkFinished = () => {
+        if (!clip.isPlaying()) {
+          resolve()
+        } else {
+          requestAnimationFrame(checkFinished)
+        }
+      }
+      checkFinished()
+    })
+  }
+
+  /**
+   * Stop the currently playing clip
+   * @protected
+   * @param {number} [fadeOutDuration] - Fade out duration
+   * @returns {Promise&lt;void>}
+   */
+  async stopCurrentClip (fadeOutDuration = Config.DEFAULT_FADE_OUT) {
+    if (this.currentClip) {
+      await this.currentClip.stop(fadeOutDuration)
+      this.currentClip = null
+    }
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/states_TypeStateHandler.js.html

@@ -0,0 +1,246 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: states/TypeStateHandler.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: states/TypeStateHandler.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Type state handler implementation
+ * @module states
+ */
+
+import { StateHandler } from './StateHandler.js'
+import { States, Emotions } from '../constants.js'
+
+/**
+ * Handler for the Type state
+ * @class
+ * @extends StateHandler
+ */
+export class TypeStateHandler extends StateHandler {
+  /**
+   * Create a type state handler
+   * @param {OwenAnimationContext} context - The animation context
+   */
+  constructor (context) {
+    super(States.TYPING, context)
+
+    /**
+     * Current emotional state
+     * @type {string}
+     */
+    this.emotion = Emotions.NEUTRAL
+
+    /**
+     * Whether currently typing
+     * @type {boolean}
+     */
+    this.isTyping = false
+  }
+
+  /**
+   * Enter the type state
+   * @param {string|null} [_fromState=null] - The previous state (unused)
+   * @param {string} [emotion=Emotions.NEUTRAL] - The emotion to enter with
+   * @returns {Promise&lt;void>}
+   */
+  async enter (_fromState = null, emotion = Emotions.NEUTRAL) {
+    console.log(`Entering TYPING state with emotion: ${emotion}`)
+    this.emotion = emotion
+    this.isTyping = true
+
+    // Play appropriate typing animation
+    let typingClipName = 'type_idle_L'
+    if (emotion !== Emotions.NEUTRAL) {
+      typingClipName = `type_${emotion}_L`
+    }
+
+    const typingClip = this.context.getClip(typingClipName)
+    if (typingClip) {
+      await typingClip.play()
+      this.currentClip = typingClip
+    }
+  }
+
+  /**
+   * Exit the type state
+   * @param {string|null} [toState=null] - The next state
+   * @param {string} [_emotion=Emotions.NEUTRAL] - The emotion to exit with (unused)
+   * @returns {Promise&lt;void>}
+   */
+  async exit (toState = null, _emotion = Emotions.NEUTRAL) {
+    console.log(`Exiting TYPING state to ${toState}`)
+    this.isTyping = false
+
+    if (this.currentClip) {
+      await this.stopCurrentClip()
+    }
+
+    // Play transition if available
+    let transitionName = `type_2${toState}_T`
+    if (this.emotion !== Emotions.NEUTRAL) {
+      transitionName = `type_${this.emotion}2${toState}_T`
+    }
+
+    const transition = this.context.getClip(transitionName)
+    if (transition) {
+      await transition.play()
+      await this.waitForClipEnd(transition)
+    }
+  }
+
+  /**
+   * Finish typing and prepare to transition
+   * @returns {Promise&lt;void>}
+   */
+  async finishTyping () {
+    if (!this.isTyping) return
+
+    // Play typing finish animation if available
+    const finishClip = this.context.getClip('type_finish_Q')
+    if (finishClip &amp;&amp; this.currentClip) {
+      await this.stopCurrentClip(0.2)
+      await finishClip.play()
+      await this.waitForClipEnd(finishClip)
+    }
+
+    this.isTyping = false
+  }
+
+  /**
+   * Get available transitions from type state
+   * @returns {string[]} Array of available state transitions
+   */
+  getAvailableTransitions () {
+    return [States.WAITING, States.REACTING]
+  }
+
+  /**
+   * Check if currently typing
+   * @returns {boolean} True if typing, false otherwise
+   */
+  getIsTyping () {
+    return this.isTyping
+  }
+
+  /**
+   * Set typing state
+   * @param {boolean} typing - Whether currently typing
+   * @returns {void}
+   */
+  setTyping (typing) {
+    this.isTyping = typing
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/states_WaitStateHandler.js.html

@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: states/WaitStateHandler.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: states/WaitStateHandler.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Wait state handler implementation
+ * @module states
+ */
+
+import { StateHandler } from './StateHandler.js'
+import { States, Emotions, Config } from '../constants.js'
+
+/**
+ * Handler for the Wait/Idle state
+ * @class
+ * @extends StateHandler
+ */
+export class WaitStateHandler extends StateHandler {
+  /**
+     * Create a wait state handler
+     * @param {OwenAnimationContext} context - The animation context
+     */
+  constructor (context) {
+    super(States.WAITING, context)
+
+    /**
+         * The main idle animation clip
+         * @type {AnimationClip|null}
+         */
+    this.idleClip = null
+
+    /**
+         * Available quirk animations
+         * @type {AnimationClip[]}
+         */
+    this.quirks = []
+
+    /**
+         * Timer for quirk animations
+         * @type {number}
+         */
+    this.quirkTimer = 0
+
+    /**
+         * Interval between quirk attempts (ms)
+         * @type {number}
+         */
+    this.quirkInterval = Config.QUIRK_INTERVAL
+  }
+
+  /**
+     * Enter the wait state
+     * @param {string|null} [fromState=null] - The previous state
+     * @param {string} [emotion=Emotions.NEUTRAL] - The emotion to enter with
+     * @returns {Promise&lt;void>}
+     */
+  async enter (fromState = null, _emotion = Emotions.NEUTRAL) {
+    console.log(`Entering WAITING state from ${fromState}`)
+
+    // Play idle loop
+    this.idleClip = this.context.getClip('wait_idle_L')
+    if (this.idleClip) {
+      await this.idleClip.play()
+      this.currentClip = this.idleClip
+    }
+
+    // Collect available quirks
+    this.quirks = this.context.getClipsByPattern('wait_*_Q')
+    this.quirkTimer = 0
+  }
+
+  /**
+     * Exit the wait state
+     * @param {string|null} [toState=null] - The next state
+     * @param {string} [emotion=Emotions.NEUTRAL] - The emotion to exit with
+     * @returns {Promise&lt;void>}
+     */
+  async exit (toState = null, _emotion = Emotions.NEUTRAL) {
+    console.log(`Exiting WAITING state to ${toState}`)
+
+    if (this.currentClip) {
+      await this.stopCurrentClip()
+    }
+
+    // Play transition if available
+    const transitionName = `wait_2${toState}_T`
+    const transition = this.context.getClip(transitionName)
+    if (transition) {
+      await transition.play()
+      await this.waitForClipEnd(transition)
+    }
+  }
+
+  /**
+     * Update the wait state
+     * @param {number} deltaTime - Time elapsed since last update (ms)
+     * @returns {void}
+     */
+  update (deltaTime) {
+    this.quirkTimer += deltaTime
+
+    // Randomly play quirks
+    if (this.quirkTimer > this.quirkInterval &amp;&amp; Math.random() &lt; Config.QUIRK_PROBABILITY) {
+      this.playRandomQuirk()
+      this.quirkTimer = 0
+    }
+  }
+
+  /**
+     * Play a random quirk animation
+     * @private
+     * @returns {Promise&lt;void>}
+     */
+  async playRandomQuirk () {
+    if (this.quirks.length === 0) return
+
+    const quirk = this.quirks[Math.floor(Math.random() * this.quirks.length)]
+
+    // Fade out idle
+    if (this.idleClip) {
+      await this.idleClip.stop(0.2)
+    }
+
+    // Play quirk
+    await quirk.play()
+    await this.waitForClipEnd(quirk)
+
+    // Return to idle
+    if (this.idleClip) {
+      await this.idleClip.play()
+      this.currentClip = this.idleClip
+    }
+  }
+
+  /**
+     * Get available transitions from wait state
+     * @returns {string[]} Array of available state transitions
+     */
+  getAvailableTransitions () {
+    return [States.REACTING, States.SLEEPING]
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>

docs/styles/jsdoc-default.css

@@ -0,0 +1,377 @@
+@font-face {
+  font-family: "Open Sans";
+  font-weight: normal;
+  font-style: normal;
+  src: url("../fonts/OpenSans-Regular-webfont.eot");
+  src:
+    local("Open Sans"),
+    local("OpenSans"),
+    url("../fonts/OpenSans-Regular-webfont.eot?#iefix")
+      format("embedded-opentype"),
+    url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
+    url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
+}
+
+@font-face {
+  font-family: "Open Sans Light";
+  font-weight: normal;
+  font-style: normal;
+  src: url("../fonts/OpenSans-Light-webfont.eot");
+  src:
+    local("Open Sans Light"),
+    local("OpenSans Light"),
+    url("../fonts/OpenSans-Light-webfont.eot?#iefix")
+      format("embedded-opentype"),
+    url("../fonts/OpenSans-Light-webfont.woff") format("woff"),
+    url("../fonts/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
+}
+
+html {
+  overflow: auto;
+  background-color: #fff;
+  font-size: 14px;
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  line-height: 1.5;
+  color: #4d4e53;
+  background-color: white;
+}
+
+a,
+a:visited,
+a:active {
+  color: #0095dd;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+header {
+  display: block;
+  padding: 0px 4px;
+}
+
+tt,
+code,
+kbd,
+samp {
+  font-family: Consolas, Monaco, "Andale Mono", monospace;
+}
+
+.class-description {
+  font-size: 130%;
+  line-height: 140%;
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
+
+.class-description:empty {
+  margin: 0;
+}
+
+#main {
+  float: left;
+  width: 70%;
+}
+
+article dl {
+  margin-bottom: 40px;
+}
+
+article img {
+  max-width: 100%;
+}
+
+section {
+  display: block;
+  background-color: #fff;
+  padding: 12px 24px;
+  border-bottom: 1px solid #ccc;
+  margin-right: 30px;
+}
+
+.variation {
+  display: none;
+}
+
+.signature-attributes {
+  font-size: 60%;
+  color: #aaa;
+  font-style: italic;
+  font-weight: lighter;
+}
+
+nav {
+  display: block;
+  float: right;
+  margin-top: 28px;
+  width: 30%;
+  box-sizing: border-box;
+  border-left: 1px solid #ccc;
+  padding-left: 16px;
+}
+
+nav ul {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
+  font-size: 100%;
+  line-height: 17px;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+nav ul a,
+nav ul a:visited,
+nav ul a:active {
+  font-family: Consolas, Monaco, "Andale Mono", monospace;
+  line-height: 18px;
+  color: #4d4e53;
+}
+
+nav h3 {
+  margin-top: 12px;
+}
+
+nav li {
+  margin-top: 6px;
+}
+
+footer {
+  display: block;
+  padding: 6px;
+  margin-top: 12px;
+  font-style: italic;
+  font-size: 90%;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 200;
+  margin: 0;
+}
+
+h1 {
+  font-family: "Open Sans Light", sans-serif;
+  font-size: 48px;
+  letter-spacing: -2px;
+  margin: 12px 24px 20px;
+}
+
+h2,
+h3.subsection-title {
+  font-size: 30px;
+  font-weight: 700;
+  letter-spacing: -1px;
+  margin-bottom: 12px;
+}
+
+h3 {
+  font-size: 24px;
+  letter-spacing: -0.5px;
+  margin-bottom: 12px;
+}
+
+h4 {
+  font-size: 18px;
+  letter-spacing: -0.33px;
+  margin-bottom: 12px;
+  color: #4d4e53;
+}
+
+h5,
+.container-overview .subsection-title {
+  font-size: 120%;
+  font-weight: bold;
+  letter-spacing: -0.01em;
+  margin: 8px 0 3px 0;
+}
+
+h6 {
+  font-size: 100%;
+  letter-spacing: -0.01em;
+  margin: 6px 0 3px 0;
+  font-style: italic;
+}
+
+table {
+  border-spacing: 0;
+  border: 0;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  border: 1px solid #ddd;
+  margin: 0px;
+  text-align: left;
+  vertical-align: top;
+  padding: 4px 6px;
+  display: table-cell;
+}
+
+thead tr {
+  background-color: #ddd;
+  font-weight: bold;
+}
+
+th {
+  border-right: 1px solid #aaa;
+}
+tr > th:last-child {
+  border-right: 1px solid #ddd;
+}
+
+.ancestors,
+.attribs {
+  color: #999;
+}
+.ancestors a,
+.attribs a {
+  color: #999 !important;
+  text-decoration: none;
+}
+
+.clear {
+  clear: both;
+}
+
+.important {
+  font-weight: bold;
+  color: #950b02;
+}
+
+.yes-def {
+  text-indent: -1000px;
+}
+
+.type-signature {
+  color: #aaa;
+}
+
+.name,
+.signature {
+  font-family: Consolas, Monaco, "Andale Mono", monospace;
+}
+
+.details {
+  margin-top: 14px;
+  border-left: 2px solid #ddd;
+}
+.details dt {
+  width: 120px;
+  float: left;
+  padding-left: 10px;
+  padding-top: 6px;
+}
+.details dd {
+  margin-left: 70px;
+}
+.details ul {
+  margin: 0;
+}
+.details ul {
+  list-style-type: none;
+}
+.details li {
+  margin-left: 30px;
+  padding-top: 6px;
+}
+.details pre.prettyprint {
+  margin: 0;
+}
+.details .object-value {
+  padding-top: 0;
+}
+
+.description {
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
+
+.code-caption {
+  font-style: italic;
+  font-size: 107%;
+  margin: 0;
+}
+
+.source {
+  border: 1px solid #ddd;
+  width: 80%;
+  overflow: auto;
+}
+
+.prettyprint.source {
+  width: inherit;
+}
+
+.source code {
+  font-size: 100%;
+  line-height: 18px;
+  display: block;
+  padding: 4px 12px;
+  margin: 0;
+  background-color: #fff;
+  color: #4d4e53;
+}
+
+.prettyprint code span.line {
+  display: inline-block;
+}
+
+.prettyprint.linenums {
+  padding-left: 70px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.prettyprint.linenums ol {
+  padding-left: 0;
+}
+
+.prettyprint.linenums li {
+  border-left: 3px #ddd solid;
+}
+
+.prettyprint.linenums li.selected,
+.prettyprint.linenums li.selected * {
+  background-color: lightyellow;
+}
+
+.prettyprint.linenums li * {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.params .name,
+.props .name,
+.name code {
+  color: #4d4e53;
+  font-family: Consolas, Monaco, "Andale Mono", monospace;
+  font-size: 100%;
+}
+
+.params td.description > p:first-child,
+.props td.description > p:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.params td.description > p:last-child,
+.props td.description > p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.disabled {
+  color: #454545;
+}

docs/styles/prettify-jsdoc.css

@@ -0,0 +1,111 @@
+/* JSDoc prettify.js theme */
+
+/* plain text */
+.pln {
+  color: #000000;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* string content */
+.str {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a keyword */
+.kwd {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* a comment */
+.com {
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* a type name */
+.typ {
+  color: #000000;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a literal value */
+.lit {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* punctuation */
+.pun {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* lisp open bracket */
+.opn {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* lisp close bracket */
+.clo {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* a markup tag name */
+.tag {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a markup attribute name */
+.atn {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a markup attribute value */
+.atv {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a declaration */
+.dec {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* a variable name */
+.var {
+  color: #000000;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a function name */
+.fun {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}

docs/styles/prettify-tomorrow.css

@@ -0,0 +1,163 @@
+/* Tomorrow Theme */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* Pretty printing styles. Used with prettify.js. */
+/* SPAN elements with the classes below are added by prettyprint. */
+/* plain text */
+.pln {
+  color: #4d4d4c;
+}
+
+@media screen {
+  /* string content */
+  .str {
+    color: #718c00;
+  }
+
+  /* a keyword */
+  .kwd {
+    color: #8959a8;
+  }
+
+  /* a comment */
+  .com {
+    color: #8e908c;
+  }
+
+  /* a type name */
+  .typ {
+    color: #4271ae;
+  }
+
+  /* a literal value */
+  .lit {
+    color: #f5871f;
+  }
+
+  /* punctuation */
+  .pun {
+    color: #4d4d4c;
+  }
+
+  /* lisp open bracket */
+  .opn {
+    color: #4d4d4c;
+  }
+
+  /* lisp close bracket */
+  .clo {
+    color: #4d4d4c;
+  }
+
+  /* a markup tag name */
+  .tag {
+    color: #c82829;
+  }
+
+  /* a markup attribute name */
+  .atn {
+    color: #f5871f;
+  }
+
+  /* a markup attribute value */
+  .atv {
+    color: #3e999f;
+  }
+
+  /* a declaration */
+  .dec {
+    color: #f5871f;
+  }
+
+  /* a variable name */
+  .var {
+    color: #c82829;
+  }
+
+  /* a function name */
+  .fun {
+    color: #4271ae;
+  }
+}
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str {
+    color: #060;
+  }
+
+  .kwd {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .com {
+    color: #600;
+    font-style: italic;
+  }
+
+  .typ {
+    color: #404;
+    font-weight: bold;
+  }
+
+  .lit {
+    color: #044;
+  }
+
+  .pun,
+  .opn,
+  .clo {
+    color: #440;
+  }
+
+  .tag {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .atn {
+    color: #404;
+  }
+
+  .atv {
+    color: #060;
+  }
+}
+/* Style */
+/*
+pre.prettyprint {
+  background: white;
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid #ccc;
+  padding: 10px; }
+*/
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+  /* */
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+  /* */
+}

examples/basic-demo/basic-demo.js

@@ -0,0 +1,331 @@
+/**
+ * @fileoverview Basic example of using the Owen Animation System
+ * @author Owen Animation System
+ */
+
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { OwenSystemFactory, States } from '../../src/index.js'
+
+/**
+ * Basic Owen Animation System demo
+ * @class
+ */
+class OwenDemo {
+  /**
+   * Create the demo
+   */
+  constructor () {
+    /**
+     * The Three.js scene
+     * @type {THREE.Scene}
+     */
+    this.scene = new THREE.Scene()
+
+    /**
+     * The Three.js camera
+     * @type {THREE.PerspectiveCamera}
+     */
+    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+
+    /**
+     * The Three.js renderer
+     * @type {THREE.WebGLRenderer}
+     */
+    this.renderer = new THREE.WebGLRenderer({ antialias: true })
+
+    /**
+     * The Owen animation system
+     * @type {OwenAnimationContext|null}
+     */
+    this.owenSystem = null
+
+    /**
+     * Clock for tracking time
+     * @type {THREE.Clock}
+     */
+    this.clock = new THREE.Clock()
+  }
+
+  /**
+   * Initialize the demo
+   * @returns {Promise<void>}
+   */
+  async init () {
+    // Setup renderer
+    this.renderer.setSize(window.innerWidth, window.innerHeight)
+    this.renderer.setClearColor(0x1a1a1a)
+    this.renderer.shadowMap.enabled = true
+    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
+    document.body.appendChild(this.renderer.domElement)
+
+    // Setup camera
+    this.camera.position.set(0, 1.6, 3)
+    this.camera.lookAt(0, 1, 0)
+
+    // Add lighting
+    this.setupLighting()
+
+    // Load Owen model (replace with your model path)
+    await this.loadOwenModel()
+
+    // Setup event listeners
+    this.setupEventListeners()
+
+    // Start render loop
+    this.animate()
+
+    console.log('Owen Demo initialized')
+  }
+
+  /**
+   * Setup scene lighting
+   * @private
+   * @returns {void}
+   */
+  setupLighting () {
+    // Ambient light
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.4)
+    this.scene.add(ambientLight)
+
+    // Directional light
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
+    directionalLight.position.set(5, 10, 5)
+    directionalLight.castShadow = true
+    directionalLight.shadow.mapSize.width = 2048
+    directionalLight.shadow.mapSize.height = 2048
+    this.scene.add(directionalLight)
+
+    // Fill light
+    const fillLight = new THREE.DirectionalLight(0x8bb7f0, 0.3)
+    fillLight.position.set(-5, 5, -5)
+    this.scene.add(fillLight)
+  }
+
+  /**
+   * Load the Owen character model
+   * @private
+   * @returns {Promise<void>}
+   */
+  async loadOwenModel () {
+    try {
+      const loader = new GLTFLoader()
+
+      // Replace 'path/to/owen.gltf' with your actual model path
+      const gltf = await new Promise((resolve, reject) => {
+        loader.load(
+          'path/to/owen.gltf', // Update this path
+          resolve,
+          (progress) => console.log('Loading progress:', progress.loaded / progress.total * 100 + '%'),
+          reject
+        )
+      })
+
+      const model = gltf.scene
+      model.position.set(0, 0, 0)
+      model.scale.setScalar(1)
+
+      // Enable shadows
+      model.traverse((child) => {
+        if (child.isMesh) {
+          child.castShadow = true
+          child.receiveShadow = true
+        }
+      })
+
+      this.scene.add(model)
+
+      // Create Owen animation system
+      this.owenSystem = await OwenSystemFactory.createOwenSystem(gltf, this.scene)
+
+      console.log('Owen model loaded and animation system created')
+      this.logSystemInfo()
+    } catch (error) {
+      console.error('Error loading Owen model:', error)
+
+      // Create a placeholder cube for demo purposes
+      this.createPlaceholderModel()
+    }
+  }
+
+  /**
+   * Create a placeholder model for demo purposes
+   * @private
+   * @returns {void}
+   */
+  createPlaceholderModel () {
+    const geometry = new THREE.BoxGeometry(1, 2, 1)
+    const material = new THREE.MeshPhongMaterial({ color: 0x6699ff })
+    const cube = new THREE.Mesh(geometry, material)
+    cube.position.set(0, 1, 0)
+    cube.castShadow = true
+    cube.receiveShadow = true
+    this.scene.add(cube)
+
+    console.log('Created placeholder model (cube)')
+  }
+
+  /**
+   * Setup event listeners for user interaction
+   * @private
+   * @returns {void}
+   */
+  setupEventListeners () {
+    // Keyboard controls
+    document.addEventListener('keydown', (event) => {
+      if (!this.owenSystem) return
+
+      switch (event.key) {
+        case '1':
+          this.owenSystem.transitionTo(States.WAITING)
+          break
+        case '2':
+          this.owenSystem.transitionTo(States.REACTING)
+          break
+        case '3':
+          this.owenSystem.transitionTo(States.TYPING)
+          break
+        case '4':
+          this.owenSystem.transitionTo(States.SLEEPING)
+          break
+        case ' ':
+          this.sendTestMessage()
+          break
+      }
+    })
+
+    // Mouse interaction
+    document.addEventListener('click', () => {
+      if (this.owenSystem) {
+        this.owenSystem.onUserActivity()
+      }
+    })
+
+    // Window resize
+    window.addEventListener('resize', () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight
+      this.camera.updateProjectionMatrix()
+      this.renderer.setSize(window.innerWidth, window.innerHeight)
+    })
+
+    // Add instructions to the page
+    this.addInstructions()
+  }
+
+  /**
+   * Add on-screen instructions
+   * @private
+   * @returns {void}
+   */
+  addInstructions () {
+    const instructions = document.createElement('div')
+    instructions.innerHTML = `
+      <div style="position: absolute; top: 10px; left: 10px; color: white; ` +
+        `font-family: monospace; font-size: 14px; line-height: 1.4;">
+        <h3>Owen Animation System Demo</h3>
+        <p><strong>Controls:</strong></p>
+        <p>1 - Wait State</p>
+        <p>2 - React State</p>
+        <p>3 - Type State</p>
+        <p>4 - Sleep State</p>
+        <p>Space - Send Test Message</p>
+        <p>Click - User Activity</p>
+        <br>
+        <p><strong>Current State:</strong> <span id="current-state">-</span></p>
+        <p><strong>Available Transitions:</strong> <span id="transitions">-</span></p>
+      </div>
+    `
+    document.body.appendChild(instructions)
+  }
+
+  /**
+   * Send a test message to Owen
+   * @private
+   * @returns {void}
+   */
+  sendTestMessage () {
+    if (!this.owenSystem) return
+
+    const testMessages = [
+      'Hello Owen!',
+      'How are you doing?',
+      'This is urgent!',
+      'Great work!',
+      'Error in the system!',
+      'I\'m feeling sad today'
+    ]
+
+    const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)]
+    console.log(`Sending message: "${randomMessage}"`)
+    this.owenSystem.handleUserMessage(randomMessage)
+  }
+
+  /**
+   * Log system information
+   * @private
+   * @returns {void}
+   */
+  logSystemInfo () {
+    if (!this.owenSystem) return
+
+    console.log('=== Owen System Info ===')
+    console.log('Available States:', this.owenSystem.getAvailableStates())
+    console.log('Available Clips:', this.owenSystem.getAvailableClips())
+    console.log('Current State:', this.owenSystem.getCurrentState())
+    console.log('========================')
+  }
+
+  /**
+   * Update UI with current system state
+   * @private
+   * @returns {void}
+   */
+  updateUI () {
+    if (!this.owenSystem) return
+
+    const currentStateElement = document.getElementById('current-state')
+    const transitionsElement = document.getElementById('transitions')
+
+    if (currentStateElement) {
+      currentStateElement.textContent = this.owenSystem.getCurrentState()
+    }
+
+    if (transitionsElement) {
+      transitionsElement.textContent = this.owenSystem.getAvailableTransitions().join(', ')
+    }
+  }
+
+  /**
+   * Main animation loop
+   * @private
+   * @returns {void}
+   */
+  animate () {
+    requestAnimationFrame(() => this.animate())
+
+    const deltaTime = this.clock.getDelta() * 1000 // Convert to milliseconds
+
+    // Update Owen system
+    if (this.owenSystem) {
+      this.owenSystem.update(deltaTime)
+    }
+
+    // Update UI
+    this.updateUI()
+
+    // Render scene
+    this.renderer.render(this.scene, this.camera)
+  }
+}
+
+// Initialize the demo when the page loads
+window.addEventListener('load', async () => {
+  const demo = new OwenDemo()
+  try {
+    await demo.init()
+  } catch (error) {
+    console.error('Failed to initialize Owen demo:', error)
+  }
+})
+
+export default OwenDemo

examples/basic-demo/index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Owen Animation System - Basic Demo</title>
+    <style>
+      body {
+        margin: 0;
+        overflow: hidden;
+        background: #1a1a1a;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      }
+
+      #loading {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-size: 18px;
+        z-index: 1000;
+      }
+
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="loading">Loading Owen Animation System...</div>
+
+    <script type="module">
+      import "./basic-demo.js";
+
+      // Hide loading screen after a short delay
+      setTimeout(() => {
+        const loading = document.getElementById("loading");
+        if (loading) {
+          loading.classList.add("hidden");
+        }
+      }, 3000);
+    </script>
+  </body>
+</html>

examples/basic-demo/simple-example.js

@@ -0,0 +1,183 @@
+/**
+ * @fileoverview Simple usage example for Node.js environment
+ * @author Owen Animation System
+ */
+
+import { OwenSystemFactory, States } from '../../src/index.js'
+
+/**
+ * Simple example of using Owen Animation System
+ * This example shows how to use the system without a browser environment
+ */
+class SimpleOwenExample {
+  constructor () {
+    this.owenSystem = null
+  }
+
+  /**
+   * Initialize the Owen system with a mock model
+   * @returns {Promise<void>}
+   */
+  async init () {
+    try {
+      // Create a mock GLTF model for demonstration
+      const mockModel = this.createMockModel()
+
+      // Create the Owen system
+      this.owenSystem = await OwenSystemFactory.createBasicOwenSystem(mockModel)
+
+      console.log('✅ Owen Animation System initialized successfully!')
+      console.log('📊 System Info:')
+      console.log(`   Available States: ${this.owenSystem.getAvailableStates().join(', ')}`)
+      console.log(`   Current State: ${this.owenSystem.getCurrentState()}`)
+
+      // Run some example interactions
+      await this.runExamples()
+    } catch (error) {
+      console.error('❌ Failed to initialize Owen system:', error.message)
+    }
+  }
+
+  /**
+   * Create a mock 3D model for demonstration purposes
+   * @returns {Object} Mock model object
+   */
+  createMockModel () {
+    return {
+      animations: [
+        { name: 'wait_idle_L' },
+        { name: 'wait_quirk1_Q' },
+        { name: 'wait_quirk2_Q' },
+        { name: 'react_idle_L' },
+        { name: 'react_angry_Q' },
+        { name: 'react_happy_Q' },
+        { name: 'type_idle_L' },
+        { name: 'type_angry_L' },
+        { name: 'sleep_idle_L' },
+        { name: 'wait_2react_T' },
+        { name: 'react_2type_T' },
+        { name: 'type_2wait_T' },
+        { name: 'wait_2sleep_T' },
+        { name: 'sleep_2wait_T' }
+      ],
+      scene: {},
+      userData: {}
+    }
+  }
+
+  /**
+   * Run example interactions with the Owen system
+   * @returns {Promise<void>}
+   */
+  async runExamples () {
+    console.log('\n🎬 Running example interactions...\n')
+
+    // Example 1: Basic state transitions
+    console.log('📝 Example 1: Manual state transitions')
+    await this.demonstrateStateTransitions()
+
+    // Example 2: Message handling
+    console.log('\n📝 Example 2: Message handling with emotions')
+    await this.demonstrateMessageHandling()
+
+    // Example 3: System update loop
+    console.log('\n📝 Example 3: System update simulation')
+    this.demonstrateUpdateLoop()
+
+    console.log('\n✨ All examples completed!')
+  }
+
+  /**
+   * Demonstrate manual state transitions
+   * @returns {Promise<void>}
+   */
+  async demonstrateStateTransitions () {
+    const states = [States.REACTING, States.TYPING, States.WAITING, States.SLEEPING]
+
+    for (const state of states) {
+      console.log(`🔄 Transitioning to ${state.toUpperCase()} state...`)
+      await this.owenSystem.transitionTo(state)
+      console.log(`   ✓ Current state: ${this.owenSystem.getCurrentState()}`)
+      console.log(`   ✓ Available transitions: ${this.owenSystem.getAvailableTransitions().join(', ')}`)
+
+      // Simulate some time passing
+      await this.sleep(500)
+    }
+  }
+
+  /**
+   * Demonstrate message handling with emotional responses
+   * @returns {Promise<void>}
+   */
+  async demonstrateMessageHandling () {
+    const messages = [
+      { text: 'Hello Owen!', expected: 'neutral response' },
+      { text: 'This is urgent!', expected: 'angry/urgent response' },
+      { text: 'Great work!', expected: 'happy response' },
+      { text: 'There\'s an error in the system', expected: 'shocked response' },
+      { text: 'I\'m feeling sad today', expected: 'sad response' }
+    ]
+
+    for (const message of messages) {
+      console.log(`💬 Sending message: "${message.text}"`)
+      console.log(`   Expected: ${message.expected}`)
+
+      await this.owenSystem.handleUserMessage(message.text)
+      console.log(`   ✓ Current state after message: ${this.owenSystem.getCurrentState()}`)
+
+      await this.sleep(300)
+    }
+  }
+
+  /**
+   * Demonstrate the system update loop
+   * @returns {void}
+   */
+  demonstrateUpdateLoop () {
+    console.log('⏱️  Simulating update loop for 3 seconds...')
+
+    let iterations = 0
+    const startTime = Date.now()
+
+    const updateLoop = () => {
+      const deltaTime = 16.67 // ~60 FPS
+      this.owenSystem.update(deltaTime)
+      iterations++
+
+      if (Date.now() - startTime < 3000) {
+        setTimeout(updateLoop, 16)
+      } else {
+        console.log(`   ✓ Completed ${iterations} update iterations`)
+        console.log(`   ✓ Final state: ${this.owenSystem.getCurrentState()}`)
+      }
+    }
+
+    updateLoop()
+  }
+
+  /**
+   * Simple sleep utility for demonstrations
+   * @param {number} ms - Milliseconds to sleep
+   * @returns {Promise<void>}
+   */
+  sleep (ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+}
+
+// Run the example if this file is executed directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  console.log('🚀 Starting Owen Animation System Example\n')
+
+  const example = new SimpleOwenExample()
+  example.init()
+    .then(() => {
+      console.log('\n🎉 Example completed successfully!')
+      console.log('💡 Try modifying this example or check out the browser demo in examples/index.html')
+    })
+    .catch(error => {
+      console.error('\n💥 Example failed:', error)
+    })
+}
+
+export default SimpleOwenExample

jsdoc.config.json

@@ -0,0 +1,23 @@
+{
+  "source": {
+    "include": [
+      "./src"
+    ],
+    "includePattern": "\\.(js|jsx)$",
+    "exclude": [
+      "node_modules/"
+    ]
+  },
+  "opts": {
+    "destination": "./docs/",
+    "recurse": true,
+    "readme": "./README.md"
+  },
+  "plugins": [
+    "plugins/markdown"
+  ],
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false
+  }
+}

owen-animation-system.js

@@ -1,873 +0,0 @@
-// Animation Clip Types
-const ClipTypes = {
-  LOOP: 'L',
-  QUIRK: 'Q',
-  NESTED_LOOP: 'NL',
-  NESTED_QUIRK: 'NQ',
-  NESTED_IN: 'IN_NT',
-  NESTED_OUT: 'OUT_NT',
-  TRANSITION: 'T',
-};
-
-// Character States
-const States = {
-  WAIT: 'wait',
-  REACT: 'react',
-  TYPE: 'type',
-  SLEEP: 'sleep',
-};
-
-// Emotions
-const Emotions = {
-  NEUTRAL: '',
-  ANGRY: 'an',
-  SHOCKED: 'sh',
-  HAPPY: 'ha',
-  SAD: 'sa',
-};
-
-/**
- * Animation Clip Factory - Creates animation clips based on naming convention
- */
-class AnimationClipFactory {
-  constructor(animationLoader) {
-    this.animationLoader = animationLoader;
-    this.clipCache = new Map();
-  }
-
-  /**
-   * Parse animation name and create clip metadata
-   * Format: [state]_[action]_[type] or [state]_[action]2[toState]_[emotion]_T
-   */
-  parseAnimationName(name) {
-    const parts = name.split('_');
-    const state = parts[0];
-    const action = parts[1];
-
-    // Handle transitions with emotions
-    if (parts[2]?.includes('2') && parts[3] === ClipTypes.TRANSITION) {
-      const [fromAction, toState] = parts[2].split('2');
-      const emotion = parts[3] || Emotions.NEUTRAL;
-      return {
-        state,
-        action: fromAction,
-        toState,
-        emotion,
-        type: ClipTypes.TRANSITION,
-        isEmotional: true,
-      };
-    }
-
-    // Handle regular transitions
-    if (parts[2] === ClipTypes.TRANSITION) {
-      const [fromState, toState] = parts[1].split('2');
-      return {
-        state,
-        action: fromState,
-        toState,
-        type: ClipTypes.TRANSITION,
-        isEmotional: false,
-      };
-    }
-
-    // Handle nested animations
-    if (parts[2] === ClipTypes.NESTED_IN || parts[2] === ClipTypes.NESTED_OUT) {
-      return {
-        state,
-        action,
-        type: parts[2],
-        isNested: true,
-      };
-    }
-
-    // Handle nested loops and quirks
-    if (
-      parts[3] === ClipTypes.NESTED_LOOP ||
-      parts[3] === ClipTypes.NESTED_QUIRK
-    ) {
-      return {
-        state,
-        action,
-        nestedAction: parts[2],
-        type: parts[3],
-        isNested: true,
-      };
-    }
-
-    // Handle standard loops and quirks
-    return {
-      state,
-      action,
-      type: parts[2],
-      isStandard: true,
-    };
-  }
-
-  async createClip(name, model) {
-    if (this.clipCache.has(name)) {
-      return this.clipCache.get(name);
-    }
-
-    const metadata = this.parseAnimationName(name);
-    const animation = await this.animationLoader.loadAnimation(name);
-
-    const clip = new AnimationClip(name, animation, metadata);
-    this.clipCache.set(name, clip);
-
-    return clip;
-  }
-
-  async createClipsFromModel(model) {
-    const clips = new Map();
-    const animations = model.animations || [];
-
-    for (const animation of animations) {
-      const clip = await this.createClip(animation.name, model);
-      clips.set(animation.name, clip);
-    }
-
-    return clips;
-  }
-}
-
-/**
- * Animation Clip - Represents a single animation with metadata
- */
-class AnimationClip {
-  constructor(name, threeAnimation, metadata) {
-    this.name = name;
-    this.animation = threeAnimation;
-    this.metadata = metadata;
-    this.action = null;
-    this.mixer = null;
-  }
-
-  createAction(mixer) {
-    this.mixer = mixer;
-    this.action = mixer.clipAction(this.animation);
-
-    // Configure based on type
-    if (
-      this.metadata.type === ClipTypes.LOOP ||
-      this.metadata.type === ClipTypes.NESTED_LOOP
-    ) {
-      this.action.setLoop(THREE.LoopRepeat);
-    } else {
-      this.action.setLoop(THREE.LoopOnce);
-      this.action.clampWhenFinished = true;
-    }
-
-    return this.action;
-  }
-
-  play(fadeInDuration = 0.3) {
-    if (this.action) {
-      this.action.reset();
-      this.action.fadeIn(fadeInDuration);
-      this.action.play();
-    }
-  }
-
-  stop(fadeOutDuration = 0.3) {
-    if (this.action) {
-      this.action.fadeOut(fadeOutDuration);
-    }
-  }
-
-  isPlaying() {
-    return this.action?.isRunning() || false;
-  }
-}
-
-/**
- * State Handler Interface
- */
-class StateHandler {
-  constructor(stateName, context) {
-    this.stateName = stateName;
-    this.context = context;
-    this.currentClip = null;
-    this.nestedState = null;
-  }
-
-  async enter(fromState = null, emotion = Emotions.NEUTRAL) {
-    throw new Error('enter method must be implemented');
-  }
-
-  async exit(toState = null, emotion = Emotions.NEUTRAL) {
-    throw new Error('exit method must be implemented');
-  }
-
-  update(deltaTime) {
-    // Override in subclasses if needed
-  }
-
-  async handleMessage(message) {
-    // Override in subclasses if needed
-  }
-
-  getAvailableTransitions() {
-    return [];
-  }
-}
-
-/**
- * Wait State Handler
- */
-class WaitStateHandler extends StateHandler {
-  constructor(context) {
-    super(States.WAIT, context);
-    this.idleClip = null;
-    this.quirks = [];
-    this.quirkTimer = 0;
-    this.quirkInterval = 5000; // 5 seconds between quirks
-  }
-
-  async enter(fromState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Entering WAIT state from ${fromState}`);
-
-    // Play idle loop
-    this.idleClip = this.context.getClip('wait_idle_L');
-    if (this.idleClip) {
-      await this.idleClip.play();
-    }
-
-    // Collect available quirks
-    this.quirks = this.context.getClipsByPattern('wait_*_Q');
-    this.quirkTimer = 0;
-  }
-
-  async exit(toState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Exiting WAIT state to ${toState}`);
-
-    if (this.currentClip) {
-      this.currentClip.stop();
-    }
-
-    // Play transition if available
-    const transitionName = `wait_2${toState}_T`;
-    const transition = this.context.getClip(transitionName);
-    if (transition) {
-      await transition.play();
-      await this.waitForClipEnd(transition);
-    }
-  }
-
-  update(deltaTime) {
-    this.quirkTimer += deltaTime;
-
-    // Randomly play quirks
-    if (this.quirkTimer > this.quirkInterval && Math.random() < 0.3) {
-      this.playRandomQuirk();
-      this.quirkTimer = 0;
-    }
-  }
-
-  async playRandomQuirk() {
-    if (this.quirks.length === 0) return;
-
-    const quirk = this.quirks[Math.floor(Math.random() * this.quirks.length)];
-    if (this.idleClip) {
-      this.idleClip.stop(0.2);
-    }
-
-    await quirk.play();
-    await this.waitForClipEnd(quirk);
-
-    // Return to idle
-    if (this.idleClip) {
-      this.idleClip.play(0.2);
-    }
-  }
-
-  getAvailableTransitions() {
-    return [States.REACT, States.SLEEP];
-  }
-
-  async waitForClipEnd(clip) {
-    return new Promise((resolve) => {
-      const checkEnd = () => {
-        if (!clip.isPlaying()) {
-          resolve();
-        } else {
-          requestAnimationFrame(checkEnd);
-        }
-      };
-      checkEnd();
-    });
-  }
-}
-
-/**
- * React State Handler
- */
-class ReactStateHandler extends StateHandler {
-  constructor(context) {
-    super(States.REACT, context);
-    this.emotion = Emotions.NEUTRAL;
-  }
-
-  async enter(fromState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Entering REACT state with emotion: ${emotion}`);
-    this.emotion = emotion;
-
-    // Play appropriate reaction
-    const reactionClip = this.context.getClip('react_idle_L');
-    if (reactionClip) {
-      await reactionClip.play();
-    }
-  }
-
-  async exit(toState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Exiting REACT state to ${toState} with emotion: ${emotion}`);
-
-    if (this.currentClip) {
-      this.currentClip.stop();
-    }
-
-    // Play emotional transition if available
-    let transitionName;
-    if (emotion !== Emotions.NEUTRAL) {
-      transitionName = `react_${this.emotion}2${toState}_${emotion}_T`;
-    } else {
-      transitionName = `react_2${toState}_T`;
-    }
-
-    const transition = this.context.getClip(transitionName);
-    if (transition) {
-      await transition.play();
-      await this.waitForClipEnd(transition);
-    }
-  }
-
-  async handleMessage(message) {
-    // Analyze message sentiment to determine emotion
-    const emotion = this.analyzeMessageEmotion(message);
-    this.emotion = emotion;
-
-    // Play emotional reaction if needed
-    if (emotion !== Emotions.NEUTRAL) {
-      const emotionalClip = this.context.getClip(`react_${emotion}_L`);
-      if (emotionalClip) {
-        await emotionalClip.play();
-      }
-    }
-  }
-
-  analyzeMessageEmotion(message) {
-    const text = message.toLowerCase();
-
-    if (
-      text.includes('!') ||
-      text.includes('urgent') ||
-      text.includes('asap')
-    ) {
-      return Emotions.SHOCKED;
-    }
-    if (
-      text.includes('error') ||
-      text.includes('problem') ||
-      text.includes('issue')
-    ) {
-      return Emotions.ANGRY;
-    }
-    if (
-      text.includes('great') ||
-      text.includes('awesome') ||
-      text.includes('good')
-    ) {
-      return Emotions.HAPPY;
-    }
-
-    return Emotions.NEUTRAL;
-  }
-
-  getAvailableTransitions() {
-    return [States.TYPE, States.WAIT];
-  }
-
-  async waitForClipEnd(clip) {
-    return new Promise((resolve) => {
-      const checkEnd = () => {
-        if (!clip.isPlaying()) {
-          resolve();
-        } else {
-          requestAnimationFrame(checkEnd);
-        }
-      };
-      checkEnd();
-    });
-  }
-}
-
-/**
- * Type State Handler
- */
-class TypeStateHandler extends StateHandler {
-  constructor(context) {
-    super(States.TYPE, context);
-    this.emotion = Emotions.NEUTRAL;
-    this.isTyping = false;
-  }
-
-  async enter(fromState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Entering TYPE state with emotion: ${emotion}`);
-    this.emotion = emotion;
-    this.isTyping = true;
-
-    // Play appropriate typing animation
-    let typingClipName = 'type_idle_L';
-    if (emotion !== Emotions.NEUTRAL) {
-      typingClipName = `type_${emotion}_L`;
-    }
-
-    const typingClip = this.context.getClip(typingClipName);
-    if (typingClip) {
-      this.currentClip = typingClip;
-      await typingClip.play();
-    }
-  }
-
-  async exit(toState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Exiting TYPE state to ${toState}`);
-    this.isTyping = false;
-
-    if (this.currentClip) {
-      this.currentClip.stop();
-    }
-
-    // Play appropriate exit transition
-    let transitionName;
-    if (this.emotion !== Emotions.NEUTRAL) {
-      transitionName = `type_${this.emotion}2${toState}_T`;
-    } else {
-      transitionName = `type_2${toState}_T`;
-    }
-
-    const transition = this.context.getClip(transitionName);
-    if (transition) {
-      await transition.play();
-      await this.waitForClipEnd(transition);
-    }
-  }
-
-  async finishTyping() {
-    this.isTyping = false;
-
-    // Transition back to wait state
-    return this.context.transitionTo(States.WAIT, this.emotion);
-  }
-
-  getAvailableTransitions() {
-    return [States.WAIT];
-  }
-
-  async waitForClipEnd(clip) {
-    return new Promise((resolve) => {
-      const checkEnd = () => {
-        if (!clip.isPlaying()) {
-          resolve();
-        } else {
-          requestAnimationFrame(checkEnd);
-        }
-      };
-      checkEnd();
-    });
-  }
-}
-
-/**
- * Sleep State Handler
- */
-class SleepStateHandler extends StateHandler {
-  constructor(context) {
-    super(States.SLEEP, context);
-    this.sleepDuration = 0;
-    this.maxSleepDuration = 30000; // 30 seconds max sleep
-  }
-
-  async enter(fromState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Entering SLEEP state`);
-    this.sleepDuration = 0;
-
-    const sleepClip = this.context.getClip('sleep_idle_L');
-    if (sleepClip) {
-      this.currentClip = sleepClip;
-      await sleepClip.play();
-    }
-  }
-
-  async exit(toState = null, emotion = Emotions.NEUTRAL) {
-    console.log(`Exiting SLEEP state to ${toState}`);
-
-    if (this.currentClip) {
-      this.currentClip.stop();
-    }
-
-    const transition = this.context.getClip(`sleep_2${toState}_T`);
-    if (transition) {
-      await transition.play();
-      await this.waitForClipEnd(transition);
-    }
-  }
-
-  update(deltaTime) {
-    this.sleepDuration += deltaTime;
-
-    // Wake up after max duration or on user activity
-    if (this.sleepDuration > this.maxSleepDuration) {
-      this.context.transitionTo(States.WAIT);
-    }
-  }
-
-  getAvailableTransitions() {
-    return [States.WAIT];
-  }
-
-  async waitForClipEnd(clip) {
-    return new Promise((resolve) => {
-      const checkEnd = () => {
-        if (!clip.isPlaying()) {
-          resolve();
-        } else {
-          requestAnimationFrame(checkEnd);
-        }
-      };
-      checkEnd();
-    });
-  }
-}
-
-/**
- * State Factory - Creates state handlers using dependency injection
- */
-class StateFactory {
-  constructor() {
-    this.stateHandlers = new Map();
-  }
-
-  registerStateHandler(stateName, handlerClass) {
-    this.stateHandlers.set(stateName, handlerClass);
-  }
-
-  createStateHandler(stateName, context) {
-    const HandlerClass = this.stateHandlers.get(stateName);
-    if (!HandlerClass) {
-      throw new Error(`Unknown state: ${stateName}`);
-    }
-
-    return new HandlerClass(context);
-  }
-
-  getAvailableStates() {
-    return Array.from(this.stateHandlers.keys());
-  }
-}
-
-/**
- * Owen Animation Context - Main controller for the animation system
- */
-class OwenAnimationContext {
-  constructor(model, mixer, animationClipFactory, stateFactory) {
-    this.model = model;
-    this.mixer = mixer;
-    this.animationClipFactory = animationClipFactory;
-    this.stateFactory = stateFactory;
-
-    this.clips = new Map();
-    this.states = new Map();
-    this.currentState = null;
-    this.currentStateName = null;
-
-    this.userActivityTimeout = null;
-    this.lastActivityTime = Date.now();
-    this.inactivityThreshold = 180000; // 3 minutes
-  }
-
-  async initialize() {
-    // Load all animation clips
-    this.clips = await this.animationClipFactory.createClipsFromModel(
-      this.model
-    );
-
-    // Create actions for all clips
-    for (const clip of this.clips.values()) {
-      clip.createAction(this.mixer);
-    }
-
-    // Initialize state handlers
-    this.initializeStates();
-
-    // Start in wait state
-    await this.transitionTo(States.WAIT);
-
-    console.log('Owen Animation System initialized');
-  }
-
-  initializeStates() {
-    // Register state handlers
-    this.stateFactory.registerStateHandler(States.WAIT, WaitStateHandler);
-    this.stateFactory.registerStateHandler(States.REACT, ReactStateHandler);
-    this.stateFactory.registerStateHandler(States.TYPE, TypeStateHandler);
-    this.stateFactory.registerStateHandler(States.SLEEP, SleepStateHandler);
-
-    // Create state instances
-    for (const stateName of this.stateFactory.getAvailableStates()) {
-      const stateHandler = this.stateFactory.createStateHandler(
-        stateName,
-        this
-      );
-      this.states.set(stateName, stateHandler);
-    }
-  }
-
-  async transitionTo(newStateName, emotion = Emotions.NEUTRAL) {
-    const newState = this.states.get(newStateName);
-    if (!newState) {
-      throw new Error(`Unknown state: ${newStateName}`);
-    }
-
-    // Exit current state
-    if (this.currentState) {
-      await this.currentState.exit(newStateName, emotion);
-    }
-
-    // Enter new state
-    const fromState = this.currentStateName;
-    this.currentState = newState;
-    this.currentStateName = newStateName;
-
-    await this.currentState.enter(fromState, emotion);
-
-    // Reset activity timer
-    this.resetActivityTimer();
-  }
-
-  async handleUserMessage(message) {
-    this.resetActivityTimer();
-
-    // Always go to react state first
-    if (this.currentStateName !== States.REACT) {
-      await this.transitionTo(States.REACT);
-    }
-
-    // Let the react state handle the message
-    await this.currentState.handleMessage(message);
-
-    // Transition to type state after a brief delay
-    setTimeout(async () => {
-      const emotion = this.currentState.emotion || Emotions.NEUTRAL;
-      await this.transitionTo(States.TYPE, emotion);
-
-      // Simulate typing duration based on message length
-      const typingDuration = Math.min(message.length * 100, 5000);
-      setTimeout(async () => {
-        await this.currentState.finishTyping();
-      }, typingDuration);
-    }, 1000);
-  }
-
-  onUserActivity() {
-    this.resetActivityTimer();
-
-    // Wake up if sleeping
-    if (this.currentStateName === States.SLEEP) {
-      this.transitionTo(States.WAIT);
-    }
-  }
-
-  resetActivityTimer() {
-    this.lastActivityTime = Date.now();
-
-    if (this.userActivityTimeout) {
-      clearTimeout(this.userActivityTimeout);
-    }
-
-    this.userActivityTimeout = setTimeout(() => {
-      this.handleInactivity();
-    }, this.inactivityThreshold);
-  }
-
-  handleInactivity() {
-    if (this.currentStateName === States.WAIT) {
-      this.transitionTo(States.SLEEP);
-    }
-  }
-
-  update(deltaTime) {
-    // Update mixer
-    this.mixer.update(deltaTime);
-
-    // Update current state
-    if (this.currentState) {
-      this.currentState.update(deltaTime);
-    }
-  }
-
-  getClip(name) {
-    return this.clips.get(name);
-  }
-
-  getClipsByPattern(pattern) {
-    const regex = new RegExp(pattern.replace('*', '.*'));
-    return Array.from(this.clips.values()).filter((clip) =>
-      regex.test(clip.name)
-    );
-  }
-
-  getCurrentState() {
-    return this.currentStateName;
-  }
-
-  getAvailableTransitions() {
-    return this.currentState?.getAvailableTransitions() || [];
-  }
-}
-
-/**
- * Animation Loader Interface - Loads animations from various sources
- */
-class AnimationLoader {
-  async loadAnimation(name) {
-    throw new Error('loadAnimation method must be implemented');
-  }
-}
-
-/**
- * GLTF Animation Loader - Loads animations from GLTF models
- */
-class GLTFAnimationLoader extends AnimationLoader {
-  constructor(gltfLoader) {
-    super();
-    this.gltfLoader = gltfLoader;
-    this.animationCache = new Map();
-  }
-
-  async loadAnimation(name) {
-    if (this.animationCache.has(name)) {
-      return this.animationCache.get(name);
-    }
-
-    // In a real implementation, you would load the specific animation
-    // For this mockup, we'll assume animations are already loaded in the model
-    throw new Error(`Animation ${name} not found in model`);
-  }
-}
-
-/**
- * Owen System Factory - Main factory for creating the complete Owen system
- */
-class OwenSystemFactory {
-  static async createOwenSystem(gltfModel, scene) {
-    // Create Three.js mixer
-    const mixer = new THREE.AnimationMixer(gltfModel);
-
-    // Create dependencies
-    const gltfLoader = new THREE.GLTFLoader();
-    const animationLoader = new GLTFAnimationLoader(gltfLoader);
-    const animationClipFactory = new AnimationClipFactory(animationLoader);
-    const stateFactory = new StateFactory();
-
-    // Create the main context
-    const owenContext = new OwenAnimationContext(
-      gltfModel,
-      mixer,
-      animationClipFactory,
-      stateFactory
-    );
-
-    // Initialize the system
-    await owenContext.initialize();
-
-    // Add to scene
-    scene.add(gltfModel);
-
-    return owenContext;
-  }
-}
-
-// Usage Example
-class OwenDemo {
-  constructor() {
-    this.scene = null;
-    this.camera = null;
-    this.renderer = null;
-    this.owenSystem = null;
-    this.clock = new THREE.Clock();
-  }
-
-  async init() {
-    // Setup Three.js scene
-    this.scene = new THREE.Scene();
-    this.camera = new THREE.PerspectiveCamera(
-      75,
-      window.innerWidth / window.innerHeight,
-      0.1,
-      1000
-    );
-    this.renderer = new THREE.WebGLRenderer();
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(this.renderer.domElement);
-
-    // Load Owen model (mockup)
-    const loader = new THREE.GLTFLoader();
-    const gltf = await loader.loadAsync('path/to/owen-model.gltf');
-
-    // Create Owen system
-    this.owenSystem = await OwenSystemFactory.createOwenSystem(
-      gltf.scene,
-      this.scene
-    );
-
-    // Setup event listeners
-    this.setupEventListeners();
-
-    // Start render loop
-    this.animate();
-  }
-
-  setupEventListeners() {
-    // Mouse activity
-    document.addEventListener('mousemove', () => {
-      this.owenSystem.onUserActivity();
-    });
-
-    // Simulate user messages
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        const message = prompt('Send message to Owen:');
-        if (message) {
-          this.owenSystem.handleUserMessage(message);
-        }
-      }
-    });
-  }
-
-  animate() {
-    requestAnimationFrame(() => this.animate());
-
-    const deltaTime = this.clock.getDelta();
-
-    // Update Owen system
-    if (this.owenSystem) {
-      this.owenSystem.update(deltaTime);
-    }
-
-    // Render scene
-    this.renderer.render(this.scene, this.camera);
-  }
-}
-
-// Initialize the demo
-const demo = new OwenDemo();
-demo.init().catch(console.error);
-
-export {
-  OwenSystemFactory,
-  OwenAnimationContext,
-  StateFactory,
-  AnimationClipFactory,
-  States,
-  Emotions,
-  ClipTypes,
-};