+
+
-The Team
-========
+# The Team
-gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny) and [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
+gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny), before that [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
diff --git a/TESTING.md b/TESTING.md
new file mode 100644
index 000000000..c12398b0c
--- /dev/null
+++ b/TESTING.md
@@ -0,0 +1,208 @@
+# Testing Guide
+
+This project uses **Vitest** as the modern testing framework, replacing the previous Karma + Jasmine setup. Vitest provides faster test execution, better TypeScript support, and enhanced developer experience.
+
+## Quick Start
+
+```bash
+# Install dependencies
+yarn install
+
+# Run all tests once
+yarn test
+
+# Run tests in watch mode (development)
+yarn test:watch
+
+# Run tests with coverage
+yarn test:coverage
+
+# Open coverage report in browser
+yarn test:coverage:html
+
+# Run tests with UI interface
+yarn test:ui
+```
+
+## Testing Framework
+
+### Vitest Features
+- β‘ **Fast**: Native ESM support and Vite's dev server
+- π§ **Zero Config**: Works out of the box with TypeScript
+- π― **Jest Compatible**: Same API as Jest for easy migration
+- π **Built-in Coverage**: V8 coverage with multiple reporters
+- π¨ **UI Interface**: Optional web UI for test debugging
+- π **Watch Mode**: Smart re-running of affected tests
+
+### Key Changes from Karma/Jasmine
+- `function() {}` β `() => {}` (arrow functions)
+- `jasmine.objectContaining()` β `expect.objectContaining()`
+- `toThrowError()` β `toThrow()`
+- Global `describe`, `it`, `expect` without imports
+
+## Test Scripts
+
+| Command | Description |
+|---------|-------------|
+| `yarn test` | Run tests once with linting |
+| `yarn test:watch` | Run tests in watch mode |
+| `yarn test:ui` | Open Vitest UI in browser |
+| `yarn test:coverage` | Run tests with coverage report |
+| `yarn test:coverage:ui` | Coverage with UI interface |
+| `yarn test:coverage:detailed` | Detailed coverage with thresholds |
+| `yarn test:coverage:html` | Generate and open HTML coverage |
+| `yarn test:coverage:lcov` | Generate LCOV format for CI |
+| `yarn test:ci` | CI-optimized run with JUnit output |
+
+## Coverage Reports
+
+### Coverage Thresholds
+- **Global**: 85% minimum for branches, functions, lines, statements
+- **Core Files**: 90% minimum for `gridstack.ts` and `gridstack-engine.ts`
+- **Utils**: 85% minimum for `utils.ts`
+
+### Coverage Formats
+- **HTML**: Interactive browser report at `coverage/index.html`
+- **LCOV**: For integration with CI tools and code coverage services
+- **JSON**: Machine-readable format for automated processing
+- **Text**: Terminal summary output
+- **JUnit**: XML format for CI/CD pipelines
+
+### Viewing Coverage
+```bash
+# Generate and view HTML coverage report
+yarn test:coverage:html
+
+# View coverage in terminal
+yarn test:coverage
+
+# Generate LCOV for external tools
+yarn test:coverage:lcov
+```
+
+## Configuration Files
+
+- **`vitest.config.ts`**: Main Vitest configuration
+- **`vitest.setup.ts`**: Test environment setup and global mocks
+- **`.vitestrc.coverage.ts`**: Enhanced coverage configuration
+- **`tsconfig.json`**: TypeScript configuration with Vitest types
+
+## Writing Tests
+
+### Basic Test Structure
+```typescript
+import { Utils } from '../src/utils';
+
+describe('Utils', () => {
+ it('should parse boolean values correctly', () => {
+ expect(Utils.toBool(true)).toBe(true);
+ expect(Utils.toBool(false)).toBe(false);
+ expect(Utils.toBool(1)).toBe(true);
+ expect(Utils.toBool(0)).toBe(false);
+ });
+});
+```
+
+### DOM Testing
+```typescript
+describe('GridStack DOM', () => {
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ it('should create grid element', () => {
+ const grid = document.querySelector('.grid-stack');
+ expect(grid).toBeInTheDocument();
+ });
+});
+```
+
+### Mocking
+```typescript
+// Mock a module
+vi.mock('../src/utils', () => ({
+ Utils: {
+ toBool: vi.fn()
+ }
+}));
+
+// Mock DOM APIs
+Object.defineProperty(window, 'ResizeObserver', {
+ value: vi.fn().mockImplementation(() => ({
+ observe: vi.fn(),
+ unobserve: vi.fn(),
+ disconnect: vi.fn()
+ }))
+});
+```
+
+## File Organization
+
+```
+spec/
+βββ utils-spec.ts # Utils module tests
+βββ gridstack-spec.ts # Main GridStack tests
+βββ gridstack-engine-spec.ts # Engine logic tests
+βββ regression-spec.ts # Regression tests
+βββ e2e/ # End-to-end tests (not in coverage)
+```
+
+## CI/CD Integration
+
+### GitHub Actions Example
+```yaml
+- name: Run Tests
+ run: yarn test:ci
+
+- name: Upload Coverage
+ uses: codecov/codecov-action@v3
+ with:
+ file: ./coverage/lcov.info
+```
+
+### Test Results
+- **JUnit XML**: `coverage/junit-report.xml`
+- **Coverage LCOV**: `coverage/lcov.info`
+- **Coverage JSON**: `coverage/coverage-final.json`
+
+## Debugging Tests
+
+### VS Code Integration
+1. Install "Vitest" extension
+2. Run tests directly from editor
+3. Set breakpoints and debug
+
+### Browser UI
+```bash
+yarn test:ui
+```
+Opens a web interface for:
+- Running individual tests
+- Viewing test results
+- Coverage visualization
+- Real-time updates
+
+## Performance
+
+### Speed Comparison
+- **Karma + Jasmine**: ~15-20 seconds
+- **Vitest**: ~3-5 seconds
+- **Watch Mode**: Sub-second re-runs
+
+### Optimization Tips
+- Use `vi.mock()` for heavy dependencies
+- Prefer `toBe()` over `toEqual()` for primitives
+- Group related tests in `describe` blocks
+- Use `beforeEach`/`afterEach` for setup/cleanup
+
+## Migration Notes
+
+This project was migrated from Karma + Jasmine to Vitest with the following changes:
+
+1. **Dependencies**: Removed karma-\* packages, added vitest + utilities
+2. **Configuration**: Replaced `karma.conf.js` with `vitest.config.ts`
+3. **Syntax**: Updated test syntax to modern ES6+ style
+4. **Coverage**: Enhanced coverage with V8 provider and multiple formats
+5. **Scripts**: New npm scripts for various testing workflows
+
+All existing tests were preserved and converted to work with Vitest.
diff --git a/angular/.editorconfig b/angular/.editorconfig
new file mode 100644
index 000000000..59d9a3a3e
--- /dev/null
+++ b/angular/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/angular/.gitignore b/angular/.gitignore
new file mode 100644
index 000000000..4d87fb81a
--- /dev/null
+++ b/angular/.gitignore
@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+/doc/html/
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/angular/README.md b/angular/README.md
new file mode 100644
index 000000000..79abfc0ff
--- /dev/null
+++ b/angular/README.md
@@ -0,0 +1,211 @@
+# Angular wrapper
+
+The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts)