From d5c30f7d99d308f839dfc31add23a3d95e6378f7 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Fri, 16 Jan 2026 18:18:18 -0300
Subject: [PATCH 01/22] code

---
 .serena/.gitignore                            |   1 +
 .serena/memories/architecture_and_patterns.md | 223 +++++++++++
 .../memories/code_style_and_conventions.md    |  83 ++++
 .serena/memories/darwin_system_commands.md    | 202 ++++++++++
 .serena/memories/project_overview.md          |  54 +++
 .serena/memories/suggested_commands.md        | 136 +++++++
 .serena/memories/task_completion_checklist.md |  92 +++++
 .serena/project.yml                           |  87 ++++
 .vscode/settings.json                         |   5 +-
 benchmarks/honojsx/package.json               |   9 +-
 benchmarks/jsxte/package.json                 |   9 +-
 benchmarks/kitajs/package.json                |   7 +-
 benchmarks/preact/package.json                |  11 +-
 benchmarks/react/package.json                 |  13 +-
 benchmarks/reactjsx/package.json              |  13 +-
 benchmarks/runner/package.json                |   4 +-
 benchmarks/templates/package.json             |   9 +-
 benchmarks/typed-html/package.json            |   7 +-
 benchmarks/vhtml/package.json                 |   7 +-
 package.json                                  |  16 +-
 packages/fastify-html-plugin/package.json     |  14 +-
 packages/html/package.json                    |  21 +-
 packages/ts-html-plugin/package.json          |  15 +-
 pnpm-lock.yaml                                | 370 +++++++++++-------
 pnpm-workspace.yaml                           |  25 ++
 25 files changed, 1211 insertions(+), 222 deletions(-)
 create mode 100644 .serena/.gitignore
 create mode 100644 .serena/memories/architecture_and_patterns.md
 create mode 100644 .serena/memories/code_style_and_conventions.md
 create mode 100644 .serena/memories/darwin_system_commands.md
 create mode 100644 .serena/memories/project_overview.md
 create mode 100644 .serena/memories/suggested_commands.md
 create mode 100644 .serena/memories/task_completion_checklist.md
 create mode 100644 .serena/project.yml

diff --git a/.serena/.gitignore b/.serena/.gitignore
new file mode 100644
index 000000000..14d86ad62
--- /dev/null
+++ b/.serena/.gitignore
@@ -0,0 +1 @@
+/cache
diff --git a/.serena/memories/architecture_and_patterns.md b/.serena/memories/architecture_and_patterns.md
new file mode 100644
index 000000000..18e097ae2
--- /dev/null
+++ b/.serena/memories/architecture_and_patterns.md
@@ -0,0 +1,223 @@
+# Architecture and Design Patterns
+
+## Core Architecture
+
+### JSX Runtime Model
+
+The library transforms JSX into function calls that generate HTML strings:
+
+```tsx
+<div class="foo">{content}</div>;
+// Transpiles to:
+jsx('div', { class: 'foo', children: content });
+// Returns: '<div class="foo">content</div>'
+```
+
+Key architectural points:
+
+- JSX elements are **always strings or Promises** (never React-like objects)
+- No virtual DOM - direct string generation
+- Async components propagate up the tree (if child is async, parent becomes async)
+
+### Monorepo Structure
+
+- **Workspace-based**: Uses pnpm workspaces with shared catalog for dependencies
+- **Independent versioning**: Each package has its own version via changesets
+- **Shared configuration**: Root-level TypeScript and Prettier configs
+
+## Key Design Patterns
+
+### 1. String Building Pattern
+
+Core pattern: Efficient string concatenation without intermediate objects
+
+```javascript
+// From index.js
+function createElement(tag, attrs, ...children) {
+  return `<${tag}${attributesToString(attrs)}>${contentsToString(children)}</${tag}>`;
+}
+```
+
+### 2. Async/Await Pattern
+
+Async components are seamlessly integrated:
+
+- Sync components return `string`
+- Async components return `Promise<string>`
+- Type system tracks async propagation via `JSX.Element` type
+
+### 3. Security by Default Pattern
+
+- **Attributes**: Auto-escaped by default
+- **Children**: Must explicitly use `safe` attribute or `Html.escapeHtml()`
+- **TypeScript Plugin**: Catches XSS at compile time
+
+### 4. Suspense Pattern
+
+Streaming HTML with fallback content:
+
+```tsx
+<Suspense rid={rid} fallback={<Loading />} catch={(err) => <Error />}>
+  <AsyncComponent />
+</Suspense>
+```
+
+Uses request IDs (rid) for concurrent request safety.
+
+### 5. Error Boundary Pattern
+
+Catch errors in async component trees:
+
+```tsx
+<ErrorBoundary catch={(err) => <ErrorView />}>
+  <AsyncComponent />
+</ErrorBoundary>
+```
+
+## Module System
+
+### Exports Pattern
+
+Each package uses explicit exports in package.json:
+
+```json
+{
+  "exports": {
+    ".": "./index.js",
+    "./jsx-runtime": "./jsx-runtime.js",
+    "./suspense": "./suspense.js"
+    // etc.
+  }
+}
+```
+
+### CommonJS with ESM Compatibility
+
+- Main output: CommonJS
+- `esModuleInterop` enabled for compatibility
+- No ESM build currently (could be added)
+
+## Type System Patterns
+
+### 1. Namespace-based Types
+
+Uses `JSX` namespace for type definitions:
+
+```typescript
+declare namespace JSX {
+  interface IntrinsicElements {
+    div: HtmlTag & {
+      /* div-specific */
+    };
+  }
+}
+```
+
+### 2. Type Extensions
+
+Users can extend types globally:
+
+```typescript
+declare global {
+  namespace JSX {
+    interface HtmlTag {
+      'hx-get'?: string; // HTMX support
+    }
+  }
+}
+```
+
+### 3. Conditional Types
+
+`JSX.Element` is conditionally `string | Promise<string>` based on usage.
+
+## Testing Patterns
+
+### 1. Node Native Test Runner
+
+Uses Node.js built-in test runner (not Jest/Mocha):
+
+```javascript
+import { test } from 'node:test';
+import assert from 'node:assert';
+```
+
+### 2. JSDOM for DOM Testing
+
+When DOM testing is needed:
+
+```javascript
+import { JSDOM } from 'jsdom';
+const dom = new JSDOM(htmlString);
+```
+
+### 3. TSD for Type Testing
+
+For TypeScript type definitions:
+
+```typescript
+// test-d.ts files
+import { expectType } from 'tsd';
+expectType<string>(<div>foo</div>);
+```
+
+## Performance Patterns
+
+### 1. Minimal Allocations
+
+- Avoid creating intermediate objects
+- Direct string concatenation where possible
+- Avoid regex when string methods suffice
+
+### 2. Void Element Optimization
+
+Special handling for self-closing tags:
+
+```javascript
+if (isVoidElement(tag)) {
+  return `<${tag}${attributesToString(attrs)}>`;
+}
+```
+
+### 3. Attribute String Building
+
+Efficient attribute serialization with kebab-case conversion:
+
+```javascript
+function attributesToString(attrs) {
+  // Optimized string building
+}
+```
+
+## Guidelines and Best Practices
+
+### Do's:
+
+- Use `safe` attribute for all user input
+- Prefer composition over prop drilling
+- Keep components pure when possible
+- Use TypeScript strict mode
+- Write tests for new features
+- Consider performance for core HTML generation
+
+### Don'ts:
+
+- Don't use React-specific patterns (hooks, context, etc.)
+- Don't create circular dependencies between packages
+- Don't bypass XSS safety features
+- Don't use `any` type without strong justification
+- Don't mix CommonJS and ESM syntax
+
+### Async Component Guidelines:
+
+- Use request IDs (rid) for Suspense components
+- Error boundaries for async error handling
+- Avoid AsyncLocalStorage (performance penalty)
+- Document when a component is async
+
+### Security Guidelines:
+
+- **ALWAYS** escape user input
+- Use `@kitajs/ts-html-plugin` to catch XSS issues
+- Review all changes to escaping logic carefully
+- Test with malicious input samples
diff --git a/.serena/memories/code_style_and_conventions.md b/.serena/memories/code_style_and_conventions.md
new file mode 100644
index 000000000..3650527e9
--- /dev/null
+++ b/.serena/memories/code_style_and_conventions.md
@@ -0,0 +1,83 @@
+# Code Style and Conventions
+
+## TypeScript Configuration
+
+The project uses **strict TypeScript settings** with the following key configurations:
+
+### JSX Settings
+
+- `jsx`: "react-jsx"
+- `jsxImportSource`: "@kitajs/html"
+- `plugins`: [{ "name": "@kitajs/ts-html-plugin" }]
+
+### Module Settings
+
+- `module`: "CommonJS"
+- `moduleResolution`: "node"
+- `target`: "ESNext"
+- `esModuleInterop`: true
+
+### Strict Mode Settings (all enabled)
+
+- `strict`: true
+- `noImplicitAny`: true
+- `strictNullChecks`: true
+- `strictFunctionTypes`: true
+- `strictBindCallApply`: true
+- `strictPropertyInitialization`: true
+- `noImplicitThis`: true
+- `useUnknownInCatchVariables`: true
+- `alwaysStrict`: true
+- `noUnusedLocals`: true
+- `noUnusedParameters`: true
+- `noImplicitReturns`: true
+- `noFallthroughCasesInSwitch`: true
+- `noUncheckedIndexedAccess`: true
+- `noImplicitOverride`: true
+
+### Build Settings
+
+- Source maps and declaration maps enabled
+- Output directory: `dist`
+- Incremental compilation enabled
+
+## Formatting
+
+- **Tool**: Prettier
+- **Configuration**: Uses @arthurfiorette/prettier-config
+- **Plugins**:
+  - prettier-plugin-jsdoc
+  - prettier-plugin-organize-imports
+  - prettier-plugin-packagejson
+- **Pre-commit hook**: Automatically formats staged files before commit
+
+## Naming Conventions
+
+Based on the codebase:
+
+- Functions: camelCase (e.g., `createElement`, `attributesToString`)
+- Constants: UPPER_SNAKE_CASE (e.g., `CAMEL_REGEX`, `ESCAPED_REGEX`)
+- Variables: camelCase (e.g., `escapeHtml`)
+- Files: kebab-case for test files (e.g., `simple-html.test.tsx`)
+- Packages: scoped with @kitajs/ prefix
+
+## JSX Usage
+
+- No need to import React or Html namespace when using react-jsx transform
+- Components can be sync (return string) or async (return Promise<string>)
+- Always use `safe` attribute or `Html.escapeHtml()` for user input to prevent XSS
+- Attributes are automatically escaped by default
+- Children content is NOT escaped by default (requires `safe` attribute)
+
+## File Organization
+
+- Source files in package root or src/
+- Tests in `test/` directory with `.test.tsx` or `.test.ts` extension
+- Type definitions alongside implementation files (.d.ts files)
+- Build output in `dist/` directory
+
+## Documentation
+
+- Use JSDoc comments for public APIs
+- TypeScript types serve as primary documentation
+- README.md in each package with comprehensive examples
diff --git a/.serena/memories/darwin_system_commands.md b/.serena/memories/darwin_system_commands.md
new file mode 100644
index 000000000..a2ee726ef
--- /dev/null
+++ b/.serena/memories/darwin_system_commands.md
@@ -0,0 +1,202 @@
+# macOS (Darwin) System Commands
+
+The project is running on macOS (Darwin 25.2.0). Here are important system-specific
+considerations:
+
+## Standard Unix Commands Available
+
+Most standard Unix commands work on macOS:
+
+- `ls`, `cd`, `pwd`, `mkdir`, `rm`, `cp`, `mv`
+- `cat`, `less`, `head`, `tail`
+- `grep`, `find`, `sed`, `awk`
+- `chmod`, `chown`
+- `ps`, `kill`, `top`
+
+## macOS-Specific Considerations
+
+### Package Management
+
+This project uses **pnpm** for Node.js packages, enforced by preinstall hook.
+
+### File System
+
+- **Case-insensitive** by default (but case-preserving)
+- Be careful with file naming to avoid cross-platform issues
+- Use forward slashes (/) in paths, not backslashes
+
+### Command Differences from Linux
+
+Some commands have different options or behavior:
+
+- `sed -i` requires an extension argument: `sed -i '' 's/foo/bar/g'`
+- `readlink` doesn't have `-f` flag (use `greadlink` from coreutils if needed)
+- `stat` has different syntax than GNU stat
+- `xargs` may have different default behavior
+
+### Git
+
+Standard git commands work as expected:
+
+```bash
+git status
+git add .
+git commit -m "message"
+git push
+git pull
+git branch
+git checkout
+git diff
+```
+
+### Node.js & pnpm
+
+```bash
+# Node version
+node --version  # Should be >= 20.13
+
+# pnpm commands
+pnpm install
+pnpm test
+pnpm build
+pnpm format
+```
+
+### Common Development Tasks
+
+#### File Search
+
+```bash
+# Find files by name
+find . -name "*.tsx"
+
+# Find files excluding node_modules
+find . -name "*.tsx" -not -path "*/node_modules/*"
+
+# Using grep for content search
+grep -r "searchTerm" packages/
+```
+
+#### Process Management
+
+```bash
+# List processes
+ps aux | grep node
+
+# Kill process by PID
+kill <pid>
+
+# Kill process by name
+pkill -f "process-name"
+```
+
+#### File Operations
+
+```bash
+# View file contents
+cat file.txt
+less file.txt
+
+# View end of log file
+tail -f logfile.txt
+
+# Count lines
+wc -l file.txt
+
+# Find and replace (macOS-specific)
+sed -i '' 's/old/new/g' file.txt
+```
+
+#### Permissions
+
+```bash
+# Make script executable
+chmod +x script.sh
+
+# Fix permission issues
+chmod 644 file.txt  # rw-r--r--
+chmod 755 file.sh   # rwxr-xr-x
+```
+
+### Environment
+
+#### Shell
+
+Default shell on macOS is zsh (as of Catalina+):
+
+- Shell scripts should use `#!/usr/bin/env bash` or `#!/bin/sh`
+- Environment variables work standard way: `export VAR=value`
+
+#### Paths
+
+- Home directory: `~` or `$HOME`
+- Current directory: `.`
+- Parent directory: `..`
+- Absolute paths start with `/`
+
+### Performance Monitoring
+
+```bash
+# CPU and memory usage
+top
+
+# Better alternative (if installed)
+htop
+
+# Disk usage
+du -sh *
+
+# Disk free space
+df -h
+```
+
+### Networking (if needed)
+
+```bash
+# Check port usage
+lsof -i :3000
+
+# Check network connections
+netstat -an | grep LISTEN
+```
+
+## Project-Specific Commands
+
+### Most Used Git Operations
+
+```bash
+# Check status
+git status
+
+# View changes
+git diff
+
+# Add all changes
+git add .
+
+# Commit (pre-commit hook will run Prettier automatically)
+git commit -m "feat: add new feature"
+
+# Push
+git push
+
+# Pull with rebase
+git pull --rebase
+```
+
+### Testing Individual Files
+
+```bash
+# Run specific test file (after building)
+node --test dist/test/specific-test.test.js
+```
+
+### Debugging
+
+```bash
+# Run with inspector
+node --inspect dist/test/test-file.js
+
+# Run with more verbose output
+NODE_OPTIONS="--trace-warnings" pnpm test
+```
diff --git a/.serena/memories/project_overview.md b/.serena/memories/project_overview.md
new file mode 100644
index 000000000..e6809f9cb
--- /dev/null
+++ b/.serena/memories/project_overview.md
@@ -0,0 +1,54 @@
+# KitaJS HTML - Project Overview
+
+## Purpose
+
+KitaJS HTML is a monorepo containing a super fast JSX runtime library that generates HTML
+strings. It's designed to work with any Node.js framework (Express, Fastify, Hono,
+AdonisJS, Bun, etc.) and integrates well with HTMX, Alpine.js, and Hotwire Turbo.
+
+Key features:
+
+- JSX-based HTML generation that outputs strings
+- Type-safe HTML templates using TypeScript
+- Built-in XSS protection with TypeScript plugin
+- Support for async components with Suspense
+- Error boundaries for async error handling
+- Performance-focused (benchmarks show 7-41x faster than alternatives)
+
+## Repository Structure
+
+This is a pnpm monorepo with the following structure:
+
+### Main Packages (packages/)
+
+- **@kitajs/html** - Core JSX runtime for HTML generation
+- **@kitajs/ts-html-plugin** - TypeScript LSP plugin for XSS detection and validation
+- **@kitajs/fastify-html-plugin** - Fastify integration plugin
+
+### Additional Directories
+
+- **benchmarks/** - Performance benchmarks comparing with React, Typed Html, etc.
+- **examples/** - Example code demonstrating usage
+- **.husky/** - Git hooks configuration
+- **.github/** - GitHub workflows and CI/CD
+- **.changeset/** - Changesets for version management
+
+## Tech Stack
+
+- **Language**: TypeScript 5.9.2+
+- **Runtime**: Node.js >= 20.13
+- **Package Manager**: pnpm >= 9 (required via preinstall hook)
+- **JSX Transform**: react-jsx with jsxImportSource: @kitajs/html
+- **Module System**: CommonJS
+- **Testing**: Node.js native test runner with c8 for coverage
+- **Formatting**: Prettier with @arthurfiorette/prettier-config
+- **Git Hooks**: Husky
+- **Versioning**: Changesets with GitHub changelog integration
+
+## Key Dependencies
+
+- csstype (for CSS types)
+- fastify-plugin (for Fastify integration)
+- TypeScript, tslib, @swc-node/register (build tools)
+- JSDOM (for testing)
+- c8 (code coverage)
diff --git a/.serena/memories/suggested_commands.md b/.serena/memories/suggested_commands.md
new file mode 100644
index 000000000..4e5cd2784
--- /dev/null
+++ b/.serena/memories/suggested_commands.md
@@ -0,0 +1,136 @@
+# Suggested Development Commands
+
+## Package Manager
+
+**Always use pnpm** - The project enforces this via preinstall hook.
+
+## Main Development Commands
+
+### Building
+
+```bash
+# Build all packages
+pnpm build
+
+# Build with watch mode (rebuilds on changes)
+pnpm watch
+
+# Build specific package (from root)
+pnpm --filter "@kitajs/html" build
+```
+
+### Testing
+
+```bash
+# Run all tests in all packages
+pnpm test
+
+# Run tests in a specific package (from package directory)
+cd packages/html
+pnpm test
+
+# For packages/html specifically:
+# - Compiles TypeScript
+# - Runs tests with c8 coverage
+# - Uses Node.js native test runner
+# - Test files: dist/test/**/*.test.js (compiled from test/*.test.tsx)
+
+# Run only tests marked with .only
+pnpm test:only
+
+# Watch mode (for fastify-html-plugin)
+pnpm --filter "@kitajs/fastify-html-plugin" test:watch
+```
+
+### Formatting
+
+```bash
+# Format all files
+pnpm format
+
+# Format specific files (Prettier)
+prettier --write <file-path>
+```
+
+### Benchmarking
+
+```bash
+# Run performance benchmarks
+pnpm bench
+
+# This builds benchmark packages and runs the benchmark runner
+```
+
+### Versioning & Publishing
+
+```bash
+# Create a changeset (for version bumps)
+pnpm change
+
+# Version packages (CI command)
+pnpm ci-version
+
+# Publish packages (CI command)
+pnpm ci-publish
+```
+
+### Git Hooks
+
+Git hooks are managed by Husky:
+
+- **pre-commit**: Automatically formats staged files with Prettier
+- Setup: `pnpm prepare` (runs `husky` command)
+
+## Per-Package Commands
+
+### @kitajs/html
+
+```bash
+cd packages/html
+pnpm test         # Run tests with coverage
+pnpm test:only    # Run only .only tests
+pnpm bench        # Run benchmarks
+```
+
+### @kitajs/fastify-html-plugin
+
+```bash
+cd packages/fastify-html-plugin
+pnpm test         # Run tests with tsd and c8
+pnpm test:watch   # Watch mode for tests
+```
+
+## Common Workflows
+
+### After making changes:
+
+1. Format code: `pnpm format` (or let pre-commit hook handle it)
+2. Run tests: `pnpm test`
+3. Build: `pnpm build`
+
+### Before committing:
+
+- Pre-commit hook automatically runs Prettier on staged files
+- No manual action needed
+
+### Testing a single package:
+
+```bash
+pnpm --filter "@kitajs/html" test
+```
+
+### Working with workspace:
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run command in all packages
+pnpm -r <command>
+
+# Run command in specific package
+pnpm --filter "<package-name>" <command>
+
+# Run commands in parallel
+pnpm -r --parallel <command>
+```
diff --git a/.serena/memories/task_completion_checklist.md b/.serena/memories/task_completion_checklist.md
new file mode 100644
index 000000000..5794a53ca
--- /dev/null
+++ b/.serena/memories/task_completion_checklist.md
@@ -0,0 +1,92 @@
+# Task Completion Checklist
+
+When completing a coding task in this project, follow these steps:
+
+## 1. Code Quality
+
+- [ ] TypeScript compiles without errors (`tsc`)
+- [ ] Code follows strict TypeScript settings (no `any`, proper null checks)
+- [ ] No unused variables or parameters
+- [ ] All functions have proper return types
+
+## 2. Formatting
+
+- [ ] Code is formatted with Prettier
+  - Run: `pnpm format`
+  - Or let pre-commit hook handle it automatically
+
+## 3. XSS Safety (Critical for this project!)
+
+- [ ] All user input uses `safe` attribute or `Html.escapeHtml()`
+- [ ] No raw string concatenation with user input
+- [ ] TypeScript plugin catches potential XSS vulnerabilities
+- [ ] Consider running `xss-scan` if modifying JSX/HTML generation code
+
+## 4. Testing
+
+- [ ] Run tests: `pnpm test` (from root or package directory)
+- [ ] All tests pass with no failures
+- [ ] Code coverage is maintained or improved (c8 reports)
+- [ ] For new features: Add appropriate tests in `test/` directory
+
+## 5. Build
+
+- [ ] Build succeeds: `pnpm build`
+- [ ] No build warnings or errors
+- [ ] Type definitions (.d.ts) are correctly generated
+
+## 6. Documentation
+
+- [ ] Update README.md if adding new features or changing APIs
+- [ ] Add JSDoc comments for public APIs
+- [ ] Update type definitions if needed
+- [ ] Consider updating examples if relevant
+
+## 7. Performance (if applicable)
+
+- [ ] Consider running benchmarks if changes affect core HTML generation
+  - Run: `pnpm bench`
+- [ ] No performance regressions
+
+## 8. Version Management (if releasing)
+
+- [ ] Create changeset if making user-facing changes
+  - Run: `pnpm change`
+- [ ] Follow semantic versioning
+
+## 9. Git
+
+- [ ] Commit messages are clear and descriptive
+- [ ] Pre-commit hook has run (Prettier formatting)
+- [ ] No unnecessary files committed
+- [ ] Changes are focused and atomic
+
+## Quick Check Before Committing
+
+From the root directory:
+
+```bash
+pnpm format    # Format code
+pnpm build     # Build all packages
+pnpm test      # Run all tests
+```
+
+If all three succeed, the code is ready to commit!
+
+## Special Considerations
+
+### For Core HTML Package (@kitajs/html)
+
+- XSS safety is CRITICAL - always verify proper escaping
+- Performance matters - avoid unnecessary allocations
+- Type safety - ensure JSX types are correct
+
+### For TypeScript Plugin (@kitajs/ts-html-plugin)
+
+- Test with real TypeScript projects
+- Ensure error messages are clear and helpful
+
+### For Fastify Plugin (@kitajs/fastify-html-plugin)
+
+- Test integration with Fastify
+- Ensure type definitions work correctly (tsd tests)
diff --git a/.serena/project.yml b/.serena/project.yml
new file mode 100644
index 000000000..5f1bc809e
--- /dev/null
+++ b/.serena/project.yml
@@ -0,0 +1,87 @@
+# list of languages for which language servers are started; choose from:
+#   al               bash             clojure          cpp              csharp           csharp_omnisharp
+#   dart             elixir           elm              erlang           fortran          fsharp
+#   go               groovy           haskell          java             julia            kotlin
+#   lua              markdown         nix              pascal           perl             php
+#   powershell       python           python_jedi      r                rego             ruby
+#   ruby_solargraph  rust             scala            swift            terraform        toml
+#   typescript       typescript_vts   yaml             zig
+# Note:
+#   - For C, use cpp
+#   - For JavaScript, use typescript
+#   - For Free Pascal / Lazarus, use pascal
+# Special requirements:
+#   - csharp: Requires the presence of a .sln file in the project folder.
+#   - pascal: Requires Free Pascal Compiler (fpc) and optionally Lazarus.
+# When using multiple languages, the first language server that supports a given file will be used for that file.
+# The first language is the default language and the respective language server will be used as a fallback.
+# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
+languages:
+  - typescript
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
+encoding: 'utf-8'
+
+# whether to use the project's gitignore file to ignore files
+# Added on 2025-04-07
+ignore_all_files_in_gitignore: true
+
+# list of additional paths to ignore
+# same syntax as gitignore, so you can use * and **
+# Was previously called `ignored_dirs`, please update your config if you are using that.
+# Added (renamed) on 2025-04-07
+ignored_paths: []
+
+# whether the project is in read-only mode
+# If set to true, all editing tools will be disabled and attempts to use them will result in an error
+# Added on 2025-04-18
+read_only: false
+
+# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
+# Below is the complete list of tools for convenience.
+# To make sure you have the latest list of tools, and to view their descriptions,
+# execute `uv run scripts/print_tool_overview.py`.
+#
+#  * `activate_project`: Activates a project by name.
+#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
+#  * `create_text_file`: Creates/overwrites a file in the project directory.
+#  * `delete_lines`: Deletes a range of lines within a file.
+#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
+#  * `execute_shell_command`: Executes a shell command.
+#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
+#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
+#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
+#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
+#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
+#  * `initial_instructions`: Gets the initial instructions for the current project.
+#     Should only be used in settings where the system prompt cannot be set,
+#     e.g. in clients you have no control over, like Claude Desktop.
+#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
+#  * `insert_at_line`: Inserts content at a given line in a file.
+#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
+#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
+#  * `list_memories`: Lists memories in Serena's project-specific memory store.
+#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
+#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
+#  * `read_file`: Reads a file within the project directory.
+#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
+#  * `remove_project`: Removes a project from the Serena configuration.
+#  * `replace_lines`: Replaces a range of lines within a file with new content.
+#  * `replace_symbol_body`: Replaces the full definition of a symbol.
+#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
+#  * `search_for_pattern`: Performs a search for a pattern in the project.
+#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
+#  * `switch_modes`: Activates modes by providing a list of their names
+#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
+#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
+#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
+#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
+excluded_tools: []
+
+# initial prompt for the project. It will always be given to the LLM upon activating the project
+# (contrary to the memories, which are loaded on demand).
+initial_prompt: ''
+
+project_name: 'html'
+included_optional_tools: []
diff --git a/.vscode/settings.json b/.vscode/settings.json
index edc22acec..f9ff80aab 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cSpell.words": ["KITA"]
+  "typescript.experimental.useTsgo": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsserver.maxTsServerMemory": 4096
 }
diff --git a/benchmarks/honojsx/package.json b/benchmarks/honojsx/package.json
index 7b3cf1194..37a13cabe 100644
--- a/benchmarks/honojsx/package.json
+++ b/benchmarks/honojsx/package.json
@@ -4,14 +4,15 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
+    "@typescript/native-preview": "catalog:",
     "hono": "^4.8.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^22.13.13"
+    "@types/node": "catalog:"
   }
 }
diff --git a/benchmarks/jsxte/package.json b/benchmarks/jsxte/package.json
index d36c9a7a2..6c0c9a397 100644
--- a/benchmarks/jsxte/package.json
+++ b/benchmarks/jsxte/package.json
@@ -4,14 +4,15 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
+    "@typescript/native-preview": "catalog:",
     "jsxte": "^3.3.1",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^22.13.13"
+    "@types/node": "catalog:"
   }
 }
diff --git a/benchmarks/kitajs/package.json b/benchmarks/kitajs/package.json
index a7aa9e8c4..a150965d1 100644
--- a/benchmarks/kitajs/package.json
+++ b/benchmarks/kitajs/package.json
@@ -4,11 +4,12 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
     "@kitajs/html": "workspace:*",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "@typescript/native-preview": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   }
 }
diff --git a/benchmarks/preact/package.json b/benchmarks/preact/package.json
index 8633db121..3c83029ac 100644
--- a/benchmarks/preact/package.json
+++ b/benchmarks/preact/package.json
@@ -4,15 +4,16 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
+    "@typescript/native-preview": "catalog:",
     "preact": "^10.27.3",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^22.13.13",
-    "@types/react": "^18.3.12"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:"
   }
 }
diff --git a/benchmarks/react/package.json b/benchmarks/react/package.json
index 7a2e362fb..f8f4e56ed 100644
--- a/benchmarks/react/package.json
+++ b/benchmarks/react/package.json
@@ -4,15 +4,16 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "@typescript/native-preview": "catalog:",
+    "react": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^22.13.13",
-    "@types/react": "^18.3.12"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:"
   }
 }
diff --git a/benchmarks/reactjsx/package.json b/benchmarks/reactjsx/package.json
index 9b07ea7a6..75b2368ce 100644
--- a/benchmarks/reactjsx/package.json
+++ b/benchmarks/reactjsx/package.json
@@ -4,15 +4,16 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "@typescript/native-preview": "catalog:",
+    "react": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^22.13.13",
-    "@types/react": "^18.3.12"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:"
   }
 }
diff --git a/benchmarks/runner/package.json b/benchmarks/runner/package.json
index 2a9e83fe4..04b3d9ca7 100644
--- a/benchmarks/runner/package.json
+++ b/benchmarks/runner/package.json
@@ -27,7 +27,7 @@
     "mitata": "1.0.34",
     "nano-jsx": "0.1.0",
     "preact-render-to-string": "6.5.13",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "catalog:",
+    "react-dom": "catalog:"
   }
 }
diff --git a/benchmarks/templates/package.json b/benchmarks/templates/package.json
index c401e2eb4..469381237 100644
--- a/benchmarks/templates/package.json
+++ b/benchmarks/templates/package.json
@@ -4,13 +4,14 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "@typescript/native-preview": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^22.13.13"
+    "@types/node": "catalog:"
   }
 }
diff --git a/benchmarks/typed-html/package.json b/benchmarks/typed-html/package.json
index 464ea7742..422beab42 100644
--- a/benchmarks/typed-html/package.json
+++ b/benchmarks/typed-html/package.json
@@ -4,11 +4,12 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
-    "tslib": "^2.8.1",
+    "@typescript/native-preview": "catalog:",
+    "tslib": "catalog:",
     "typed-html": "^3.0.1",
-    "typescript": "^5.9.2"
+    "typescript": "catalog:"
   }
 }
diff --git a/benchmarks/vhtml/package.json b/benchmarks/vhtml/package.json
index 2dfeeb219..07372a6a3 100644
--- a/benchmarks/vhtml/package.json
+++ b/benchmarks/vhtml/package.json
@@ -4,11 +4,12 @@
   "private": true,
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsgo"
   },
   "dependencies": {
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
+    "@typescript/native-preview": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:",
     "vhtml": "^2.2.0"
   }
 }
diff --git a/package.json b/package.json
index 7a64400f7..0b833048e 100644
--- a/package.json
+++ b/package.json
@@ -26,19 +26,19 @@
   },
   "devDependencies": {
     "@arthurfiorette/prettier-config": "^1.0.12",
-    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8",
     "@kitajs/html": "workspace:*",
     "husky": "^9.1.7",
-    "prettier": "^3.6.2",
-    "prettier-plugin-jsdoc": "^1.3.3",
+    "prettier": "^3.8.0",
+    "prettier-plugin-jsdoc": "^1.8.0",
     "prettier-plugin-organize-imports": "^4.2.0",
-    "prettier-plugin-packagejson": "^2.5.19",
-    "typescript": "^5.9.2"
+    "prettier-plugin-packagejson": "^2.5.21",
+    "typescript": "catalog:"
   },
-  "packageManager": "pnpm@10.15.1",
+  "packageManager": "pnpm@10.28.0",
   "engines": {
     "node": ">=20.13",
-    "pnpm": ">=9"
+    "pnpm": ">=10"
   }
 }
diff --git a/packages/fastify-html-plugin/package.json b/packages/fastify-html-plugin/package.json
index c97105388..49586229f 100644
--- a/packages/fastify-html-plugin/package.json
+++ b/packages/fastify-html-plugin/package.json
@@ -24,15 +24,15 @@
   },
   "devDependencies": {
     "@fastify/formbody": "^8.0.2",
-    "@swc-node/register": "^1.11.1",
-    "@swc/helpers": "^0.5.17",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.5.0",
-    "c8": "^10.1.3",
+    "@swc-node/register": "catalog:",
+    "@swc/helpers": "catalog:",
+    "@types/jsdom": "catalog:",
+    "@types/node": "catalog:",
+    "c8": "catalog:",
     "fastify": "^5.6.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "catalog:",
     "tsd": "^0.33.0",
-    "tslib": "^2.8.1"
+    "tslib": "catalog:"
   },
   "peerDependencies": {
     "@kitajs/html": "workspace:^4.2.10",
diff --git a/packages/html/package.json b/packages/html/package.json
index a1b09a65c..012a78d04 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -31,20 +31,21 @@
   "types": "index.d.ts",
   "scripts": {
     "bench": "pnpm --filter \"benchmark-*\" build && pnpm --filter \"benchmark-runner\" start",
-    "test": "tsc; c8 --reporter lcov --reporter text node --no-deprecation --enable-source-maps --test dist/test",
-    "test:only": "tsc; node --no-deprecation --test-only --test dist/test"
+    "test": "tsgo; c8 --reporter lcov --reporter text node --no-deprecation --enable-source-maps --test dist/test",
+    "test:only": "tsgo; node --no-deprecation --test-only --test dist/test"
   },
   "dependencies": {
-    "csstype": "^3.1.3"
+    "csstype": "^3.2.3"
   },
   "devDependencies": {
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.5.0",
-    "c8": "^10.1.3",
-    "jsdom": "^27.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "typescript": "^5.9.2"
+    "@types/jsdom": "catalog:",
+    "@types/node": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "c8": "catalog:",
+    "jsdom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:"
   },
   "engines": {
     "node": ">=12"
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index a407683da..f611a07f2 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -20,22 +20,23 @@
     "xss-scan": "dist/cli.js"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "dev": "tsc -p tsconfig.build.json --watch",
+    "build": "tsgo -p tsconfig.build.json",
+    "dev": "tsgo -p tsconfig.build.json --watch",
     "prepack": "npm run build",
     "test": "pnpm build && pnpm install && pnpm test-exec",
     "test-exec": "node --require @swc-node/register --test test/**/*.test.ts"
   },
   "dependencies": {
     "chalk": "^5.6.2",
-    "tslib": "^2.8.1",
+    "tslib": "catalog:",
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "@swc-node/register": "^1.11.1",
-    "@swc/helpers": "^0.5.17",
-    "@types/node": "^24.5.0",
-    "@types/yargs": "^17.0.33",
+    "@swc-node/register": "catalog:",
+    "@swc/helpers": "catalog:",
+    "@types/node": "catalog:",
+    "@types/yargs": "^17.0.35",
+    "@typescript/native-preview": "catalog:",
     "fast-defer": "^1.1.9",
     "self": "file:"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3561cd43..715a5a276 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,13 +4,52 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+catalogs:
+  default:
+    '@swc-node/register':
+      specifier: ^1.11.1
+      version: 1.11.1
+    '@swc/helpers':
+      specifier: ^0.5.17
+      version: 0.5.17
+    '@types/jsdom':
+      specifier: ^21.1.7
+      version: 21.1.7
+    '@types/node':
+      specifier: ^24.5.0
+      version: 24.5.0
+    '@types/react':
+      specifier: ^18.3.12
+      version: 18.3.24
+    '@typescript/native-preview':
+      specifier: latest
+      version: 7.0.0-dev.20260116.1
+    c8:
+      specifier: ^10.1.3
+      version: 10.1.3
+    jsdom:
+      specifier: ^27.0.0
+      version: 27.0.0
+    react:
+      specifier: ^19.1.1
+      version: 19.1.1
+    react-dom:
+      specifier: ^19.1.1
+      version: 19.1.1
+    tslib:
+      specifier: ^2.8.1
+      version: 2.8.1
+    typescript:
+      specifier: ^5.9.2
+      version: 5.9.3
+
 importers:
 
   .:
     devDependencies:
       '@arthurfiorette/prettier-config':
         specifier: ^1.0.12
-        version: 1.0.12(prettier@3.6.2)(typescript@5.9.2)
+        version: 1.0.12(prettier@3.6.2)(typescript@5.9.3)
       '@changesets/changelog-github':
         specifier: ^0.5.1
         version: 0.5.1
@@ -31,113 +70,131 @@ importers:
         version: 1.3.3(prettier@3.6.2)
       prettier-plugin-organize-imports:
         specifier: ^4.2.0
-        version: 4.2.0(prettier@3.6.2)(typescript@5.9.2)
+        version: 4.2.0(prettier@3.6.2)(typescript@5.9.3)
       prettier-plugin-packagejson:
         specifier: ^2.5.19
         version: 2.5.19(prettier@3.6.2)
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
 
   benchmarks/honojsx:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       hono:
         specifier: ^4.8.2
         version: 4.8.2
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
     devDependencies:
       '@types/node':
-        specifier: ^22.13.13
-        version: 22.18.4
+        specifier: 'catalog:'
+        version: 24.5.0
 
   benchmarks/jsxte:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       jsxte:
         specifier: ^3.3.1
         version: 3.3.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
     devDependencies:
       '@types/node':
-        specifier: ^22.13.13
-        version: 22.18.4
+        specifier: 'catalog:'
+        version: 24.5.0
 
   benchmarks/kitajs:
     dependencies:
       '@kitajs/html':
         specifier: workspace:*
         version: link:../../packages/html
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
 
   benchmarks/preact:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       preact:
         specifier: ^10.27.3
         version: 10.27.3
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
     devDependencies:
       '@types/node':
-        specifier: ^22.13.13
-        version: 22.18.4
+        specifier: 'catalog:'
+        version: 24.5.0
       '@types/react':
-        specifier: ^18.3.12
+        specifier: 'catalog:'
         version: 18.3.24
 
   benchmarks/react:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: 'catalog:'
+        version: 19.1.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
     devDependencies:
       '@types/node':
-        specifier: ^22.13.13
-        version: 22.18.4
+        specifier: 'catalog:'
+        version: 24.5.0
       '@types/react':
-        specifier: ^18.3.12
+        specifier: 'catalog:'
         version: 18.3.24
 
   benchmarks/reactjsx:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: 'catalog:'
+        version: 19.1.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
     devDependencies:
       '@types/node':
-        specifier: ^22.13.13
-        version: 22.18.4
+        specifier: 'catalog:'
+        version: 24.5.0
       '@types/react':
-        specifier: ^18.3.12
+        specifier: 'catalog:'
         version: 18.3.24
 
   benchmarks/runner:
@@ -194,45 +251,54 @@ importers:
         specifier: 6.5.13
         version: 6.5.13(preact@10.27.3)
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 'catalog:'
+        version: 19.1.1
       react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: 'catalog:'
+        version: 19.1.1(react@19.1.1)
 
   benchmarks/templates:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
     devDependencies:
       '@types/node':
-        specifier: ^22.13.13
-        version: 22.18.4
+        specifier: 'catalog:'
+        version: 24.5.0
 
   benchmarks/typed-html:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typed-html:
         specifier: ^3.0.1
         version: 3.0.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
 
   benchmarks/vhtml:
     dependencies:
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
       vhtml:
         specifier: ^2.2.0
         version: 2.2.0
@@ -253,31 +319,31 @@ importers:
         specifier: ^8.0.2
         version: 8.0.2
       '@swc-node/register':
-        specifier: ^1.11.1
+        specifier: 'catalog:'
         version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.3)
       '@swc/helpers':
-        specifier: ^0.5.17
+        specifier: 'catalog:'
         version: 0.5.17
       '@types/jsdom':
-        specifier: ^21.1.7
+        specifier: 'catalog:'
         version: 21.1.7
       '@types/node':
-        specifier: ^24.5.0
+        specifier: 'catalog:'
         version: 24.5.0
       c8:
-        specifier: ^10.1.3
+        specifier: 'catalog:'
         version: 10.1.3
       fastify:
         specifier: ^5.6.0
         version: 5.6.0
       jsdom:
-        specifier: ^27.0.0
+        specifier: 'catalog:'
         version: 27.0.0(postcss@8.5.6)
       tsd:
         specifier: ^0.33.0
         version: 0.33.0
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
 
   packages/html:
@@ -287,26 +353,29 @@ importers:
         version: 3.1.3
     devDependencies:
       '@types/jsdom':
-        specifier: ^21.1.7
+        specifier: 'catalog:'
         version: 21.1.7
       '@types/node':
-        specifier: ^24.5.0
+        specifier: 'catalog:'
         version: 24.5.0
+      '@typescript/native-preview':
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260116.1
       c8:
-        specifier: ^10.1.3
+        specifier: 'catalog:'
         version: 10.1.3
       jsdom:
-        specifier: ^27.0.0
+        specifier: 'catalog:'
         version: 27.0.0(postcss@8.5.6)
       react:
-        specifier: ^19.1.1
+        specifier: 'catalog:'
         version: 19.1.1
       react-dom:
-        specifier: ^19.1.1
+        specifier: 'catalog:'
         version: 19.1.1(react@19.1.1)
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: 'catalog:'
+        version: 5.9.3
 
   packages/ts-html-plugin:
     dependencies:
@@ -321,14 +390,14 @@ importers:
         version: 2.8.1
       typescript:
         specifier: ^5.6.2
-        version: 5.9.2
+        version: 5.9.3
       yargs:
         specifier: ^18.0.0
         version: 18.0.0
     devDependencies:
       '@swc-node/register':
         specifier: ^1.11.1
-        version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.2)
+        version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.3)
       '@swc/helpers':
         specifier: ^0.5.17
         version: 0.5.17
@@ -338,12 +407,15 @@ importers:
       '@types/yargs':
         specifier: ^17.0.33
         version: 17.0.33
+      '@typescript/native-preview':
+        specifier: latest
+        version: 7.0.0-dev.20260116.1
       fast-defer:
         specifier: ^1.1.9
         version: 1.1.9
       self:
         specifier: 'file:'
-        version: '@kitajs/ts-html-plugin@file:packages/ts-html-plugin(@kitajs/html@packages+html)(typescript@5.9.2)'
+        version: '@kitajs/ts-html-plugin@file:packages/ts-html-plugin(@kitajs/html@packages+html)(typescript@5.9.3)'
 
 packages:
 
@@ -799,9 +871,6 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@22.18.4':
-    resolution: {integrity: sha512-UJdblFqXymSBhmZf96BnbisoFIr8ooiiBRMolQgg77Ea+VM37jXw76C2LQr9n8wm9+i/OvlUlW6xSvqwzwqznw==}
-
   '@types/node@24.5.0':
     resolution: {integrity: sha512-y1dMvuvJspJiPSDZUQ+WMBvF7dpnEqN4x9DDC9ie5Fs/HUZJA3wFp7EhHoVaKX/iI0cRoECV8X2jL8zi0xrHCg==}
 
@@ -826,6 +895,45 @@ packages:
   '@types/yargs@17.0.33':
     resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
 
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-+HoFBoTy6GrdqpN2sBCmvNNVqKXndVqgKPojaTpc1OfiH2YAa1p2zXsHuw2+PtXcsGDBvIX4Fce4i8urHlF6mQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-cKSm37T0rrCskKKjwr/i97+k9fIQydsOfYO8oUzOFWEHKYl83vQib0JdSyelbLGEfT5Xpt6Wm12ul6MS42e+xw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-mF+y2V95kYJx6ELk3BaXd0lDRGq3ce8fCDxx3MRgCEuexm/SYXC9OnQfkdyEPqU366sYwYw98TFIYjf6ruhZ7Q==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-fCgBsrrbURMutyBdnYXa13OVDOGtlu1AWMCqq21jQFDv2hglUR2l7BOZmqobLgWY76DGHQS7zK+hXcEcOqR7hA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-7lxKOVF0ph2+92ySc8HSUxKnBHkfoj7bm43QE482fb0z1YhNuUc/3R79NJGKywgmDP5IXEb1PY8piQbwoPYHwg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-VzS2LDsXqmC+6v+DEdjHxhadKzN5l/yMMQp3pVvq/ZM52NkUWzUtBpAU3nxB8n02L9Xr6625jEMduyZba0TVVg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-OUmQLOIoknUmwaNz2iA0tkClIbbuzjHLrnFZNF4rlw1LlelNExGQlrMmx0szMRjTz9CFOh9qhYT23/3jOoOsqA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@typescript/native-preview@7.0.0-dev.20260116.1':
+    resolution: {integrity: sha512-9N2Sa3Ap8E5+V4K+eTs5y8//dW77qFKzo+OfmYpL4f/Vb6WEoo6SDhjaSB2eNtgeiCKkNQySLO3pz3/QEpuVXg==}
+    hasBin: true
+
   abstract-logging@2.0.1:
     resolution: {integrity: sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==}
 
@@ -1424,10 +1532,6 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
   lower-case@1.1.4:
     resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
 
@@ -1789,11 +1893,6 @@ packages:
     resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
     engines: {node: '>=8'}
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: ^18.3.1
-
   react-dom@19.1.1:
     resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
     peerDependencies:
@@ -1802,10 +1901,6 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
-    engines: {node: '>=0.10.0'}
-
   react@19.1.1:
     resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
     engines: {node: '>=0.10.0'}
@@ -1882,9 +1977,6 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
-
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
@@ -2083,11 +2175,6 @@ packages:
     resolution: {integrity: sha512-JKCM9zTfPDuPqQqdGZBWSEiItShliKkBFg5c6yOR8zth43v763XkAzTWaOlVqc0Y6p9ee8AaAbipGfUnCsYZUA==}
     engines: {node: '>=12'}
 
-  typescript@5.9.2:
-    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -2098,9 +2185,6 @@ packages:
     engines: {node: '>=0.8.0'}
     hasBin: true
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
-
   undici-types@7.12.0:
     resolution: {integrity: sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==}
 
@@ -2220,11 +2304,11 @@ packages:
 
 snapshots:
 
-  '@arthurfiorette/prettier-config@1.0.12(prettier@3.6.2)(typescript@5.9.2)':
+  '@arthurfiorette/prettier-config@1.0.12(prettier@3.6.2)(typescript@5.9.3)':
     dependencies:
       prettier: 3.6.2
       prettier-plugin-jsdoc: 1.3.3(prettier@3.6.2)
-      prettier-plugin-organize-imports: 3.2.4(prettier@3.6.2)(typescript@5.9.2)
+      prettier-plugin-organize-imports: 3.2.4(prettier@3.6.2)(typescript@5.9.3)
       prettier-plugin-packagejson: 2.5.19(prettier@3.6.2)
     transitivePeerDependencies:
       - '@volar/vue-language-plugin-pug'
@@ -2519,12 +2603,12 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@kitajs/ts-html-plugin@file:packages/ts-html-plugin(@kitajs/html@packages+html)(typescript@5.9.2)':
+  '@kitajs/ts-html-plugin@file:packages/ts-html-plugin(@kitajs/html@packages+html)(typescript@5.9.3)':
     dependencies:
       '@kitajs/html': link:packages/html
       chalk: 5.6.2
       tslib: 2.8.1
-      typescript: 5.9.2
+      typescript: 5.9.3
       yargs: 18.0.0
 
   '@manypkg/find-root@1.1.0':
@@ -2633,21 +2717,6 @@ snapshots:
       '@swc/core': 1.7.26(@swc/helpers@0.5.17)
       '@swc/types': 0.1.12
 
-  '@swc-node/register@1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.2)':
-    dependencies:
-      '@swc-node/core': 1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)
-      '@swc-node/sourcemap-support': 0.6.1
-      '@swc/core': 1.7.26(@swc/helpers@0.5.17)
-      colorette: 2.0.20
-      debug: 4.4.3
-      oxc-resolver: 11.8.0
-      pirates: 4.0.7
-      tslib: 2.8.1
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - '@swc/types'
-      - supports-color
-
   '@swc-node/register@1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.3)':
     dependencies:
       '@swc-node/core': 1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)
@@ -2763,10 +2832,6 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@22.18.4':
-    dependencies:
-      undici-types: 6.21.0
-
   '@types/node@24.5.0':
     dependencies:
       undici-types: 7.12.0
@@ -2790,6 +2855,37 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260116.1':
+    optional: true
+
+  '@typescript/native-preview@7.0.0-dev.20260116.1':
+    optionalDependencies:
+      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260116.1
+
   abstract-logging@2.0.1: {}
 
   agent-base@7.1.4: {}
@@ -3371,10 +3467,6 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
   lower-case@1.1.4: {}
 
   lru-cache@10.4.3: {}
@@ -3760,15 +3852,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  prettier-plugin-organize-imports@3.2.4(prettier@3.6.2)(typescript@5.9.2):
+  prettier-plugin-organize-imports@3.2.4(prettier@3.6.2)(typescript@5.9.3):
     dependencies:
       prettier: 3.6.2
-      typescript: 5.9.2
+      typescript: 5.9.3
 
-  prettier-plugin-organize-imports@4.2.0(prettier@3.6.2)(typescript@5.9.2):
+  prettier-plugin-organize-imports@4.2.0(prettier@3.6.2)(typescript@5.9.3):
     dependencies:
       prettier: 3.6.2
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   prettier-plugin-packagejson@2.5.19(prettier@3.6.2):
     dependencies:
@@ -3801,12 +3893,6 @@ snapshots:
 
   quick-lru@4.0.1: {}
 
-  react-dom@18.3.1(react@18.3.1):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
-
   react-dom@19.1.1(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -3814,10 +3900,6 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
-
   react@19.1.1: {}
 
   read-pkg-up@7.0.1:
@@ -3885,10 +3967,6 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
-
   scheduler@0.26.0: {}
 
   secure-json-parse@4.0.0: {}
@@ -4069,14 +4147,10 @@ snapshots:
 
   typed-html@3.0.1: {}
 
-  typescript@5.9.2: {}
-
   typescript@5.9.3: {}
 
   uglify-js@3.19.3: {}
 
-  undici-types@6.21.0: {}
-
   undici-types@7.12.0: {}
 
   unist-util-stringify-position@4.0.0:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 94c9de2fd..b1c183148 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,28 @@
 packages:
   - 'packages/*'
   - 'benchmarks/*'
+
+catalog:
+  # TypeScript and tooling
+  typescript: ^5.9.2
+  tslib: ^2.8.1
+  '@typescript/native-preview': latest
+
+  # Node types
+  '@types/node': ^24.10.9
+
+  # SWC tooling
+  '@swc-node/register': ^1.11.1
+  '@swc/helpers': ^0.5.18
+
+  # Testing and coverage
+  c8: ^10.1.3
+
+  # JSDOM for testing
+  '@types/jsdom': ^27.0.0
+  jsdom: ^27.4.0
+
+  # React
+  '@types/react': ^19.2.8
+  react: ^19.2.3
+  react-dom: ^19.2.3

From a65c61c8eca682313476f9889d667f8a7b640151 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 01:44:40 +0700
Subject: [PATCH 02/22] code

---
 .changeset/warm-seas-kiss.md                  |    5 +
 .gitignore                                    |    1 +
 package.json                                  |    6 +-
 packages/fastify-html-plugin/index.js         |    2 +-
 packages/html/.npmignore                      |    9 -
 packages/html/all-types.js                    |    1 -
 packages/html/alpine.js                       |    7 -
 packages/html/error-boundary.js               |   42 -
 packages/html/hotwire-turbo.js                |    7 -
 packages/html/htmx.js                         |    7 -
 packages/html/index.d.ts                      |  174 --
 packages/html/jsx-dev-runtime.d.ts            |   37 -
 packages/html/jsx-dev-runtime.js              |   10 -
 packages/html/jsx-runtime.d.ts                |   37 -
 packages/html/jsx-runtime.js                  |   78 -
 packages/html/jsx.d.ts                        |  996 -----------
 packages/html/jsx.js                          |    7 -
 packages/html/package.json                    |   36 +-
 packages/html/register.d.ts                   |   12 -
 packages/html/register.js                     |   19 -
 .../error-boundary.ts}                        |   50 +-
 packages/html/{index.js => src/index.ts}      |  247 ++-
 packages/html/src/jsx-dev-runtime.ts          |   21 +
 packages/html/src/jsx-runtime.ts              |   97 +
 packages/html/src/jsx.ts                      |  997 +++++++++++
 .../html/{suspense.js => src/suspense.ts}     |  182 +-
 packages/html/suspense.d.ts                   |  158 --
 packages/html/test/async.test.tsx             |   19 +-
 packages/html/test/attributes.test.tsx        |  139 +-
 packages/html/test/components.test.tsx        |   20 +-
 packages/html/test/encoding.test.tsx          |   48 +-
 packages/html/test/error-boundary.test.tsx    |   25 +-
 .../html/test/escape-tagged-func.test.tsx     |  149 +-
 packages/html/test/escape.test.tsx            |  159 +-
 packages/html/test/hotwire-turbo.test.tsx     |   42 +-
 packages/html/test/html-standards.test.tsx    |    8 +-
 packages/html/test/misc.test.tsx              |  146 +-
 packages/html/test/react.test.tsx             |   66 +-
 packages/html/test/register.test.tsx          |   29 -
 packages/html/test/runtime.test.tsx           |   83 +-
 packages/html/test/simple-html.test.tsx       |   46 +-
 packages/html/test/style.test.tsx             |   30 +-
 packages/html/test/suspense.test.tsx          |  195 +-
 packages/html/test/tags.test.tsx              |   70 +-
 packages/html/test/util.test.ts               |   41 +-
 packages/html/tsconfig.build.json             |   10 +
 packages/html/tsconfig.json                   |   37 +-
 packages/ts-html-plugin/package.json          |   15 +-
 packages/ts-html-plugin/src/index.ts          |    2 +-
 packages/ts-html-plugin/test/arrays.test.ts   |    7 +-
 packages/ts-html-plugin/test/children.test.ts |   15 +-
 .../ts-html-plugin/test/component-xss.test.ts |    7 +-
 .../ts-html-plugin/test/double-escape.test.ts |    5 +-
 .../ts-html-plugin/test/operators.test.ts     |    5 +-
 packages/ts-html-plugin/test/readme.test.ts   |    5 +-
 packages/ts-html-plugin/test/safe.test.ts     |    5 +-
 .../ts-html-plugin/test/unsafe-tags.test.ts   |    5 +-
 .../ts-html-plugin/test/util/lang-server.ts   |    7 +-
 packages/ts-html-plugin/test/warn.test.ts     |    5 +-
 packages/ts-html-plugin/tsconfig.json         |    5 +-
 pnpm-lock.yaml                                | 1576 +++++++++++++----
 pnpm-workspace.yaml                           |   29 +-
 tsconfig.json                                 |   65 +-
 63 files changed, 3473 insertions(+), 2892 deletions(-)
 create mode 100644 .changeset/warm-seas-kiss.md
 delete mode 100644 packages/html/.npmignore
 delete mode 100644 packages/html/all-types.js
 delete mode 100644 packages/html/alpine.js
 delete mode 100644 packages/html/error-boundary.js
 delete mode 100644 packages/html/hotwire-turbo.js
 delete mode 100644 packages/html/htmx.js
 delete mode 100644 packages/html/index.d.ts
 delete mode 100644 packages/html/jsx-dev-runtime.d.ts
 delete mode 100644 packages/html/jsx-dev-runtime.js
 delete mode 100644 packages/html/jsx-runtime.d.ts
 delete mode 100644 packages/html/jsx-runtime.js
 delete mode 100644 packages/html/jsx.d.ts
 delete mode 100644 packages/html/jsx.js
 delete mode 100644 packages/html/register.d.ts
 delete mode 100644 packages/html/register.js
 rename packages/html/{error-boundary.d.ts => src/error-boundary.ts} (56%)
 rename packages/html/{index.js => src/index.ts} (63%)
 create mode 100644 packages/html/src/jsx-dev-runtime.ts
 create mode 100644 packages/html/src/jsx-runtime.ts
 create mode 100644 packages/html/src/jsx.ts
 rename packages/html/{suspense.js => src/suspense.ts} (58%)
 delete mode 100644 packages/html/suspense.d.ts
 delete mode 100644 packages/html/test/register.test.tsx
 create mode 100644 packages/html/tsconfig.build.json

diff --git a/.changeset/warm-seas-kiss.md b/.changeset/warm-seas-kiss.md
new file mode 100644
index 000000000..cedb85b33
--- /dev/null
+++ b/.changeset/warm-seas-kiss.md
@@ -0,0 +1,5 @@
+---
+'@kitajs/html': major
+---
+
+Major overhaul
diff --git a/.gitignore b/.gitignore
index 0310715b3..f6200f0cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,5 +6,6 @@ dist
 coverage
 
 *.log
+*.tsbuildinfo
 
 benchmarks/runner/profile.cpuprofile
\ No newline at end of file
diff --git a/package.json b/package.json
index 0b833048e..901f03791 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,11 @@
     "husky": "^9.1.7",
     "prettier": "^3.8.0",
     "prettier-plugin-jsdoc": "^1.8.0",
-    "prettier-plugin-organize-imports": "^4.2.0",
-    "prettier-plugin-packagejson": "^2.5.21",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-packagejson": "^3.0.0",
     "typescript": "catalog:"
   },
-  "packageManager": "pnpm@10.28.0",
+  "packageManager": "pnpm@10.28.1",
   "engines": {
     "node": ">=20.13",
     "pnpm": ">=10"
diff --git a/packages/fastify-html-plugin/index.js b/packages/fastify-html-plugin/index.js
index a2ac21d42..5188bc05e 100644
--- a/packages/fastify-html-plugin/index.js
+++ b/packages/fastify-html-plugin/index.js
@@ -9,8 +9,8 @@ const kAutoDoctype = Symbol.for('fastify-kita-html.autoDoctype');
 /**
  * Returns true if the string starts with `<html`, **ignores whitespace and casing**.
  *
- * @param {string} value
  * @this {void}
+ * @param {string} value
  */
 const isTagHtml = RegExp.prototype.test.bind(/^\s*<html/i);
 
diff --git a/packages/html/.npmignore b/packages/html/.npmignore
deleted file mode 100644
index 5f801e6ba..000000000
--- a/packages/html/.npmignore
+++ /dev/null
@@ -1,9 +0,0 @@
-*
-
-# source & type files
-!*.d.ts
-!*.js
-
-!SECURITY.md
-!LICENSE
-!README.md
\ No newline at end of file
diff --git a/packages/html/all-types.js b/packages/html/all-types.js
deleted file mode 100644
index 71458483c..000000000
--- a/packages/html/all-types.js
+++ /dev/null
@@ -1 +0,0 @@
-// No JS code is needed in this file. Its only here to allow direct import of all-types.js
diff --git a/packages/html/alpine.js b/packages/html/alpine.js
deleted file mode 100644
index d06ccdc17..000000000
--- a/packages/html/alpine.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// No JS code is needed in this file. Its only here to allow direct import of alpine.js
-
-process.emitWarning(
-  'The `@kitajs/html/alpine` import will be removed in the next major version. See https://github.com/kitajs/html/tree/master/packages/html#deprecating-importing-type-extensions',
-  'DeprecationWarning',
-  'KTHTML_DEP'
-);
diff --git a/packages/html/error-boundary.js b/packages/html/error-boundary.js
deleted file mode 100644
index e56bea8b8..000000000
--- a/packages/html/error-boundary.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const { contentToString } = require('./index');
-const { setTimeout } = require('node:timers/promises');
-
-/** @type {import('./error-boundary').ErrorBoundary} */
-function ErrorBoundary(props) {
-  // Joins the content into a string or promise of string
-  let children = contentToString(props.children);
-
-  // Sync children, just render them
-  if (typeof children === 'string') {
-    return children;
-  }
-
-  // Adds race condition to children
-  if (props.timeout) {
-    children = Promise.race([
-      children,
-      setTimeout(props.timeout).then((props.error || HtmlTimeout).reject)
-    ]);
-  }
-
-  // If the error boundary itself throws another error, there's nothing
-  // we can do, so we just re-throw it.
-  return children.catch(function errorBoundary(error) {
-    if (typeof props.catch === 'function') {
-      return props.catch(error);
-    }
-
-    return props.catch;
-  });
-}
-
-/** @type {import('./error-boundary').HtmlTimeout} */
-class HtmlTimeout extends Error {
-  /** @returns {never} */
-  static reject() {
-    throw new HtmlTimeout('Children timed out.');
-  }
-}
-
-exports.ErrorBoundary = ErrorBoundary;
-exports.HtmlTimeout = HtmlTimeout;
diff --git a/packages/html/hotwire-turbo.js b/packages/html/hotwire-turbo.js
deleted file mode 100644
index 631606f45..000000000
--- a/packages/html/hotwire-turbo.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// No JS code is needed in this file. Its only here to allow direct import of hotwire-turbo.js
-
-process.emitWarning(
-  'The `@kitajs/html/hotwire-turbo` import will be removed in the next major version. See https://github.com/kitajs/html/tree/master/packages/html#deprecating-importing-type-extensions',
-  'DeprecationWarning',
-  'KTHTML_DEP'
-);
diff --git a/packages/html/htmx.js b/packages/html/htmx.js
deleted file mode 100644
index b170fef98..000000000
--- a/packages/html/htmx.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// No JS code is needed in this file. Its only here to allow direct import of htmx.js
-
-process.emitWarning(
-  'The `@kitajs/html/htmx` import will be removed in the next major version. See https://github.com/kitajs/html/tree/master/packages/html#deprecating-importing-type-extensions',
-  'DeprecationWarning',
-  'KTHTML_DEP'
-);
diff --git a/packages/html/index.d.ts b/packages/html/index.d.ts
deleted file mode 100644
index e95a7293a..000000000
--- a/packages/html/index.d.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-/// <reference path="./jsx.d.ts" />
-/// <reference types="./suspense.d.ts" />
-/// <reference types="./error-boundary.d.ts" />
-
-/**
- * Returns true if the character at the given index is an uppercase character.
- *
- * @param input The string to check.
- * @param index The index of the character to check.
- * @returns If the character at the given index is an uppercase character.
- */
-export function isUpper(this: void, input: string, index: number): boolean;
-
-/**
- * Tag function that escapes the given string pieces and interpolates the given values.
- * Internally it uses {@linkcode escapeHtml} to escape the values.
- *
- * @param strings Template string.
- * @param values Values to interpolate.
- * @returns The escaped string.
- */
-export function escape(
-  this: void,
-  strings: TemplateStringsArray,
-  ...values: any[]
-): string;
-
-/**
- * Escapes a string for safe use as HTML text content. If the value is not a string, it is
- * coerced to one with its own `toString()` method.
- *
- * If the {@linkcode Bun} runtime is available, this function will be swapped out to
- * {@linkcode Bun.escapeHTML}.
- *
- * @param value The value to escape.
- * @returns The escaped string.
- */
-export function escapeHtml(this: void, value: any): string;
-
-/**
- * Returns true if the element is a html void element.
- *
- * @param tag The name of the element to check.
- * @returns If the element is a html void element.
- */
-export function isVoidElement(this: void, tag: string): boolean;
-
-/**
- * Transforms an object of style attributes into a html style string.
- *
- * @param style A record of literal values to use as style attributes or a string.
- * @returns The generated html style string.
- */
-export function styleToString(this: void, style: object | string): string;
-
-/**
- * Transforms an object of attributes into a html attributes string.
- *
- * **This function does not support Date objects.**
- *
- * @example `a b="c" d="1"`
- *
- * @param attributes A record of literal values to use as attributes.
- * @returns The generated html attributes string.
- */
-export function attributesToString(this: void, attributes: object): string;
-
-/**
- * Converts a camel cased string to a kebab cased string.
- *
- * @param camel The camel cased string to convert.
- */
-export function toKebabCase(this: void, camel: string): string;
-
-/**
- * Generates a html string from the given contents.
- *
- * @param name The name of the element to create or a function that creates the element.
- * @param [attributes] A record of literal values to use as attributes. A property named
- *   `children` will be used as the children of the element.
- * @param contents The inner contents of the element.
- * @returns The generated html string.
- */
-export function createElement(
-  this: void,
-  name: string | Function,
-  attributes: PropsWithChildren<any> | null,
-  ...contents: Children[]
-): JSX.Element;
-
-/**
- * Joins raw string html elements into a single html string.
- *
- * A raw html fragment is just an array of strings, this method concatenates .
- *
- * @param contents An maybe nested array of strings to concatenate.
- * @param escape If it should escape the contents before concatenating them. Default is
- *   `false`
- * @returns The concatenated and escaped string of contents.
- */
-export function contentsToString(
-  this: void,
-  contents: Children[],
-  escape?: boolean
-): JSX.Element;
-
-/**
- * Transforms a single content into a string.
- *
- * @param content The content to transform.
- * @param escape If it should escape the content before transforming it. Default is
- *   `false`
- * @returns The transformed and escaped string of content.
- */
-export function contentToString(
-  this: void,
-  content: Children,
-  escape?: boolean
-): JSX.Element;
-
-/** Here for interop with `preact` and many build systems. */
-export const h: typeof createElement;
-
-/**
- * Alias of {@linkcode escape} to reduce verbosity.
- *
- * @example
- *
- * ```tsx
- * import { e } from '@kitajs/html'
- *
- * <div>{e`My name is ${user.name}!`}</div>;
- * ```
- */
-export const e: typeof escape;
-
-/**
- * A JSX Fragment is used to return multiple elements from a component.
- *
- * @example
- *
- * ```tsx
- * // renders <div>1</div> and <div>2</div> without needing a wrapper element
- * const html = <><div>1</div><div>2</div></>
- *
- * // Html.Fragment is the same as <>...</>
- * const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
- * ```
- */
-export function Fragment(props: PropsWithChildren): JSX.Element;
-
-export type Children =
-  | number
-  | string
-  | boolean
-  | null
-  | undefined
-  | bigint
-  | Promise<Children>
-  | Children[];
-
-export type PropsWithChildren<T = {}> = { children?: Children } & T;
-
-export type Component<T = {}> = (this: void, props: PropsWithChildren<T>) => JSX.Element;
-
-/**
- * Fast and type safe HTML templates using JSX syntax.
- *
- * @module Html
- * @license Apache License Version 2.0
- * @link https://github.com/kitajs/html
- * @link https://www.npmjs.com/package/@kitajs/html
- */
-export const Html: Omit<typeof import('.'), 'Html'>;
diff --git a/packages/html/jsx-dev-runtime.d.ts b/packages/html/jsx-dev-runtime.d.ts
deleted file mode 100644
index 6a83fcb0a..000000000
--- a/packages/html/jsx-dev-runtime.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/// <reference path="./jsx.d.ts" />
-/// <reference types="./suspense.d.ts" />
-/// <reference types="./error-boundary.d.ts" />
-
-import type { Children } from './index';
-
-/**
- * Generates a html string from an attribute name of component and it's props.
- *
- * This function is meant to be used by the jsx runtime and should not be called directly.
- *
- * @param name The name of the element to create or another component function
- * @param attributes The props to apply to the component
- * @retuns The generated html string or a promise that resolves to the generated html string
- */
-export function jsxDEV(
-  this: void,
-  name: string | Function,
-  attributes: { children?: Children; [k: string]: any }
-): JSX.Element;
-
-/**
- * Generates a html string from an attribute name of component and it's props.
- *
- * This function is meant to be used by the jsx runtime and should not be called directly.
- *
- * @param name The name of the element to create or another component function
- * @param attributes The props to apply to the component
- * @retuns The generated html string or a promise that resolves to the generated html string
- */
-export function jsxs(
-  this: void,
-  name: string | Function,
-  attributes: { children: Children[]; [k: string]: any }
-): JSX.Element;
-
-export { Fragment } from './index';
diff --git a/packages/html/jsx-dev-runtime.js b/packages/html/jsx-dev-runtime.js
deleted file mode 100644
index 014acd53f..000000000
--- a/packages/html/jsx-dev-runtime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/// <reference path="./jsx.d.ts" />
-/// <reference types="./suspense.d.ts" />
-/// <reference types="./error-boundary.d.ts" />
-
-const { Fragment, jsx, jsxs } = require('./jsx-runtime');
-
-exports.jsx = jsx;
-exports.jsxs = jsxs;
-exports.jsxDEV = jsx;
-exports.Fragment = Fragment;
diff --git a/packages/html/jsx-runtime.d.ts b/packages/html/jsx-runtime.d.ts
deleted file mode 100644
index aa0c6dae8..000000000
--- a/packages/html/jsx-runtime.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/// <reference path="./jsx.d.ts" />
-/// <reference types="./suspense.d.ts" />
-/// <reference types="./error-boundary.d.ts" />
-
-import type { Children } from './index';
-
-/**
- * Generates a html string from an attribute name of component and it's props.
- *
- * This function is meant to be used by the jsx runtime and should not be called directly.
- *
- * @param name The name of the element to create or another component function
- * @param attributes The props to apply to the component
- * @retuns The generated html string or a promise that resolves to the generated html string
- */
-export function jsx(
-  this: void,
-  name: string | Function,
-  attributes: { children?: Children; [k: string]: any }
-): JSX.Element;
-
-/**
- * Generates a html string from an attribute name of component and it's props.
- *
- * This function is meant to be used by the jsx runtime and should not be called directly.
- *
- * @param name The name of the element to create or another component function
- * @param attributes The props to apply to the component
- * @retuns The generated html string or a promise that resolves to the generated html string
- */
-export function jsxs(
-  this: void,
-  name: string | Function,
-  attributes: { children: Children[]; [k: string]: any }
-): JSX.Element;
-
-export { Fragment } from './index';
diff --git a/packages/html/jsx-runtime.js b/packages/html/jsx-runtime.js
deleted file mode 100644
index 6d26e462a..000000000
--- a/packages/html/jsx-runtime.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/// <reference path="./jsx.d.ts" />
-/// <reference types="./suspense.d.ts" />
-/// <reference types="./error-boundary.d.ts" />
-
-const {
-  Fragment,
-  attributesToString,
-  isVoidElement,
-  contentsToString,
-  contentToString
-} = require('./index');
-
-/** @type {import('./jsx-runtime').jsx} */
-function jsx(name, attrs) {
-  // Calls the element creator function if the name is a function
-  if (typeof name === 'function') {
-    return name(attrs);
-  }
-
-  // Switches the tag name when this custom `tag` is present.
-  if (name === 'tag') {
-    name = /** @type {string} */ (attrs.of);
-  }
-
-  const attributes = attributesToString(attrs);
-
-  if (attrs.children === undefined) {
-    return isVoidElement(name)
-      ? '<' + name + attributes + '/>'
-      : '<' + name + attributes + '></' + name + '>';
-  }
-
-  const contents = contentToString(attrs.children, attrs.safe);
-
-  if (contents instanceof Promise) {
-    return contents.then(function resolveContents(child) {
-      return '<' + name + attributes + '>' + child + '</' + name + '>';
-    });
-  }
-
-  return '<' + name + attributes + '>' + contents + '</' + name + '>';
-}
-
-/** @type {import('./jsx-runtime').jsxs} */
-function jsxs(name, attrs) {
-  // Calls the element creator function if the name is a function
-  if (typeof name === 'function') {
-    return name(attrs);
-  }
-
-  // Switches the tag name when this custom `tag` is present.
-  if (name === 'tag') {
-    name = /** @type {string} */ (attrs.of);
-  }
-
-  const attributes = attributesToString(attrs);
-
-  if (attrs.children.length === 0) {
-    return isVoidElement(name)
-      ? '<' + name + attributes + '/>'
-      : '<' + name + attributes + '></' + name + '>';
-  }
-
-  const contents = contentsToString(attrs.children, attrs.safe);
-
-  if (contents instanceof Promise) {
-    return contents.then(function resolveContents(child) {
-      return '<' + name + attributes + '>' + child + '</' + name + '>';
-    });
-  }
-
-  return '<' + name + attributes + '>' + contents + '</' + name + '>';
-}
-
-exports.jsx = jsx;
-exports.jsxs = jsxs;
-// According to the jsx-runtime spec we must export the fragment element also
-exports.Fragment = Fragment;
diff --git a/packages/html/jsx.d.ts b/packages/html/jsx.d.ts
deleted file mode 100644
index bd75b6e2a..000000000
--- a/packages/html/jsx.d.ts
+++ /dev/null
@@ -1,996 +0,0 @@
-// This file is a result from many sources, including: RFCs, typescript dom lib, w3schools, and others.
-// Possibly there are many tags/attributes missing, but it is a good start.
-// Missing something? Please submit a issue report or a PR:
-// https://github.com/kitajs/html
-
-/** Same as a string type but allows autocompletion of literal values */
-type AnyString = string & {};
-
-declare namespace JSX {
-  /**
-   * A {@linkcode JSX.Element} will always be a string, unless one of its children is a
-   * promise, in which case all of its subsequent children will also be promises.
-   *
-   * Direct calls of `Html.createElement` uses correct return type based on its children.
-   * However, when using JSX syntax, typescript does not support this yet.
-   *
-   * @see https://github.com/microsoft/TypeScript/issues/14729
-   */
-  type Element = string | Promise<string>;
-
-  /**
-   * The index signature was removed to enable closed typing for style using CSSType.
-   * You're able to use type assertion or module augmentation to add properties or an
-   * index signature of your own.
-   *
-   * For examples and more information, visit:
-   * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
-   */
-  type CSSProperties = import('csstype').Properties;
-
-  interface HtmlTag extends ElementChildrenAttribute, IntrinsicAttributes {
-    accesskey?: undefined | string;
-    autocapitalize?:
-      | undefined
-      | 'off'
-      | 'none'
-      | 'on'
-      | 'sentences'
-      | 'words'
-      | 'characters'
-      | AnyString;
-    autocorrect?: undefined | 'on' | 'off' | AnyString;
-    contenteditable?: undefined | string;
-    enterkeyhint?:
-      | undefined
-      | 'enter'
-      | 'done'
-      | 'go'
-      | 'next'
-      | 'previous'
-      | 'search'
-      | 'send'
-      | AnyString;
-    inert?: undefined | boolean;
-    inputmode?:
-      | undefined
-      | 'none'
-      | 'text'
-      | 'decimal'
-      | 'numeric'
-      | 'tel'
-      | 'search'
-      | 'email'
-      | 'url'
-      | AnyString;
-    dir?: undefined | string;
-    hidden?: undefined | string | boolean;
-    id?: undefined | number | string;
-    nonce?: undefined | string;
-    part?: undefined | string;
-    popover?: undefined | boolean | 'auto' | 'manual';
-    role?: undefined | AriaRole;
-    lang?: undefined | string;
-    slot?: undefined | string;
-    draggable?: undefined | string | boolean;
-    spellcheck?: undefined | string | boolean;
-    tabindex?: undefined | number | string;
-    title?: undefined | string;
-    translate?: undefined | string | boolean;
-    virtualkeyboardpolicy?: undefined | 'auto' | 'manual' | AnyString;
-    writingsuggestions?: undefined | 'true' | 'false' | AnyString;
-
-    /** A css style attribute which also supports a `csstype` object. */
-    style?: undefined | string | CSSProperties;
-
-    /**
-     * When set to true, all inner content (html or not) of this tag will be escaped when
-     * evaluated.
-     *
-     * **Warning: This will escape even inner jsx tags. You should only use this in the
-     * most inner tag of the html tree.**
-     *
-     * @example
-     *
-     * ```tsx
-     * <div>{'<script />'}</div>
-     * '<div><script /></div>'
-     * <div safe>{'<script />'}</div>
-     * '<div><script /></div>'
-     * <div><div>{'<script />'}</div></div>
-     * '<div><div><script /></div></div>'
-     *
-     * // Escapes even inner jsx tags
-     * <div safe><div>{'<script />'}</div></div>
-     * '<div><div><script /></div></div>'
-     * ```
-     *
-     * @default false
-     *
-     * @see https://github.com/kitajs/html/tree/master/packages/html#sanitization
-     */
-    safe?: undefined | boolean;
-
-    /**
-     * Included here to work as a react drop-in replacement
-     *
-     * @deprecated Please use `class`.
-     */
-    className?: undefined | string;
-
-    /**
-     * The html class property. You can use an array to represent conditional class names.
-     * Similar to the `clsx` package behavior.
-     *
-     * @example
-     *
-     * ```tsx
-     * <div class={['a', true && 'b', false && 'c', 'd']} />
-     * '<div class="a b d"></div>'
-     *
-     * <div class={['class-a class-b', true && 'class-c']} />
-     * '<div class="class-a class-b class-c"></div>'
-     * ```
-     */
-    class?: undefined | string | (string | number | null | boolean | undefined)[];
-
-    /**
-     * A custom property that can be used to avoid attributes escaping and allow custom
-     * attributes syntax, such as `:` and `.` in their names.
-     *
-     * Objects are escaped normally, **strings ARE NOT escaped**.
-     *
-     * You can use a string or an object. When using a string, it will be used as the
-     * attribute value. When using an object, it will be used as a key-value map of
-     * attributes.
-     *
-     * @example
-     *
-     * ```tsx
-     * <div attrs={{ 'data-attr': 'value"' }} />
-     * '<div data-attr="value&#34;"></div>' // escapes
-     *
-     * <div attrs='a=1 b c=3 "' />
-     * '<div a=1 b c=3 "></div>' // does NOT escape
-     * ```
-     */
-    attrs?: undefined | object | string;
-  }
-
-  interface HtmlAnchorTag extends HtmlTag {
-    href?: undefined | string;
-    hreflang?: undefined | string;
-    target?: undefined | string;
-    download?: undefined | string;
-    referrerpolicy?:
-      | undefined
-      | ''
-      | 'no-referrer'
-      | 'no-referrer-when-downgrade'
-      | 'origin'
-      | 'origin-when-cross-origin'
-      | 'same-origin'
-      | 'strict-origin'
-      | 'strict-origin-when-cross-origin'
-      | 'unsafe-url'
-      | AnyString;
-    ping?: undefined | string;
-    rel?: undefined | string;
-    media?: undefined | string;
-    type?: undefined | string;
-  }
-
-  interface HtmlAreaTag extends HtmlTag {
-    alt?: undefined | string;
-    coords?: undefined | string;
-    shape?: undefined | string;
-    href?: undefined | string;
-    target?: undefined | string;
-    ping?: undefined | string;
-    rel?: undefined | string;
-    media?: undefined | string;
-    hreflang?: undefined | string;
-    type?: undefined | string;
-  }
-
-  interface HtmlAudioTag extends HtmlTag {
-    src?: undefined | string;
-    autobuffer?: undefined | string;
-    autoplay?: undefined | boolean;
-    preload?: undefined | string;
-    muted?: undefined | boolean;
-    loop?: undefined | boolean;
-    controls?: undefined | string;
-  }
-
-  interface BaseTag extends HtmlTag {
-    href?: undefined | string;
-    target?: undefined | string;
-  }
-
-  interface HtmlQuoteTag extends HtmlTag {
-    cite?: undefined | string;
-  }
-
-  interface HtmlBodyTag extends HtmlTag {}
-
-  interface HtmlButtonTag extends HtmlTag {
-    action?: undefined | string;
-    autofocus?: undefined | boolean;
-    command?: undefined | string;
-    commandfor?: undefined | string;
-    disabled?: undefined | boolean;
-    enctype?: undefined | string;
-    form?: undefined | string;
-    method?: undefined | string;
-    name?: undefined | string;
-    novalidate?: undefined | string | boolean;
-    target?: undefined | string;
-    type?: undefined | string;
-    value?: undefined | string;
-    formaction?: undefined | string;
-    formenctype?: undefined | string;
-    formmethod?: undefined | string;
-    formnovalidate?: undefined | string | boolean;
-    formtarget?: undefined | string;
-    popovertarget?: undefined | string;
-    popovertargetaction?: undefined | string;
-  }
-
-  interface HtmlDataListTag extends HtmlTag {}
-
-  interface HtmlCanvasTag extends HtmlTag {
-    width?: undefined | string;
-    height?: undefined | string;
-  }
-
-  interface HtmlTableColTag extends HtmlTag {
-    span?: undefined | string;
-  }
-
-  interface HtmlTableSectionTag extends HtmlTag {}
-
-  interface HtmlTableRowTag extends HtmlTag {}
-
-  interface DataTag extends HtmlTag {
-    value?: undefined | string;
-  }
-
-  interface HtmlEmbedTag extends HtmlTag, Record<string, any> {
-    src?: undefined | string;
-    type?: undefined | string;
-    width?: undefined | string;
-    height?: undefined | string;
-  }
-
-  interface HtmlFieldSetTag extends HtmlTag {
-    disabled?: undefined | boolean;
-    form?: undefined | string;
-    name?: undefined | string;
-  }
-
-  interface HtmlFormTag extends HtmlTag {
-    'accept-charset'?: undefined | string;
-    action?: undefined | string;
-    autocomplete?: undefined | string;
-    enctype?: undefined | string;
-    method?: undefined | string;
-    name?: undefined | string;
-    novalidate?: undefined | string | boolean;
-    target?: undefined | string;
-  }
-
-  interface HtmlHtmlTag extends HtmlTag {
-    manifest?: undefined | string;
-    xmlns?: string | string;
-  }
-
-  interface HtmlIFrameTag extends HtmlTag {
-    allow?: undefined | string;
-    allowfullscreen?: undefined | boolean;
-    allowpaymentrequest?: undefined | boolean;
-    credentialless?: undefined | boolean;
-    frameborder?: undefined | number | string;
-    height?: undefined | string;
-    loading?: undefined | string;
-    name?: undefined | string;
-    referrerpolicy?:
-      | undefined
-      | ''
-      | 'no-referrer'
-      | 'no-referrer-when-downgrade'
-      | 'origin'
-      | 'origin-when-cross-origin'
-      | 'same-origin'
-      | 'strict-origin'
-      | 'strict-origin-when-cross-origin'
-      | 'unsafe-url'
-      | AnyString;
-    sandbox?: undefined | boolean;
-    src?: undefined | string;
-    srcdoc?: undefined | string;
-    seamless?: undefined | string;
-    width?: undefined | string;
-  }
-
-  interface HtmlImageTag extends HtmlTag {
-    alt?: undefined | string;
-    src?: undefined | string;
-    crossorigin?: undefined | string;
-    usemap?: undefined | string;
-    ismap?: undefined | string;
-    width?: undefined | number | string;
-    height?: undefined | number | string;
-    decoding?: undefined | 'sync' | 'async' | 'auto' | AnyString;
-    loading?: undefined | 'eager' | 'lazy' | AnyString;
-    srcset?: undefined | string;
-    fetchpriority?: undefined | 'high' | 'low' | 'auto' | AnyString;
-  }
-
-  interface HtmlInputTag extends HtmlTag {
-    accept?: undefined | string;
-    action?: undefined | string;
-    alt?: undefined | string;
-    autocomplete?: undefined | string;
-    autofocus?: undefined | boolean;
-    checked?: undefined | boolean;
-    disabled?: undefined | boolean;
-    enctype?: undefined | string;
-    form?: undefined | string;
-    height?: undefined | string;
-    list?: undefined | string;
-    max?: undefined | number | string;
-    minlength?: undefined | number | string;
-    maxlength?: undefined | number | string;
-    method?: undefined | string;
-    min?: undefined | number | string;
-    multiple?: undefined | boolean;
-    name?: undefined | string;
-    novalidate?: undefined | boolean;
-    pattern?: undefined | string;
-    placeholder?: undefined | string;
-    readonly?: undefined | boolean;
-    required?: undefined | boolean;
-    size?: undefined | string;
-    src?: undefined | string;
-    step?: undefined | string;
-    target?: undefined | string;
-    type?: undefined | string;
-    value?: undefined | string;
-    width?: undefined | string;
-  }
-
-  interface HtmlModTag extends HtmlTag {
-    cite?: undefined | string;
-    datetime?: undefined | string | Date;
-  }
-
-  interface KeygenTag extends HtmlTag {
-    autofocus?: undefined | boolean;
-    challenge?: undefined | string;
-    disabled?: undefined | boolean;
-    form?: undefined | string;
-    keytype?: undefined | string;
-    name?: undefined | string;
-  }
-
-  interface HtmlLabelTag extends HtmlTag {
-    form?: undefined | string;
-    for?: undefined | string;
-  }
-
-  interface HtmlLITag extends HtmlTag {
-    value?: undefined | string | number;
-  }
-
-  interface HtmlLinkTag extends HtmlTag {
-    href?: undefined | string;
-    crossorigin?: undefined | string;
-    rel?: undefined | string;
-    as?: undefined | string;
-    media?: undefined | string;
-    hreflang?: undefined | string;
-    type?: undefined | string;
-    sizes?: undefined | string;
-    integrity?: undefined | string;
-    fetchpriority?: undefined | 'high' | 'low' | 'auto' | AnyString;
-    blocking?: undefined | 'render' | AnyString;
-  }
-
-  interface HtmlMapTag extends HtmlTag {
-    name?: undefined | string;
-  }
-
-  interface HtmlMetaTag extends HtmlTag {
-    name?: undefined | string;
-    property?: undefined | string;
-    'http-equiv'?: undefined | string;
-    content?: undefined | string;
-    charset?: undefined | string;
-  }
-
-  interface HtmlMeterTag extends HtmlTag {
-    value?: undefined | string | number;
-    min?: undefined | string | number;
-    max?: undefined | string | number;
-    low?: undefined | string | number;
-    high?: undefined | string | number;
-    optimum?: undefined | string | number;
-  }
-
-  interface HtmlObjectTag extends HtmlTag {
-    data?: undefined | string;
-    type?: undefined | string;
-    name?: undefined | string;
-    usemap?: undefined | string;
-    form?: undefined | string;
-    width?: undefined | string;
-    height?: undefined | string;
-  }
-
-  interface HtmlOListTag extends HtmlTag {
-    reversed?: undefined | string;
-    start?: undefined | string | number;
-  }
-
-  interface HtmlOptgroupTag extends HtmlTag {
-    disabled?: undefined | boolean;
-    label?: undefined | string;
-  }
-
-  interface HtmlOptionTag extends HtmlTag {
-    disabled?: undefined | boolean;
-    label?: undefined | string;
-    selected?: undefined | boolean;
-    value?: undefined | string;
-  }
-
-  interface HtmlOutputTag extends HtmlTag {
-    for?: undefined | string;
-    form?: undefined | string;
-    name?: undefined | string;
-  }
-
-  interface HtmlParamTag extends HtmlTag {
-    name?: undefined | string;
-    value?: undefined | string;
-  }
-
-  interface HtmlPictureTag extends HtmlTag {}
-
-  interface HtmlProgressTag extends HtmlTag {
-    value?: undefined | string | number;
-    max?: undefined | string | number;
-  }
-
-  interface HtmlCommandTag extends HtmlTag {
-    type?: undefined | string;
-    label?: undefined | string;
-    icon?: undefined | string;
-    disabled?: undefined | boolean;
-    checked?: undefined | string;
-    radiogroup?: undefined | string;
-    default?: undefined | string;
-  }
-
-  interface HtmlLegendTag extends HtmlTag {}
-
-  interface HtmlBrowserButtonTag extends HtmlTag {
-    type?: undefined | string;
-  }
-
-  interface HtmlMenuTag extends HtmlTag {
-    type?: undefined | string;
-    label?: undefined | string;
-  }
-
-  interface HtmlScriptTag extends HtmlTag {
-    src?: undefined | string;
-    type?: undefined | string;
-    charset?: undefined | string;
-    async?: undefined | boolean;
-    defer?: undefined | boolean;
-    crossorigin?: undefined | string;
-    integrity?: undefined | string;
-    text?: undefined | string;
-    fetchpriority?: undefined | 'high' | 'low' | 'auto' | AnyString;
-    blocking?: undefined | 'render' | AnyString;
-  }
-
-  interface HtmlDetailsTag extends HtmlTag {
-    open?: undefined | boolean;
-    name?: undefined | string;
-  }
-
-  interface HtmlDialogTag extends HtmlTag {
-    open?: undefined | boolean;
-    onclose?: undefined | string;
-  }
-
-  interface HtmlSelectTag extends HtmlTag, FormEvents {
-    autofocus?: undefined | boolean;
-    disabled?: undefined | boolean;
-    form?: undefined | string;
-    multiple?: undefined | string;
-    name?: undefined | string;
-    required?: undefined | boolean;
-    size?: undefined | string;
-    autocomplete?: undefined | string;
-  }
-
-  interface HtmlSourceTag extends HtmlTag {
-    src?: undefined | string;
-    srcset?: undefined | string;
-    type?: undefined | string;
-    media?: undefined | string;
-  }
-
-  interface HtmlStyleTag extends HtmlTag {
-    media?: undefined | string;
-    type?: undefined | string;
-    disabled?: undefined | boolean;
-    scoped?: undefined | string;
-    blocking?: undefined | 'render' | AnyString;
-  }
-
-  interface HtmlTableTag extends HtmlTag {
-    align?: undefined | 'left' | 'center' | 'right';
-    /** @deprecated */
-    bgcolor?: undefined | string;
-    border?: undefined | number;
-    cellpadding?: undefined | number | string;
-    cellspacing?: undefined | number | string;
-    width?: undefined | number | string;
-  }
-
-  interface HtmlTableDataCellTag extends HtmlTag {
-    align?: undefined | 'left' | 'center' | 'right';
-    colspan?: undefined | string | number;
-    rowspan?: undefined | string | number;
-    headers?: undefined | string;
-    /** @deprecated */
-    valign?: undefined | 'top' | 'middle' | 'bottom' | 'baseline';
-  }
-
-  interface HtmlTextAreaTag extends HtmlTag {
-    autofocus?: undefined | boolean;
-    cols?: undefined | string;
-    dirname?: undefined | string;
-    disabled?: undefined | boolean;
-    form?: undefined | string;
-    maxlength?: undefined | number | string;
-    minlength?: undefined | number | string;
-    name?: undefined | string;
-    placeholder?: undefined | string;
-    readonly?: undefined | boolean;
-    required?: undefined | boolean;
-    rows?: undefined | string;
-    wrap?: undefined | string;
-  }
-
-  interface HtmlTableHeaderCellTag extends HtmlTag {
-    colspan?: undefined | string | number;
-    rowspan?: undefined | string | number;
-    headers?: undefined | string;
-    scope?: undefined | string;
-    /** @deprecated */
-    valign?: undefined | 'top' | 'middle' | 'bottom' | 'baseline';
-    width?: undefined | number | string;
-  }
-
-  interface HtmlTimeTag extends HtmlTag {
-    datetime?: undefined | string | Date;
-  }
-
-  interface HtmlTrackTag extends HtmlTag {
-    default?: undefined | string;
-    kind?: undefined | string;
-    label?: undefined | string;
-    src?: undefined | string;
-    srclang?: undefined | string;
-  }
-
-  interface HtmlVideoTag extends HtmlTag {
-    src?: undefined | string;
-    poster?: undefined | string;
-    autobuffer?: undefined | string;
-    autoplay?: undefined | boolean;
-    loop?: undefined | boolean;
-    muted?: undefined | boolean;
-    controls?: undefined | boolean;
-    width?: undefined | string;
-    height?: undefined | string;
-  }
-
-  // We allow any attributes on svg because its hard to keep track of them all.
-  interface HtmlSvgTag extends HtmlTag, Record<string, any> {}
-
-  interface HtmlSearchTag extends HtmlTag {}
-
-  interface HtmlSlotTag extends HtmlTag {
-    name?: undefined | string;
-  }
-
-  interface HtmlFencedFrameTag extends HtmlTag {
-    allow?: undefined | string;
-    height?: undefined | number | string;
-    width?: undefined | number | string;
-  }
-
-  interface HtmlUnspecifiedTag extends HtmlTag, Record<string, any> {
-    of: string;
-  }
-
-  interface HtmlBodyTag {
-    onafterprint?: undefined | string;
-    onbeforeprint?: undefined | string;
-    onbeforeonload?: undefined | string;
-    onblur?: undefined | string;
-    onerror?: undefined | string;
-    onfocus?: undefined | string;
-    onhaschange?: undefined | string;
-    onload?: undefined | string;
-    onmessage?: undefined | string;
-    onoffline?: undefined | string;
-    ononline?: undefined | string;
-    onpagehide?: undefined | string;
-    onpageshow?: undefined | string;
-    onpopstate?: undefined | string;
-    onredo?: undefined | string;
-    onresize?: undefined | string;
-    onstorage?: undefined | string;
-    onundo?: undefined | string;
-    onunload?: undefined | string;
-  }
-
-  interface HtmlTag {
-    oncontextmenu?: undefined | string;
-    onkeydown?: undefined | string;
-    onkeypress?: undefined | string;
-    onkeyup?: undefined | string;
-    onclick?: undefined | string;
-    ondblclick?: undefined | string;
-    ondrag?: undefined | string;
-    ondragend?: undefined | string;
-    ondragenter?: undefined | string;
-    ondragleave?: undefined | string;
-    ondragover?: undefined | string;
-    ondragstart?: undefined | string;
-    ondrop?: undefined | string;
-    onmousedown?: undefined | string;
-    onmousemove?: undefined | string;
-    onmouseout?: undefined | string;
-    onmouseover?: undefined | string;
-    onmouseup?: undefined | string;
-    onmousewheel?: undefined | string;
-    onscroll?: undefined | string;
-  }
-
-  interface FormEvents {
-    onblur?: undefined | string;
-    onchange?: undefined | string;
-    onfocus?: undefined | string;
-    onformchange?: undefined | string;
-    onforminput?: undefined | string;
-    oninput?: undefined | string;
-    oninvalid?: undefined | string;
-    onselect?: undefined | string;
-    onsubmit?: undefined | string;
-  }
-
-  interface HtmlInputTag extends FormEvents {}
-
-  interface HtmlFieldSetTag extends FormEvents {}
-
-  interface HtmlFormTag extends FormEvents {}
-
-  interface MediaEvents {
-    onabort?: undefined | string;
-    oncanplay?: undefined | string;
-    oncanplaythrough?: undefined | string;
-    ondurationchange?: undefined | string;
-    onemptied?: undefined | string;
-    onended?: undefined | string;
-    onerror?: undefined | string;
-    onloadeddata?: undefined | string;
-    onloadedmetadata?: undefined | string;
-    onloadstart?: undefined | string;
-    onpause?: undefined | string;
-    onplay?: undefined | string;
-    onplaying?: undefined | string;
-    onprogress?: undefined | string;
-    onratechange?: undefined | string;
-    onreadystatechange?: undefined | string;
-    onseeked?: undefined | string;
-    onseeking?: undefined | string;
-    onstalled?: undefined | string;
-    onsuspend?: undefined | string;
-    ontimeupdate?: undefined | string;
-    onvolumechange?: undefined | string;
-    onwaiting?: undefined | string;
-  }
-
-  interface HtmlAudioTag extends MediaEvents {}
-
-  interface HtmlEmbedTag extends MediaEvents {}
-
-  interface HtmlImageTag extends MediaEvents {
-    border?: undefined | number;
-  }
-
-  interface HtmlObjectTag extends MediaEvents {}
-
-  interface HtmlVideoTag extends MediaEvents {}
-
-  interface IntrinsicAttributes {
-    /**
-     * In `react-jsx`, the `'key'` attribute serves as a reserved attribute name.
-     * Consequently, the `'key'` attribute is not included in the properties parameter of
-     * any component or element.
-     *
-     * **If you intend to utilize a similar property, please opt for an alternate name.**
-     *
-     * @see https://github.com/reactjs/rfcs/pull/107
-     */
-    key?: undefined | never;
-  }
-
-  interface ElementChildrenAttribute {
-    children?: undefined | import('./').Children;
-  }
-
-  interface IntrinsicElements {
-    a: HtmlAnchorTag;
-    abbr: HtmlTag;
-    address: HtmlTag;
-    animate: HtmlSvgTag;
-    animateMotion: HtmlSvgTag;
-    animateTransform: HtmlSvgTag;
-    area: HtmlAreaTag;
-    article: HtmlTag;
-    aside: HtmlTag;
-    audio: HtmlAudioTag;
-    b: HtmlTag;
-    base: BaseTag;
-    bb: HtmlBrowserButtonTag;
-    bdi: HtmlTag;
-    bdo: HtmlTag;
-    blockquote: HtmlQuoteTag;
-    body: HtmlBodyTag;
-    br: HtmlTag;
-    button: HtmlButtonTag;
-    canvas: HtmlCanvasTag;
-    caption: HtmlTag;
-    circle: HtmlSvgTag;
-    cite: HtmlTag;
-    clipPath: HtmlSvgTag;
-    code: HtmlTag;
-    col: HtmlTableColTag;
-    colgroup: HtmlTableColTag;
-    commands: HtmlCommandTag;
-    data: DataTag;
-    datalist: HtmlDataListTag;
-    dd: HtmlTag;
-    defs: HtmlSvgTag;
-    del: HtmlModTag;
-    desc: HtmlSvgTag;
-    details: HtmlDetailsTag;
-    dfn: HtmlTag;
-    dialog: HtmlDialogTag;
-    div: HtmlTag;
-    dl: HtmlTag;
-    dt: HtmlTag;
-    ellipse: HtmlSvgTag;
-    em: HtmlTag;
-    embed: HtmlEmbedTag;
-    feBlend: HtmlSvgTag;
-    feColorMatrix: HtmlSvgTag;
-    feComponentTransfer: HtmlSvgTag;
-    feComposite: HtmlSvgTag;
-    feConvolveMatrix: HtmlSvgTag;
-    feDiffuseLighting: HtmlSvgTag;
-    feDisplacementMap: HtmlSvgTag;
-    feDistantLight: HtmlSvgTag;
-    feDropShadow: HtmlSvgTag;
-    feFlood: HtmlSvgTag;
-    feFuncA: HtmlSvgTag;
-    feFuncB: HtmlSvgTag;
-    feFuncG: HtmlSvgTag;
-    feFuncR: HtmlSvgTag;
-    feGaussianBlur: HtmlSvgTag;
-    feImage: HtmlSvgTag;
-    feMerge: HtmlSvgTag;
-    feMergeNode: HtmlSvgTag;
-    feMorphology: HtmlSvgTag;
-    feOffset: HtmlSvgTag;
-    fePointLight: HtmlSvgTag;
-    feSpecularLighting: HtmlSvgTag;
-    feSpotLight: HtmlSvgTag;
-    feTile: HtmlSvgTag;
-    feTurbulence: HtmlSvgTag;
-    fencedframe: HtmlFencedFrameTag;
-    fieldset: HtmlFieldSetTag;
-    figcaption: HtmlTag;
-    figure: HtmlTag;
-    filter: HtmlSvgTag;
-    footer: HtmlTag;
-    foreignObject: HtmlSvgTag;
-    form: HtmlFormTag;
-    g: HtmlSvgTag;
-    h1: HtmlTag;
-    h2: HtmlTag;
-    h3: HtmlTag;
-    h4: HtmlTag;
-    h5: HtmlTag;
-    h6: HtmlTag;
-    head: HtmlTag;
-    header: HtmlTag;
-    hgroup: HtmlTag;
-    hr: HtmlTag;
-    html: HtmlHtmlTag;
-    i: HtmlTag;
-    iframe: HtmlIFrameTag;
-    image: HtmlSvgTag;
-    img: HtmlImageTag;
-    input: HtmlInputTag;
-    ins: HtmlModTag;
-    kbd: HtmlTag;
-    keygen: KeygenTag;
-    label: HtmlLabelTag;
-    legend: HtmlLegendTag;
-    li: HtmlLITag;
-    line: HtmlSvgTag;
-    linearGradient: HtmlSvgTag;
-    link: HtmlLinkTag;
-    main: HtmlTag;
-    map: HtmlMapTag;
-    mark: HtmlTag;
-    marker: HtmlSvgTag;
-    mask: HtmlSvgTag;
-    menu: HtmlMenuTag;
-    meta: HtmlMetaTag;
-    metadata: HtmlSvgTag;
-    meter: HtmlMeterTag;
-    mpath: HtmlSvgTag;
-    nav: HtmlTag;
-    noscript: HtmlTag;
-    object: HtmlObjectTag;
-    ol: HtmlOListTag;
-    optgroup: HtmlOptgroupTag;
-    option: HtmlOptionTag;
-    output: HtmlOutputTag;
-    p: HtmlTag;
-    param: HtmlParamTag;
-    path: HtmlSvgTag;
-    pattern: HtmlSvgTag;
-    picture: HtmlPictureTag;
-    polygon: HtmlSvgTag;
-    polyline: HtmlSvgTag;
-    pre: HtmlTag;
-    progress: HtmlProgressTag;
-    q: HtmlQuoteTag;
-    radialGradient: HtmlSvgTag;
-    rb: HtmlTag;
-    rect: HtmlSvgTag;
-    rp: HtmlTag;
-    rt: HtmlTag;
-    rtc: HtmlTag;
-    ruby: HtmlTag;
-    s: HtmlTag;
-    samp: HtmlTag;
-    slot: HtmlSlotTag;
-    script: HtmlScriptTag;
-    search: HtmlSearchTag;
-    section: HtmlTag;
-    select: HtmlSelectTag;
-    set: HtmlSvgTag;
-    small: HtmlTag;
-    source: HtmlSourceTag;
-    span: HtmlTag;
-    stop: HtmlSvgTag;
-    strong: HtmlTag;
-    style: HtmlStyleTag;
-    sub: HtmlTag;
-    summary: HtmlTag;
-    sup: HtmlTag;
-    svg: HtmlSvgTag;
-    switch: HtmlSvgTag;
-    symbol: HtmlSvgTag;
-    table: HtmlTableTag;
-    tag: HtmlUnspecifiedTag;
-    tbody: HtmlTag;
-    td: HtmlTableDataCellTag;
-    template: HtmlTag;
-    text: HtmlSvgTag;
-    textarea: HtmlTextAreaTag;
-    textPath: HtmlSvgTag;
-    tfoot: HtmlTableSectionTag;
-    th: HtmlTableHeaderCellTag;
-    thead: HtmlTableSectionTag;
-    time: HtmlTimeTag;
-    title: HtmlTag;
-    tr: HtmlTableRowTag;
-    track: HtmlTrackTag;
-    tspan: HtmlSvgTag;
-    u: HtmlTag;
-    ul: HtmlTag;
-    use: HtmlSvgTag;
-    var: HtmlTag;
-    video: HtmlVideoTag;
-    view: HtmlSvgTag;
-    wbr: HtmlTag;
-  }
-}
-
-// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
-type AriaRole =
-  | 'alert'
-  | 'alertdialog'
-  | 'application'
-  | 'article'
-  | 'banner'
-  | 'button'
-  | 'cell'
-  | 'checkbox'
-  | 'columnheader'
-  | 'combobox'
-  | 'complementary'
-  | 'contentinfo'
-  | 'definition'
-  | 'dialog'
-  | 'directory'
-  | 'document'
-  | 'feed'
-  | 'figure'
-  | 'form'
-  | 'grid'
-  | 'gridcell'
-  | 'group'
-  | 'heading'
-  | 'img'
-  | 'link'
-  | 'list'
-  | 'listbox'
-  | 'listitem'
-  | 'log'
-  | 'main'
-  | 'marquee'
-  | 'math'
-  | 'menu'
-  | 'menubar'
-  | 'menuitem'
-  | 'menuitemcheckbox'
-  | 'menuitemradio'
-  | 'navigation'
-  | 'none'
-  | 'note'
-  | 'option'
-  | 'presentation'
-  | 'progressbar'
-  | 'radio'
-  | 'radiogroup'
-  | 'region'
-  | 'row'
-  | 'rowgroup'
-  | 'rowheader'
-  | 'scrollbar'
-  | 'search'
-  | 'searchbox'
-  | 'separator'
-  | 'slider'
-  | 'spinbutton'
-  | 'status'
-  | 'switch'
-  | 'tab'
-  | 'table'
-  | 'tablist'
-  | 'tabpanel'
-  | 'term'
-  | 'textbox'
-  | 'timer'
-  | 'toolbar'
-  | 'tooltip'
-  | 'tree'
-  | 'treegrid'
-  | 'treeitem'
-  | (string & {});
diff --git a/packages/html/jsx.js b/packages/html/jsx.js
deleted file mode 100644
index 67882a5a3..000000000
--- a/packages/html/jsx.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// No JS code is needed in this file. Its only here to allow direct import of jsx.js
-
-process.emitWarning(
-  'The `@kitajs/html/jsx` import will be removed in the next major version. See https://github.com/kitajs/html/tree/master/packages/html#deprecating-importing-type-extensions',
-  'DeprecationWarning',
-  'KTHTML_DEP'
-);
diff --git a/packages/html/package.json b/packages/html/package.json
index 012a78d04..bce70c691 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -12,27 +12,26 @@
   "funding": "https://github.com/kitajs/html?sponsor=1",
   "license": "MIT",
   "author": "Arthur Fiorette <kita@arthur.place>",
-  "sideEffects": [
-    "register.js"
-  ],
-  "type": "commonjs",
+  "sideEffects": false,
+  "type": "module",
   "exports": {
-    ".": "./index.js",
-    "./jsx-runtime": "./jsx-runtime.js",
-    "./jsx-dev-runtime": "./jsx-dev-runtime.js",
+    ".": "./dist/index.js",
+    "./*": "./*",
+    "./error-boundary": "./dist/error-boundary.js",
+    "./jsx-dev-runtime": "./dist/jsx-dev-runtime.js",
+    "./jsx-runtime": "./dist/jsx-runtime.js",
     "./package.json": "./package.json",
-    "./suspense": "./suspense.js",
-    "./register": "./register.js",
-    "./error-boundary": "./error-boundary.js",
-    "./*": "./*"
+    "./suspense": "./dist/suspense.js"
   },
-  "main": "index.js",
-  "module": "index.js",
-  "types": "index.d.ts",
+  "files": [
+    "dist",
+    "*.d.ts",
+    "!dist/*.tsbuildinfo"
+  ],
   "scripts": {
     "bench": "pnpm --filter \"benchmark-*\" build && pnpm --filter \"benchmark-runner\" start",
-    "test": "tsgo; c8 --reporter lcov --reporter text node --no-deprecation --enable-source-maps --test dist/test",
-    "test:only": "tsgo; node --no-deprecation --test-only --test dist/test"
+    "build": "tsgo -p tsconfig.build.json",
+    "test": "vitest --coverage --typecheck --run"
   },
   "dependencies": {
     "csstype": "^3.2.3"
@@ -41,11 +40,14 @@
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
     "@typescript/native-preview": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
     "c8": "catalog:",
     "jsdom": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "typescript": "catalog:"
+    "self": "link:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
   },
   "engines": {
     "node": ">=12"
diff --git a/packages/html/register.d.ts b/packages/html/register.d.ts
deleted file mode 100644
index e8f9ff5c7..000000000
--- a/packages/html/register.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-declare global {
-  /**
-   * The html factory namespace.
-   *
-   * @deprecated The `@kitajs/html/register` import has been DEPRECATED and will be
-   *   removed in the next major version. See
-   *   https://github.com/kitajs/html/tree/master/packages/html#deprecating-global-register
-   */
-  var Html: typeof import('./index');
-}
-
-export type {};
diff --git a/packages/html/register.js b/packages/html/register.js
deleted file mode 100644
index 8e57558f1..000000000
--- a/packages/html/register.js
+++ /dev/null
@@ -1,19 +0,0 @@
-process.emitWarning(
-  'The `@kitajs/html/register` import has been DEPRECATED and will be removed in the next major version. See https://github.com/kitajs/html/tree/master/packages/html#deprecating-global-register',
-  'DeprecationWarning',
-  'KTHTML_DEP'
-);
-
-// Finds the global object (window in browsers)
-let root;
-try {
-  root = Function('return this')();
-  /* c8 ignore next 3 */
-} catch (_) {
-  root = window;
-}
-
-// Avoids multiple registrations
-if (!root.Html) {
-  root.Html = require('./index').Html;
-}
diff --git a/packages/html/error-boundary.d.ts b/packages/html/src/error-boundary.ts
similarity index 56%
rename from packages/html/error-boundary.d.ts
rename to packages/html/src/error-boundary.ts
index 3709a29bf..7df32c57b 100644
--- a/packages/html/error-boundary.d.ts
+++ b/packages/html/src/error-boundary.ts
@@ -1,13 +1,6 @@
-import type { Children } from '.';
-
-/** A component that adds an error boundary to catch any inner promise rejection. */
-export function ErrorBoundary(props: ErrorBoundaryProps): JSX.Element;
-
-/** An error thrown by the ErrorBoundary's `timeout` property. */
-export class HtmlTimeout extends Error {
-  /** Throws the error. */
-  static reject(): never;
-}
+import { setTimeout } from 'node:timers/promises';
+import type { Children } from './index.js';
+import { contentToString } from './index.js';
 
 /**
  * The props for the `ErrorBoundary` component.
@@ -40,3 +33,40 @@ export interface ErrorBoundaryProps {
    */
   error?: { reject(): never };
 }
+
+/** A component that adds an error boundary to catch any inner promise rejection. */
+export function ErrorBoundary(props: ErrorBoundaryProps): JSX.Element {
+  // Joins the content into a string or promise of string
+  let children = contentToString(props.children);
+
+  // Sync children, just render them
+  if (typeof children === 'string') {
+    return children;
+  }
+
+  // Adds race condition to children
+  if (props.timeout) {
+    children = Promise.race([
+      children,
+      setTimeout(props.timeout).then((props.error || HtmlTimeout).reject)
+    ]);
+  }
+
+  // If the error boundary itself throws another error, there's nothing
+  // we can do, so we just re-throw it.
+  return children.catch(function errorBoundary(error) {
+    if (typeof props.catch === 'function') {
+      return props.catch(error);
+    }
+
+    return props.catch;
+  });
+}
+
+/** An error thrown by the ErrorBoundary's `timeout` property. */
+export class HtmlTimeout extends Error {
+  /** Throws the error. */
+  static reject(): never {
+    throw new HtmlTimeout('Children timed out.');
+  }
+}
diff --git a/packages/html/index.js b/packages/html/src/index.ts
similarity index 63%
rename from packages/html/index.js
rename to packages/html/src/index.ts
index adccbaca4..3894a3d68 100644
--- a/packages/html/index.js
+++ b/packages/html/src/index.ts
@@ -1,18 +1,28 @@
-/// <reference path="./jsx.d.ts" />
-/// <reference types="./suspense.d.ts" />
-/// <reference types="./error-boundary.d.ts" />
+/// <reference path="./jsx.ts" />
+/// <reference path="./suspense.ts" />
+/// <reference path="./error-boundary.ts" />
 
 const ESCAPED_REGEX = /[<"'&]/;
 const CAMEL_REGEX = /[a-z][A-Z]/;
 
-/** @type {import('.').isUpper} */
-function isUpper(input, index) {
+/**
+ * Returns true if the character at the given index is an uppercase character.
+ *
+ * @param input The string to check.
+ * @param index The index of the character to check.
+ * @returns If the character at the given index is an uppercase character.
+ */
+export function isUpper(this: void, input: string, index: number): boolean {
   const code = input.charCodeAt(index);
   return code >= 65 /* A */ && code <= 90; /* Z */
 }
 
-/** @type {import('.').toKebabCase} */
-function toKebabCase(camel) {
+/**
+ * Converts a camel cased string to a kebab cased string.
+ *
+ * @param camel The camel cased string to convert.
+ */
+export function toKebabCase(this: void, camel: string): string {
   // This is a optimization to avoid the whole conversion process when the
   // string does not contain any uppercase characters.
   if (!CAMEL_REGEX.test(camel)) {
@@ -48,8 +58,19 @@ function toKebabCase(camel) {
   return kebab;
 }
 
-/** @type {import('.').escape} */
-function escape(strings, ...values) {
+/**
+ * Tag function that escapes the given string pieces and interpolates the given values.
+ * Internally it uses {@linkcode escapeHtml} to escape the values.
+ *
+ * @param strings Template string.
+ * @param values Values to interpolate.
+ * @returns The escaped string.
+ */
+export function escape(
+  this: void,
+  strings: TemplateStringsArray,
+  ...values: any[]
+): string {
   const stringsLength = strings.length,
     valuesLength = values.length;
 
@@ -69,8 +90,17 @@ function escape(strings, ...values) {
   return escapeHtml(result);
 }
 
-/** @type {import('.').escapeHtml} */
-let escapeHtml = function (value) {
+/**
+ * Escapes a string for safe use as HTML text content. If the value is not a string, it is
+ * coerced to one with its own `toString()` method.
+ *
+ * If the {@linkcode Bun} runtime is available, this function will be swapped out to
+ * {@linkcode Bun.escapeHTML}.
+ *
+ * @param value The value to escape.
+ * @returns The escaped string.
+ */
+export let escapeHtml: (this: void, value: any) => string = function (value) {
   if (typeof value !== 'string') {
     value = value.toString();
   }
@@ -124,8 +154,13 @@ let escapeHtml = function (value) {
 // @ts-ignore - bun runtime have its own escapeHTML function.
 if (typeof Bun !== 'undefined') escapeHtml = Bun.escapeHTML;
 
-/** @type {import('.').isVoidElement} */
-function isVoidElement(tag) {
+/**
+ * Returns true if the element is a html void element.
+ *
+ * @param tag The name of the element to check.
+ * @returns If the element is a html void element.
+ */
+export function isVoidElement(this: void, tag: string): boolean {
   // Ordered by most common to least common.
   return (
     tag === 'meta' ||
@@ -147,8 +182,13 @@ function isVoidElement(tag) {
   );
 }
 
-/** @type {import('.').styleToString} */
-function styleToString(style) {
+/**
+ * Transforms an object of style attributes into a html style string.
+ *
+ * @param style A record of literal values to use as style attributes or a string.
+ * @returns The generated html style string.
+ */
+export function styleToString(this: void, style: object | string): string {
   // Faster escaping process that only looks for the " character.
   // As we use the " character to wrap the style string, we need to escape it.
   if (typeof style === 'string') {
@@ -238,8 +278,17 @@ function styleToString(style) {
   return result;
 }
 
-/** @type {import('.').attributesToString} */
-function attributesToString(attributes) {
+/**
+ * Transforms an object of attributes into a html attributes string.
+ *
+ * **This function does not support Date objects.**
+ *
+ * @example `a b="c" d="1"`
+ *
+ * @param attributes A record of literal values to use as attributes.
+ * @returns The generated html attributes string.
+ */
+export function attributesToString(this: void, attributes: object): string {
   const keys = Object.keys(attributes);
   const length = keys.length;
 
@@ -372,11 +421,35 @@ function attributesToString(attributes) {
   return result;
 }
 
+export type Children =
+  | number
+  | string
+  | boolean
+  | null
+  | undefined
+  | bigint
+  | Promise<Children>
+  | Children[];
+
+export type PropsWithChildren<T = {}> = { children?: Children } & T;
+
+export type Component<T = {}> = (this: void, props: PropsWithChildren<T>) => JSX.Element;
+
 /**
- * @type {import('.').contentsToString}
- * @returns {any}
+ * Joins raw string html elements into a single html string.
+ *
+ * A raw html fragment is just an array of strings, this method concatenates .
+ *
+ * @param contents An maybe nested array of strings to concatenate.
+ * @param escape If it should escape the contents before concatenating them. Default is
+ *   `false`
+ * @returns The concatenated and escaped string of contents.
  */
-function contentsToString(contents, escape) {
+export function contentsToString(
+  this: void,
+  contents: Children[],
+  escape?: boolean
+): JSX.Element {
   let length = contents.length;
   let result = '';
 
@@ -426,14 +499,21 @@ function contentsToString(contents, escape) {
 }
 
 /**
- * @param {import('./index').Children} content
- * @param {boolean} safe
- * @returns {JSX.Element}
+ * Transforms a single content into a string.
+ *
+ * @param content The content to transform.
+ * @param escape If it should escape the content before transforming it. Default is
+ *   `false`
+ * @returns The transformed and escaped string of content.
  */
-function contentToString(content, safe) {
+export function contentToString(
+  this: void,
+  content: Children,
+  escape?: boolean
+): JSX.Element {
   switch (typeof content) {
     case 'string':
-      return safe ? escapeHtml(content) : content;
+      return escape ? escapeHtml(content) : content;
     case 'number':
     // Bigint is the only case where it differs from React.
     // where React renders a empty string and we render the whole number.
@@ -448,12 +528,12 @@ function contentToString(content, safe) {
   }
 
   if (Array.isArray(content)) {
-    return contentsToString(content, safe);
+    return contentsToString(content, escape);
   }
 
   if (typeof content.then === 'function') {
     return content.then(function resolveContent(resolved) {
-      return contentToString(resolved, safe);
+      return contentToString(resolved, escape);
     });
   }
 
@@ -461,14 +541,21 @@ function contentToString(content, safe) {
 }
 
 /**
- * Just to stop TS from complaining about the type.
+ * Generates a html string from the given contents.
  *
- * @type {import('.').createElement}
- * @param {any} name
- * @returns {any}
+ * @param name The name of the element to create or a function that creates the element.
+ * @param [attributes] A record of literal values to use as attributes. A property named
+ *   `children` will be used as the children of the element.
+ * @param children The inner contents of the element.
+ * @returns The generated html string.
  */
-function createElement(name, attrs, ...children) {
-  const hasAttrs = attrs !== null;
+export function createElement(
+  this: void,
+  name: string | Function,
+  attributes: PropsWithChildren<any> | null,
+  ...children: Children[]
+): JSX.Element {
+  const hasAttrs = attributes !== null;
 
   // Calls the element creator function if the name is a function
   if (typeof name === 'function') {
@@ -478,51 +565,87 @@ function createElement(name, attrs, ...children) {
       return name({ children: children.length > 1 ? children : children[0] });
     }
 
-    attrs.children = children.length > 1 ? children : children[0];
-    return name(attrs);
+    attributes.children = children.length > 1 ? children : children[0];
+    return name(attributes);
   }
 
   // Switches the tag name when this custom `tag` is present.
   if (hasAttrs && name === 'tag') {
-    name = /** @type {string} */ (attrs.of);
+    name = attributes.of as string;
   }
 
-  const attributes = hasAttrs ? attributesToString(attrs) : '';
+  const attrs = hasAttrs ? attributesToString(attributes) : '';
 
   if (children.length === 0) {
-    return isVoidElement(name)
-      ? '<' + name + attributes + '/>'
-      : '<' + name + attributes + '></' + name + '>';
+    return isVoidElement(name as string)
+      ? '<' + name + attrs + '/>'
+      : '<' + name + attrs + '></' + name + '>';
   }
 
-  const contents = contentsToString(children, hasAttrs && attrs.safe);
+  const contentsStr = contentsToString(children, hasAttrs && attributes.safe);
 
-  if (typeof contents === 'string') {
-    return '<' + name + attributes + '>' + contents + '</' + name + '>';
+  if (typeof contentsStr === 'string') {
+    return '<' + name + attrs + '>' + contentsStr + '</' + name + '>';
   }
 
-  return contents.then(function resolveContents(contents) {
-    return '<' + name + attributes + '>' + contents + '</' + name + '>';
+  return contentsStr.then(function resolveContents(contents) {
+    return '<' + name + attrs + '>' + contents + '</' + name + '>';
   });
 }
 
-/** @type {import('.').Fragment} */
-function Fragment(props) {
+/**
+ * A JSX Fragment is used to return multiple elements from a component.
+ *
+ * @example
+ *
+ * ```tsx
+ * // renders <div>1</div> and <div>2</div> without needing a wrapper element
+ * const html = <><div>1</div><div>2</div></>
+ *
+ * // Html.Fragment is the same as <>...</>
+ * const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
+ * ```
+ */
+export function Fragment(props: PropsWithChildren): JSX.Element {
   return contentsToString([props.children]);
 }
 
-exports.escape = escape;
-exports.e = escape;
-exports.escapeHtml = escapeHtml;
-exports.isVoidElement = isVoidElement;
-exports.attributesToString = attributesToString;
-exports.toKebabCase = toKebabCase;
-exports.isUpper = isUpper;
-exports.styleToString = styleToString;
-exports.createElement = createElement;
-exports.h = createElement;
-exports.contentsToString = contentsToString;
-exports.contentToString = contentToString;
-exports.Fragment = Fragment;
-//@ts-expect-error - global augmentation
-exports.Html = { ...exports };
+/** Here for interop with `preact` and many build systems. */
+export const h: typeof createElement = createElement;
+
+/**
+ * Alias of {@linkcode escape} to reduce verbosity.
+ *
+ * @example
+ *
+ * ```tsx
+ * import { e } from '@kitajs/html'
+ *
+ * <div>{e`My name is ${user.name}!`}</div>;
+ * ```
+ */
+export const e: typeof escape = escape;
+
+/**
+ * Fast and type safe HTML templates using JSX syntax.
+ *
+ * @module Html
+ * @license Apache License Version 2.0
+ * @link https://github.com/kitajs/html
+ * @link https://www.npmjs.com/package/@kitajs/html
+ */
+export const Html: Omit<typeof import('./index.js'), 'Html'> = {
+  escape,
+  e,
+  escapeHtml,
+  isVoidElement,
+  attributesToString,
+  toKebabCase,
+  isUpper,
+  styleToString,
+  createElement,
+  h,
+  contentsToString,
+  contentToString,
+  Fragment
+};
diff --git a/packages/html/src/jsx-dev-runtime.ts b/packages/html/src/jsx-dev-runtime.ts
new file mode 100644
index 000000000..fb0e57020
--- /dev/null
+++ b/packages/html/src/jsx-dev-runtime.ts
@@ -0,0 +1,21 @@
+import type { Children } from './index.js';
+import { jsx } from './jsx-runtime.js';
+
+export { Fragment, jsx, jsxs } from './jsx-runtime.js';
+
+/**
+ * Generates a html string from an attribute name of component and it's props.
+ *
+ * This function is meant to be used by the jsx runtime and should not be called directly.
+ *
+ * @param name The name of the element to create or another component function
+ * @param attributes The props to apply to the component
+ * @retuns The generated html string or a promise that resolves to the generated html string
+ */
+export function jsxDEV(
+  this: void,
+  name: string | Function,
+  attributes: { children?: Children; [k: string]: any }
+): JSX.Element {
+  return jsx(name, attributes);
+}
diff --git a/packages/html/src/jsx-runtime.ts b/packages/html/src/jsx-runtime.ts
new file mode 100644
index 000000000..b2ed822f3
--- /dev/null
+++ b/packages/html/src/jsx-runtime.ts
@@ -0,0 +1,97 @@
+import type { Children } from './index.js';
+import {
+  attributesToString,
+  contentsToString,
+  contentToString,
+  Fragment,
+  isVoidElement
+} from './index.js';
+
+/**
+ * Generates a html string from an attribute name of component and it's props.
+ *
+ * This function is meant to be used by the jsx runtime and should not be called directly.
+ *
+ * @param name The name of the element to create or another component function
+ * @param attributes The props to apply to the component
+ * @retuns The generated html string or a promise that resolves to the generated html string
+ */
+export function jsx(
+  this: void,
+  name: string | Function,
+  attributes: { children?: Children; [k: string]: any }
+): JSX.Element {
+  // Calls the element creator function if the name is a function
+  if (typeof name === 'function') {
+    return name(attributes);
+  }
+
+  // Switches the tag name when this custom `tag` is present.
+  if (name === 'tag') {
+    name = attributes.of as string;
+  }
+
+  const attrs = attributesToString(attributes);
+
+  if (attributes.children === undefined) {
+    return isVoidElement(name as string)
+      ? '<' + name + attrs + '/>'
+      : '<' + name + attrs + '></' + name + '>';
+  }
+
+  const contents = contentToString(attributes.children, attributes.safe);
+
+  if (contents instanceof Promise) {
+    return contents.then(function resolveContents(child) {
+      return '<' + name + attrs + '>' + child + '</' + name + '>';
+    });
+  }
+
+  return '<' + name + attrs + '>' + contents + '</' + name + '>';
+}
+
+/**
+ * Generates a html string from an attribute name of component and it's props.
+ *
+ * This function is meant to be used by the jsx runtime and should not be called directly.
+ *
+ * @param name The name of the element to create or another component function
+ * @param attributes The props to apply to the component
+ * @retuns The generated html string or a promise that resolves to the generated html string
+ */
+export function jsxs(
+  this: void,
+  name: string | Function,
+  attributes: { children: Children[]; [k: string]: any }
+): JSX.Element {
+  // Calls the element creator function if the name is a function
+  if (typeof name === 'function') {
+    return name(attributes);
+  }
+
+  // Switches the tag name when this custom `tag` is present.
+  if (name === 'tag') {
+    name = attributes.of as string;
+  }
+
+  const attrs = attributesToString(attributes);
+
+  if (attributes.children.length === 0) {
+    return isVoidElement(name as string)
+      ? '<' + name + attrs + '/>'
+      : '<' + name + attrs + '></' + name + '>';
+  }
+
+  const contents = contentsToString(attributes.children, attributes.safe);
+
+  if (contents instanceof Promise) {
+    return contents.then(function resolveContents(child) {
+      return '<' + name + attrs + '>' + child + '</' + name + '>';
+    });
+  }
+
+  return '<' + name + attrs + '>' + contents + '</' + name + '>';
+}
+
+// According to the jsx-runtime spec we must export the fragment element also
+export { Fragment };
diff --git a/packages/html/src/jsx.ts b/packages/html/src/jsx.ts
new file mode 100644
index 000000000..ebbbd4947
--- /dev/null
+++ b/packages/html/src/jsx.ts
@@ -0,0 +1,997 @@
+/** Same as a string type but allows autocompletion of literal values */
+type AnyString = string & {};
+
+declare global {
+  namespace JSX {
+    /**
+     * A {@linkcode JSX.Element} will always be a string, unless one of its children is a
+     * promise, in which case all of its subsequent children will also be promises.
+     *
+     * Direct calls of `Html.createElement` uses correct return type based on its
+     * children. However, when using JSX syntax, typescript does not support this yet.
+     *
+     * @see https://github.com/microsoft/TypeScript/issues/14729
+     */
+    type Element = string | Promise<string>;
+
+    /**
+     * The index signature was removed to enable closed typing for style using CSSType.
+     * You're able to use type assertion or module augmentation to add properties or an
+     * index signature of your own.
+     *
+     * For examples and more information, visit:
+     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
+     */
+    type CSSProperties = import('csstype').Properties;
+
+    interface HtmlTag extends ElementChildrenAttribute, IntrinsicAttributes {
+      accesskey?: undefined | string;
+      autocapitalize?:
+        | undefined
+        | 'off'
+        | 'none'
+        | 'on'
+        | 'sentences'
+        | 'words'
+        | 'characters'
+        | AnyString;
+      autocorrect?: undefined | 'on' | 'off' | AnyString;
+      contenteditable?: undefined | string;
+      enterkeyhint?:
+        | undefined
+        | 'enter'
+        | 'done'
+        | 'go'
+        | 'next'
+        | 'previous'
+        | 'search'
+        | 'send'
+        | AnyString;
+      inert?: undefined | boolean;
+      inputmode?:
+        | undefined
+        | 'none'
+        | 'text'
+        | 'decimal'
+        | 'numeric'
+        | 'tel'
+        | 'search'
+        | 'email'
+        | 'url'
+        | AnyString;
+      dir?: undefined | string;
+      hidden?: undefined | string | boolean;
+      id?: undefined | number | string;
+      nonce?: undefined | string;
+      part?: undefined | string;
+      popover?: undefined | boolean | 'auto' | 'manual';
+      role?: undefined | AriaRole;
+      lang?: undefined | string;
+      slot?: undefined | string;
+      draggable?: undefined | string | boolean;
+      spellcheck?: undefined | string | boolean;
+      tabindex?: undefined | number | string;
+      title?: undefined | string;
+      translate?: undefined | string | boolean;
+      virtualkeyboardpolicy?: undefined | 'auto' | 'manual' | AnyString;
+      writingsuggestions?: undefined | 'true' | 'false' | AnyString;
+
+      /** A css style attribute which also supports a `csstype` object. */
+      style?: undefined | string | CSSProperties;
+
+      /**
+       * When set to true, all inner content (html or not) of this tag will be escaped
+       * when evaluated.
+       *
+       * **Warning: This will escape even inner jsx tags. You should only use this in the
+       * most inner tag of the html tree.**
+       *
+       * @example
+       *
+       * ```tsx
+       * <div>{'<script />'}</div>
+       * '<div><script /></div>'
+       * <div safe>{'<script />'}</div>
+       * '<div><script /></div>'
+       * <div><div>{'<script />'}</div></div>
+       * '<div><div><script /></div></div>'
+       *
+       * // Escapes even inner jsx tags
+       * <div safe><div>{'<script />'}</div></div>
+       * '<div><div><script /></div></div>'
+       * ```
+       *
+       * @default false
+       *
+       * @see https://github.com/kitajs/html/tree/master/packages/html#sanitization
+       */
+      safe?: undefined | boolean;
+
+      /**
+       * Included here to work as a react drop-in replacement
+       *
+       * @deprecated Please use `class`.
+       */
+      className?: undefined | string;
+
+      /**
+       * The html class property. You can use an array to represent conditional class
+       * names. Similar to the `clsx` package behavior.
+       *
+       * @example
+       *
+       * ```tsx
+       * <div class={['a', true && 'b', false && 'c', 'd']} />
+       * '<div class="a b d"></div>'
+       *
+       * <div class={['class-a class-b', true && 'class-c']} />
+       * '<div class="class-a class-b class-c"></div>'
+       * ```
+       */
+      class?: undefined | string | (string | number | null | boolean | undefined)[];
+
+      /**
+       * A custom property that can be used to avoid attributes escaping and allow custom
+       * attributes syntax, such as `:` and `.` in their names.
+       *
+       * Objects are escaped normally, **strings ARE NOT escaped**.
+       *
+       * You can use a string or an object. When using a string, it will be used as the
+       * attribute value. When using an object, it will be used as a key-value map of
+       * attributes.
+       *
+       * @example
+       *
+       * ```tsx
+       * <div attrs={{ 'data-attr': 'value"' }} />
+       * '<div data-attr="value&#34;"></div>' // escapes
+       *
+       * <div attrs='a=1 b c=3 "' />
+       * '<div a=1 b c=3 "></div>' // does NOT escape
+       * ```
+       */
+      attrs?: undefined | object | string;
+    }
+
+    interface HtmlAnchorTag extends HtmlTag {
+      href?: undefined | string;
+      hreflang?: undefined | string;
+      target?: undefined | string;
+      download?: undefined | string;
+      referrerpolicy?:
+        | undefined
+        | ''
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url'
+        | AnyString;
+      ping?: undefined | string;
+      rel?: undefined | string;
+      media?: undefined | string;
+      type?: undefined | string;
+    }
+
+    interface HtmlAreaTag extends HtmlTag {
+      alt?: undefined | string;
+      coords?: undefined | string;
+      shape?: undefined | string;
+      href?: undefined | string;
+      target?: undefined | string;
+      ping?: undefined | string;
+      rel?: undefined | string;
+      media?: undefined | string;
+      hreflang?: undefined | string;
+      type?: undefined | string;
+    }
+
+    interface HtmlAudioTag extends HtmlTag {
+      src?: undefined | string;
+      autobuffer?: undefined | string;
+      autoplay?: undefined | boolean;
+      preload?: undefined | string;
+      muted?: undefined | boolean;
+      loop?: undefined | boolean;
+      controls?: undefined | string;
+    }
+
+    interface BaseTag extends HtmlTag {
+      href?: undefined | string;
+      target?: undefined | string;
+    }
+
+    interface HtmlQuoteTag extends HtmlTag {
+      cite?: undefined | string;
+    }
+
+    interface HtmlBodyTag extends HtmlTag {}
+
+    interface HtmlButtonTag extends HtmlTag {
+      action?: undefined | string;
+      autofocus?: undefined | boolean;
+      command?: undefined | string;
+      commandfor?: undefined | string;
+      disabled?: undefined | boolean;
+      enctype?: undefined | string;
+      form?: undefined | string;
+      method?: undefined | string;
+      name?: undefined | string;
+      novalidate?: undefined | string | boolean;
+      target?: undefined | string;
+      type?: undefined | string;
+      value?: undefined | string;
+      formaction?: undefined | string;
+      formenctype?: undefined | string;
+      formmethod?: undefined | string;
+      formnovalidate?: undefined | string | boolean;
+      formtarget?: undefined | string;
+      popovertarget?: undefined | string;
+      popovertargetaction?: undefined | string;
+    }
+
+    interface HtmlDataListTag extends HtmlTag {}
+
+    interface HtmlCanvasTag extends HtmlTag {
+      width?: undefined | string;
+      height?: undefined | string;
+    }
+
+    interface HtmlTableColTag extends HtmlTag {
+      span?: undefined | string;
+    }
+
+    interface HtmlTableSectionTag extends HtmlTag {}
+
+    interface HtmlTableRowTag extends HtmlTag {}
+
+    interface DataTag extends HtmlTag {
+      value?: undefined | string;
+    }
+
+    interface HtmlEmbedTag extends HtmlTag, Record<string, any> {
+      src?: undefined | string;
+      type?: undefined | string;
+      width?: undefined | string;
+      height?: undefined | string;
+    }
+
+    interface HtmlFieldSetTag extends HtmlTag {
+      disabled?: undefined | boolean;
+      form?: undefined | string;
+      name?: undefined | string;
+    }
+
+    interface HtmlFormTag extends HtmlTag {
+      'accept-charset'?: undefined | string;
+      action?: undefined | string;
+      autocomplete?: undefined | string;
+      enctype?: undefined | string;
+      method?: undefined | string;
+      name?: undefined | string;
+      novalidate?: undefined | string | boolean;
+      target?: undefined | string;
+    }
+
+    interface HtmlHtmlTag extends HtmlTag {
+      manifest?: undefined | string;
+      xmlns?: string | string;
+    }
+
+    interface HtmlIFrameTag extends HtmlTag {
+      allow?: undefined | string;
+      allowfullscreen?: undefined | boolean;
+      allowpaymentrequest?: undefined | boolean;
+      credentialless?: undefined | boolean;
+      frameborder?: undefined | number | string;
+      height?: undefined | string;
+      loading?: undefined | string;
+      name?: undefined | string;
+      referrerpolicy?:
+        | undefined
+        | ''
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url'
+        | AnyString;
+      sandbox?: undefined | boolean;
+      src?: undefined | string;
+      srcdoc?: undefined | string;
+      seamless?: undefined | string;
+      width?: undefined | string;
+    }
+
+    interface HtmlImageTag extends HtmlTag {
+      alt?: undefined | string;
+      src?: undefined | string;
+      crossorigin?: undefined | string;
+      usemap?: undefined | string;
+      ismap?: undefined | string;
+      width?: undefined | number | string;
+      height?: undefined | number | string;
+      decoding?: undefined | 'sync' | 'async' | 'auto' | AnyString;
+      loading?: undefined | 'eager' | 'lazy' | AnyString;
+      srcset?: undefined | string;
+      fetchpriority?: undefined | 'high' | 'low' | 'auto' | AnyString;
+    }
+
+    interface HtmlInputTag extends HtmlTag {
+      accept?: undefined | string;
+      action?: undefined | string;
+      alt?: undefined | string;
+      autocomplete?: undefined | string;
+      autofocus?: undefined | boolean;
+      checked?: undefined | boolean;
+      disabled?: undefined | boolean;
+      enctype?: undefined | string;
+      form?: undefined | string;
+      height?: undefined | string;
+      list?: undefined | string;
+      max?: undefined | number | string;
+      minlength?: undefined | number | string;
+      maxlength?: undefined | number | string;
+      method?: undefined | string;
+      min?: undefined | number | string;
+      multiple?: undefined | boolean;
+      name?: undefined | string;
+      novalidate?: undefined | boolean;
+      pattern?: undefined | string;
+      placeholder?: undefined | string;
+      readonly?: undefined | boolean;
+      required?: undefined | boolean;
+      size?: undefined | string;
+      src?: undefined | string;
+      step?: undefined | string;
+      target?: undefined | string;
+      type?: undefined | string;
+      value?: undefined | string;
+      width?: undefined | string;
+    }
+
+    interface HtmlModTag extends HtmlTag {
+      cite?: undefined | string;
+      datetime?: undefined | string | Date;
+    }
+
+    interface KeygenTag extends HtmlTag {
+      autofocus?: undefined | boolean;
+      challenge?: undefined | string;
+      disabled?: undefined | boolean;
+      form?: undefined | string;
+      keytype?: undefined | string;
+      name?: undefined | string;
+    }
+
+    interface HtmlLabelTag extends HtmlTag {
+      form?: undefined | string;
+      for?: undefined | string;
+    }
+
+    interface HtmlLITag extends HtmlTag {
+      value?: undefined | string | number;
+    }
+
+    interface HtmlLinkTag extends HtmlTag {
+      href?: undefined | string;
+      crossorigin?: undefined | string;
+      rel?: undefined | string;
+      as?: undefined | string;
+      media?: undefined | string;
+      hreflang?: undefined | string;
+      type?: undefined | string;
+      sizes?: undefined | string;
+      integrity?: undefined | string;
+      fetchpriority?: undefined | 'high' | 'low' | 'auto' | AnyString;
+      blocking?: undefined | 'render' | AnyString;
+    }
+
+    interface HtmlMapTag extends HtmlTag {
+      name?: undefined | string;
+    }
+
+    interface HtmlMetaTag extends HtmlTag {
+      name?: undefined | string;
+      property?: undefined | string;
+      'http-equiv'?: undefined | string;
+      content?: undefined | string;
+      charset?: undefined | string;
+    }
+
+    interface HtmlMeterTag extends HtmlTag {
+      value?: undefined | string | number;
+      min?: undefined | string | number;
+      max?: undefined | string | number;
+      low?: undefined | string | number;
+      high?: undefined | string | number;
+      optimum?: undefined | string | number;
+    }
+
+    interface HtmlObjectTag extends HtmlTag {
+      data?: undefined | string;
+      type?: undefined | string;
+      name?: undefined | string;
+      usemap?: undefined | string;
+      form?: undefined | string;
+      width?: undefined | string;
+      height?: undefined | string;
+    }
+
+    interface HtmlOListTag extends HtmlTag {
+      reversed?: undefined | string;
+      start?: undefined | string | number;
+    }
+
+    interface HtmlOptgroupTag extends HtmlTag {
+      disabled?: undefined | boolean;
+      label?: undefined | string;
+    }
+
+    interface HtmlOptionTag extends HtmlTag {
+      disabled?: undefined | boolean;
+      label?: undefined | string;
+      selected?: undefined | boolean;
+      value?: undefined | string;
+    }
+
+    interface HtmlOutputTag extends HtmlTag {
+      for?: undefined | string;
+      form?: undefined | string;
+      name?: undefined | string;
+    }
+
+    interface HtmlParamTag extends HtmlTag {
+      name?: undefined | string;
+      value?: undefined | string;
+    }
+
+    interface HtmlPictureTag extends HtmlTag {}
+
+    interface HtmlProgressTag extends HtmlTag {
+      value?: undefined | string | number;
+      max?: undefined | string | number;
+    }
+
+    interface HtmlCommandTag extends HtmlTag {
+      type?: undefined | string;
+      label?: undefined | string;
+      icon?: undefined | string;
+      disabled?: undefined | boolean;
+      checked?: undefined | string;
+      radiogroup?: undefined | string;
+      default?: undefined | string;
+    }
+
+    interface HtmlLegendTag extends HtmlTag {}
+
+    interface HtmlBrowserButtonTag extends HtmlTag {
+      type?: undefined | string;
+    }
+
+    interface HtmlMenuTag extends HtmlTag {
+      type?: undefined | string;
+      label?: undefined | string;
+    }
+
+    interface HtmlScriptTag extends HtmlTag {
+      src?: undefined | string;
+      type?: undefined | string;
+      charset?: undefined | string;
+      async?: undefined | boolean;
+      defer?: undefined | boolean;
+      crossorigin?: undefined | string;
+      integrity?: undefined | string;
+      text?: undefined | string;
+      fetchpriority?: undefined | 'high' | 'low' | 'auto' | AnyString;
+      blocking?: undefined | 'render' | AnyString;
+    }
+
+    interface HtmlDetailsTag extends HtmlTag {
+      open?: undefined | boolean;
+      name?: undefined | string;
+    }
+
+    interface HtmlDialogTag extends HtmlTag {
+      open?: undefined | boolean;
+      onclose?: undefined | string;
+    }
+
+    interface HtmlSelectTag extends HtmlTag, FormEvents {
+      autofocus?: undefined | boolean;
+      disabled?: undefined | boolean;
+      form?: undefined | string;
+      multiple?: undefined | string;
+      name?: undefined | string;
+      required?: undefined | boolean;
+      size?: undefined | string;
+      autocomplete?: undefined | string;
+    }
+
+    interface HtmlSourceTag extends HtmlTag {
+      src?: undefined | string;
+      srcset?: undefined | string;
+      type?: undefined | string;
+      media?: undefined | string;
+    }
+
+    interface HtmlStyleTag extends HtmlTag {
+      media?: undefined | string;
+      type?: undefined | string;
+      disabled?: undefined | boolean;
+      scoped?: undefined | string;
+      blocking?: undefined | 'render' | AnyString;
+    }
+
+    interface HtmlTableTag extends HtmlTag {
+      align?: undefined | 'left' | 'center' | 'right';
+      /** @deprecated */
+      bgcolor?: undefined | string;
+      border?: undefined | number;
+      cellpadding?: undefined | number | string;
+      cellspacing?: undefined | number | string;
+      width?: undefined | number | string;
+    }
+
+    interface HtmlTableDataCellTag extends HtmlTag {
+      align?: undefined | 'left' | 'center' | 'right';
+      colspan?: undefined | string | number;
+      rowspan?: undefined | string | number;
+      headers?: undefined | string;
+      /** @deprecated */
+      valign?: undefined | 'top' | 'middle' | 'bottom' | 'baseline';
+    }
+
+    interface HtmlTextAreaTag extends HtmlTag {
+      autofocus?: undefined | boolean;
+      cols?: undefined | string;
+      dirname?: undefined | string;
+      disabled?: undefined | boolean;
+      form?: undefined | string;
+      maxlength?: undefined | number | string;
+      minlength?: undefined | number | string;
+      name?: undefined | string;
+      placeholder?: undefined | string;
+      readonly?: undefined | boolean;
+      required?: undefined | boolean;
+      rows?: undefined | string;
+      wrap?: undefined | string;
+    }
+
+    interface HtmlTableHeaderCellTag extends HtmlTag {
+      colspan?: undefined | string | number;
+      rowspan?: undefined | string | number;
+      headers?: undefined | string;
+      scope?: undefined | string;
+      /** @deprecated */
+      valign?: undefined | 'top' | 'middle' | 'bottom' | 'baseline';
+      width?: undefined | number | string;
+    }
+
+    interface HtmlTimeTag extends HtmlTag {
+      datetime?: undefined | string | Date;
+    }
+
+    interface HtmlTrackTag extends HtmlTag {
+      default?: undefined | string;
+      kind?: undefined | string;
+      label?: undefined | string;
+      src?: undefined | string;
+      srclang?: undefined | string;
+    }
+
+    interface HtmlVideoTag extends HtmlTag {
+      src?: undefined | string;
+      poster?: undefined | string;
+      autobuffer?: undefined | string;
+      autoplay?: undefined | boolean;
+      loop?: undefined | boolean;
+      muted?: undefined | boolean;
+      controls?: undefined | boolean;
+      width?: undefined | string;
+      height?: undefined | string;
+    }
+
+    // We allow any attributes on svg because its hard to keep track of them all.
+    interface HtmlSvgTag extends HtmlTag, Record<string, any> {}
+
+    interface HtmlSearchTag extends HtmlTag {}
+
+    interface HtmlSlotTag extends HtmlTag {
+      name?: undefined | string;
+    }
+
+    interface HtmlFencedFrameTag extends HtmlTag {
+      allow?: undefined | string;
+      height?: undefined | number | string;
+      width?: undefined | number | string;
+    }
+
+    interface HtmlUnspecifiedTag extends HtmlTag, Record<string, any> {
+      of: string;
+    }
+
+    interface HtmlBodyTag {
+      onafterprint?: undefined | string;
+      onbeforeprint?: undefined | string;
+      onbeforeonload?: undefined | string;
+      onblur?: undefined | string;
+      onerror?: undefined | string;
+      onfocus?: undefined | string;
+      onhaschange?: undefined | string;
+      onload?: undefined | string;
+      onmessage?: undefined | string;
+      onoffline?: undefined | string;
+      ononline?: undefined | string;
+      onpagehide?: undefined | string;
+      onpageshow?: undefined | string;
+      onpopstate?: undefined | string;
+      onredo?: undefined | string;
+      onresize?: undefined | string;
+      onstorage?: undefined | string;
+      onundo?: undefined | string;
+      onunload?: undefined | string;
+    }
+
+    interface HtmlTag {
+      oncontextmenu?: undefined | string;
+      onkeydown?: undefined | string;
+      onkeypress?: undefined | string;
+      onkeyup?: undefined | string;
+      onclick?: undefined | string;
+      ondblclick?: undefined | string;
+      ondrag?: undefined | string;
+      ondragend?: undefined | string;
+      ondragenter?: undefined | string;
+      ondragleave?: undefined | string;
+      ondragover?: undefined | string;
+      ondragstart?: undefined | string;
+      ondrop?: undefined | string;
+      onmousedown?: undefined | string;
+      onmousemove?: undefined | string;
+      onmouseout?: undefined | string;
+      onmouseover?: undefined | string;
+      onmouseup?: undefined | string;
+      onmousewheel?: undefined | string;
+      onscroll?: undefined | string;
+    }
+
+    interface FormEvents {
+      onblur?: undefined | string;
+      onchange?: undefined | string;
+      onfocus?: undefined | string;
+      onformchange?: undefined | string;
+      onforminput?: undefined | string;
+      oninput?: undefined | string;
+      oninvalid?: undefined | string;
+      onselect?: undefined | string;
+      onsubmit?: undefined | string;
+    }
+
+    interface HtmlInputTag extends FormEvents {}
+
+    interface HtmlFieldSetTag extends FormEvents {}
+
+    interface HtmlFormTag extends FormEvents {}
+
+    interface MediaEvents {
+      onabort?: undefined | string;
+      oncanplay?: undefined | string;
+      oncanplaythrough?: undefined | string;
+      ondurationchange?: undefined | string;
+      onemptied?: undefined | string;
+      onended?: undefined | string;
+      onerror?: undefined | string;
+      onloadeddata?: undefined | string;
+      onloadedmetadata?: undefined | string;
+      onloadstart?: undefined | string;
+      onpause?: undefined | string;
+      onplay?: undefined | string;
+      onplaying?: undefined | string;
+      onprogress?: undefined | string;
+      onratechange?: undefined | string;
+      onreadystatechange?: undefined | string;
+      onseeked?: undefined | string;
+      onseeking?: undefined | string;
+      onstalled?: undefined | string;
+      onsuspend?: undefined | string;
+      ontimeupdate?: undefined | string;
+      onvolumechange?: undefined | string;
+      onwaiting?: undefined | string;
+    }
+
+    interface HtmlAudioTag extends MediaEvents {}
+
+    interface HtmlEmbedTag extends MediaEvents {}
+
+    interface HtmlImageTag extends MediaEvents {
+      border?: undefined | number;
+    }
+
+    interface HtmlObjectTag extends MediaEvents {}
+
+    interface HtmlVideoTag extends MediaEvents {}
+
+    interface IntrinsicAttributes {
+      /**
+       * In `react-jsx`, the `'key'` attribute serves as a reserved attribute name.
+       * Consequently, the `'key'` attribute is not included in the properties parameter
+       * of any component or element.
+       *
+       * **If you intend to utilize a similar property, please opt for an alternate
+       * name.**
+       *
+       * @see https://github.com/reactjs/rfcs/pull/107
+       */
+      key?: undefined | never;
+    }
+
+    interface ElementChildrenAttribute {
+      children?: undefined | import('./index.js').Children;
+    }
+
+    interface IntrinsicElements {
+      a: HtmlAnchorTag;
+      abbr: HtmlTag;
+      address: HtmlTag;
+      animate: HtmlSvgTag;
+      animateMotion: HtmlSvgTag;
+      animateTransform: HtmlSvgTag;
+      area: HtmlAreaTag;
+      article: HtmlTag;
+      aside: HtmlTag;
+      audio: HtmlAudioTag;
+      b: HtmlTag;
+      base: BaseTag;
+      bb: HtmlBrowserButtonTag;
+      bdi: HtmlTag;
+      bdo: HtmlTag;
+      blockquote: HtmlQuoteTag;
+      body: HtmlBodyTag;
+      br: HtmlTag;
+      button: HtmlButtonTag;
+      canvas: HtmlCanvasTag;
+      caption: HtmlTag;
+      circle: HtmlSvgTag;
+      cite: HtmlTag;
+      clipPath: HtmlSvgTag;
+      code: HtmlTag;
+      col: HtmlTableColTag;
+      colgroup: HtmlTableColTag;
+      commands: HtmlCommandTag;
+      data: DataTag;
+      datalist: HtmlDataListTag;
+      dd: HtmlTag;
+      defs: HtmlSvgTag;
+      del: HtmlModTag;
+      desc: HtmlSvgTag;
+      details: HtmlDetailsTag;
+      dfn: HtmlTag;
+      dialog: HtmlDialogTag;
+      div: HtmlTag;
+      dl: HtmlTag;
+      dt: HtmlTag;
+      ellipse: HtmlSvgTag;
+      em: HtmlTag;
+      embed: HtmlEmbedTag;
+      feBlend: HtmlSvgTag;
+      feColorMatrix: HtmlSvgTag;
+      feComponentTransfer: HtmlSvgTag;
+      feComposite: HtmlSvgTag;
+      feConvolveMatrix: HtmlSvgTag;
+      feDiffuseLighting: HtmlSvgTag;
+      feDisplacementMap: HtmlSvgTag;
+      feDistantLight: HtmlSvgTag;
+      feDropShadow: HtmlSvgTag;
+      feFlood: HtmlSvgTag;
+      feFuncA: HtmlSvgTag;
+      feFuncB: HtmlSvgTag;
+      feFuncG: HtmlSvgTag;
+      feFuncR: HtmlSvgTag;
+      feGaussianBlur: HtmlSvgTag;
+      feImage: HtmlSvgTag;
+      feMerge: HtmlSvgTag;
+      feMergeNode: HtmlSvgTag;
+      feMorphology: HtmlSvgTag;
+      feOffset: HtmlSvgTag;
+      fePointLight: HtmlSvgTag;
+      feSpecularLighting: HtmlSvgTag;
+      feSpotLight: HtmlSvgTag;
+      feTile: HtmlSvgTag;
+      feTurbulence: HtmlSvgTag;
+      fencedframe: HtmlFencedFrameTag;
+      fieldset: HtmlFieldSetTag;
+      figcaption: HtmlTag;
+      figure: HtmlTag;
+      filter: HtmlSvgTag;
+      footer: HtmlTag;
+      foreignObject: HtmlSvgTag;
+      form: HtmlFormTag;
+      g: HtmlSvgTag;
+      h1: HtmlTag;
+      h2: HtmlTag;
+      h3: HtmlTag;
+      h4: HtmlTag;
+      h5: HtmlTag;
+      h6: HtmlTag;
+      head: HtmlTag;
+      header: HtmlTag;
+      hgroup: HtmlTag;
+      hr: HtmlTag;
+      html: HtmlHtmlTag;
+      i: HtmlTag;
+      iframe: HtmlIFrameTag;
+      image: HtmlSvgTag;
+      img: HtmlImageTag;
+      input: HtmlInputTag;
+      ins: HtmlModTag;
+      kbd: HtmlTag;
+      keygen: KeygenTag;
+      label: HtmlLabelTag;
+      legend: HtmlLegendTag;
+      li: HtmlLITag;
+      line: HtmlSvgTag;
+      linearGradient: HtmlSvgTag;
+      link: HtmlLinkTag;
+      main: HtmlTag;
+      map: HtmlMapTag;
+      mark: HtmlTag;
+      marker: HtmlSvgTag;
+      mask: HtmlSvgTag;
+      menu: HtmlMenuTag;
+      meta: HtmlMetaTag;
+      metadata: HtmlSvgTag;
+      meter: HtmlMeterTag;
+      mpath: HtmlSvgTag;
+      nav: HtmlTag;
+      noscript: HtmlTag;
+      object: HtmlObjectTag;
+      ol: HtmlOListTag;
+      optgroup: HtmlOptgroupTag;
+      option: HtmlOptionTag;
+      output: HtmlOutputTag;
+      p: HtmlTag;
+      param: HtmlParamTag;
+      path: HtmlSvgTag;
+      pattern: HtmlSvgTag;
+      picture: HtmlPictureTag;
+      polygon: HtmlSvgTag;
+      polyline: HtmlSvgTag;
+      pre: HtmlTag;
+      progress: HtmlProgressTag;
+      q: HtmlQuoteTag;
+      radialGradient: HtmlSvgTag;
+      rb: HtmlTag;
+      rect: HtmlSvgTag;
+      rp: HtmlTag;
+      rt: HtmlTag;
+      rtc: HtmlTag;
+      ruby: HtmlTag;
+      s: HtmlTag;
+      samp: HtmlTag;
+      slot: HtmlSlotTag;
+      script: HtmlScriptTag;
+      search: HtmlSearchTag;
+      section: HtmlTag;
+      select: HtmlSelectTag;
+      set: HtmlSvgTag;
+      small: HtmlTag;
+      source: HtmlSourceTag;
+      span: HtmlTag;
+      stop: HtmlSvgTag;
+      strong: HtmlTag;
+      style: HtmlStyleTag;
+      sub: HtmlTag;
+      summary: HtmlTag;
+      sup: HtmlTag;
+      svg: HtmlSvgTag;
+      switch: HtmlSvgTag;
+      symbol: HtmlSvgTag;
+      table: HtmlTableTag;
+      tag: HtmlUnspecifiedTag;
+      tbody: HtmlTag;
+      td: HtmlTableDataCellTag;
+      template: HtmlTag;
+      text: HtmlSvgTag;
+      textarea: HtmlTextAreaTag;
+      textPath: HtmlSvgTag;
+      tfoot: HtmlTableSectionTag;
+      th: HtmlTableHeaderCellTag;
+      thead: HtmlTableSectionTag;
+      time: HtmlTimeTag;
+      title: HtmlTag;
+      tr: HtmlTableRowTag;
+      track: HtmlTrackTag;
+      tspan: HtmlSvgTag;
+      u: HtmlTag;
+      ul: HtmlTag;
+      use: HtmlSvgTag;
+      var: HtmlTag;
+      video: HtmlVideoTag;
+      view: HtmlSvgTag;
+      wbr: HtmlTag;
+    }
+  }
+}
+
+// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
+type AriaRole =
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'gridcell'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listbox'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'search'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'textbox'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem'
+  | (string & {});
+
+// Export empty object to make this a module
+export {};
diff --git a/packages/html/suspense.js b/packages/html/src/suspense.ts
similarity index 58%
rename from packages/html/suspense.js
rename to packages/html/src/suspense.ts
index 7c0a39ddb..ab1ca3323 100644
--- a/packages/html/suspense.js
+++ b/packages/html/src/suspense.ts
@@ -1,11 +1,88 @@
-const { contentsToString, contentToString } = require('./index');
-const { Readable, PassThrough } = require('node:stream');
+import { PassThrough, Readable } from 'node:stream';
+import type { Children } from './index.js';
+import { contentsToString, contentToString } from './index.js';
+
+declare global {
+  /**
+   * The `SUSPENSE_ROOT` is a global object that holds the state of all the suspense
+   * components rendered in the server.
+   */
+  var SUSPENSE_ROOT: {
+    /**
+     * The requests map is a map of RequestId x SuspenseData containing the stream to
+     * write the HTML, the number of running promises and if the first suspense has
+     * already resolved.
+     */
+    requests: Map<number | string, RequestData>;
+
+    /**
+     * This value is used (and incremented shortly after) when no requestId is provided
+     * for {@linkcode renderToStream}
+     *
+     * @default 1
+     */
+    requestCounter: number;
+
+    /**
+     * If we should automatically stream {@linkcode SuspenseScript} before the first
+     * suspense is rendered. If you disable this setting, you need to manually load the
+     * {@linkcode SuspenseScript} in your HTML before any suspense is rendered. Otherwise,
+     * the suspense will not work.
+     *
+     * @default true
+     */
+    autoScript: boolean;
+  };
+}
+
+/** Everything a suspense needs to know about its request lifecycle. */
+export type RequestData = {
+  /** If the first suspense has already resolved */
+  sent: boolean;
+
+  /** How many are still running */
+  running: number;
+
+  /**
+   * The stream we should write
+   *
+   * WeakRef requires ES2021 typings (node 14+) to be installed.
+   */
+  stream: Readable;
+};
+
+/**
+ * The props for the `Suspense` component.
+ *
+ * @see {@linkcode Suspense}
+ */
+export interface SuspenseProps {
+  /** The request id is used to identify the request for this suspense. */
+  rid: number | string;
+
+  /** The fallback to render while the async children are loading. */
+  fallback: JSX.Element;
+
+  /** The async children to render as soon as they are ready. */
+  children: Children;
+
+  /**
+   * This error boundary is used to catch any error thrown by an async component and
+   * streams its fallback instead.
+   *
+   * ### Undefined behaviors happens on each browser kind when the html stream is unexpected closed by the server if an error is thrown. You should always define an error boundary to catch errors.
+   *
+   * This does not catches for errors thrown by the suspense itself or async fallback
+   * components. Please use {@linkcode ErrorBoundary} to catch them instead.
+   */
+  catch?: JSX.Element | ((error: unknown) => JSX.Element);
+}
 
 // Avoids double initialization in case this file is not cached by
 // module bundlers.
 if (!globalThis.SUSPENSE_ROOT) {
   /* global SUSPENSE_ROOT */
-  globalThis.SUSPENSE_ROOT = {
+  globalThis.SUSPENSE_ROOT ??= {
     requests: new Map(),
     requestCounter: 1,
     autoScript: true
@@ -25,7 +102,13 @@ function noop() {}
 // Pending data-sr elements are kept pending if their fallback has not yet been
 // rendered, on each render a try to switch all pending data-sr is attempted until
 // no elements are substituted.
-const SuspenseScript = /* html */ `
+/**
+ * This script needs to be loaded at the top of the page. You do not need to load it
+ * manually, unless GLOBAL_SUSPENSE.autoScript is set to false.
+ *
+ * @see {@linkcode Suspense}
+ */
+export const SuspenseScript = /* html */ `
       <script id="kita-html-suspense">
         /*! MIT License https://kita.js.org */
         function $KITA_RC(i){
@@ -60,7 +143,7 @@ const SuspenseScript = /* html */ `
               // resets j & c from previous loop
               c=j=0;
 
-              // loops over every found pending template and 
+              // loops over every found pending template and
               for(;c<r.length;c++)
                 if(r[c]!=t)
                   // let j as true while at least on $KITA_RC call returns true
@@ -78,8 +161,17 @@ const SuspenseScript = /* html */ `
   // Removes line breaks added for readability
   .replace(/\n\s*/g, '');
 
-/** @type {import('./suspense').Suspense} */
-function Suspense(props) {
+/**
+ * A component that returns a fallback while the async children are loading.
+ *
+ * The `rid` prop is the one {@linkcode renderToStream} returns, this way the suspense
+ * knows which request it belongs to.
+ *
+ * **Warning**: Using `Suspense` without any type of runtime support will _**LEAK
+ * memory**_ and not work. Always use with `renderToStream` or within a framework that
+ * supports it.
+ */
+export function Suspense(props: SuspenseProps): JSX.Element {
   const children = Array.isArray(props.children)
     ? contentsToString(props.children)
     : contentToString(props.children);
@@ -140,7 +232,7 @@ function Suspense(props) {
       return html.then(writeStreamTemplate);
     })
     .catch(function writeFatalError(error) {
-      data.stream.emit('error', error);
+      data!.stream.emit('error', error);
     })
     .finally(function clearRequestData() {
       // reduces current suspense id
@@ -174,9 +266,9 @@ function Suspense(props) {
   /**
    * This function may be called by the catch handler in case the error could be handled.
    *
-   * @param {string} result
+   * @param result
    */
-  function writeStreamTemplate(result) {
+  function writeStreamTemplate(result: string) {
     if (
       // Ensures the stream is still open (.closed may not be already defined at this point)
       !SUSPENSE_ROOT.requests.has(props.rid) ||
@@ -204,8 +296,37 @@ function Suspense(props) {
   }
 }
 
-/** @type {import('./suspense').renderToStream} */
-function renderToStream(html, rid) {
+/**
+ * Transforms a component tree who may contain `Suspense` components into a stream of
+ * HTML.
+ *
+ * @example
+ *
+ * ```tsx
+ * import { text} from 'node:stream/consumers';
+ *
+ * // Prints out the rendered stream (2nd example shows with a custom id)
+ * const stream = renderToStream(r => <AppWithSuspense rid={r} />)
+ * const stream = renderToStream(<AppWithSuspense rid={myCustomId} />, myCustomId)
+ *
+ * // You can consume it as a stream
+ * for await (const html of stream) {
+ *  console.log(html.toString())
+ * }
+ *
+ * // Or join it all together (Wastes ALL Suspense benefits, but useful for testing)
+ * console.log(await text(stream))
+ * ```
+ *
+ * @param html The component tree to render or a function that returns the component tree.
+ * @param rid The request id to identify the request, if not provided, a new incrementing
+ *   id will be used.
+ * @see {@linkcode Suspense}
+ */
+export function renderToStream(
+  html: JSX.Element | ((rid: number | string) => JSX.Element),
+  rid?: number | string
+): Readable {
   if (!rid) {
     rid = SUSPENSE_ROOT.requestCounter++;
   } else if (SUSPENSE_ROOT.requests.has(rid)) {
@@ -265,8 +386,36 @@ function renderToStream(html, rid) {
   return resolveHtmlStream(html, requestData);
 }
 
-/** @type {import('./suspense').resolveHtmlStream} */
-function resolveHtmlStream(template, requestData) {
+/**
+ * Joins the html base template (with possible suspense's fallbacks) with the request data
+ * and returns the final Readable to be piped into the response stream.
+ *
+ * **This API is meant to be used by library authors and should not be used directly.**
+ *
+ * @example
+ *
+ * ```tsx
+ * const html = <RootLayout rid={rid} />
+ * const requestData = SUSPENSE_ROOT.requests.get(rid);
+ *
+ * if(!requestData) {
+ *   return html;
+ * }
+ *
+ * // This prepends the html into the stream, handling possible
+ * // cases where the html resolved after one of its async children
+ * return resolveHtmlStream(html, requestData)
+ * ```
+ *
+ * @param fallback The fallback to render while the async children are loading.
+ * @param stream The stream to write the fallback into.
+ * @returns The same stream or another one with the fallback prepended.
+ * @see {@linkcode renderToStream}
+ */
+export function resolveHtmlStream(
+  template: JSX.Element,
+  requestData: RequestData
+): Readable {
   // Impossible to sync templates have their
   // streams being written (sent = true) before the fallback
   if (typeof template === 'string') {
@@ -288,8 +437,3 @@ function resolveHtmlStream(template, requestData) {
 
   return prepended;
 }
-
-exports.Suspense = Suspense;
-exports.renderToStream = renderToStream;
-exports.resolveHtmlStream = resolveHtmlStream;
-exports.SuspenseScript = SuspenseScript;
diff --git a/packages/html/suspense.d.ts b/packages/html/suspense.d.ts
deleted file mode 100644
index 8e7256927..000000000
--- a/packages/html/suspense.d.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import type { Readable } from 'node:stream';
-import type { Children } from './';
-
-declare global {
-  /**
-   * The `SUSPENSE_ROOT` is a global object that holds the state of all the suspense
-   * components rendered in the server.
-   */
-  var SUSPENSE_ROOT: {
-    /**
-     * The requests map is a map of RequestId x SuspenseData containing the stream to
-     * write the HTML, the number of running promises and if the first suspense has
-     * already resolved.
-     */
-    requests: Map<number | string, RequestData>;
-
-    /**
-     * This value is used (and incremented shortly after) when no requestId is provided
-     * for {@linkcode renderToStream}
-     *
-     * @default 1
-     */
-    requestCounter: number;
-
-    /**
-     * If we should automatically stream {@linkcode SuspenseScript} before the first
-     * suspense is rendered. If you disable this setting, you need to manually load the
-     * {@linkcode SuspenseScript} in your HTML before any suspense is rendered. Otherwise,
-     * the suspense will not work.
-     *
-     * @default true
-     */
-    autoScript: boolean;
-  };
-}
-
-/** Everything a suspense needs to know about its request lifecycle. */
-export type RequestData = {
-  /** If the first suspense has already resolved */
-  sent: boolean;
-
-  /** How many are still running */
-  running: number;
-
-  /**
-   * The stream we should write
-   *
-   * WeakRef requires ES2021 typings (node 14+) to be installed.
-   */
-  stream: Readable;
-};
-
-/**
- * A component that returns a fallback while the async children are loading.
- *
- * The `rid` prop is the one {@linkcode renderToStream} returns, this way the suspense
- * knows which request it belongs to.
- *
- * **Warning**: Using `Suspense` without any type of runtime support will _**LEAK
- * memory**_ and not work. Always use with `renderToStream` or within a framework that
- * supports it.
- */
-export function Suspense(props: SuspenseProps): JSX.Element;
-
-/**
- * Transforms a component tree who may contain `Suspense` components into a stream of
- * HTML.
- *
- * @example
- *
- * ```tsx
- * import { text} from 'node:stream/consumers';
- *
- * // Prints out the rendered stream (2nd example shows with a custom id)
- * const stream = renderToStream(r => <AppWithSuspense rid={r} />)
- * const stream = renderToStream(<AppWithSuspense rid={myCustomId} />, myCustomId)
- *
- * // You can consume it as a stream
- * for await (const html of stream) {
- *  console.log(html.toString())
- * }
- *
- * // Or join it all together (Wastes ALL Suspense benefits, but useful for testing)
- * console.log(await text(stream))
- * ```
- *
- * @param html The component tree to render or a function that returns the component tree.
- * @param rid The request id to identify the request, if not provided, a new incrementing
- *   id will be used.
- * @see {@linkcode Suspense}
- */
-export function renderToStream(
-  html: JSX.Element | ((rid: number | string) => JSX.Element),
-  rid?: number | string
-): Readable;
-
-/**
- * Joins the html base template (with possible suspense's fallbacks) with the request data
- * and returns the final Readable to be piped into the response stream.
- *
- * **This API is meant to be used by library authors and should not be used directly.**
- *
- * @example
- *
- * ```tsx
- * const html = <RootLayout rid={rid} />
- * const requestData = SUSPENSE_ROOT.requests.get(rid);
- *
- * if(!requestData) {
- *   return html;
- * }
- *
- * // This prepends the html into the stream, handling possible
- * // cases where the html resolved after one of its async children
- * return resolveHtmlStream(html, requestData)
- * ```
- *
- * @param fallback The fallback to render while the async children are loading.
- * @param stream The stream to write the fallback into.
- * @returns The same stream or another one with the fallback prepended.
- * @see {@linkcode renderToStream}
- */
-export function resolveHtmlStream(template: JSX.Element, data: RequestData): Readable;
-
-/**
- * This script needs to be loaded at the top of the page. You do not need to load it
- * manually, unless GLOBAL_SUSPENSE.autoScript is set to false.
- *
- * @see {@linkcode Suspense}
- */
-export declare const SuspenseScript: string;
-
-/**
- * The props for the `Suspense` component.
- *
- * @see {@linkcode Suspense}
- */
-export interface SuspenseProps {
-  /** The request id is used to identify the request for this suspense. */
-  rid: number | string;
-
-  /** The fallback to render while the async children are loading. */
-  fallback: JSX.Element;
-
-  /** The async children to render as soon as they are ready. */
-  children: Children;
-
-  /**
-   * This error boundary is used to catch any error thrown by an async component and
-   * streams its fallback instead.
-   *
-   * ### Undefined behaviors happens on each browser kind when the html stream is unexpected closed by the server if an error is thrown. You should always define an error boundary to catch errors.
-   *
-   * This does not catches for errors thrown by the suspense itself or async fallback
-   * components. Please use {@linkcode ErrorBoundary} to catch them instead.
-   */
-  catch?: JSX.Element | ((error: unknown) => JSX.Element);
-}
diff --git a/packages/html/test/async.test.tsx b/packages/html/test/async.test.tsx
index a46281126..abf8e0926 100644
--- a/packages/html/test/async.test.tsx
+++ b/packages/html/test/async.test.tsx
@@ -1,7 +1,6 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
 import { setImmediate } from 'node:timers/promises';
-import Html from '../index';
+import { describe, expect, test } from 'vitest';
+import * as Html from '../src/index.js';
 
 async function Async(props: Html.PropsWithChildren) {
   await setImmediate(); // simple way to ensure async-ness
@@ -14,9 +13,9 @@ function Sync(props: Html.PropsWithChildren) {
 
 describe('Async components', () => {
   test('Components', async () => {
-    assert(<Sync>{1}</Sync>, '<div>1</div>');
-    assert.ok(<Async>{1}</Async> instanceof Promise);
-    assert(await (<Async>{1}</Async>), '<div>1</div>');
+    expect(<Sync>{1}</Sync>).toBeTruthy();
+    expect(<Async>{1}</Async> instanceof Promise).toBeTruthy();
+    expect(await (<Async>{1}</Async>)).toBeTruthy();
   });
 
   test('Child', async () => {
@@ -26,8 +25,8 @@ describe('Async components', () => {
       </Sync>
     );
 
-    assert.ok(html instanceof Promise);
-    assert(await html, '<div>1</div>');
+    expect(html instanceof Promise).toBeTruthy();
+    expect(await html).toBeTruthy();
   });
 
   test('Children', async () => {
@@ -42,7 +41,7 @@ describe('Async components', () => {
       </div>
     );
 
-    assert.ok(html instanceof Promise);
-    assert(await html, '<div>1234</div>');
+    expect(html instanceof Promise).toBeTruthy();
+    expect(await html).toBeTruthy();
   });
 });
diff --git a/packages/html/test/attributes.test.tsx b/packages/html/test/attributes.test.tsx
index e4e28d40e..3e35863cb 100644
--- a/packages/html/test/attributes.test.tsx
+++ b/packages/html/test/attributes.test.tsx
@@ -1,131 +1,138 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
+import { describe, expect, test } from 'vitest';
 
 describe('Attributes', () => {
   test('Numbers', () => {
-    assert.equal(
-      '<ol start="1"><li value="2">2</li></ol>',
+    expect(
       <ol start={1}>
         <li value={2}>2</li>
       </ol>
-    );
+    ).toMatchInlineSnapshot(`"<ol start="1"><li value="2">2</li></ol>"`);
 
-    assert.equal(
-      '<meter value="2" min="1" max="3" low="0" high="5" optimum="3"></meter>',
+    expect(
       <meter value={2} min={1} max={3} low={0} high={5} optimum={3}></meter>
+    ).toMatchInlineSnapshot(
+      `"<meter value="2" min="1" max="3" low="0" high="5" optimum="3"></meter>"`
     );
 
-    assert.equal(
-      '<progress value="2" max="5"></progress>',
-      <progress value={2} max={5}></progress>
+    expect(<progress value={2} max={5}></progress>).toMatchInlineSnapshot(
+      `"<progress value="2" max="5"></progress>"`
     );
 
-    assert.equal('<td colspan="2" rowspan="5"></td>', <td colspan={2} rowspan={5}></td>);
+    expect(<td colspan={2} rowspan={5}></td>).toMatchInlineSnapshot(
+      `"<td colspan="2" rowspan="5"></td>"`
+    );
 
-    assert.equal('<th colspan="2" rowspan="5"></th>', <th colspan={2} rowspan={5}></th>);
+    expect(<th colspan={2} rowspan={5}></th>).toMatchInlineSnapshot(
+      `"<th colspan="2" rowspan="5"></th>"`
+    );
   });
 
   test('Booleans', () => {
     // https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
-    assert.equal('<input checked/>', <input checked={true}></input>);
+    expect(<input checked={true}></input>).toMatchInlineSnapshot(`"<input checked/>"`);
 
-    assert.equal('<input/>', <input checked={false}></input>);
+    expect(<input checked={false}></input>).toMatchInlineSnapshot(`"<input/>"`);
 
-    assert.equal('<input disabled/>', <input disabled={true}></input>);
+    expect(<input disabled={true}></input>).toMatchInlineSnapshot(`"<input disabled/>"`);
 
-    assert.equal('<input/>', <input disabled={false}></input>);
+    expect(<input disabled={false}></input>).toMatchInlineSnapshot(`"<input/>"`);
 
-    assert.equal(
-      '<p draggable spellcheck hidden translate></p>',
-      <p draggable spellcheck hidden translate></p>
+    expect(<p draggable spellcheck hidden translate></p>).toMatchInlineSnapshot(
+      `"<p draggable spellcheck hidden translate></p>"`
     );
 
-    assert.equal(
-      '<p></p>',
+    expect(
       <p draggable={false} spellcheck={false} hidden={false} translate={false}></p>
-    );
+    ).toMatchInlineSnapshot(`"<p></p>"`);
 
-    assert.equal('<form novalidate></form>', <form novalidate></form>);
+    expect(<form novalidate></form>).toMatchInlineSnapshot(`"<form novalidate></form>"`);
   });
 
   test('Undefined', () => {
-    assert.equal(
-      '<div></div>',
+    expect(
       <div hidden={undefined} translate={undefined}>
         {undefined}
       </div>
-    );
+    ).toMatchInlineSnapshot(`"<div></div>"`);
   });
 
   test('Dates & Objects', () => {
     const date = new Date();
-    assert.equal(<del datetime={date} />, `<del datetime="${date.toISOString()}"></del>`);
+    expect(<del datetime={date} />).toMatchInlineSnapshot(
+      `<del datetime="${date.toISOString()}"></del>`
+    );
 
-    assert.equal(<div test={{}}></div>, '<div test="[object Object]"></div>');
+    //@ts-expect-error - testing object attribute
+    expect(<div test={{}}></div>).toMatchInlineSnapshot(
+      `"<div test="[object Object]"></div>"`
+    );
   });
 
   test('Popover', () => {
-    assert.equal('<div popover="auto"></div>', <div popover="auto"></div>);
-    assert.equal('<div popover="manual"></div>', <div popover="manual"></div>);
+    expect(<div popover="auto"></div>).toMatchInlineSnapshot(
+      `"<div popover="auto"></div>"`
+    );
+    expect(<div popover="manual"></div>).toMatchInlineSnapshot(
+      `"<div popover="manual"></div>"`
+    );
 
-    assert.equal('<div popover></div>', <div popover></div>);
+    expect(<div popover></div>).toMatchInlineSnapshot(`"<div popover></div>"`);
   });
 
   test('class arrays', () => {
-    assert.equal(<div class="name" />, '<div class="name"></div>');
-    assert.equal(<div class={['name']} />, '<div class="name"></div>');
+    expect(<div class="name" />).toMatchInlineSnapshot(`"<div class="name"></div>"`);
+    expect(<div class={['name']} />).toMatchInlineSnapshot(`"<div class="name"></div>"`);
     //@ts-expect-error - This kind of expression is always falsy.
-    assert.equal(<div class={['' && 'name']} />, '<div></div>');
+    expect(<div class={['' && 'name']} />).toMatchInlineSnapshot(`"<div></div>"`);
 
-    assert.equal(
+    expect(
       //@ts-expect-error - This kind of expression is always falsy.
-      <div class={[false && 'a', 'name', null && 'b', 0 && 'c']} />,
-      '<div class="name"></div>'
-    );
+      <div class={[false && 'a', 'name', null && 'b', 0 && 'c']} />
+    ).toMatchInlineSnapshot(`"<div class="name"></div>"`);
 
-    assert.equal(
-      <div class={['a b c d', false && 'e', true && 'f', 'g h i j']} />,
-      '<div class="a b c d f g h i j"></div>'
-    );
+    expect(
+      <div class={['a b c d', false && 'e', true && 'f', 'g h i j']} />
+    ).toMatchInlineSnapshot(`"<div class="a b c d f g h i j"></div>"`);
 
-    assert.equal(
-      <div class={['a', 'b', 'c', 'd', false && 'e', true && 'f', 'g', 'h', 'i', 'j']} />,
-      '<div class="a b c d f g h i j"></div>'
-    );
+    expect(
+      <div class={['a', 'b', 'c', 'd', false && 'e', true && 'f', 'g', 'h', 'i', 'j']} />
+    ).toMatchInlineSnapshot(`"<div class="a b c d f g h i j"></div>"`);
   });
 
   test('attrs attribute', () => {
-    assert.equal(
-      <div attrs={{ 'data-test': 'test', 'data-test2': 'test2' }} />,
-      '<div data-test="test" data-test2="test2"></div>'
-    );
-
-    assert.equal(
-      <div attrs={{ 'data-test': 'test', 'data-test2': 'test2' }} data-test3="test3" />,
-      '<div data-test="test" data-test2="test2" data-test3="test3"></div>'
+    expect(
+      <div attrs={{ 'data-test': 'test', 'data-test2': 'test2' }} />
+    ).toMatchInlineSnapshot(`"<div data-test="test" data-test2="test2"></div>"`);
+
+    expect(
+      <div attrs={{ 'data-test': 'test', 'data-test2': 'test2' }} data-test3="test3" />
+    ).toMatchInlineSnapshot(
+      `"<div data-test="test" data-test2="test2" data-test3="test3"></div>"`
     );
 
-    assert.equal(
-      <div attrs='data-test="test" data-test2="test2"'></div>,
-      '<div data-test="test" data-test2="test2"></div>'
+    expect(<div attrs='data-test="test" data-test2="test2"'></div>).toMatchInlineSnapshot(
+      `"<div data-test="test" data-test2="test2"></div>"`
     );
 
     // duplicates
-    assert.equal(
-      <div attrs='data-test="test" data-test2="test2"' data-test="test3"></div>,
-      '<div data-test="test" data-test2="test2" data-test="test3"></div>'
+    expect(
+      <div attrs='data-test="test" data-test2="test2"' data-test="test3"></div>
+    ).toMatchInlineSnapshot(
+      `"<div data-test="test" data-test2="test2" data-test="test3"></div>"`
     );
 
     // escapes object
-    assert.equal(
-      <div attrs={{ 'data-test': 'te"st', 'data-test2': 'test2' }} data-test="test3" />,
-      '<div data-test="te&#34;st" data-test2="test2" data-test="test3"></div>'
+    expect(
+      <div attrs={{ 'data-test': 'te"st', 'data-test2': 'test2' }} data-test="test3" />
+    ).toMatchInlineSnapshot(
+      `"<div data-test="te&#34;st" data-test2="test2" data-test="test3"></div>"`
     );
 
     // does not escape string
-    assert.equal(
-      <div attrs='data-test="te"st" data-test2="test2"' data-test="test3" />,
-      `<div data-test="te"st" data-test2="test2" data-test="test3"></div>`
+    expect(
+      <div attrs='data-test="te"st" data-test2="test2"' data-test="test3" />
+    ).toMatchInlineSnapshot(
+      `"<div data-test="te"st" data-test2="test2" data-test="test3"></div>"`
     );
   });
 });
diff --git a/packages/html/test/components.test.tsx b/packages/html/test/components.test.tsx
index b468e4c53..9c0cf5178 100644
--- a/packages/html/test/components.test.tsx
+++ b/packages/html/test/components.test.tsx
@@ -1,6 +1,5 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
-import Html from '../index';
+import { describe, expect, test } from 'vitest';
+import * as Html from '../src/index.js';
 
 const Header: Html.Component<any> = ({ children, ...attributes }) => (
   <h1 {...attributes}>{children}</h1>
@@ -16,21 +15,18 @@ function Button(attributes: Html.PropsWithChildren<any>) {
 
 describe('Components', () => {
   test('helper components', () => {
-    assert.equal(
-      '<h1 class="title"><span>Header Text</span></h1>',
+    expect(
       <Header class="title">
         <span>Header Text</span>
       </Header>
-    );
+    ).toMatchInlineSnapshot(`"<h1 class="title"><span>Header Text</span></h1>"`);
 
-    assert.equal(
-      '<button type="button" class="override" test="a" b="3"></button>',
-      <Button class="override" test="a" b={3} />
+    expect(<Button class="override" test="a" b={3} />).toMatchInlineSnapshot(
+      `"<button type="button" class="override" test="a" b="3"></button>"`
     );
 
-    assert.equal(
-      '<button type="button" class="original-class">Button Text</button>',
-      <Button>Button Text</Button>
+    expect(<Button>Button Text</Button>).toMatchInlineSnapshot(
+      `"<button type="button" class="original-class">Button Text</button>"`
     );
   });
 });
diff --git a/packages/html/test/encoding.test.tsx b/packages/html/test/encoding.test.tsx
index ff00c4288..ad85dc47e 100644
--- a/packages/html/test/encoding.test.tsx
+++ b/packages/html/test/encoding.test.tsx
@@ -1,62 +1,54 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
+import { describe, expect, test } from 'vitest';
 
 describe('HTML Encoding', () => {
   test('should encode " as &#34', () => {
-    assert.equal(<div class={'"'}></div>, '<div class="&#34;"></div>');
+    expect(<div class={'"'}></div>).toMatchInlineSnapshot(`"<div class="&#34;"></div>"`);
   });
 
   test('should encode & as &amp', () => {
-    assert.equal(
+    expect(
       <div class={'&'} safe>
         &
-      </div>,
-      '<div class="&">&amp;</div>'
-    );
+      </div>
+    ).toMatchInlineSnapshot(`"<div class="&">&amp;</div>"`);
   });
 
   test('should NOT encode \\u00A0 as &#32', () => {
-    assert.equal(<div class={'\u00A0'}></div>, '<div class="\u00A0"></div>');
+    expect(<div class={'\u00A0'}></div>).toMatchInlineSnapshot(`"<div class=" "></div>"`);
   });
 
   test('should encode date attributes as ISO strings', () => {
     const date = new Date();
 
-    assert.equal(
-      <div datetime={date}></div>,
+    //@ts-expect-error - testing date attribute
+    expect(<div datetime={date}></div>).toBe(
       `<div datetime="${date.toISOString()}"></div>`
     );
   });
 
   test('using a Date type attribute', () => {
-    assert.equal(
-      '<time datetime="1914-12-20T08:00:00.000Z"></time>',
+    expect(
       <time datetime={new Date('1914-12-20T08:00+0000')}></time>
-    );
+    ).toMatchInlineSnapshot(`"<time datetime="1914-12-20T08:00:00.000Z"></time>"`);
 
-    assert.equal(
-      '<ins datetime="1914-12-20T08:00:00.000Z">new</ins>',
+    expect(
       <ins datetime={new Date('1914-12-20T08:00+0000')}>new</ins>
-    );
+    ).toMatchInlineSnapshot(`"<ins datetime="1914-12-20T08:00:00.000Z">new</ins>"`);
 
-    assert.equal(
-      '<del datetime="1914-12-20T08:00:00.000Z">old</del>',
+    expect(
       <del datetime={new Date('1914-12-20T08:00+0000')}>old</del>
-    );
+    ).toMatchInlineSnapshot(`"<del datetime="1914-12-20T08:00:00.000Z">old</del>"`);
 
-    assert.equal(
-      '<time datetime="1914-12-20T08:00:00.000Z"></time>',
+    expect(
       <time datetime={new Date('1914-12-20T08:00+0000').toISOString()}></time>
-    );
+    ).toMatchInlineSnapshot(`"<time datetime="1914-12-20T08:00:00.000Z"></time>"`);
 
-    assert.equal(
-      '<ins datetime="1914-12-20T08:00:00.000Z">new</ins>',
+    expect(
       <ins datetime={new Date('1914-12-20T08:00+0000').toISOString()}>new</ins>
-    );
+    ).toMatchInlineSnapshot(`"<ins datetime="1914-12-20T08:00:00.000Z">new</ins>"`);
 
-    assert.equal(
-      '<del datetime="1914-12-20T08:00:00.000Z">old</del>',
+    expect(
       <del datetime={new Date('1914-12-20T08:00+0000').toISOString()}>old</del>
-    );
+    ).toMatchInlineSnapshot(`"<del datetime="1914-12-20T08:00:00.000Z">old</del>"`);
   });
 });
diff --git a/packages/html/test/error-boundary.test.tsx b/packages/html/test/error-boundary.test.tsx
index 88120eaa5..7f5f27053 100644
--- a/packages/html/test/error-boundary.test.tsx
+++ b/packages/html/test/error-boundary.test.tsx
@@ -1,15 +1,14 @@
-import assert from 'node:assert';
-import { describe, it } from 'node:test';
 import { setTimeout } from 'timers/promises';
-import { ErrorBoundary, HtmlTimeout } from '../error-boundary';
+import { describe, expect, it } from 'vitest';
+import { ErrorBoundary, HtmlTimeout } from '../src/error-boundary.js';
 
 describe('Error Boundary', () => {
   it('should render error boundary', async () => {
     try {
       await (<div>{Promise.reject(<div>2</div>)}</div>);
-      assert.fail('should throw');
+      throw new Error('should throw');
     } catch (error) {
-      assert.equal(error, <div>2</div>);
+      expect(error).toMatchInlineSnapshot(`"<div>2</div>"`);
     }
 
     try {
@@ -21,9 +20,9 @@ describe('Error Boundary', () => {
         </>
       );
 
-      assert.equal(html, <div>1</div>);
+      expect(html).toMatchInlineSnapshot(`"<div>1</div>"`);
     } catch {
-      assert.fail('should not throw');
+      throw new Error('should not throw');
     }
   });
 
@@ -36,7 +35,7 @@ describe('Error Boundary', () => {
       </>
     );
 
-    assert.equal(html, <div>my error</div>);
+    expect(html).toMatchInlineSnapshot(`"<div>my error</div>"`);
   });
 
   it('Catches timed out promise', async () => {
@@ -48,7 +47,7 @@ describe('Error Boundary', () => {
       </>
     );
 
-    assert.equal(html, '<div>1</div>');
+    expect(html).toMatchInlineSnapshot(`"<div>1</div>"`);
   });
 
   it('Renders non timed out promise', async () => {
@@ -60,7 +59,7 @@ describe('Error Boundary', () => {
       </>
     );
 
-    assert.equal(html, <div>2</div>);
+    expect(html).toMatchInlineSnapshot(`"<div>2</div>"`);
   });
 
   it('Catches timed out promise', async () => {
@@ -68,7 +67,7 @@ describe('Error Boundary', () => {
       <>
         <ErrorBoundary
           catch={(err) => {
-            assert.ok(err instanceof HtmlTimeout);
+            expect(err instanceof HtmlTimeout).toBeTruthy();
             return <div>1</div>;
           }}
           timeout={10}
@@ -78,7 +77,7 @@ describe('Error Boundary', () => {
       </>
     );
 
-    assert.equal(html, '<div>1</div>');
+    expect(html).toMatchInlineSnapshot(`"<div>1</div>"`);
   });
 
   it('doesnt do nothing on sync children', () => {
@@ -90,6 +89,6 @@ describe('Error Boundary', () => {
       </>
     );
 
-    assert.equal(html, '<div>2</div>');
+    expect(html).toMatchInlineSnapshot(`"<div>2</div>"`);
   });
 });
diff --git a/packages/html/test/escape-tagged-func.test.tsx b/packages/html/test/escape-tagged-func.test.tsx
index 89c136e72..ad328bfe0 100644
--- a/packages/html/test/escape-tagged-func.test.tsx
+++ b/packages/html/test/escape-tagged-func.test.tsx
@@ -1,24 +1,24 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
-import Html from '../index';
+import { describe, expect, test } from 'vitest';
+import * as Html from '../src/index.js';
 
 const unsafeTag = '<script tag="1">alert(1)</script>';
 const safeTag = Html.escape`${unsafeTag}`;
 
 describe('HTML Escaping', () => {
   test('e is the same as escape', () => {
-    assert.equal(Html.e, Html.escape);
+    expect(Html.e).toBe(Html.escape);
   });
 
   test('escapes content', () => {
-    assert.equal(<>{unsafeTag}</>, <>{unsafeTag}</>);
+    expect(<>{unsafeTag}</>).toBe(<>{unsafeTag}</>);
   });
 
   test('with children', () => {
-    assert.equal(
+    expect(
       <>
         <div>{unsafeTag}</div>
-      </>,
+      </>
+    ).toBe(
       <>
         <div>{unsafeTag}</div>
       </>
@@ -26,10 +26,11 @@ describe('HTML Escaping', () => {
   });
 
   test('escapes children', () => {
-    assert.equal(
+    expect(
       <>
         <div safe>{unsafeTag}</div>
-      </>,
+      </>
+    ).toBe(
       <>
         <div>{safeTag}</div>
       </>
@@ -37,12 +38,13 @@ describe('HTML Escaping', () => {
   });
 
   test('escapes deep children', () => {
-    assert.equal(
+    expect(
       <>
         <div safe>
           <div>{unsafeTag}</div>
         </div>
-      </>,
+      </>
+    ).toBe(
       <>
         <div>{Html.escape`${(<div>{unsafeTag}</div>)}`}</div>
       </>
@@ -50,34 +52,31 @@ describe('HTML Escaping', () => {
   });
 
   test('always escapes attributes', () => {
-    assert.equal(
+    expect(
       <>
         <div style={'"&<>\''}></div>
         <div style={{ backgroundColor: '"&<>\'' }}></div>
         <div class={'"&<>\''}></div>
         <div class={'test:1" xss="false'}></div>
-      </>,
-      <>
-        <div style="&#34;&<>'"></div>
-        <div style="background-color:&#34;&<>';"></div>
-        <div class="&#34;&<>'"></div>
-        <div class="test:1&#34; xss=&#34;false"></div>
       </>
+    ).toMatchInlineSnapshot(
+      `"<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div><div class="test:1&#34; xss=&#34;false"></div>"`
     );
 
-    assert.equal(
+    expect(
       <>
         <div style={`"&<>'`}></div>
         <div style={{ backgroundColor: `"&<>'` }}></div>
         <div class={`"&<>'`}></div>
-      </>,
-      `<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div>`
+      </>
+    ).toMatchInlineSnapshot(
+      `"<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div>"`
     );
   });
 
   test('handles unknown values', () => {
-    assert.equal(Html.escape``, '');
-    assert.equal(Html.escape`${{ a: 1 }}`, '[object Object]');
+    expect(Html.escape``).toBe('');
+    expect(Html.escape`${{ a: 1 }}`).toBe('[object Object]');
   });
 
   // The matrix of cases we need to test for:
@@ -90,111 +89,93 @@ describe('HTML Escaping', () => {
   // 7. Works when the text to escape is in the end
   // 8. Returns the same string when there's no need to escape
   test('always escape', () => {
-    assert.equal(
-      Html.escape`absolutely nothing to do here`,
+    expect(Html.escape`absolutely nothing to do here`).toBe(
       'absolutely nothing to do here'
     );
-    assert.equal(
-      Html.escape`<script>alert(1)</script>`,
+    expect(Html.escape`<script>alert(1)</script>`).toBe(
       '&lt;script>alert(1)&lt;/script>'
     );
-    assert.equal(Html.escape`<`, '&lt;');
-    assert.equal(Html.escape`>`, '>');
-    assert.equal(Html.escape`&`, '&amp;');
-    assert.equal(Html.escape`'`, '&#39;');
-    assert.equal(Html.escape`"`, '&#34;');
-    assert.equal(Html.escape`\u00A0`, '\u00A0');
-    assert.equal(Html.escape`<script>ab`, '&lt;script>ab');
-    assert.equal(Html.escape`<script>`, '&lt;script>');
-    assert.equal(Html.escape`<script><script>`, '&lt;script>&lt;script>');
-
-    assert.equal(
-      Html.escape`lalala<script>alert(1)</script>lalala`,
+    expect(Html.escape`<`).toBe('&lt;');
+    expect(Html.escape`>`).toBe('>');
+    expect(Html.escape`&`).toBe('&amp;');
+    expect(Html.escape`'`).toBe('&#39;');
+    expect(Html.escape`"`).toBe('&#34;');
+    expect(Html.escape`\u00A0`).toBe('\u00A0');
+    expect(Html.escape`<script>ab`).toBe('&lt;script>ab');
+    expect(Html.escape`<script>`).toBe('&lt;script>');
+    expect(Html.escape`<script><script>`).toBe('&lt;script>&lt;script>');
+
+    expect(Html.escape`lalala<script>alert(1)</script>lalala`).toBe(
       'lalala&lt;script>alert(1)&lt;/script>lalala'
     );
 
-    assert.equal(
-      Html.escape`<script>alert(1)</script>lalala`,
+    expect(Html.escape`<script>alert(1)</script>lalala`).toBe(
       '&lt;script>alert(1)&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escape`lalala<script>alert(1)</script>`,
+    expect(Html.escape`lalala<script>alert(1)</script>`).toBe(
       'lalala' + '&lt;script>alert(1)&lt;/script>'
     );
 
-    assert.equal(Html.escape`What does 😊 mean?`, 'What does 😊 mean?');
-    assert.equal(Html.escape`<What does 😊`, '&lt;What does 😊');
-    assert.equal(
-      Html.escape`<div>What does 😊 mean in text?`,
+    expect(Html.escape`What does 😊 mean?`).toBe('What does 😊 mean?');
+    expect(Html.escape`<What does 😊`).toBe('&lt;What does 😊');
+    expect(Html.escape`<div>What does 😊 mean in text?`).toBe(
       '&lt;div>What does 😊 mean in text?'
     );
 
-    assert.equal(
-      Html.escape`${('lalala' + '<script>alert(1)</script>' + 'lalala').repeat(900)}`,
-      'lalala&lt;script>alert(1)&lt;/script>lalala'.repeat(900)
-    );
-    assert.equal(
-      Html.escape`${('<script>alert(1)</script>' + 'lalala').repeat(900)}`,
+    expect(
+      Html.escape`${('lalala' + '<script>alert(1)</script>' + 'lalala').repeat(900)}`
+    ).toBe('lalala&lt;script>alert(1)&lt;/script>lalala'.repeat(900));
+    expect(Html.escape`${('<script>alert(1)</script>' + 'lalala').repeat(900)}`).toBe(
       '&lt;script>alert(1)&lt;/script>lalala'.repeat(900)
     );
-    assert.equal(
-      Html.escape`${('lalala' + '<script>alert(1)</script>').repeat(900)}`,
+    expect(Html.escape`${('lalala' + '<script>alert(1)</script>').repeat(900)}`).toBe(
       ('lalala' + '&lt;script>alert(1)&lt;/script>').repeat(900)
     );
 
     // the positions of the unicode codepoint are important
     // our simd code for U16 is at 8 bytes, so we need to especially check the boundaries
-    assert.equal(
-      Html.escape`😊lalala<script>alert(1)</script>lalala`,
+    expect(Html.escape`😊lalala<script>alert(1)</script>lalala`).toBe(
       '😊lalala&lt;script>alert(1)&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escape`${'<script>😊alert(1)</script>' + 'lalala'}`,
+    expect(Html.escape`${'<script>😊alert(1)</script>' + 'lalala'}`).toBe(
       '&lt;script>😊alert(1)&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escape`<script>alert(1)😊</script>lalala`,
+    expect(Html.escape`<script>alert(1)😊</script>lalala`).toBe(
       '&lt;script>alert(1)😊&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escape`<script>alert(1)</script>😊lalala`,
+    expect(Html.escape`<script>alert(1)</script>😊lalala`).toBe(
       '&lt;script>alert(1)&lt;/script>😊lalala'
     );
-    assert.equal(
-      Html.escape`<script>alert(1)</script>lal😊ala`,
+    expect(Html.escape`<script>alert(1)</script>lal😊ala`).toBe(
       '&lt;script>alert(1)&lt;/script>lal😊ala'
     );
-    assert.equal(
-      Html.escape`${'<script>alert(1)</script>' + 'lal😊ala'.repeat(10)}`,
+    expect(Html.escape`${'<script>alert(1)</script>' + 'lal😊ala'.repeat(10)}`).toBe(
       '&lt;script>alert(1)&lt;/script>' + 'lal😊ala'.repeat(10)
     );
 
     for (let i = 1; i < 10; i++)
-      assert.equal(
-        Html.escape`${'<script>alert(1)</script>' + 'la😊'.repeat(i)}`,
+      expect(Html.escape`${'<script>alert(1)</script>' + 'la😊'.repeat(i)}`).toBe(
         '&lt;script>alert(1)&lt;/script>' + 'la😊'.repeat(i)
       );
 
-    assert.equal(
-      Html.escape`${'la😊' + '<script>alert(1)</script>'}`,
+    expect(Html.escape`${'la😊' + '<script>alert(1)</script>'}`).toBe(
       'la😊' + '&lt;script>alert(1)&lt;/script>'
     );
-    assert.equal(
-      Html.escape`${('lalala' + '<script>alert(1)</script>😊').repeat(1)}`,
+    expect(Html.escape`${('lalala' + '<script>alert(1)</script>😊').repeat(1)}`).toBe(
       ('lalala' + '&lt;script>alert(1)&lt;/script>😊').repeat(1)
     );
 
-    assert.equal(Html.escape`${'😊'.repeat(100)}`, '😊'.repeat(100));
-    assert.equal(Html.escape`${'😊<'.repeat(100)}`, '😊&lt;'.repeat(100));
-    assert.equal(Html.escape`${'<😊>'.repeat(100)}`, '&lt;😊>'.repeat(100));
-    assert.equal(Html.escape`😊`, '😊');
-    assert.equal(Html.escape`😊😊`, '😊😊');
-    assert.equal(Html.escape`😊lo`, '😊lo');
-    assert.equal(Html.escape`lo😊`, 'lo😊');
+    expect(Html.escape`${'😊'.repeat(100)}`).toBe('😊'.repeat(100));
+    expect(Html.escape`${'😊<'.repeat(100)}`).toBe('😊&lt;'.repeat(100));
+    expect(Html.escape`${'<😊>'.repeat(100)}`).toBe('&lt;😊>'.repeat(100));
+    expect(Html.escape`😊`).toBe('😊');
+    expect(Html.escape`😊😊`).toBe('😊😊');
+    expect(Html.escape`😊lo`).toBe('😊lo');
+    expect(Html.escape`lo😊`).toBe('lo😊');
 
-    assert.equal(Html.escape`${' '.repeat(32) + '😊'}`, ' '.repeat(32) + '😊');
-    assert.equal(Html.escape`${' '.repeat(32) + '😊😊'}`, ' '.repeat(32) + '😊😊');
-    assert.equal(Html.escape`${' '.repeat(32) + '😊lo'}`, ' '.repeat(32) + '😊lo');
-    assert.equal(Html.escape`${' '.repeat(32) + 'lo😊'}`, ' '.repeat(32) + 'lo😊');
+    expect(Html.escape`${' '.repeat(32) + '😊'}`).toBe(' '.repeat(32) + '😊');
+    expect(Html.escape`${' '.repeat(32) + '😊😊'}`).toBe(' '.repeat(32) + '😊😊');
+    expect(Html.escape`${' '.repeat(32) + '😊lo'}`).toBe(' '.repeat(32) + '😊lo');
+    expect(Html.escape`${' '.repeat(32) + 'lo😊'}`).toBe(' '.repeat(32) + 'lo😊');
   });
 });
diff --git a/packages/html/test/escape.test.tsx b/packages/html/test/escape.test.tsx
index 9e6b0cc2e..9a5d75fa6 100644
--- a/packages/html/test/escape.test.tsx
+++ b/packages/html/test/escape.test.tsx
@@ -1,20 +1,20 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
-import Html from '../index';
+import { describe, expect, test } from 'vitest';
+import * as Html from '../src/index.js';
 
 const unsafeTag = '<script tag="1">alert(1)</script>';
 const safeTag = Html.escapeHtml(unsafeTag);
 
 describe('HTML Escaping', () => {
   test('escapes content', () => {
-    assert.equal(<>{unsafeTag}</>, <>{unsafeTag}</>);
+    expect(<>{unsafeTag}</>).toBe(<>{unsafeTag}</>);
   });
 
   test('with children', () => {
-    assert.equal(
+    expect(
       <>
         <div>{unsafeTag}</div>
-      </>,
+      </>
+    ).toBe(
       <>
         <div>{unsafeTag}</div>
       </>
@@ -22,10 +22,11 @@ describe('HTML Escaping', () => {
   });
 
   test('escapes children', () => {
-    assert.equal(
+    expect(
       <>
         <div safe>{unsafeTag}</div>
-      </>,
+      </>
+    ).toBe(
       <>
         <div>{safeTag}</div>
       </>
@@ -33,12 +34,13 @@ describe('HTML Escaping', () => {
   });
 
   test('escapes deep children', () => {
-    assert.equal(
+    expect(
       <>
         <div safe>
           <div>{unsafeTag}</div>
         </div>
-      </>,
+      </>
+    ).toBe(
       <>
         <div>{Html.escapeHtml(<div>{unsafeTag}</div>)}</div>
       </>
@@ -46,34 +48,31 @@ describe('HTML Escaping', () => {
   });
 
   test('always escapes attributes', () => {
-    assert.equal(
+    expect(
       <>
         <div style={'"&<>\''}></div>
         <div style={{ backgroundColor: '"&<>\'' }}></div>
         <div class={'"&<>\''}></div>
         <div class={'test:1" xss="false'}></div>
-      </>,
-      <>
-        <div style="&#34;&<>'"></div>
-        <div style="background-color:&#34;&<>';"></div>
-        <div class="&#34;&<>'"></div>
-        <div class="test:1&#34; xss=&#34;false"></div>
       </>
+    ).toMatchInlineSnapshot(
+      `"<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div><div class="test:1&#34; xss=&#34;false"></div>"`
     );
 
-    assert.equal(
+    expect(
       <>
         <div style={`"&<>'`}></div>
         <div style={{ backgroundColor: `"&<>'` }}></div>
         <div class={`"&<>'`}></div>
-      </>,
-      `<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div>`
+      </>
+    ).toMatchInlineSnapshot(
+      `"<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div>"`
     );
   });
 
   test('handles unknown values', () => {
-    assert.equal(Html.escapeHtml(''), '');
-    assert.equal(Html.escapeHtml({ a: 1 }), '[object Object]');
+    expect(Html.escapeHtml('')).toBe('');
+    expect(Html.escapeHtml({ a: 1 })).toBe('[object Object]');
   });
 
   // The matrix of cases we need to test for:
@@ -86,118 +85,100 @@ describe('HTML Escaping', () => {
   // 7. Works when the text to escape is in the end
   // 8. Returns the same string when there's no need to escape
   test('always escapeHtml', () => {
-    assert.equal(
-      Html.escapeHtml('absolutely nothing to do here'),
+    expect(Html.escapeHtml('absolutely nothing to do here')).toBe(
       'absolutely nothing to do here'
     );
-    assert.equal(
-      Html.escapeHtml('<script>alert(1)</script>'),
+    expect(Html.escapeHtml('<script>alert(1)</script>')).toBe(
       '&lt;script>alert(1)&lt;/script>'
     );
-    assert.equal(Html.escapeHtml('<'), '&lt;');
-    assert.equal(Html.escapeHtml('>'), '>');
-    assert.equal(Html.escapeHtml('&'), '&amp;');
-    assert.equal(Html.escapeHtml("'"), '&#39;');
-    assert.equal(Html.escapeHtml('"'), '&#34;');
-    assert.equal(Html.escapeHtml('\n'), '\n');
-    assert.equal(Html.escapeHtml('\r'), '\r');
-    assert.equal(Html.escapeHtml('\t'), '\t');
-    assert.equal(Html.escapeHtml('\f'), '\f');
-    assert.equal(Html.escapeHtml('\v'), '\v');
-    assert.equal(Html.escapeHtml('\b'), '\b');
-    assert.equal(Html.escapeHtml('\u00A0'), '\u00A0');
-    assert.equal(Html.escapeHtml('<script>ab'), '&lt;script>ab');
-    assert.equal(Html.escapeHtml('<script>'), '&lt;script>');
-    assert.equal(Html.escapeHtml('<script><script>'), '&lt;script>&lt;script>');
-
-    assert.equal(
-      Html.escapeHtml('lalala' + '<script>alert(1)</script>' + 'lalala'),
+    expect(Html.escapeHtml('<')).toBe('&lt;');
+    expect(Html.escapeHtml('>')).toBe('>');
+    expect(Html.escapeHtml('&')).toBe('&amp;');
+    expect(Html.escapeHtml("'")).toBe('&#39;');
+    expect(Html.escapeHtml('"')).toBe('&#34;');
+    expect(Html.escapeHtml('\n')).toBe('\n');
+    expect(Html.escapeHtml('\r')).toBe('\r');
+    expect(Html.escapeHtml('\t')).toBe('\t');
+    expect(Html.escapeHtml('\f')).toBe('\f');
+    expect(Html.escapeHtml('\v')).toBe('\v');
+    expect(Html.escapeHtml('\b')).toBe('\b');
+    expect(Html.escapeHtml('\u00A0')).toBe('\u00A0');
+    expect(Html.escapeHtml('<script>ab')).toBe('&lt;script>ab');
+    expect(Html.escapeHtml('<script>')).toBe('&lt;script>');
+    expect(Html.escapeHtml('<script><script>')).toBe('&lt;script>&lt;script>');
+
+    expect(Html.escapeHtml('lalala' + '<script>alert(1)</script>' + 'lalala')).toBe(
       'lalala&lt;script>alert(1)&lt;/script>lalala'
     );
 
-    assert.equal(
-      Html.escapeHtml('<script>alert(1)</script>' + 'lalala'),
+    expect(Html.escapeHtml('<script>alert(1)</script>' + 'lalala')).toBe(
       '&lt;script>alert(1)&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escapeHtml('lalala' + '<script>alert(1)</script>'),
+    expect(Html.escapeHtml('lalala' + '<script>alert(1)</script>')).toBe(
       'lalala' + '&lt;script>alert(1)&lt;/script>'
     );
 
-    assert.equal(Html.escapeHtml('What does 😊 mean?'), 'What does 😊 mean?');
+    expect(Html.escapeHtml('What does 😊 mean?')).toBe('What does 😊 mean?');
 
-    assert.equal(Html.escapeHtml('<What does 😊'), '&lt;What does 😊');
-    assert.equal(
-      Html.escapeHtml('<div>What does 😊 mean in text?'),
+    expect(Html.escapeHtml('<What does 😊')).toBe('&lt;What does 😊');
+    expect(Html.escapeHtml('<div>What does 😊 mean in text?')).toBe(
       '&lt;div>What does 😊 mean in text?'
     );
 
-    assert.equal(
-      Html.escapeHtml(('lalala' + '<script>alert(1)</script>' + 'lalala').repeat(900)),
-      'lalala&lt;script>alert(1)&lt;/script>lalala'.repeat(900)
-    );
-    assert.equal(
-      Html.escapeHtml(('<script>alert(1)</script>' + 'lalala').repeat(900)),
+    expect(
+      Html.escapeHtml(('lalala' + '<script>alert(1)</script>' + 'lalala').repeat(900))
+    ).toBe('lalala&lt;script>alert(1)&lt;/script>lalala'.repeat(900));
+    expect(Html.escapeHtml(('<script>alert(1)</script>' + 'lalala').repeat(900))).toBe(
       '&lt;script>alert(1)&lt;/script>lalala'.repeat(900)
     );
-    assert.equal(
-      Html.escapeHtml(('lalala' + '<script>alert(1)</script>').repeat(900)),
+    expect(Html.escapeHtml(('lalala' + '<script>alert(1)</script>').repeat(900))).toBe(
       ('lalala' + '&lt;script>alert(1)&lt;/script>').repeat(900)
     );
 
     // the positions of the unicode codepoint are important
     // our simd code for U16 is at 8 bytes, so we need to especially check the boundaries
-    assert.equal(
-      Html.escapeHtml('😊lalala' + '<script>alert(1)</script>' + 'lalala'),
+    expect(Html.escapeHtml('😊lalala' + '<script>alert(1)</script>' + 'lalala')).toBe(
       '😊lalala&lt;script>alert(1)&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escapeHtml('<script>😊alert(1)</script>' + 'lalala'),
+    expect(Html.escapeHtml('<script>😊alert(1)</script>' + 'lalala')).toBe(
       '&lt;script>😊alert(1)&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escapeHtml('<script>alert(1)😊</script>' + 'lalala'),
+    expect(Html.escapeHtml('<script>alert(1)😊</script>' + 'lalala')).toBe(
       '&lt;script>alert(1)😊&lt;/script>lalala'
     );
-    assert.equal(
-      Html.escapeHtml('<script>alert(1)</script>' + '😊lalala'),
+    expect(Html.escapeHtml('<script>alert(1)</script>' + '😊lalala')).toBe(
       '&lt;script>alert(1)&lt;/script>😊lalala'
     );
-    assert.equal(
-      Html.escapeHtml('<script>alert(1)</script>' + 'lal😊ala'),
+    expect(Html.escapeHtml('<script>alert(1)</script>' + 'lal😊ala')).toBe(
       '&lt;script>alert(1)&lt;/script>lal😊ala'
     );
-    assert.equal(
-      Html.escapeHtml('<script>alert(1)</script>' + 'lal😊ala'.repeat(10)),
+    expect(Html.escapeHtml('<script>alert(1)</script>' + 'lal😊ala'.repeat(10))).toBe(
       '&lt;script>alert(1)&lt;/script>' + 'lal😊ala'.repeat(10)
     );
 
     for (let i = 1; i < 10; i++)
-      assert.equal(
-        Html.escapeHtml('<script>alert(1)</script>' + 'la😊'.repeat(i)),
+      expect(Html.escapeHtml('<script>alert(1)</script>' + 'la😊'.repeat(i))).toBe(
         '&lt;script>alert(1)&lt;/script>' + 'la😊'.repeat(i)
       );
 
-    assert.equal(
-      Html.escapeHtml('la😊' + '<script>alert(1)</script>'),
+    expect(Html.escapeHtml('la😊' + '<script>alert(1)</script>')).toBe(
       'la😊' + '&lt;script>alert(1)&lt;/script>'
     );
-    assert.equal(
-      Html.escapeHtml(('lalala' + '<script>alert(1)</script>😊').repeat(1)),
+    expect(Html.escapeHtml(('lalala' + '<script>alert(1)</script>😊').repeat(1))).toBe(
       ('lalala' + '&lt;script>alert(1)&lt;/script>😊').repeat(1)
     );
 
-    assert.equal(Html.escapeHtml('😊'.repeat(100)), '😊'.repeat(100));
-    assert.equal(Html.escapeHtml('😊<'.repeat(100)), '😊&lt;'.repeat(100));
-    assert.equal(Html.escapeHtml('<😊>'.repeat(100)), '&lt;😊>'.repeat(100));
-    assert.equal(Html.escapeHtml('😊'), '😊');
-    assert.equal(Html.escapeHtml('😊😊'), '😊😊');
-    assert.equal(Html.escapeHtml('😊lo'), '😊lo');
-    assert.equal(Html.escapeHtml('lo😊'), 'lo😊');
+    expect(Html.escapeHtml('😊'.repeat(100))).toBe('😊'.repeat(100));
+    expect(Html.escapeHtml('😊<'.repeat(100))).toBe('😊&lt;'.repeat(100));
+    expect(Html.escapeHtml('<😊>'.repeat(100))).toBe('&lt;😊>'.repeat(100));
+    expect(Html.escapeHtml('😊')).toBe('😊');
+    expect(Html.escapeHtml('😊😊')).toBe('😊😊');
+    expect(Html.escapeHtml('😊lo')).toBe('😊lo');
+    expect(Html.escapeHtml('lo😊')).toBe('lo😊');
 
-    assert.equal(Html.escapeHtml(' '.repeat(32) + '😊'), ' '.repeat(32) + '😊');
-    assert.equal(Html.escapeHtml(' '.repeat(32) + '😊😊'), ' '.repeat(32) + '😊😊');
-    assert.equal(Html.escapeHtml(' '.repeat(32) + '😊lo'), ' '.repeat(32) + '😊lo');
-    assert.equal(Html.escapeHtml(' '.repeat(32) + 'lo😊'), ' '.repeat(32) + 'lo😊');
+    expect(Html.escapeHtml(' '.repeat(32) + '😊')).toBe(' '.repeat(32) + '😊');
+    expect(Html.escapeHtml(' '.repeat(32) + '😊😊')).toBe(' '.repeat(32) + '😊😊');
+    expect(Html.escapeHtml(' '.repeat(32) + '😊lo')).toBe(' '.repeat(32) + '😊lo');
+    expect(Html.escapeHtml(' '.repeat(32) + 'lo😊')).toBe(' '.repeat(32) + 'lo😊');
   });
 });
diff --git a/packages/html/test/hotwire-turbo.test.tsx b/packages/html/test/hotwire-turbo.test.tsx
index 63b0b4f7a..ef545e317 100644
--- a/packages/html/test/hotwire-turbo.test.tsx
+++ b/packages/html/test/hotwire-turbo.test.tsx
@@ -1,63 +1,67 @@
-/// <reference types="../hotwire-turbo.d.ts" />
-//
-import assert from 'node:assert';
-import { describe, it } from 'node:test';
+///<reference path="../hotwire-turbo.d.ts" />
+
+import { describe, expect, it } from 'vitest';
 
 describe('Turbo', () => {
   it('should return turbo frames correctly', async () => {
-    assert.equal(
-      '<turbo-frame id="messages"></turbo-frame>',
-      <turbo-frame id="messages"></turbo-frame>
+    expect(<turbo-frame id="messages"></turbo-frame>).toMatchInlineSnapshot(
+      `"<turbo-frame id="messages"></turbo-frame>"`
     );
 
-    assert.equal(
-      '<turbo-frame id="messages"><a href="/messages/expanded">Show all expanded messages in this frame.</a><form action="/messages">Show response from this form within this frame.</form></turbo-frame>',
+    expect(
       <turbo-frame id="messages">
         <a href="/messages/expanded">Show all expanded messages in this frame.</a>
 
         <form action="/messages">Show response from this form within this frame.</form>
       </turbo-frame>
+    ).toMatchInlineSnapshot(
+      `"<turbo-frame id="messages"><a href="/messages/expanded">Show all expanded messages in this frame.</a><form action="/messages">Show response from this form within this frame.</form></turbo-frame>"`
     );
 
-    assert.equal(
-      '<turbo-frame id="messages" target="_top"><a href="/messages/1" data-turbo-frame="_self">Following link will replace just this frame.</a></turbo-frame>',
+    expect(
       <turbo-frame id="messages" target="_top">
         <a href="/messages/1" data-turbo-frame="_self">
           Following link will replace just this frame.
         </a>
       </turbo-frame>
+    ).toMatchInlineSnapshot(
+      `"<turbo-frame id="messages" target="_top"><a href="/messages/1" data-turbo-frame="_self">Following link will replace just this frame.</a></turbo-frame>"`
     );
 
-    assert.equal(
-      '<turbo-frame id="messages" data-turbo-action="advance"><a href="/messages?page=2" data-turbo-action="replace">Replace history with next page</a></turbo-frame>',
+    expect(
       <turbo-frame id="messages" data-turbo-action="advance">
         <a href="/messages?page=2" data-turbo-action="replace">
           Replace history with next page
         </a>
       </turbo-frame>
+    ).toMatchInlineSnapshot(
+      `"<turbo-frame id="messages" data-turbo-action="advance"><a href="/messages?page=2" data-turbo-action="replace">Replace history with next page</a></turbo-frame>"`
     );
   });
 
   it('should render turbo streams correctly', async () => {
-    assert.equal(
-      '<turbo-stream action="append" target="dom_id"><template>Content to append to container designated with the dom_id.</template></turbo-stream>',
+    expect(
       <turbo-stream action="append" target="dom_id">
         <template>Content to append to container designated with the dom_id.</template>
       </turbo-stream>
+    ).toMatchInlineSnapshot(
+      `"<turbo-stream action="append" target="dom_id"><template>Content to append to container designated with the dom_id.</template></turbo-stream>"`
     );
 
-    assert.equal(
-      '<turbo-stream action="prepend" target="dom_id"><template>Content to prepend to container designated with the dom_id.</template></turbo-stream>',
+    expect(
       <turbo-stream action="prepend" target="dom_id">
         <template>Content to prepend to container designated with the dom_id.</template>
       </turbo-stream>
+    ).toMatchInlineSnapshot(
+      `"<turbo-stream action="prepend" target="dom_id"><template>Content to prepend to container designated with the dom_id.</template></turbo-stream>"`
     );
 
-    assert.equal(
-      '<turbo-stream action="replace" target="dom_id"><template>Content to replace the element designated with the dom_id.</template></turbo-stream>',
+    expect(
       <turbo-stream action="replace" target="dom_id">
         <template>Content to replace the element designated with the dom_id.</template>
       </turbo-stream>
+    ).toMatchInlineSnapshot(
+      `"<turbo-stream action="replace" target="dom_id"><template>Content to replace the element designated with the dom_id.</template></turbo-stream>"`
     );
   });
 });
diff --git a/packages/html/test/html-standards.test.tsx b/packages/html/test/html-standards.test.tsx
index 0fd9c02ed..055b90a6a 100644
--- a/packages/html/test/html-standards.test.tsx
+++ b/packages/html/test/html-standards.test.tsx
@@ -1,14 +1,14 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
+import { describe, expect, test } from 'vitest';
 
 describe('Expose correct html standards types', () => {
   test('Select', () => {
-    assert.equal(
-      '<select onchange="jsFunctionCall()"><option value="dog">Dog</option><option value="cat">Cat</option></select>',
+    expect(
       <select onchange="jsFunctionCall()">
         <option value="dog">Dog</option>
         <option value="cat">Cat</option>
       </select>
+    ).toMatchInlineSnapshot(
+      `"<select onchange="jsFunctionCall()"><option value="dog">Dog</option><option value="cat">Cat</option></select>"`
     );
   });
 });
diff --git a/packages/html/test/misc.test.tsx b/packages/html/test/misc.test.tsx
index 34bdff82d..529c7444d 100644
--- a/packages/html/test/misc.test.tsx
+++ b/packages/html/test/misc.test.tsx
@@ -1,144 +1,126 @@
-/// <reference path="../htmx.d.ts" />
-
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
+import { describe, expect, test } from 'vitest';
 
 describe('Miscellaneous', () => {
   test('Htmx properties', () => {
-    assert.equal(
-      //@ts-expect-error - should warn about invalid property
-      <div
-        //
-        hx-boost
-        hx-headers
-      ></div>,
-      '<div hx-boost hx-headers></div>'
+    expect(<div hx-boost hx-headers></div>).toMatchInlineSnapshot(
+      `"<div hx-boost hx-headers></div>"`
     );
 
-    assert.equal(<div hx-boost></div>, '<div hx-boost></div>');
-    assert.equal(<div hx-target="find "></div>, '<div hx-target="find "></div>');
+    expect(<div hx-boost></div>).toMatchInlineSnapshot(`"<div hx-boost></div>"`);
+    expect(<div hx-target="find "></div>).toMatchInlineSnapshot(
+      `"<div hx-target="find "></div>"`
+    );
   });
 
   test('Primitive values renders exactly like React', () => {
-    assert.equal(<div>{false}</div>, <div></div>);
-    assert.equal(<div>{null}</div>, <div></div>);
-    assert.equal(<div>{undefined}</div>, <div></div>);
-    assert.equal(<div>{0}</div>, <div>0</div>);
-    assert.equal(<div>{432}</div>, <div>432</div>);
-    assert.equal(<div>{NaN}</div>, <div>NaN</div>);
-    assert.equal(<div>{true}</div>, <div></div>);
-    assert.equal(<div>{Infinity}</div>, <div>Infinity</div>);
-    assert.equal(<div>{-Infinity}</div>, <div>-Infinity</div>);
-    assert.equal(<div>{[1, 2, 3]}</div>, <div>123</div>);
+    expect(<div>{false}</div>).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(<div>{null}</div>).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(<div>{undefined}</div>).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(<div>{0}</div>).toMatchInlineSnapshot(`"<div>0</div>"`);
+    expect(<div>{432}</div>).toMatchInlineSnapshot(`"<div>432</div>"`);
+    expect(<div>{NaN}</div>).toMatchInlineSnapshot(`"<div>NaN</div>"`);
+    expect(<div>{true}</div>).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(<div>{Infinity}</div>).toMatchInlineSnapshot(`"<div>Infinity</div>"`);
+    expect(<div>{-Infinity}</div>).toMatchInlineSnapshot(`"<div>-Infinity</div>"`);
+    expect(<div>{[1, 2, 3]}</div>).toMatchInlineSnapshot(`"<div>123</div>"`);
 
-    assert.equal(
+    expect(
       <div>
         {false}
         {false}
-      </div>,
-      <div></div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(
       <div>
         {null}
         {null}
-      </div>,
-      <div></div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(
       <div>
         {undefined}
         {undefined}
-      </div>,
-      <div></div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(
       <div>
         {0}
         {0}
-      </div>,
-      <div>00</div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div>00</div>"`);
+    expect(
       <div>
         {432}
         {432}
-      </div>,
-      <div>432432</div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div>432432</div>"`);
+    expect(
       <div>
         {NaN}
         {NaN}
-      </div>,
-      <div>NaNNaN</div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div>NaNNaN</div>"`);
+    expect(
       <div>
         {true}
         {true}
-      </div>,
-      <div></div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(
       <div>
         {Infinity}
         {Infinity}
-      </div>,
-      <div>InfinityInfinity</div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div>InfinityInfinity</div>"`);
+    expect(
       <div>
         {-Infinity}
         {-Infinity}
-      </div>,
-      <div>-Infinity-Infinity</div>
-    );
-    assert.equal(
+      </div>
+    ).toMatchInlineSnapshot(`"<div>-Infinity-Infinity</div>"`);
+    expect(
       <div>
         {[1, 2, 3]}
         {[1, 2, 3]}
-      </div>,
-      <div>123123</div>
-    );
+      </div>
+    ).toMatchInlineSnapshot(`"<div>123123</div>"`);
 
     // Bigint is the only case where it differs from React.
     // where React renders a empty string and we render the whole number.
-    assert.equal(<div>{123456789123456789n}</div>, <div>123456789123456789</div>);
-    assert.equal(<>{123456789123456789n}</>, <>123456789123456789</>);
+    expect(<div>{123456789123456789n}</div>).toMatchInlineSnapshot(
+      `"<div>123456789123456789</div>"`
+    );
+    expect(<>{123456789123456789n}</>).toMatchInlineSnapshot(`"123456789123456789"`);
   });
 
   test('Rendering objects throws', () => {
-    assert.throws(
+    expect(
       //@ts-expect-error - should warn about invalid child
-      () => <div>{{}}</div>,
-      /Objects are not valid as a KitaJSX child/
-    );
+      () => <div>{{}}</div>
+    ).toThrow(/Objects are not valid as a KitaJSX child/);
 
-    assert.throws(
+    expect(
       //prettier-ignore
       //@ts-expect-error - should warn about invalid child
-      () => (<div>{{}} {{}}</div>),
-      /Objects are not valid as a KitaJSX child/
-    );
+      () => (<div>{{}} {{}}</div>)
+    ).toThrow(/Objects are not valid as a KitaJSX child/);
   });
 
   test('Events', () => {
-    assert.equal(
-      '<div onclick="click" onmouseover="mouseover" ondrag="ondrag"></div>',
+    expect(
       <div onclick="click" onmouseover="mouseover" ondrag="ondrag"></div>
+    ).toMatchInlineSnapshot(
+      `"<div onclick="click" onmouseover="mouseover" ondrag="ondrag"></div>"`
     );
 
-    assert.equal(
-      '<form onfocus="focus"><input onblur="blur"/></form>',
+    expect(
       <form onfocus="focus">
         <input onblur="blur"></input>
       </form>
-    );
+    ).toMatchInlineSnapshot(`"<form onfocus="focus"><input onblur="blur"/></form>"`);
 
-    assert.equal(
-      '<video onabort="abort" onseeking="seeking"></video>',
-      <video onabort="abort" onseeking="seeking"></video>
+    expect(<video onabort="abort" onseeking="seeking"></video>).toMatchInlineSnapshot(
+      `"<video onabort="abort" onseeking="seeking"></video>"`
     );
   });
 });
diff --git a/packages/html/test/react.test.tsx b/packages/html/test/react.test.tsx
index 541a0abb6..17af05260 100644
--- a/packages/html/test/react.test.tsx
+++ b/packages/html/test/react.test.tsx
@@ -1,6 +1,5 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
-import Html from '../index';
+import { describe, expect, test } from 'vitest';
+import * as Html from '../src/index.js';
 
 const Header: Html.Component<any> = ({ children, ...attributes }) => (
   <h1 {...attributes}>{children}</h1>
@@ -14,42 +13,43 @@ function Button({ children, ...attributes }: Html.PropsWithChildren<any>) {
   );
 }
 
-function AssertChildren({ children, expect }: Html.PropsWithChildren<{ expect: any }>) {
-  assert.deepEqual(children, expect);
+function AssertChildren({
+  children,
+  expect: expectedChildren
+}: Html.PropsWithChildren<{ expect: any }>) {
+  expect(children).toEqual(expectedChildren);
   return <div>{children}</div>;
 }
 
 describe('React integration', () => {
   test('react children', () => {
-    assert.equal(
-      '<h1 class="title"></h1><span>Header Text</span><button type="button" class="original-class">Button Text</button>',
+    expect(
       <>
         <Header class="title"></Header>
         <span>Header Text</span>
         <Button>Button Text</Button>
       </>
+    ).toMatchInlineSnapshot(
+      `"<h1 class="title"></h1><span>Header Text</span><button type="button" class="original-class">Button Text</button>"`
     );
   });
 
   test('React-style children', () => {
-    assert.equal(
-      '<h1 class="title"><span>Header Text</span></h1>',
+    expect(
       <Header class="title">
         <span>Header Text</span>
       </Header>
-    );
+    ).toMatchInlineSnapshot(`"<h1 class="title"><span>Header Text</span></h1>"`);
 
-    assert.equal(
-      '<button type="button" class="override"></button>',
-      <Button class="override" />
+    expect(<Button class="override" />).toMatchInlineSnapshot(
+      `"<button type="button" class="override"></button>"`
     );
 
-    assert.equal(
-      '<button type="button" class="original-class">Button Text</button>',
-      <Button>Button Text</Button>
+    expect(<Button>Button Text</Button>).toMatchInlineSnapshot(
+      `"<button type="button" class="original-class">Button Text</button>"`
     );
 
-    assert.equal(
+    expect(
       <>
         <AssertChildren expect={undefined} />
         <AssertChildren expect={undefined}></AssertChildren>
@@ -65,28 +65,27 @@ describe('React integration', () => {
         <AssertChildren expect={[<div></div>, '1', <div></div>]}>
           <div></div>1<div></div>
         </AssertChildren>
-      </>,
-      '<div></div>' +
-        '<div></div>' +
-        '<div><div></div></div>' +
-        '<div>1</div>' +
-        '<div>1 2</div>' +
-        '<div><div></div><div></div></div>' +
-        '<div><div></div>1<div></div></div>'
+      </>
+    ).toMatchInlineSnapshot(
+      `"<div></div><div></div><div><div></div></div><div>1</div><div>1 2</div><div><div></div><div></div></div><div><div></div>1<div></div></div>"`
     );
   });
 
   test('React-style className', () => {
-    assert.equal(<div class="a"></div>, '<div class="a"></div>');
-    assert.equal(<div className="c"></div>, '<div class="c"></div>');
-    assert.equal(<div class="b" className="d"></div>, '<div class="b"></div>');
-    assert.equal(<div className="a" class="b"></div>, '<div class="b"></div>');
+    expect(<div class="a"></div>).toMatchInlineSnapshot(`"<div class="a"></div>"`);
+    expect(<div className="c"></div>).toMatchInlineSnapshot(`"<div class="c"></div>"`);
+    expect(<div class="b" className="d"></div>).toMatchInlineSnapshot(
+      `"<div class="b"></div>"`
+    );
+    expect(<div className="a" class="b"></div>).toMatchInlineSnapshot(
+      `"<div class="b"></div>"`
+    );
   });
 
   test('Reserved `key` attribute', () => {
     function Test({ key }: { key: number }) {
       // ensure the below component call does not passed key
-      assert.equal(key, undefined);
+      expect(key).toBe(undefined);
 
       return (
         <div
@@ -96,12 +95,11 @@ describe('React integration', () => {
       );
     }
 
-    assert.equal(
+    expect(
       <Test
         //@ts-expect-error - key is reserved
         key={1}
-      />,
-      '<div></div>'
-    );
+      />
+    ).toMatchInlineSnapshot(`"<div></div>"`);
   });
 });
diff --git a/packages/html/test/register.test.tsx b/packages/html/test/register.test.tsx
deleted file mode 100644
index 7f07c294c..000000000
--- a/packages/html/test/register.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
-import HtmlModule from '../index';
-
-describe('Global instance', () => {
-  test('registers Html to the global namespace', async () => {
-    // This should not be defined yet
-    assert.equal(typeof Html, 'undefined');
-
-    // Avoids printing warnings
-    const previous = process.env.NODE_NO_WARNINGS;
-    process.env.NODE_NO_WARNINGS = '1';
-
-    // Adds Html to the global namespace
-    await import('../register');
-
-    process.env.NODE_NO_WARNINGS = previous;
-
-    // Literally the same object
-    assert.equal(typeof Html, 'object');
-    assert.deepStrictEqual(Html, HtmlModule.Html);
-
-    // @ts-expect-error - Delete globalThis to test that it is added
-    delete globalThis.Html;
-
-    // Should be the same as the start of this test
-    assert.equal(typeof Html, 'undefined');
-  });
-});
diff --git a/packages/html/test/runtime.test.tsx b/packages/html/test/runtime.test.tsx
index f99d16b5d..32b8ac877 100644
--- a/packages/html/test/runtime.test.tsx
+++ b/packages/html/test/runtime.test.tsx
@@ -1,8 +1,6 @@
-import test, { describe } from 'node:test';
-
-import assert from 'node:assert';
-import { createElement, h } from '../';
-import { jsx, jsxs } from '../jsx-runtime';
+import { describe, expect, test } from 'vitest';
+import { createElement, h } from '../src/index.js';
+import { jsx, jsxs } from '../src/jsx-runtime.js';
 
 describe('Runtime behavior of JSX', () => {
   test('createElement', () => {
@@ -14,94 +12,95 @@ describe('Runtime behavior of JSX', () => {
       return Promise.resolve('<div>1</div>');
     }
 
-    assert.strictEqual(createElement, h);
+    expect(createElement).toBe(h);
 
     // children
-    assert.equal(
-      createElement('div', { id: 'test' }, 'Hello'),
-      '<div id="test">Hello</div>'
+    expect(createElement('div', { id: 'test' }, 'Hello')).toMatchInlineSnapshot(
+      `"<div id="test">Hello</div>"`
     );
 
     // no children
-    assert.equal(createElement('div', { id: 'test' }), '<div id="test"></div>');
+    expect(createElement('div', { id: 'test' })).toMatchInlineSnapshot(
+      `"<div id="test"></div>"`
+    );
 
     // no attributes
-    assert.equal(createElement('div', null), '<div></div>');
+    expect(createElement('div', null)).toMatchInlineSnapshot(`"<div></div>"`);
 
     // render Component
-    assert.equal(createElement(Component, null), '<div></div>');
-    assert.equal(createElement(Component, {}, 'child'), '<div>child</div>');
-    assert.equal(
-      createElement(Component, null, 'child ', 'child2'),
-      '<div>child child2</div>'
+    expect(createElement(Component, null)).toMatchInlineSnapshot(`"<div></div>"`);
+    expect(createElement(Component, {}, 'child')).toMatchInlineSnapshot(
+      `"<div>child</div>"`
+    );
+    expect(createElement(Component, null, 'child ', 'child2')).toMatchInlineSnapshot(
+      `"<div>child child2</div>"`
     );
-    assert.equal(
-      createElement(Component, {}, 'child ', 'child2'),
-      '<div>child child2</div>'
+    expect(createElement(Component, {}, 'child ', 'child2')).toMatchInlineSnapshot(
+      `"<div>child child2</div>"`
     );
 
     // render tag
-    assert.equal(
-      createElement('tag', { of: 'custom-html-tag' }),
-      '<custom-html-tag></custom-html-tag>'
+    expect(createElement('tag', { of: 'custom-html-tag' })).toMatchInlineSnapshot(
+      `"<custom-html-tag></custom-html-tag>"`
     );
 
     // render async Component
-    assert.ok(
+    expect(
       createElement('div', null, createElement(AsyncComponent, null)) instanceof Promise
-    );
+    ).toBeTruthy();
 
     // void element
-    assert.equal(createElement('meta', null), '<meta/>');
+    expect(createElement('meta', null)).toMatchInlineSnapshot(`"<meta/>"`);
   });
 
   test('jsx', () => {
     function Component(attrs: any) {
-      assert.deepStrictEqual(attrs.children, 'Hello');
+      expect(attrs.children).toEqual('Hello');
       return 'Hello';
     }
 
     // child
-    assert.equal(
-      jsx('div', { id: 'test', children: 'Hello' }),
-      '<div id="test">Hello</div>'
+    expect(jsx('div', { id: 'test', children: 'Hello' })).toMatchInlineSnapshot(
+      `"<div id="test">Hello</div>"`
     );
 
     // no child
-    assert.equal(jsx('div', { id: 'test' }), '<div id="test"></div>');
+    expect(jsx('div', { id: 'test' })).toMatchInlineSnapshot(`"<div id="test"></div>"`);
 
     // no attributes
-    assert.equal(jsx('div', {}), '<div></div>');
+    expect(jsx('div', {})).toMatchInlineSnapshot(`"<div></div>"`);
 
     // render tag
-    assert.equal(
-      jsx('tag', { of: 'custom-html-tag' }),
-      '<custom-html-tag></custom-html-tag>'
+    expect(jsx('tag', { of: 'custom-html-tag' })).toMatchInlineSnapshot(
+      `"<custom-html-tag></custom-html-tag>"`
     );
 
     // Single child
-    assert.equal(jsx(Component, { id: 'test', children: 'Hello' }), 'Hello');
+    expect(jsx(Component, { id: 'test', children: 'Hello' })).toBe('Hello');
   });
 
   test('jsxs', () => {
     function Component(attrs: any) {
-      assert.deepStrictEqual(attrs.children, ['Hello']);
+      expect(attrs.children).toEqual(['Hello']);
       return 'Hello';
     }
 
     // child
-    assert.equal(
-      jsxs('div', { id: 'test', children: ['Hello'] }),
-      '<div id="test">Hello</div>'
+    expect(jsxs('div', { id: 'test', children: ['Hello'] })).toMatchInlineSnapshot(
+      `"<div id="test">Hello</div>"`
     );
 
     // epmty childrens
-    assert.equal(jsxs('div', { id: 'test', children: [] }), '<div id="test"></div>');
+    expect(jsxs('div', { id: 'test', children: [] })).toMatchInlineSnapshot(
+      `"<div id="test"></div>"`
+    );
 
     // void element
-    assert.equal(jsxs('meta', { children: [] }), '<meta/>');
+    expect(jsxs('meta', { children: [] })).toMatchInlineSnapshot(`"<meta/>"`);
 
     // Array children
-    assert.equal(jsxs(Component, { id: 'test', children: ['Hello'] }), ['Hello']);
+    expect(jsxs(Component, { id: 'test', children: ['Hello'] })).toMatchInlineSnapshot(
+      `"Hello"`
+    );
   });
 });
diff --git a/packages/html/test/simple-html.test.tsx b/packages/html/test/simple-html.test.tsx
index 05ad4535c..9de414095 100644
--- a/packages/html/test/simple-html.test.tsx
+++ b/packages/html/test/simple-html.test.tsx
@@ -1,52 +1,58 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
+import { describe, expect, test } from 'vitest';
 
 describe('Html structures', () => {
   test('simple html structures', () => {
-    assert.equal(<a href="test">a link</a>, '<a href="test">a link</a>');
+    expect(<a href="test">a link</a>).toMatchInlineSnapshot(
+      `"<a href="test">a link</a>"`
+    );
 
-    assert.equal(
-      `<ul><li>1</li><li>2</li></ul>`,
+    expect(
       <ul>
         {[1, 2].map((li) => (
           <li>{li}</li>
         ))}
       </ul>
-    );
+    ).toMatchInlineSnapshot(`"<ul><li>1</li><li>2</li></ul>"`);
 
-    assert.equal(
-      '<button onclick="doSomething"></button>',
-      <button onclick="doSomething"></button>
+    expect(<button onclick="doSomething"></button>).toMatchInlineSnapshot(
+      `"<button onclick="doSomething"></button>"`
     );
 
-    assert.equal('<div class="class-a"></div>', <div class="class-a"></div>);
+    expect(<div class="class-a"></div>).toMatchInlineSnapshot(
+      `"<div class="class-a"></div>"`
+    );
 
-    assert.equal(
-      '<script src="jquery.js" integrity="sha256-123=" crossorigin="anonymous"></script>',
+    expect(
       <script src="jquery.js" integrity="sha256-123=" crossorigin="anonymous"></script>
+    ).toMatchInlineSnapshot(
+      `"<script src="jquery.js" integrity="sha256-123=" crossorigin="anonymous"></script>"`
     );
   });
 
   test('untyped & unknown attributes', () => {
-    assert.equal(<a not-href></a>, '<a not-href></a>');
-    assert.equal(<c not-href></c>, '<c not-href></c>');
-    assert.equal(<c notHref></c>, '<c notHref></c>');
-    assert.equal(<c notHref></c>, '<c notHref></c>');
+    expect(<a not-href></a>).toMatchInlineSnapshot(`"<a not-href></a>"`);
+    //@ts-expect-error - should allow unknown attributes
+    expect(<c not-href></c>).toMatchInlineSnapshot(`"<c not-href></c>"`);
+    //@ts-expect-error - should allow unknown attributes
+    expect(<c notHref></c>).toMatchInlineSnapshot(`"<c notHref></c>"`);
+    //@ts-expect-error - should allow unknown attributes
+    expect(<c notHref></c>).toMatchInlineSnapshot(`"<c notHref></c>"`);
 
     function D() {
       return <div />;
     }
 
     // @ts-expect-error - should complain about unknown tag on component and not render it
-    assert.equal(<D notHref></D>, '<div></div>');
+    expect(<D notHref></D>).toMatchInlineSnapshot(`"<div></div>"`);
   });
 
   test('simple svg structure', () => {
-    assert.equal(
+    expect(
       <svg width="100" height="100" viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
-      </svg>,
-      '<svg width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>'
+      </svg>
+    ).toMatchInlineSnapshot(
+      `"<svg width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>"`
     );
   });
 });
diff --git a/packages/html/test/style.test.tsx b/packages/html/test/style.test.tsx
index 4b3843e1a..98abb0e3f 100644
--- a/packages/html/test/style.test.tsx
+++ b/packages/html/test/style.test.tsx
@@ -1,27 +1,26 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
-import { styleToString } from '../index';
+import { describe, expect, test } from 'vitest';
+import { styleToString } from '../src/index.js';
 
 describe('Style', () => {
   test('camel case property', () => {
-    assert.equal(
+    expect(
       <>
         <div style={{ backgroundColor: 'red' }}></div>
         <div style="background-color: blue;"></div>
         <div style="background-color:green;"></div>
         <div style="backgroundColor:green;"></div>
-      </>,
-      '<div style="background-color:red;"></div><div style="background-color: blue;"></div><div style="background-color:green;"></div><div style="backgroundColor:green;"></div>'
+      </>
+    ).toMatchInlineSnapshot(
+      `"<div style="background-color:red;"></div><div style="background-color: blue;"></div><div style="background-color:green;"></div><div style="backgroundColor:green;"></div>"`
     );
   });
 
   test('accepts undefined', () => {
-    assert.equal(
-      <div style={{ backgroundColor: undefined }}></div>,
-      '<div style=""></div>'
+    expect(<div style={{ backgroundColor: undefined }}></div>).toMatchInlineSnapshot(
+      `"<div style=""></div>"`
     );
 
-    assert.equal(<div style={undefined}></div>, '<div></div>');
+    expect(<div style={undefined}></div>).toMatchInlineSnapshot(`"<div></div>"`);
   });
 
   test('CSSProperties', () => {
@@ -31,19 +30,20 @@ describe('Style', () => {
       not: 'defined'
     };
 
-    assert.equal(<div style={style} />, '<div style="color:red;not:defined;"></div>');
+    expect(<div style={style} />).toMatchInlineSnapshot(
+      `"<div style="color:red;not:defined;"></div>"`
+    );
   });
 
   test('Weird values', () => {
-    assert.equal(
+    expect(
       styleToString({
         a: 0,
         b: undefined,
         c: 1,
         d: '2',
         e: { f: 3 }
-      }),
-      'a:0;c:1;d:2;e:[object Object];'
-    );
+      })
+    ).toBe('a:0;c:1;d:2;e:[object Object];');
   });
 });
diff --git a/packages/html/test/suspense.test.tsx b/packages/html/test/suspense.test.tsx
index 8a1c4e593..4a34a884f 100644
--- a/packages/html/test/suspense.test.tsx
+++ b/packages/html/test/suspense.test.tsx
@@ -1,10 +1,9 @@
 import { JSDOM } from 'jsdom';
-import assert from 'node:assert';
 import { text } from 'node:stream/consumers';
-import { afterEach, describe, it, mock, test } from 'node:test';
 import { setImmediate, setTimeout } from 'node:timers/promises';
-import Html, { type PropsWithChildren } from '../index';
-import { Suspense, SuspenseScript, renderToStream } from '../suspense';
+import { afterEach, describe, expect, it, test, vi } from 'vitest';
+import { Html, type PropsWithChildren } from '../src/index.js';
+import { Suspense, SuspenseScript, renderToStream } from '../src/suspense.js';
 
 async function SleepForMs({ ms, children }: PropsWithChildren<{ ms: number }>) {
   await setTimeout(ms * 50);
@@ -17,7 +16,7 @@ function Throw(): string {
 
 // Detect leaks of pending promises
 afterEach(() => {
-  assert.equal(SUSPENSE_ROOT.requests.size, 0, 'Suspense root left pending requests');
+  expect(SUSPENSE_ROOT.requests.size).toBe(0);
 
   // Reset suspense root
   SUSPENSE_ROOT.autoScript = true;
@@ -27,33 +26,33 @@ afterEach(() => {
 
 describe('Suspense', () => {
   test('Sync without suspense', async () => {
-    assert.equal(await text(renderToStream(() => <div />)), <div />);
+    expect(await text(renderToStream(() => <div />))).toBe(<div />);
 
-    assert.equal(await text(renderToStream(async () => <div />)), <div />);
+    expect(await text(renderToStream(async () => <div />))).toBe(<div />);
   });
 
   test('Suspense sync children', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>}>
             <div>2</div>
           </Suspense>
         ))
-      ),
-      <div>2</div>
-    );
+      )
+    ).toBe(<div>2</div>);
   });
 
   test('Suspense async children', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>}>
             <SleepForMs ms={2} />
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -72,14 +71,15 @@ describe('Suspense', () => {
   });
 
   test('Suspense async children & fallback', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
             <SleepForMs ms={2} />
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -98,14 +98,15 @@ describe('Suspense', () => {
   });
 
   test('Suspense async fallback sync children', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
             <div>2</div>
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div>2</div>
       </>
@@ -124,8 +125,7 @@ describe('Suspense', () => {
             );
           })
         ).then((res) => {
-          assert.equal(
-            res,
+          expect(res).toBe(
             <>
               <div id="B:1" data-sf>
                 <div>1</div>
@@ -148,14 +148,15 @@ describe('Suspense', () => {
 
   test('Multiple sync renders cleanup', async () => {
     for (let i = 0; i < 10; i++) {
-      assert.equal(
+      expect(
         await text(
           renderToStream((r) => (
             <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
               <SleepForMs ms={2} />
             </Suspense>
           ))
-        ),
+        )
+      ).toBe(
         <>
           <div id="B:1" data-sf>
             <div>1</div>
@@ -175,7 +176,7 @@ describe('Suspense', () => {
   });
 
   test('Multiple children', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <div>
@@ -192,7 +193,8 @@ describe('Suspense', () => {
             </Suspense>
           </div>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div>
           <div id="B:1" data-sf>
@@ -260,8 +262,7 @@ describe('Suspense', () => {
       //@ts-expect-error - testing invalid promises
       const seconds = +promises[index]!.seconds;
 
-      assert.strictEqual(
-        result,
+      expect(result).toBe(
         <>
           <div>
             {Array.from({ length: seconds }, (_, i) => (
@@ -290,26 +291,26 @@ describe('Suspense', () => {
 
   it('ensures autoScript works', async () => {
     // Sync does not needs autoScript
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>}>
             <div>2</div>
           </Suspense>
         ))
-      ),
-      <div>2</div>
-    );
+      )
+    ).toBe(<div>2</div>);
 
     // Async renders SuspenseScript
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>}>
             {Promise.resolve(<div>2</div>)}
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -330,14 +331,15 @@ describe('Suspense', () => {
     SUSPENSE_ROOT.autoScript = false;
 
     // Async renders SuspenseScript
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>}>
             {Promise.resolve(<div>2</div>)}
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -361,10 +363,10 @@ describe('Suspense', () => {
       </div>
     ));
 
-    assert(stream.readable);
+    expect(stream.readable).toBeTruthy();
 
     // emits end event
-    const fn = mock.fn();
+    const fn = vi.fn();
     stream.on('end', fn);
 
     const chunks = [];
@@ -373,11 +375,10 @@ describe('Suspense', () => {
       chunks.push(chunk);
     }
 
-    assert.equal(fn.mock.calls.length, 1);
-    assert.equal(chunks.length, 2);
+    expect(fn.mock.calls.length).toBe(1);
+    expect(chunks.length).toBe(2);
 
-    assert.equal(
-      chunks[0].toString(),
+    expect(chunks[0].toString()).toBe(
       <div>
         <div id="B:1" data-sf>
           <div>2</div>
@@ -385,8 +386,7 @@ describe('Suspense', () => {
       </div>
     );
 
-    assert.equal(
-      chunks[1].toString(),
+    expect(chunks[1].toString()).toBe(
       <>
         {SuspenseScript}
 
@@ -403,39 +403,38 @@ describe('Suspense', () => {
   test('renderToStream without suspense', async () => {
     const stream = renderToStream(() => '<div>not suspense</div>', 1227);
 
-    assert.ok(stream.readable);
+    expect(stream.readable).toBeTruthy();
 
     const data = stream.read();
 
-    assert.equal(data.toString(), '<div>not suspense</div>');
+    expect(data.toString()).toBe('<div>not suspense</div>');
 
-    assert.equal(await text(stream), '');
+    expect(await text(stream)).toBe('');
 
-    assert.ok(stream.closed);
+    expect(stream.closed).toBeTruthy();
   });
 
   it('tests suspense without children', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           //@ts-expect-error - testing invalid children
           <Suspense rid={r} fallback={<div>1</div>}></Suspense>
         ))
-      ),
-      ''
-    );
+      )
+    ).toBe('');
   });
 
   it('works with async error handlers', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>} catch={Promise.resolve(<div>2</div>)}>
             {Promise.reject(<div>3</div>)}
           </Suspense>
         ))
-      ),
-
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -454,7 +453,7 @@ describe('Suspense', () => {
   });
 
   it('works with deep suspense calls', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((rid) => {
           return (
@@ -478,7 +477,8 @@ describe('Suspense', () => {
             </div>
           );
         })
-      ),
+      )
+    ).toBe(
       <>
         <div>
           <div id="B:2" data-sf>
@@ -513,7 +513,7 @@ describe('Suspense', () => {
   });
 
   it('works with deep suspense calls resolving first', async () => {
-    assert.equal(
+    expect(
       await text(
         renderToStream((rid) => {
           return (
@@ -537,7 +537,8 @@ describe('Suspense', () => {
             </div>
           );
         })
-      ),
+      )
+    ).toBe(
       <>
         <div>
           <div id="B:2" data-sf>
@@ -594,8 +595,7 @@ describe('Suspense', () => {
       ))
     );
 
-    assert.equal(
-      html,
+    expect(html).toBe(
       <>
         <div>
           <div id="B:2" data-sf>
@@ -705,8 +705,9 @@ describe('Suspense', () => {
     );
 
     // tests with final html result
-    assert.equal(
-      new JSDOM(html, { runScripts: 'dangerously' }).window.document.body.innerHTML,
+    expect(
+      new JSDOM(html, { runScripts: 'dangerously' }).window.document.body.innerHTML
+    ).toBe(
       <>
         <div>
           <div>Outer 0!</div>
@@ -753,8 +754,7 @@ describe('Suspense', () => {
       ))
     );
 
-    assert.equal(
-      html,
+    expect(html).toBe(
       <>
         <div>
           <div id="B:1" data-sf>
@@ -799,9 +799,9 @@ describe('Suspense', () => {
         ))
       );
 
-      assert.fail('should throw');
+      throw new Error('should throw');
     } catch (error) {
-      assert.equal(error, 'Fallback!');
+      expect(error).toBe('Fallback!');
     }
   });
 });
@@ -815,8 +815,7 @@ describe('Suspense errors', () => {
         </Suspense>
       );
 
-      assert.equal(
-        outside,
+      expect(outside).toBe(
         <div id="B:1" data-sf>
           1
         </div>
@@ -824,10 +823,10 @@ describe('Suspense errors', () => {
 
       const requestData = SUSPENSE_ROOT.requests.get(1);
 
-      assert.equal(requestData?.running, 1);
-      assert.equal(requestData?.sent, false);
+      expect(requestData?.running).toBe(1);
+      expect(requestData?.sent).toBe(false);
     } finally {
-      assert.ok(SUSPENSE_ROOT.requests.has(1));
+      expect(SUSPENSE_ROOT.requests.has(1)).toBeTruthy();
 
       // cleans up
       SUSPENSE_ROOT.requests.delete(1);
@@ -835,16 +834,15 @@ describe('Suspense errors', () => {
   });
 
   it('tests sync errors are thrown', async () => {
-    await assert.rejects(
+    await expect(
       text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>fallback</div>}>
             <Throw />
           </Suspense>
         ))
-      ),
-      /test/
-    );
+      )
+    ).rejects.toThrow(/test/);
   });
 
   it('test sync errors after suspense', async () => {
@@ -866,9 +864,9 @@ describe('Suspense errors', () => {
         ))
       );
 
-      assert.fail('should throw');
+      throw new Error('should throw');
     } catch (error: any) {
-      assert.equal(error.message, 'test');
+      expect(error.message).toBe('test');
     }
   });
 
@@ -884,9 +882,9 @@ describe('Suspense errors', () => {
         ))
       );
 
-      assert.fail('should throw');
+      throw new Error('should throw');
     } catch (error) {
-      assert.equal(error, err);
+      expect(error).toBe(err);
     }
   });
 
@@ -902,17 +900,16 @@ describe('Suspense errors', () => {
     try {
       for await (const data of stream) {
         // Second stream would be the suspense result, which errors out
-        assert.equal(
-          data.toString(),
+        expect(data.toString()).toBe(
           <div id="B:1" data-sf>
             <div>1</div>
           </div>
         );
       }
 
-      assert.fail('should throw');
+      throw new Error('should throw');
     } catch (error) {
-      assert.equal(error, err);
+      expect(error).toBe(err);
     }
   });
 
@@ -920,14 +917,14 @@ describe('Suspense errors', () => {
     const err = new Error('component failed');
 
     // Sync does not needs autoScript
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense
             rid={r}
             fallback={<div>1</div>}
             catch={(err2) => {
-              assert.equal(err2, err);
+              expect(err2).toBe(err);
 
               return <div>3</div>;
             }}
@@ -935,7 +932,8 @@ describe('Suspense errors', () => {
             {Promise.reject(err)}
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -953,29 +951,29 @@ describe('Suspense errors', () => {
   });
 
   it('throws when rid is not provided', async () => {
-    await assert.rejects(
+    await expect(
       text(
         renderToStream(() => (
           //@ts-expect-error
           <Suspense fallback={<div>1</div>}>{Promise.resolve('123')}</Suspense>
         ))
-      ),
-      /Error: Suspense requires a `rid` to be specified./
-    );
+      )
+    ).rejects.toThrow(/Suspense requires a `rid` to be specified./);
   });
 
   it('tests suspense with error boundary', async () => {
     const err = new Error('component failed');
 
     // Sync does not needs autoScript
-    assert.equal(
+    expect(
       await text(
         renderToStream((r) => (
           <Suspense rid={r} fallback={<div>1</div>} catch={<div>3</div>}>
             {Promise.reject(err)}
           </Suspense>
         ))
-      ),
+      )
+    ).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -1015,8 +1013,7 @@ describe('Suspense errors', () => {
 
     await new Promise((res) => rendered.once('close', res));
 
-    assert.equal(
-      firstChunk.toString(),
+    expect(firstChunk.toString()).toBe(
       <div id="B:1" data-sf>
         <div>1</div>
       </div>
@@ -1026,7 +1023,7 @@ describe('Suspense errors', () => {
     // The error below would be thrown:
     // Error [ERR_STREAM_PUSH_AFTER_EOF]: stream.push() after EOF
 
-    assert.equal(await text(rendered), '');
+    expect(await text(rendered)).toBe('');
   });
 
   it('does not allows to use the same rid', async () => {
@@ -1042,15 +1039,13 @@ describe('Suspense errors', () => {
 
     const stream = renderToStream(render, 1);
 
-    await assert.rejects(
-      text(renderToStream(render, 1)),
-      /Error: The provided Request Id is already in use: 1./
+    await expect(text(renderToStream(render, 1))).rejects.toThrow(
+      /The provided Request Id is already in use: 1./
     );
 
     const html = await text(stream);
 
-    assert.equal(
-      html,
+    expect(html).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
@@ -1076,9 +1071,9 @@ describe('Suspense errors', () => {
     try {
       await text(stream);
 
-      assert.fail('should throw');
+      throw new Error('should throw');
     } catch (error: any) {
-      assert.equal(error.message, 'Factory error');
+      expect(error.message).toBe('Factory error');
     }
   });
 });
diff --git a/packages/html/test/tags.test.tsx b/packages/html/test/tags.test.tsx
index 75c0d4323..aa1f06292 100644
--- a/packages/html/test/tags.test.tsx
+++ b/packages/html/test/tags.test.tsx
@@ -1,69 +1,71 @@
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
+import { describe, expect, test } from 'vitest';
 
 describe('Tags', () => {
   test('Self-closing html tags', () => {
-    assert.equal('<area/>', <area></area>);
+    expect(<area></area>).toMatchInlineSnapshot(`"<area/>"`);
 
-    assert.equal('<hr/>', <hr></hr>);
+    expect(<hr></hr>).toMatchInlineSnapshot(`"<hr/>"`);
 
-    assert.equal('<hr>content</hr>', <hr>content</hr>);
+    expect(<hr>content</hr>).toMatchInlineSnapshot(`"<hr>content</hr>"`);
 
-    assert.equal('<meta charset="utf8"/>', <meta charset="utf8"></meta>);
+    expect(<meta charset="utf8"></meta>).toMatchInlineSnapshot(
+      `"<meta charset="utf8"/>"`
+    );
 
-    assert.equal('<video autoplay></video>', <video autoplay></video>);
+    expect(<video autoplay></video>).toMatchInlineSnapshot(`"<video autoplay></video>"`);
     //@ts-expect-error - invalid type
-    assert.equal('<video autoplay=""></video>', <video autoplay=""></video>);
+    expect(<video autoplay=""></video>).toMatchInlineSnapshot(
+      `"<video autoplay=""></video>"`
+    );
     //@ts-expect-error - invalid type
-    assert.equal('<video autoplay="test"></video>', <video autoplay="test"></video>);
+    expect(<video autoplay="test"></video>).toMatchInlineSnapshot(
+      `"<video autoplay="test"></video>"`
+    );
   });
 
   test('custom tag', () => {
-    assert.equal(<tag of="div" attr />, '<div attr></div>');
+    expect(<tag of="div" attr />).toMatchInlineSnapshot(`"<div attr></div>"`);
 
-    assert.equal(<tag of="div" attr></tag>, '<div attr></div>');
-    assert.equal(
+    expect(<tag of="div" attr></tag>).toMatchInlineSnapshot(`"<div attr></div>"`);
+    expect(
       <tag of="div" attr>
         <div></div>
         <div></div>
-      </tag>,
-      '<div attr><div></div><div></div></div>'
-    );
+      </tag>
+    ).toMatchInlineSnapshot(`"<div attr><div></div><div></div></div>"`);
 
-    assert.equal(
+    expect(
       <tag of="div" attr>
         1
-      </tag>,
-      '<div attr>1</div>'
-    );
+      </tag>
+    ).toMatchInlineSnapshot(`"<div attr>1</div>"`);
 
-    assert.equal(
+    expect(
       <tag of="div" attr>
         {' '}
-      </tag>,
-      '<div attr> </div>'
-    );
+      </tag>
+    ).toMatchInlineSnapshot(`"<div attr> </div>"`);
   });
 
   test('custom void tag', () => {
-    assert.equal(<tag of="link" attr />, '<link attr/>');
+    expect(<tag of="link" attr />).toMatchInlineSnapshot(`"<link attr/>"`);
 
-    assert.equal(<tag of="link" attr></tag>, '<link attr/>');
+    expect(<tag of="link" attr></tag>).toMatchInlineSnapshot(`"<link attr/>"`);
 
-    assert.equal(
+    expect(
       <tag of="link" attr>
         1
-      </tag>,
-      '<link attr>1</link>'
-    );
+      </tag>
+    ).toMatchInlineSnapshot(`"<link attr>1</link>"`);
 
-    assert.equal(
+    expect(
       <tag of="link" attr>
         {' '}
-      </tag>,
-      '<link attr> </link>'
-    );
+      </tag>
+    ).toMatchInlineSnapshot(`"<link attr> </link>"`);
 
-    assert.equal(<tag of="my-custom-KEBAB" />, '<my-custom-KEBAB></my-custom-KEBAB>');
+    expect(<tag of="my-custom-KEBAB" />).toMatchInlineSnapshot(
+      `"<my-custom-KEBAB></my-custom-KEBAB>"`
+    );
   });
 });
diff --git a/packages/html/test/util.test.ts b/packages/html/test/util.test.ts
index 9c668147d..cd31d12c7 100644
--- a/packages/html/test/util.test.ts
+++ b/packages/html/test/util.test.ts
@@ -1,10 +1,9 @@
-import assert from 'node:assert';
-import { describe, test } from 'node:test';
-import Html from '../index';
+import { describe, expect, test } from 'vitest';
+import { Html } from '../src/index.js';
 
 describe('Util', () => {
   test('Undefined contents', async () => {
-    assert.equal(
+    expect(
       await Html.contentsToString([
         undefined,
         Promise.resolve(undefined),
@@ -13,9 +12,8 @@ describe('Util', () => {
         Promise.resolve(null),
         [null, Promise.resolve(null)],
         [[[[[[[]]]]]]]
-      ]),
-      ''
-    );
+      ])
+    ).toBe('');
 
     for (const i of [
       undefined,
@@ -26,19 +24,18 @@ describe('Util', () => {
       [null, Promise.resolve(null)],
       [[[[[[[]]]]]]]
     ]) {
-      assert.equal(await Html.contentToString(i), '');
+      expect(await Html.contentToString(i)).toBe('');
     }
 
-    assert.equal(await Html.contentsToString([]), '');
+    expect(await Html.contentsToString([])).toBe('');
   });
 
   test('Deep scaping', async () => {
-    assert.equal(
-      await Html.contentsToString(['<>', Promise.resolve('<>')], true),
+    expect(await Html.contentsToString(['<>', Promise.resolve('<>')], true)).toBe(
       '&lt;>&lt;>'
     );
 
-    assert.equal(
+    expect(
       await Html.contentsToString(
         [
           undefined,
@@ -50,24 +47,22 @@ describe('Util', () => {
           [[[[[[['<>']]]]]]]
         ],
         true
-      ),
-      '&lt;>'
-    );
+      )
+    ).toBe('&lt;>');
   });
 
   test('String contents', async () => {
-    assert.equal(
+    expect(
       await Html.contentsToString([
         'a',
         Promise.resolve('b'),
         ['c', Promise.resolve('d')]
-      ]),
-      'abcd'
-    );
+      ])
+    ).toBe('abcd');
   });
 
   test('Only string contents', async () => {
-    assert.equal(await Html.contentsToString(['a', 'b', ['c', 'd']]), 'abcd');
+    expect(await Html.contentsToString(['a', 'b', ['c', 'd']])).toBe('abcd');
   });
 
   test('Promises', async () => {
@@ -77,11 +72,11 @@ describe('Util', () => {
       Promise.resolve(['c', Promise.resolve('d')])
     ]);
 
-    assert.ok(result instanceof Promise);
-    assert.equal(await result, 'abcd');
+    expect(result instanceof Promise).toBeTruthy();
+    expect(await result).toBe('abcd');
   });
 
   test('h() function', async () => {
-    assert.equal(Html.h, Html.createElement);
+    expect(Html.h).toBe(Html.createElement);
   });
 });
diff --git a/packages/html/tsconfig.build.json b/packages/html/tsconfig.build.json
new file mode 100644
index 000000000..ed84364ea
--- /dev/null
+++ b/packages/html/tsconfig.build.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "tsBuildInfoFile": "dist/.tsbuildinfo"
+  },
+  "include": ["src"]
+}
diff --git a/packages/html/tsconfig.json b/packages/html/tsconfig.json
index 3833b5846..cbe7f4e7d 100644
--- a/packages/html/tsconfig.json
+++ b/packages/html/tsconfig.json
@@ -1,38 +1,9 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
     "jsx": "react-jsx",
-    "jsxImportSource": "..",
-    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
-    "module": "CommonJS",
-    "moduleResolution": "node",
-    "incremental": true,
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "declaration": true,
-    "importHelpers": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "strictFunctionTypes": true,
-    "strictBindCallApply": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "useUnknownInCatchVariables": true,
-    "alwaysStrict": true,
-    "outDir": "dist",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    "skipDefaultLibCheck": true
+    "jsxImportSource": "self",
+    "outDir": "./dist"
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.d.ts", "node_modules/csstype"],
-  "exclude": ["node_modules", "dist", "coverage", "benchmarks"]
+  "include": ["src", "test"]
 }
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index f611a07f2..8705731b4 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -21,10 +21,9 @@
   },
   "scripts": {
     "build": "tsgo -p tsconfig.build.json",
-    "dev": "tsgo -p tsconfig.build.json --watch",
     "prepack": "npm run build",
-    "test": "pnpm build && pnpm install && pnpm test-exec",
-    "test-exec": "node --require @swc-node/register --test test/**/*.test.ts"
+    "pretest": "npm run build",
+    "test": "vitest --coverage --typecheck --run"
   },
   "dependencies": {
     "chalk": "^5.6.2",
@@ -32,16 +31,16 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "@swc-node/register": "catalog:",
-    "@swc/helpers": "catalog:",
     "@types/node": "catalog:",
     "@types/yargs": "^17.0.35",
     "@typescript/native-preview": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
     "fast-defer": "^1.1.9",
-    "self": "file:"
+    "self": "link:",
+    "vitest": "catalog:"
   },
   "peerDependencies": {
-    "@kitajs/html": "workspace:^4.2.10",
-    "typescript": "^5.6.2"
+    "@kitajs/html": "workspace:^",
+    "typescript": "catalog:"
   }
 }
diff --git a/packages/ts-html-plugin/src/index.ts b/packages/ts-html-plugin/src/index.ts
index e34ea3730..f8a4ed71d 100644
--- a/packages/ts-html-plugin/src/index.ts
+++ b/packages/ts-html-plugin/src/index.ts
@@ -1,7 +1,7 @@
 import type { default as TS, server } from 'typescript/lib/tsserverlibrary';
 import { proxyObject, recursiveDiagnoseJsxElements } from './util';
 
-export = function initHtmlPlugin(modules: { typescript: typeof TS }) {
+module.exports = function (modules: { typescript: typeof TS }) {
   const ts = modules.typescript;
 
   return {
diff --git a/packages/ts-html-plugin/test/arrays.test.ts b/packages/ts-html-plugin/test/arrays.test.ts
index 2deb8d117..99bcf9b09 100644
--- a/packages/ts-html-plugin/test/arrays.test.ts
+++ b/packages/ts-html-plugin/test/arrays.test.ts
@@ -1,12 +1,11 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { TSLangServer } from './util/lang-server';
 
 it('Lists and arrays can be used normally', async () => {
   await using server = new TSLangServer(__dirname);
 
   const diagnostics = await server.openWithDiagnostics /* tsx */ `
-    const list: JSX.Element[] = [];  
+    const list: JSX.Element[] = [];
 
     export default (
       <>
@@ -15,5 +14,5 @@ it('Lists and arrays can be used normally', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, []);
+  expect(diagnostics.body).toEqual([]);
 });
diff --git a/packages/ts-html-plugin/test/children.test.ts b/packages/ts-html-plugin/test/children.test.ts
index 8c36b2236..60a8750e0 100644
--- a/packages/ts-html-plugin/test/children.test.ts
+++ b/packages/ts-html-plugin/test/children.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { TSLangServer } from './util/lang-server';
 
 it('Ensure PropsWithChildren works as normal', async () => {
@@ -9,23 +8,23 @@ it('Ensure PropsWithChildren works as normal', async () => {
     export interface Extension extends PropsWithChildren {
       user?: { name: string };
     }
-    
+
     export function Test({ children }: Extension) {
       return <div>{children}</div>;
     }
-    
+
     export function Test2(props: Extension) {
       return <div>{props.children}</div>;
     }
-    
+
     export function Test3({ children }: PropsWithChildren) {
       return <div>{children}</div>;
     }
-    
+
     export function Test4(props: PropsWithChildren) {
       return <div>{props.children}</div>;
     }
-    
+
     export function Test5(props?: PropsWithChildren) {
       return <div>{props?.children}</div>;
     }
@@ -49,5 +48,5 @@ it('Ensure PropsWithChildren works as normal', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, []);
+  expect(diagnostics.body).toEqual([]);
 });
diff --git a/packages/ts-html-plugin/test/component-xss.test.ts b/packages/ts-html-plugin/test/component-xss.test.ts
index b327c3584..046eda386 100644
--- a/packages/ts-html-plugin/test/component-xss.test.ts
+++ b/packages/ts-html-plugin/test/component-xss.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { ComponentXss } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
@@ -38,7 +37,7 @@ it('Ensure <Component /> children are safe', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       start: { line: 39, offset: 23 },
       end: { line: 39, offset: 24 },
@@ -100,7 +99,7 @@ it('Ensure <Component /> children are safe using "e" tag function', async () =>
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       start: { line: 39, offset: 23 },
       end: { line: 39, offset: 24 },
diff --git a/packages/ts-html-plugin/test/double-escape.test.ts b/packages/ts-html-plugin/test/double-escape.test.ts
index 84bc75eeb..0458c7a81 100644
--- a/packages/ts-html-plugin/test/double-escape.test.ts
+++ b/packages/ts-html-plugin/test/double-escape.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { DoubleEscape } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
@@ -23,7 +22,7 @@ it('Avoid escaping twice', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       start: { line: 36, offset: 14 },
       end: { line: 36, offset: 18 },
diff --git a/packages/ts-html-plugin/test/operators.test.ts b/packages/ts-html-plugin/test/operators.test.ts
index 803cf6634..dec8790ae 100644
--- a/packages/ts-html-plugin/test/operators.test.ts
+++ b/packages/ts-html-plugin/test/operators.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { DoubleEscape, Xss } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
@@ -71,7 +70,7 @@ it('Operators are evaluated normally', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       start: { line: 40, offset: 34 },
       end: { line: 40, offset: 38 },
diff --git a/packages/ts-html-plugin/test/readme.test.ts b/packages/ts-html-plugin/test/readme.test.ts
index bc4e018c8..aafc7e4d3 100644
--- a/packages/ts-html-plugin/test/readme.test.ts
+++ b/packages/ts-html-plugin/test/readme.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { Xss } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
@@ -14,7 +13,7 @@ it('Ensures readme checks will throw error', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       category: 'error',
       code: Xss.code,
diff --git a/packages/ts-html-plugin/test/safe.test.ts b/packages/ts-html-plugin/test/safe.test.ts
index bbe10a13e..5390b717d 100644
--- a/packages/ts-html-plugin/test/safe.test.ts
+++ b/packages/ts-html-plugin/test/safe.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { TSLangServer } from './util/lang-server';
 
 it('Allow correct xss usage', async () => {
@@ -75,5 +74,5 @@ it('Allow correct xss usage', async () => {
     );
 `;
 
-  assert.strictEqual(diagnostics.body.length, 0);
+  expect(diagnostics.body).toHaveLength(0);
 });
diff --git a/packages/ts-html-plugin/test/unsafe-tags.test.ts b/packages/ts-html-plugin/test/unsafe-tags.test.ts
index 118e04522..5fc947d76 100644
--- a/packages/ts-html-plugin/test/unsafe-tags.test.ts
+++ b/packages/ts-html-plugin/test/unsafe-tags.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { Xss } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
@@ -30,7 +29,7 @@ it('Detect xss prone usage', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       start: { line: 37, offset: 15 },
       end: { line: 37, offset: 19 },
diff --git a/packages/ts-html-plugin/test/util/lang-server.ts b/packages/ts-html-plugin/test/util/lang-server.ts
index 46187e176..d3d319d2d 100644
--- a/packages/ts-html-plugin/test/util/lang-server.ts
+++ b/packages/ts-html-plugin/test/util/lang-server.ts
@@ -64,11 +64,10 @@ export class TSLangServer {
   isClosed = false;
   server: ChildProcess;
   sequence = 0;
+  debug: boolean;
 
-  constructor(
-    projectPath: string,
-    private readonly debug = false
-  ) {
+  constructor(projectPath: string, debug = false) {
+    this.debug = debug;
     this.server = fork(require.resolve('typescript/lib/tsserver'), {
       cwd: projectPath,
       stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
diff --git a/packages/ts-html-plugin/test/warn.test.ts b/packages/ts-html-plugin/test/warn.test.ts
index 14351d0f8..61d838ff6 100644
--- a/packages/ts-html-plugin/test/warn.test.ts
+++ b/packages/ts-html-plugin/test/warn.test.ts
@@ -1,5 +1,4 @@
-import assert from 'node:assert';
-import { it } from 'node:test';
+import { expect, it } from 'vitest';
 import { UnusedSafe } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
@@ -20,7 +19,7 @@ it('Warn on unused `safe` tags', async () => {
     );
 `;
 
-  assert.deepStrictEqual(diagnostics.body, [
+  expect(diagnostics.body).toEqual([
     {
       start: { line: 36, offset: 14 },
       end: { line: 36, offset: 18 },
diff --git a/packages/ts-html-plugin/tsconfig.json b/packages/ts-html-plugin/tsconfig.json
index 6e521c8a2..c5b66c772 100644
--- a/packages/ts-html-plugin/tsconfig.json
+++ b/packages/ts-html-plugin/tsconfig.json
@@ -1,12 +1,13 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ES2022",
+    "verbatimModuleSyntax": false,
+    "target": "esnext",
     "jsx": "react-jsx",
     "jsxImportSource": "@kitajs/html",
     "module": "CommonJS",
     "moduleResolution": "Node",
-    "outDir": "dist",
+    "outDir": "./dist",
     "plugins": [{ "name": "self" }]
   },
   "include": ["src", "test"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 715a5a276..5d494760c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,38 +10,44 @@ catalogs:
       specifier: ^1.11.1
       version: 1.11.1
     '@swc/helpers':
-      specifier: ^0.5.17
-      version: 0.5.17
+      specifier: ^0.5.18
+      version: 0.5.18
     '@types/jsdom':
-      specifier: ^21.1.7
-      version: 21.1.7
+      specifier: ^27.0.0
+      version: 27.0.0
     '@types/node':
-      specifier: ^24.5.0
-      version: 24.5.0
+      specifier: ^24.10.9
+      version: 24.10.9
     '@types/react':
-      specifier: ^18.3.12
-      version: 18.3.24
+      specifier: ^19.2.9
+      version: 19.2.9
     '@typescript/native-preview':
       specifier: latest
-      version: 7.0.0-dev.20260116.1
+      version: 7.0.0-dev.20260120.1
+    '@vitest/coverage-v8':
+      specifier: ^4.0.17
+      version: 4.0.17
     c8:
       specifier: ^10.1.3
       version: 10.1.3
     jsdom:
-      specifier: ^27.0.0
-      version: 27.0.0
+      specifier: ^27.4.0
+      version: 27.4.0
     react:
-      specifier: ^19.1.1
-      version: 19.1.1
+      specifier: ^19.2.3
+      version: 19.2.3
     react-dom:
-      specifier: ^19.1.1
-      version: 19.1.1
+      specifier: ^19.2.3
+      version: 19.2.3
     tslib:
       specifier: ^2.8.1
       version: 2.8.1
     typescript:
-      specifier: ^5.9.2
+      specifier: ^5.9.3
       version: 5.9.3
+    vitest:
+      specifier: ^4.0.17
+      version: 4.0.17
 
 importers:
 
@@ -49,13 +55,13 @@ importers:
     devDependencies:
       '@arthurfiorette/prettier-config':
         specifier: ^1.0.12
-        version: 1.0.12(prettier@3.6.2)(typescript@5.9.3)
+        version: 1.0.12(prettier@3.8.0)(typescript@5.9.3)
       '@changesets/changelog-github':
-        specifier: ^0.5.1
-        version: 0.5.1
+        specifier: ^0.5.2
+        version: 0.5.2
       '@changesets/cli':
-        specifier: ^2.29.7
-        version: 2.29.7(@types/node@24.5.0)
+        specifier: ^2.29.8
+        version: 2.29.8(@types/node@24.10.9)
       '@kitajs/html':
         specifier: workspace:*
         version: link:packages/html
@@ -63,17 +69,17 @@ importers:
         specifier: ^9.1.7
         version: 9.1.7
       prettier:
-        specifier: ^3.6.2
-        version: 3.6.2
+        specifier: ^3.8.0
+        version: 3.8.0
       prettier-plugin-jsdoc:
-        specifier: ^1.3.3
-        version: 1.3.3(prettier@3.6.2)
+        specifier: ^1.8.0
+        version: 1.8.0(prettier@3.8.0)
       prettier-plugin-organize-imports:
-        specifier: ^4.2.0
-        version: 4.2.0(prettier@3.6.2)(typescript@5.9.3)
+        specifier: ^4.3.0
+        version: 4.3.0(prettier@3.8.0)(typescript@5.9.3)
       prettier-plugin-packagejson:
-        specifier: ^2.5.19
-        version: 2.5.19(prettier@3.6.2)
+        specifier: ^3.0.0
+        version: 3.0.0(prettier@3.8.0)
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -82,7 +88,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       hono:
         specifier: ^4.8.2
         version: 4.8.2
@@ -95,13 +101,13 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
 
   benchmarks/jsxte:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       jsxte:
         specifier: ^3.3.1
         version: 3.3.1
@@ -114,7 +120,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
 
   benchmarks/kitajs:
     dependencies:
@@ -123,7 +129,7 @@ importers:
         version: link:../../packages/html
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -135,7 +141,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       preact:
         specifier: ^10.27.3
         version: 10.27.3
@@ -148,19 +154,19 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
       '@types/react':
         specifier: 'catalog:'
-        version: 18.3.24
+        version: 19.2.9
 
   benchmarks/react:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       react:
         specifier: 'catalog:'
-        version: 19.1.1
+        version: 19.2.3
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -170,19 +176,19 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
       '@types/react':
         specifier: 'catalog:'
-        version: 18.3.24
+        version: 19.2.9
 
   benchmarks/reactjsx:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       react:
         specifier: 'catalog:'
-        version: 19.1.1
+        version: 19.2.3
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -192,10 +198,10 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
       '@types/react':
         specifier: 'catalog:'
-        version: 18.3.24
+        version: 19.2.9
 
   benchmarks/runner:
     dependencies:
@@ -252,16 +258,16 @@ importers:
         version: 6.5.13(preact@10.27.3)
       react:
         specifier: 'catalog:'
-        version: 19.1.1
+        version: 19.2.3
       react-dom:
         specifier: 'catalog:'
-        version: 19.1.1(react@19.1.1)
+        version: 19.2.3(react@19.2.3)
 
   benchmarks/templates:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -271,13 +277,13 @@ importers:
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
 
   benchmarks/typed-html:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -292,7 +298,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -320,16 +326,16 @@ importers:
         version: 8.0.2
       '@swc-node/register':
         specifier: 'catalog:'
-        version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.3)
+        version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)(typescript@5.9.3)
       '@swc/helpers':
         specifier: 'catalog:'
-        version: 0.5.17
+        version: 0.5.18
       '@types/jsdom':
         specifier: 'catalog:'
-        version: 21.1.7
+        version: 27.0.0
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
       c8:
         specifier: 'catalog:'
         version: 10.1.3
@@ -338,7 +344,7 @@ importers:
         version: 5.6.0
       jsdom:
         specifier: 'catalog:'
-        version: 27.0.0(postcss@8.5.6)
+        version: 27.4.0
       tsd:
         specifier: ^0.33.0
         version: 0.33.0
@@ -349,87 +355,99 @@ importers:
   packages/html:
     dependencies:
       csstype:
-        specifier: ^3.1.3
-        version: 3.1.3
+        specifier: ^3.2.3
+        version: 3.2.3
     devDependencies:
       '@types/jsdom':
         specifier: 'catalog:'
-        version: 21.1.7
+        version: 27.0.0
       '@types/node':
         specifier: 'catalog:'
-        version: 24.5.0
+        version: 24.10.9
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260116.1
+        version: 7.0.0-dev.20260120.1
+      '@vitest/coverage-v8':
+        specifier: ^4.0.17
+        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
       c8:
         specifier: 'catalog:'
         version: 10.1.3
       jsdom:
         specifier: 'catalog:'
-        version: 27.0.0(postcss@8.5.6)
+        version: 27.4.0
       react:
         specifier: 'catalog:'
-        version: 19.1.1
+        version: 19.2.3
       react-dom:
         specifier: 'catalog:'
-        version: 19.1.1(react@19.1.1)
+        version: 19.2.3(react@19.2.3)
+      self:
+        specifier: 'link:'
+        version: 'link:'
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
+      vitest:
+        specifier: 'catalog:'
+        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
 
   packages/ts-html-plugin:
     dependencies:
       '@kitajs/html':
-        specifier: workspace:^4.2.10
+        specifier: workspace:^
         version: link:../html
       chalk:
         specifier: ^5.6.2
         version: 5.6.2
       tslib:
-        specifier: ^2.8.1
+        specifier: 'catalog:'
         version: 2.8.1
       typescript:
-        specifier: ^5.6.2
+        specifier: 'catalog:'
         version: 5.9.3
       yargs:
         specifier: ^18.0.0
         version: 18.0.0
     devDependencies:
-      '@swc-node/register':
-        specifier: ^1.11.1
-        version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.3)
-      '@swc/helpers':
-        specifier: ^0.5.17
-        version: 0.5.17
       '@types/node':
-        specifier: ^24.5.0
-        version: 24.5.0
+        specifier: 'catalog:'
+        version: 24.10.9
       '@types/yargs':
-        specifier: ^17.0.33
-        version: 17.0.33
+        specifier: ^17.0.35
+        version: 17.0.35
       '@typescript/native-preview':
-        specifier: latest
-        version: 7.0.0-dev.20260116.1
+        specifier: 'catalog:'
+        version: 7.0.0-dev.20260120.1
+      '@vitest/coverage-v8':
+        specifier: 'catalog:'
+        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
       fast-defer:
         specifier: ^1.1.9
         version: 1.1.9
       self:
-        specifier: 'file:'
-        version: '@kitajs/ts-html-plugin@file:packages/ts-html-plugin(@kitajs/html@packages+html)(typescript@5.9.3)'
+        specifier: 'link:'
+        version: 'link:'
+      vitest:
+        specifier: 'catalog:'
+        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
 
 packages:
 
+  '@acemir/cssom@0.9.31':
+    resolution: {integrity: sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==}
+
   '@arthurfiorette/prettier-config@1.0.12':
     resolution: {integrity: sha512-jR36bHWLVv71FuKkU9XYeBe6ry/AN98EDh0WVyfo3QwjJFbhpeElFTS4nluwxeXfu6nJ8/Hv8bJf6cYeXzfeoA==}
     hasBin: true
     peerDependencies:
       prettier: ^3.0.3
 
-  '@asamuzakjp/css-color@4.0.4':
-    resolution: {integrity: sha512-cKjSKvWGmAziQWbCouOsFwb14mp1betm8Y7Fn+yglDMUUu3r9DCbJ9iJbeFDenLMqFbIMC0pQP8K+B8LAxX3OQ==}
+  '@asamuzakjp/css-color@4.1.1':
+    resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}
 
-  '@asamuzakjp/dom-selector@6.5.4':
-    resolution: {integrity: sha512-RNSNk1dnB8lAn+xdjlRoM4CzdVrHlmXZtSXAWs2jyl4PiBRWqTZr9ML5M710qgd9RPTBsVG6P0SLy7dwy0Foig==}
+  '@asamuzakjp/dom-selector@6.7.6':
+    resolution: {integrity: sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==}
 
   '@asamuzakjp/nwsapi@2.3.9':
     resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
@@ -438,20 +456,33 @@ packages:
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/parser@7.28.6':
+    resolution: {integrity: sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/runtime@7.28.4':
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.28.6':
+    resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
-  '@changesets/apply-release-plan@7.0.13':
-    resolution: {integrity: sha512-BIW7bofD2yAWoE8H4V40FikC+1nNFEKBisMECccS16W1rt6qqhNTBDmIw5HaqmMgtLNz9e7oiALiEUuKrQ4oHg==}
+  '@changesets/apply-release-plan@7.0.14':
+    resolution: {integrity: sha512-ddBvf9PHdy2YY0OUiEl3TV78mH9sckndJR14QAt87KLEbIov81XO0q0QAmvooBxXlqRRP8I9B7XOzZwQG7JkWA==}
 
   '@changesets/assemble-release-plan@6.0.9':
     resolution: {integrity: sha512-tPgeeqCHIwNo8sypKlS3gOPmsS3wP0zHt67JDuL20P4QcXiw/O4Hl7oXiuLnP9yg+rXLQ2sScdV1Kkzde61iSQ==}
@@ -459,15 +490,15 @@ packages:
   '@changesets/changelog-git@0.2.1':
     resolution: {integrity: sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==}
 
-  '@changesets/changelog-github@0.5.1':
-    resolution: {integrity: sha512-BVuHtF+hrhUScSoHnJwTELB4/INQxVFc+P/Qdt20BLiBFIHFJDDUaGsZw+8fQeJTRP5hJZrzpt3oZWh0G19rAQ==}
+  '@changesets/changelog-github@0.5.2':
+    resolution: {integrity: sha512-HeGeDl8HaIGj9fQHo/tv5XKQ2SNEi9+9yl1Bss1jttPqeiASRXhfi0A2wv8yFKCp07kR1gpOI5ge6+CWNm1jPw==}
 
-  '@changesets/cli@2.29.7':
-    resolution: {integrity: sha512-R7RqWoaksyyKXbKXBTbT4REdy22yH81mcFK6sWtqSanxUCbUi9Uf+6aqxZtDQouIqPdem2W56CdxXgsxdq7FLQ==}
+  '@changesets/cli@2.29.8':
+    resolution: {integrity: sha512-1weuGZpP63YWUYjay/E84qqwcnt5yJMM0tep10Up7Q5cS/DGe2IZ0Uj3HNMxGhCINZuR7aO9WBMdKnPit5ZDPA==}
     hasBin: true
 
-  '@changesets/config@3.1.1':
-    resolution: {integrity: sha512-bd+3Ap2TKXxljCggI0mKPfzCQKeV/TU4yO2h2C6vAihIo8tzseAn2e7klSuiyYYXvgu53zMN1OeYMIQkaQoWnA==}
+  '@changesets/config@3.1.2':
+    resolution: {integrity: sha512-CYiRhA4bWKemdYi/uwImjPxqWNpqGPNbEBdX1BdONALFIDK7MCUj6FPkzD+z9gJcvDFUQJn9aDVf4UG7OT6Kog==}
 
   '@changesets/errors@0.2.0':
     resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
@@ -475,11 +506,11 @@ packages:
   '@changesets/get-dependents-graph@2.1.3':
     resolution: {integrity: sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ==}
 
-  '@changesets/get-github-info@0.6.0':
-    resolution: {integrity: sha512-v/TSnFVXI8vzX9/w3DU2Ol+UlTZcu3m0kXTjTT4KlAdwSvwutcByYwyYn9hwerPWfPkT2JfpoX0KgvCEi8Q/SA==}
+  '@changesets/get-github-info@0.7.0':
+    resolution: {integrity: sha512-+i67Bmhfj9V4KfDeS1+Tz3iF32btKZB2AAx+cYMqDSRFP7r3/ZdGbjCo+c6qkyViN9ygDuBjzageuPGJtKGe5A==}
 
-  '@changesets/get-release-plan@4.0.13':
-    resolution: {integrity: sha512-DWG1pus72FcNeXkM12tx+xtExyH/c9I1z+2aXlObH3i9YA7+WZEVaiHzHl03thpvAgWTRaH64MpfHxozfF7Dvg==}
+  '@changesets/get-release-plan@4.0.14':
+    resolution: {integrity: sha512-yjZMHpUHgl4Xl5gRlolVuxDkm4HgSJqT93Ri1Uz8kGrQb+5iJ8dkXJ20M2j/Y4iV5QzS2c5SeTxVSKX+2eMI0g==}
 
   '@changesets/get-version-range-type@0.4.0':
     resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
@@ -490,14 +521,14 @@ packages:
   '@changesets/logger@0.1.1':
     resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
 
-  '@changesets/parse@0.4.1':
-    resolution: {integrity: sha512-iwksMs5Bf/wUItfcg+OXrEpravm5rEd9Bf4oyIPL4kVTmJQ7PNDSd6MDYkpSJR1pn7tz/k8Zf2DhTCqX08Ou+Q==}
+  '@changesets/parse@0.4.2':
+    resolution: {integrity: sha512-Uo5MC5mfg4OM0jU3up66fmSn6/NE9INK+8/Vn/7sMVcdWg46zfbvvUSjD9EMonVqPi9fbrJH9SXHn48Tr1f2yA==}
 
   '@changesets/pre@2.0.2':
     resolution: {integrity: sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==}
 
-  '@changesets/read@0.6.5':
-    resolution: {integrity: sha512-UPzNGhsSjHD3Veb0xO/MwvasGe8eMyNrR/sT9gR8Q3DhOQZirgKhhXv/8hVsI0QpPjR004Z9iFxoJU6in3uGMg==}
+  '@changesets/read@0.6.6':
+    resolution: {integrity: sha512-P5QaN9hJSQQKJShzzpBT13FzOSPyHbqdoIBUd2DJdgvnECCyO6LmAOWSV+O8se2TaZJVwSXjL+v9yhb+a9JeJg==}
 
   '@changesets/should-skip-package@0.1.2':
     resolution: {integrity: sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==}
@@ -535,11 +566,9 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-syntax-patches-for-csstree@1.0.14':
-    resolution: {integrity: sha512-zSlIxa20WvMojjpCSy8WrNpcZ61RqfTfX3XTaOeVlGJrt/8HF3YbzgFZa01yTbT4GWQLwfTcC3EB8i3XnB647Q==}
+  '@csstools/css-syntax-patches-for-csstree@1.0.25':
+    resolution: {integrity: sha512-g0Kw9W3vjx5BEBAF8c5Fm2NcB/Fs8jJXh85aXqwEXiL+tqtOut07TWgyaGzAAfTM+gKckrrncyeGEZPcaRgm2Q==}
     engines: {node: '>=18'}
-    peerDependencies:
-      postcss: ^8.4
 
   '@csstools/css-tokenizer@3.0.4':
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
@@ -554,6 +583,171 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
+  '@esbuild/aix-ppc64@0.27.2':
+    resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.2':
+    resolution: {integrity: sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.2':
+    resolution: {integrity: sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.2':
+    resolution: {integrity: sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.2':
+    resolution: {integrity: sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.2':
+    resolution: {integrity: sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.2':
+    resolution: {integrity: sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.2':
+    resolution: {integrity: sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.2':
+    resolution: {integrity: sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.2':
+    resolution: {integrity: sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.2':
+    resolution: {integrity: sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.2':
+    resolution: {integrity: sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.2':
+    resolution: {integrity: sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.2':
+    resolution: {integrity: sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.2':
+    resolution: {integrity: sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.2':
+    resolution: {integrity: sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.2':
+    resolution: {integrity: sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.2':
+    resolution: {integrity: sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.2':
+    resolution: {integrity: sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.2':
+    resolution: {integrity: sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.2':
+    resolution: {integrity: sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.2':
+    resolution: {integrity: sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.2':
+    resolution: {integrity: sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.2':
+    resolution: {integrity: sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@exodus/bytes@1.9.0':
+    resolution: {integrity: sha512-lagqsvnk09NKogQaN/XrtlWeUF8SRhT12odMvbTIIaVObqzwAogL6jhR4DAp0gPuKoM1AOVrKUshJpRdpMFrww==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
   '@fastify/ajv-compiler@4.0.2':
     resolution: {integrity: sha512-Rkiu/8wIjpsf46Rr+Fitd3HRP+VsxUFDDeag0hs9L0ksfnwx2g7SPQQTFL0E8Qv+rfXzQOxBJnjUB9ITUDjfWQ==}
 
@@ -606,13 +800,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@kitajs/ts-html-plugin@file:packages/ts-html-plugin':
-    resolution: {directory: packages/ts-html-plugin, type: directory}
-    hasBin: true
-    peerDependencies:
-      '@kitajs/html': workspace:^4.2.10
-      typescript: ^5.6.2
-
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -733,13 +920,137 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@pkgr/core@0.2.9':
-    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+  '@rollup/rollup-android-arm-eabi@4.55.3':
+    resolution: {integrity: sha512-qyX8+93kK/7R5BEXPC2PjUt0+fS/VO2BVHjEHyIEWiYn88rcRBHmdLgoJjktBltgAf+NY7RfCGB1SoyKS/p9kg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.55.3':
+    resolution: {integrity: sha512-6sHrL42bjt5dHQzJ12Q4vMKfN+kUnZ0atHHnv4V0Wd9JMTk7FDzSY35+7qbz3ypQYMBPANbpGK7JpnWNnhGt8g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.55.3':
+    resolution: {integrity: sha512-1ht2SpGIjEl2igJ9AbNpPIKzb1B5goXOcmtD0RFxnwNuMxqkR6AUaaErZz+4o+FKmzxcSNBOLrzsICZVNYa1Rw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.55.3':
+    resolution: {integrity: sha512-FYZ4iVunXxtT+CZqQoPVwPhH7549e/Gy7PIRRtq4t5f/vt54pX6eG9ebttRH6QSH7r/zxAFA4EZGlQ0h0FvXiA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.55.3':
+    resolution: {integrity: sha512-M/mwDCJ4wLsIgyxv2Lj7Len+UMHd4zAXu4GQ2UaCdksStglWhP61U3uowkaYBQBhVoNpwx5Hputo8eSqM7K82Q==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.55.3':
+    resolution: {integrity: sha512-5jZT2c7jBCrMegKYTYTpni8mg8y3uY8gzeq2ndFOANwNuC/xJbVAoGKR9LhMDA0H3nIhvaqUoBEuJoICBudFrA==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.55.3':
+    resolution: {integrity: sha512-YeGUhkN1oA+iSPzzhEjVPS29YbViOr8s4lSsFaZKLHswgqP911xx25fPOyE9+khmN6W4VeM0aevbDp4kkEoHiA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.55.3':
+    resolution: {integrity: sha512-eo0iOIOvcAlWB3Z3eh8pVM8hZ0oVkK3AjEM9nSrkSug2l15qHzF3TOwT0747omI6+CJJvl7drwZepT+re6Fy/w==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.55.3':
+    resolution: {integrity: sha512-DJay3ep76bKUDImmn//W5SvpjRN5LmK/ntWyeJs/dcnwiiHESd3N4uteK9FDLf0S0W8E6Y0sVRXpOCoQclQqNg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.55.3':
+    resolution: {integrity: sha512-BKKWQkY2WgJ5MC/ayvIJTHjy0JUGb5efaHCUiG/39sSUvAYRBaO3+/EK0AZT1RF3pSj86O24GLLik9mAYu0IJg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.55.3':
+    resolution: {integrity: sha512-Q9nVlWtKAG7ISW80OiZGxTr6rYtyDSkauHUtvkQI6TNOJjFvpj4gcH+KaJihqYInnAzEEUetPQubRwHef4exVg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.55.3':
+    resolution: {integrity: sha512-2H5LmhzrpC4fFRNwknzmmTvvyJPHwESoJgyReXeFoYYuIDfBhP29TEXOkCJE/KxHi27mj7wDUClNq78ue3QEBQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.55.3':
+    resolution: {integrity: sha512-9S542V0ie9LCTznPYlvaeySwBeIEa7rDBgLHKZ5S9DBgcqdJYburabm8TqiqG6mrdTzfV5uttQRHcbKff9lWtA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.55.3':
+    resolution: {integrity: sha512-ukxw+YH3XXpcezLgbJeasgxyTbdpnNAkrIlFGDl7t+pgCxZ89/6n1a+MxlY7CegU+nDgrgdqDelPRNQ/47zs0g==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.55.3':
+    resolution: {integrity: sha512-Iauw9UsTTvlF++FhghFJjqYxyXdggXsOqGpFBylaRopVpcbfyIIsNvkf9oGwfgIcf57z3m8+/oSYTo6HutBFNw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.55.3':
+    resolution: {integrity: sha512-3OqKAHSEQXKdq9mQ4eajqUgNIK27VZPW3I26EP8miIzuKzCJ3aW3oEn2pzF+4/Hj/Moc0YDsOtBgT5bZ56/vcA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.55.3':
+    resolution: {integrity: sha512-0CM8dSVzVIaqMcXIFej8zZrSFLnGrAE8qlNbbHfTw1EEPnFTg1U1ekI0JdzjPyzSfUsHWtodilQQG/RA55berA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.55.3':
+    resolution: {integrity: sha512-+fgJE12FZMIgBaKIAGd45rxf+5ftcycANJRWk8Vz0NnMTM5rADPGuRFTYar+Mqs560xuART7XsX2lSACa1iOmQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.55.3':
+    resolution: {integrity: sha512-tMD7NnbAolWPzQlJQJjVFh/fNH3K/KnA7K8gv2dJWCwwnaK6DFCYST1QXYWfu5V0cDwarWC8Sf/cfMHniNq21A==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.55.3':
+    resolution: {integrity: sha512-u5KsqxOxjEeIbn7bUK1MPM34jrnPwjeqgyin4/N6e/KzXKfpE9Mi0nCxcQjaM9lLmPcHmn/xx1yOjgTMtu1jWQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.55.3':
+    resolution: {integrity: sha512-vo54aXwjpTtsAnb3ca7Yxs9t2INZg7QdXN/7yaoG7nPGbOBXYXQY41Km+S1Ov26vzOAzLcAjmMdjyEqS1JkVhw==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.55.3':
+    resolution: {integrity: sha512-HI+PIVZ+m+9AgpnY3pt6rinUdRYrGHvmVdsNQ4odNqQ/eRF78DVpMR7mOq7nW06QxpczibwBmeQzB68wJ+4W4A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.55.3':
+    resolution: {integrity: sha512-vRByotbdMo3Wdi+8oC2nVxtc3RkkFKrGaok+a62AT8lz/YBuQjaVYAS5Zcs3tPzW43Vsf9J0wehJbUY5xRSekA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.55.3':
+    resolution: {integrity: sha512-POZHq7UeuzMJljC5NjKi8vKMFN6/5EOqcX1yGntNLp7rUTpBAXQ1hW8kWPFxYLv07QMcNM75xqVLGPWQq6TKFA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.55.3':
+    resolution: {integrity: sha512-aPFONczE4fUFKNXszdvnd2GqKEYQdV5oEsIbKPujJmWlCI9zEsv1Otig8RKK+X9bed9gFUN6LAeN4ZcNuu4zjg==}
+    cpu: [x64]
+    os: [win32]
 
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@swc-node/core@1.14.1':
     resolution: {integrity: sha512-jrt5GUaZUU6cmMS+WTJEvGvaB6j1YNKPHPzC2PUi2BjaFbtxURHj6641Az6xN7b665hNniAIdvjxWcRml5yCnw==}
     engines: {node: '>= 10'}
@@ -828,8 +1139,8 @@ packages:
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  '@swc/helpers@0.5.17':
-    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+  '@swc/helpers@0.5.18':
+    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
 
   '@swc/types@0.1.12':
     resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==}
@@ -841,9 +1152,15 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/eslint@7.29.0':
     resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==}
 
@@ -853,8 +1170,8 @@ packages:
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
-  '@types/jsdom@21.1.7':
-    resolution: {integrity: sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==}
+  '@types/jsdom@27.0.0':
+    resolution: {integrity: sha512-NZyFl/PViwKzdEkQg96gtnB8wm+1ljhdDay9ahn4hgb+SfVtPCbm3TlmDUFXTA+MGN3CijicnMhG18SI5H3rFw==}
 
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -871,17 +1188,14 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@24.5.0':
-    resolution: {integrity: sha512-y1dMvuvJspJiPSDZUQ+WMBvF7dpnEqN4x9DDC9ie5Fs/HUZJA3wFp7EhHoVaKX/iI0cRoECV8X2jL8zi0xrHCg==}
+  '@types/node@24.10.9':
+    resolution: {integrity: sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
-  '@types/react@18.3.24':
-    resolution: {integrity: sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==}
+  '@types/react@19.2.9':
+    resolution: {integrity: sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==}
 
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
@@ -892,48 +1206,86 @@ packages:
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
-  '@types/yargs@17.0.33':
-    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
+  '@types/yargs@17.0.35':
+    resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
-  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-+HoFBoTy6GrdqpN2sBCmvNNVqKXndVqgKPojaTpc1OfiH2YAa1p2zXsHuw2+PtXcsGDBvIX4Fce4i8urHlF6mQ==}
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-r3pWFuR2H7mn6ScwpH5jJljKQqKto0npVuJSk6pRwFwexpTyxOGmJTZJ1V0AWiisaNxU2+CNAqWFJSJYIE/QTg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-cKSm37T0rrCskKKjwr/i97+k9fIQydsOfYO8oUzOFWEHKYl83vQib0JdSyelbLGEfT5Xpt6Wm12ul6MS42e+xw==}
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-cuC1+wLbUP+Ip2UT94G134fqRdp5w3b3dhcCO6/FQ4yXxvRNyv/WK+upHBUFDaeSOeHgDTyO9/QFYUWwC4If1A==}
     cpu: [x64]
     os: [darwin]
 
-  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-mF+y2V95kYJx6ELk3BaXd0lDRGq3ce8fCDxx3MRgCEuexm/SYXC9OnQfkdyEPqU366sYwYw98TFIYjf6ruhZ7Q==}
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-zZGvEGY7wcHYefMZ87KNmvjN3NLIhsCMHEpHZiGCS3khKf+8z6ZsanrzCjOTodvL01VPyBzHxV1EtkSxAcLiQg==}
     cpu: [arm64]
     os: [linux]
 
-  '@typescript/native-preview-linux-arm@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-fCgBsrrbURMutyBdnYXa13OVDOGtlu1AWMCqq21jQFDv2hglUR2l7BOZmqobLgWY76DGHQS7zK+hXcEcOqR7hA==}
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-vN6OYVySol/kQZjJGmAzd6L30SyVlCgmCXS8WjUYtE5clN0YrzQHop16RK29fYZHMxpkOniVBtRPxUYQANZBlQ==}
     cpu: [arm]
     os: [linux]
 
-  '@typescript/native-preview-linux-x64@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-7lxKOVF0ph2+92ySc8HSUxKnBHkfoj7bm43QE482fb0z1YhNuUc/3R79NJGKywgmDP5IXEb1PY8piQbwoPYHwg==}
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-JBfNhWd/asd5MDeS3VgRvE24pGKBkmvLub6tsux6ypr+Yhy+o0WaAEzVpmlRYZUqss2ai5tvOu4dzPBXzZAtFw==}
     cpu: [x64]
     os: [linux]
 
-  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-VzS2LDsXqmC+6v+DEdjHxhadKzN5l/yMMQp3pVvq/ZM52NkUWzUtBpAU3nxB8n02L9Xr6625jEMduyZba0TVVg==}
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-tTndRtYCq2xwgE0VkTi9ACNiJaV43+PqvBqCxk8ceYi3X36Ve+CCnwlZfZJ4k9NxZthtrAwF/kUmpC9iIYbq1w==}
     cpu: [arm64]
     os: [win32]
 
-  '@typescript/native-preview-win32-x64@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-OUmQLOIoknUmwaNz2iA0tkClIbbuzjHLrnFZNF4rlw1LlelNExGQlrMmx0szMRjTz9CFOh9qhYT23/3jOoOsqA==}
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-oZia7hFL6k9pVepfonuPI86Jmyz6WlJKR57tWCDwRNmpA7odxuTq1PbvcYgy1z4+wHF1nnKKJY0PMAiq6ac18w==}
     cpu: [x64]
     os: [win32]
 
-  '@typescript/native-preview@7.0.0-dev.20260116.1':
-    resolution: {integrity: sha512-9N2Sa3Ap8E5+V4K+eTs5y8//dW77qFKzo+OfmYpL4f/Vb6WEoo6SDhjaSB2eNtgeiCKkNQySLO3pz3/QEpuVXg==}
+  '@typescript/native-preview@7.0.0-dev.20260120.1':
+    resolution: {integrity: sha512-nnEf37C9ue7OBRnF2zmV/OCBmV5Y7T/K4mCHa+nxgiXcF/1w8sA0cgdFl+gHQ0mysqUJ+Bu5btAMeWgpLyjrgg==}
     hasBin: true
 
+  '@vitest/coverage-v8@4.0.17':
+    resolution: {integrity: sha512-/6zU2FLGg0jsd+ePZcwHRy3+WpNTBBhDY56P4JTRqUN/Dp6CvOEa9HrikcQ4KfV2b2kAHUFB4dl1SuocWXSFEw==}
+    peerDependencies:
+      '@vitest/browser': 4.0.17
+      vitest: 4.0.17
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
+  '@vitest/expect@4.0.17':
+    resolution: {integrity: sha512-mEoqP3RqhKlbmUmntNDDCJeTDavDR+fVYkSOw8qRwJFaW/0/5zA9zFeTrHqNtcmwh6j26yMmwx2PqUDPzt5ZAQ==}
+
+  '@vitest/mocker@4.0.17':
+    resolution: {integrity: sha512-+ZtQhLA3lDh1tI2wxe3yMsGzbp7uuJSWBM1iTIKCbppWTSBN09PUC+L+fyNlQApQoR+Ps8twt2pbSSXg2fQVEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.0.17':
+    resolution: {integrity: sha512-Ah3VAYmjcEdHg6+MwFE17qyLqBHZ+ni2ScKCiW2XrlSBV4H3Z7vYfPfz7CWQ33gyu76oc0Ai36+kgLU3rfF4nw==}
+
+  '@vitest/runner@4.0.17':
+    resolution: {integrity: sha512-JmuQyf8aMWoo/LmNFppdpkfRVHJcsgzkbCA+/Bk7VfNH7RE6Ut2qxegeyx2j3ojtJtKIbIGy3h+KxGfYfk28YQ==}
+
+  '@vitest/snapshot@4.0.17':
+    resolution: {integrity: sha512-npPelD7oyL+YQM2gbIYvlavlMVWUfNNGZPcu0aEUQXt7FXTuqhmgiYupPnAanhKvyP6Srs2pIbWo30K0RbDtRQ==}
+
+  '@vitest/spy@4.0.17':
+    resolution: {integrity: sha512-I1bQo8QaP6tZlTomQNWKJE6ym4SHf3oLS7ceNjozxxgzavRAgZDc06T7kD8gb9bXKEgcLNt00Z+kZO6KaJ62Ew==}
+
+  '@vitest/utils@4.0.17':
+    resolution: {integrity: sha512-RG6iy+IzQpa9SB8HAFHJ9Y+pTzI+h8553MrciN9eC6TFBErqrQaTas4vG+MVj8S4uKk8uTT2p0vgZPnTdxd96w==}
+
   abstract-logging@2.0.1:
     resolution: {integrity: sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==}
 
@@ -983,6 +1335,9 @@ packages:
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
   array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
@@ -991,6 +1346,13 @@ packages:
     resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
     engines: {node: '>=0.10.0'}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-v8-to-istanbul@0.3.10:
+    resolution: {integrity: sha512-p4K7vMz2ZSk3wN8l5o3y2bJAoZXT3VuJI5OLTATY/01CYWumWvwkUw0SqDBnNq6IiTO3qDa1eSQDibAV8g7XOQ==}
+
   atomic-sleep@1.0.0:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
@@ -1042,6 +1404,10 @@ packages:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1108,12 +1474,12 @@ packages:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  cssstyle@5.3.0:
-    resolution: {integrity: sha512-RveJPnk3m7aarYQ2bJ6iw+Urh55S6FzUiqtBq+TihnTDP4cI8y/TYDqGOyqgnG1J1a6BxJXZsV9JFSTulm9Z7g==}
+  cssstyle@5.3.7:
+    resolution: {integrity: sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==}
     engines: {node: '>=20'}
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
   data-urls@6.0.0:
     resolution: {integrity: sha512-BnBS08aLUM+DKamupXs3w2tJJoqU+AkaE/+6vQxi/G/DPmIZFJJp9Dkb1kM03AZx8ADehDUZgsNxju3mPXZYIA==}
@@ -1153,8 +1519,8 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
-  detect-indent@7.0.1:
-    resolution: {integrity: sha512-Mc7QhQ8s+cLrnUfU/Ji94vG/r8M26m8f++vyres4ZoojaRDpZ1eSIh/EpzLNwlWuvzSZ3UbDFspjFvTDXe6e/g==}
+  detect-indent@7.0.2:
+    resolution: {integrity: sha512-y+8xyqdGLL+6sh0tVeHcfP/QDd8gUgbasolJJpY7NgeQGSZ739bDtSiaiDgtoicy+mtYB81dKLxO9xRhCyIB3A==}
     engines: {node: '>=12.20'}
 
   detect-newline@4.0.1:
@@ -1199,6 +1565,14 @@ packages:
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  esbuild@0.27.2:
+    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -1215,6 +1589,13 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
@@ -1290,6 +1671,11 @@ packages:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
     engines: {node: '>=6 <7 || >=8'}
 
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -1351,9 +1737,9 @@ packages:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
-  html-encoding-sniffer@4.0.0:
-    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
-    engines: {node: '>=18'}
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
@@ -1380,10 +1766,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
-
   iconv-lite@0.7.0:
     resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
     engines: {node: '>=0.10.0'}
@@ -1479,13 +1861,20 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
 
-  jsdom@27.0.0:
-    resolution: {integrity: sha512-lIHeR1qlIRrIN5VMccd8tI2Sgw6ieYXSVktcSHaNe3Z5nE/tcPQYQWOq00wxMvYOsz+73eAkNenVvmPC6bba9A==}
-    engines: {node: '>=20'}
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsdom@27.4.0:
+    resolution: {integrity: sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
     peerDependencies:
       canvas: ^3.0.0
     peerDependenciesMeta:
@@ -1538,14 +1927,20 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.2.1:
-    resolution: {integrity: sha512-r8LA6i4LP4EeWOhqBaZZjDWwehd1xUJPCJd9Sv300H0ZmcUER4+JPh7bqqZeqs1o5pgtgvXm+d9UGrB5zZGDiQ==}
+  lru-cache@11.2.4:
+    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
     engines: {node: 20 || >=22}
 
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.5.1:
+    resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
+
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
@@ -1701,6 +2096,9 @@ packages:
     resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
     engines: {node: '>=10'}
 
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
   on-exit-leak-free@2.1.2:
     resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
     engines: {node: '>=14.0.0'}
@@ -1755,6 +2153,9 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1774,6 +2175,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1819,8 +2223,8 @@ packages:
   preact@10.27.3:
     resolution: {integrity: sha512-ZieIP3zQHiQsNF3BA+SNVS8dcuRIg/nsxlkFbCMBLS2L1Ww4Bkxd9n6Md2A1crfTZsEbQPADV0neYmh/EElgeQ==}
 
-  prettier-plugin-jsdoc@1.3.3:
-    resolution: {integrity: sha512-YIxejcbPYK4N58jHGiXjYvrCzBMyvV2AEMSoF5LvqqeMEI0nsmww57I6NGnpVc0AU9ncFCTEBoYHN/xuBf80YA==}
+  prettier-plugin-jsdoc@1.8.0:
+    resolution: {integrity: sha512-byW8EBZ1DSA3CPdDGBXfcdqqhh2eq0+HlIOPTGZ6rf9O2p/AwBmtS0e49ot5ZeOdcszj81FyzbyHr/VS0eYpCg==}
     engines: {node: '>=14.13.1 || >=16.0.0'}
     peerDependencies:
       prettier: ^3.0.0
@@ -1838,8 +2242,8 @@ packages:
       '@volar/vue-typescript':
         optional: true
 
-  prettier-plugin-organize-imports@4.2.0:
-    resolution: {integrity: sha512-Zdy27UhlmyvATZi67BTnLcKTo8fm6Oik59Sz6H64PgZJVs6NJpPD1mT240mmJn62c98/QaL+r3kx9Q3gRpDajg==}
+  prettier-plugin-organize-imports@4.3.0:
+    resolution: {integrity: sha512-FxFz0qFhyBsGdIsb697f/EkvHzi5SZOhWAjxcx2dLt+Q532bAlhswcXGYB1yzjZ69kW8UoadFBw7TyNwlq96Iw==}
     peerDependencies:
       prettier: '>=2.0'
       typescript: '>=2.9'
@@ -1848,21 +2252,29 @@ packages:
       vue-tsc:
         optional: true
 
-  prettier-plugin-packagejson@2.5.19:
-    resolution: {integrity: sha512-Qsqp4+jsZbKMpEGZB1UP1pxeAT8sCzne2IwnKkr+QhUe665EXUo3BAvTf1kAPCqyMv9kg3ZmO0+7eOni/C6Uag==}
+  prettier-plugin-packagejson@2.5.22:
+    resolution: {integrity: sha512-G6WalmoUssKF8ZXkni0+n4324K+gG143KPysSQNW+FrR0XyNb3BdRxchGC/Q1FE/F702p7/6KU7r4mv0WSWbzA==}
     peerDependencies:
       prettier: '>= 1.16.0'
     peerDependenciesMeta:
       prettier:
         optional: true
 
+  prettier-plugin-packagejson@3.0.0:
+    resolution: {integrity: sha512-z8/QmPSqx/ANvvQMWJSkSq1+ihBXeuwDEYdjX3ZjRJ5Ty1k7vGbFQfhzk2eDe0rwS/TNyRjWK/qnjJEStAOtDw==}
+    peerDependencies:
+      prettier: ^3
+    peerDependenciesMeta:
+      prettier:
+        optional: true
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.6.2:
-    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+  prettier@3.8.0:
+    resolution: {integrity: sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -1893,16 +2305,16 @@ packages:
     resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
     engines: {node: '>=8'}
 
-  react-dom@19.1.1:
-    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
-      react: ^19.1.1
+      react: ^19.2.3
 
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react@19.1.1:
-    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
   read-pkg-up@7.0.1:
@@ -1957,8 +2369,10 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
-  rrweb-cssom@0.8.0:
-    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+  rollup@4.55.3:
+    resolution: {integrity: sha512-y9yUpfQvetAjiDLtNMf1hL9NXchIJgWt6zIKeoB+tCd3npX08Eqfzg60V9DhIGVMtQ0AlMkFw5xa+AQ37zxnAA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
 
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -1977,8 +2391,8 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
   secure-json-parse@4.0.0:
     resolution: {integrity: sha512-dxtLJO6sc35jWidmLxo7ij+Eg48PM/kleBsxpC8QJE0qJICe+KawkDQmvCMZUr9u7WKVHgMW6vy3fQ7zMiFZMA==}
@@ -1987,8 +2401,8 @@ packages:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -2003,6 +2417,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -2014,11 +2431,11 @@ packages:
   sonic-boom@4.2.0:
     resolution: {integrity: sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==}
 
-  sort-object-keys@1.1.3:
-    resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
+  sort-object-keys@2.1.0:
+    resolution: {integrity: sha512-SOiEnthkJKPv2L6ec6HMwhUcN0/lppkeYuN1x63PbyPRrgSPIuBJCiYxYyvWRTtjMlOi14vQUCGUJqS6PLVm8g==}
 
-  sort-package-json@3.4.0:
-    resolution: {integrity: sha512-97oFRRMM2/Js4oEA9LJhjyMlde+2ewpZQf53pgue27UkbEXfHJnDzHlUxQ/DWUkzqmp7DFwJp8D+wi/TYeQhpA==}
+  sort-package-json@3.6.0:
+    resolution: {integrity: sha512-fyJsPLhWvY7u2KsKPZn1PixbXp+1m7V8NWqU8CvgFRbMEX41Ffw1kD8n0CfJiGoaSfoAvbrqRRl/DcHO8omQOQ==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -2055,6 +2472,12 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -2098,10 +2521,6 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  synckit@0.11.11:
-    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -2113,10 +2532,21 @@ packages:
   thread-stream@3.1.0:
     resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.0.14:
     resolution: {integrity: sha512-viZGNK6+NdluOJWwTO9olaugx0bkKhscIdriQQ+lNNhwitIKvb+SvhbYgnCz6j9p7dX3cJntt4agQAKMXLjJ5g==}
 
@@ -2139,9 +2569,9 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  tr46@5.1.1:
-    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
-    engines: {node: '>=18'}
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
 
   trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
@@ -2185,8 +2615,8 @@ packages:
     engines: {node: '>=0.8.0'}
     hasBin: true
 
-  undici-types@7.12.0:
-    resolution: {integrity: sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==}
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
@@ -2208,6 +2638,80 @@ packages:
   vhtml@2.2.0:
     resolution: {integrity: sha512-TPXrXrxBOslRUVnlVkiAqhoXneiertIg86bdvzionrUYhEuiROvyPZNiiP6GIIJ2Q7oPNVyEtIx8gMAZZE9lCQ==}
 
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest@4.0.17:
+    resolution: {integrity: sha512-FQMeF0DJdWY0iOnbv466n/0BudNdKj1l5jYgl5JVTwjSsZSlqyXFt/9+1sEyhR6CLowbZpV7O1sCHrzBhucKKg==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.17
+      '@vitest/browser-preview': 4.0.17
+      '@vitest/browser-webdriverio': 4.0.17
+      '@vitest/ui': 4.0.17
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -2219,17 +2723,12 @@ packages:
     resolution: {integrity: sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==}
     engines: {node: '>=20'}
 
-  whatwg-encoding@3.1.1:
-    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
-    engines: {node: '>=18'}
-    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
-
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
 
-  whatwg-url@15.0.0:
-    resolution: {integrity: sha512-+0q+Pc6oUhtbbeUfuZd4heMNOLDJDdagYxv756mCf9vnLF+NTj4zvv5UyYNkHJpc3CJIesMVoEIOdhi7L9RObA==}
+  whatwg-url@15.1.0:
+    resolution: {integrity: sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==}
     engines: {node: '>=20'}
 
   whatwg-url@5.0.0:
@@ -2240,6 +2739,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -2304,50 +2808,64 @@ packages:
 
 snapshots:
 
-  '@arthurfiorette/prettier-config@1.0.12(prettier@3.6.2)(typescript@5.9.3)':
+  '@acemir/cssom@0.9.31': {}
+
+  '@arthurfiorette/prettier-config@1.0.12(prettier@3.8.0)(typescript@5.9.3)':
     dependencies:
-      prettier: 3.6.2
-      prettier-plugin-jsdoc: 1.3.3(prettier@3.6.2)
-      prettier-plugin-organize-imports: 3.2.4(prettier@3.6.2)(typescript@5.9.3)
-      prettier-plugin-packagejson: 2.5.19(prettier@3.6.2)
+      prettier: 3.8.0
+      prettier-plugin-jsdoc: 1.8.0(prettier@3.8.0)
+      prettier-plugin-organize-imports: 3.2.4(prettier@3.8.0)(typescript@5.9.3)
+      prettier-plugin-packagejson: 2.5.22(prettier@3.8.0)
     transitivePeerDependencies:
       - '@volar/vue-language-plugin-pug'
       - '@volar/vue-typescript'
       - supports-color
       - typescript
 
-  '@asamuzakjp/css-color@4.0.4':
+  '@asamuzakjp/css-color@4.1.1':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      lru-cache: 11.2.1
+      lru-cache: 11.2.4
 
-  '@asamuzakjp/dom-selector@6.5.4':
+  '@asamuzakjp/dom-selector@6.7.6':
     dependencies:
       '@asamuzakjp/nwsapi': 2.3.9
       bidi-js: 1.0.3
       css-tree: 3.1.0
       is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.4
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
   '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/helper-validator-identifier@7.27.1': {}
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/parser@7.28.6':
+    dependencies:
+      '@babel/types': 7.28.6
 
   '@babel/runtime@7.28.4': {}
 
+  '@babel/types@7.28.6':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
   '@bcoe/v8-coverage@1.0.2': {}
 
-  '@changesets/apply-release-plan@7.0.13':
+  '@changesets/apply-release-plan@7.0.14':
     dependencies:
-      '@changesets/config': 3.1.1
+      '@changesets/config': 3.1.2
       '@changesets/get-version-range-type': 0.4.0
       '@changesets/git': 3.0.4
       '@changesets/should-skip-package': 0.1.2
@@ -2359,7 +2877,7 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.7.2
+      semver: 7.7.3
 
   '@changesets/assemble-release-plan@6.0.9':
     dependencies:
@@ -2368,37 +2886,37 @@ snapshots:
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.7.2
+      semver: 7.7.3
 
   '@changesets/changelog-git@0.2.1':
     dependencies:
       '@changesets/types': 6.1.0
 
-  '@changesets/changelog-github@0.5.1':
+  '@changesets/changelog-github@0.5.2':
     dependencies:
-      '@changesets/get-github-info': 0.6.0
+      '@changesets/get-github-info': 0.7.0
       '@changesets/types': 6.1.0
       dotenv: 8.6.0
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/cli@2.29.7(@types/node@24.5.0)':
+  '@changesets/cli@2.29.8(@types/node@24.10.9)':
     dependencies:
-      '@changesets/apply-release-plan': 7.0.13
+      '@changesets/apply-release-plan': 7.0.14
       '@changesets/assemble-release-plan': 6.0.9
       '@changesets/changelog-git': 0.2.1
-      '@changesets/config': 3.1.1
+      '@changesets/config': 3.1.2
       '@changesets/errors': 0.2.0
       '@changesets/get-dependents-graph': 2.1.3
-      '@changesets/get-release-plan': 4.0.13
+      '@changesets/get-release-plan': 4.0.14
       '@changesets/git': 3.0.4
       '@changesets/logger': 0.1.1
       '@changesets/pre': 2.0.2
-      '@changesets/read': 0.6.5
+      '@changesets/read': 0.6.6
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@changesets/write': 0.4.0
-      '@inquirer/external-editor': 1.0.2(@types/node@24.5.0)
+      '@inquirer/external-editor': 1.0.2(@types/node@24.10.9)
       '@manypkg/get-packages': 1.1.3
       ansi-colors: 4.1.3
       ci-info: 3.9.0
@@ -2409,13 +2927,13 @@ snapshots:
       package-manager-detector: 0.2.11
       picocolors: 1.1.1
       resolve-from: 5.0.0
-      semver: 7.7.2
+      semver: 7.7.3
       spawndamnit: 3.0.1
       term-size: 2.2.1
     transitivePeerDependencies:
       - '@types/node'
 
-  '@changesets/config@3.1.1':
+  '@changesets/config@3.1.2':
     dependencies:
       '@changesets/errors': 0.2.0
       '@changesets/get-dependents-graph': 2.1.3
@@ -2434,21 +2952,21 @@ snapshots:
       '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       picocolors: 1.1.1
-      semver: 7.7.2
+      semver: 7.7.3
 
-  '@changesets/get-github-info@0.6.0':
+  '@changesets/get-github-info@0.7.0':
     dependencies:
       dataloader: 1.4.0
       node-fetch: 2.7.0
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/get-release-plan@4.0.13':
+  '@changesets/get-release-plan@4.0.14':
     dependencies:
       '@changesets/assemble-release-plan': 6.0.9
-      '@changesets/config': 3.1.1
+      '@changesets/config': 3.1.2
       '@changesets/pre': 2.0.2
-      '@changesets/read': 0.6.5
+      '@changesets/read': 0.6.6
       '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
 
@@ -2466,10 +2984,10 @@ snapshots:
     dependencies:
       picocolors: 1.1.1
 
-  '@changesets/parse@0.4.1':
+  '@changesets/parse@0.4.2':
     dependencies:
       '@changesets/types': 6.1.0
-      js-yaml: 3.14.1
+      js-yaml: 4.1.1
 
   '@changesets/pre@2.0.2':
     dependencies:
@@ -2478,11 +2996,11 @@ snapshots:
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
 
-  '@changesets/read@0.6.5':
+  '@changesets/read@0.6.6':
     dependencies:
       '@changesets/git': 3.0.4
       '@changesets/logger': 0.1.1
-      '@changesets/parse': 0.4.1
+      '@changesets/parse': 0.4.2
       '@changesets/types': 6.1.0
       fs-extra: 7.0.1
       p-filter: 2.1.0
@@ -2522,9 +3040,7 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-syntax-patches-for-csstree@1.0.14(postcss@8.5.6)':
-    dependencies:
-      postcss: 8.5.6
+  '@csstools/css-syntax-patches-for-csstree@1.0.25': {}
 
   '@csstools/css-tokenizer@3.0.4': {}
 
@@ -2544,6 +3060,86 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@esbuild/aix-ppc64@0.27.2':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/android-arm@0.27.2':
+    optional: true
+
+  '@esbuild/android-x64@0.27.2':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.2':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.2':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.2':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.2':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.2':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.2':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.2':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.2':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.2':
+    optional: true
+
+  '@exodus/bytes@1.9.0': {}
+
   '@fastify/ajv-compiler@4.0.2':
     dependencies:
       ajv: 8.17.1
@@ -2572,12 +3168,12 @@ snapshots:
       '@fastify/forwarded': 3.0.0
       ipaddr.js: 2.2.0
 
-  '@inquirer/external-editor@1.0.2(@types/node@24.5.0)':
+  '@inquirer/external-editor@1.0.2(@types/node@24.10.9)':
     dependencies:
       chardet: 2.1.0
       iconv-lite: 0.7.0
     optionalDependencies:
-      '@types/node': 24.5.0
+      '@types/node': 24.10.9
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -2603,14 +3199,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@kitajs/ts-html-plugin@file:packages/ts-html-plugin(@kitajs/html@packages+html)(typescript@5.9.3)':
-    dependencies:
-      '@kitajs/html': link:packages/html
-      chalk: 5.6.2
-      tslib: 2.8.1
-      typescript: 5.9.3
-      yargs: 18.0.0
-
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -2708,20 +3296,95 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@pkgr/core@0.2.9': {}
+  '@rollup/rollup-android-arm-eabi@4.55.3':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.55.3':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.55.3':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.55.3':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.55.3':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.55.3':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.55.3':
+    optional: true
 
   '@sinclair/typebox@0.27.8': {}
 
-  '@swc-node/core@1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)':
+  '@standard-schema/spec@1.1.0': {}
+
+  '@swc-node/core@1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)':
     dependencies:
-      '@swc/core': 1.7.26(@swc/helpers@0.5.17)
+      '@swc/core': 1.7.26(@swc/helpers@0.5.18)
       '@swc/types': 0.1.12
 
-  '@swc-node/register@1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)(typescript@5.9.3)':
+  '@swc-node/register@1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)(typescript@5.9.3)':
     dependencies:
-      '@swc-node/core': 1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.17))(@swc/types@0.1.12)
+      '@swc-node/core': 1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)
       '@swc-node/sourcemap-support': 0.6.1
-      '@swc/core': 1.7.26(@swc/helpers@0.5.17)
+      '@swc/core': 1.7.26(@swc/helpers@0.5.18)
       colorette: 2.0.20
       debug: 4.4.3
       oxc-resolver: 11.8.0
@@ -2767,7 +3430,7 @@ snapshots:
   '@swc/core-win32-x64-msvc@1.7.26':
     optional: true
 
-  '@swc/core@1.7.26(@swc/helpers@0.5.17)':
+  '@swc/core@1.7.26(@swc/helpers@0.5.18)':
     dependencies:
       '@swc/counter': 0.1.3
       '@swc/types': 0.1.12
@@ -2782,11 +3445,11 @@ snapshots:
       '@swc/core-win32-arm64-msvc': 1.7.26
       '@swc/core-win32-ia32-msvc': 1.7.26
       '@swc/core-win32-x64-msvc': 1.7.26
-      '@swc/helpers': 0.5.17
+      '@swc/helpers': 0.5.18
 
   '@swc/counter@0.1.3': {}
 
-  '@swc/helpers@0.5.17':
+  '@swc/helpers@0.5.18':
     dependencies:
       tslib: 2.8.1
 
@@ -2801,10 +3464,17 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/eslint@7.29.0':
     dependencies:
       '@types/estree': 1.0.8
@@ -2814,9 +3484,9 @@ snapshots:
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 
-  '@types/jsdom@21.1.7':
+  '@types/jsdom@27.0.0':
     dependencies:
-      '@types/node': 24.5.0
+      '@types/node': 24.10.9
       '@types/tough-cookie': 4.0.5
       parse5: 7.3.0
 
@@ -2832,18 +3502,15 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@24.5.0':
+  '@types/node@24.10.9':
     dependencies:
-      undici-types: 7.12.0
+      undici-types: 7.16.0
 
   '@types/normalize-package-data@2.4.4': {}
 
-  '@types/prop-types@15.7.15': {}
-
-  '@types/react@18.3.24':
+  '@types/react@19.2.9':
     dependencies:
-      '@types/prop-types': 15.7.15
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   '@types/tough-cookie@4.0.5': {}
 
@@ -2851,40 +3518,93 @@ snapshots:
 
   '@types/yargs-parser@21.0.3': {}
 
-  '@types/yargs@17.0.33':
+  '@types/yargs@17.0.35':
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview-linux-arm@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview-linux-x64@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview-win32-x64@7.0.0-dev.20260116.1':
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260120.1':
     optional: true
 
-  '@typescript/native-preview@7.0.0-dev.20260116.1':
+  '@typescript/native-preview@7.0.0-dev.20260120.1':
     optionalDependencies:
-      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260116.1
-      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260116.1
-      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260116.1
-      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260116.1
-      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260116.1
-      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260116.1
-      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260116.1
+      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260120.1
+      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260120.1
+      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260120.1
+      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260120.1
+      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260120.1
+      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260120.1
+      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260120.1
+
+  '@vitest/coverage-v8@4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.0.17
+      ast-v8-to-istanbul: 0.3.10
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      magicast: 0.5.1
+      obug: 2.1.1
+      std-env: 3.10.0
+      tinyrainbow: 3.0.3
+      vitest: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
+
+  '@vitest/expect@4.0.17':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.0.17
+      '@vitest/utils': 4.0.17
+      chai: 6.2.2
+      tinyrainbow: 3.0.3
+
+  '@vitest/mocker@4.0.17(vite@7.3.1(@types/node@24.10.9))':
+    dependencies:
+      '@vitest/spy': 4.0.17
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.1(@types/node@24.10.9)
+
+  '@vitest/pretty-format@4.0.17':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.0.17':
+    dependencies:
+      '@vitest/utils': 4.0.17
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.0.17':
+    dependencies:
+      '@vitest/pretty-format': 4.0.17
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.0.17': {}
+
+  '@vitest/utils@4.0.17':
+    dependencies:
+      '@vitest/pretty-format': 4.0.17
+      tinyrainbow: 3.0.3
 
   abstract-logging@2.0.1: {}
 
@@ -2923,10 +3643,20 @@ snapshots:
     dependencies:
       sprintf-js: 1.0.3
 
+  argparse@2.0.1: {}
+
   array-union@2.1.0: {}
 
   arrify@1.0.1: {}
 
+  assertion-error@2.0.1: {}
+
+  ast-v8-to-istanbul@0.3.10:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 9.0.1
+
   atomic-sleep@1.0.0: {}
 
   avvio@9.1.0:
@@ -2983,6 +3713,8 @@ snapshots:
 
   camelcase@5.3.1: {}
 
+  chai@6.2.2: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -3041,20 +3773,19 @@ snapshots:
       mdn-data: 2.12.2
       source-map-js: 1.2.1
 
-  cssstyle@5.3.0(postcss@8.5.6):
+  cssstyle@5.3.7:
     dependencies:
-      '@asamuzakjp/css-color': 4.0.4
-      '@csstools/css-syntax-patches-for-csstree': 1.0.14(postcss@8.5.6)
+      '@asamuzakjp/css-color': 4.1.1
+      '@csstools/css-syntax-patches-for-csstree': 1.0.25
       css-tree: 3.1.0
-    transitivePeerDependencies:
-      - postcss
+      lru-cache: 11.2.4
 
-  csstype@3.1.3: {}
+  csstype@3.2.3: {}
 
   data-urls@6.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
-      whatwg-url: 15.0.0
+      whatwg-url: 15.1.0
 
   dataloader@1.4.0: {}
 
@@ -3079,7 +3810,7 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
-  detect-indent@7.0.1: {}
+  detect-indent@7.0.2: {}
 
   detect-newline@4.0.1: {}
 
@@ -3114,6 +3845,37 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
+  es-module-lexer@1.7.0: {}
+
+  esbuild@0.27.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.2
+      '@esbuild/android-arm': 0.27.2
+      '@esbuild/android-arm64': 0.27.2
+      '@esbuild/android-x64': 0.27.2
+      '@esbuild/darwin-arm64': 0.27.2
+      '@esbuild/darwin-x64': 0.27.2
+      '@esbuild/freebsd-arm64': 0.27.2
+      '@esbuild/freebsd-x64': 0.27.2
+      '@esbuild/linux-arm': 0.27.2
+      '@esbuild/linux-arm64': 0.27.2
+      '@esbuild/linux-ia32': 0.27.2
+      '@esbuild/linux-loong64': 0.27.2
+      '@esbuild/linux-mips64el': 0.27.2
+      '@esbuild/linux-ppc64': 0.27.2
+      '@esbuild/linux-riscv64': 0.27.2
+      '@esbuild/linux-s390x': 0.27.2
+      '@esbuild/linux-x64': 0.27.2
+      '@esbuild/netbsd-arm64': 0.27.2
+      '@esbuild/netbsd-x64': 0.27.2
+      '@esbuild/openbsd-arm64': 0.27.2
+      '@esbuild/openbsd-x64': 0.27.2
+      '@esbuild/openharmony-arm64': 0.27.2
+      '@esbuild/sunos-x64': 0.27.2
+      '@esbuild/win32-arm64': 0.27.2
+      '@esbuild/win32-ia32': 0.27.2
+      '@esbuild/win32-x64': 0.27.2
+
   escalade@3.2.0: {}
 
   eslint-formatter-pretty@4.1.0:
@@ -3131,6 +3893,12 @@ snapshots:
 
   esprima@4.0.1: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  expect-type@1.3.0: {}
+
   extendable-error@0.1.7: {}
 
   fast-decode-uri-component@1.0.1: {}
@@ -3181,7 +3949,7 @@ snapshots:
       process-warning: 5.0.0
       rfdc: 1.4.1
       secure-json-parse: 4.0.0
-      semver: 7.7.2
+      semver: 7.7.3
       toad-cache: 3.7.0
 
   fastq@1.19.1:
@@ -3229,6 +3997,9 @@ snapshots:
       jsonfile: 4.0.0
       universalify: 0.1.2
 
+  fsevents@2.3.3:
+    optional: true
+
   function-bind@1.1.2: {}
 
   get-caller-file@2.0.5: {}
@@ -3283,9 +4054,11 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  html-encoding-sniffer@4.0.0:
+  html-encoding-sniffer@6.0.0:
     dependencies:
-      whatwg-encoding: 3.1.1
+      '@exodus/bytes': 1.9.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
 
   html-escaper@2.0.2: {}
 
@@ -3317,10 +4090,6 @@ snapshots:
 
   husky@9.1.7: {}
 
-  iconv-lite@0.6.3:
-    dependencies:
-      safer-buffer: 2.1.2
-
   iconv-lite@0.7.0:
     dependencies:
       safer-buffer: 2.1.2
@@ -3395,36 +4164,42 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@3.14.1:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
 
-  jsdom@27.0.0(postcss@8.5.6):
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsdom@27.4.0:
     dependencies:
-      '@asamuzakjp/dom-selector': 6.5.4
-      cssstyle: 5.3.0(postcss@8.5.6)
+      '@acemir/cssom': 0.9.31
+      '@asamuzakjp/dom-selector': 6.7.6
+      '@exodus/bytes': 1.9.0
+      cssstyle: 5.3.7
       data-urls: 6.0.0
       decimal.js: 10.6.0
-      html-encoding-sniffer: 4.0.0
+      html-encoding-sniffer: 6.0.0
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
-      parse5: 7.3.0
-      rrweb-cssom: 0.8.0
+      parse5: 8.0.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
       tough-cookie: 6.0.0
       w3c-xmlserializer: 5.0.0
       webidl-conversions: 8.0.0
-      whatwg-encoding: 3.1.1
       whatwg-mimetype: 4.0.0
-      whatwg-url: 15.0.0
+      whatwg-url: 15.1.0
       ws: 8.18.3
       xml-name-validator: 5.0.0
     transitivePeerDependencies:
+      - '@noble/hashes'
       - bufferutil
-      - postcss
       - supports-color
       - utf-8-validate
 
@@ -3471,15 +4246,25 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@11.2.1: {}
+  lru-cache@11.2.4: {}
 
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.5.1:
+    dependencies:
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
+      source-map-js: 1.2.1
+
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   map-obj@1.0.1: {}
 
@@ -3708,9 +4493,11 @@ snapshots:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.16.1
-      semver: 7.7.2
+      semver: 7.7.3
       validate-npm-package-license: 3.0.4
 
+  obug@2.1.1: {}
+
   on-exit-leak-free@2.1.2: {}
 
   outdent@0.5.0: {}
@@ -3784,6 +4571,10 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
+  parse5@8.0.0:
+    dependencies:
+      entities: 6.0.1
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -3797,6 +4588,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@2.0.3: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -3843,35 +4636,40 @@ snapshots:
 
   preact@10.27.3: {}
 
-  prettier-plugin-jsdoc@1.3.3(prettier@3.6.2):
+  prettier-plugin-jsdoc@1.8.0(prettier@3.8.0):
     dependencies:
       binary-searching: 2.0.5
       comment-parser: 1.4.1
       mdast-util-from-markdown: 2.0.2
-      prettier: 3.6.2
+      prettier: 3.8.0
     transitivePeerDependencies:
       - supports-color
 
-  prettier-plugin-organize-imports@3.2.4(prettier@3.6.2)(typescript@5.9.3):
+  prettier-plugin-organize-imports@3.2.4(prettier@3.8.0)(typescript@5.9.3):
     dependencies:
-      prettier: 3.6.2
+      prettier: 3.8.0
       typescript: 5.9.3
 
-  prettier-plugin-organize-imports@4.2.0(prettier@3.6.2)(typescript@5.9.3):
+  prettier-plugin-organize-imports@4.3.0(prettier@3.8.0)(typescript@5.9.3):
     dependencies:
-      prettier: 3.6.2
+      prettier: 3.8.0
       typescript: 5.9.3
 
-  prettier-plugin-packagejson@2.5.19(prettier@3.6.2):
+  prettier-plugin-packagejson@2.5.22(prettier@3.8.0):
+    dependencies:
+      sort-package-json: 3.6.0
+    optionalDependencies:
+      prettier: 3.8.0
+
+  prettier-plugin-packagejson@3.0.0(prettier@3.8.0):
     dependencies:
-      sort-package-json: 3.4.0
-      synckit: 0.11.11
+      sort-package-json: 3.6.0
     optionalDependencies:
-      prettier: 3.6.2
+      prettier: 3.8.0
 
   prettier@2.8.8: {}
 
-  prettier@3.6.2: {}
+  prettier@3.8.0: {}
 
   pretty-format@29.7.0:
     dependencies:
@@ -3893,14 +4691,14 @@ snapshots:
 
   quick-lru@4.0.1: {}
 
-  react-dom@19.1.1(react@19.1.1):
+  react-dom@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.1.1
-      scheduler: 0.26.0
+      react: 19.2.3
+      scheduler: 0.27.0
 
   react-is@18.3.1: {}
 
-  react@19.1.1: {}
+  react@19.2.3: {}
 
   read-pkg-up@7.0.1:
     dependencies:
@@ -3949,7 +4747,36 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rrweb-cssom@0.8.0: {}
+  rollup@4.55.3:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.55.3
+      '@rollup/rollup-android-arm64': 4.55.3
+      '@rollup/rollup-darwin-arm64': 4.55.3
+      '@rollup/rollup-darwin-x64': 4.55.3
+      '@rollup/rollup-freebsd-arm64': 4.55.3
+      '@rollup/rollup-freebsd-x64': 4.55.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.55.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.55.3
+      '@rollup/rollup-linux-arm64-gnu': 4.55.3
+      '@rollup/rollup-linux-arm64-musl': 4.55.3
+      '@rollup/rollup-linux-loong64-gnu': 4.55.3
+      '@rollup/rollup-linux-loong64-musl': 4.55.3
+      '@rollup/rollup-linux-ppc64-gnu': 4.55.3
+      '@rollup/rollup-linux-ppc64-musl': 4.55.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.55.3
+      '@rollup/rollup-linux-riscv64-musl': 4.55.3
+      '@rollup/rollup-linux-s390x-gnu': 4.55.3
+      '@rollup/rollup-linux-x64-gnu': 4.55.3
+      '@rollup/rollup-linux-x64-musl': 4.55.3
+      '@rollup/rollup-openbsd-x64': 4.55.3
+      '@rollup/rollup-openharmony-arm64': 4.55.3
+      '@rollup/rollup-win32-arm64-msvc': 4.55.3
+      '@rollup/rollup-win32-ia32-msvc': 4.55.3
+      '@rollup/rollup-win32-x64-gnu': 4.55.3
+      '@rollup/rollup-win32-x64-msvc': 4.55.3
+      fsevents: 2.3.3
 
   run-parallel@1.2.0:
     dependencies:
@@ -3967,13 +4794,13 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.26.0: {}
+  scheduler@0.27.0: {}
 
   secure-json-parse@4.0.0: {}
 
   semver@5.7.2: {}
 
-  semver@7.7.2: {}
+  semver@7.7.3: {}
 
   set-cookie-parser@2.7.1: {}
 
@@ -3983,6 +4810,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   slash@3.0.0: {}
@@ -3991,16 +4820,16 @@ snapshots:
     dependencies:
       atomic-sleep: 1.0.0
 
-  sort-object-keys@1.1.3: {}
+  sort-object-keys@2.1.0: {}
 
-  sort-package-json@3.4.0:
+  sort-package-json@3.6.0:
     dependencies:
-      detect-indent: 7.0.1
+      detect-indent: 7.0.2
       detect-newline: 4.0.1
       git-hooks-list: 4.1.1
       is-plain-obj: 4.1.0
-      semver: 7.7.2
-      sort-object-keys: 1.1.3
+      semver: 7.7.3
+      sort-object-keys: 2.1.0
       tinyglobby: 0.2.15
 
   source-map-js@1.2.1: {}
@@ -4035,6 +4864,10 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -4080,10 +4913,6 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  synckit@0.11.11:
-    dependencies:
-      '@pkgr/core': 0.2.9
-
   term-size@2.2.1: {}
 
   test-exclude@7.0.1:
@@ -4096,11 +4925,17 @@ snapshots:
     dependencies:
       real-require: 0.2.0
 
+  tinybench@2.9.0: {}
+
+  tinyexec@1.0.2: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyrainbow@3.0.3: {}
+
   tldts-core@7.0.14: {}
 
   tldts@7.0.14:
@@ -4119,7 +4954,7 @@ snapshots:
 
   tr46@0.0.3: {}
 
-  tr46@5.1.1:
+  tr46@6.0.0:
     dependencies:
       punycode: 2.3.1
 
@@ -4151,7 +4986,7 @@ snapshots:
 
   uglify-js@3.19.3: {}
 
-  undici-types@7.12.0: {}
+  undici-types@7.16.0: {}
 
   unist-util-stringify-position@4.0.0:
     dependencies:
@@ -4174,6 +5009,56 @@ snapshots:
 
   vhtml@2.2.0: {}
 
+  vite@7.3.1(@types/node@24.10.9):
+    dependencies:
+      esbuild: 0.27.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.55.3
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.10.9
+      fsevents: 2.3.3
+
+  vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0):
+    dependencies:
+      '@vitest/expect': 4.0.17
+      '@vitest/mocker': 4.0.17(vite@7.3.1(@types/node@24.10.9))
+      '@vitest/pretty-format': 4.0.17
+      '@vitest/runner': 4.0.17
+      '@vitest/snapshot': 4.0.17
+      '@vitest/spy': 4.0.17
+      '@vitest/utils': 4.0.17
+      es-module-lexer: 1.7.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.3.1(@types/node@24.10.9)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.10.9
+      jsdom: 27.4.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
@@ -4182,15 +5067,11 @@ snapshots:
 
   webidl-conversions@8.0.0: {}
 
-  whatwg-encoding@3.1.1:
-    dependencies:
-      iconv-lite: 0.6.3
-
   whatwg-mimetype@4.0.0: {}
 
-  whatwg-url@15.0.0:
+  whatwg-url@15.1.0:
     dependencies:
-      tr46: 5.1.1
+      tr46: 6.0.0
       webidl-conversions: 8.0.0
 
   whatwg-url@5.0.0:
@@ -4202,6 +5083,11 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b1c183148..637f7eecc 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,28 +1,19 @@
 packages:
-  - 'packages/*'
-  - 'benchmarks/*'
+  - packages/*
+  - benchmarks/*
 
 catalog:
-  # TypeScript and tooling
-  typescript: ^5.9.2
-  tslib: ^2.8.1
-  '@typescript/native-preview': latest
-
-  # Node types
-  '@types/node': ^24.10.9
-
-  # SWC tooling
   '@swc-node/register': ^1.11.1
   '@swc/helpers': ^0.5.18
-
-  # Testing and coverage
-  c8: ^10.1.3
-
-  # JSDOM for testing
   '@types/jsdom': ^27.0.0
+  '@types/node': ^24.10.9
+  '@types/react': ^19.2.9
+  '@typescript/native-preview': latest
+  '@vitest/coverage-v8': ^4.0.17
+  c8: ^10.1.3
   jsdom: ^27.4.0
-
-  # React
-  '@types/react': ^19.2.8
   react: ^19.2.3
   react-dom: ^19.2.3
+  tslib: ^2.8.1
+  typescript: ^5.9.3
+  vitest: ^4.0.17
diff --git a/tsconfig.json b/tsconfig.json
index fb25a9637..7b58162dc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,38 +1,45 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "react-jsx",
-    "jsxImportSource": "@kitajs/html",
-    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
-    "module": "CommonJS",
-    "moduleResolution": "node",
-    "incremental": true,
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
+    // File Layout
+    // "rootDir": "./src",
+    // "outDir": "./dist",
+    "noEmit": true,
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
     "declaration": true,
-    "importHelpers": true,
     "declarationMap": true,
-    "sourceMap": true,
-    "strictFunctionTypes": true,
-    "strictBindCallApply": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "useUnknownInCatchVariables": true,
-    "alwaysStrict": true,
-    "outDir": "dist",
+    "incremental": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "erasableSyntaxOnly": true,
+
+    // Style Options
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
     "skipDefaultLibCheck": true
-  },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.d.ts", "node_modules/csstype"],
-  "exclude": ["node_modules", "dist", "coverage", "benchmarks"]
+  }
 }

From 79be57341b0dbea5508ca6c61e10e9e9f39cf176 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 01:54:47 +0700
Subject: [PATCH 03/22] code

---
 packages/html/package.json            |  3 ++-
 packages/ts-html-plugin/package.json  |  2 ++
 packages/ts-html-plugin/tsconfig.json |  5 ++---
 pnpm-lock.yaml                        | 14 +++++++-------
 tsconfig.json                         |  2 +-
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/html/package.json b/packages/html/package.json
index bce70c691..1aba95b16 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -13,7 +13,7 @@
   "license": "MIT",
   "author": "Arthur Fiorette <kita@arthur.place>",
   "sideEffects": false,
-  "type": "module",
+  "type": "commonjs",
   "exports": {
     ".": "./dist/index.js",
     "./*": "./*",
@@ -25,6 +25,7 @@
   },
   "files": [
     "dist",
+    "src",
     "*.d.ts",
     "!dist/*.tsbuildinfo"
   ],
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index 8705731b4..490814eda 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -31,12 +31,14 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
+    "@kitajs/html": "workspace:^",
     "@types/node": "catalog:",
     "@types/yargs": "^17.0.35",
     "@typescript/native-preview": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "fast-defer": "^1.1.9",
     "self": "link:",
+    "typescript": "catalog:",
     "vitest": "catalog:"
   },
   "peerDependencies": {
diff --git a/packages/ts-html-plugin/tsconfig.json b/packages/ts-html-plugin/tsconfig.json
index c5b66c772..2fed558be 100644
--- a/packages/ts-html-plugin/tsconfig.json
+++ b/packages/ts-html-plugin/tsconfig.json
@@ -1,12 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "verbatimModuleSyntax": false,
     "target": "esnext",
     "jsx": "react-jsx",
     "jsxImportSource": "@kitajs/html",
-    "module": "CommonJS",
-    "moduleResolution": "Node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "outDir": "./dist",
     "plugins": [{ "name": "self" }]
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d494760c..c181ca589 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -368,7 +368,7 @@ importers:
         specifier: 'catalog:'
         version: 7.0.0-dev.20260120.1
       '@vitest/coverage-v8':
-        specifier: ^4.0.17
+        specifier: 'catalog:'
         version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
       c8:
         specifier: 'catalog:'
@@ -394,22 +394,19 @@ importers:
 
   packages/ts-html-plugin:
     dependencies:
-      '@kitajs/html':
-        specifier: workspace:^
-        version: link:../html
       chalk:
         specifier: ^5.6.2
         version: 5.6.2
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
-      typescript:
-        specifier: 'catalog:'
-        version: 5.9.3
       yargs:
         specifier: ^18.0.0
         version: 18.0.0
     devDependencies:
+      '@kitajs/html':
+        specifier: workspace:^
+        version: link:../html
       '@types/node':
         specifier: 'catalog:'
         version: 24.10.9
@@ -428,6 +425,9 @@ importers:
       self:
         specifier: 'link:'
         version: 'link:'
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
       vitest:
         specifier: 'catalog:'
         version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
diff --git a/tsconfig.json b/tsconfig.json
index 7b58162dc..9d0e5eef0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,7 @@
 
     // Recommended Options
     "strict": true,
-    "verbatimModuleSyntax": true,
+    "verbatimModuleSyntax": false,
     "isolatedModules": true,
     "noUncheckedSideEffectImports": true,
     "moduleDetection": "force",

From f666fe1d9a367d42679bdfcd0e371efe35a13e35 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 23:18:06 -0300
Subject: [PATCH 04/22] Fix tsserver protocol parser for TypeScript 5.9.3
 (#455)

Co-authored-by: arthurfiorette <47537704+arthurfiorette@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 .../ts-html-plugin/test/util/lang-server.ts   | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/packages/ts-html-plugin/test/util/lang-server.ts b/packages/ts-html-plugin/test/util/lang-server.ts
index d3d319d2d..0f8e19ba3 100644
--- a/packages/ts-html-plugin/test/util/lang-server.ts
+++ b/packages/ts-html-plugin/test/util/lang-server.ts
@@ -65,6 +65,7 @@ export class TSLangServer {
   server: ChildProcess;
   sequence = 0;
   debug: boolean;
+  buffer = ''; // Add buffer for incomplete messages
 
   constructor(projectPath: string, debug = false) {
     this.debug = debug;
@@ -85,32 +86,58 @@ export class TSLangServer {
 
     this.server.stdout?.on('data', (data) => {
       try {
-        const obj = JSON.parse(data.split('\n', 3)[2]);
-
-        if (this.debug) {
-          console.dir(obj, { depth: 10 });
-        }
-
-        if (obj.success === false) {
-          this.errorEmitter.emit(obj.type === 'event' ? obj.event : obj.command, obj);
-
-          // Error is fatal, close the server
-          if (!this.isClosed) {
-            this.isClosed = true;
-            this.server.stdin?.end();
-          }
-        } else if (obj.type === 'event') {
-          this.responseEventEmitter.emit(obj.event, obj);
-        } else if (obj.type === 'response') {
-          this.responseCommandEmitter.emit(obj.command, obj);
-        }
+        this.buffer += data;
+        this.#processMessages();
       } catch (error) {
-        console.error(data);
+        console.error(this.buffer);
         this.exitPromise.reject(error);
       }
     });
   }
 
+  #processMessages() {
+    // Process all complete messages in the buffer
+    let headerMatch = this.buffer.match(/Content-Length: (\d+)\r?\n\r?\n/);
+
+    while (headerMatch?.index && headerMatch[1]) {
+      // TSServer protocol: Content-Length: N\r\n\r\n{JSON}\r\n
+      const contentLength = parseInt(headerMatch[1], 10);
+      const headerEnd = headerMatch.index + headerMatch[0].length;
+      const messageEnd = headerEnd + contentLength;
+
+      // Check if we have the complete message
+      if (this.buffer.length < messageEnd) break;
+
+      // Extract and parse the message
+      const jsonStr = this.buffer.substring(headerEnd, messageEnd);
+      const obj = JSON.parse(jsonStr);
+
+      // Remove the processed message from buffer
+      this.buffer = this.buffer.substring(messageEnd);
+
+      if (this.debug) {
+        console.dir(obj, { depth: 10 });
+      }
+
+      if (obj.success === false) {
+        this.errorEmitter.emit(obj.type === 'event' ? obj.event : obj.command, obj);
+
+        // Error is fatal, close the server
+        if (!this.isClosed) {
+          this.isClosed = true;
+          this.server.stdin?.end();
+        }
+      } else if (obj.type === 'event') {
+        this.responseEventEmitter.emit(obj.event, obj);
+      } else if (obj.type === 'response') {
+        this.responseCommandEmitter.emit(obj.command, obj);
+      }
+
+      // Check for next message
+      headerMatch = this.buffer.match(/Content-Length: (\d+)\r?\n\r?\n/);
+    }
+  }
+
   /** Opens the project, sends diagnostics request and returns the response */
   async openWithDiagnostics(content: TemplateStringsArray, ...args: any[]) {
     const fileContent = `${TEST_HELPERS}\n${String.raw(content, ...args).trim()}`;

From 2aa14b44ebac50ec4bf48c2436f965ad4ba6732f Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 09:45:31 +0700
Subject: [PATCH 05/22] code

---
 .vscode/settings.json                              | 6 +++++-
 benchmarks/honojsx/tsconfig.json                   | 1 -
 benchmarks/jsxte/tsconfig.json                     | 1 -
 benchmarks/kitajs/tsconfig.json                    | 1 -
 benchmarks/preact/tsconfig.json                    | 1 -
 benchmarks/react/tsconfig.json                     | 1 -
 benchmarks/reactjsx/tsconfig.json                  | 1 -
 benchmarks/templates/tsconfig.json                 | 3 ---
 benchmarks/typed-html/tsconfig.json                | 1 -
 benchmarks/vhtml/tsconfig.json                     | 1 -
 packages/ts-html-plugin/test/component-xss.test.ts | 2 +-
 packages/ts-html-plugin/test/util/lang-server.ts   | 9 +++++----
 12 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f9ff80aab..8093cfdd2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,9 @@
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.experimental.useTsgo": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.tsserver.maxTsServerMemory": 4096
+  "typescript.tsserver.maxTsServerMemory": 4096,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/benchmarks/honojsx/tsconfig.json b/benchmarks/honojsx/tsconfig.json
index 8349d5fc9..2d7cf0a6e 100644
--- a/benchmarks/honojsx/tsconfig.json
+++ b/benchmarks/honojsx/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "jsx": "react-jsx",
     "jsxImportSource": "hono/jsx",
diff --git a/benchmarks/jsxte/tsconfig.json b/benchmarks/jsxte/tsconfig.json
index b2254cbd9..457fa4809 100644
--- a/benchmarks/jsxte/tsconfig.json
+++ b/benchmarks/jsxte/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "module": "Node16",
     "target": "ESNext",
diff --git a/benchmarks/kitajs/tsconfig.json b/benchmarks/kitajs/tsconfig.json
index 3d3c1007f..461943ebe 100644
--- a/benchmarks/kitajs/tsconfig.json
+++ b/benchmarks/kitajs/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "module": "Node16",
     "target": "ESNext",
diff --git a/benchmarks/preact/tsconfig.json b/benchmarks/preact/tsconfig.json
index ca3fb9aaa..34b21753c 100644
--- a/benchmarks/preact/tsconfig.json
+++ b/benchmarks/preact/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
diff --git a/benchmarks/react/tsconfig.json b/benchmarks/react/tsconfig.json
index c3a4080d9..df58f3d55 100644
--- a/benchmarks/react/tsconfig.json
+++ b/benchmarks/react/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "jsx": "react",
     "declaration": true,
diff --git a/benchmarks/reactjsx/tsconfig.json b/benchmarks/reactjsx/tsconfig.json
index 1018ee991..32b8661e5 100644
--- a/benchmarks/reactjsx/tsconfig.json
+++ b/benchmarks/reactjsx/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "jsx": "react-jsx",
     "declaration": true,
diff --git a/benchmarks/templates/tsconfig.json b/benchmarks/templates/tsconfig.json
index 8cae5be0d..76743a9bc 100644
--- a/benchmarks/templates/tsconfig.json
+++ b/benchmarks/templates/tsconfig.json
@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "module": "Node16",
     "target": "ESNext",
-    "jsx": "react-jsx",
-    "jsxImportSource": "@kitajs/html",
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true
diff --git a/benchmarks/typed-html/tsconfig.json b/benchmarks/typed-html/tsconfig.json
index 01540693e..b1437cbef 100644
--- a/benchmarks/typed-html/tsconfig.json
+++ b/benchmarks/typed-html/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "module": "Node16",
     "moduleResolution": "Node16",
diff --git a/benchmarks/vhtml/tsconfig.json b/benchmarks/vhtml/tsconfig.json
index 266be58a2..ddfd40f02 100644
--- a/benchmarks/vhtml/tsconfig.json
+++ b/benchmarks/vhtml/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "dist",
     "module": "Node16",
     "moduleResolution": "Node16",
diff --git a/packages/ts-html-plugin/test/component-xss.test.ts b/packages/ts-html-plugin/test/component-xss.test.ts
index 046eda386..b19487807 100644
--- a/packages/ts-html-plugin/test/component-xss.test.ts
+++ b/packages/ts-html-plugin/test/component-xss.test.ts
@@ -3,7 +3,7 @@ import { ComponentXss } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
 it('Ensure <Component /> children are safe', async () => {
-  await using server = new TSLangServer(__dirname);
+  await using server = new TSLangServer(__dirname, true);
 
   const diagnostics = await server.openWithDiagnostics /* tsx */ `
     export default (
diff --git a/packages/ts-html-plugin/test/util/lang-server.ts b/packages/ts-html-plugin/test/util/lang-server.ts
index 0f8e19ba3..591e77aa1 100644
--- a/packages/ts-html-plugin/test/util/lang-server.ts
+++ b/packages/ts-html-plugin/test/util/lang-server.ts
@@ -64,11 +64,12 @@ export class TSLangServer {
   isClosed = false;
   server: ChildProcess;
   sequence = 0;
-  debug: boolean;
   buffer = ''; // Add buffer for incomplete messages
 
-  constructor(projectPath: string, debug = false) {
-    this.debug = debug;
+  constructor(
+    projectPath: string,
+    private readonly debug = false
+  ) {
     this.server = fork(require.resolve('typescript/lib/tsserver'), {
       cwd: projectPath,
       stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
@@ -99,7 +100,7 @@ export class TSLangServer {
     // Process all complete messages in the buffer
     let headerMatch = this.buffer.match(/Content-Length: (\d+)\r?\n\r?\n/);
 
-    while (headerMatch?.index && headerMatch[1]) {
+    while (headerMatch && headerMatch.index !== undefined) {
       // TSServer protocol: Content-Length: N\r\n\r\n{JSON}\r\n
       const contentLength = parseInt(headerMatch[1], 10);
       const headerEnd = headerMatch.index + headerMatch[0].length;

From faacfcc21b2aaaa2e1207821c19232600edac1e9 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 10:03:35 +0700
Subject: [PATCH 06/22] code

---
 .vscode/settings.json                           |  1 -
 package.json                                    |  1 +
 packages/html/package.json                      |  2 +-
 packages/html/src/index.ts                      |  3 ++-
 packages/html/tsconfig.json                     |  2 +-
 packages/ts-html-plugin/package.json            |  2 +-
 packages/ts-html-plugin/test/tsconfig.json      |  2 +-
 .../ts-html-plugin/test/util/lang-server.ts     | 17 ++++++++++-------
 packages/ts-html-plugin/tsconfig.json           |  2 +-
 pnpm-lock.yaml                                  |  7 +++++--
 10 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8093cfdd2..9a44a6ada 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,5 @@
 {
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.experimental.useTsgo": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.tsserver.maxTsServerMemory": 4096,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
diff --git a/package.json b/package.json
index 901f03791..120666b7f 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "prettier-plugin-jsdoc": "^1.8.0",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-packagejson": "^3.0.0",
+    "self-ts-plugin": "link:packages/ts-html-plugin",
     "typescript": "catalog:"
   },
   "packageManager": "pnpm@10.28.1",
diff --git a/packages/html/package.json b/packages/html/package.json
index 1aba95b16..737fc48a3 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -46,7 +46,7 @@
     "jsdom": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "self": "link:",
+    "self-html": "link:",
     "typescript": "catalog:",
     "vitest": "catalog:"
   },
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 3894a3d68..a00db5573 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -1,4 +1,5 @@
-/// <reference path="./jsx.ts" />
+import './jsx.d.ts';
+
 /// <reference path="./suspense.ts" />
 /// <reference path="./error-boundary.ts" />
 
diff --git a/packages/html/tsconfig.json b/packages/html/tsconfig.json
index cbe7f4e7d..dc25414e5 100644
--- a/packages/html/tsconfig.json
+++ b/packages/html/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "self",
+    "jsxImportSource": "self-html",
     "outDir": "./dist"
   },
   "include": ["src", "test"]
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index 490814eda..c4e01bfed 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -37,7 +37,7 @@
     "@typescript/native-preview": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "fast-defer": "^1.1.9",
-    "self": "link:",
+    "self-ts-plugin": "link:",
     "typescript": "catalog:",
     "vitest": "catalog:"
   },
diff --git a/packages/ts-html-plugin/test/tsconfig.json b/packages/ts-html-plugin/test/tsconfig.json
index 0775d5429..6df055860 100644
--- a/packages/ts-html-plugin/test/tsconfig.json
+++ b/packages/ts-html-plugin/test/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "plugins": [{ "name": "self" }]
+    "plugins": [{ "name": "self-ts-plugin" }]
   },
   "include": ["**/*.tsx", "*.test.ts"]
 }
diff --git a/packages/ts-html-plugin/test/util/lang-server.ts b/packages/ts-html-plugin/test/util/lang-server.ts
index 591e77aa1..62bfad76b 100644
--- a/packages/ts-html-plugin/test/util/lang-server.ts
+++ b/packages/ts-html-plugin/test/util/lang-server.ts
@@ -11,7 +11,7 @@ export type Requests =
   | ts.server.protocol.SemanticDiagnosticsSyncRequest;
 
 try {
-  statSync(require.resolve('self'));
+  statSync(require.resolve('self-ts-plugin'));
 } catch (error) {
   throw new Error('You must run pnpm build before running tests');
 }
@@ -65,11 +65,10 @@ export class TSLangServer {
   server: ChildProcess;
   sequence = 0;
   buffer = ''; // Add buffer for incomplete messages
+  debug: boolean;
 
-  constructor(
-    projectPath: string,
-    private readonly debug = false
-  ) {
+  constructor(projectPath: string, debug = false) {
+    this.debug = debug;
     this.server = fork(require.resolve('typescript/lib/tsserver'), {
       cwd: projectPath,
       stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
@@ -83,8 +82,12 @@ export class TSLangServer {
     this.server.on('exit', this.exitPromise.resolve);
     this.server.on('error', this.exitPromise.reject);
 
-    this.server.stdout?.setEncoding('utf-8');
+    this.server.stderr?.setEncoding('utf-8');
+    this.server.stderr?.on('data', (data) => {
+      console.error(data);
+    });
 
+    this.server.stdout?.setEncoding('utf-8');
     this.server.stdout?.on('data', (data) => {
       try {
         this.buffer += data;
@@ -102,7 +105,7 @@ export class TSLangServer {
 
     while (headerMatch && headerMatch.index !== undefined) {
       // TSServer protocol: Content-Length: N\r\n\r\n{JSON}\r\n
-      const contentLength = parseInt(headerMatch[1], 10);
+      const contentLength = parseInt(headerMatch[1]!, 10);
       const headerEnd = headerMatch.index + headerMatch[0].length;
       const messageEnd = headerEnd + contentLength;
 
diff --git a/packages/ts-html-plugin/tsconfig.json b/packages/ts-html-plugin/tsconfig.json
index 2fed558be..fce7d38cd 100644
--- a/packages/ts-html-plugin/tsconfig.json
+++ b/packages/ts-html-plugin/tsconfig.json
@@ -7,7 +7,7 @@
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "outDir": "./dist",
-    "plugins": [{ "name": "self" }]
+    "plugins": [{ "name": "self-ts-plugin" }]
   },
   "include": ["src", "test"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c181ca589..2ad75deeb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ importers:
       prettier-plugin-packagejson:
         specifier: ^3.0.0
         version: 3.0.0(prettier@3.8.0)
+      self-ts-plugin:
+        specifier: link:packages/ts-html-plugin
+        version: link:packages/ts-html-plugin
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -382,7 +385,7 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.3(react@19.2.3)
-      self:
+      self-html:
         specifier: 'link:'
         version: 'link:'
       typescript:
@@ -422,7 +425,7 @@ importers:
       fast-defer:
         specifier: ^1.1.9
         version: 1.1.9
-      self:
+      self-ts-plugin:
         specifier: 'link:'
         version: 'link:'
       typescript:

From 86301e4b282b424c7f832d4ec0c925103c910e5d Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 11:21:03 +0700
Subject: [PATCH 07/22] code

---
 .changeset/metal-corners-type.md              |  5 +++
 packages/ts-html-plugin/package.json          |  4 +--
 packages/ts-html-plugin/src/util.ts           | 34 ++++++++++++++++++-
 .../ts-html-plugin/test/component-xss.test.ts |  2 +-
 packages/ts-html-plugin/tsconfig.build.json   |  6 ++++
 packages/ts-html-plugin/vitest.config.ts      |  9 +++++
 6 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/metal-corners-type.md
 create mode 100644 packages/ts-html-plugin/vitest.config.ts

diff --git a/.changeset/metal-corners-type.md b/.changeset/metal-corners-type.md
new file mode 100644
index 000000000..d8675de67
--- /dev/null
+++ b/.changeset/metal-corners-type.md
@@ -0,0 +1,5 @@
+---
+'@kitajs/ts-html-plugin': patch
+---
+
+Support for multiline TSServer messages and improvements to XSS Children detection
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index c4e01bfed..33394eea2 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -21,8 +21,8 @@
   },
   "scripts": {
     "build": "tsgo -p tsconfig.build.json",
-    "prepack": "npm run build",
-    "pretest": "npm run build",
+    "prepack": "pnpm run build",
+    "pretest": "pnpm run build",
     "test": "vitest --coverage --typecheck --run"
   },
   "dependencies": {
diff --git a/packages/ts-html-plugin/src/util.ts b/packages/ts-html-plugin/src/util.ts
index d16074e16..f89b95484 100644
--- a/packages/ts-html-plugin/src/util.ts
+++ b/packages/ts-html-plugin/src/util.ts
@@ -243,13 +243,45 @@ export function isSafeAttribute(
     return true;
   }
 
+  // Check if this is a property access to .children (from PropsWithChildren)
+  // This must be checked BEFORE union recursion to avoid false positives
+  if (ts.isPropertyAccessExpression(node) && node.name.text === 'children') {
+    return true;
+  }
+
+  // Consolidated identifier checks - MUST be before union recursion
+  if (ts.isIdentifier(node)) {
+    // Destructured or direct `children` parameter (e.g., function Test({ children }: PropsWithChildren))
+    if (node.text === 'children') {
+      return true;
+    }
+
+    // Check if variable is initialized with JSX (e.g., const element = <div />)
+    const symbol = checker.getSymbolAtLocation(node);
+    if (symbol) {
+      const declarations = symbol.getDeclarations();
+      if (declarations) {
+        for (const decl of declarations) {
+          if (
+            ts.isVariableDeclaration(decl) &&
+            decl.initializer &&
+            isJsx(ts, decl.initializer)
+          ) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+
   // Any type is never safe
   if (type.flags & ts.TypeFlags.Any) {
     return false;
   }
 
+  // Check type aliases for JSX.Element and Html.Children
   if (type.aliasSymbol) {
-    // Allows JSX.Element
+    // Allows JSX.Element (when the alias is preserved)
     if (
       node &&
       type.aliasSymbol.escapedName === 'Element' &&
diff --git a/packages/ts-html-plugin/test/component-xss.test.ts b/packages/ts-html-plugin/test/component-xss.test.ts
index b19487807..046eda386 100644
--- a/packages/ts-html-plugin/test/component-xss.test.ts
+++ b/packages/ts-html-plugin/test/component-xss.test.ts
@@ -3,7 +3,7 @@ import { ComponentXss } from '../src/errors';
 import { TSLangServer } from './util/lang-server';
 
 it('Ensure <Component /> children are safe', async () => {
-  await using server = new TSLangServer(__dirname, true);
+  await using server = new TSLangServer(__dirname);
 
   const diagnostics = await server.openWithDiagnostics /* tsx */ `
     export default (
diff --git a/packages/ts-html-plugin/tsconfig.build.json b/packages/ts-html-plugin/tsconfig.build.json
index b90fc83e0..4960a34a6 100644
--- a/packages/ts-html-plugin/tsconfig.build.json
+++ b/packages/ts-html-plugin/tsconfig.build.json
@@ -1,4 +1,10 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "tsBuildInfoFile": "dist/.tsbuildinfo"
+  },
   "include": ["src"]
 }
diff --git a/packages/ts-html-plugin/vitest.config.ts b/packages/ts-html-plugin/vitest.config.ts
new file mode 100644
index 000000000..2221df30e
--- /dev/null
+++ b/packages/ts-html-plugin/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    coverage: {
+      exclude: ['test/**']
+    }
+  }
+});

From 62bdc635a9725f7de6171e5df664b7cd70ae74ea Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 13:00:29 +0700
Subject: [PATCH 08/22] code

---
 package.json                                  |    2 +-
 packages/fastify-html-plugin/LICENSE          |   22 +-
 packages/fastify-html-plugin/index.js         |  102 --
 packages/fastify-html-plugin/package.json     |   27 +-
 packages/fastify-html-plugin/src/index.ts     |  153 +++
 .../test/auto-detect.test.tsx                 |   61 +-
 .../fastify-html-plugin/test/index.test.tsx   |   29 +-
 .../test/stream-html.test.tsx                 |  339 +++---
 .../fastify-html-plugin/test/types.test-d.tsx |   48 +
 .../fastify-html-plugin/tsconfig.build.json   |   10 +
 packages/fastify-html-plugin/tsconfig.json    |   10 +-
 packages/fastify-html-plugin/types/index.d.ts |   82 --
 .../types/index.test-d.tsx                    |   35 -
 packages/html/LICENSE                         |   22 +-
 packages/html/package.json                    |    1 -
 packages/html/src/index.ts                    |    4 +-
 packages/html/src/jsx.ts                      |    3 -
 packages/html/test/attributes.test.tsx        |    2 +-
 packages/html/test/suspense.test.tsx          |   44 +-
 packages/ts-html-plugin/LICENSE               |   22 +-
 packages/ts-html-plugin/package.json          |    5 +
 pnpm-lock.yaml                                | 1071 ++---------------
 22 files changed, 563 insertions(+), 1531 deletions(-)
 mode change 100644 => 120000 packages/fastify-html-plugin/LICENSE
 delete mode 100644 packages/fastify-html-plugin/index.js
 create mode 100644 packages/fastify-html-plugin/src/index.ts
 create mode 100644 packages/fastify-html-plugin/test/types.test-d.tsx
 create mode 100644 packages/fastify-html-plugin/tsconfig.build.json
 delete mode 100644 packages/fastify-html-plugin/types/index.d.ts
 delete mode 100644 packages/fastify-html-plugin/types/index.test-d.tsx
 mode change 100644 => 120000 packages/html/LICENSE
 mode change 100644 => 120000 packages/ts-html-plugin/LICENSE

diff --git a/package.json b/package.json
index 120666b7f..fd02eece3 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "author": "Arthur Fiorette <kita@arthur.place>",
   "scripts": {
     "bench": "pnpm -r --filter \"@kitajs/bench-html-*\" build && pnpm --filter \"@kitajs/bench-html-runner\" start",
-    "build": "pnpm -r --aggregate-output build",
+    "build": "pnpm -r --filter \"./packages/*\" --aggregate-output build",
     "change": "changeset",
     "ci-publish": "pnpm publish -r --access public && changeset tag",
     "ci-version": "changeset version && pnpm install --no-frozen-lockfile",
diff --git a/packages/fastify-html-plugin/LICENSE b/packages/fastify-html-plugin/LICENSE
deleted file mode 100644
index 5b296b873..000000000
--- a/packages/fastify-html-plugin/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Kita
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
diff --git a/packages/fastify-html-plugin/LICENSE b/packages/fastify-html-plugin/LICENSE
new file mode 120000
index 000000000..30cff7403
--- /dev/null
+++ b/packages/fastify-html-plugin/LICENSE
@@ -0,0 +1 @@
+../../LICENSE
\ No newline at end of file
diff --git a/packages/fastify-html-plugin/index.js b/packages/fastify-html-plugin/index.js
deleted file mode 100644
index 5188bc05e..000000000
--- a/packages/fastify-html-plugin/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/// <reference path="./types/index.d.ts" />
-
-const fp = require('fastify-plugin');
-const { resolveHtmlStream } = require('@kitajs/html/suspense');
-
-/** @type {import('./types/index').kAutoDoctype} */
-const kAutoDoctype = Symbol.for('fastify-kita-html.autoDoctype');
-
-/**
- * Returns true if the string starts with `<html`, **ignores whitespace and casing**.
- *
- * @this {void}
- * @param {string} value
- */
-const isTagHtml = RegExp.prototype.test.bind(/^\s*<html/i);
-
-/**
- * @type {import('fastify').FastifyPluginCallback<
- *   import('./types').FastifyKitaHtmlOptions
- * >}
- */
-function plugin(fastify, opts, next) {
-  fastify.decorateReply(kAutoDoctype, opts.autoDoctype ?? true);
-  fastify.decorateReply('html', html);
-  return next();
-}
-
-/** @type {import('fastify').FastifyReply['html']} */
-function html(htmlStr) {
-  if (typeof htmlStr === 'string') {
-    // @ts-expect-error - generics break the type inference here
-    return handleHtml(htmlStr, this);
-  }
-
-  // @ts-expect-error - generics break the type inference here
-  return handleAsyncHtml(htmlStr, this);
-}
-
-/**
- * Simple helper that can be optimized by the JS engine to avoid having async await in the
- * main flow
- *
- * @template {import('fastify').FastifyReply} R
- * @param {Promise<string>} promise
- * @param {R} reply
- * @returns {Promise<R>}
- */
-async function handleAsyncHtml(promise, reply) {
-  return handleHtml(await promise, reply);
-}
-
-/**
- * @template {import('fastify').FastifyReply} R
- * @param {string} htmlStr
- * @param {R} reply
- */
-function handleHtml(htmlStr, reply) {
-  // @ts-expect-error - prepends doctype if the html is a full html document
-  if (reply[kAutoDoctype] && isTagHtml(htmlStr)) {
-    htmlStr = `<!doctype html>${htmlStr}`;
-  }
-
-  reply.type('text/html; charset=utf-8');
-
-  // If no suspense component was used, this will not be defined.
-  const requestData = SUSPENSE_ROOT.requests.get(reply.request.id);
-
-  if (requestData === undefined) {
-    return reply
-      .header('content-length', Buffer.byteLength(htmlStr, 'utf-8'))
-      .send(htmlStr);
-  }
-
-  // Content-length is optional as long as the connection is closed after the response is done
-  // https://www.rfc-editor.org/rfc/rfc7230#section-3.3.3
-  return reply.send(
-    // htmlStr might resolve after one of its suspense components
-    resolveHtmlStream(htmlStr, requestData)
-  );
-}
-
-const fastifyKitaHtml = fp(plugin, {
-  fastify: '4.x || 5.x',
-  name: '@kitajs/fastify-html-plugin'
-});
-
-/**
- * These export configurations enable JS and TS developers to consume
- *
- * @kitajs/fastify-html-plugin in whatever way best suits their needs. Some examples of
- * supported import syntax includes:
- *
- * - `const fastifyKitaHtml = require('@kitajs/fastify-html-plugin')`
- * - `const { fastifyKitaHtml } = require('@kitajs/fastify-html-plugin')`
- * - `import * as fastifyKitaHtml from '@kitajs/fastify-html-plugin'`
- * - `import { fastifyKitaHtml } from '@kitajs/fastify-html-plugin'`
- * - `import fastifyKitaHtml from '@kitajs/fastify-html-plugin'`
- */
-module.exports = fastifyKitaHtml;
-module.exports.default = fastifyKitaHtml; // supersedes fastifyKitaHtml.default = fastifyKitaHtml
-module.exports.fastifyKitaHtml = fastifyKitaHtml; // supersedes fastifyKitaHtml.fastifyKitaHtml = fastifyKitaHtml
-module.exports.kAutoDoctype = kAutoDoctype;
diff --git a/packages/fastify-html-plugin/package.json b/packages/fastify-html-plugin/package.json
index 49586229f..4c4f3e3ff 100644
--- a/packages/fastify-html-plugin/package.json
+++ b/packages/fastify-html-plugin/package.json
@@ -13,30 +13,35 @@
   "license": "MIT",
   "author": "Arthur Fiorette <kita@arthur.place>",
   "type": "commonjs",
-  "main": "index.js",
-  "types": "types/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "!dist/*.tsbuildinfo"
+  ],
   "scripts": {
-    "test": "tsd && c8 --reporter lcov --reporter text node -r @swc-node/register --test test/**/*.test.tsx",
-    "test:watch": "c8 --reporter lcov --reporter text node -r @swc-node/register --test --watch test/**/*.test.tsx"
+    "build": "tsgo -p tsconfig.build.json",
+    "test": "vitest --coverage --typecheck --run"
   },
   "dependencies": {
     "fastify-plugin": "^5.0.1"
   },
   "devDependencies": {
     "@fastify/formbody": "^8.0.2",
-    "@swc-node/register": "catalog:",
-    "@swc/helpers": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
-    "c8": "catalog:",
+    "@typescript/native-preview": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
     "fastify": "^5.6.0",
     "jsdom": "catalog:",
-    "tsd": "^0.33.0",
-    "tslib": "catalog:"
+    "tslib": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
   },
   "peerDependencies": {
-    "@kitajs/html": "workspace:^4.2.10",
-    "@kitajs/ts-html-plugin": "workspace:^4.1.3"
+    "@kitajs/html": "workspace:^",
+    "@kitajs/ts-html-plugin": "workspace:^"
   },
   "peerDependenciesMeta": {
     "@kitajs/ts-html-plugin": {
diff --git a/packages/fastify-html-plugin/src/index.ts b/packages/fastify-html-plugin/src/index.ts
new file mode 100644
index 000000000..6bcba75c4
--- /dev/null
+++ b/packages/fastify-html-plugin/src/index.ts
@@ -0,0 +1,153 @@
+import { resolveHtmlStream } from '@kitajs/html/suspense';
+import type { FastifyPluginCallback, FastifyReply } from 'fastify';
+import fp from 'fastify-plugin';
+
+/** Options for @kitajs/fastify-html-plugin plugin. */
+export interface FastifyKitaHtmlOptions {
+  /**
+   * Whether to automatically add `<!doctype html>` to a response starting with <html>, if
+   * not found.
+   *
+   * ```tsx
+   * // With autoDoctype: true you can just return the html
+   * app.get('/', () => <html></html>)
+   *
+   * // With autoDoctype: false you must use rep.html
+   * app.get('/', (req, rep) => rep.html(<html></html>)
+   * ```
+   *
+   * @default true
+   */
+  autoDoctype: boolean;
+}
+
+/**
+ * This gets assigned to every reply instance. You can manually change this value to
+ * `false` if you want to "hand pick" when or when not to add the doctype.
+ */
+export const kAutoDoctype = Symbol.for('fastify-kita-html.autoDoctype');
+
+/** Returns true if the string starts with `<html`, **ignores whitespace and casing**. */
+const isTagHtml = RegExp.prototype.test.bind(/^\s*<html/i);
+
+const plugin: FastifyPluginCallback<NonNullable<Partial<FastifyKitaHtmlOptions>>> =
+  function (fastify, opts, next) {
+    fastify.decorateReply(kAutoDoctype, opts.autoDoctype ?? true);
+    fastify.decorateReply('html', html);
+    return next();
+  };
+
+function html<H extends JSX.Element>(
+  this: FastifyReply,
+  htmlStr: H
+): H extends Promise<string> ? Promise<void> : void {
+  if (typeof htmlStr === 'string') {
+    // @ts-expect-error - generics break the type inference here
+    return handleHtml(htmlStr, this);
+  }
+
+  // @ts-expect-error - generics break the type inference here
+  return handleAsyncHtml(htmlStr, this);
+}
+
+/**
+ * Simple helper that can be optimized by the JS engine to avoid having async await in the
+ * main flow
+ */
+async function handleAsyncHtml<R extends FastifyReply>(
+  promise: Promise<string>,
+  reply: R
+): Promise<R> {
+  return handleHtml(await promise, reply);
+}
+
+function handleHtml<R extends FastifyReply>(htmlStr: string, reply: R): R {
+  // Prepends doctype if the html is a full html document
+  if (reply[kAutoDoctype] && isTagHtml(htmlStr)) {
+    htmlStr = `<!doctype html>${htmlStr}`;
+  }
+
+  reply.type('text/html; charset=utf-8');
+
+  // If no suspense component was used, this will not be defined.
+  const requestData = SUSPENSE_ROOT.requests.get(reply.request.id);
+
+  if (requestData === undefined) {
+    return reply
+      .header('content-length', Buffer.byteLength(htmlStr, 'utf-8'))
+      .send(htmlStr) as R;
+  }
+
+  // Content-length is optional as long as the connection is closed after the response is done
+  // https://www.rfc-editor.org/rfc/rfc7230#section-3.3.3
+  return reply.send(
+    // htmlStr might resolve after one of its suspense components
+    resolveHtmlStream(htmlStr, requestData)
+  ) as R;
+}
+
+const plugin_ = fp(plugin, {
+  fastify: '4.x || 5.x',
+  name: '@kitajs/fastify-html-plugin'
+});
+
+export const fastifyKitaHtml = Object.assign(plugin_, { kAutoDoctype });
+
+/**
+ * These export configurations enable JS and TS developers to consume
+ *
+ * @kitajs/fastify-html-plugin in whatever way best suits their needs. Some examples of
+ * supported import syntax includes:
+ *
+ * - `const fastifyKitaHtml = require('@kitajs/fastify-html-plugin')`
+ * - `const { fastifyKitaHtml } = require('@kitajs/fastify-html-plugin')`
+ * - `import * as fastifyKitaHtml from '@kitajs/fastify-html-plugin'`
+ * - `import { fastifyKitaHtml } from '@kitajs/fastify-html-plugin'`
+ * - `import fastifyKitaHtml from '@kitajs/fastify-html-plugin'`
+ */
+export default fastifyKitaHtml;
+
+// Module augmentation for FastifyReply
+declare module 'fastify' {
+  interface FastifyReply {
+    /**
+     * This gets assigned to every reply instance. You can manually change this value to
+     * `false` if you want to "hand pick" when or when not to add the doctype.
+     */
+    [kAutoDoctype]: boolean;
+
+    /**
+     * **Synchronously** waits for the component tree to resolve and sends it at once to
+     * the browser.
+     *
+     * This method does not support the usage of `<Suspense />`, please use
+     * {@linkcode streamHtml} instead.
+     *
+     * If the HTML does not start with a doctype and `opts.autoDoctype` is enabled, it
+     * will be added automatically.
+     *
+     * The correct `Content-Type` header will also be defined.
+     *
+     * @example
+     *
+     * ```tsx
+     * app.get('/', (req, reply) =>
+     *  reply.html(
+     *    <html lang="en">
+     *      <body>
+     *        <h1>Hello, world!</h1>
+     *      </body>
+     *    </html>
+     *   )
+     * );
+     * ```
+     *
+     * @param html The HTML to send.
+     * @returns The response.
+     */
+    html<H extends JSX.Element>(
+      this: this,
+      html: H
+    ): H extends Promise<string> ? Promise<void> : void;
+  }
+}
diff --git a/packages/fastify-html-plugin/test/auto-detect.test.tsx b/packages/fastify-html-plugin/test/auto-detect.test.tsx
index a540d32a6..e0412a61d 100644
--- a/packages/fastify-html-plugin/test/auto-detect.test.tsx
+++ b/packages/fastify-html-plugin/test/auto-detect.test.tsx
@@ -1,46 +1,57 @@
 import fastify from 'fastify';
-import assert from 'node:assert';
-import test from 'node:test';
+import { describe, expect, test } from 'vitest';
 import { fastifyKitaHtml } from '../';
 
-test('opts.autoDoctype', async (t) => {
-  await using app = fastify();
-  app.register(fastifyKitaHtml);
+describe('opts.autoDoctype', () => {
+  test('Default', async () => {
+    await using app = fastify();
+    app.register(fastifyKitaHtml);
 
-  app.get('/default', () => <div>Not a html root element</div>);
-  app.get('/default/root', () => <html lang="en" />);
-  app.get('/html', (_, res) => res.html(<div>Not a html root element</div>));
-  app.get('/html/root', (_, res) => res.html(<html lang="en" />));
+    app.get('/default', () => <div>Not a html root element</div>);
 
-  await t.test('Default', async () => {
     const res = await app.inject({ method: 'GET', url: '/default' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/plain; charset=utf-8');
-    assert.strictEqual(res.body, '<div>Not a html root element</div>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/plain; charset=utf-8');
+    expect(res.body).toBe('<div>Not a html root element</div>');
   });
 
-  await t.test('Default root', async () => {
+  test('Default root', async () => {
+    await using app = fastify();
+    app.register(fastifyKitaHtml);
+
+    app.get('/default/root', () => <html lang="en" />);
+
     const res = await app.inject({ method: 'GET', url: '/default/root' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/plain; charset=utf-8');
-    assert.strictEqual(res.body, '<html lang="en"></html>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/plain; charset=utf-8');
+    expect(res.body).toBe('<html lang="en"></html>');
   });
 
-  await t.test('Html ', async () => {
+  test('Html', async () => {
+    await using app = fastify();
+    app.register(fastifyKitaHtml);
+
+    app.get('/html', (_, res) => res.html(<div>Not a html root element</div>));
+
     const res = await app.inject({ method: 'GET', url: '/html' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(res.body, '<div>Not a html root element</div>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.body).toBe('<div>Not a html root element</div>');
   });
 
-  await t.test('Html root', async () => {
+  test('Html root', async () => {
+    await using app = fastify();
+    app.register(fastifyKitaHtml);
+
+    app.get('/html/root', (_, res) => res.html(<html lang="en" />));
+
     const res = await app.inject({ method: 'GET', url: '/html/root' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(res.body, '<!doctype html><html lang="en"></html>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.body).toBe('<!doctype html><html lang="en"></html>');
   });
 });
diff --git a/packages/fastify-html-plugin/test/index.test.tsx b/packages/fastify-html-plugin/test/index.test.tsx
index c0c117a7e..b02d3764e 100644
--- a/packages/fastify-html-plugin/test/index.test.tsx
+++ b/packages/fastify-html-plugin/test/index.test.tsx
@@ -1,7 +1,6 @@
 import fastify from 'fastify';
-import assert from 'node:assert';
-import test, { describe } from 'node:test';
 import { setImmediate } from 'node:timers/promises';
+import { describe, expect, test } from 'vitest';
 import { fastifyKitaHtml } from '..';
 
 describe('reply.html()', () => {
@@ -13,9 +12,9 @@ describe('reply.html()', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.body, '<div>Hello from JSX!</div>');
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(res.statusCode, 200);
+    expect(res.body).toBe('<div>Hello from JSX!</div>');
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.statusCode).toBe(200);
   });
 
   test('renders async html', async () => {
@@ -23,14 +22,14 @@ describe('reply.html()', () => {
     app.register(fastifyKitaHtml);
 
     app.get('/', (_, res) =>
-      res.html(<div>{setImmediate('Hello from async JSX!')}</div>)
+      res.html(<div safe>{setImmediate('Hello from async JSX!')}</div>)
     );
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.body, '<div>Hello from async JSX!</div>');
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(res.statusCode, 200);
+    expect(res.body).toBe('<div>Hello from async JSX!</div>');
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.statusCode).toBe(200);
   });
 
   test('fails when html is not a string', async () => {
@@ -44,9 +43,9 @@ describe('reply.html()', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.headers['content-type'], 'application/json; charset=utf-8');
-    assert.strictEqual(res.statusCode, 500);
-    assert.deepStrictEqual(res.json(), {
+    expect(res.headers['content-type']).toBe('application/json; charset=utf-8');
+    expect(res.statusCode).toBe(500);
+    expect(res.json()).toEqual({
       statusCode: 500,
       code: 'ERR_INVALID_ARG_TYPE',
       error: 'Internal Server Error',
@@ -66,9 +65,9 @@ describe('reply.html()', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.statusCode, 500);
-    assert.strictEqual(res.headers['content-type'], 'application/json; charset=utf-8');
-    assert.deepStrictEqual(res.json(), {
+    expect(res.statusCode).toBe(500);
+    expect(res.headers['content-type']).toBe('application/json; charset=utf-8');
+    expect(res.json()).toEqual({
       statusCode: 500,
       code: 'ERR_INVALID_ARG_TYPE',
       error: 'Internal Server Error',
diff --git a/packages/fastify-html-plugin/test/stream-html.test.tsx b/packages/fastify-html-plugin/test/stream-html.test.tsx
index 5d83e9076..2aaf1bba7 100644
--- a/packages/fastify-html-plugin/test/stream-html.test.tsx
+++ b/packages/fastify-html-plugin/test/stream-html.test.tsx
@@ -5,12 +5,11 @@
 // This was adapted to work inside a fastify route handler.
 
 import Html, { type PropsWithChildren } from '@kitajs/html';
-import { Suspense, SuspenseScript } from '@kitajs/html/suspense';
+import { Suspense, SuspenseScript as safeSuspenseScript } from '@kitajs/html/suspense';
 import fastify from 'fastify';
 import { JSDOM } from 'jsdom';
-import assert from 'node:assert';
-import { afterEach, describe, test } from 'node:test';
 import { setTimeout } from 'node:timers/promises';
+import { afterEach, describe, expect, test } from 'vitest';
 import { fastifyKitaHtml } from '..';
 
 async function SleepForMs({ ms, children }: PropsWithChildren<{ ms: number }>) {
@@ -21,7 +20,7 @@ async function SleepForMs({ ms, children }: PropsWithChildren<{ ms: number }>) {
 describe('Suspense', () => {
   // Detect leaks of pending promises
   afterEach(() => {
-    assert.equal(SUSPENSE_ROOT.requests.size, 0, 'Suspense root left pending resources');
+    expect(SUSPENSE_ROOT.requests.size).toBe(0);
 
     // Reset suspense root
     SUSPENSE_ROOT.autoScript = true;
@@ -37,9 +36,9 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.body, '<div></div>');
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
+    expect(res.body).toBe('<div></div>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
   });
 
   test('Suspense sync children', async () => {
@@ -56,9 +55,9 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.body, '<div>2</div>');
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
+    expect(res.body).toBe('<div>2</div>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
   });
 
   test('Suspense async children', async () => {
@@ -75,16 +74,15 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(
-      res.body,
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.body).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           2
@@ -110,16 +108,15 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(
-      res.body,
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.body).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           2
@@ -145,9 +142,9 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.body, '<div>2</div>');
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
+    expect(res.body).toBe('<div>2</div>');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
   });
 
   test('Multiple async renders cleanup', async () => {
@@ -167,16 +164,15 @@ describe('Suspense', () => {
     for (const _ of Array.from({ length: 100 })) {
       promises.push(
         app.inject({ method: 'GET', url: '/' }).then((res) => {
-          assert.strictEqual(res.statusCode, 200);
-          assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-          assert.strictEqual(
-            res.body,
+          expect(res.statusCode).toBe(200);
+          expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+          expect(res.body).toBe(
             <>
               <div id="B:1" data-sf>
                 <div>1</div>
               </div>
 
-              {SuspenseScript}
+              {safeSuspenseScript}
 
               <template id="N:1" data-sr>
                 2
@@ -207,16 +203,15 @@ describe('Suspense', () => {
 
     for (let i = 0; i < 10; i++) {
       const res = await app.inject({ method: 'GET', url: '/' });
-      assert.strictEqual(res.statusCode, 200);
-      assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-      assert.strictEqual(
-        res.body,
+      expect(res.statusCode).toBe(200);
+      expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+      expect(res.body).toBe(
         <>
           <div id="B:1" data-sf>
             <div>1</div>
           </div>
 
-          {SuspenseScript}
+          {safeSuspenseScript}
 
           <template id="N:1" data-sr>
             2
@@ -253,11 +248,10 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
 
-    assert.strictEqual(
-      res.body,
+    expect(res.body).toBe(
       <>
         <div>
           <div id="B:1" data-sf>
@@ -271,7 +265,7 @@ describe('Suspense', () => {
           </div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           4
@@ -328,13 +322,11 @@ describe('Suspense', () => {
     );
 
     for (const result of results) {
-      // biome-ignore lint/style/noNonNullAssertion: this is a test
       const seconds = +result.headers.seconds!;
 
-      assert.strictEqual(result.statusCode, 200);
-      assert.strictEqual(result.headers['content-type'], 'text/html; charset=utf-8');
-      assert.strictEqual(
-        result.body,
+      expect(result.statusCode).toBe(200);
+      expect(result.headers['content-type']).toBe('text/html; charset=utf-8');
+      expect(result.body).toBe(
         <>
           <div>
             {Array.from({ length: seconds }, (_, i) => (
@@ -344,7 +336,7 @@ describe('Suspense', () => {
             ))}
           </div>
 
-          {SuspenseScript}
+          {safeSuspenseScript}
 
           {Array.from({ length: seconds }, (_, i) => (
             <>
@@ -361,7 +353,7 @@ describe('Suspense', () => {
     }
   });
 
-  test('works with parallel deep suspense calls resolving first', async (t) => {
+  test('works with parallel deep suspense calls resolving first', async () => {
     await using app = fastify();
     app.register(fastifyKitaHtml);
 
@@ -387,142 +379,138 @@ describe('Suspense', () => {
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
 
-    await t.test('Html stream', () => {
-      assert.strictEqual(
-        res.body,
-        <>
-          <div>
-            <div id="B:2" data-sf>
-              <div>0 fb outer</div>
-            </div>
-            <div id="B:4" data-sf>
-              <div>1 fb outer</div>
-            </div>
-            <div id="B:6" data-sf>
-              <div>2 fb outer</div>
-            </div>
-            <div id="B:8" data-sf>
-              <div>3 fb outer</div>
-            </div>
-            <div id="B:10" data-sf>
-              <div>4 fb outer</div>
-            </div>
+    expect(res.body).toBe(
+      <>
+        <div>
+          <div id="B:2" data-sf>
+            <div>0 fb outer</div>
+          </div>
+          <div id="B:4" data-sf>
+            <div>1 fb outer</div>
           </div>
+          <div id="B:6" data-sf>
+            <div>2 fb outer</div>
+          </div>
+          <div id="B:8" data-sf>
+            <div>3 fb outer</div>
+          </div>
+          <div id="B:10" data-sf>
+            <div>4 fb outer</div>
+          </div>
+        </div>
 
-          {SuspenseScript}
+        {safeSuspenseScript}
 
-          <template id="N:1" data-sr>
-            <div>Inner 0!</div>
-          </template>
-          <script id="S:1" data-ss>
-            $KITA_RC(1)
-          </script>
+        <template id="N:1" data-sr>
+          <div>Inner 0!</div>
+        </template>
+        <script id="S:1" data-ss>
+          $KITA_RC(1)
+        </script>
 
-          <template id="N:2" data-sr>
-            <div>Outer 0!</div>
-            <div id="B:1" data-sf>
-              <div>0 fb inner!</div>
-            </div>
-          </template>
-          <script id="S:2" data-ss>
-            $KITA_RC(2)
-          </script>
+        <template id="N:2" data-sr>
+          <div>Outer 0!</div>
+          <div id="B:1" data-sf>
+            <div>0 fb inner!</div>
+          </div>
+        </template>
+        <script id="S:2" data-ss>
+          $KITA_RC(2)
+        </script>
 
-          <template id="N:3" data-sr>
-            <div>Inner 1!</div>
-          </template>
-          <script id="S:3" data-ss>
-            $KITA_RC(3)
-          </script>
+        <template id="N:3" data-sr>
+          <div>Inner 1!</div>
+        </template>
+        <script id="S:3" data-ss>
+          $KITA_RC(3)
+        </script>
 
-          <template id="N:4" data-sr>
-            <div>Outer 1!</div>
-            <div id="B:3" data-sf>
-              <div>1 fb inner!</div>
-            </div>
-          </template>
-          <script id="S:4" data-ss>
-            $KITA_RC(4)
-          </script>
+        <template id="N:4" data-sr>
+          <div>Outer 1!</div>
+          <div id="B:3" data-sf>
+            <div>1 fb inner!</div>
+          </div>
+        </template>
+        <script id="S:4" data-ss>
+          $KITA_RC(4)
+        </script>
 
-          <template id="N:6" data-sr>
-            <div>Outer 2!</div>
-            <div id="B:5" data-sf>
-              <div>2 fb inner!</div>
-            </div>
-          </template>
-          <script id="S:6" data-ss>
-            $KITA_RC(6)
-          </script>
+        <template id="N:6" data-sr>
+          <div>Outer 2!</div>
+          <div id="B:5" data-sf>
+            <div>2 fb inner!</div>
+          </div>
+        </template>
+        <script id="S:6" data-ss>
+          $KITA_RC(6)
+        </script>
 
-          <template id="N:5" data-sr>
-            <div>Inner 2!</div>
-          </template>
-          <script id="S:5" data-ss>
-            $KITA_RC(5)
-          </script>
+        <template id="N:5" data-sr>
+          <div>Inner 2!</div>
+        </template>
+        <script id="S:5" data-ss>
+          $KITA_RC(5)
+        </script>
 
-          <template id="N:10" data-sr>
-            <div>Outer 4!</div>
-            <div id="B:9" data-sf>
-              <div>4 fb inner!</div>
-            </div>
-          </template>
-          <script id="S:10" data-ss>
-            $KITA_RC(10)
-          </script>
+        <template id="N:10" data-sr>
+          <div>Outer 4!</div>
+          <div id="B:9" data-sf>
+            <div>4 fb inner!</div>
+          </div>
+        </template>
+        <script id="S:10" data-ss>
+          $KITA_RC(10)
+        </script>
 
-          <template id="N:7" data-sr>
-            <div>Inner 3!</div>
-          </template>
-          <script id="S:7" data-ss>
-            $KITA_RC(7)
-          </script>
+        <template id="N:7" data-sr>
+          <div>Inner 3!</div>
+        </template>
+        <script id="S:7" data-ss>
+          $KITA_RC(7)
+        </script>
 
-          <template id="N:8" data-sr>
-            <div>Outer 3!</div>
-            <div id="B:7" data-sf>
-              <div>3 fb inner!</div>
-            </div>
-          </template>
-          <script id="S:8" data-ss>
-            $KITA_RC(8)
-          </script>
+        <template id="N:8" data-sr>
+          <div>Outer 3!</div>
+          <div id="B:7" data-sf>
+            <div>3 fb inner!</div>
+          </div>
+        </template>
+        <script id="S:8" data-ss>
+          $KITA_RC(8)
+        </script>
 
-          <template id="N:9" data-sr>
-            <div>Inner 4!</div>
-          </template>
-          <script id="S:9" data-ss>
-            $KITA_RC(9)
-          </script>
-        </>
-      );
-    });
+        <template id="N:9" data-sr>
+          <div>Inner 4!</div>
+        </template>
+        <script id="S:9" data-ss>
+          $KITA_RC(9)
+        </script>
+      </>
+    );
 
-    await t.test('Browser simulation', async () => {
-      // Simulates a browser
-      assert.equal(
-        new JSDOM(res.body, { runScripts: 'dangerously' }).window.document.body.innerHTML,
-        <>
-          <div>
-            <div>Outer 0!</div>
-            <div>Inner 0!</div>
-            <div>Outer 1!</div>
-            <div>Inner 1!</div>
-            <div>Outer 2!</div>
-            <div>Inner 2!</div>
-            <div>Outer 3!</div>
-            <div>Inner 3!</div>
-            <div>Outer 4!</div>
-            <div>Inner 4!</div>
-          </div>
-          {SuspenseScript}
-        </>
-      );
-    });
+    // Browser simulation
+    expect(
+      new JSDOM(res.body, { runScripts: 'dangerously' }).window.document.body.innerHTML
+    ).toBe(
+      <>
+        <div>
+          <div>Outer 0!</div>
+          <div>Inner 0!</div>
+          <div>Outer 1!</div>
+          <div>Inner 1!</div>
+          <div>Outer 2!</div>
+          <div>Inner 2!</div>
+          <div>Outer 3!</div>
+          <div>Inner 3!</div>
+          <div>Outer 4!</div>
+          <div>Inner 4!</div>
+        </div>
+        {safeSuspenseScript}
+      </>
+    );
   });
 
   test('tests suspense without error boundary', async () => {
@@ -532,14 +520,14 @@ describe('Suspense', () => {
     app.get('/', (req, res) =>
       res.html(
         <Suspense rid={req.id} fallback={<div>1</div>}>
-          {Promise.reject(new Error('component failed'))}
+          {Promise.reject(new Error('component failed')) as Promise<'safe'>}
         </Suspense>
       )
     );
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.deepStrictEqual(res.json(), {
+    expect(res.json()).toEqual({
       error: 'Internal Server Error',
       message: 'component failed',
       statusCode: 500
@@ -558,27 +546,26 @@ describe('Suspense', () => {
           rid={req.id}
           fallback={<div>1</div>}
           catch={(err2) => {
-            assert.equal(err2, err);
+            expect(err2).toBe(err);
             return <div>3</div>;
           }}
         >
-          {Promise.reject(err)}
+          {Promise.reject(err) as Promise<'safe'>}
         </Suspense>
       )
     );
 
     const res = await app.inject({ method: 'GET', url: '/' });
 
-    assert.strictEqual(res.statusCode, 200);
-    assert.strictEqual(res.headers['content-type'], 'text/html; charset=utf-8');
-    assert.strictEqual(
-      res.body,
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/html; charset=utf-8');
+    expect(res.body).toBe(
       <>
         <div id="B:1" data-sf>
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
         <template id="N:1" data-sr>
           <div>3</div>
         </template>
diff --git a/packages/fastify-html-plugin/test/types.test-d.tsx b/packages/fastify-html-plugin/test/types.test-d.tsx
new file mode 100644
index 000000000..040bf045e
--- /dev/null
+++ b/packages/fastify-html-plugin/test/types.test-d.tsx
@@ -0,0 +1,48 @@
+import { Suspense } from '@kitajs/html/suspense';
+import fastify from 'fastify';
+import { expectTypeOf, test } from 'vitest';
+import { fastifyKitaHtml } from '..';
+
+test('fastify-html-plugin types', () => {
+  expectTypeOf(fastifyKitaHtml).toBeFunction();
+  expectTypeOf(fastifyKitaHtml.kAutoDoctype).toEqualTypeOf<symbol>();
+
+  const app = fastify();
+
+  app.register(fastifyKitaHtml);
+
+  app.register(fastifyKitaHtml, {
+    autoDoctype: true
+  });
+
+  app.get('/', async (_, reply) => {
+    expectTypeOf(reply.html).toBeFunction();
+    reply.html('<div>hello world</div>');
+  });
+
+  app.get('/jsx', async (_, reply) => {
+    reply.html(<div>hello world</div>);
+  });
+
+  app.get('/stream', async (_, reply) => {
+    reply.html('<div>hello world</div>');
+  });
+
+  app.get('/stream/jsx', async (_, reply) => {
+    reply.html(<div>hello world</div>);
+  });
+
+  app.get('/stream/suspense', async (request, reply) => {
+    reply.html(
+      <Suspense rid={request.id} fallback={<div>fallback</div>}>
+        {Promise.resolve(1)}
+      </Suspense>
+    );
+  });
+
+  // @ts-expect-error - should not accept number
+  app.get('/invalid', async (_, reply) => reply.html(12345));
+
+  // @ts-expect-error - invalid option
+  app.register(fastifyKitaHtml, { invalidOption: true });
+});
diff --git a/packages/fastify-html-plugin/tsconfig.build.json b/packages/fastify-html-plugin/tsconfig.build.json
new file mode 100644
index 000000000..4960a34a6
--- /dev/null
+++ b/packages/fastify-html-plugin/tsconfig.build.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "tsBuildInfoFile": "dist/.tsbuildinfo"
+  },
+  "include": ["src"]
+}
diff --git a/packages/fastify-html-plugin/tsconfig.json b/packages/fastify-html-plugin/tsconfig.json
index e5d425636..7c0d42008 100644
--- a/packages/fastify-html-plugin/tsconfig.json
+++ b/packages/fastify-html-plugin/tsconfig.json
@@ -1,13 +1,13 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ES2022",
+    "target": "esnext",
     "jsx": "react-jsx",
     "jsxImportSource": "@kitajs/html",
-    "module": "CommonJS",
-    "moduleResolution": "Node",
-    "outDir": "dist",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "outDir": "./dist",
     "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
   },
-  "include": ["lib", "test", "types", "index.js", "examples"]
+  "include": ["src", "test"]
 }
diff --git a/packages/fastify-html-plugin/types/index.d.ts b/packages/fastify-html-plugin/types/index.d.ts
deleted file mode 100644
index 13d94d66c..000000000
--- a/packages/fastify-html-plugin/types/index.d.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { FastifyPluginCallback } from 'fastify';
-
-declare module 'fastify' {
-  interface FastifyReply {
-    /**
-     * This gets assigned to every reply instance. You can manually change this value to
-     * `false` if you want to "hand pick" when or when not to add the doctype.
-     */
-    [fastifyKitaHtml.kAutoDoctype]: boolean;
-
-    /**
-     * **Synchronously** waits for the component tree to resolve and sends it at once to
-     * the browser.
-     *
-     * This method does not support the usage of `<Suspense />`, please use
-     * {@linkcode streamHtml} instead.
-     *
-     * If the HTML does not start with a doctype and `opts.autoDoctype` is enabled, it
-     * will be added automatically.
-     *
-     * The correct `Content-Type` header will also be defined.
-     *
-     * @example
-     *
-     * ```tsx
-     * app.get('/', (req, reply) =>
-     *  reply.html(
-     *    <html lang="en">
-     *      <body>
-     *        <h1>Hello, world!</h1>
-     *      </body>
-     *    </html>
-     *   )
-     * );
-     * ```
-     *
-     * @param html The HTML to send.
-     * @returns The response.
-     */
-    html<H extends JSX.Element>(
-      this: this,
-      html: H
-    ): H extends Promise<string> ? Promise<void> : void;
-  }
-}
-
-type FastifyKitaHtmlPlugin = FastifyPluginCallback<
-  NonNullable<Partial<fastifyKitaHtml.FastifyKitaHtmlOptions>>
->;
-
-declare namespace fastifyKitaHtml {
-  /** Options for @kitajs/fastify-html-plugin plugin. */
-  export interface FastifyKitaHtmlOptions {
-    /**
-     * Whether to automatically add `<!doctype html>` to a response starting with <html>,
-     * if not found.
-     *
-     * ```tsx
-     * // With autoDoctype: true you can just return the html
-     * app.get('/', () => <html></html>)
-     *
-     * // With autoDoctype: false you must use rep.html
-     * app.get('/', (req, rep) => rep.html(<html></html>)
-     * ```
-     *
-     * @default true
-     */
-    autoDoctype: boolean;
-  }
-
-  export const fastifyKitaHtml: FastifyKitaHtmlPlugin;
-
-  /**
-   * This gets assigned to every reply instance. You can manually change this value to
-   * `false` if you want to "hand pick" when or when not to add the doctype.
-   */
-  export const kAutoDoctype: unique symbol;
-
-  export { fastifyKitaHtml as default };
-}
-
-export = fastifyKitaHtml;
diff --git a/packages/fastify-html-plugin/types/index.test-d.tsx b/packages/fastify-html-plugin/types/index.test-d.tsx
deleted file mode 100644
index 7cccd3e72..000000000
--- a/packages/fastify-html-plugin/types/index.test-d.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Suspense } from '@kitajs/html/suspense';
-import fastify from 'fastify';
-import { fastifyKitaHtml } from '.';
-
-const app = fastify();
-
-app.register(fastifyKitaHtml);
-
-app.register(fastifyKitaHtml, {
-  autoDoctype: true
-});
-
-app.get('/', async (_, reply) => {
-  reply.html('<div>hello world</div>');
-});
-
-app.get('/jsx', async (_, reply) => {
-  reply.html(<div>hello world</div>);
-});
-
-app.get('/stream', async (_, reply) => {
-  reply.html('<div>hello world</div>');
-});
-
-app.get('/stream/jsx', async (_, reply) => {
-  reply.html(<div>hello world</div>);
-});
-
-app.get('/stream/suspense', async (request, reply) => {
-  reply.html(
-    <Suspense rid={request.id} fallback={<div>fallback</div>}>
-      {Promise.resolve(1)}
-    </Suspense>
-  );
-});
diff --git a/packages/html/LICENSE b/packages/html/LICENSE
deleted file mode 100644
index 5b296b873..000000000
--- a/packages/html/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Kita
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
diff --git a/packages/html/LICENSE b/packages/html/LICENSE
new file mode 120000
index 000000000..30cff7403
--- /dev/null
+++ b/packages/html/LICENSE
@@ -0,0 +1 @@
+../../LICENSE
\ No newline at end of file
diff --git a/packages/html/package.json b/packages/html/package.json
index 737fc48a3..c221b7a2d 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -30,7 +30,6 @@
     "!dist/*.tsbuildinfo"
   ],
   "scripts": {
-    "bench": "pnpm --filter \"benchmark-*\" build && pnpm --filter \"benchmark-runner\" start",
     "build": "tsgo -p tsconfig.build.json",
     "test": "vitest --coverage --typecheck --run"
   },
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index a00db5573..8e704144e 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -1,4 +1,4 @@
-import './jsx.d.ts';
+import './jsx.js';
 
 /// <reference path="./suspense.ts" />
 /// <reference path="./error-boundary.ts" />
@@ -151,7 +151,7 @@ export let escapeHtml: (this: void, value: any) => string = function (value) {
   return escaped;
 };
 
-/* c8 ignore next 2 */
+/* v8 ignore next 2 */
 // @ts-ignore - bun runtime have its own escapeHTML function.
 if (typeof Bun !== 'undefined') escapeHtml = Bun.escapeHTML;
 
diff --git a/packages/html/src/jsx.ts b/packages/html/src/jsx.ts
index ebbbd4947..d528c86c9 100644
--- a/packages/html/src/jsx.ts
+++ b/packages/html/src/jsx.ts
@@ -992,6 +992,3 @@ type AriaRole =
   | 'treegrid'
   | 'treeitem'
   | (string & {});
-
-// Export empty object to make this a module
-export {};
diff --git a/packages/html/test/attributes.test.tsx b/packages/html/test/attributes.test.tsx
index 3e35863cb..83b92fd21 100644
--- a/packages/html/test/attributes.test.tsx
+++ b/packages/html/test/attributes.test.tsx
@@ -59,7 +59,7 @@ describe('Attributes', () => {
   test('Dates & Objects', () => {
     const date = new Date();
     expect(<del datetime={date} />).toMatchInlineSnapshot(
-      `<del datetime="${date.toISOString()}"></del>`
+      `"<del datetime="${date.toISOString()}"></del>"`
     );
 
     //@ts-expect-error - testing object attribute
diff --git a/packages/html/test/suspense.test.tsx b/packages/html/test/suspense.test.tsx
index 4a34a884f..fe4226914 100644
--- a/packages/html/test/suspense.test.tsx
+++ b/packages/html/test/suspense.test.tsx
@@ -3,7 +3,11 @@ import { text } from 'node:stream/consumers';
 import { setImmediate, setTimeout } from 'node:timers/promises';
 import { afterEach, describe, expect, it, test, vi } from 'vitest';
 import { Html, type PropsWithChildren } from '../src/index.js';
-import { Suspense, SuspenseScript, renderToStream } from '../src/suspense.js';
+import {
+  Suspense,
+  renderToStream,
+  SuspenseScript as safeSuspenseScript
+} from '../src/suspense.js';
 
 async function SleepForMs({ ms, children }: PropsWithChildren<{ ms: number }>) {
   await setTimeout(ms * 50);
@@ -58,7 +62,7 @@ describe('Suspense', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           2
@@ -85,7 +89,7 @@ describe('Suspense', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           2
@@ -131,7 +135,7 @@ describe('Suspense', () => {
                 <div>1</div>
               </div>
 
-              {SuspenseScript}
+              {safeSuspenseScript}
 
               <template id="N:1" data-sr>
                 2
@@ -162,7 +166,7 @@ describe('Suspense', () => {
             <div>1</div>
           </div>
 
-          {SuspenseScript}
+          {safeSuspenseScript}
 
           <template id="N:1" data-sr>
             2
@@ -208,7 +212,7 @@ describe('Suspense', () => {
           </div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           4
@@ -272,7 +276,7 @@ describe('Suspense', () => {
             ))}
           </div>
 
-          {SuspenseScript}
+          {safeSuspenseScript}
 
           {Array.from({ length: seconds }, (_, i) => (
             <>
@@ -316,7 +320,7 @@ describe('Suspense', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>2</div>
@@ -388,7 +392,7 @@ describe('Suspense', () => {
 
     expect(chunks[1].toString()).toBe(
       <>
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>1</div>
@@ -440,7 +444,7 @@ describe('Suspense', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>2</div>
@@ -486,7 +490,7 @@ describe('Suspense', () => {
           </div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:2" data-sr>
           <div>2</div>
@@ -546,7 +550,7 @@ describe('Suspense', () => {
           </div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>5</div>
@@ -615,7 +619,7 @@ describe('Suspense', () => {
           </div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>Inner 0!</div>
@@ -721,14 +725,16 @@ describe('Suspense', () => {
           <div>Outer 4!</div>
           <div>Inner 4!</div>
         </div>
-        {SuspenseScript}
+        {safeSuspenseScript}
       </>
     );
   });
 
   it('SuspenseScript is a valid JS code', () => {
     // removes <script ...> and </script> tags
-    eval(SuspenseScript.slice(SuspenseScript.indexOf('>') + 1, -'</script>'.length));
+    eval(
+      safeSuspenseScript.slice(safeSuspenseScript.indexOf('>') + 1, -'</script>'.length)
+    );
   });
 
   it('Suspense works when children resolves first', async () => {
@@ -762,7 +768,7 @@ describe('Suspense', () => {
           </div>
         </div>
 
-        {SuspenseScript as 'safe'}
+        {safeSuspenseScript as 'safe'}
 
         <template id="N:1" data-sr>
           Child!
@@ -939,7 +945,7 @@ describe('Suspense errors', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
         <template id="N:1" data-sr>
           <div>3</div>
         </template>
@@ -979,7 +985,7 @@ describe('Suspense errors', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>3</div>
@@ -1051,7 +1057,7 @@ describe('Suspense errors', () => {
           <div>1</div>
         </div>
 
-        {SuspenseScript}
+        {safeSuspenseScript}
 
         <template id="N:1" data-sr>
           <div>2</div>
diff --git a/packages/ts-html-plugin/LICENSE b/packages/ts-html-plugin/LICENSE
deleted file mode 100644
index 5b296b873..000000000
--- a/packages/ts-html-plugin/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Kita
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
diff --git a/packages/ts-html-plugin/LICENSE b/packages/ts-html-plugin/LICENSE
new file mode 120000
index 000000000..30cff7403
--- /dev/null
+++ b/packages/ts-html-plugin/LICENSE
@@ -0,0 +1 @@
+../../LICENSE
\ No newline at end of file
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index 33394eea2..518fb9e1e 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -19,6 +19,11 @@
     "ts-html-plugin": "dist/cli.js",
     "xss-scan": "dist/cli.js"
   },
+  "files": [
+    "dist",
+    "src",
+    "!dist/*.tsbuildinfo"
+  ],
   "scripts": {
     "build": "tsgo -p tsconfig.build.json",
     "prepack": "pnpm run build",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ad75deeb..25cb5ec94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,12 +6,6 @@ settings:
 
 catalogs:
   default:
-    '@swc-node/register':
-      specifier: ^1.11.1
-      version: 1.11.1
-    '@swc/helpers':
-      specifier: ^0.5.18
-      version: 0.5.18
     '@types/jsdom':
       specifier: ^27.0.0
       version: 27.0.0
@@ -327,33 +321,33 @@ importers:
       '@fastify/formbody':
         specifier: ^8.0.2
         version: 8.0.2
-      '@swc-node/register':
-        specifier: 'catalog:'
-        version: 1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)(typescript@5.9.3)
-      '@swc/helpers':
-        specifier: 'catalog:'
-        version: 0.5.18
       '@types/jsdom':
         specifier: 'catalog:'
         version: 27.0.0
       '@types/node':
         specifier: 'catalog:'
         version: 24.10.9
-      c8:
+      '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 10.1.3
+        version: 7.0.0-dev.20260122.2
+      '@vitest/coverage-v8':
+        specifier: 'catalog:'
+        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
       fastify:
         specifier: ^5.6.0
         version: 5.6.0
       jsdom:
         specifier: 'catalog:'
         version: 27.4.0
-      tsd:
-        specifier: ^0.33.0
-        version: 0.33.0
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vitest:
+        specifier: 'catalog:'
+        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
 
   packages/html:
     dependencies:
@@ -455,10 +449,6 @@ packages:
   '@asamuzakjp/nwsapi@2.3.9':
     resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
 
-  '@babel/code-frame@7.27.1':
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -577,15 +567,6 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
-  '@emnapi/core@1.5.0':
-    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
-
-  '@emnapi/runtime@1.5.0':
-    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
-
-  '@emnapi/wasi-threads@1.1.0':
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
-
   '@esbuild/aix-ppc64@0.27.2':
     resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
     engines: {node: '>=18'}
@@ -789,10 +770,6 @@ packages:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
 
-  '@jest/schemas@29.6.3':
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -809,9 +786,6 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@napi-rs/wasm-runtime@1.0.5':
-    resolution: {integrity: sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==}
-
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -824,101 +798,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.8.0':
-    resolution: {integrity: sha512-St1Muhuw4EVprhV3/D7M9KmKZZiOUTrRu1UTRKFjJAzuec9eCq4OAEk3bPRXCJlKtdmS2ijvywTN++bjJUmYvg==}
-    cpu: [arm]
-    os: [android]
-
-  '@oxc-resolver/binding-android-arm64@11.8.0':
-    resolution: {integrity: sha512-aNq7fIcJN1+hdWL2vTLd8E/MNIaYa8hL6L2TFwIEo0VuIuaaYxk4/GiZK8w50z7QLDbD5GUMlXwb2ccI5RqL7A==}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-resolver/binding-darwin-arm64@11.8.0':
-    resolution: {integrity: sha512-/mX3v6M9gyyAyV1VZSCbo5A5cJE32zrST5Qs3QxK+S9gc/8d1uNTmPgkoki8E6s561OA9S3KAepeTz+AtxD62w==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-resolver/binding-darwin-x64@11.8.0':
-    resolution: {integrity: sha512-OWwbNzDS0adva5xS5H/Lx5t/duek555cgP2j0cF+EdfAhQOEEm5ObSEBJmwipzyq/wAA+pjk5m5XEpFVrXDm5A==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-resolver/binding-freebsd-x64@11.8.0':
-    resolution: {integrity: sha512-G6NDJ1WbndODtMAvTOeW5PnF0GkGWUjBR5WdkR+MLn54mSwhCu/y+TqXs9QPoTBUlvU9qxCAfA2i9DFfQQFxlQ==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.8.0':
-    resolution: {integrity: sha512-/ZazyRR+K0DsJDdzEg8LfgQ8L93oG2nqw388VoAuMW9pP6c8eZpvuqw3z7gwFur7QUb6ZMS6lrUneiPFERbAew==}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.8.0':
-    resolution: {integrity: sha512-qWreuwBb7+d8oxcqkgyq1lRT3YPsL9Z69LFC6zIrE/evTcYHAbOa6reSQzpVNsivbVZUYwMY12rAl/lWBP3FpA==}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-arm64-gnu@11.8.0':
-    resolution: {integrity: sha512-m3p8ujvcjf7UOqI1AmOqMRmwhDQBXB/Z99FSCW5U4PY8f0CHBBX+o7uqirOsb7+iIwW7jyDQ7EoqSw79dQMvkA==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-arm64-musl@11.8.0':
-    resolution: {integrity: sha512-YuZQpvoRxUU+6pbqAZmvvKvhYtfOlCc6wunBrIau62xW0oD2xA67KVdq6E9FpvHFjnpgVZW7gcu5PrucgkiEXQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.8.0':
-    resolution: {integrity: sha512-O9JETvqjywxeM0VZZaRz8HLSQcC94JBTFT668xaeKIyFDG1QCos8RZC5jJ6u2RJIM2h28pf3LkinINBfayZYOg==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.8.0':
-    resolution: {integrity: sha512-aaaqf/lbiQBquj/OO56Z0eFnlLHtmwaJ6gCJs9a4koobv2KII8XOb+0f/cn04Ix2elWFmRetKpOoDofhCoYvug==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-riscv64-musl@11.8.0':
-    resolution: {integrity: sha512-xFYcrvf6J+PWwmqNyA7ktnVTGid0SNkd8Ru+Uv7CxVMK9TF9nIEqTMM+66f8XxcWxWsczwqV7YYnRonIU+Wpyg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-s390x-gnu@11.8.0':
-    resolution: {integrity: sha512-wvZQyx4FjCBf4IvFnR5k3H0BW7aiBAkqxYlHV+C6n4zaEHhhaVSCrXgLsvtVt7ma4Cgay1NQGEA0fXx5W2YiWA==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-x64-gnu@11.8.0':
-    resolution: {integrity: sha512-Ihvel1igcoP9BFiVmiwy/CSqCIQzF9ROpdxRLWn1DbZKXNC5TjfiQJjlWrjECc8cPGZwv9yGDZR80oAOgHTE3Q==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-resolver/binding-linux-x64-musl@11.8.0':
-    resolution: {integrity: sha512-GSa6/PSd5JTq/h1IIagWiKEMkWOtFJn5mpbbGsoOYEBml4FPIZ6WTZPzKOzOWnVfYDzM+8+xba6QTyIBP4bifg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-resolver/binding-wasm32-wasi@11.8.0':
-    resolution: {integrity: sha512-z4S+KT5Yfyv+nhimBHKYEi/4ZgkkxRlXkk839g+p9r347RavGUo9hzm3qHkzTxacrDFcGhXLBLN+kSt5B1AWeQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-resolver/binding-win32-arm64-msvc@11.8.0':
-    resolution: {integrity: sha512-BnoBbPHuin8n0fqi1y+Psvur3Y1q6WrJUxKmmBJ2QxQFFq3aaegph5uYINP+i91bokHgwetV9lZMqBmYpu+Itg==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-resolver/binding-win32-ia32-msvc@11.8.0':
-    resolution: {integrity: sha512-SUfay8dZz10OJFOtD7GCkr3/7cKvC6vC00+NI5iVSGOTtzyo6vfXXU9SXyX7D/V/9gX8IkbeEOcN+JuYtwVETA==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-resolver/binding-win32-x64-msvc@11.8.0':
-    resolution: {integrity: sha512-FA6zw1RV8SsEP4oYJvK6RhTMDpf0Inw5w9/+8ihT0dzOZCIb1hzWcCe5EzDyRvV/Wyqqu43LqVydAYAK3l+rLw==}
-    cpu: [x64]
-    os: [win32]
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1048,113 +927,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@sinclair/typebox@0.27.8':
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
-
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@swc-node/core@1.14.1':
-    resolution: {integrity: sha512-jrt5GUaZUU6cmMS+WTJEvGvaB6j1YNKPHPzC2PUi2BjaFbtxURHj6641Az6xN7b665hNniAIdvjxWcRml5yCnw==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      '@swc/core': '>= 1.13.3'
-      '@swc/types': '>= 0.1'
-
-  '@swc-node/register@1.11.1':
-    resolution: {integrity: sha512-VQ0hJ5jX31TVv/fhZx4xJRzd8pwn6VvzYd2tGOHHr2TfXGCBixZoqdPDXTiEoJLCTS2MmvBf6zyQZZ0M8aGQCQ==}
-    peerDependencies:
-      '@swc/core': '>= 1.4.13'
-      typescript: '>= 4.3'
-
-  '@swc-node/sourcemap-support@0.6.1':
-    resolution: {integrity: sha512-ovltDVH5QpdHXZkW138vG4+dgcNsxfwxHVoV6BtmTbz2KKl1A8ZSlbdtxzzfNjCjbpayda8Us9eMtcHobm38dA==}
-
-  '@swc/core-darwin-arm64@1.7.26':
-    resolution: {integrity: sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@swc/core-darwin-x64@1.7.26':
-    resolution: {integrity: sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@swc/core-linux-arm-gnueabihf@1.7.26':
-    resolution: {integrity: sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==}
-    engines: {node: '>=10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@swc/core-linux-arm64-gnu@1.7.26':
-    resolution: {integrity: sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@swc/core-linux-arm64-musl@1.7.26':
-    resolution: {integrity: sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@swc/core-linux-x64-gnu@1.7.26':
-    resolution: {integrity: sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@swc/core-linux-x64-musl@1.7.26':
-    resolution: {integrity: sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@swc/core-win32-arm64-msvc@1.7.26':
-    resolution: {integrity: sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@swc/core-win32-ia32-msvc@1.7.26':
-    resolution: {integrity: sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==}
-    engines: {node: '>=10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@swc/core-win32-x64-msvc@1.7.26':
-    resolution: {integrity: sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==}
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@swc/core@1.7.26':
-    resolution: {integrity: sha512-f5uYFf+TmMQyYIoxkn/evWhNGuUzC730dFwAKGwBVHHVoPyak1/GvJUm6i1SKl+2Hrj9oN0i3WSoWWZ4pgI8lw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@swc/helpers': '*'
-    peerDependenciesMeta:
-      '@swc/helpers':
-        optional: true
-
-  '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
-
-  '@swc/helpers@0.5.18':
-    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
-
-  '@swc/types@0.1.12':
-    resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==}
-
-  '@tsd/typescript@5.9.2':
-    resolution: {integrity: sha512-mSMM0QtEPdMd+rdMDd17yCUYD4yI3pKHap89+jEZrZ3KIO5PhDofBjER0OtgHdvOXF74KMLO3fyD6k3Hz0v03A==}
-    engines: {node: '>=14.17'}
-
-  '@tybys/wasm-util@0.10.1':
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
-
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
@@ -1164,9 +939,6 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/eslint@7.29.0':
-    resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -1176,15 +948,9 @@ packages:
   '@types/jsdom@27.0.0':
     resolution: {integrity: sha512-NZyFl/PViwKzdEkQg96gtnB8wm+1ljhdDay9ahn4hgb+SfVtPCbm3TlmDUFXTA+MGN3CijicnMhG18SI5H3rFw==}
 
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
-
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
-  '@types/minimist@1.2.5':
-    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
-
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -1194,9 +960,6 @@ packages:
   '@types/node@24.10.9':
     resolution: {integrity: sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw==}
 
-  '@types/normalize-package-data@2.4.4':
-    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
-
   '@types/react@19.2.9':
     resolution: {integrity: sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==}
 
@@ -1217,40 +980,79 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-rpy7WzXpETCIc+QBfE8J1RpNxvb/5pnKh98DbC4gXpxHKrkjkg0LX86CJSoPaCF6xGcfRsegi49q+bXrtH4LWQ==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@typescript/native-preview-darwin-x64@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-cuC1+wLbUP+Ip2UT94G134fqRdp5w3b3dhcCO6/FQ4yXxvRNyv/WK+upHBUFDaeSOeHgDTyO9/QFYUWwC4If1A==}
     cpu: [x64]
     os: [darwin]
 
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-s1Zn16TqesG2x4wx5cKciyfmffZRhJO2fBSN4fQ6bBWbrZHT8KnjJUpoRd8t+JAXsHfxDy4S/S0DcmX5eRfAHQ==}
+    cpu: [x64]
+    os: [darwin]
+
   '@typescript/native-preview-linux-arm64@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-zZGvEGY7wcHYefMZ87KNmvjN3NLIhsCMHEpHZiGCS3khKf+8z6ZsanrzCjOTodvL01VPyBzHxV1EtkSxAcLiQg==}
     cpu: [arm64]
     os: [linux]
 
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-dMIOprNNvILRLKLlevs9fEE6Q6Bhikjv9OiQb3Sma3lcV/4lvh8DJ5hVKj2/aiGrK1000EC54UzwB6rLxnuw0w==}
+    cpu: [arm64]
+    os: [linux]
+
   '@typescript/native-preview-linux-arm@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-vN6OYVySol/kQZjJGmAzd6L30SyVlCgmCXS8WjUYtE5clN0YrzQHop16RK29fYZHMxpkOniVBtRPxUYQANZBlQ==}
     cpu: [arm]
     os: [linux]
 
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-ybrJVEuB9TmLWwdNl1ryUHeAm6KV3QcOKZUdfKhp6TjmuesOd1/2rdnGHmEcZlQDQt5+RtsCaxHWadvqDF1h3Q==}
+    cpu: [arm]
+    os: [linux]
+
   '@typescript/native-preview-linux-x64@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-JBfNhWd/asd5MDeS3VgRvE24pGKBkmvLub6tsux6ypr+Yhy+o0WaAEzVpmlRYZUqss2ai5tvOu4dzPBXzZAtFw==}
     cpu: [x64]
     os: [linux]
 
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-bbgb8a3dETxTTFUbSsCF7sSQ2oCsnyg7/HcFXi12TxdXscu1qod4/MxznBNOvwG/eYcrsLmI14k6BVRVSiGFoQ==}
+    cpu: [x64]
+    os: [linux]
+
   '@typescript/native-preview-win32-arm64@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-tTndRtYCq2xwgE0VkTi9ACNiJaV43+PqvBqCxk8ceYi3X36Ve+CCnwlZfZJ4k9NxZthtrAwF/kUmpC9iIYbq1w==}
     cpu: [arm64]
     os: [win32]
 
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-JxPwmsaV6wuijnOo4qg5aIMrzQarTNVHqUaVP5pijkon8Y6dCvJ+3lYNEe4E6baiiw1u3npUQY4l/cvx2RL1eQ==}
+    cpu: [arm64]
+    os: [win32]
+
   '@typescript/native-preview-win32-x64@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-oZia7hFL6k9pVepfonuPI86Jmyz6WlJKR57tWCDwRNmpA7odxuTq1PbvcYgy1z4+wHF1nnKKJY0PMAiq6ac18w==}
     cpu: [x64]
     os: [win32]
 
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-TJH+sSn7vxcGvaSm+fhcpW//dfSGBZGHrxoy0edAbE7UpFf8ub/3cILL5V1pCsF7w3aLNNgVKRpUkowdUgYcPQ==}
+    cpu: [x64]
+    os: [win32]
+
   '@typescript/native-preview@7.0.0-dev.20260120.1':
     resolution: {integrity: sha512-nnEf37C9ue7OBRnF2zmV/OCBmV5Y7T/K4mCHa+nxgiXcF/1w8sA0cgdFl+gHQ0mysqUJ+Bu5btAMeWgpLyjrgg==}
     hasBin: true
 
+  '@typescript/native-preview@7.0.0-dev.20260122.2':
+    resolution: {integrity: sha512-+bVirfVpvhDG/oJWzA1c9HX6fC5Wu2hPv3LdBcpf0UtOu0KoWBN+B4L0wYY9gvxvvoxGmupdRCqaM8hRNlXzaw==}
+    hasBin: true
+
   '@vitest/coverage-v8@4.0.17':
     resolution: {integrity: sha512-/6zU2FLGg0jsd+ePZcwHRy3+WpNTBBhDY56P4JTRqUN/Dp6CvOEa9HrikcQ4KfV2b2kAHUFB4dl1SuocWXSFEw==}
     peerDependencies:
@@ -1311,10 +1113,6 @@ packages:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
-  ansi-escapes@4.3.2:
-    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
-    engines: {node: '>=8'}
-
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -1327,10 +1125,6 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -1345,10 +1139,6 @@ packages:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
-  arrify@1.0.1:
-    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
-    engines: {node: '>=0.10.0'}
-
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -1383,9 +1173,6 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
-
   c8@10.1.3:
     resolution: {integrity: sha512-LvcyrOAaOnrrlMpW22n690PUvxiq4Uf9WMhQwNJ9vgagkL/ph1+D4uvjvDA5XCbykrc0sx+ay6pVi9YZ1GnhyA==}
     engines: {node: '>=18'}
@@ -1399,22 +1186,10 @@ packages:
   camel-case@3.0.0:
     resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
 
-  camelcase-keys@6.2.2:
-    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
-    engines: {node: '>=8'}
-
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
-
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
 
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
   chalk@5.6.2:
     resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
@@ -1448,9 +1223,6 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -1500,14 +1272,6 @@ packages:
       supports-color:
         optional: true
 
-  decamelize-keys@1.1.1:
-    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
-    engines: {node: '>=0.10.0'}
-
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
-
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
@@ -1533,10 +1297,6 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  diff-sequences@29.6.3:
-    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1565,9 +1325,6 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
-  error-ex@1.3.4:
-    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
-
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
@@ -1580,13 +1337,6 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
-  eslint-formatter-pretty@4.1.0:
-    resolution: {integrity: sha512-IsUTtGxF1hrH6lMWiSl1WbGaiP01eT6kzywdY1U+zLc0MP+nwEnUiS9UI8IaOTUhTeQJLlCEWIbXINBH4YJbBQ==}
-    engines: {node: '>=10'}
-
-  eslint-rule-docs@1.1.235:
-    resolution: {integrity: sha512-+TQ+x4JdTnDoFEXXb3fDvfGOwnyNV7duH8fXWTPD1ieaBmB8omj7Gw/pMBBu4uI2uJCCU8APDaQJzWuXnTsH4A==}
-
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -1679,9 +1429,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -1713,18 +1460,10 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  hard-rejection@2.1.0:
-    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
-    engines: {node: '>=6'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -1733,13 +1472,6 @@ packages:
     resolution: {integrity: sha512-hM+1RIn9PK1I6SiTNS6/y7O1mvg88awYLFEuEtoiMtRyT3SD2iu9pSFgbBXT3b1Ua4IwzvSTLvwO0SEhDxCi4w==}
     engines: {node: '>=16.9.0'}
 
-  hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
-
-  hosted-git-info@4.1.0:
-    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
-    engines: {node: '>=10'}
-
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -1777,25 +1509,10 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-
   ipaddr.js@2.2.0:
     resolution: {integrity: sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==}
     engines: {node: '>= 10'}
 
-  irregular-plurals@3.5.0:
-    resolution: {integrity: sha512-1ANGLZ+Nkv1ptFb2pa8oG8Lem4krflKuX/gINiHJHjJUKaJHk/SXk5x6K3J+39/p0h1RQ2saROclJJ+QLvETCQ==}
-    engines: {node: '>=8'}
-
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1812,10 +1529,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-plain-obj@1.1.0:
-    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
-    engines: {node: '>=0.10.0'}
-
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -1827,10 +1540,6 @@ packages:
     resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
     engines: {node: '>=4'}
 
-  is-unicode-supported@0.1.0:
-    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
-    engines: {node: '>=10'}
-
   is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
@@ -1853,17 +1562,6 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jest-diff@29.7.0:
-    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-get-type@29.6.3:
-    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
@@ -1884,9 +1582,6 @@ packages:
       canvas:
         optional: true
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-ref-resolver@2.0.1:
     resolution: {integrity: sha512-HG0SIB9X4J8bwbxCbnd5FfPEbcXAJYTi1pBJeP/QPON+w8ovSME8iRG+ElHNxZNX2Qh6eYn1GdzJFS4cDFfx0Q==}
 
@@ -1899,16 +1594,9 @@ packages:
   jsxte@3.3.1:
     resolution: {integrity: sha512-l6EW11AO9ap1Sjpy5MbX0fnrD15uHfVPlYnyH4/AXY/8T0ECIkdd38sgTFApuuBvoyvrua2H1nV5msnCBiyw0Q==}
 
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
-
   light-my-request@6.6.0:
     resolution: {integrity: sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -1920,10 +1608,6 @@ packages:
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
-  log-symbols@4.1.0:
-    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
-    engines: {node: '>=10'}
-
   lower-case@1.1.4:
     resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
 
@@ -1934,10 +1618,6 @@ packages:
     resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
     engines: {node: 20 || >=22}
 
-  lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -1948,14 +1628,6 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  map-obj@1.0.1:
-    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
-    engines: {node: '>=0.10.0'}
-
-  map-obj@4.3.0:
-    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
-    engines: {node: '>=8'}
-
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
@@ -1965,10 +1637,6 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
-  meow@9.0.0:
-    resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
-    engines: {node: '>=10'}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2040,18 +1708,10 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
-
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minimist-options@4.1.0:
-    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
-    engines: {node: '>= 6'}
-
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2075,11 +1735,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  napi-postinstall@0.3.3:
-    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    hasBin: true
-
   no-case@2.3.2:
     resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
 
@@ -2092,13 +1747,6 @@ packages:
       encoding:
         optional: true
 
-  normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
-
-  normalize-package-data@3.0.3:
-    resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
-    engines: {node: '>=10'}
-
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
@@ -2109,9 +1757,6 @@ packages:
   outdent@0.5.0:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
-  oxc-resolver@11.8.0:
-    resolution: {integrity: sha512-iTBXOucxbG40DGURl0cXChZn1WbvXteW4F/U3SZNbhlixFhd3+ZoHU8cmavOSS+Ob9GUPEUoZhGpj1empxwAiQ==}
-
   p-filter@2.1.0:
     resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
     engines: {node: '>=8'}
@@ -2149,10 +1794,6 @@ packages:
   param-case@2.1.1:
     resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
@@ -2167,9 +1808,6 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
   path-scurry@1.11.1:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
@@ -2206,14 +1844,6 @@ packages:
     resolution: {integrity: sha512-d1s98p8/4TfYhsJ09r/Azt30aYELRi6NNnZtEbqFw6BoGsdPVf5lKNK3kUwH8BmJJfpTLNuicjUQjaMbd93dVg==}
     hasBin: true
 
-  pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
-    engines: {node: '>= 6'}
-
-  plur@4.0.0:
-    resolution: {integrity: sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==}
-    engines: {node: '>=10'}
-
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2281,10 +1911,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   process-warning@4.0.1:
     resolution: {integrity: sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q==}
 
@@ -2304,30 +1930,15 @@ packages:
   quick-format-unescaped@4.0.4:
     resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
 
-  quick-lru@4.0.1:
-    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
-    engines: {node: '>=8'}
-
   react-dom@19.2.3:
     resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
       react: ^19.2.3
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
   react@19.2.3:
     resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
-  read-pkg-up@7.0.1:
-    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
-    engines: {node: '>=8'}
-
-  read-pkg@5.2.0:
-    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
-    engines: {node: '>=8'}
-
   read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
@@ -2336,10 +1947,6 @@ packages:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
 
-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
-
   relateurl@0.2.7:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
@@ -2356,11 +1963,6 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
   ret@0.5.0:
     resolution: {integrity: sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==}
     engines: {node: '>=10'}
@@ -2400,10 +2002,6 @@ packages:
   secure-json-parse@4.0.0:
     resolution: {integrity: sha512-dxtLJO6sc35jWidmLxo7ij+Eg48PM/kleBsxpC8QJE0qJICe+KawkDQmvCMZUr9u7WKVHgMW6vy3fQ7zMiFZMA==}
 
-  semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
-    hasBin: true
-
   semver@7.7.3:
     resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
@@ -2446,9 +2044,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map-support@0.5.21:
-    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
-
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -2456,18 +2051,6 @@ packages:
   spawndamnit@3.0.1:
     resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
-  spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
-
-  spdx-exceptions@2.5.0:
-    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
-
-  spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
-
-  spdx-license-ids@3.0.22:
-    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
-
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -2505,22 +2088,10 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  supports-hyperlinks@2.3.0:
-    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
-    engines: {node: '>=8'}
-
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -2576,34 +2147,9 @@ packages:
     resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
     engines: {node: '>=20'}
 
-  trim-newlines@3.0.1:
-    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
-    engines: {node: '>=8'}
-
-  tsd@0.33.0:
-    resolution: {integrity: sha512-/PQtykJFVw90QICG7zyPDMIyueOXKL7jOJVoX5pILnb3Ux+7QqynOxfVvarE+K+yi7BZyOSY4r+OZNWSWRiEwQ==}
-    engines: {node: '>=14.16'}
-    hasBin: true
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  type-fest@0.18.1:
-    resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
-    engines: {node: '>=10'}
-
-  type-fest@0.21.3:
-    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
-    engines: {node: '>=10'}
-
-  type-fest@0.6.0:
-    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
-    engines: {node: '>=8'}
-
-  type-fest@0.8.1:
-    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
-    engines: {node: '>=8'}
-
   typed-html@3.0.1:
     resolution: {integrity: sha512-JKCM9zTfPDuPqQqdGZBWSEiItShliKkBFg5c6yOR8zth43v763XkAzTWaOlVqc0Y6p9ee8AaAbipGfUnCsYZUA==}
     engines: {node: '>=12'}
@@ -2635,9 +2181,6 @@ packages:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
-  validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
-
   vhtml@2.2.0:
     resolution: {integrity: sha512-TPXrXrxBOslRUVnlVkiAqhoXneiertIg86bdvzionrUYhEuiROvyPZNiiP6GIIJ2Q7oPNVyEtIx8gMAZZE9lCQ==}
 
@@ -2782,13 +2325,6 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-
-  yargs-parser@20.2.9:
-    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
-    engines: {node: '>=10'}
-
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -2843,12 +2379,6 @@ snapshots:
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
-  '@babel/code-frame@7.27.1':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
@@ -3047,22 +2577,6 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.4': {}
 
-  '@emnapi/core@1.5.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/runtime@1.5.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/wasi-threads@1.1.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@esbuild/aix-ppc64@0.27.2':
     optional: true
 
@@ -3189,10 +2703,6 @@ snapshots:
 
   '@istanbuljs/schema@0.1.3': {}
 
-  '@jest/schemas@29.6.3':
-    dependencies:
-      '@sinclair/typebox': 0.27.8
-
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
@@ -3218,13 +2728,6 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@napi-rs/wasm-runtime@1.0.5':
-    dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
-      '@tybys/wasm-util': 0.10.1
-    optional: true
-
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -3237,65 +2740,6 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@oxc-resolver/binding-android-arm-eabi@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-android-arm64@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-darwin-arm64@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-darwin-x64@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-freebsd-x64@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-arm64-gnu@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-arm64-musl@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-riscv64-musl@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-s390x-gnu@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-x64-gnu@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-linux-x64-musl@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-wasm32-wasi@11.8.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.0.5
-    optional: true
-
-  '@oxc-resolver/binding-win32-arm64-msvc@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-win32-ia32-msvc@11.8.0':
-    optional: true
-
-  '@oxc-resolver/binding-win32-x64-msvc@11.8.0':
-    optional: true
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -3374,99 +2818,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.55.3':
     optional: true
 
-  '@sinclair/typebox@0.27.8': {}
-
   '@standard-schema/spec@1.1.0': {}
 
-  '@swc-node/core@1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)':
-    dependencies:
-      '@swc/core': 1.7.26(@swc/helpers@0.5.18)
-      '@swc/types': 0.1.12
-
-  '@swc-node/register@1.11.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)(typescript@5.9.3)':
-    dependencies:
-      '@swc-node/core': 1.14.1(@swc/core@1.7.26(@swc/helpers@0.5.18))(@swc/types@0.1.12)
-      '@swc-node/sourcemap-support': 0.6.1
-      '@swc/core': 1.7.26(@swc/helpers@0.5.18)
-      colorette: 2.0.20
-      debug: 4.4.3
-      oxc-resolver: 11.8.0
-      pirates: 4.0.7
-      tslib: 2.8.1
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - '@swc/types'
-      - supports-color
-
-  '@swc-node/sourcemap-support@0.6.1':
-    dependencies:
-      source-map-support: 0.5.21
-      tslib: 2.8.1
-
-  '@swc/core-darwin-arm64@1.7.26':
-    optional: true
-
-  '@swc/core-darwin-x64@1.7.26':
-    optional: true
-
-  '@swc/core-linux-arm-gnueabihf@1.7.26':
-    optional: true
-
-  '@swc/core-linux-arm64-gnu@1.7.26':
-    optional: true
-
-  '@swc/core-linux-arm64-musl@1.7.26':
-    optional: true
-
-  '@swc/core-linux-x64-gnu@1.7.26':
-    optional: true
-
-  '@swc/core-linux-x64-musl@1.7.26':
-    optional: true
-
-  '@swc/core-win32-arm64-msvc@1.7.26':
-    optional: true
-
-  '@swc/core-win32-ia32-msvc@1.7.26':
-    optional: true
-
-  '@swc/core-win32-x64-msvc@1.7.26':
-    optional: true
-
-  '@swc/core@1.7.26(@swc/helpers@0.5.18)':
-    dependencies:
-      '@swc/counter': 0.1.3
-      '@swc/types': 0.1.12
-    optionalDependencies:
-      '@swc/core-darwin-arm64': 1.7.26
-      '@swc/core-darwin-x64': 1.7.26
-      '@swc/core-linux-arm-gnueabihf': 1.7.26
-      '@swc/core-linux-arm64-gnu': 1.7.26
-      '@swc/core-linux-arm64-musl': 1.7.26
-      '@swc/core-linux-x64-gnu': 1.7.26
-      '@swc/core-linux-x64-musl': 1.7.26
-      '@swc/core-win32-arm64-msvc': 1.7.26
-      '@swc/core-win32-ia32-msvc': 1.7.26
-      '@swc/core-win32-x64-msvc': 1.7.26
-      '@swc/helpers': 0.5.18
-
-  '@swc/counter@0.1.3': {}
-
-  '@swc/helpers@0.5.18':
-    dependencies:
-      tslib: 2.8.1
-
-  '@swc/types@0.1.12':
-    dependencies:
-      '@swc/counter': 0.1.3
-
-  '@tsd/typescript@5.9.2': {}
-
-  '@tybys/wasm-util@0.10.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
@@ -3478,11 +2831,6 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
-  '@types/eslint@7.29.0':
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-
   '@types/estree@1.0.8': {}
 
   '@types/istanbul-lib-coverage@2.0.6': {}
@@ -3493,14 +2841,10 @@ snapshots:
       '@types/tough-cookie': 4.0.5
       parse5: 7.3.0
 
-  '@types/json-schema@7.0.15': {}
-
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/minimist@1.2.5': {}
-
   '@types/ms@2.1.0': {}
 
   '@types/node@12.20.55': {}
@@ -3509,8 +2853,6 @@ snapshots:
     dependencies:
       undici-types: 7.16.0
 
-  '@types/normalize-package-data@2.4.4': {}
-
   '@types/react@19.2.9':
     dependencies:
       csstype: 3.2.3
@@ -3528,24 +2870,45 @@ snapshots:
   '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview-darwin-x64@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview-linux-arm64@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview-linux-arm@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-linux-arm@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview-linux-x64@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-linux-x64@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview-win32-arm64@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview-win32-x64@7.0.0-dev.20260120.1':
     optional: true
 
+  '@typescript/native-preview-win32-x64@7.0.0-dev.20260122.2':
+    optional: true
+
   '@typescript/native-preview@7.0.0-dev.20260120.1':
     optionalDependencies:
       '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260120.1
@@ -3556,6 +2919,16 @@ snapshots:
       '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260120.1
       '@typescript/native-preview-win32-x64': 7.0.0-dev.20260120.1
 
+  '@typescript/native-preview@7.0.0-dev.20260122.2':
+    optionalDependencies:
+      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260122.2
+      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260122.2
+      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260122.2
+      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260122.2
+      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260122.2
+      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260122.2
+      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260122.2
+
   '@vitest/coverage-v8@4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
@@ -3626,10 +2999,6 @@ snapshots:
 
   ansi-colors@4.1.3: {}
 
-  ansi-escapes@4.3.2:
-    dependencies:
-      type-fest: 0.21.3
-
   ansi-regex@5.0.1: {}
 
   ansi-regex@6.2.2: {}
@@ -3638,8 +3007,6 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  ansi-styles@5.2.0: {}
-
   ansi-styles@6.2.3: {}
 
   argparse@1.0.10:
@@ -3650,8 +3017,6 @@ snapshots:
 
   array-union@2.1.0: {}
 
-  arrify@1.0.1: {}
-
   assertion-error@2.0.1: {}
 
   ast-v8-to-istanbul@0.3.10:
@@ -3687,8 +3052,6 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  buffer-from@1.1.2: {}
-
   c8@10.1.3:
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
@@ -3708,21 +3071,8 @@ snapshots:
       no-case: 2.3.2
       upper-case: 1.1.3
 
-  camelcase-keys@6.2.2:
-    dependencies:
-      camelcase: 5.3.1
-      map-obj: 4.3.0
-      quick-lru: 4.0.1
-
-  camelcase@5.3.1: {}
-
   chai@6.2.2: {}
 
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
   chalk@5.6.2: {}
 
   character-entities@2.0.2: {}
@@ -3753,8 +3103,6 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  colorette@2.0.20: {}
-
   commander@2.20.3: {}
 
   comment-parser@1.4.1: {}
@@ -3796,13 +3144,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decamelize-keys@1.1.1:
-    dependencies:
-      decamelize: 1.2.0
-      map-obj: 1.0.1
-
-  decamelize@1.2.0: {}
-
   decimal.js@10.6.0: {}
 
   decode-named-character-reference@1.2.0:
@@ -3821,8 +3162,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  diff-sequences@29.6.3: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -3844,10 +3183,6 @@ snapshots:
 
   entities@6.0.1: {}
 
-  error-ex@1.3.4:
-    dependencies:
-      is-arrayish: 0.2.1
-
   es-module-lexer@1.7.0: {}
 
   esbuild@0.27.2:
@@ -3881,19 +3216,6 @@ snapshots:
 
   escalade@3.2.0: {}
 
-  eslint-formatter-pretty@4.1.0:
-    dependencies:
-      '@types/eslint': 7.29.0
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      eslint-rule-docs: 1.1.235
-      log-symbols: 4.1.0
-      plur: 4.0.0
-      string-width: 4.2.3
-      supports-hyperlinks: 2.3.0
-
-  eslint-rule-docs@1.1.235: {}
-
   esprima@4.0.1: {}
 
   estree-walker@3.0.3:
@@ -4003,8 +3325,6 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  function-bind@1.1.2: {}
-
   get-caller-file@2.0.5: {}
 
   get-east-asian-width@1.4.0: {}
@@ -4039,24 +3359,12 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  hard-rejection@2.1.0: {}
-
   has-flag@4.0.0: {}
 
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
   he@1.2.0: {}
 
   hono@4.8.2: {}
 
-  hosted-git-info@2.8.9: {}
-
-  hosted-git-info@4.1.0:
-    dependencies:
-      lru-cache: 6.0.0
-
   html-encoding-sniffer@6.0.0:
     dependencies:
       '@exodus/bytes': 1.9.0
@@ -4099,18 +3407,8 @@ snapshots:
 
   ignore@5.3.2: {}
 
-  indent-string@4.0.0: {}
-
   ipaddr.js@2.2.0: {}
 
-  irregular-plurals@3.5.0: {}
-
-  is-arrayish@0.2.1: {}
-
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -4121,8 +3419,6 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-plain-obj@1.1.0: {}
-
   is-plain-obj@4.1.0: {}
 
   is-potential-custom-element-name@1.0.1: {}
@@ -4131,8 +3427,6 @@ snapshots:
     dependencies:
       better-path-resolve: 1.0.0
 
-  is-unicode-supported@0.1.0: {}
-
   is-windows@1.0.2: {}
 
   isexe@2.0.0: {}
@@ -4156,17 +3450,6 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jest-diff@29.7.0:
-    dependencies:
-      chalk: 4.1.2
-      diff-sequences: 29.6.3
-      jest-get-type: 29.6.3
-      pretty-format: 29.7.0
-
-  jest-get-type@29.6.3: {}
-
-  js-tokens@4.0.0: {}
-
   js-tokens@9.0.1: {}
 
   js-yaml@3.14.1:
@@ -4206,8 +3489,6 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-ref-resolver@2.0.1:
     dependencies:
       dequal: 2.0.3
@@ -4220,16 +3501,12 @@ snapshots:
 
   jsxte@3.3.1: {}
 
-  kind-of@6.0.3: {}
-
   light-my-request@6.6.0:
     dependencies:
       cookie: 1.0.2
       process-warning: 4.0.1
       set-cookie-parser: 2.7.1
 
-  lines-and-columns@1.2.4: {}
-
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
@@ -4240,21 +3517,12 @@ snapshots:
 
   lodash.startcase@4.4.0: {}
 
-  log-symbols@4.1.0:
-    dependencies:
-      chalk: 4.1.2
-      is-unicode-supported: 0.1.0
-
   lower-case@1.1.4: {}
 
   lru-cache@10.4.3: {}
 
   lru-cache@11.2.4: {}
 
-  lru-cache@6.0.0:
-    dependencies:
-      yallist: 4.0.0
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -4269,10 +3537,6 @@ snapshots:
     dependencies:
       semver: 7.7.3
 
-  map-obj@1.0.1: {}
-
-  map-obj@4.3.0: {}
-
   mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -4296,21 +3560,6 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
-  meow@9.0.0:
-    dependencies:
-      '@types/minimist': 1.2.5
-      camelcase-keys: 6.2.2
-      decamelize: 1.2.0
-      decamelize-keys: 1.1.1
-      hard-rejection: 2.1.0
-      minimist-options: 4.1.0
-      normalize-package-data: 3.0.3
-      read-pkg-up: 7.0.1
-      redent: 3.0.0
-      trim-newlines: 3.0.1
-      type-fest: 0.18.1
-      yargs-parser: 20.2.9
-
   merge2@1.4.1: {}
 
   micromark-core-commonmark@2.0.3:
@@ -4451,18 +3700,10 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  min-indent@1.0.1: {}
-
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
 
-  minimist-options@4.1.0:
-    dependencies:
-      arrify: 1.0.1
-      is-plain-obj: 1.1.0
-      kind-of: 6.0.3
-
   minipass@7.1.2: {}
 
   mitata@1.0.34: {}
@@ -4475,8 +3716,6 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  napi-postinstall@0.3.3: {}
-
   no-case@2.3.2:
     dependencies:
       lower-case: 1.1.4
@@ -4485,50 +3724,12 @@ snapshots:
     dependencies:
       whatwg-url: 5.0.0
 
-  normalize-package-data@2.5.0:
-    dependencies:
-      hosted-git-info: 2.8.9
-      resolve: 1.22.10
-      semver: 5.7.2
-      validate-npm-package-license: 3.0.4
-
-  normalize-package-data@3.0.3:
-    dependencies:
-      hosted-git-info: 4.1.0
-      is-core-module: 2.16.1
-      semver: 7.7.3
-      validate-npm-package-license: 3.0.4
-
   obug@2.1.1: {}
 
   on-exit-leak-free@2.1.2: {}
 
   outdent@0.5.0: {}
 
-  oxc-resolver@11.8.0:
-    dependencies:
-      napi-postinstall: 0.3.3
-    optionalDependencies:
-      '@oxc-resolver/binding-android-arm-eabi': 11.8.0
-      '@oxc-resolver/binding-android-arm64': 11.8.0
-      '@oxc-resolver/binding-darwin-arm64': 11.8.0
-      '@oxc-resolver/binding-darwin-x64': 11.8.0
-      '@oxc-resolver/binding-freebsd-x64': 11.8.0
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.8.0
-      '@oxc-resolver/binding-linux-arm-musleabihf': 11.8.0
-      '@oxc-resolver/binding-linux-arm64-gnu': 11.8.0
-      '@oxc-resolver/binding-linux-arm64-musl': 11.8.0
-      '@oxc-resolver/binding-linux-ppc64-gnu': 11.8.0
-      '@oxc-resolver/binding-linux-riscv64-gnu': 11.8.0
-      '@oxc-resolver/binding-linux-riscv64-musl': 11.8.0
-      '@oxc-resolver/binding-linux-s390x-gnu': 11.8.0
-      '@oxc-resolver/binding-linux-x64-gnu': 11.8.0
-      '@oxc-resolver/binding-linux-x64-musl': 11.8.0
-      '@oxc-resolver/binding-wasm32-wasi': 11.8.0
-      '@oxc-resolver/binding-win32-arm64-msvc': 11.8.0
-      '@oxc-resolver/binding-win32-ia32-msvc': 11.8.0
-      '@oxc-resolver/binding-win32-x64-msvc': 11.8.0
-
   p-filter@2.1.0:
     dependencies:
       p-map: 2.1.0
@@ -4563,13 +3764,6 @@ snapshots:
     dependencies:
       no-case: 2.3.2
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      error-ex: 1.3.4
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
   parse5@7.3.0:
     dependencies:
       entities: 6.0.1
@@ -4582,8 +3776,6 @@ snapshots:
 
   path-key@3.1.1: {}
 
-  path-parse@1.0.7: {}
-
   path-scurry@1.11.1:
     dependencies:
       lru-cache: 10.4.3
@@ -4621,12 +3813,6 @@ snapshots:
       sonic-boom: 4.2.0
       thread-stream: 3.1.0
 
-  pirates@4.0.7: {}
-
-  plur@4.0.0:
-    dependencies:
-      irregular-plurals: 3.5.0
-
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -4674,12 +3860,6 @@ snapshots:
 
   prettier@3.8.0: {}
 
-  pretty-format@29.7.0:
-    dependencies:
-      '@jest/schemas': 29.6.3
-      ansi-styles: 5.2.0
-      react-is: 18.3.1
-
   process-warning@4.0.1: {}
 
   process-warning@5.0.0: {}
@@ -4692,30 +3872,13 @@ snapshots:
 
   quick-format-unescaped@4.0.4: {}
 
-  quick-lru@4.0.1: {}
-
   react-dom@19.2.3(react@19.2.3):
     dependencies:
       react: 19.2.3
       scheduler: 0.27.0
 
-  react-is@18.3.1: {}
-
   react@19.2.3: {}
 
-  read-pkg-up@7.0.1:
-    dependencies:
-      find-up: 4.1.0
-      read-pkg: 5.2.0
-      type-fest: 0.8.1
-
-  read-pkg@5.2.0:
-    dependencies:
-      '@types/normalize-package-data': 2.4.4
-      normalize-package-data: 2.5.0
-      parse-json: 5.2.0
-      type-fest: 0.6.0
-
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -4725,11 +3888,6 @@ snapshots:
 
   real-require@0.2.0: {}
 
-  redent@3.0.0:
-    dependencies:
-      indent-string: 4.0.0
-      strip-indent: 3.0.0
-
   relateurl@0.2.7: {}
 
   require-directory@2.1.1: {}
@@ -4738,12 +3896,6 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   ret@0.5.0: {}
 
   reusify@1.1.0: {}
@@ -4801,8 +3953,6 @@ snapshots:
 
   secure-json-parse@4.0.0: {}
 
-  semver@5.7.2: {}
-
   semver@7.7.3: {}
 
   set-cookie-parser@2.7.1: {}
@@ -4837,11 +3987,6 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map-support@0.5.21:
-    dependencies:
-      buffer-from: 1.1.2
-      source-map: 0.6.1
-
   source-map@0.6.1: {}
 
   spawndamnit@3.0.1:
@@ -4849,20 +3994,6 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  spdx-correct@3.2.0:
-    dependencies:
-      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.22
-
-  spdx-exceptions@2.5.0: {}
-
-  spdx-expression-parse@3.0.1:
-    dependencies:
-      spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.22
-
-  spdx-license-ids@3.0.22: {}
-
   split2@4.2.0: {}
 
   sprintf-js@1.0.3: {}
@@ -4899,21 +4030,10 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
-  strip-indent@3.0.0:
-    dependencies:
-      min-indent: 1.0.1
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
-  supports-hyperlinks@2.3.0:
-    dependencies:
-      has-flag: 4.0.0
-      supports-color: 7.2.0
-
-  supports-preserve-symlinks-flag@1.0.0: {}
-
   symbol-tree@3.2.4: {}
 
   term-size@2.2.1: {}
@@ -4961,28 +4081,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  trim-newlines@3.0.1: {}
-
-  tsd@0.33.0:
-    dependencies:
-      '@tsd/typescript': 5.9.2
-      eslint-formatter-pretty: 4.1.0
-      globby: 11.1.0
-      jest-diff: 29.7.0
-      meow: 9.0.0
-      path-exists: 4.0.0
-      read-pkg-up: 7.0.1
-
   tslib@2.8.1: {}
 
-  type-fest@0.18.1: {}
-
-  type-fest@0.21.3: {}
-
-  type-fest@0.6.0: {}
-
-  type-fest@0.8.1: {}
-
   typed-html@3.0.1: {}
 
   typescript@5.9.3: {}
@@ -5005,11 +4105,6 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
-  validate-npm-package-license@3.0.4:
-    dependencies:
-      spdx-correct: 3.2.0
-      spdx-expression-parse: 3.0.1
-
   vhtml@2.2.0: {}
 
   vite@7.3.1(@types/node@24.10.9):
@@ -5117,10 +4212,6 @@ snapshots:
 
   y18n@5.0.8: {}
 
-  yallist@4.0.0: {}
-
-  yargs-parser@20.2.9: {}
-
   yargs-parser@21.1.1: {}
 
   yargs-parser@22.0.0: {}

From e42666219e2ffbdb52a1b276834a2851c59605a8 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 13:39:30 +0700
Subject: [PATCH 09/22] benchmarks

---
 .gitignore                                    |   1 +
 benchmarks/honojsx/index.tsx                  |  16 +-
 benchmarks/honojsx/package.json               |   2 +-
 benchmarks/honojsx/tsconfig.json              |  12 +-
 benchmarks/jsxte/index.tsx                    |  20 +-
 benchmarks/jsxte/tsconfig.json                |  13 +-
 benchmarks/kitajs/index.tsx                   |  16 +-
 benchmarks/kitajs/tsconfig.json               |  13 +-
 benchmarks/preact/index.tsx                   |  16 +-
 benchmarks/preact/package.json                |   2 +-
 benchmarks/preact/tsconfig.json               |  12 +-
 benchmarks/react/index.tsx                    |  16 +-
 benchmarks/react/tsconfig.json                |  12 +-
 benchmarks/reactjsx/index.tsx                 |  16 +-
 benchmarks/reactjsx/tsconfig.json             |  12 +-
 benchmarks/runner/package.json                |   8 +-
 benchmarks/runner/samples/CommonTags.html     |  35 +-
 benchmarks/runner/samples/Ghtml.html          |  37 +-
 benchmarks/runner/samples/HonoHtml.html       |  37 +-
 benchmarks/runner/samples/HonoJsx.html        |  40 +-
 benchmarks/runner/samples/Jsxte.html          |  40 +-
 benchmarks/runner/samples/KitaJs.html         |  40 +-
 benchmarks/runner/samples/Preact.html         |  40 +-
 benchmarks/runner/samples/React.html          |  40 +-
 benchmarks/runner/samples/ReactJsx.html       |  40 +-
 benchmarks/runner/samples/TypedHtml.html      |  36 +-
 benchmarks/runner/samples/vHtml.html          |  40 +-
 benchmarks/templates/{ghtml.tsx => ghtml.ts}  |  38 +-
 benchmarks/templates/{index.tsx => index.ts}  |   0
 .../templates/{normal.tsx => normal.ts}       |  42 +-
 benchmarks/templates/tsconfig.json            |  12 +-
 benchmarks/typed-html/index.tsx               |  16 +-
 benchmarks/typed-html/tsconfig.json           |  13 +-
 benchmarks/vhtml/index.tsx                    |  16 +-
 benchmarks/vhtml/tsconfig.json                |  13 +-
 package.json                                  |   7 +-
 packages/fastify-html-plugin/package.json     |   4 +-
 packages/html/package.json                    |   5 +-
 pnpm-lock.yaml                                | 371 +++++++-----------
 pnpm-workspace.yaml                           |   2 +-
 40 files changed, 524 insertions(+), 627 deletions(-)
 rename benchmarks/templates/{ghtml.tsx => ghtml.ts} (90%)
 rename benchmarks/templates/{index.tsx => index.ts} (100%)
 rename benchmarks/templates/{normal.tsx => normal.ts} (89%)

diff --git a/.gitignore b/.gitignore
index f6200f0cc..e898f78fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ node_modules
 index.tsbuildinfo
 dist
 coverage
+.DS_Store
 
 *.log
 *.tsbuildinfo
diff --git a/benchmarks/honojsx/index.tsx b/benchmarks/honojsx/index.tsx
index cee3faf27..13b947a63 100644
--- a/benchmarks/honojsx/index.tsx
+++ b/benchmarks/honojsx/index.tsx
@@ -11,7 +11,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -19,14 +19,12 @@ function Layout({ children, head }) {
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -35,9 +33,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/honojsx/package.json b/benchmarks/honojsx/package.json
index 37a13cabe..8562e27f6 100644
--- a/benchmarks/honojsx/package.json
+++ b/benchmarks/honojsx/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@typescript/native-preview": "catalog:",
-    "hono": "^4.8.2",
+    "hono": "^4.11.5",
     "tslib": "catalog:",
     "typescript": "catalog:"
   },
diff --git a/benchmarks/honojsx/tsconfig.json b/benchmarks/honojsx/tsconfig.json
index 2d7cf0a6e..7b14fc394 100644
--- a/benchmarks/honojsx/tsconfig.json
+++ b/benchmarks/honojsx/tsconfig.json
@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
     "outDir": "dist",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
+    "target": "ESNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "hono/jsx",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "jsxImportSource": "hono/jsx"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/jsxte/index.tsx b/benchmarks/jsxte/index.tsx
index 64e2cd1ea..dc08abc23 100644
--- a/benchmarks/jsxte/index.tsx
+++ b/benchmarks/jsxte/index.tsx
@@ -8,25 +8,23 @@ function Purchase({ name, price, quantity }) {
   );
 }
 
-function Layout(props: JSXTE.ElementProps) {
+function Layout({ children, head }) {
   return (
     <html lang="en">
-      <head>{props.head}</head>
-      <body>{props.children}</body>
+      {head}
+      <body>{children}</body>
     </html>
   );
 }
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -35,9 +33,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/jsxte/tsconfig.json b/benchmarks/jsxte/tsconfig.json
index 457fa4809..50cfc0294 100644
--- a/benchmarks/jsxte/tsconfig.json
+++ b/benchmarks/jsxte/tsconfig.json
@@ -1,16 +1,15 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "module": "Node16",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
     "target": "ESNext",
-    "jsx": "react-jsx",
-    "jsxImportSource": "jsxte",
-    "moduleResolution": "Node16",
+    "moduleResolution": "nodenext",
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "jsx": "react-jsx",
+    "jsxImportSource": "jsxte"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/kitajs/index.tsx b/benchmarks/kitajs/index.tsx
index 87a3cbd8c..3599e9171 100644
--- a/benchmarks/kitajs/index.tsx
+++ b/benchmarks/kitajs/index.tsx
@@ -13,7 +13,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -21,14 +21,12 @@ function Layout({ children, head }) {
 
 function Head({ title }) {
   return (
-    <div>
-      <title safe>{title}</title>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -37,9 +35,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/kitajs/tsconfig.json b/benchmarks/kitajs/tsconfig.json
index 461943ebe..93a88ce02 100644
--- a/benchmarks/kitajs/tsconfig.json
+++ b/benchmarks/kitajs/tsconfig.json
@@ -1,16 +1,15 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "module": "Node16",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
     "target": "ESNext",
-    "jsx": "react-jsx",
-    "moduleResolution": "Node16",
+    "moduleResolution": "nodenext",
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
-    "jsxImportSource": "@kitajs/html",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/preact/index.tsx b/benchmarks/preact/index.tsx
index cee3faf27..13b947a63 100644
--- a/benchmarks/preact/index.tsx
+++ b/benchmarks/preact/index.tsx
@@ -11,7 +11,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -19,14 +19,12 @@ function Layout({ children, head }) {
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -35,9 +33,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/preact/package.json b/benchmarks/preact/package.json
index 3c83029ac..cd967c0fa 100644
--- a/benchmarks/preact/package.json
+++ b/benchmarks/preact/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@typescript/native-preview": "catalog:",
-    "preact": "^10.27.3",
+    "preact": "^10.28.2",
     "tslib": "catalog:",
     "typescript": "catalog:"
   },
diff --git a/benchmarks/preact/tsconfig.json b/benchmarks/preact/tsconfig.json
index 34b21753c..75147bf28 100644
--- a/benchmarks/preact/tsconfig.json
+++ b/benchmarks/preact/tsconfig.json
@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
     "outDir": "dist",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
+    "target": "ESNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "jsxImportSource": "preact"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/react/index.tsx b/benchmarks/react/index.tsx
index a02b03bc4..ccde4a4e7 100644
--- a/benchmarks/react/index.tsx
+++ b/benchmarks/react/index.tsx
@@ -13,7 +13,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -21,14 +21,12 @@ function Layout({ children, head }) {
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -37,9 +35,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/react/tsconfig.json b/benchmarks/react/tsconfig.json
index df58f3d55..26a351db5 100644
--- a/benchmarks/react/tsconfig.json
+++ b/benchmarks/react/tsconfig.json
@@ -1,10 +1,14 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "jsx": "react",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
+    "target": "ESNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "jsx": "react"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/reactjsx/index.tsx b/benchmarks/reactjsx/index.tsx
index cee3faf27..13b947a63 100644
--- a/benchmarks/reactjsx/index.tsx
+++ b/benchmarks/reactjsx/index.tsx
@@ -11,7 +11,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -19,14 +19,12 @@ function Layout({ children, head }) {
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -35,9 +33,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/reactjsx/tsconfig.json b/benchmarks/reactjsx/tsconfig.json
index 32b8661e5..8c3151e86 100644
--- a/benchmarks/reactjsx/tsconfig.json
+++ b/benchmarks/reactjsx/tsconfig.json
@@ -1,10 +1,14 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "jsx": "react-jsx",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
+    "target": "ESNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "jsx": "react-jsx"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/runner/package.json b/benchmarks/runner/package.json
index 04b3d9ca7..e983e95f2 100644
--- a/benchmarks/runner/package.json
+++ b/benchmarks/runner/package.json
@@ -20,13 +20,13 @@
     "@kitajs/bench-html-typed-html": "workspace:*",
     "@kitajs/bench-html-vhtml": "workspace:*",
     "common-tags": "1.8.2",
-    "ghtml": "3.1.2",
-    "hono": "4.8.2",
+    "ghtml": "4.0.2",
+    "hono": "4.11.5",
     "html-minifier": "4.0.0",
     "jsxte": "3.3.1",
     "mitata": "1.0.34",
-    "nano-jsx": "0.1.0",
-    "preact-render-to-string": "6.5.13",
+    "nano-jsx": "0.2.1",
+    "preact-render-to-string": "6.6.5",
     "react": "catalog:",
     "react-dom": "catalog:"
   }
diff --git a/benchmarks/runner/samples/CommonTags.html b/benchmarks/runner/samples/CommonTags.html
index e4198f37e..60ecf9566 100644
--- a/benchmarks/runner/samples/CommonTags.html
+++ b/benchmarks/runner/samples/CommonTags.html
@@ -1,23 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title>
-      <meta name="description" content="A description" />
-      <meta name="keywords" content="some, keywords" />
-      <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content="@site" />
-      <meta name="twitter:title" content="Title" />
-      <meta name="twitter:description" content="A description" />
-      <meta name="twitter:creator" content="@creator" />
-      <meta name="twitter:image" content="image.jpg" /> <meta content="Title" />
-      <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/Ghtml.html b/benchmarks/runner/samples/Ghtml.html
index a57b67a2c..c4742451b 100644
--- a/benchmarks/runner/samples/Ghtml.html
+++ b/benchmarks/runner/samples/Ghtml.html
@@ -1,25 +1,24 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title>
-      <meta name="description" content="A description" />
-      <meta name="keywords" content="some, keywords" />
-      <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content="@site" />
-      <meta name="twitter:title" content="Title" />
-      <meta name="twitter:description" content="A description" />
-      <meta name="twitter:creator" content="@creator" />
-      <meta name="twitter:image" content="image.jpg" />
-      <meta content="Title" />
-      <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
   </head>
+
   <body>
     <div>
       <header class="header">
diff --git a/benchmarks/runner/samples/HonoHtml.html b/benchmarks/runner/samples/HonoHtml.html
index a57b67a2c..c4742451b 100644
--- a/benchmarks/runner/samples/HonoHtml.html
+++ b/benchmarks/runner/samples/HonoHtml.html
@@ -1,25 +1,24 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title>
-      <meta name="description" content="A description" />
-      <meta name="keywords" content="some, keywords" />
-      <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content="@site" />
-      <meta name="twitter:title" content="Title" />
-      <meta name="twitter:description" content="A description" />
-      <meta name="twitter:creator" content="@creator" />
-      <meta name="twitter:image" content="image.jpg" />
-      <meta content="Title" />
-      <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
   </head>
+
   <body>
     <div>
       <header class="header">
diff --git a/benchmarks/runner/samples/HonoJsx.html b/benchmarks/runner/samples/HonoJsx.html
index 1c851f754..794445801 100644
--- a/benchmarks/runner/samples/HonoJsx.html
+++ b/benchmarks/runner/samples/HonoJsx.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/Jsxte.html b/benchmarks/runner/samples/Jsxte.html
index b20e363b1..bc78c39ae 100644
--- a/benchmarks/runner/samples/Jsxte.html
+++ b/benchmarks/runner/samples/Jsxte.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/KitaJs.html b/benchmarks/runner/samples/KitaJs.html
index 1c851f754..794445801 100644
--- a/benchmarks/runner/samples/KitaJs.html
+++ b/benchmarks/runner/samples/KitaJs.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/Preact.html b/benchmarks/runner/samples/Preact.html
index 1c851f754..794445801 100644
--- a/benchmarks/runner/samples/Preact.html
+++ b/benchmarks/runner/samples/Preact.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/React.html b/benchmarks/runner/samples/React.html
index 1c851f754..794445801 100644
--- a/benchmarks/runner/samples/React.html
+++ b/benchmarks/runner/samples/React.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/ReactJsx.html b/benchmarks/runner/samples/ReactJsx.html
index 1c851f754..794445801 100644
--- a/benchmarks/runner/samples/ReactJsx.html
+++ b/benchmarks/runner/samples/ReactJsx.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/TypedHtml.html b/benchmarks/runner/samples/TypedHtml.html
index 8ad8a2c7c..9812e56fa 100644
--- a/benchmarks/runner/samples/TypedHtml.html
+++ b/benchmarks/runner/samples/TypedHtml.html
@@ -1,24 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title>
-      <meta name="description" content="A description" />
-      <meta name="keywords" content="some, keywords" />
-      <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:site" content="@site" />
-      <meta name="twitter:title" content="Title" />
-      <meta name="twitter:description" content="A description" />
-      <meta name="twitter:creator" content="@creator" />
-      <meta name="twitter:image" content="image.jpg" />
-      <meta content="Title" />
-      <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/runner/samples/vHtml.html b/benchmarks/runner/samples/vHtml.html
index b20e363b1..bc78c39ae 100644
--- a/benchmarks/runner/samples/vHtml.html
+++ b/benchmarks/runner/samples/vHtml.html
@@ -1,28 +1,22 @@
 <html lang="en">
   <head>
-    <div>
-      <title>Real World Example</title
-      ><meta name="description" content="A description" /><meta
-        name="keywords"
-        content="some, keywords"
-      /><meta name="author" content="Some Author" /><meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0"
-      /><link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
-      <meta name="twitter:card" content="summary" /><meta
-        name="twitter:site"
-        content="@site"
-      /><meta name="twitter:title" content="Title" /><meta
-        name="twitter:description"
-        content="A description"
-      /><meta name="twitter:creator" content="@creator" /><meta
-        name="twitter:image"
-        content="image.jpg"
-      /><meta content="Title" /><meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real World Example</title>
+    <meta name="description" content="A description" />
+    <meta name="keywords" content="some, keywords" />
+    <meta name="author" content="Some Author" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@site" />
+    <meta name="twitter:title" content="Title" />
+    <meta name="twitter:description" content="A description" />
+    <meta name="twitter:creator" content="@creator" />
+    <meta name="twitter:image" content="image.jpg" />
+    <meta content="Title" />
+    <meta content="website" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
   </head>
   <body>
     <div>
diff --git a/benchmarks/templates/ghtml.tsx b/benchmarks/templates/ghtml.ts
similarity index 90%
rename from benchmarks/templates/ghtml.tsx
rename to benchmarks/templates/ghtml.ts
index e4fb035ae..61c160c03 100644
--- a/benchmarks/templates/ghtml.tsx
+++ b/benchmarks/templates/ghtml.ts
@@ -11,9 +11,7 @@ function Purchase(html: Function, { name, price, quantity }) {
 function Layout(html: Function, { children, head }: any) {
   return html`
     <html lang="en">
-      <head>
-        !${head}
-      </head>
+      !${head}
       <body>
         !${children}
       </body>
@@ -22,15 +20,13 @@ function Layout(html: Function, { children, head }: any) {
 }
 
 function Head(html: Function, { title }) {
-  return html`
-    <div>
+  return html /* html */ `
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>${title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -39,14 +35,16 @@ function Head(html: Function, { title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   `;
 }
 
 function Header(html: Function, { name }) {
-  return html`
+  return html /* html */ `
     <header class="header">
       <h1 class="header-title">Hello ${name}</h1>
       <nav class="header-nav">
@@ -64,7 +62,7 @@ function Header(html: Function, { name }) {
 }
 
 function Footer(html: Function, { name }) {
-  return html`
+  return html /* html */ `
     <footer class="footer">
       <p class="footer-year">© ${name}</p>
 
@@ -77,7 +75,7 @@ function Footer(html: Function, { name }) {
 }
 
 function Main(html: Function, { children, name }: any) {
-  return html`
+  return html /* html */ `
     <div>
       !${Header(html, { name })}
       <main class="main-content">!${children}</main>
@@ -87,7 +85,7 @@ function Main(html: Function, { children, name }: any) {
 }
 
 function UserProfile(html: Function, { name }) {
-  return html`
+  return html /* html */ `
     <section class="user-profile">
       <h2 class="user-profile title">User Profile</h2>
       <p class="user-profile name">Name: ${name}</p>
@@ -99,7 +97,7 @@ function UserProfile(html: Function, { name }) {
 }
 
 function Sidebar(html: Function, { purchases }) {
-  return html`
+  return html /* html */ `
     <aside class="sidebar">
       <h2 class="purchase title">Recent Purchases</h2>
       <ul class="purchase list">
@@ -118,7 +116,7 @@ function Sidebar(html: Function, { purchases }) {
 }
 
 function PageContent(html: Function) {
-  return html`
+  return html /* html */ `
     <div class="page-content">
       <h2 class="title mb-4 h2">Welcome to our store</h2>
       <p class="p text mb-0">
@@ -137,13 +135,13 @@ function PageContent(html: Function) {
 }
 
 export function RealWorldPage(html: Function, name: string, purchases: any[]) {
-  return html`!${Layout(html, {
+  return html /* html */ `!${Layout(html, {
     head: Head(html, { title: 'Real World Example' }),
     children: Main(html, {
       name,
       children: [
-        html`<h2>Purchases</h2>`,
-        html`<div class="purchases">
+        html /* html */ `<h2>Purchases</h2>`,
+        html /* html */ `<div class="purchases">
           !${purchases.map((purchase) =>
             Purchase(html, {
               name: purchase.name,
diff --git a/benchmarks/templates/index.tsx b/benchmarks/templates/index.ts
similarity index 100%
rename from benchmarks/templates/index.tsx
rename to benchmarks/templates/index.ts
diff --git a/benchmarks/templates/normal.tsx b/benchmarks/templates/normal.ts
similarity index 89%
rename from benchmarks/templates/normal.tsx
rename to benchmarks/templates/normal.ts
index 734a3aff1..994bf147f 100644
--- a/benchmarks/templates/normal.tsx
+++ b/benchmarks/templates/normal.ts
@@ -1,5 +1,5 @@
 function Purchase(html: Function, { name, price, quantity }) {
-  return html`
+  return html /* html */ `
     <div class="purchase purchase-card">
       <div class="purchase-name">${name}</div>
       <div class="purchase-price">${price}</div>
@@ -9,11 +9,9 @@ function Purchase(html: Function, { name, price, quantity }) {
 }
 
 function Layout(html: Function, { children, head }: any) {
-  return html`
+  return html /* html */ `
     <html lang="en">
-      <head>
-        ${head}
-      </head>
+      ${head}
       <body>
         ${children}
       </body>
@@ -22,15 +20,13 @@ function Layout(html: Function, { children, head }: any) {
 }
 
 function Head(html: Function, { title }) {
-  return html`
-    <div>
+  return html /* html */ `
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>${title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -39,14 +35,16 @@ function Head(html: Function, { title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   `;
 }
 
 function Header(html: Function, { name }) {
-  return html`
+  return html /* html */ `
     <header class="header">
       <h1 class="header-title">Hello ${name}</h1>
       <nav class="header-nav">
@@ -64,7 +62,7 @@ function Header(html: Function, { name }) {
 }
 
 function Footer(html: Function, { name }) {
-  return html`
+  return html /* html */ `
     <footer class="footer">
       <p class="footer-year">© ${name}</p>
 
@@ -77,7 +75,7 @@ function Footer(html: Function, { name }) {
 }
 
 function Main(html: Function, { children, name }: any) {
-  return html`
+  return html /* html */ `
     <div>
       ${Header(html, { name })}
       <main class="main-content">${children}</main>
@@ -87,7 +85,7 @@ function Main(html: Function, { children, name }: any) {
 }
 
 function UserProfile(html: Function, { name }) {
-  return html`
+  return html /* html */ `
     <section class="user-profile">
       <h2 class="user-profile title">User Profile</h2>
       <p class="user-profile name">Name: ${name}</p>
@@ -99,7 +97,7 @@ function UserProfile(html: Function, { name }) {
 }
 
 function Sidebar(html: Function, { purchases }) {
-  return html`
+  return html /* html */ `
     <aside class="sidebar">
       <h2 class="purchase title">Recent Purchases</h2>
       <ul class="purchase list">
@@ -118,7 +116,7 @@ function Sidebar(html: Function, { purchases }) {
 }
 
 function PageContent(html: Function) {
-  return html`
+  return html /* html */ `
     <div class="page-content">
       <h2 class="title mb-4 h2">Welcome to our store</h2>
       <p class="p text mb-0">
@@ -137,13 +135,13 @@ function PageContent(html: Function) {
 }
 
 export function RealWorldPage(html: Function, name: string, purchases: any[]) {
-  return html`${Layout(html, {
+  return html /* html */ `${Layout(html, {
     head: Head(html, { title: 'Real World Example' }),
     children: Main(html, {
       name,
       children: [
-        html`<h2>Purchases</h2>`,
-        html`<div class="purchases">
+        html /* html */ `<h2>Purchases</h2>`,
+        html /* html */ `<div class="purchases">
           ${purchases.map((purchase) =>
             Purchase(html, {
               name: purchase.name,
diff --git a/benchmarks/templates/tsconfig.json b/benchmarks/templates/tsconfig.json
index 76743a9bc..f14b4c3cc 100644
--- a/benchmarks/templates/tsconfig.json
+++ b/benchmarks/templates/tsconfig.json
@@ -1,12 +1,14 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "module": "Node16",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
     "target": "ESNext",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true
   },
-  "include": ["index.tsx"],
+  "include": ["*.ts"],
   "exclude": ["dist"]
 }
diff --git a/benchmarks/typed-html/index.tsx b/benchmarks/typed-html/index.tsx
index d6be89654..e192f7e1b 100644
--- a/benchmarks/typed-html/index.tsx
+++ b/benchmarks/typed-html/index.tsx
@@ -13,7 +13,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }: any) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -21,14 +21,12 @@ function Layout({ children, head }: any) {
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -37,9 +35,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/typed-html/tsconfig.json b/benchmarks/typed-html/tsconfig.json
index b1437cbef..7ca79ac70 100644
--- a/benchmarks/typed-html/tsconfig.json
+++ b/benchmarks/typed-html/tsconfig.json
@@ -1,14 +1,15 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "module": "Node16",
-    "moduleResolution": "Node16",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
     "target": "ESNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "jsx": "react",
-    "jsxFactory": "elements.createElement",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "jsxFactory": "elements.createElement"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/benchmarks/vhtml/index.tsx b/benchmarks/vhtml/index.tsx
index ac4b4d829..d99be94d8 100644
--- a/benchmarks/vhtml/index.tsx
+++ b/benchmarks/vhtml/index.tsx
@@ -13,7 +13,7 @@ function Purchase({ name, price, quantity }) {
 function Layout({ children, head }: any) {
   return (
     <html lang="en">
-      <head>{head}</head>
+      {head}
       <body>{children}</body>
     </html>
   );
@@ -21,14 +21,12 @@ function Layout({ children, head }: any) {
 
 function Head({ title }) {
   return (
-    <div>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="styles.css" />
-      <script src="script.js"></script>
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@site" />
       <meta name="twitter:title" content="Title" />
@@ -37,9 +35,11 @@ function Head({ title }) {
       <meta name="twitter:image" content="image.jpg" />
       <meta content="Title" />
       <meta content="website" />
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
-    </div>
+      <link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js" />
+    </head>
   );
 }
 
diff --git a/benchmarks/vhtml/tsconfig.json b/benchmarks/vhtml/tsconfig.json
index ddfd40f02..9e605cacd 100644
--- a/benchmarks/vhtml/tsconfig.json
+++ b/benchmarks/vhtml/tsconfig.json
@@ -1,14 +1,15 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "module": "Node16",
-    "moduleResolution": "Node16",
+    "sourceMap": true,
+    "importHelpers": true,
+    "module": "nodenext",
     "target": "ESNext",
+    "moduleResolution": "nodenext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "jsx": "react",
-    "jsxFactory": "h",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "jsxFactory": "h"
   },
   "include": ["index.tsx"],
   "exclude": ["dist"]
diff --git a/package.json b/package.json
index fd02eece3..95ff72637 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,13 @@
   "scripts": {
     "bench": "pnpm -r --filter \"@kitajs/bench-html-*\" build && pnpm --filter \"@kitajs/bench-html-runner\" start",
     "build": "pnpm -r --filter \"./packages/*\" --aggregate-output build",
-    "change": "changeset",
+    "changeset": "changeset",
     "ci-publish": "pnpm publish -r --access public && changeset tag",
     "ci-version": "changeset version && pnpm install --no-frozen-lockfile",
     "format": "prettier --write .",
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky",
-    "test": "pnpm -r --no-bail --aggregate-output --parallel test",
-    "watch": "pnpm -r --parallel --no-bail build --watch"
+    "test": "pnpm -r --no-bail --aggregate-output --parallel test"
   },
   "devDependencies": {
     "@arthurfiorette/prettier-config": "^1.0.12",
@@ -30,7 +29,7 @@
     "@changesets/cli": "^2.29.8",
     "@kitajs/html": "workspace:*",
     "husky": "^9.1.7",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-jsdoc": "^1.8.0",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-packagejson": "^3.0.0",
diff --git a/packages/fastify-html-plugin/package.json b/packages/fastify-html-plugin/package.json
index 4c4f3e3ff..32b93487d 100644
--- a/packages/fastify-html-plugin/package.json
+++ b/packages/fastify-html-plugin/package.json
@@ -25,7 +25,7 @@
     "test": "vitest --coverage --typecheck --run"
   },
   "dependencies": {
-    "fastify-plugin": "^5.0.1"
+    "fastify-plugin": "^5.1.0"
   },
   "devDependencies": {
     "@fastify/formbody": "^8.0.2",
@@ -33,7 +33,7 @@
     "@types/node": "catalog:",
     "@typescript/native-preview": "catalog:",
     "@vitest/coverage-v8": "catalog:",
-    "fastify": "^5.6.0",
+    "fastify": "^5.7.1",
     "jsdom": "catalog:",
     "tslib": "catalog:",
     "typescript": "catalog:",
diff --git a/packages/html/package.json b/packages/html/package.json
index c221b7a2d..2e39f2d39 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -16,8 +16,11 @@
   "type": "commonjs",
   "exports": {
     ".": "./dist/index.js",
-    "./*": "./*",
+    "./all-types": "./all-types.d.ts",
+    "./alpine": "./alpine.d.ts",
     "./error-boundary": "./dist/error-boundary.js",
+    "./hotwire-turbo": "./hotwire-turbo.d.ts",
+    "./htmx": "./htmx.d.ts",
     "./jsx-dev-runtime": "./dist/jsx-dev-runtime.js",
     "./jsx-runtime": "./dist/jsx-runtime.js",
     "./package.json": "./package.json",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25cb5ec94..b634a4b47 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,8 +16,8 @@ catalogs:
       specifier: ^19.2.9
       version: 19.2.9
     '@typescript/native-preview':
-      specifier: latest
-      version: 7.0.0-dev.20260120.1
+      specifier: 7.0.0-dev.20260122.2
+      version: 7.0.0-dev.20260122.2
     '@vitest/coverage-v8':
       specifier: ^4.0.17
       version: 4.0.17
@@ -49,7 +49,7 @@ importers:
     devDependencies:
       '@arthurfiorette/prettier-config':
         specifier: ^1.0.12
-        version: 1.0.12(prettier@3.8.0)(typescript@5.9.3)
+        version: 1.0.12(prettier@3.8.1)(typescript@5.9.3)
       '@changesets/changelog-github':
         specifier: ^0.5.2
         version: 0.5.2
@@ -63,17 +63,17 @@ importers:
         specifier: ^9.1.7
         version: 9.1.7
       prettier:
-        specifier: ^3.8.0
-        version: 3.8.0
+        specifier: ^3.8.1
+        version: 3.8.1
       prettier-plugin-jsdoc:
         specifier: ^1.8.0
-        version: 1.8.0(prettier@3.8.0)
+        version: 1.8.0(prettier@3.8.1)
       prettier-plugin-organize-imports:
         specifier: ^4.3.0
-        version: 4.3.0(prettier@3.8.0)(typescript@5.9.3)
+        version: 4.3.0(prettier@3.8.1)(typescript@5.9.3)
       prettier-plugin-packagejson:
         specifier: ^3.0.0
-        version: 3.0.0(prettier@3.8.0)
+        version: 3.0.0(prettier@3.8.1)
       self-ts-plugin:
         specifier: link:packages/ts-html-plugin
         version: link:packages/ts-html-plugin
@@ -85,10 +85,10 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       hono:
-        specifier: ^4.8.2
-        version: 4.8.2
+        specifier: ^4.11.5
+        version: 4.11.5
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -104,7 +104,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       jsxte:
         specifier: ^3.3.1
         version: 3.3.1
@@ -126,7 +126,7 @@ importers:
         version: link:../../packages/html
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -138,10 +138,10 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       preact:
-        specifier: ^10.27.3
-        version: 10.27.3
+        specifier: ^10.28.2
+        version: 10.28.2
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -160,7 +160,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       react:
         specifier: 'catalog:'
         version: 19.2.3
@@ -182,7 +182,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       react:
         specifier: 'catalog:'
         version: 19.2.3
@@ -233,11 +233,11 @@ importers:
         specifier: 1.8.2
         version: 1.8.2
       ghtml:
-        specifier: 3.1.2
-        version: 3.1.2
+        specifier: 4.0.2
+        version: 4.0.2
       hono:
-        specifier: 4.8.2
-        version: 4.8.2
+        specifier: 4.11.5
+        version: 4.11.5
       html-minifier:
         specifier: 4.0.0
         version: 4.0.0
@@ -248,11 +248,11 @@ importers:
         specifier: 1.0.34
         version: 1.0.34
       nano-jsx:
-        specifier: 0.1.0
-        version: 0.1.0
+        specifier: 0.2.1
+        version: 0.2.1
       preact-render-to-string:
-        specifier: 6.5.13
-        version: 6.5.13(preact@10.27.3)
+        specifier: 6.6.5
+        version: 6.6.5(preact@10.28.2)
       react:
         specifier: 'catalog:'
         version: 19.2.3
@@ -264,7 +264,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -280,7 +280,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -295,7 +295,7 @@ importers:
     dependencies:
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       tslib:
         specifier: 'catalog:'
         version: 2.8.1
@@ -309,14 +309,14 @@ importers:
   packages/fastify-html-plugin:
     dependencies:
       '@kitajs/html':
-        specifier: workspace:^4.2.10
+        specifier: workspace:^
         version: link:../html
       '@kitajs/ts-html-plugin':
-        specifier: workspace:^4.1.3
+        specifier: workspace:^
         version: link:../ts-html-plugin
       fastify-plugin:
-        specifier: ^5.0.1
-        version: 5.0.1
+        specifier: ^5.1.0
+        version: 5.1.0
     devDependencies:
       '@fastify/formbody':
         specifier: ^8.0.2
@@ -334,8 +334,8 @@ importers:
         specifier: 'catalog:'
         version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
       fastify:
-        specifier: ^5.6.0
-        version: 5.6.0
+        specifier: ^5.7.1
+        version: 5.7.1
       jsdom:
         specifier: 'catalog:'
         version: 27.4.0
@@ -363,7 +363,7 @@ importers:
         version: 24.10.9
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       '@vitest/coverage-v8':
         specifier: 'catalog:'
         version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
@@ -412,7 +412,7 @@ importers:
         version: 17.0.35
       '@typescript/native-preview':
         specifier: 'catalog:'
-        version: 7.0.0-dev.20260120.1
+        version: 7.0.0-dev.20260122.2
       '@vitest/coverage-v8':
         specifier: 'catalog:'
         version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
@@ -732,8 +732,8 @@ packages:
       '@noble/hashes':
         optional: true
 
-  '@fastify/ajv-compiler@4.0.2':
-    resolution: {integrity: sha512-Rkiu/8wIjpsf46Rr+Fitd3HRP+VsxUFDDeag0hs9L0ksfnwx2g7SPQQTFL0E8Qv+rfXzQOxBJnjUB9ITUDjfWQ==}
+  '@fastify/ajv-compiler@4.0.5':
+    resolution: {integrity: sha512-KoWKW+MhvfTRWL4qrhUwAAZoaChluo0m0vbiJlGMt2GXvL4LVPQEjt8kSpHI3IBq5Rez8fg+XeH3cneztq+C7A==}
 
   '@fastify/error@4.2.0':
     resolution: {integrity: sha512-RSo3sVDXfHskiBZKBPRgnQTtIqpi/7zhJOEmAxCiBcM7d0uwdGdxLlsCaLzGs8v8NnxIRlfG0N51p5yFaOentQ==}
@@ -744,14 +744,14 @@ packages:
   '@fastify/formbody@8.0.2':
     resolution: {integrity: sha512-84v5J2KrkXzjgBpYnaNRPqwgMsmY7ZDjuj0YVuMR3NXCJRCgKEZy/taSP1wUYGn0onfxJpLyRGDLa+NMaDJtnA==}
 
-  '@fastify/forwarded@3.0.0':
-    resolution: {integrity: sha512-kJExsp4JCms7ipzg7SJ3y8DwmePaELHxKYtg+tZow+k0znUTf3cb+npgyqm8+ATZOdmfgfydIebPDWM172wfyA==}
+  '@fastify/forwarded@3.0.1':
+    resolution: {integrity: sha512-JqDochHFqXs3C3Ml3gOY58zM7OqO9ENqPo0UqAjAjH8L01fRZqwX9iLeX34//kiJubF7r2ZQHtBRU36vONbLlw==}
 
   '@fastify/merge-json-schemas@0.2.1':
     resolution: {integrity: sha512-OA3KGBCy6KtIvLf8DINC5880o5iBlDX4SxzLQS8HorJAbqluzLRn80UXU0bxZn7UOFhFgpRJDasfwn9nG4FG4A==}
 
-  '@fastify/proxy-addr@5.0.0':
-    resolution: {integrity: sha512-37qVVA1qZ5sgH7KpHkkC4z9SK6StIsIcOmpjvMPXNb3vx2GQxhZocogVYbr2PbbeLCQxYIPDok307xEvRZOzGA==}
+  '@fastify/proxy-addr@5.1.0':
+    resolution: {integrity: sha512-INS+6gh91cLUjB+PVHfu1UqcB76Sqtpyp7bnL+FYojhjygvOPA9ctiD/JDKsyD9Xgu4hUhCSJBPig/w7duNajw==}
 
   '@inquirer/external-editor@1.0.2':
     resolution: {integrity: sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==}
@@ -798,6 +798,9 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@pinojs/redact@0.4.0':
+    resolution: {integrity: sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -975,80 +978,41 @@ packages:
   '@types/yargs@17.0.35':
     resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
-  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-r3pWFuR2H7mn6ScwpH5jJljKQqKto0npVuJSk6pRwFwexpTyxOGmJTZJ1V0AWiisaNxU2+CNAqWFJSJYIE/QTg==}
-    cpu: [arm64]
-    os: [darwin]
-
   '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-rpy7WzXpETCIc+QBfE8J1RpNxvb/5pnKh98DbC4gXpxHKrkjkg0LX86CJSoPaCF6xGcfRsegi49q+bXrtH4LWQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-cuC1+wLbUP+Ip2UT94G134fqRdp5w3b3dhcCO6/FQ4yXxvRNyv/WK+upHBUFDaeSOeHgDTyO9/QFYUWwC4If1A==}
-    cpu: [x64]
-    os: [darwin]
-
   '@typescript/native-preview-darwin-x64@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-s1Zn16TqesG2x4wx5cKciyfmffZRhJO2fBSN4fQ6bBWbrZHT8KnjJUpoRd8t+JAXsHfxDy4S/S0DcmX5eRfAHQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-zZGvEGY7wcHYefMZ87KNmvjN3NLIhsCMHEpHZiGCS3khKf+8z6ZsanrzCjOTodvL01VPyBzHxV1EtkSxAcLiQg==}
-    cpu: [arm64]
-    os: [linux]
-
   '@typescript/native-preview-linux-arm64@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-dMIOprNNvILRLKLlevs9fEE6Q6Bhikjv9OiQb3Sma3lcV/4lvh8DJ5hVKj2/aiGrK1000EC54UzwB6rLxnuw0w==}
     cpu: [arm64]
     os: [linux]
 
-  '@typescript/native-preview-linux-arm@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-vN6OYVySol/kQZjJGmAzd6L30SyVlCgmCXS8WjUYtE5clN0YrzQHop16RK29fYZHMxpkOniVBtRPxUYQANZBlQ==}
-    cpu: [arm]
-    os: [linux]
-
   '@typescript/native-preview-linux-arm@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-ybrJVEuB9TmLWwdNl1ryUHeAm6KV3QcOKZUdfKhp6TjmuesOd1/2rdnGHmEcZlQDQt5+RtsCaxHWadvqDF1h3Q==}
     cpu: [arm]
     os: [linux]
 
-  '@typescript/native-preview-linux-x64@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-JBfNhWd/asd5MDeS3VgRvE24pGKBkmvLub6tsux6ypr+Yhy+o0WaAEzVpmlRYZUqss2ai5tvOu4dzPBXzZAtFw==}
-    cpu: [x64]
-    os: [linux]
-
   '@typescript/native-preview-linux-x64@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-bbgb8a3dETxTTFUbSsCF7sSQ2oCsnyg7/HcFXi12TxdXscu1qod4/MxznBNOvwG/eYcrsLmI14k6BVRVSiGFoQ==}
     cpu: [x64]
     os: [linux]
 
-  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-tTndRtYCq2xwgE0VkTi9ACNiJaV43+PqvBqCxk8ceYi3X36Ve+CCnwlZfZJ4k9NxZthtrAwF/kUmpC9iIYbq1w==}
-    cpu: [arm64]
-    os: [win32]
-
   '@typescript/native-preview-win32-arm64@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-JxPwmsaV6wuijnOo4qg5aIMrzQarTNVHqUaVP5pijkon8Y6dCvJ+3lYNEe4E6baiiw1u3npUQY4l/cvx2RL1eQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@typescript/native-preview-win32-x64@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-oZia7hFL6k9pVepfonuPI86Jmyz6WlJKR57tWCDwRNmpA7odxuTq1PbvcYgy1z4+wHF1nnKKJY0PMAiq6ac18w==}
-    cpu: [x64]
-    os: [win32]
-
   '@typescript/native-preview-win32-x64@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-TJH+sSn7vxcGvaSm+fhcpW//dfSGBZGHrxoy0edAbE7UpFf8ub/3cILL5V1pCsF7w3aLNNgVKRpUkowdUgYcPQ==}
     cpu: [x64]
     os: [win32]
 
-  '@typescript/native-preview@7.0.0-dev.20260120.1':
-    resolution: {integrity: sha512-nnEf37C9ue7OBRnF2zmV/OCBmV5Y7T/K4mCHa+nxgiXcF/1w8sA0cgdFl+gHQ0mysqUJ+Bu5btAMeWgpLyjrgg==}
-    hasBin: true
-
   '@typescript/native-preview@7.0.0-dev.20260122.2':
     resolution: {integrity: sha512-+bVirfVpvhDG/oJWzA1c9HX6fC5Wu2hPv3LdBcpf0UtOu0KoWBN+B4L0wYY9gvxvvoxGmupdRCqaM8hRNlXzaw==}
     hasBin: true
@@ -1237,8 +1201,8 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie@1.0.2:
-    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
     engines: {node: '>=18'}
 
   cross-spawn@7.0.6:
@@ -1365,27 +1329,23 @@ packages:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
-  fast-json-stringify@6.0.1:
-    resolution: {integrity: sha512-s7SJE83QKBZwg54dIbD5rCtzOBVD43V1ReWXXYqBgwCwHLYAAT0RQc/FmrQglXqWPpz6omtryJQOau5jI4Nrvg==}
+  fast-json-stringify@6.2.0:
+    resolution: {integrity: sha512-Eaf/KNIDwHkzfyeQFNfLXJnQ7cl1XQI3+zRqmPlvtkMigbXnAcasTrvJQmquBSxKfFGeRA6PFog8t+hFmpDoWw==}
 
   fast-querystring@1.1.2:
     resolution: {integrity: sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==}
 
-  fast-redact@3.5.0:
-    resolution: {integrity: sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==}
-    engines: {node: '>=6'}
-
   fast-uri@3.1.0:
     resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
-  fastify-plugin@5.0.1:
-    resolution: {integrity: sha512-HCxs+YnRaWzCl+cWRYFnHmeRFyR5GVnJTAaCJQiYzQSDwK9MgJdyAsuL3nh0EWRCYMgQ5MeziymvmAhUHYHDUQ==}
+  fastify-plugin@5.1.0:
+    resolution: {integrity: sha512-FAIDA8eovSt5qcDgcBvDuX/v0Cjz0ohGhENZ/wpc3y+oZCY2afZ9Baqql3g/lC+OHRnciQol4ww7tuthOb9idw==}
 
-  fastify@5.6.0:
-    resolution: {integrity: sha512-9j2r9TnwNsfGiCKGYT0Voqy244qwcoYM9qvNi/i+F8sNNWDnqUEVuGYNc9GyjldhXmMlJmVPS6gI1LdvjYGRJw==}
+  fastify@5.7.1:
+    resolution: {integrity: sha512-ZW7S4fxlZhE+tYWVokFzjh+i56R+buYKNGhrVl6DtN8sxkyMEzpJnzvO8A/ZZrsg5w6X37u6I4EOQikYS5DXpA==}
 
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
@@ -1400,8 +1360,8 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  find-my-way@9.3.0:
-    resolution: {integrity: sha512-eRoFWQw+Yv2tuYlK2pjFS2jGXSxSppAs3hSQjfxVKxM5amECzIgYYc1FEI8ZmhSh/Ig+FrKEz43NLRKJjYCZVg==}
+  find-my-way@9.4.0:
+    resolution: {integrity: sha512-5Ye4vHsypZRYtS01ob/iwHzGRUDELlsoCftI/OZFhcLs1M0tkGPcXldE80TAZC5yYuJMBPJQQ43UHlqbJWiX2w==}
     engines: {node: '>=20'}
 
   find-up@4.1.0:
@@ -1437,10 +1397,9 @@ packages:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
 
-  ghtml@3.1.2:
-    resolution: {integrity: sha512-2DXlx5mtDvTV0C/YJBjPPGMLUPquvY80hljfvTrHIrX9agVxjwn+CvwJams/2irFIn0aEZretvKVl+RQhd1m3g==}
+  ghtml@4.0.2:
+    resolution: {integrity: sha512-ymJljsiXUc6hrq2407EnkyCQ8dk5NVEvpAbB4fhnZ+oqP0u9Aq/YWsNkDh+Ew5lBz2uGqyLfzCBdE8J8g4NNgg==}
     engines: {node: '>=18'}
-    hasBin: true
 
   git-hooks-list@4.1.1:
     resolution: {integrity: sha512-cmP497iLq54AZnv4YRAEMnEyQ1eIn4tGKbmswqwmFV4GBnAqE8NLtWxxdXa++AalfgL5EBH4IxTPyquEuGY/jA==}
@@ -1468,8 +1427,8 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  hono@4.8.2:
-    resolution: {integrity: sha512-hM+1RIn9PK1I6SiTNS6/y7O1mvg88awYLFEuEtoiMtRyT3SD2iu9pSFgbBXT3b1Ua4IwzvSTLvwO0SEhDxCi4w==}
+  hono@4.11.5:
+    resolution: {integrity: sha512-WemPi9/WfyMwZs+ZUXdiwcCh9Y+m7L+8vki9MzDw3jJ+W9Lc+12HGsd368Qc1vZi1xwW8BWMMsnK5efYKPdt4g==}
     engines: {node: '>=16.9.0'}
 
   html-encoding-sniffer@6.0.0:
@@ -1509,8 +1468,8 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  ipaddr.js@2.2.0:
-    resolution: {integrity: sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==}
+  ipaddr.js@2.3.0:
+    resolution: {integrity: sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==}
     engines: {node: '>= 10'}
 
   is-extglob@2.1.1:
@@ -1582,8 +1541,8 @@ packages:
       canvas:
         optional: true
 
-  json-schema-ref-resolver@2.0.1:
-    resolution: {integrity: sha512-HG0SIB9X4J8bwbxCbnd5FfPEbcXAJYTi1pBJeP/QPON+w8ovSME8iRG+ElHNxZNX2Qh6eYn1GdzJFS4cDFfx0Q==}
+  json-schema-ref-resolver@3.0.0:
+    resolution: {integrity: sha512-hOrZIVL5jyYFjzk7+y7n5JDzGlU8rfWDuYyHwGa2WA8/pcmMHezp2xsVwxrebD/Q9t8Nc5DboieySDpCp4WG4A==}
 
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
@@ -1726,9 +1685,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nano-jsx@0.1.0:
-    resolution: {integrity: sha512-S4qJM9ayruMdDnn3hiHNK6kq0ZvCaNrDL3RD5jc4AVhmsW1Ufk3xE64Q6xrjAzq1Gff+6VZ5+Au8For4FT/6LA==}
-    engines: {node: '>=16'}
+  nano-jsx@0.2.1:
+    resolution: {integrity: sha512-0zTNveaQn6aUCk01bLmywK1209zaxg+1gCTqm33VH05kWxmkng9GAdmzDky2Oy6wZ4GstaEa7PqH8Ll2Ygfbkw==}
+    engines: {node: '>=18'}
 
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
@@ -1834,27 +1793,27 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pino-abstract-transport@2.0.0:
-    resolution: {integrity: sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==}
+  pino-abstract-transport@3.0.0:
+    resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
 
-  pino-std-serializers@7.0.0:
-    resolution: {integrity: sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==}
+  pino-std-serializers@7.1.0:
+    resolution: {integrity: sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==}
 
-  pino@9.9.5:
-    resolution: {integrity: sha512-d1s98p8/4TfYhsJ09r/Azt30aYELRi6NNnZtEbqFw6BoGsdPVf5lKNK3kUwH8BmJJfpTLNuicjUQjaMbd93dVg==}
+  pino@10.2.1:
+    resolution: {integrity: sha512-Tjyv76gdUe2460dEhtcnA4fU/+HhGq2Kr7OWlo2R/Xxbmn/ZNKWavNWTD2k97IE+s755iVU7WcaOEIl+H3cq8w==}
     hasBin: true
 
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact-render-to-string@6.5.13:
-    resolution: {integrity: sha512-iGPd+hKPMFKsfpR2vL4kJ6ZPcFIoWZEcBf0Dpm3zOpdVvj77aY8RlLiQji5OMrngEyaxGogeakTb54uS2FvA6w==}
+  preact-render-to-string@6.6.5:
+    resolution: {integrity: sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==}
     peerDependencies:
-      preact: '>=10'
+      preact: '>=10 || >= 11.0.0-0'
 
-  preact@10.27.3:
-    resolution: {integrity: sha512-ZieIP3zQHiQsNF3BA+SNVS8dcuRIg/nsxlkFbCMBLS2L1Ww4Bkxd9n6Md2A1crfTZsEbQPADV0neYmh/EElgeQ==}
+  preact@10.28.2:
+    resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==}
 
   prettier-plugin-jsdoc@1.8.0:
     resolution: {integrity: sha512-byW8EBZ1DSA3CPdDGBXfcdqqhh2eq0+HlIOPTGZ6rf9O2p/AwBmtS0e49ot5ZeOdcszj81FyzbyHr/VS0eYpCg==}
@@ -1906,8 +1865,8 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.8.0:
-    resolution: {integrity: sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==}
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -1999,16 +1958,16 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
-  secure-json-parse@4.0.0:
-    resolution: {integrity: sha512-dxtLJO6sc35jWidmLxo7ij+Eg48PM/kleBsxpC8QJE0qJICe+KawkDQmvCMZUr9u7WKVHgMW6vy3fQ7zMiFZMA==}
+  secure-json-parse@4.1.0:
+    resolution: {integrity: sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==}
 
   semver@7.7.3:
     resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
     hasBin: true
 
-  set-cookie-parser@2.7.1:
-    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -2103,8 +2062,9 @@ packages:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
 
-  thread-stream@3.1.0:
-    resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
+  thread-stream@4.0.0:
+    resolution: {integrity: sha512-4iMVL6HAINXWf1ZKZjIPcz5wYaOdPhtO8ATvZ+Xqp3BTdaqtAwQkNmKORqcIo5YkQqGXq5cwfswDwMqqQNrpJA==}
+    engines: {node: '>=20'}
 
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
@@ -2349,12 +2309,12 @@ snapshots:
 
   '@acemir/cssom@0.9.31': {}
 
-  '@arthurfiorette/prettier-config@1.0.12(prettier@3.8.0)(typescript@5.9.3)':
+  '@arthurfiorette/prettier-config@1.0.12(prettier@3.8.1)(typescript@5.9.3)':
     dependencies:
-      prettier: 3.8.0
-      prettier-plugin-jsdoc: 1.8.0(prettier@3.8.0)
-      prettier-plugin-organize-imports: 3.2.4(prettier@3.8.0)(typescript@5.9.3)
-      prettier-plugin-packagejson: 2.5.22(prettier@3.8.0)
+      prettier: 3.8.1
+      prettier-plugin-jsdoc: 1.8.0(prettier@3.8.1)
+      prettier-plugin-organize-imports: 3.2.4(prettier@3.8.1)(typescript@5.9.3)
+      prettier-plugin-packagejson: 2.5.22(prettier@3.8.1)
     transitivePeerDependencies:
       - '@volar/vue-language-plugin-pug'
       - '@volar/vue-typescript'
@@ -2657,7 +2617,7 @@ snapshots:
 
   '@exodus/bytes@1.9.0': {}
 
-  '@fastify/ajv-compiler@4.0.2':
+  '@fastify/ajv-compiler@4.0.5':
     dependencies:
       ajv: 8.17.1
       ajv-formats: 3.0.1(ajv@8.17.1)
@@ -2667,23 +2627,23 @@ snapshots:
 
   '@fastify/fast-json-stringify-compiler@5.0.3':
     dependencies:
-      fast-json-stringify: 6.0.1
+      fast-json-stringify: 6.2.0
 
   '@fastify/formbody@8.0.2':
     dependencies:
       fast-querystring: 1.1.2
-      fastify-plugin: 5.0.1
+      fastify-plugin: 5.1.0
 
-  '@fastify/forwarded@3.0.0': {}
+  '@fastify/forwarded@3.0.1': {}
 
   '@fastify/merge-json-schemas@0.2.1':
     dependencies:
       dequal: 2.0.3
 
-  '@fastify/proxy-addr@5.0.0':
+  '@fastify/proxy-addr@5.1.0':
     dependencies:
-      '@fastify/forwarded': 3.0.0
-      ipaddr.js: 2.2.0
+      '@fastify/forwarded': 3.0.1
+      ipaddr.js: 2.3.0
 
   '@inquirer/external-editor@1.0.2(@types/node@24.10.9)':
     dependencies:
@@ -2738,7 +2698,9 @@ snapshots:
   '@nodelib/fs.walk@1.2.8':
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
+      fastq: 1.20.1
+
+  '@pinojs/redact@0.4.0': {}
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -2867,58 +2829,27 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-darwin-arm64@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview-darwin-x64@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-darwin-x64@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview-linux-arm64@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-linux-arm64@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview-linux-arm@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-linux-arm@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview-linux-x64@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-linux-x64@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview-win32-arm64@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-win32-arm64@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview-win32-x64@7.0.0-dev.20260120.1':
-    optional: true
-
   '@typescript/native-preview-win32-x64@7.0.0-dev.20260122.2':
     optional: true
 
-  '@typescript/native-preview@7.0.0-dev.20260120.1':
-    optionalDependencies:
-      '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260120.1
-      '@typescript/native-preview-darwin-x64': 7.0.0-dev.20260120.1
-      '@typescript/native-preview-linux-arm': 7.0.0-dev.20260120.1
-      '@typescript/native-preview-linux-arm64': 7.0.0-dev.20260120.1
-      '@typescript/native-preview-linux-x64': 7.0.0-dev.20260120.1
-      '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260120.1
-      '@typescript/native-preview-win32-x64': 7.0.0-dev.20260120.1
-
   '@typescript/native-preview@7.0.0-dev.20260122.2':
     optionalDependencies:
       '@typescript/native-preview-darwin-arm64': 7.0.0-dev.20260122.2
@@ -3030,7 +2961,7 @@ snapshots:
   avvio@9.1.0:
     dependencies:
       '@fastify/error': 4.2.0
-      fastq: 1.19.1
+      fastq: 1.20.1
 
   balanced-match@1.0.2: {}
 
@@ -3111,7 +3042,7 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
-  cookie@1.0.2: {}
+  cookie@1.1.1: {}
 
   cross-spawn@7.0.6:
     dependencies:
@@ -3240,44 +3171,42 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  fast-json-stringify@6.0.1:
+  fast-json-stringify@6.2.0:
     dependencies:
       '@fastify/merge-json-schemas': 0.2.1
       ajv: 8.17.1
       ajv-formats: 3.0.1(ajv@8.17.1)
       fast-uri: 3.1.0
-      json-schema-ref-resolver: 2.0.1
+      json-schema-ref-resolver: 3.0.0
       rfdc: 1.4.1
 
   fast-querystring@1.1.2:
     dependencies:
       fast-decode-uri-component: 1.0.1
 
-  fast-redact@3.5.0: {}
-
   fast-uri@3.1.0: {}
 
-  fastify-plugin@5.0.1: {}
+  fastify-plugin@5.1.0: {}
 
-  fastify@5.6.0:
+  fastify@5.7.1:
     dependencies:
-      '@fastify/ajv-compiler': 4.0.2
+      '@fastify/ajv-compiler': 4.0.5
       '@fastify/error': 4.2.0
       '@fastify/fast-json-stringify-compiler': 5.0.3
-      '@fastify/proxy-addr': 5.0.0
+      '@fastify/proxy-addr': 5.1.0
       abstract-logging: 2.0.1
       avvio: 9.1.0
-      fast-json-stringify: 6.0.1
-      find-my-way: 9.3.0
+      fast-json-stringify: 6.2.0
+      find-my-way: 9.4.0
       light-my-request: 6.6.0
-      pino: 9.9.5
+      pino: 10.2.1
       process-warning: 5.0.0
       rfdc: 1.4.1
-      secure-json-parse: 4.0.0
+      secure-json-parse: 4.1.0
       semver: 7.7.3
       toad-cache: 3.7.0
 
-  fastq@1.19.1:
+  fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
 
@@ -3289,7 +3218,7 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-my-way@9.3.0:
+  find-my-way@9.4.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-querystring: 1.1.2
@@ -3329,9 +3258,7 @@ snapshots:
 
   get-east-asian-width@1.4.0: {}
 
-  ghtml@3.1.2:
-    dependencies:
-      glob: 10.4.5
+  ghtml@4.0.2: {}
 
   git-hooks-list@4.1.1: {}
 
@@ -3363,7 +3290,7 @@ snapshots:
 
   he@1.2.0: {}
 
-  hono@4.8.2: {}
+  hono@4.11.5: {}
 
   html-encoding-sniffer@6.0.0:
     dependencies:
@@ -3407,7 +3334,7 @@ snapshots:
 
   ignore@5.3.2: {}
 
-  ipaddr.js@2.2.0: {}
+  ipaddr.js@2.3.0: {}
 
   is-extglob@2.1.1: {}
 
@@ -3489,7 +3416,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  json-schema-ref-resolver@2.0.1:
+  json-schema-ref-resolver@3.0.0:
     dependencies:
       dequal: 2.0.3
 
@@ -3503,9 +3430,9 @@ snapshots:
 
   light-my-request@6.6.0:
     dependencies:
-      cookie: 1.0.2
+      cookie: 1.1.1
       process-warning: 4.0.1
-      set-cookie-parser: 2.7.1
+      set-cookie-parser: 2.7.2
 
   locate-path@5.0.0:
     dependencies:
@@ -3712,7 +3639,7 @@ snapshots:
 
   ms@2.1.3: {}
 
-  nano-jsx@0.1.0: {}
+  nano-jsx@0.2.1: {}
 
   nanoid@3.3.11: {}
 
@@ -3793,25 +3720,25 @@ snapshots:
 
   pify@4.0.1: {}
 
-  pino-abstract-transport@2.0.0:
+  pino-abstract-transport@3.0.0:
     dependencies:
       split2: 4.2.0
 
-  pino-std-serializers@7.0.0: {}
+  pino-std-serializers@7.1.0: {}
 
-  pino@9.9.5:
+  pino@10.2.1:
     dependencies:
+      '@pinojs/redact': 0.4.0
       atomic-sleep: 1.0.0
-      fast-redact: 3.5.0
       on-exit-leak-free: 2.1.2
-      pino-abstract-transport: 2.0.0
-      pino-std-serializers: 7.0.0
+      pino-abstract-transport: 3.0.0
+      pino-std-serializers: 7.1.0
       process-warning: 5.0.0
       quick-format-unescaped: 4.0.4
       real-require: 0.2.0
       safe-stable-stringify: 2.5.0
       sonic-boom: 4.2.0
-      thread-stream: 3.1.0
+      thread-stream: 4.0.0
 
   postcss@8.5.6:
     dependencies:
@@ -3819,46 +3746,46 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact-render-to-string@6.5.13(preact@10.27.3):
+  preact-render-to-string@6.6.5(preact@10.28.2):
     dependencies:
-      preact: 10.27.3
+      preact: 10.28.2
 
-  preact@10.27.3: {}
+  preact@10.28.2: {}
 
-  prettier-plugin-jsdoc@1.8.0(prettier@3.8.0):
+  prettier-plugin-jsdoc@1.8.0(prettier@3.8.1):
     dependencies:
       binary-searching: 2.0.5
       comment-parser: 1.4.1
       mdast-util-from-markdown: 2.0.2
-      prettier: 3.8.0
+      prettier: 3.8.1
     transitivePeerDependencies:
       - supports-color
 
-  prettier-plugin-organize-imports@3.2.4(prettier@3.8.0)(typescript@5.9.3):
+  prettier-plugin-organize-imports@3.2.4(prettier@3.8.1)(typescript@5.9.3):
     dependencies:
-      prettier: 3.8.0
+      prettier: 3.8.1
       typescript: 5.9.3
 
-  prettier-plugin-organize-imports@4.3.0(prettier@3.8.0)(typescript@5.9.3):
+  prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3):
     dependencies:
-      prettier: 3.8.0
+      prettier: 3.8.1
       typescript: 5.9.3
 
-  prettier-plugin-packagejson@2.5.22(prettier@3.8.0):
+  prettier-plugin-packagejson@2.5.22(prettier@3.8.1):
     dependencies:
       sort-package-json: 3.6.0
     optionalDependencies:
-      prettier: 3.8.0
+      prettier: 3.8.1
 
-  prettier-plugin-packagejson@3.0.0(prettier@3.8.0):
+  prettier-plugin-packagejson@3.0.0(prettier@3.8.1):
     dependencies:
       sort-package-json: 3.6.0
     optionalDependencies:
-      prettier: 3.8.0
+      prettier: 3.8.1
 
   prettier@2.8.8: {}
 
-  prettier@3.8.0: {}
+  prettier@3.8.1: {}
 
   process-warning@4.0.1: {}
 
@@ -3951,11 +3878,11 @@ snapshots:
 
   scheduler@0.27.0: {}
 
-  secure-json-parse@4.0.0: {}
+  secure-json-parse@4.1.0: {}
 
   semver@7.7.3: {}
 
-  set-cookie-parser@2.7.1: {}
+  set-cookie-parser@2.7.2: {}
 
   shebang-command@2.0.0:
     dependencies:
@@ -4044,7 +3971,7 @@ snapshots:
       glob: 10.4.5
       minimatch: 9.0.5
 
-  thread-stream@3.1.0:
+  thread-stream@4.0.0:
     dependencies:
       real-require: 0.2.0
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 637f7eecc..71ef01892 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,7 +8,7 @@ catalog:
   '@types/jsdom': ^27.0.0
   '@types/node': ^24.10.9
   '@types/react': ^19.2.9
-  '@typescript/native-preview': latest
+  '@typescript/native-preview': 7.0.0-dev.20260122.2
   '@vitest/coverage-v8': ^4.0.17
   c8: ^10.1.3
   jsdom: ^27.4.0

From 4611a6e088f49cf3a1779e9382c32432108b1c81 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 14:24:40 +0700
Subject: [PATCH 10/22] instructions

---
 .serena/memories/architecture_and_patterns.md |  33 +-
 .../memories/code_style_and_conventions.md    |   5 +-
 .serena/memories/project_overview.md          |  13 +-
 .serena/memories/suggested_commands.md        |  57 +--
 .serena/memories/task_completion_checklist.md |   9 +-
 CLAUDE.md                                     | 327 ++++++++++++++++++
 packages/fastify-html-plugin/CLAUDE.md        | 262 ++++++++++++++
 packages/html/CLAUDE.md                       | 219 ++++++++++++
 packages/ts-html-plugin/CLAUDE.md             | 287 +++++++++++++++
 9 files changed, 1160 insertions(+), 52 deletions(-)
 create mode 100644 CLAUDE.md
 create mode 100644 packages/fastify-html-plugin/CLAUDE.md
 create mode 100644 packages/html/CLAUDE.md
 create mode 100644 packages/ts-html-plugin/CLAUDE.md

diff --git a/.serena/memories/architecture_and_patterns.md b/.serena/memories/architecture_and_patterns.md
index 18e097ae2..c15bf57bd 100644
--- a/.serena/memories/architecture_and_patterns.md
+++ b/.serena/memories/architecture_and_patterns.md
@@ -83,9 +83,9 @@ Each package uses explicit exports in package.json:
 ```json
 {
   "exports": {
-    ".": "./index.js",
-    "./jsx-runtime": "./jsx-runtime.js",
-    "./suspense": "./suspense.js"
+    ".": "./dist/index.js",
+    "./jsx-runtime": "./dist/jsx-runtime.js",
+    "./suspense": "./dist/suspense.js"
     // etc.
   }
 }
@@ -133,32 +133,37 @@ declare global {
 
 ## Testing Patterns
 
-### 1. Node Native Test Runner
+### 1. Vitest Test Runner
 
-Uses Node.js built-in test runner (not Jest/Mocha):
+Uses Vitest with coverage and type checking:
 
-```javascript
-import { test } from 'node:test';
-import assert from 'node:assert';
+```typescript
+import { describe, it, expect } from 'vitest';
+
+describe('component', () => {
+  it('renders correctly', () => {
+    expect(<div>hello</div>).toBe('<div>hello</div>');
+  });
+});
 ```
 
 ### 2. JSDOM for DOM Testing
 
 When DOM testing is needed:
 
-```javascript
+```typescript
 import { JSDOM } from 'jsdom';
 const dom = new JSDOM(htmlString);
 ```
 
-### 3. TSD for Type Testing
+### 3. Vitest Type Testing
 
-For TypeScript type definitions:
+For TypeScript type definitions (using vitest --typecheck):
 
 ```typescript
-// test-d.ts files
-import { expectType } from 'tsd';
-expectType<string>(<div>foo</div>);
+// Uses vitest's built-in type testing capabilities
+import { expectTypeOf } from 'vitest';
+expectTypeOf(<div>foo</div>).toEqualTypeOf<string>();
 ```
 
 ## Performance Patterns
diff --git a/.serena/memories/code_style_and_conventions.md b/.serena/memories/code_style_and_conventions.md
index 3650527e9..15e186620 100644
--- a/.serena/memories/code_style_and_conventions.md
+++ b/.serena/memories/code_style_and_conventions.md
@@ -71,10 +71,11 @@ Based on the codebase:
 
 ## File Organization
 
-- Source files in package root or src/
+- Source files in `src/` directory
 - Tests in `test/` directory with `.test.tsx` or `.test.ts` extension
-- Type definitions alongside implementation files (.d.ts files)
+- Type definitions generated alongside compiled files in `dist/`
 - Build output in `dist/` directory
+- Additional type definition files (htmx.d.ts, alpine.d.ts, etc.) in package root
 
 ## Documentation
 
diff --git a/.serena/memories/project_overview.md b/.serena/memories/project_overview.md
index e6809f9cb..e5172784e 100644
--- a/.serena/memories/project_overview.md
+++ b/.serena/memories/project_overview.md
@@ -35,12 +35,13 @@ This is a pnpm monorepo with the following structure:
 
 ## Tech Stack
 
-- **Language**: TypeScript 5.9.2+
+- **Language**: TypeScript 5.9+
 - **Runtime**: Node.js >= 20.13
-- **Package Manager**: pnpm >= 9 (required via preinstall hook)
+- **Package Manager**: pnpm >= 10 (required via preinstall hook)
 - **JSX Transform**: react-jsx with jsxImportSource: @kitajs/html
 - **Module System**: CommonJS
-- **Testing**: Node.js native test runner with c8 for coverage
+- **Build Tool**: tsgo (@typescript/native-preview)
+- **Testing**: Vitest with @vitest/coverage-v8
 - **Formatting**: Prettier with @arthurfiorette/prettier-config
 - **Git Hooks**: Husky
 - **Versioning**: Changesets with GitHub changelog integration
@@ -49,6 +50,6 @@ This is a pnpm monorepo with the following structure:
 
 - csstype (for CSS types)
 - fastify-plugin (for Fastify integration)
-- TypeScript, tslib, @swc-node/register (build tools)
-- JSDOM (for testing)
-- c8 (code coverage)
+- TypeScript, tslib (build tools)
+- JSDOM (for DOM testing)
+- Vitest with v8 coverage
diff --git a/.serena/memories/suggested_commands.md b/.serena/memories/suggested_commands.md
index 4e5cd2784..432a06086 100644
--- a/.serena/memories/suggested_commands.md
+++ b/.serena/memories/suggested_commands.md
@@ -2,7 +2,7 @@
 
 ## Package Manager
 
-**Always use pnpm** - The project enforces this via preinstall hook.
+**Always use pnpm** - The project enforces this via preinstall hook. Requires pnpm >= 10.
 
 ## Main Development Commands
 
@@ -12,11 +12,11 @@
 # Build all packages
 pnpm build
 
-# Build with watch mode (rebuilds on changes)
-pnpm watch
-
 # Build specific package (from root)
 pnpm --filter "@kitajs/html" build
+
+# Build uses tsgo (native TypeScript compiler preview)
+# Each package has: pnpm build -> tsgo -p tsconfig.build.json
 ```
 
 ### Testing
@@ -25,21 +25,12 @@ pnpm --filter "@kitajs/html" build
 # Run all tests in all packages
 pnpm test
 
-# Run tests in a specific package (from package directory)
-cd packages/html
-pnpm test
-
-# For packages/html specifically:
-# - Compiles TypeScript
-# - Runs tests with c8 coverage
-# - Uses Node.js native test runner
-# - Test files: dist/test/**/*.test.js (compiled from test/*.test.tsx)
-
-# Run only tests marked with .only
-pnpm test:only
+# Run tests in a specific package
+pnpm --filter "@kitajs/html" test
+cd packages/html && pnpm test
 
-# Watch mode (for fastify-html-plugin)
-pnpm --filter "@kitajs/fastify-html-plugin" test:watch
+# Test command runs Vitest with coverage and type checking:
+# vitest --coverage --typecheck --run
 ```
 
 ### Formatting
@@ -65,7 +56,7 @@ pnpm bench
 
 ```bash
 # Create a changeset (for version bumps)
-pnpm change
+pnpm changeset
 
 # Version packages (CI command)
 pnpm ci-version
@@ -87,17 +78,24 @@ Git hooks are managed by Husky:
 
 ```bash
 cd packages/html
-pnpm test         # Run tests with coverage
-pnpm test:only    # Run only .only tests
-pnpm bench        # Run benchmarks
+pnpm build    # Build with tsgo
+pnpm test     # Run vitest with coverage and typecheck
+```
+
+### @kitajs/ts-html-plugin
+
+```bash
+cd packages/ts-html-plugin
+pnpm build    # Build with tsgo
+pnpm test     # Run vitest with coverage and typecheck
 ```
 
 ### @kitajs/fastify-html-plugin
 
 ```bash
 cd packages/fastify-html-plugin
-pnpm test         # Run tests with tsd and c8
-pnpm test:watch   # Watch mode for tests
+pnpm build    # Build with tsgo
+pnpm test     # Run vitest with coverage and typecheck
 ```
 
 ## Common Workflows
@@ -105,8 +103,8 @@ pnpm test:watch   # Watch mode for tests
 ### After making changes:
 
 1. Format code: `pnpm format` (or let pre-commit hook handle it)
-2. Run tests: `pnpm test`
-3. Build: `pnpm build`
+2. Build: `pnpm build`
+3. Run tests: `pnpm test`
 
 ### Before committing:
 
@@ -134,3 +132,10 @@ pnpm --filter "<package-name>" <command>
 # Run commands in parallel
 pnpm -r --parallel <command>
 ```
+
+### Running examples:
+
+```bash
+npx tsx examples/fastify-htmx.tsx
+npx tsx examples/http-server.tsx
+```
diff --git a/.serena/memories/task_completion_checklist.md b/.serena/memories/task_completion_checklist.md
index 5794a53ca..32e613a6d 100644
--- a/.serena/memories/task_completion_checklist.md
+++ b/.serena/memories/task_completion_checklist.md
@@ -26,14 +26,15 @@ When completing a coding task in this project, follow these steps:
 
 - [ ] Run tests: `pnpm test` (from root or package directory)
 - [ ] All tests pass with no failures
-- [ ] Code coverage is maintained or improved (c8 reports)
+- [ ] Code coverage is maintained or improved (Vitest v8 coverage)
 - [ ] For new features: Add appropriate tests in `test/` directory
+- [ ] Type tests pass: Vitest runs with `--typecheck` flag
 
 ## 5. Build
 
-- [ ] Build succeeds: `pnpm build`
+- [ ] Build succeeds: `pnpm build` (uses tsgo - native TypeScript compiler)
 - [ ] No build warnings or errors
-- [ ] Type definitions (.d.ts) are correctly generated
+- [ ] Type definitions (.d.ts) are correctly generated in `dist/`
 
 ## 6. Documentation
 
@@ -51,7 +52,7 @@ When completing a coding task in this project, follow these steps:
 ## 8. Version Management (if releasing)
 
 - [ ] Create changeset if making user-facing changes
-  - Run: `pnpm change`
+  - Run: `pnpm changeset`
 - [ ] Follow semantic versioning
 
 ## 9. Git
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 000000000..1b4643f79
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,327 @@
+# KitaJS HTML Monorepo - Developer Guide
+
+## Overview
+
+KitaJS HTML is a monorepo containing a super-fast JSX runtime that generates HTML strings.
+Unlike React, which builds a virtual DOM, this library directly produces HTML strings,
+making it ideal for server-side rendering, static site generation, and HTMX-style
+applications.
+
+## Repository Structure
+
+```
+kitajs/html/
+├── packages/
+│   ├── html/               # Core JSX runtime (@kitajs/html)
+│   ├── ts-html-plugin/     # XSS detection TypeScript plugin (@kitajs/ts-html-plugin)
+│   └── fastify-html-plugin/# Fastify integration (@kitajs/fastify-html-plugin)
+├── benchmarks/             # Performance benchmarks
+└── examples/               # Usage examples
+```
+
+## Package Dependencies
+
+```
+@kitajs/html (core)
+    ↑
+    ├── @kitajs/ts-html-plugin (peer dependency)
+    │
+    └── @kitajs/fastify-html-plugin (peer dependency)
+```
+
+## Quick Start
+
+### Development Commands
+
+```bash
+# Install dependencies (pnpm required)
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Run all tests
+pnpm test
+
+# Format code
+pnpm format
+
+# Run benchmarks
+pnpm bench
+```
+
+### Per-Package Commands
+
+```bash
+# Build specific package
+pnpm --filter "@kitajs/html" build
+
+# Test specific package
+pnpm --filter "@kitajs/ts-html-plugin" test
+
+# Run commands from package directory
+cd packages/html && pnpm test
+```
+
+## Architecture Overview
+
+### Core Concept: JSX → String
+
+```tsx
+// Input (JSX)
+<div class="hello">{name}</div>;
+
+// TypeScript transforms to
+jsx('div', { class: 'hello', children: name });
+
+// Output (string)
+('<div class="hello">Arthur</div>');
+```
+
+### Key Architectural Decisions
+
+1. **No Virtual DOM**: Direct string concatenation for maximum performance
+2. **Type as String**: `JSX.Element = string | Promise<string>`
+3. **Async Propagation**: Promise children make parent promises
+4. **XSS by Default**: Children are NOT escaped unless `safe` attribute is used
+5. **Compile-Time Safety**: TypeScript plugin catches XSS at development time
+
+### Data Flow
+
+```
+User Code (TSX)
+      │
+      ▼
+TypeScript Compiler
+      │ (jsx: "react-jsx", jsxImportSource: "@kitajs/html")
+      ▼
+jsx-runtime.ts (jsx/jsxs functions)
+      │
+      ▼
+index.ts (createElement, attributesToString, contentsToString)
+      │
+      ▼
+HTML String (or Promise<string> for async)
+```
+
+### XSS Protection Flow
+
+```
+User writes JSX
+      │
+      ▼
+ts-html-plugin (LSP) ─────► Warnings/Errors in Editor
+      │
+      ▼
+xss-scan (CLI) ────────────► CI/CD Pipeline Check
+      │
+      ▼
+Runtime (safe attribute) ──► Escapes at render time
+```
+
+## Package Summaries
+
+### @kitajs/html
+
+The core JSX runtime. Key files:
+
+- `src/index.ts`: Escaping, attribute handling, element creation
+- `src/jsx-runtime.ts`: Modern JSX transform (`jsx`, `jsxs`, `Fragment`)
+- `src/suspense.ts`: Streaming HTML with async components
+- `src/error-boundary.ts`: Error handling for async trees
+
+**See:** [`packages/html/CLAUDE.md`](packages/html/CLAUDE.md)
+
+### @kitajs/ts-html-plugin
+
+TypeScript plugin for XSS detection. Key files:
+
+- `src/index.ts`: Language Service Plugin entry
+- `src/cli.ts`: `xss-scan` CLI tool
+- `src/util.ts`: Core detection algorithms
+- `src/errors.ts`: Error codes (K601-K604)
+
+**See:** [`packages/ts-html-plugin/CLAUDE.md`](packages/ts-html-plugin/CLAUDE.md)
+
+### @kitajs/fastify-html-plugin
+
+Fastify integration. Key file:
+
+- `src/index.ts`: Plugin registration, `reply.html()`, Suspense streaming
+
+**See:**
+[`packages/fastify-html-plugin/CLAUDE.md`](packages/fastify-html-plugin/CLAUDE.md)
+
+## Tech Stack
+
+| Tool                | Purpose                              |
+| ------------------- | ------------------------------------ |
+| **pnpm**            | Package manager (required)           |
+| **TypeScript 5.9+** | Language                             |
+| **tsgo**            | TypeScript compiler (native preview) |
+| **Vitest**          | Test runner                          |
+| **c8/v8**           | Code coverage                        |
+| **Prettier**        | Code formatting                      |
+| **Husky**           | Git hooks                            |
+| **Changesets**      | Version management                   |
+
+## Configuration
+
+### TypeScript (tsconfig.json)
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html",
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
+    "strict": true,
+    "module": "CommonJS",
+    "target": "ESNext"
+  }
+}
+```
+
+### VSCode Settings
+
+```json
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
+```
+
+## Performance Patterns
+
+The codebase uses several optimization patterns:
+
+1. **Check Before Convert**: Regex test before expensive operations
+
+   ```typescript
+   if (!CAMEL_REGEX.test(camel)) return camel;
+   ```
+
+2. **Loop vs Regex**: Character loops faster than regex for replacements
+
+   ```typescript
+   for (; end < length; end++) {
+     switch (value[end]) { ... }
+   }
+   ```
+
+3. **Escape Once**: Escape entire result string, not individual pieces
+
+4. **Void Element Ordering**: Most common tags first in checks
+
+5. **Bun Detection**: Use native `Bun.escapeHTML` when available
+
+## Security Model
+
+### XSS Prevention Layers
+
+1. **Compile-Time**: `@kitajs/ts-html-plugin` catches unsafe usage
+2. **CI/CD**: `xss-scan` CLI fails builds on XSS issues
+3. **Runtime**: `safe` attribute escapes content
+
+### Safe Content Types
+
+- Numbers, booleans, bigints
+- String literals
+- `JSX.Element` (already rendered)
+- `Html.Children` type
+- Variables prefixed with `safe`
+- `Html.escapeHtml()` calls
+
+### Unsafe Content Types
+
+- `string` (dynamic)
+- `any` type
+- Objects with `toString()`
+- Variables prefixed with `unsafe`
+
+## Common Patterns
+
+### Component Definition
+
+```tsx
+import type { PropsWithChildren } from '@kitajs/html';
+
+function Card({ title, children }: PropsWithChildren<{ title: string }>) {
+  return (
+    <div class="card">
+      <h2 safe>{title}</h2>
+      {children}
+    </div>
+  );
+}
+```
+
+### Async Component
+
+```tsx
+async function UserProfile({ id }: { id: string }) {
+  const user = await db.getUser(id);
+  return <div safe>{user.name}</div>;
+}
+```
+
+### Suspense Usage
+
+```tsx
+function Page({ rid }: { rid: number }) {
+  return (
+    <Suspense rid={rid} fallback={<Loading />} catch={(e) => <Error error={e} />}>
+      <AsyncContent />
+    </Suspense>
+  );
+}
+
+// With Fastify
+app.get('/', (req, reply) => reply.html(<Page rid={req.id} />));
+```
+
+### Conditional Classes
+
+```tsx
+<div class={['base', isActive && 'active', size]} />
+```
+
+## Testing Guidelines
+
+1. **XSS Safety**: Always test with malicious input samples
+2. **Async Handling**: Test both sync and async component paths
+3. **Type Coverage**: Use `vitest --typecheck` for type tests
+4. **Performance**: Run benchmarks for core changes
+
+## Contribution Workflow
+
+1. Fork and clone the repository
+2. Install dependencies: `pnpm install`
+3. Make changes
+4. Format: `pnpm format`
+5. Build: `pnpm build`
+6. Test: `pnpm test`
+7. Create changeset: `pnpm changeset`
+8. Submit PR
+
+## Examples
+
+The `examples/` directory contains working examples:
+
+- `fastify-htmx.tsx`: Fastify + HTMX integration with Suspense
+- `http-server.tsx`: Plain Node.js HTTP server with streaming
+
+Run examples:
+
+```bash
+npx tsx examples/fastify-htmx.tsx
+npx tsx examples/http-server.tsx
+```
+
+## Common Gotchas
+
+1. **Children NOT escaped by default** - Always use `safe` for user input
+2. **`JSX.Element` is `string | Promise<string>`** - Handle both cases
+3. **Suspense needs `rid`** - Use request ID for concurrent safety
+4. **Components need `Html.escapeHtml()`** - `safe` only works on native elements
+5. **pnpm required** - npm/yarn will fail on install
diff --git a/packages/fastify-html-plugin/CLAUDE.md b/packages/fastify-html-plugin/CLAUDE.md
new file mode 100644
index 000000000..73a9128a6
--- /dev/null
+++ b/packages/fastify-html-plugin/CLAUDE.md
@@ -0,0 +1,262 @@
+# @kitajs/fastify-html-plugin - Developer Guide
+
+## Overview
+
+`@kitajs/fastify-html-plugin` is a Fastify plugin that integrates `@kitajs/html` with
+Fastify, providing a seamless `reply.html()` method for rendering JSX components. It
+supports both synchronous and asynchronous components, including Suspense streaming.
+
+## Architecture
+
+### Single File Design
+
+The entire plugin is contained in a single file (`src/index.ts`) as the integration is
+straightforward:
+
+```
+src/
+└── index.ts    # Plugin registration, reply decorator, Suspense integration
+```
+
+### Key Components
+
+#### Plugin Registration
+
+```typescript
+const plugin: FastifyPluginCallback<Partial<FastifyKitaHtmlOptions>> = function (
+  fastify,
+  opts,
+  next
+) {
+  fastify.decorateReply(kAutoDoctype, opts.autoDoctype ?? true);
+  fastify.decorateReply('html', html);
+  return next();
+};
+```
+
+The plugin:
+
+1. Decorates replies with `kAutoDoctype` symbol (configurable)
+2. Adds the `html()` method to reply instances
+3. Uses `fastify-plugin` for proper encapsulation
+
+#### The `html()` Method
+
+```typescript
+function html<H extends JSX.Element>(
+  this: FastifyReply,
+  htmlStr: H
+): H extends Promise<string> ? Promise<void> : void {
+  if (typeof htmlStr === 'string') {
+    return handleHtml(htmlStr, this);
+  }
+  return handleAsyncHtml(htmlStr, this);
+}
+```
+
+Handles both sync and async JSX elements with proper TypeScript inference.
+
+#### HTML Processing
+
+```typescript
+function handleHtml<R extends FastifyReply>(htmlStr: string, reply: R): R {
+  // 1. Auto-prepend doctype for <html> tags
+  if (reply[kAutoDoctype] && isTagHtml(htmlStr)) {
+    htmlStr = `<!doctype html>${htmlStr}`;
+  }
+
+  // 2. Set content type
+  reply.type('text/html; charset=utf-8');
+
+  // 3. Check for Suspense usage
+  const requestData = SUSPENSE_ROOT.requests.get(reply.request.id);
+
+  if (requestData === undefined) {
+    // No Suspense - send as regular response with Content-Length
+    return reply
+      .header('content-length', Buffer.byteLength(htmlStr, 'utf-8'))
+      .send(htmlStr);
+  }
+
+  // Suspense detected - stream the response
+  return reply.send(resolveHtmlStream(htmlStr, requestData));
+}
+```
+
+### Suspense Integration
+
+The plugin automatically detects Suspense usage via the global `SUSPENSE_ROOT`:
+
+1. When `<Suspense rid={req.id}>` is used, it registers in `SUSPENSE_ROOT.requests`
+2. The plugin checks for this registration using `reply.request.id`
+3. If found, it streams the response using `resolveHtmlStream()`
+4. No manual stream handling required by the user
+
+### Configuration
+
+```typescript
+export interface FastifyKitaHtmlOptions {
+  /**
+   * Auto-prepend <!doctype html> to responses starting with <html>
+   *
+   * @default true
+   */
+  autoDoctype: boolean;
+}
+```
+
+The `kAutoDoctype` symbol is exposed so users can disable auto-doctype per-request:
+
+```typescript
+reply[kAutoDoctype] = false;
+reply.html(<html>...</html>);  // No doctype added
+```
+
+## Module Augmentation
+
+The plugin extends Fastify's types:
+
+```typescript
+declare module 'fastify' {
+  interface FastifyReply {
+    [kAutoDoctype]: boolean;
+    html<H extends JSX.Element>(
+      this: this,
+      html: H
+    ): H extends Promise<string> ? Promise<void> : void;
+  }
+}
+```
+
+## Export Patterns
+
+Multiple export styles are supported for maximum compatibility:
+
+```typescript
+// Named export
+export const fastifyKitaHtml = Object.assign(plugin_, { kAutoDoctype });
+
+// Default export
+export default fastifyKitaHtml;
+
+// Usage examples:
+// const fastifyKitaHtml = require('@kitajs/fastify-html-plugin')
+// const { fastifyKitaHtml } = require('@kitajs/fastify-html-plugin')
+// import fastifyKitaHtml from '@kitajs/fastify-html-plugin'
+// import { fastifyKitaHtml } from '@kitajs/fastify-html-plugin'
+```
+
+## Development
+
+### Building
+
+```bash
+pnpm build  # Compiles TypeScript with tsgo
+```
+
+### Testing
+
+```bash
+pnpm test  # Runs vitest with coverage and type checking
+```
+
+### Dependencies
+
+- **`fastify-plugin`**: Enables proper plugin encapsulation
+- **Peer deps**: `@kitajs/html`, optionally `@kitajs/ts-html-plugin`
+
+## Usage Patterns
+
+### Basic Usage
+
+```typescript
+import fastifyKitaHtml from '@kitajs/fastify-html-plugin';
+
+app.register(fastifyKitaHtml);
+
+app.get('/', (req, reply) => {
+  reply.html(
+    <html>
+      <body>Hello World</body>
+    </html>
+  );
+});
+```
+
+### With Suspense
+
+```typescript
+app.get('/stream', (req, reply) => {
+  reply.html(
+    <Suspense rid={req.id} fallback={<div>Loading...</div>}>
+      <AsyncComponent />
+    </Suspense>
+  );
+});
+```
+
+Key point: Use `req.id` as the Suspense `rid` - this is how the plugin matches the request
+to its Suspense data.
+
+### Async Components
+
+```typescript
+app.get('/async', async (req, reply) => {
+  // Await is optional - html() handles promises
+  reply.html(<AsyncPage />);
+});
+```
+
+### Disabling Auto-Doctype
+
+```typescript
+// Per-request
+app.get('/fragment', (req, reply) => {
+  reply[kAutoDoctype] = false;
+  reply.html(<div>Just a fragment</div>);
+});
+
+// Globally
+app.register(fastifyKitaHtml, { autoDoctype: false });
+```
+
+## Key Patterns
+
+### HTML Tag Detection
+
+```typescript
+const isTagHtml = RegExp.prototype.test.bind(/^\s*<html/i);
+```
+
+Uses bound regex test for performance - no new function allocation per call.
+
+### Async Handler Separation
+
+```typescript
+// Sync path (optimized)
+function handleHtml(htmlStr: string, reply: FastifyReply) { ... }
+
+// Async path (separate function avoids async overhead in sync case)
+async function handleAsyncHtml(promise: Promise<string>, reply: FastifyReply) {
+  return handleHtml(await promise, reply);
+}
+```
+
+This pattern allows V8 to optimize the sync path without async function overhead.
+
+### Content-Length Handling
+
+```typescript
+// Without Suspense: set Content-Length for proper HTTP
+reply.header('content-length', Buffer.byteLength(htmlStr, 'utf-8'));
+
+// With Suspense: omit Content-Length (chunked transfer)
+// Per RFC 7230 section 3.3.3, connection is closed after response
+```
+
+## Common Gotchas
+
+1. **Suspense requires `req.id`**: Must use `rid={req.id}` for Suspense to work
+2. **Auto-doctype only for `<html>` tags**: Fragments won't get doctype
+3. **Charset is important**: `text/html; charset=utf-8` prevents UTF-7 XSS attacks
+4. **Fastify version**: Works with Fastify 4.x and 5.x
diff --git a/packages/html/CLAUDE.md b/packages/html/CLAUDE.md
new file mode 100644
index 000000000..ff1a54f02
--- /dev/null
+++ b/packages/html/CLAUDE.md
@@ -0,0 +1,219 @@
+# @kitajs/html - Developer Guide
+
+## Overview
+
+`@kitajs/html` is the core JSX runtime that generates HTML strings. Unlike React, which
+builds a virtual DOM, this library directly produces HTML strings, making it ideal for
+server-side rendering (SSR), static site generation, and any context where you need HTML
+output.
+
+## Architecture
+
+### Core Philosophy
+
+- **No Virtual DOM**: JSX compiles directly to string concatenation
+- **Type Safety**: Full TypeScript support with strict type definitions
+- **XSS Prevention**: Built-in escaping with the `safe` attribute
+- **Async Support**: Seamless handling of async components with Suspense
+- **Zero Dependencies**: Only `csstype` for CSS type definitions
+
+### File Structure
+
+```
+src/
+├── index.ts          # Core runtime: escaping, attributes, element creation
+├── jsx-runtime.ts    # Modern JSX transform runtime (jsx, jsxs, Fragment)
+├── jsx-dev-runtime.ts # Development JSX transform (adds jsxDEV)
+├── jsx.ts            # Global JSX namespace type definitions
+├── suspense.ts       # Streaming HTML with Suspense component
+└── error-boundary.ts # Error handling for async components
+```
+
+### Key Components
+
+#### `index.ts` - Core Runtime
+
+The main file exports all core functionality:
+
+- **`escapeHtml(value)`**: Escapes HTML entities (`<`, `>`, `"`, `'`, `&`). Uses Bun's
+  native `escapeHTML` when available.
+- **`toKebabCase(camel)`**: Converts camelCase to kebab-case for CSS properties.
+- **`styleToString(style)`**: Converts style objects to CSS strings.
+- **`attributesToString(attributes)`**: Serializes props to HTML attributes.
+- **`contentsToString(contents, escape?)`**: Joins children into a string, handles async.
+- **`contentToString(content, escape?)`**: Converts a single child to string.
+- **`createElement(name, attributes, ...children)`**: Main element factory (legacy API).
+- **`Fragment(props)`**: Fragment component for multiple children.
+
+#### `jsx-runtime.ts` - Modern JSX Transform
+
+Implements the modern `react-jsx` transform:
+
+- **`jsx(name, attributes)`**: For elements with a single child
+- **`jsxs(name, attributes)`**: For elements with multiple children (static)
+- **`Fragment`**: Re-exported from index
+
+The key difference from `createElement` is that children are passed in
+`attributes.children` rather than as rest parameters.
+
+#### `suspense.ts` - Streaming HTML
+
+Provides streaming capabilities for async components:
+
+- **`Suspense`**: Component that shows fallback while children resolve
+- **`renderToStream(html, rid?)`**: Converts component tree to a Readable stream
+- **`resolveHtmlStream(template, requestData)`**: Internal helper for stream resolution
+- **`SuspenseScript`**: Client-side script for DOM updates when async content arrives
+
+**How Suspense Works:**
+
+1. When a Suspense component is rendered, it returns the fallback wrapped in a
+   `<div data-sf>`
+2. The async children are processed in the background
+3. When resolved, a `<template data-sr>` and `<script data-ss>` are streamed
+4. The client-side script (`$KITA_RC`) replaces the fallback with the real content
+
+#### `error-boundary.ts` - Error Handling
+
+- **`ErrorBoundary`**: Catches errors in async component trees
+- **`HtmlTimeout`**: Error class for timeout-related failures
+
+### JSX Type System (`jsx.ts`)
+
+Defines the global `JSX` namespace with:
+
+- **`JSX.Element`**: `string | Promise<string>` - elements are always strings
+- **`JSX.IntrinsicElements`**: Type definitions for all HTML elements
+- **`JSX.HtmlTag`**: Base interface with common HTML attributes
+- **Custom attributes**: `safe`, `attrs`, conditional `class` arrays
+
+## Key Patterns
+
+### String Building Optimization
+
+The library uses several optimizations for fast string generation:
+
+```typescript
+// Regex check before conversion (avoid unnecessary work)
+if (!CAMEL_REGEX.test(camel)) {
+  return camel;
+}
+
+// Character-by-character escaping (faster than regex replace)
+for (; end < length; end++) {
+  switch (value[end]) {
+    case '&':
+      escaped += value.slice(start, end) + '&amp;';
+      start = end + 1;
+      continue;
+    // ...
+  }
+}
+```
+
+### Async Propagation
+
+When any child is a Promise, the entire parent tree becomes async:
+
+```typescript
+if (typeof content.then === 'function') {
+  return Promise.all(contents.slice(index)).then(function resolveContents(resolved) {
+    resolved.unshift(result);
+    return contentsToString(resolved, escape);
+  });
+}
+```
+
+### Void Elements
+
+Self-closing tags are handled specially:
+
+```typescript
+export function isVoidElement(tag: string): boolean {
+  return (
+    tag === 'meta' ||
+    tag === 'link' ||
+    tag === 'img' ||
+    // ... ordered by frequency
+  );
+}
+```
+
+### The `safe` Attribute
+
+The `safe` attribute triggers HTML escaping for children:
+
+```tsx
+<div safe>{userInput}</div>  // Escaped
+<div>{userInput}</div>       // NOT escaped - potential XSS!
+```
+
+### Conditional Classes
+
+Arrays in the `class` attribute are joined with filtering:
+
+```tsx
+<div class={['a', condition && 'b', 'c']} />
+// Renders: <div class="a c"></div> if condition is false
+```
+
+## Development
+
+### Building
+
+```bash
+pnpm build  # Compiles TypeScript with tsgo
+```
+
+### Testing
+
+```bash
+pnpm test  # Runs vitest with coverage and type checking
+```
+
+### Type Checking
+
+The package uses strict TypeScript configuration. Key settings:
+
+- `strict: true`
+- `noImplicitAny: true`
+- `noUncheckedIndexedAccess: true`
+
+## Integration Points
+
+### TypeScript Configuration
+
+Users configure their `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html"
+  }
+}
+```
+
+### Type Extensions
+
+HTMX, Alpine.js, and Hotwire Turbo types are provided as separate `.d.ts` files:
+
+```typescript
+/// <reference types="@kitajs/html/htmx" />
+```
+
+## Performance Considerations
+
+1. **Escape once at the end**: `contentsToString` escapes the entire result string rather
+   than each piece
+2. **Check before convert**: Regex tests before expensive conversions
+3. **Loop vs regex**: Character loops are faster than regex for simple replacements
+4. **Bun detection**: Uses Bun's native `escapeHTML` when available
+5. **Void element check order**: Most common elements first
+
+## Common Gotchas
+
+1. **Children are NOT escaped by default** - Always use `safe` for user input
+2. **`JSX.Element` is `string | Promise<string>`** - Handle both cases or await
+3. **No context API** - Use props or composition instead
+4. **Suspense requires `rid`** - Request IDs are mandatory for concurrent safety
diff --git a/packages/ts-html-plugin/CLAUDE.md b/packages/ts-html-plugin/CLAUDE.md
new file mode 100644
index 000000000..12e7dfb1f
--- /dev/null
+++ b/packages/ts-html-plugin/CLAUDE.md
@@ -0,0 +1,287 @@
+# @kitajs/ts-html-plugin - Developer Guide
+
+## Overview
+
+`@kitajs/ts-html-plugin` is a TypeScript Language Service Plugin and CLI tool that detects
+XSS vulnerabilities in JSX code at compile time. It integrates with your editor's
+TypeScript service to show real-time warnings and errors for potentially unsafe HTML
+content.
+
+## Architecture
+
+### Dual Mode Operation
+
+The plugin operates in two modes:
+
+1. **LSP Mode**: As a TypeScript Language Service Plugin, providing real-time diagnostics
+   in editors
+2. **CLI Mode**: As a standalone `xss-scan` command for CI/CD pipelines
+
+### File Structure
+
+```
+src/
+├── index.ts    # TypeScript Language Service Plugin entry point
+├── cli.ts      # CLI tool implementation (xss-scan)
+├── util.ts     # Core XSS detection logic and helpers
+└── errors.ts   # Error code definitions (K601-K604)
+```
+
+### Key Components
+
+#### `index.ts` - Language Service Plugin
+
+The plugin entry point that hooks into TypeScript's language service:
+
+```typescript
+module.exports = function (modules: { typescript: typeof TS }) {
+  return {
+    create(info: server.PluginCreateInfo) {
+      const proxy = proxyObject(info.languageService);
+
+      proxy.getSemanticDiagnostics = function (filename) {
+        const diagnostics = info.languageService.getSemanticDiagnostics(filename);
+
+        // Only process .tsx/.jsx files
+        if (!filename.endsWith('.tsx') && !filename.endsWith('.jsx')) {
+          return diagnostics;
+        }
+
+        // Walk the AST and add XSS diagnostics
+        ts.forEachChild(source, (node) => {
+          recursiveDiagnoseJsxElements(ts, node, typeChecker, diagnostics);
+        });
+
+        return diagnostics;
+      };
+
+      return proxy;
+    }
+  };
+};
+```
+
+#### `cli.ts` - XSS Scanner CLI
+
+Standalone command-line tool for scanning projects:
+
+- Parses `tsconfig.json` to get compiler options and file list
+- Creates a TypeScript program
+- Runs the same XSS detection logic as the LSP
+- Outputs colored diagnostics
+- Exit codes: 0 (clean), 1 (errors), 2 (warnings only)
+
+#### `util.ts` - Detection Logic
+
+Core XSS detection algorithms:
+
+**`recursiveDiagnoseJsxElements`**: Entry point for JSX tree traversal
+
+- Walks the AST depth-first
+- Calls `diagnoseJsxElement` for each JSX node
+- Deduplicates diagnostics by position
+
+**`diagnoseJsxElement`**: Analyzes a single JSX element
+
+- Checks for `script` tags (always allowed)
+- Handles `safe` attribute logic (K602 double escape, K604 unused safe)
+- Iterates through JSX expressions in children
+
+**`diagnoseExpression`**: Analyzes expressions within JSX
+
+- Unwraps parentheses and handles nested JSX
+- Recurses through ternary/binary expressions
+- Checks type safety with `isSafeAttribute`
+
+**`isSafeAttribute`**: The core safety check
+
+- Returns `true` if the type is safe to render unescaped
+- Safe types: numbers, booleans, literals, `JSX.Element`, `Html.Children`
+- Unsafe types: `string`, `any`, objects with `toString()`
+- Special cases: `safe`-prefixed variables, `escapeHtml()` calls
+
+#### `errors.ts` - Error Definitions
+
+Four error codes with documentation links:
+
+| Code | Severity | Description                                           |
+| ---- | -------- | ----------------------------------------------------- |
+| K601 | Error    | XSS-prone content without `safe` attribute            |
+| K602 | Error    | Double escaping detected (safe + inner JSX)           |
+| K603 | Error    | XSS in component children (needs `Html.escapeHtml()`) |
+| K604 | Warning  | Unnecessary `safe` attribute on safe content          |
+
+## Detection Algorithm
+
+### What Makes Content "Safe"?
+
+```typescript
+function isSafeAttribute(ts, type, checker, node): boolean {
+  // 1. `children` prop from PropsWithChildren - always safe
+  if (node.name?.text === 'children') return true;
+
+  // 2. Variables initialized with JSX - safe
+  if (decl.initializer && isJsx(ts, decl.initializer)) return true;
+
+  // 3. `any` type - NEVER safe
+  if (type.flags & ts.TypeFlags.Any) return false;
+
+  // 4. JSX.Element alias - safe
+  if (type.aliasSymbol?.escapedName === 'Element') return true;
+
+  // 5. Html.Children alias - safe
+  if (type.aliasSymbol?.escapedName === 'Children') return true;
+
+  // 6. Union types - all members must be safe
+  if (type.isUnionOrIntersection()) {
+    return type.types.every((t) => isSafeAttribute(ts, t, checker, node));
+  }
+
+  // 7. Non-string primitives (number, boolean, etc.) - safe
+  if (!(type.flags & ts.TypeFlags.String)) return true;
+
+  // 8. Variables starting with "safe" - suppressed
+  if (text.startsWith('safe')) return true;
+
+  // 9. escapeHtml() calls - safe
+  if (text.match(/^(\w+\.)?(escapeHtml|e`|escape)/i)) return true;
+
+  return false;
+}
+```
+
+### Expression Handling
+
+Binary and ternary expressions are analyzed on both branches:
+
+```typescript
+// Both sides are checked, even if one never executes
+<div>{condition ? safeValue : unsafeValue}</div>
+//                            ^^^^^^^^^^^ Error!
+
+// Boolean operators are ignored (result is boolean)
+<div>{a === b}</div>  // OK
+```
+
+### Component vs Element Detection
+
+The plugin distinguishes between native elements and components:
+
+```typescript
+// Native element - use `safe` attribute
+<div>{ userInput } <
+  /div>  / / K601 <
+  // Component - use Html.escapeHtml()
+  Component >
+  { userInput } <
+  /Component>  / / K603;
+```
+
+Detection is based on tag name casing (uppercase = component).
+
+## Development
+
+### Building
+
+```bash
+pnpm build  # Compiles TypeScript with tsgo
+```
+
+### Testing
+
+```bash
+pnpm test  # Runs vitest with coverage and type checking
+```
+
+The tests use the `KITA_TS_HTML_PLUGIN_TESTING` environment variable to enable special
+handling for monorepo paths.
+
+### Running the CLI
+
+```bash
+# After building
+node dist/cli.js --help
+node dist/cli.js  # Scan current project
+node dist/cli.js src/file.tsx  # Scan specific files
+```
+
+## Integration
+
+### Editor Setup
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
+  }
+}
+```
+
+```json
+// .vscode/settings.json
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
+```
+
+### CI/CD Integration
+
+```json
+// package.json
+{
+  "scripts": {
+    "test": "xss-scan && vitest"
+  }
+}
+```
+
+## Key Patterns
+
+### Proxy Pattern for Language Service
+
+The plugin wraps the original language service methods:
+
+```typescript
+export function proxyObject<T extends object>(obj: T): T {
+  const proxy: T = Object.create(null);
+  for (const k of Object.keys(obj) as Array<keyof T>) {
+    const x = obj[k]!;
+    proxy[k] = (...args) => x.apply(obj, args);
+  }
+  return proxy;
+}
+```
+
+### Diagnostic Creation
+
+```typescript
+function diagnostic(node, error, category): ts.Diagnostic {
+  return {
+    category: ts.DiagnosticCategory[category],
+    messageText: Errors[error].message,
+    code: Errors[error].code,
+    file: node.getSourceFile(),
+    length: node.getWidth(),
+    start: node.getStart()
+  };
+}
+```
+
+## Suppression Techniques
+
+Users can suppress warnings in several ways:
+
+1. **`safe` attribute**: `<div safe>{content}</div>`
+2. **`safe`-prefixed variable**: `const safeContent = content;`
+3. **Cast to 'safe'**: `{content as 'safe'}`
+4. **escapeHtml call**: `{Html.escapeHtml(content)}`
+
+## Common Gotchas
+
+1. **Script tags are exempt**: Content inside `<script>` is intentionally executable
+2. **Both ternary branches checked**: Even "impossible" branches are analyzed
+3. **`any` type is never safe**: Strict types help XSS detection
+4. **Components need `Html.escapeHtml()`**: The `safe` attribute only works on native
+   elements

From 60d5b947324bd2897aa557a23ab31a0b28c53848 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 14:58:32 +0700
Subject: [PATCH 11/22] code

---
 benchmarks/runner/lib/profile.js |  8 ++++----
 packages/html/src/index.ts       | 33 +++++++++++++-------------------
 packages/html/src/jsx-runtime.ts | 22 +++++++++++----------
 3 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/benchmarks/runner/lib/profile.js b/benchmarks/runner/lib/profile.js
index 41e6e7623..b9d15dcca 100644
--- a/benchmarks/runner/lib/profile.js
+++ b/benchmarks/runner/lib/profile.js
@@ -3,7 +3,7 @@ import { Session } from 'node:inspector/promises';
 import { KitaJs } from './runners.js';
 import { generatePurchases } from './util.js';
 
-const purchases = generatePurchases(512_000);
+const purchases = generatePurchases(1_000);
 
 // Run to warm up the JIT
 for (let i = 0; i < 3; i++) {
@@ -18,9 +18,9 @@ for (let i = 0; i < 3; i++) {
   await session.post('Profiler.enable');
   await session.post('Profiler.start');
 
-  // for (let i = 0; i < 10; i++) {
-  KitaJs('Profile', purchases);
-  // }
+  for (let i = 0; i < 100; i++) {
+    KitaJs('Profile', purchases);
+  }
 
   const { profile } = await session.post('Profiler.stop');
 
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 8e704144e..922778bca 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -290,9 +290,6 @@ export function styleToString(this: void, style: object | string): string {
  * @returns The generated html attributes string.
  */
 export function attributesToString(this: void, attributes: object): string {
-  const keys = Object.keys(attributes);
-  const length = keys.length;
-
   let key,
     value,
     type,
@@ -300,12 +297,9 @@ export function attributesToString(this: void, attributes: object): string {
     start,
     classItems,
     valueLength,
-    result = '',
-    index = 0;
-
-  for (; index < length; index++) {
-    key = keys[index];
+    result = '';
 
+  for (key in attributes) {
     // Skips all @kitajs/html specific attributes.
     if (key === 'children' || key === 'safe' || key === 'of') {
       continue;
@@ -348,7 +342,7 @@ export function attributesToString(this: void, attributes: object): string {
         continue;
       }
     } else if (key === 'style') {
-      result += ' style="' + styleToString(value) + '"';
+      result += ` style="${styleToString(value)}"`;
       continue;
     } else if (key === 'attrs') {
       if (typeof value === 'string') {
@@ -371,18 +365,16 @@ export function attributesToString(this: void, attributes: object): string {
       continue;
     }
 
-    result += ' ' + key;
-
     if (type !== 'string') {
       // Non objects are
       if (type !== 'object') {
-        result += '="' + value.toString() + '"';
+        result += ` ${key}="${value}"`;
         continue;
       }
 
       // Dates are always safe
       if (value instanceof Date) {
-        result += '="' + value.toISOString() + '"';
+        result += ` ${key}="${value.toISOString()}"`;
         continue;
       }
 
@@ -396,11 +388,11 @@ export function attributesToString(this: void, attributes: object): string {
     // This is a optimization to avoid having to look twice for the " character.
     // And make the loop already start in the middle
     if (end === -1) {
-      result += '="' + value + '"';
+      result += ` ${key}="${value}"`;
       continue;
     }
 
-    result += '="';
+    result += ` ${key}="`;
 
     valueLength = value.length;
     start = 0;
@@ -578,19 +570,20 @@ export function createElement(
   const attrs = hasAttrs ? attributesToString(attributes) : '';
 
   if (children.length === 0) {
-    return isVoidElement(name as string)
-      ? '<' + name + attrs + '/>'
-      : '<' + name + attrs + '></' + name + '>';
+    if (isVoidElement(name as string)) {
+      return `<${name}${attrs}/>`;
+    }
+    return `<${name}${attrs}></${name}>`;
   }
 
   const contentsStr = contentsToString(children, hasAttrs && attributes.safe);
 
   if (typeof contentsStr === 'string') {
-    return '<' + name + attrs + '>' + contentsStr + '</' + name + '>';
+    return `<${name}${attrs}>${contentsStr}</${name}>`;
   }
 
   return contentsStr.then(function resolveContents(contents) {
-    return '<' + name + attrs + '>' + contents + '</' + name + '>';
+    return `<${name}${attrs}>${contents}</${name}>`;
   });
 }
 
diff --git a/packages/html/src/jsx-runtime.ts b/packages/html/src/jsx-runtime.ts
index b2ed822f3..696faf34e 100644
--- a/packages/html/src/jsx-runtime.ts
+++ b/packages/html/src/jsx-runtime.ts
@@ -34,20 +34,21 @@ export function jsx(
   const attrs = attributesToString(attributes);
 
   if (attributes.children === undefined) {
-    return isVoidElement(name as string)
-      ? '<' + name + attrs + '/>'
-      : '<' + name + attrs + '></' + name + '>';
+    if (isVoidElement(name as string)) {
+      return `<${name}${attrs}/>`;
+    }
+    return `<${name}${attrs}></${name}>`;
   }
 
   const contents = contentToString(attributes.children, attributes.safe);
 
   if (contents instanceof Promise) {
     return contents.then(function resolveContents(child) {
-      return '<' + name + attrs + '>' + child + '</' + name + '>';
+      return `<${name}${attrs}>${child}</${name}>`;
     });
   }
 
-  return '<' + name + attrs + '>' + contents + '</' + name + '>';
+  return `<${name}${attrs}>${contents}</${name}>`;
 }
 
 /**
@@ -77,20 +78,21 @@ export function jsxs(
   const attrs = attributesToString(attributes);
 
   if (attributes.children.length === 0) {
-    return isVoidElement(name as string)
-      ? '<' + name + attrs + '/>'
-      : '<' + name + attrs + '></' + name + '>';
+    if (isVoidElement(name as string)) {
+      return `<${name}${attrs}/>`;
+    }
+    return `<${name}${attrs}></${name}>`;
   }
 
   const contents = contentsToString(attributes.children, attributes.safe);
 
   if (contents instanceof Promise) {
     return contents.then(function resolveContents(child) {
-      return '<' + name + attrs + '>' + child + '</' + name + '>';
+      return `<${name}${attrs}>${child}</${name}>`;
     });
   }
 
-  return '<' + name + attrs + '>' + contents + '</' + name + '>';
+  return `<${name}${attrs}>${contents}</${name}>`;
 }
 
 // According to the jsx-runtime spec we must export the fragment element also

From d4dd824b517605fd23ac25c72a0e7942039938bd Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 15:22:27 +0700
Subject: [PATCH 12/22] code

---
 examples/http-server/package.json             |  17 +
 examples/http-server/src/index.tsx            |   5 +
 examples/http-server/src/server.ts            |  33 ++
 examples/http-server/src/templates/Layout.tsx |  67 +++
 .../http-server/src/templates/components.tsx  | 281 +++++++++++
 .../src/templates/pages/Dashboard.tsx         | 446 ++++++++++++++++++
 examples/http-server/tsconfig.json            |  10 +
 packages/fastify-html-plugin/README.md        |  50 +-
 packages/html/README.md                       |  17 +-
 packages/html/src/index.ts                    |   4 +-
 packages/ts-html-plugin/README.md             |  13 +-
 pnpm-lock.yaml                                |  77 ++-
 pnpm-workspace.yaml                           |   4 +-
 13 files changed, 973 insertions(+), 51 deletions(-)
 create mode 100644 examples/http-server/package.json
 create mode 100644 examples/http-server/src/index.tsx
 create mode 100644 examples/http-server/src/server.ts
 create mode 100644 examples/http-server/src/templates/Layout.tsx
 create mode 100644 examples/http-server/src/templates/components.tsx
 create mode 100644 examples/http-server/src/templates/pages/Dashboard.tsx
 create mode 100644 examples/http-server/tsconfig.json

diff --git a/examples/http-server/package.json b/examples/http-server/package.json
new file mode 100644
index 000000000..49ff86812
--- /dev/null
+++ b/examples/http-server/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@kitajs/example-http-server",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "tsx --watch src/index.tsx",
+    "test": "xss-scan"
+  },
+  "dependencies": {
+    "@kitajs/html": "workspace:*",
+    "@kitajs/ts-html-plugin": "workspace:*",
+    "@types/node": "catalog:",
+    "tslib": "catalog:",
+    "tsx": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/examples/http-server/src/index.tsx b/examples/http-server/src/index.tsx
new file mode 100644
index 000000000..bb4d1924a
--- /dev/null
+++ b/examples/http-server/src/index.tsx
@@ -0,0 +1,5 @@
+import { createServer } from './server';
+import { Dashboard } from './templates/pages/Dashboard';
+
+// Start the server with the Dashboard page
+createServer(Dashboard, 1228);
diff --git a/examples/http-server/src/server.ts b/examples/http-server/src/server.ts
new file mode 100644
index 000000000..c49f6b9c4
--- /dev/null
+++ b/examples/http-server/src/server.ts
@@ -0,0 +1,33 @@
+import { renderToStream } from '@kitajs/html/suspense';
+import http from 'node:http';
+
+type PageRenderer = (rid: number | string) => JSX.Element;
+
+export function createServer(renderPage: PageRenderer, port = 1228) {
+  const server = http.createServer((req, res) => {
+    const url = new URL(req.url || '/', `http://${req.headers.host}`);
+
+    // Only serve the index page
+    if (url.pathname !== '/' && url.pathname !== '/index.html') {
+      res.statusCode = 404;
+      res.end('Not Found');
+      return;
+    }
+
+    // Set proper content type with charset to prevent UTF-7 XSS attacks
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+
+    // Create the HTML stream from the page renderer
+    const htmlStream = renderToStream(renderPage);
+
+    // Pipe the stream to the response
+    htmlStream.pipe(res);
+  });
+
+  server.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+    console.log('Watch the page load progressively with streaming HTML!');
+  });
+
+  return server;
+}
diff --git a/examples/http-server/src/templates/Layout.tsx b/examples/http-server/src/templates/Layout.tsx
new file mode 100644
index 000000000..89fc33511
--- /dev/null
+++ b/examples/http-server/src/templates/Layout.tsx
@@ -0,0 +1,67 @@
+import type { PropsWithChildren } from '@kitajs/html';
+
+interface LayoutProps {
+  title: string;
+}
+
+export function Layout({ title, children }: PropsWithChildren<LayoutProps>) {
+  return (
+    <>
+      {'<!doctype html>'}
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <title>{title}</title>
+          <script src="https://cdn.tailwindcss.com"></script>
+          <script>
+            {`
+              tailwind.config = {
+                darkMode: 'class',
+                theme: {
+                  extend: {
+                    animation: {
+                      'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    }
+                  }
+                }
+              }
+            `}
+          </script>
+        </head>
+        <body class="bg-slate-900 min-h-screen text-slate-200">
+          <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+            <header class="text-center mb-12 p-8 bg-slate-800/50 rounded-2xl border border-slate-700/50 backdrop-blur">
+              <div class="flex items-center justify-center gap-4 mb-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center font-bold text-xl text-white shadow-lg shadow-indigo-500/25">
+                  K
+                </div>
+                <h1 class="text-3xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+                  KitaJS Streaming Demo
+                </h1>
+              </div>
+              <p class="text-slate-400 text-lg">
+                Watch components load progressively with Suspense streaming
+              </p>
+            </header>
+
+            <main>{children}</main>
+
+            <footer class="text-center mt-12 py-6 text-slate-500 text-sm">
+              <p>
+                Built with{' '}
+                <a
+                  href="https://github.com/kitajs/html"
+                  class="text-purple-400 hover:text-purple-300 transition-colors"
+                >
+                  @kitajs/html
+                </a>{' '}
+                - The fastest JSX runtime for server-side rendering
+              </p>
+            </footer>
+          </div>
+        </body>
+      </html>
+    </>
+  );
+}
diff --git a/examples/http-server/src/templates/components.tsx b/examples/http-server/src/templates/components.tsx
new file mode 100644
index 000000000..4370a79fc
--- /dev/null
+++ b/examples/http-server/src/templates/components.tsx
@@ -0,0 +1,281 @@
+import type { PropsWithChildren } from '@kitajs/html';
+
+// Card component
+interface CardProps {
+  title?: string;
+  subtitle?: string;
+  icon?: string;
+  iconBg?: string;
+}
+
+export function Card({
+  title,
+  subtitle,
+  icon,
+  iconBg = 'from-indigo-500 to-purple-600',
+  children
+}: PropsWithChildren<CardProps>) {
+  return (
+    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 hover:bg-slate-800/70 transition-all duration-200 hover:shadow-xl hover:shadow-slate-900/50 hover:-translate-y-0.5">
+      {(title || icon) && (
+        <div class="flex items-center gap-3 mb-4">
+          {icon && (
+            <div
+              class={`w-10 h-10 bg-gradient-to-br ${iconBg} rounded-xl flex items-center justify-center text-lg shadow-lg`}
+            >
+              {icon}
+            </div>
+          )}
+          {title && (
+            <div>
+              <h3 class="font-semibold text-white">{title}</h3>
+              {subtitle && <p class="text-sm text-slate-400">{subtitle}</p>}
+            </div>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+// Loading skeleton for cards
+export function CardSkeleton() {
+  return (
+    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 animate-pulse">
+      <div class="flex items-center gap-3 mb-4">
+        <div class="w-10 h-10 bg-slate-700 rounded-xl" />
+        <div class="space-y-2">
+          <div class="h-4 w-24 bg-slate-700 rounded" />
+          <div class="h-3 w-16 bg-slate-700/50 rounded" />
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="h-3 bg-slate-700 rounded w-full" />
+        <div class="h-3 bg-slate-700 rounded w-4/5" />
+        <div class="h-3 bg-slate-700 rounded w-3/5" />
+      </div>
+    </div>
+  );
+}
+
+// Stat card component
+interface StatCardProps {
+  label: string;
+  value: string;
+  change?: string;
+  changeType?: 'positive' | 'negative' | 'neutral';
+  icon?: string;
+  iconBg?: string;
+}
+
+export function StatCard({
+  label,
+  value,
+  change,
+  changeType = 'neutral',
+  icon,
+  iconBg = 'from-indigo-500 to-purple-600'
+}: StatCardProps) {
+  const changeColors = {
+    positive: 'bg-emerald-500/20 text-emerald-400',
+    negative: 'bg-red-500/20 text-red-400',
+    neutral: 'bg-slate-500/20 text-slate-400'
+  };
+
+  return (
+    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6">
+      <div class="flex items-center justify-between mb-4">
+        {icon && (
+          <div
+            class={`w-12 h-12 bg-gradient-to-br ${iconBg} rounded-xl flex items-center justify-center text-xl shadow-lg`}
+          >
+            {icon}
+          </div>
+        )}
+        {change && (
+          <span
+            class={`px-2.5 py-1 rounded-full text-xs font-medium ${changeColors[changeType]}`}
+          >
+            {change}
+          </span>
+        )}
+      </div>
+      <div class="text-3xl font-bold text-white mb-1">{value}</div>
+      <div class="text-sm text-slate-400">{label}</div>
+    </div>
+  );
+}
+
+// Stat skeleton
+export function StatSkeleton() {
+  return (
+    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 animate-pulse">
+      <div class="flex items-center justify-between mb-4">
+        <div class="w-12 h-12 bg-slate-700 rounded-xl" />
+        <div class="w-16 h-6 bg-slate-700 rounded-full" />
+      </div>
+      <div class="h-8 w-20 bg-slate-700 rounded mb-2" />
+      <div class="h-4 w-24 bg-slate-700/50 rounded" />
+    </div>
+  );
+}
+
+// Table component
+interface TableProps {
+  headers: string[];
+}
+
+export function Table({ headers, children }: PropsWithChildren<TableProps>) {
+  return (
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-slate-700/50">
+            {headers.map((header) => (
+              <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-700/30">{children}</tbody>
+      </table>
+    </div>
+  );
+}
+
+// Table skeleton
+export function TableSkeleton({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {
+  return (
+    <div class="animate-pulse">
+      <div class="border-b border-slate-700/50 py-3 flex gap-4">
+        {Array.from({ length: cols }).map(() => (
+          <div class="h-3 bg-slate-700 rounded flex-1" />
+        ))}
+      </div>
+      {Array.from({ length: rows }).map(() => (
+        <div class="border-b border-slate-700/30 py-4 flex gap-4">
+          {Array.from({ length: cols }).map(() => (
+            <div class="h-4 bg-slate-700/50 rounded flex-1" />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Badge component
+interface BadgeProps {
+  variant?: 'success' | 'warning' | 'info' | 'error';
+}
+
+export function Badge({ variant = 'info', children }: PropsWithChildren<BadgeProps>) {
+  const variants = {
+    success: 'bg-emerald-500/20 text-emerald-400',
+    warning: 'bg-amber-500/20 text-amber-400',
+    info: 'bg-blue-500/20 text-blue-400',
+    error: 'bg-red-500/20 text-red-400'
+  };
+
+  return (
+    <span class={`px-2.5 py-1 rounded-full text-xs font-medium ${variants[variant]}`}>
+      {children}
+    </span>
+  );
+}
+
+// Avatar component
+interface AvatarProps {
+  name: string;
+  color?: string;
+}
+
+export function Avatar({ name, color = 'from-indigo-500 to-purple-600' }: AvatarProps) {
+  const initials = name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+
+  return (
+    <div
+      class={`w-8 h-8 bg-gradient-to-br ${color} rounded-full flex items-center justify-center text-xs font-semibold text-white`}
+    >
+      {initials}
+    </div>
+  );
+}
+
+// Progress bar
+interface ProgressProps {
+  value: number;
+  color?: string;
+}
+
+export function Progress({
+  value,
+  color = 'from-indigo-500 to-purple-600'
+}: ProgressProps) {
+  return (
+    <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
+      <div
+        class={`h-full bg-gradient-to-r ${color} rounded-full transition-all duration-500`}
+        style={`width: ${Math.min(100, Math.max(0, value))}%`}
+      />
+    </div>
+  );
+}
+
+// Activity item
+interface ActivityItemProps {
+  avatar: string;
+  avatarColor?: string;
+  text: string;
+  time: string;
+}
+
+export function ActivityItem({ avatar, avatarColor, text, time }: ActivityItemProps) {
+  return (
+    <div class="flex items-start gap-3 py-3 border-b border-slate-700/30 last:border-0">
+      <Avatar name={avatar} color={avatarColor} />
+      <div class="flex-1 min-w-0">
+        <p class="text-sm text-slate-200">{text}</p>
+        <p class="text-xs text-slate-500 mt-0.5">{time}</p>
+      </div>
+    </div>
+  );
+}
+
+// Activity skeleton
+export function ActivitySkeleton({ items = 4 }: { items?: number }) {
+  return (
+    <div class="animate-pulse space-y-1">
+      {Array.from({ length: items }).map(() => (
+        <div class="flex items-start gap-3 py-3 border-b border-slate-700/30 last:border-0">
+          <div class="w-8 h-8 bg-slate-700 rounded-full" />
+          <div class="flex-1 space-y-2">
+            <div class="h-4 bg-slate-700 rounded w-3/4" />
+            <div class="h-3 bg-slate-700/50 rounded w-1/4" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Section title
+interface SectionTitleProps {
+  title: string;
+  subtitle?: string;
+}
+
+export function SectionTitle({ title, subtitle }: SectionTitleProps) {
+  return (
+    <div class="mb-6">
+      <h2 class="text-xl font-bold text-white">{title}</h2>
+      {subtitle && <p class="text-sm text-slate-400 mt-1">{subtitle}</p>}
+    </div>
+  );
+}
diff --git a/examples/http-server/src/templates/pages/Dashboard.tsx b/examples/http-server/src/templates/pages/Dashboard.tsx
new file mode 100644
index 000000000..53bcd29c4
--- /dev/null
+++ b/examples/http-server/src/templates/pages/Dashboard.tsx
@@ -0,0 +1,446 @@
+import { Suspense } from '@kitajs/html/suspense';
+import { setTimeout } from 'node:timers/promises';
+import {
+  ActivityItem,
+  ActivitySkeleton,
+  Badge,
+  Card,
+  Progress,
+  SectionTitle,
+  StatCard,
+  StatSkeleton,
+  Table,
+  TableSkeleton
+} from '../components';
+import { Layout } from '../Layout';
+
+// Individual stat fetching functions with staggered delays
+async function fetchRevenueStat() {
+  await setTimeout(400);
+  return {
+    label: 'Total Revenue',
+    value: '$45,231',
+    change: '+12.5%',
+    changeType: 'positive' as const,
+    icon: '💰',
+    iconBg: 'from-emerald-500 to-teal-600'
+  };
+}
+
+async function fetchUsersStat() {
+  await setTimeout(1600);
+  return {
+    label: 'Active Users',
+    value: '2,345',
+    change: '+8.2%',
+    changeType: 'positive' as const,
+    icon: '👥',
+    iconBg: 'from-blue-500 to-cyan-600'
+  };
+}
+
+async function fetchConversionStat() {
+  await setTimeout(1200);
+  return {
+    label: 'Conversion Rate',
+    value: '3.24%',
+    change: '-0.4%',
+    changeType: 'negative' as const,
+    icon: '📈',
+    iconBg: 'from-purple-500 to-pink-600'
+  };
+}
+
+async function fetchOrderValueStat() {
+  await setTimeout(800);
+  return {
+    label: 'Avg. Order Value',
+    value: '$89.50',
+    change: '+5.1%',
+    changeType: 'positive' as const,
+    icon: '🛒',
+    iconBg: 'from-orange-500 to-amber-600'
+  };
+}
+
+async function fetchRecentOrders() {
+  await setTimeout(1500);
+  return [
+    {
+      id: '#ORD-7892',
+      customer: 'Sarah Wilson',
+      product: 'Pro Subscription',
+      amount: '$299.00',
+      status: 'completed'
+    },
+    {
+      id: '#ORD-7891',
+      customer: 'Mike Johnson',
+      product: 'Team Plan',
+      amount: '$599.00',
+      status: 'processing'
+    },
+    {
+      id: '#ORD-7890',
+      customer: 'Emily Davis',
+      product: 'Enterprise License',
+      amount: '$1,299.00',
+      status: 'completed'
+    },
+    {
+      id: '#ORD-7889',
+      customer: 'Alex Chen',
+      product: 'Starter Pack',
+      amount: '$49.00',
+      status: 'pending'
+    },
+    {
+      id: '#ORD-7888',
+      customer: 'Lisa Anderson',
+      product: 'Pro Subscription',
+      amount: '$299.00',
+      status: 'completed'
+    }
+  ];
+}
+
+async function fetchActivity() {
+  await setTimeout(2000);
+  return [
+    {
+      avatar: 'John Doe',
+      avatarColor: 'from-blue-500 to-cyan-600',
+      text: 'Completed purchase of Enterprise License',
+      time: '2 minutes ago'
+    },
+    {
+      avatar: 'Sarah Miller',
+      avatarColor: 'from-purple-500 to-pink-600',
+      text: 'Upgraded to Pro subscription',
+      time: '15 minutes ago'
+    },
+    {
+      avatar: 'Tom Wilson',
+      avatarColor: 'from-emerald-500 to-teal-600',
+      text: 'Left a 5-star review',
+      time: '1 hour ago'
+    },
+    {
+      avatar: 'Emma Brown',
+      avatarColor: 'from-orange-500 to-amber-600',
+      text: 'Requested support ticket #1234',
+      time: '2 hours ago'
+    },
+    {
+      avatar: 'Chris Lee',
+      avatarColor: 'from-rose-500 to-red-600',
+      text: 'Signed up for newsletter',
+      time: '3 hours ago'
+    }
+  ];
+}
+
+async function fetchTopProducts() {
+  await setTimeout(2500);
+  return [
+    { name: 'Pro Subscription', sales: 1234, revenue: '$368,766', progress: 85 },
+    { name: 'Team Plan', sales: 856, revenue: '$512,844', progress: 72 },
+    { name: 'Enterprise License', sales: 423, revenue: '$549,477', progress: 58 },
+    { name: 'Starter Pack', sales: 2341, revenue: '$114,709', progress: 45 }
+  ];
+}
+
+async function fetchServerMetrics() {
+  await setTimeout(3000);
+  return {
+    cpu: 67,
+    memory: 82,
+    disk: 45,
+    network: 23
+  };
+}
+
+// Individual async stat components - each loads independently
+async function RevenueStat() {
+  const stat = await fetchRevenueStat();
+  return <StatCard {...stat} />;
+}
+
+async function UsersStat() {
+  const stat = await fetchUsersStat();
+  return <StatCard {...stat} />;
+}
+
+async function ConversionStat() {
+  const stat = await fetchConversionStat();
+  return <StatCard {...stat} />;
+}
+
+async function OrderValueStat() {
+  const stat = await fetchOrderValueStat();
+  return <StatCard {...stat} />;
+}
+
+async function RecentOrdersSection() {
+  const orders = await fetchRecentOrders();
+  const statusBadge = {
+    completed: 'success' as const,
+    processing: 'info' as const,
+    pending: 'warning' as const
+  };
+
+  return (
+    <Card
+      title="Recent Orders"
+      subtitle="Latest transactions"
+      icon="📦"
+      iconBg="from-blue-500 to-cyan-600"
+    >
+      <Table headers={['Order ID', 'Customer', 'Product', 'Amount', 'Status']}>
+        {orders.map((order) => (
+          <tr class="hover:bg-slate-700/30 transition-colors">
+            <td class="px-4 py-3 text-sm font-mono text-slate-300">{order.id}</td>
+            <td class="px-4 py-3 text-sm text-white">{order.customer}</td>
+            <td class="px-4 py-3 text-sm text-slate-400">{order.product}</td>
+            <td class="px-4 py-3 text-sm font-semibold text-white">{order.amount}</td>
+            <td class="px-4 py-3">
+              <Badge variant={statusBadge[order.status as keyof typeof statusBadge]}>
+                {order.status}
+              </Badge>
+            </td>
+          </tr>
+        ))}
+      </Table>
+    </Card>
+  );
+}
+
+async function ActivitySection() {
+  const activities = await fetchActivity();
+
+  return (
+    <Card
+      title="Recent Activity"
+      subtitle="User actions"
+      icon="⚡"
+      iconBg="from-amber-500 to-orange-600"
+    >
+      <div class="space-y-1">
+        {activities.map((activity) => (
+          <ActivityItem {...activity} />
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+async function TopProductsSection() {
+  const products = await fetchTopProducts();
+
+  return (
+    <Card
+      title="Top Products"
+      subtitle="Best sellers"
+      icon="🏆"
+      iconBg="from-purple-500 to-pink-600"
+    >
+      <div class="space-y-4">
+        {products.map((product) => (
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-sm font-medium text-white">{product.name}</span>
+              <span class="text-sm text-slate-400">{product.sales} sales</span>
+            </div>
+            <Progress value={product.progress} color="from-purple-500 to-pink-500" />
+            <div class="text-xs text-slate-500 mt-1">{product.revenue} revenue</div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+async function ServerMetricsSection() {
+  const metrics = await fetchServerMetrics();
+
+  const metricItems = [
+    { label: 'CPU Usage', value: metrics.cpu, color: 'from-blue-500 to-cyan-500' },
+    { label: 'Memory', value: metrics.memory, color: 'from-purple-500 to-pink-500' },
+    { label: 'Disk Space', value: metrics.disk, color: 'from-emerald-500 to-teal-500' },
+    { label: 'Network', value: metrics.network, color: 'from-orange-500 to-amber-500' }
+  ];
+
+  return (
+    <Card
+      title="Server Metrics"
+      subtitle="Real-time status"
+      icon="🖥️"
+      iconBg="from-emerald-500 to-teal-600"
+    >
+      <div class="space-y-4">
+        {metricItems.map((metric) => (
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-sm font-medium text-white">{metric.label}</span>
+              <span class="text-sm font-semibold text-white">{metric.value}%</span>
+            </div>
+            <Progress value={metric.value} color={metric.color} />
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+// Main Dashboard component
+export function Dashboard(rid: number | string) {
+  return (
+    <Layout title="Dashboard - KitaJS Streaming Demo">
+      <div class="space-y-8">
+        {/* Stats Section - each card loads independently */}
+        <section>
+          <SectionTitle
+            title="Overview"
+            subtitle="Key metrics loading with streaming - watch them appear one by one!"
+          />
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            <Suspense rid={rid} fallback={<StatSkeleton />}>
+              <RevenueStat />
+            </Suspense>
+            <Suspense rid={rid} fallback={<StatSkeleton />}>
+              <UsersStat />
+            </Suspense>
+            <Suspense rid={rid} fallback={<StatSkeleton />}>
+              <ConversionStat />
+            </Suspense>
+            <Suspense rid={rid} fallback={<StatSkeleton />}>
+              <OrderValueStat />
+            </Suspense>
+          </div>
+        </section>
+
+        {/* Two column layout for orders and activity */}
+        <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Recent Orders - loads second (1500ms) */}
+          <div class="lg:col-span-2">
+            <Suspense
+              rid={rid}
+              fallback={
+                <Card
+                  title="Recent Orders"
+                  subtitle="Loading..."
+                  icon="📦"
+                  iconBg="from-blue-500 to-cyan-600"
+                >
+                  <TableSkeleton rows={5} cols={5} />
+                </Card>
+              }
+            >
+              <RecentOrdersSection />
+            </Suspense>
+          </div>
+
+          {/* Activity Feed - loads third (2000ms) */}
+          <div>
+            <Suspense
+              rid={rid}
+              fallback={
+                <Card
+                  title="Recent Activity"
+                  subtitle="Loading..."
+                  icon="⚡"
+                  iconBg="from-amber-500 to-orange-600"
+                >
+                  <ActivitySkeleton items={5} />
+                </Card>
+              }
+            >
+              <ActivitySection />
+            </Suspense>
+          </div>
+        </section>
+
+        {/* Bottom row - Products and Metrics */}
+        <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Top Products - loads fourth (2500ms) */}
+          <Suspense
+            rid={rid}
+            fallback={
+              <Card
+                title="Top Products"
+                subtitle="Loading..."
+                icon="🏆"
+                iconBg="from-purple-500 to-pink-600"
+              >
+                <div class="animate-pulse space-y-4">
+                  {Array.from({ length: 4 }).map(() => (
+                    <div>
+                      <div class="flex justify-between mb-2">
+                        <div class="h-4 bg-slate-700 rounded w-1/3" />
+                        <div class="h-4 bg-slate-700 rounded w-16" />
+                      </div>
+                      <div class="h-2 bg-slate-700 rounded-full" />
+                      <div class="h-3 bg-slate-700/50 rounded w-20 mt-1" />
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            }
+          >
+            <TopProductsSection />
+          </Suspense>
+
+          {/* Server Metrics - loads last (3000ms) */}
+          <Suspense
+            rid={rid}
+            fallback={
+              <Card
+                title="Server Metrics"
+                subtitle="Loading..."
+                icon="🖥️"
+                iconBg="from-emerald-500 to-teal-600"
+              >
+                <div class="animate-pulse space-y-4">
+                  {Array.from({ length: 4 }).map(() => (
+                    <div>
+                      <div class="flex justify-between mb-2">
+                        <div class="h-4 bg-slate-700 rounded w-1/4" />
+                        <div class="h-4 bg-slate-700 rounded w-12" />
+                      </div>
+                      <div class="h-2 bg-slate-700 rounded-full" />
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            }
+          >
+            <ServerMetricsSection />
+          </Suspense>
+        </section>
+
+        {/* Info banner */}
+        <section class="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 rounded-2xl p-6">
+          <div class="flex items-start gap-4">
+            <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-lg flex-shrink-0">
+              💡
+            </div>
+            <div>
+              <h3 class="font-semibold text-white mb-1">How Streaming Works</h3>
+              <p class="text-sm text-slate-400 leading-relaxed">
+                This demo shows two streaming patterns using{' '}
+                <code class="text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded">
+                  {'<Suspense>'}
+                </code>
+                : The <strong class="text-white">Overview stats</strong> load individually
+                (one Suspense per card) so you can see them appear one by one. The other
+                sections use <strong class="text-white">grouped loading</strong> (one
+                Suspense per section) for a cleaner UX. Refresh the page to see the
+                streaming effect again!
+              </p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Layout>
+  );
+}
diff --git a/examples/http-server/tsconfig.json b/examples/http-server/tsconfig.json
new file mode 100644
index 000000000..9290e94d3
--- /dev/null
+++ b/examples/http-server/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html",
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
+  },
+  "include": ["src"]
+}
diff --git a/packages/fastify-html-plugin/README.md b/packages/fastify-html-plugin/README.md
index d2c5ce740..c9d26b4b2 100644
--- a/packages/fastify-html-plugin/README.md
+++ b/packages/fastify-html-plugin/README.md
@@ -41,11 +41,12 @@
 
 - [Installing](#installing)
 - [Preview](#preview)
-- [Installing](#installing-1)
 - [Configuration](#configuration)
+  - [Disabling Auto-Doctype Per Request](#disabling-auto-doctype-per-request)
 - [Documentation](#documentation)
 - [API](#api)
   - [`reply.html()`](#replyhtml)
+- [Compatibility](#compatibility)
 - [License](#license)
 
 <br />
@@ -53,25 +54,14 @@
 
 ## Installing
 
+> [!CAUTION] You **must have followed the `@kitajs/html`'s
+> [Installing](https://github.com/kitajs/html/tree/master/packages/html#installing)
+> guide** before continuing, otherwise you will be vulnerable to XSS attacks.
+
 ```sh
 npm install @kitajs/fastify-html-plugin
 ```
 
-<br />
-
-## Preview
-
-<img align="center" src="assets/preview.png" alt="Example of an error thrown by this LSP plugin." />
-
-<br />
-
-## Installing
-
-> [!CAUTION]  
-> You **must have followed the `@kitajs/html`'s
-> [Installing](https://github.com/kitajs/html/tree/master/packages/html#installing)
-> guide** before continuing, otherwise you will be vulnerable to XSS attacks.
-
 ```ts
 import kitaHtmlPlugin from '@kitajs/fastify-html-plugin';
 import fastify from 'fastify';
@@ -81,6 +71,12 @@ const app = fastify();
 app.register(kitaHtmlPlugin);
 ```
 
+<br />
+
+## Preview
+
+<img align="center" src="assets/preview.png" alt="Preview of using @kitajs/fastify-html-plugin with JSX in Fastify." />
+
 ## Configuration
 
 Every option is well documented through their respective JSDoc comments, below are the
@@ -90,6 +86,20 @@ default options.
 | ------------- | -------------------------------------------------------------------------------------------------- | ------- |
 | `autoDoctype` | Whether to automatically add `<!doctype html>` to a response starting with `<html>`, if not found. | `true`  |
 
+### Disabling Auto-Doctype Per Request
+
+You can disable the auto-doctype feature per request using the exported `kAutoDoctype`
+symbol:
+
+```ts
+import { kAutoDoctype } from '@kitajs/fastify-html-plugin';
+
+app.get('/fragment', (req, reply) => {
+  reply[kAutoDoctype] = false;
+  return reply.html(<div>Just a fragment, no doctype needed</div>);
+});
+```
+
 <br />
 
 ## Documentation
@@ -149,8 +159,14 @@ app
 
 <br />
 
+## Compatibility
+
+This plugin is compatible with **Fastify 4.x** and **Fastify 5.x**.
+
+<br />
+
 ## License
 
-Licensed under the **MIT**. See [`LICENSE`](LICENSE) for more informations.
+Licensed under the **MIT**. See [`LICENSE`](LICENSE) for more information.
 
 <br />
diff --git a/packages/html/README.md b/packages/html/README.md
index 14298bda0..44a966a10 100644
--- a/packages/html/README.md
+++ b/packages/html/README.md
@@ -109,7 +109,7 @@ To use the `@kitajs/html` package, follow these steps:
    ```
 
 3. Append the
-   [`xss-scan`](https://github.com/kitajs/html/tree/master/packages/ts-html-plugin/tree/main#running-as-cli)
+   [`xss-scan`](https://github.com/kitajs/html/tree/master/packages/ts-html-plugin#running-as-cli)
    command into your test script. This CLI comes from @kitajs/ts-html-plugin, which
    catches XSS vulnerabilities that may be introduced into your codebase, automating the
    xss scanning process to run everytime you test your code, like inside your CI/CD
@@ -144,13 +144,13 @@ To use the `@kitajs/html` package, follow these steps:
 
 > [!CAUTION]
 >
-> # Be sure your setup is working correclty!
+> # Be sure your setup is working correctly!
 >
 > Try writing `console.log(<div>{String.name}</div>);` in your editor. If it **THROWS** a
 > `XSS` error, then your setup is correct. Refer to the
 > [@kitajs/ts-html-plugin](https://github.com/kitajs/html/tree/master/packages/ts-html-plugin)
 > repository for more details on setting up editor intellisense. _(It should throw, as
-> `String.name` has a type of `string`, type which may or may not have special caracters)_
+> `String.name` has a type of `string`, which may or may not have special characters)_
 
 <br />
 <br />
@@ -252,7 +252,7 @@ function UserCard({ name, description, date, about }) {
       <br />
       <p safe>{description}</p>
       <br />
-      // Controlled input, no need to sanitize
+      {/* Controlled input, no need to sanitize */}
       <time datetime={date.toISOString()}>{date.toDateString()}</time>
       <br />
       <p safe>{about}</p>
@@ -365,8 +365,7 @@ const html = renderToStream(renderUserPage);
 
 <br />
 
-> [!NOTE]  
-> The `renderToStream()` is returns a native node/bun stream, head over to our
+> [!NOTE] The `renderToStream()` returns a native node/bun stream, head over to our
 > [suspense-server](./examples/suspense-server.tsx) example to see how to use it with
 > node:http, Express or Fastify servers.
 
@@ -544,7 +543,7 @@ app.get('/', (request, response) => (
 ));
 ```
 
-</br>
+<br />
 
 ## Alternative way to configure your tsconfig
 
@@ -864,8 +863,8 @@ Just add this triple slash directive to the top of your file:
 ## Performance
 
 This package is just a string builder on steroids, as you can see
-[how this works](#how-it-works). This means that most way to isolate performance
-differences is to micro benchmark.
+[how this works](#how-it-works). This means that the best way to measure performance
+differences is through micro benchmarks.
 
 The below benchmark compares this package with other popular HTML builders, like React,
 Typed Html, Common Tags and GHtml.
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 922778bca..d90fe8492 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -431,7 +431,7 @@ export type Component<T = {}> = (this: void, props: PropsWithChildren<T>) => JSX
 /**
  * Joins raw string html elements into a single html string.
  *
- * A raw html fragment is just an array of strings, this method concatenates .
+ * A raw html fragment is just an array of strings, this method concatenates them.
  *
  * @param contents An maybe nested array of strings to concatenate.
  * @param escape If it should escape the contents before concatenating them. Default is
@@ -628,7 +628,7 @@ export const e: typeof escape = escape;
  * @link https://github.com/kitajs/html
  * @link https://www.npmjs.com/package/@kitajs/html
  */
-export const Html: Omit<typeof import('./index.js'), 'Html'> = {
+export const Html: Omit<typeof import('./index.js'), 'Html' | 'default'> = {
   escape,
   e,
   escapeHtml,
diff --git a/packages/ts-html-plugin/README.md b/packages/ts-html-plugin/README.md
index 7d610c22c..bf2f51b9d 100644
--- a/packages/ts-html-plugin/README.md
+++ b/packages/ts-html-plugin/README.md
@@ -80,9 +80,8 @@ manager, and put this inside your `tsconfig.json`.
 
 {
   "compilerOptions": {
-    "jsx": "react",
-    "jsxFactory": "Html.createElement",
-    "jsxFragmentFactory": "Html.Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html",
     "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
   }
 }
@@ -94,7 +93,7 @@ manager, and put this inside your `tsconfig.json`.
 
 ## Running as CLI
 
-You can also run this project as a CLI tool. Which is a great way to ensue project-wide
+You can also run this project as a CLI tool. Which is a great way to ensure project-wide
 security. Also it's a great way to integrate with your CI/CD pipeline.
 
 ```sh
@@ -137,9 +136,9 @@ Sometimes, the plugin may not detect that a string or variable is safe for use a
 emit warnings, even when you are confident there are no security issues. Here are ways to
 address this:
 
-1. **Keep using use the `safe` Attribute:** Even if you are certain that the content is
-   free from XSS vulnerabilities, you can still use the `safe` attribute for added
-   assurance. After all, what's the problem of being safe twice?
+1. **Keep using the `safe` Attribute:** Even if you are certain that the content is free
+   from XSS vulnerabilities, you can still use the `safe` attribute for added assurance.
+   After all, what's the problem of being safe twice?
 
    ```tsx
    const html = <div safe>{content}</div>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b634a4b47..c204e0295 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ catalogs:
     tslib:
       specifier: ^2.8.1
       version: 2.8.1
+    tsx:
+      specifier: ^4.21.0
+      version: 4.21.0
     typescript:
       specifier: ^5.9.3
       version: 5.9.3
@@ -306,6 +309,27 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
 
+  examples/http-server:
+    dependencies:
+      '@kitajs/html':
+        specifier: workspace:*
+        version: link:../../packages/html
+      '@kitajs/ts-html-plugin':
+        specifier: workspace:*
+        version: link:../../packages/ts-html-plugin
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.10.9
+      tslib:
+        specifier: 'catalog:'
+        version: 2.8.1
+      tsx:
+        specifier: 'catalog:'
+        version: 4.21.0
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+
   packages/fastify-html-plugin:
     dependencies:
       '@kitajs/html':
@@ -332,7 +356,7 @@ importers:
         version: 7.0.0-dev.20260122.2
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
+        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0))
       fastify:
         specifier: ^5.7.1
         version: 5.7.1
@@ -347,7 +371,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 'catalog:'
-        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
+        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0)
 
   packages/html:
     dependencies:
@@ -366,7 +390,7 @@ importers:
         version: 7.0.0-dev.20260122.2
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
+        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0))
       c8:
         specifier: 'catalog:'
         version: 10.1.3
@@ -387,7 +411,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 'catalog:'
-        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
+        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0)
 
   packages/ts-html-plugin:
     dependencies:
@@ -415,7 +439,7 @@ importers:
         version: 7.0.0-dev.20260122.2
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))
+        version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0))
       fast-defer:
         specifier: ^1.1.9
         version: 1.1.9
@@ -427,7 +451,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 'catalog:'
-        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
+        version: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0)
 
 packages:
 
@@ -1397,6 +1421,9 @@ packages:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
 
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
   ghtml@4.0.2:
     resolution: {integrity: sha512-ymJljsiXUc6hrq2407EnkyCQ8dk5NVEvpAbB4fhnZ+oqP0u9Aq/YWsNkDh+Ew5lBz2uGqyLfzCBdE8J8g4NNgg==}
     engines: {node: '>=18'}
@@ -1922,6 +1949,9 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   ret@0.5.0:
     resolution: {integrity: sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==}
     engines: {node: '>=10'}
@@ -2110,6 +2140,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   typed-html@3.0.1:
     resolution: {integrity: sha512-JKCM9zTfPDuPqQqdGZBWSEiItShliKkBFg5c6yOR8zth43v763XkAzTWaOlVqc0Y6p9ee8AaAbipGfUnCsYZUA==}
     engines: {node: '>=12'}
@@ -2860,7 +2895,7 @@ snapshots:
       '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260122.2
       '@typescript/native-preview-win32-x64': 7.0.0-dev.20260122.2
 
-  '@vitest/coverage-v8@4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0))':
+  '@vitest/coverage-v8@4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.17
@@ -2872,7 +2907,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)
+      vitest: 4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0)
 
   '@vitest/expect@4.0.17':
     dependencies:
@@ -2883,13 +2918,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.17(vite@7.3.1(@types/node@24.10.9))':
+  '@vitest/mocker@4.0.17(vite@7.3.1(@types/node@24.10.9)(tsx@4.21.0))':
     dependencies:
       '@vitest/spy': 4.0.17
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.1(@types/node@24.10.9)
+      vite: 7.3.1(@types/node@24.10.9)(tsx@4.21.0)
 
   '@vitest/pretty-format@4.0.17':
     dependencies:
@@ -3258,6 +3293,10 @@ snapshots:
 
   get-east-asian-width@1.4.0: {}
 
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   ghtml@4.0.2: {}
 
   git-hooks-list@4.1.1: {}
@@ -3823,6 +3862,8 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
   ret@0.5.0: {}
 
   reusify@1.1.0: {}
@@ -4010,6 +4051,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.2
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   typed-html@3.0.1: {}
 
   typescript@5.9.3: {}
@@ -4034,7 +4082,7 @@ snapshots:
 
   vhtml@2.2.0: {}
 
-  vite@7.3.1(@types/node@24.10.9):
+  vite@7.3.1(@types/node@24.10.9)(tsx@4.21.0):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -4045,11 +4093,12 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.10.9
       fsevents: 2.3.3
+      tsx: 4.21.0
 
-  vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0):
+  vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0):
     dependencies:
       '@vitest/expect': 4.0.17
-      '@vitest/mocker': 4.0.17(vite@7.3.1(@types/node@24.10.9))
+      '@vitest/mocker': 4.0.17(vite@7.3.1(@types/node@24.10.9)(tsx@4.21.0))
       '@vitest/pretty-format': 4.0.17
       '@vitest/runner': 4.0.17
       '@vitest/snapshot': 4.0.17
@@ -4066,7 +4115,7 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.1(@types/node@24.10.9)
+      vite: 7.3.1(@types/node@24.10.9)(tsx@4.21.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.9
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 71ef01892..be805a5db 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,10 +1,9 @@
 packages:
   - packages/*
   - benchmarks/*
+  - examples/*
 
 catalog:
-  '@swc-node/register': ^1.11.1
-  '@swc/helpers': ^0.5.18
   '@types/jsdom': ^27.0.0
   '@types/node': ^24.10.9
   '@types/react': ^19.2.9
@@ -14,6 +13,7 @@ catalog:
   jsdom: ^27.4.0
   react: ^19.2.3
   react-dom: ^19.2.3
+  tsx: ^4.21.0
   tslib: ^2.8.1
   typescript: ^5.9.3
   vitest: ^4.0.17

From 3a287d568ba140d336bd7f32f92113d950011674 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Thu, 22 Jan 2026 15:24:07 +0700
Subject: [PATCH 13/22] code

---
 .changeset/config.json              |  2 +-
 .changeset/hip-trams-roll.md        |  5 +++++
 packages/ts-html-plugin/src/util.ts | 13 ++++++++++---
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/hip-trams-roll.md

diff --git a/.changeset/config.json b/.changeset/config.json
index f8dfd84df..7766c96ed 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,7 +7,7 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["@kitajs/bench-*"],
+  "ignore": ["@kitajs/bench-*", "@kitajs/example-*"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }
diff --git a/.changeset/hip-trams-roll.md b/.changeset/hip-trams-roll.md
new file mode 100644
index 000000000..c53a8f6dc
--- /dev/null
+++ b/.changeset/hip-trams-roll.md
@@ -0,0 +1,5 @@
+---
+'@kitajs/ts-html-plugin': patch
+---
+
+Skip xss check for `str &&` cases
diff --git a/packages/ts-html-plugin/src/util.ts b/packages/ts-html-plugin/src/util.ts
index f89b95484..cc5a9607b 100644
--- a/packages/ts-html-plugin/src/util.ts
+++ b/packages/ts-html-plugin/src/util.ts
@@ -387,15 +387,22 @@ function getNodeExpressions(node: TS.Node): TS.Expression[] | undefined {
       return [];
     }
 
-    // Diagnose both sides since both sides can be executed, e.g:
-    // a empty string in the left side will execute the right side
+    // For && operator, the left side is only rendered when falsy
+    // (empty string, null, undefined, 0, false, NaN) - none of which are XSS risks
+    // So we only need to diagnose the right side
+    if (node.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
+      return [node.right];
+    }
+
+    // For || and ?? operators, both sides can be rendered with potentially unsafe values
+    // So we diagnose both sides
     return [node.left, node.right];
   }
 
   // Checks the inner expression
   if (ts.isConditionalExpression(node)) {
     // ignore node.condition because its value will never be rendered
-    return [node.whenFalse, node.whenFalse];
+    return [node.whenTrue, node.whenFalse];
   }
 
   return undefined;

From da701775866cef521287bbef8f7b4953915fec76 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Fri, 23 Jan 2026 22:07:17 +0700
Subject: [PATCH 14/22] code

---
 examples/fastify-htmx/package.json            |  21 +
 examples/fastify-htmx/src/api/misc.tsx        |  54 ++
 examples/fastify-htmx/src/api/stats.tsx       |  29 +
 examples/fastify-htmx/src/api/todos.tsx       |  70 +++
 examples/fastify-htmx/src/index.tsx           |  13 +
 examples/fastify-htmx/src/server.tsx          |  27 +
 examples/fastify-htmx/src/store.ts            |  17 +
 .../fastify-htmx/src/templates/Layout.tsx     |  70 +++
 .../fastify-htmx/src/templates/components.tsx | 200 +++++++
 .../src/templates/pages/Dashboard.tsx         | 205 ++++++++
 examples/fastify-htmx/tsconfig.json           |  10 +
 examples/http-server/package.json             |   2 +-
 examples/http-server/src/index.tsx            |   5 -
 examples/http-server/src/server.ts            |  45 +-
 examples/http-server/src/templates/Layout.tsx |  72 ++-
 .../http-server/src/templates/components.tsx  | 295 ++++-------
 .../src/templates/pages/Dashboard.tsx         | 495 +++++-------------
 packages/fastify-html-plugin/package.json     |   6 +-
 packages/html/test/suspense.test.tsx          | 206 ++++++++
 pnpm-lock.yaml                                | 137 ++++-
 pnpm-workspace.yaml                           |   3 +
 21 files changed, 1346 insertions(+), 636 deletions(-)
 create mode 100644 examples/fastify-htmx/package.json
 create mode 100644 examples/fastify-htmx/src/api/misc.tsx
 create mode 100644 examples/fastify-htmx/src/api/stats.tsx
 create mode 100644 examples/fastify-htmx/src/api/todos.tsx
 create mode 100644 examples/fastify-htmx/src/index.tsx
 create mode 100644 examples/fastify-htmx/src/server.tsx
 create mode 100644 examples/fastify-htmx/src/store.ts
 create mode 100644 examples/fastify-htmx/src/templates/Layout.tsx
 create mode 100644 examples/fastify-htmx/src/templates/components.tsx
 create mode 100644 examples/fastify-htmx/src/templates/pages/Dashboard.tsx
 create mode 100644 examples/fastify-htmx/tsconfig.json
 delete mode 100644 examples/http-server/src/index.tsx

diff --git a/examples/fastify-htmx/package.json b/examples/fastify-htmx/package.json
new file mode 100644
index 000000000..7b6dc691e
--- /dev/null
+++ b/examples/fastify-htmx/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@kitajs/example-fastify-htmx",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "tsx --watch src/index.tsx | pino-pretty",
+    "test": "xss-scan"
+  },
+  "dependencies": {
+    "@fastify/formbody": "catalog:",
+    "@kitajs/fastify-html-plugin": "workspace:*",
+    "@kitajs/html": "workspace:*",
+    "@kitajs/ts-html-plugin": "workspace:*",
+    "@types/node": "catalog:",
+    "fastify": "catalog:",
+    "pino-pretty": "^13.1.3",
+    "tslib": "catalog:",
+    "tsx": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/examples/fastify-htmx/src/api/misc.tsx b/examples/fastify-htmx/src/api/misc.tsx
new file mode 100644
index 000000000..0f3fa7d3e
--- /dev/null
+++ b/examples/fastify-htmx/src/api/misc.tsx
@@ -0,0 +1,54 @@
+import type { FastifyInstance } from 'fastify';
+import { setTimeout } from 'node:timers/promises';
+import { store } from '../store';
+import { Progress, Toast } from '../templates/components';
+
+export async function miscRoutes(app: FastifyInstance) {
+  // Click counter
+  app.post('/api/click', async () => {
+    store.clickCount++;
+    return String(store.clickCount);
+  });
+
+  // Server time
+  app.get('/api/time', async () => {
+    const now = new Date();
+    return now.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
+  });
+
+  // System metrics
+  app.get('/api/metrics', async () => {
+    await setTimeout(200);
+    const cpu = Math.round(30 + Math.random() * 40);
+    const memory = Math.round(50 + Math.random() * 30);
+    const disk = Math.round(20 + Math.random() * 20);
+
+    return (
+      <div class="space-y-3">
+        <Progress label="CPU" value={cpu} />
+        <Progress label="Memory" value={memory} />
+        <Progress label="Disk" value={disk} />
+      </div>
+    );
+  });
+
+  // Notifications
+  app.post('/api/notify', async (req) => {
+    const type = (req.query as { type?: string }).type || 'info';
+    const messages = {
+      success: ['Operation completed!', 'Changes saved successfully', 'Task completed'],
+      error: ['Something went wrong', 'Connection failed', 'Please try again'],
+      info: ['New update available', 'System notification', 'Processing request']
+    };
+    const typeMessages = messages[type as keyof typeof messages] || messages.info;
+    const message =
+      typeMessages[Math.floor(Math.random() * typeMessages.length)] ?? 'Notification';
+
+    return <Toast message={message} type={type as 'success' | 'error' | 'info'} />;
+  });
+}
diff --git a/examples/fastify-htmx/src/api/stats.tsx b/examples/fastify-htmx/src/api/stats.tsx
new file mode 100644
index 000000000..1e67d8d2d
--- /dev/null
+++ b/examples/fastify-htmx/src/api/stats.tsx
@@ -0,0 +1,29 @@
+import type { FastifyInstance } from 'fastify';
+import { setTimeout } from 'node:timers/promises';
+import { StatCard } from '../templates/components';
+
+// Helper for random delay
+const randomDelay = () => setTimeout(300 + Math.random() * 700);
+
+export async function statsRoutes(app: FastifyInstance) {
+  app.get('/api/stats/visitors', async () => {
+    await randomDelay();
+    return <StatCard label="Visitors" value="2,847" change="+12%" positive />;
+  });
+
+  app.get('/api/stats/requests', async () => {
+    await randomDelay();
+    return <StatCard label="Requests" value="14.2k" change="+28%" positive />;
+  });
+
+  app.get('/api/stats/uptime', async () => {
+    await randomDelay();
+    return <StatCard label="Uptime" value="99.9%" change="Stable" positive />;
+  });
+
+  app.get('/api/stats/memory', async () => {
+    await randomDelay();
+    const used = Math.round(process.memoryUsage().heapUsed / 1024 / 1024);
+    return <StatCard label="Memory" value={`${used} MB`} />;
+  });
+}
diff --git a/examples/fastify-htmx/src/api/todos.tsx b/examples/fastify-htmx/src/api/todos.tsx
new file mode 100644
index 000000000..519bea938
--- /dev/null
+++ b/examples/fastify-htmx/src/api/todos.tsx
@@ -0,0 +1,70 @@
+import type { FastifyInstance } from 'fastify';
+import { store } from '../store';
+
+// Todo item component
+export function TodoItem({
+  id,
+  text,
+  done
+}: {
+  id: number;
+  text: string;
+  done: boolean;
+}) {
+  return (
+    <div
+      id={`todo-${id}`}
+      class="flex items-center justify-between py-1.5 border-b border-stone-800/50 last:border-0"
+    >
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={done}
+          hx-post={`/api/todos/${id}/toggle`}
+          hx-target={`#todo-${id}`}
+          hx-swap="outerHTML"
+          class="w-4 h-4 rounded border-stone-600 bg-stone-800 text-kita-500 focus:ring-kita-500"
+        />
+        <span
+          class={`text-sm ${done ? 'line-through text-stone-500' : 'text-stone-200'}`}
+          safe
+        >
+          {text}
+        </span>
+      </label>
+      <button
+        hx-delete={`/api/todos/${id}`}
+        hx-target={`#todo-${id}`}
+        hx-swap="outerHTML"
+        class="text-stone-500 hover:text-red-400 transition-colors text-xs"
+      >
+        ✕
+      </button>
+    </div>
+  );
+}
+
+export async function todosRoutes(app: FastifyInstance) {
+  app.post('/api/todos', async (req) => {
+    const { text } = req.body as { text: string };
+    const todo = { id: store.nextTodoId++, text, done: false };
+    store.todos.push(todo);
+    return <TodoItem {...todo} />;
+  });
+
+  app.post('/api/todos/:id/toggle', async (req) => {
+    const id = Number((req.params as { id: string }).id);
+    const todo = store.todos.find((t) => t.id === id);
+    if (todo) {
+      todo.done = !todo.done;
+      return <TodoItem {...todo} />;
+    }
+    return '';
+  });
+
+  app.delete('/api/todos/:id', async (req) => {
+    const id = Number((req.params as { id: string }).id);
+    store.todos = store.todos.filter((t) => t.id !== id);
+    return '';
+  });
+}
diff --git a/examples/fastify-htmx/src/index.tsx b/examples/fastify-htmx/src/index.tsx
new file mode 100644
index 000000000..a1eb55c4d
--- /dev/null
+++ b/examples/fastify-htmx/src/index.tsx
@@ -0,0 +1,13 @@
+import { createServer } from './server';
+
+const port = Number(process.env.PORT) || 32013;
+
+createServer()
+  .then((app) => app.listen({ port }))
+  .then(() => {
+    console.log(`🚀 Server running at http://localhost:${port}`);
+  })
+  .catch((err) => {
+    console.error('Failed to start server:', err);
+    process.exit(1);
+  });
diff --git a/examples/fastify-htmx/src/server.tsx b/examples/fastify-htmx/src/server.tsx
new file mode 100644
index 000000000..df220a9c3
--- /dev/null
+++ b/examples/fastify-htmx/src/server.tsx
@@ -0,0 +1,27 @@
+import fastifyFormbody from '@fastify/formbody';
+import fastifyHtml from '@kitajs/fastify-html-plugin';
+import fastify from 'fastify';
+import { miscRoutes } from './api/misc';
+import { statsRoutes } from './api/stats';
+import { todosRoutes } from './api/todos';
+import { Dashboard } from './templates/pages/Dashboard';
+
+export async function createServer() {
+  const app = fastify({ logger: true });
+
+  // Register plugins
+  await app.register(fastifyFormbody);
+  await app.register(fastifyHtml);
+
+  // Register API routes
+  await app.register(statsRoutes);
+  await app.register(todosRoutes);
+  await app.register(miscRoutes);
+
+  // Main page
+  app.get('/', async (_req, reply) => {
+    return reply.html(<Dashboard />);
+  });
+
+  return app;
+}
diff --git a/examples/fastify-htmx/src/store.ts b/examples/fastify-htmx/src/store.ts
new file mode 100644
index 000000000..47ed22f64
--- /dev/null
+++ b/examples/fastify-htmx/src/store.ts
@@ -0,0 +1,17 @@
+// Simulated data store for the demo
+
+export interface Todo {
+  id: number;
+  text: string;
+  done: boolean;
+}
+
+export const store = {
+  clickCount: 0,
+  todos: [
+    { id: 1, text: 'Learn KitaJS Html', done: true },
+    { id: 2, text: 'Try HTMX integration', done: false },
+    { id: 3, text: 'Build something awesome', done: false }
+  ] as Todo[],
+  nextTodoId: 4
+};
diff --git a/examples/fastify-htmx/src/templates/Layout.tsx b/examples/fastify-htmx/src/templates/Layout.tsx
new file mode 100644
index 000000000..f430149bb
--- /dev/null
+++ b/examples/fastify-htmx/src/templates/Layout.tsx
@@ -0,0 +1,70 @@
+import type { PropsWithChildren } from '@kitajs/html';
+
+interface LayoutProps {
+  title: string;
+}
+
+export function Layout({ title, children }: PropsWithChildren<LayoutProps>) {
+  return (
+    '<!doctype html>' +
+    (
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <meta name="theme-color" content="#1B1B1F" />
+          <title safe>{title}</title>
+          <link rel="icon" href="https://kitajs.org/favicon.svg" type="image/svg+xml" />
+          <script src="https://cdn.tailwindcss.com"></script>
+          <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+          <script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph-ext.min.js"></script>
+          <script>
+            {`
+              tailwind.config = {
+                theme: {
+                  extend: {
+                    colors: {
+                      kita: {
+                        50: '#fdf5f4',
+                        100: '#fbe9e7',
+                        200: '#e4c8c5',
+                        300: '#d4a49e',
+                        400: '#bd695e',
+                        500: '#ad4336',
+                        600: '#9a3a2f',
+                        700: '#7d2f26',
+                        800: '#662722',
+                        900: '#54231f',
+                      }
+                    }
+                  }
+                }
+              }
+            `}
+          </script>
+          <style>
+            {`
+              @keyframes shimmer {
+                0% { background-position: 200% 0; }
+                100% { background-position: -200% 0; }
+              }
+              .skeleton {
+                background: linear-gradient(90deg, rgba(173,67,54,0.1) 0%, rgba(173,67,54,0.2) 50%, rgba(173,67,54,0.1) 100%);
+                background-size: 200% 100%;
+                animation: shimmer 1.5s infinite;
+              }
+              .htmx-request .htmx-indicator { display: inline-block; }
+              .htmx-indicator { display: none; }
+            `}
+          </style>
+        </head>
+        <body
+          class="bg-stone-950 min-h-screen text-stone-200 p-6 overflow-y-auto"
+          hx-ext="morph"
+        >
+          {children}
+        </body>
+      </html>
+    )
+  );
+}
diff --git a/examples/fastify-htmx/src/templates/components.tsx b/examples/fastify-htmx/src/templates/components.tsx
new file mode 100644
index 000000000..1af8ddc14
--- /dev/null
+++ b/examples/fastify-htmx/src/templates/components.tsx
@@ -0,0 +1,200 @@
+import type { PropsWithChildren } from '@kitajs/html';
+
+// Card component
+interface CardProps {
+  title?: string;
+  icon?: string;
+}
+
+export function Card({ title, icon, children }: PropsWithChildren<CardProps>) {
+  return (
+    <div class="bg-stone-900/50 border border-stone-800 rounded-xl p-4 h-full">
+      {(title || icon) && (
+        <div class="flex items-center gap-2 mb-3">
+          {icon && (
+            <div
+              class="w-8 h-8 bg-gradient-to-br from-kita-500 to-kita-400 rounded-lg flex items-center justify-center text-sm"
+              safe
+            >
+              {icon}
+            </div>
+          )}
+          {title && (
+            <h3 class="font-semibold text-stone-100 text-sm" safe>
+              {title}
+            </h3>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+// Stat card
+interface StatCardProps {
+  label: string;
+  value: string;
+  change?: string;
+  positive?: boolean;
+}
+
+export function StatCard({ label, value, change, positive }: StatCardProps) {
+  return (
+    <div class="bg-stone-900/50 border border-stone-800 rounded-xl p-4">
+      <div class="text-xs text-stone-400 mb-1" safe>
+        {label}
+      </div>
+      <div class="text-2xl font-bold text-stone-100" safe>
+        {value}
+      </div>
+      {change && (
+        <div
+          class={`text-xs mt-1 ${positive ? 'text-emerald-400' : 'text-red-400'}`}
+          safe
+        >
+          {change}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Stat skeleton
+export function StatSkeleton() {
+  return (
+    <div class="bg-stone-900/50 border border-stone-800 rounded-xl p-4">
+      <div class="h-3 w-16 skeleton rounded mb-2" />
+      <div class="h-7 w-20 skeleton rounded mb-1" />
+      <div class="h-3 w-12 skeleton rounded" />
+    </div>
+  );
+}
+
+// List item
+interface ListItemProps {
+  primary: string;
+  secondary?: string;
+  badge?: string;
+  badgeColor?: string;
+}
+
+export function ListItem({
+  primary,
+  secondary,
+  badge,
+  badgeColor = 'bg-kita-500/20 text-kita-300'
+}: ListItemProps) {
+  return (
+    <div class="flex items-center justify-between py-2 border-b border-stone-800/50 last:border-0">
+      <div>
+        <div class="text-sm text-stone-200" safe>
+          {primary}
+        </div>
+        {secondary && (
+          <div class="text-xs text-stone-500" safe>
+            {secondary}
+          </div>
+        )}
+      </div>
+      {badge && (
+        <span class={`px-2 py-0.5 rounded-full text-xs ${badgeColor}`} safe>
+          {badge}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// Button
+interface ButtonProps {
+  variant?: 'primary' | 'secondary';
+  size?: 'sm' | 'md';
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  children
+}: PropsWithChildren<ButtonProps>) {
+  const baseClass =
+    'rounded-lg font-medium transition-colors inline-flex items-center gap-2';
+  const variantClass =
+    variant === 'primary'
+      ? 'bg-kita-500 hover:bg-kita-600 text-white'
+      : 'bg-stone-800 hover:bg-stone-700 text-stone-200';
+  const sizeClass = size === 'sm' ? 'px-3 py-1.5 text-xs' : 'px-4 py-2 text-sm';
+
+  return <button class={`${baseClass} ${variantClass} ${sizeClass}`}>{children}</button>;
+}
+
+// Loading spinner
+export function Spinner({ size = 'sm' }: { size?: 'sm' | 'md' }) {
+  const sizeClass = size === 'sm' ? 'w-4 h-4' : 'w-6 h-6';
+  return (
+    <svg
+      class={`animate-spin ${sizeClass} text-kita-400`}
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}
+
+// Progress bar
+interface ProgressProps {
+  value: number;
+  label: string;
+}
+
+export function Progress({ value, label }: ProgressProps) {
+  return (
+    <div class="mb-2 last:mb-0">
+      <div class="flex justify-between text-xs mb-1">
+        <span class="text-stone-400" safe>
+          {label}
+        </span>
+        <span class="text-stone-300">{value}%</span>
+      </div>
+      <div class="h-1.5 bg-stone-800 rounded-full overflow-hidden">
+        <div
+          class="h-full bg-gradient-to-r from-kita-500 to-kita-400 rounded-full transition-all duration-700 ease-out"
+          style={`width: ${value}%`}
+        />
+      </div>
+    </div>
+  );
+}
+
+// Toast notification
+interface ToastProps {
+  message: string;
+  type?: 'success' | 'error' | 'info';
+}
+
+export function Toast({ message, type = 'info' }: ToastProps) {
+  const colorClass = {
+    success: 'bg-emerald-500/20 border-emerald-500/50 text-emerald-300',
+    error: 'bg-red-500/20 border-red-500/50 text-red-300',
+    info: 'bg-kita-500/20 border-kita-500/50 text-kita-300'
+  }[type];
+
+  return (
+    <div class={`px-4 py-2 rounded-lg border text-sm ${colorClass}`} safe>
+      {message}
+    </div>
+  );
+}
diff --git a/examples/fastify-htmx/src/templates/pages/Dashboard.tsx b/examples/fastify-htmx/src/templates/pages/Dashboard.tsx
new file mode 100644
index 000000000..81b66840b
--- /dev/null
+++ b/examples/fastify-htmx/src/templates/pages/Dashboard.tsx
@@ -0,0 +1,205 @@
+import { TodoItem } from '../../api/todos';
+import { store } from '../../store';
+import { Card, Progress, Spinner, StatSkeleton } from '../components';
+import { Layout } from '../Layout';
+
+export function Dashboard() {
+  return (
+    <Layout title="KitaJS + HTMX Demo">
+      <div class="flex flex-col max-w-5xl mx-auto w-full">
+        {/* Header */}
+        <header class="flex items-center justify-between mb-6 flex-shrink-0">
+          <div class="flex items-center gap-3">
+            <img src="https://kitajs.org/logo.svg" alt="KitaJS Logo" class="w-10 h-10" />
+            <div>
+              <h1 class="text-xl font-bold bg-gradient-to-r from-kita-400 to-kita-300 bg-clip-text text-transparent">
+                KitaJS Html + HTMX
+              </h1>
+              <p class="text-xs text-stone-500">Interactive Server-Side Rendering</p>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <a
+              href="https://github.com/kitajs/html"
+              class="text-xs text-stone-400 hover:text-kita-400 transition-colors"
+            >
+              GitHub
+            </a>
+            <div class="text-xs text-stone-500 bg-stone-900/50 px-3 py-1.5 rounded-full border border-stone-800">
+              No page reloads
+            </div>
+          </div>
+        </header>
+
+        {/* Stats Row - Load on page load with hx-trigger="load" */}
+        <section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <div hx-get="/api/stats/visitors" hx-trigger="load" hx-swap="outerHTML">
+            <StatSkeleton />
+          </div>
+          <div hx-get="/api/stats/requests" hx-trigger="load" hx-swap="outerHTML">
+            <StatSkeleton />
+          </div>
+          <div hx-get="/api/stats/uptime" hx-trigger="load" hx-swap="outerHTML">
+            <StatSkeleton />
+          </div>
+          <div hx-get="/api/stats/memory" hx-trigger="load" hx-swap="outerHTML">
+            <StatSkeleton />
+          </div>
+        </section>
+
+        {/* Main Content */}
+        <section class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+          {/* Click Counter */}
+          <Card title="Click Counter" icon="🖱️">
+            <div class="text-center py-4">
+              <div id="click-count" class="text-4xl font-bold text-kita-400 mb-4">
+                {store.clickCount}
+              </div>
+              <button
+                hx-post="/api/click"
+                hx-target="#click-count"
+                hx-swap="innerHTML"
+                class="bg-kita-500 hover:bg-kita-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+              >
+                Click Me!
+              </button>
+            </div>
+          </Card>
+
+          {/* Todo List */}
+          <Card title="Todo List" icon="📝">
+            <form
+              hx-post="/api/todos"
+              hx-target="#todo-list"
+              hx-swap="beforeend"
+              {...{ 'hx-on::after-request': 'this.reset()' }}
+              class="flex gap-2 mb-3"
+            >
+              <input
+                type="text"
+                name="text"
+                placeholder="Add a task..."
+                required
+                class="flex-1 bg-stone-800 border border-stone-700 rounded-lg px-3 py-1.5 text-sm text-stone-200 placeholder-stone-500 focus:outline-none focus:border-kita-500"
+              />
+              <button
+                type="submit"
+                class="bg-kita-500 hover:bg-kita-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+              >
+                Add
+              </button>
+            </form>
+            <div id="todo-list" class="space-y-1 max-h-32 overflow-y-auto">
+              {store.todos.map((todo) => (
+                <TodoItem {...todo} />
+              ))}
+            </div>
+          </Card>
+
+          {/* Server Time */}
+          <Card title="Server Time" icon="⏰">
+            <div class="text-center py-4">
+              <div
+                hx-get="/api/time"
+                hx-trigger="load, every 1s"
+                hx-swap="innerHTML"
+                class="text-2xl font-mono text-kita-300"
+              >
+                Loading...
+              </div>
+              <p class="text-xs text-stone-500 mt-2">
+                Updates every second via HTMX polling
+              </p>
+            </div>
+          </Card>
+        </section>
+
+        {/* Bottom Section */}
+        <section class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+          {/* System Metrics */}
+          <Card title="System Metrics" icon="📊">
+            <div
+              hx-get="/api/metrics"
+              hx-trigger="load, every 3s"
+              hx-swap="morph:innerHTML"
+              hx-indicator="#metrics-indicator"
+            >
+              <div class="space-y-3">
+                <Progress label="Loading..." value={0} />
+              </div>
+            </div>
+            <div
+              id="metrics-indicator"
+              class="htmx-indicator text-xs text-stone-500 mt-2"
+            >
+              <Spinner size="sm" /> Refreshing...
+            </div>
+          </Card>
+
+          {/* Notifications */}
+          <Card title="Notifications" icon="🔔">
+            <div class="space-y-2 mb-3 max-h-20 overflow-y-auto" id="notifications">
+              <p class="text-xs text-stone-500">Click to trigger notifications</p>
+            </div>
+            <div class="flex gap-2">
+              <button
+                hx-post="/api/notify?type=success"
+                hx-target="#notifications"
+                hx-swap="afterbegin"
+                class="flex-1 bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-300 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+              >
+                Success
+              </button>
+              <button
+                hx-post="/api/notify?type=error"
+                hx-target="#notifications"
+                hx-swap="afterbegin"
+                class="flex-1 bg-red-500/20 hover:bg-red-500/30 text-red-300 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+              >
+                Error
+              </button>
+              <button
+                hx-post="/api/notify?type=info"
+                hx-target="#notifications"
+                hx-swap="afterbegin"
+                class="flex-1 bg-kita-500/20 hover:bg-kita-500/30 text-kita-300 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+              >
+                Info
+              </button>
+            </div>
+          </Card>
+        </section>
+
+        {/* Footer */}
+        <footer class="text-center flex-shrink-0">
+          <p class="text-xs text-stone-600">
+            Each component uses HTMX for seamless server interactions without JavaScript
+          </p>
+          <p class="text-xs text-stone-500 mt-1">
+            Built with{' '}
+            <a
+              href="https://kitajs.org"
+              class="text-kita-400 hover:text-kita-300 transition-colors"
+            >
+              KitaJS
+            </a>{' '}
+            +{' '}
+            <a
+              href="https://htmx.org"
+              class="text-kita-400 hover:text-kita-300 transition-colors"
+            >
+              HTMX
+            </a>{' '}
+            +{' '}
+            <a
+              href="https://fastify.dev"
+              class="text-kita-400 hover:text-kita-300 transition-colors"
+            >
+              Fastify
+            </a>
+          </p>
+        </footer>
+      </div>
+    </Layout>
+  );
+}
diff --git a/examples/fastify-htmx/tsconfig.json b/examples/fastify-htmx/tsconfig.json
new file mode 100644
index 000000000..9290e94d3
--- /dev/null
+++ b/examples/fastify-htmx/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html",
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
+  },
+  "include": ["src"]
+}
diff --git a/examples/http-server/package.json b/examples/http-server/package.json
index 49ff86812..7d61ed63b 100644
--- a/examples/http-server/package.json
+++ b/examples/http-server/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "tsx --watch src/index.tsx",
+    "start": "tsx --watch src/server.ts",
     "test": "xss-scan"
   },
   "dependencies": {
diff --git a/examples/http-server/src/index.tsx b/examples/http-server/src/index.tsx
deleted file mode 100644
index bb4d1924a..000000000
--- a/examples/http-server/src/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createServer } from './server';
-import { Dashboard } from './templates/pages/Dashboard';
-
-// Start the server with the Dashboard page
-createServer(Dashboard, 1228);
diff --git a/examples/http-server/src/server.ts b/examples/http-server/src/server.ts
index c49f6b9c4..5ebb8b15d 100644
--- a/examples/http-server/src/server.ts
+++ b/examples/http-server/src/server.ts
@@ -1,33 +1,28 @@
 import { renderToStream } from '@kitajs/html/suspense';
 import http from 'node:http';
+import { Dashboard } from './templates/pages/Dashboard';
 
-type PageRenderer = (rid: number | string) => JSX.Element;
+const server = http.createServer((req, res) => {
+  const url = new URL(req.url || '/', `http://${req.headers.host}`);
 
-export function createServer(renderPage: PageRenderer, port = 1228) {
-  const server = http.createServer((req, res) => {
-    const url = new URL(req.url || '/', `http://${req.headers.host}`);
+  // Only serve the index page
+  if (url.pathname !== '/' && url.pathname !== '/index.html') {
+    res.statusCode = 404;
+    res.end('Not Found');
+    return;
+  }
 
-    // Only serve the index page
-    if (url.pathname !== '/' && url.pathname !== '/index.html') {
-      res.statusCode = 404;
-      res.end('Not Found');
-      return;
-    }
+  // Set proper content type with charset to prevent UTF-7 XSS attacks
+  res.setHeader('Content-Type', 'text/html; charset=utf-8');
 
-    // Set proper content type with charset to prevent UTF-7 XSS attacks
-    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+  // Create the HTML stream from the page renderer
+  const htmlStream = renderToStream(Dashboard);
 
-    // Create the HTML stream from the page renderer
-    const htmlStream = renderToStream(renderPage);
+  // Pipe the stream to the response
+  htmlStream.pipe(res);
+});
 
-    // Pipe the stream to the response
-    htmlStream.pipe(res);
-  });
-
-  server.listen(port, () => {
-    console.log(`Server running at http://localhost:${port}`);
-    console.log('Watch the page load progressively with streaming HTML!');
-  });
-
-  return server;
-}
+const port = Number(process.env.PORT) || 32012;
+server.listen(port, () => {
+  console.log(`🚀 Server running at http://localhost:${port}`);
+});
diff --git a/examples/http-server/src/templates/Layout.tsx b/examples/http-server/src/templates/Layout.tsx
index 89fc33511..3670bea2a 100644
--- a/examples/http-server/src/templates/Layout.tsx
+++ b/examples/http-server/src/templates/Layout.tsx
@@ -6,62 +6,58 @@ interface LayoutProps {
 
 export function Layout({ title, children }: PropsWithChildren<LayoutProps>) {
   return (
-    <>
-      {'<!doctype html>'}
+    '<!doctype html>' +
+    (
       <html lang="en">
         <head>
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <title>{title}</title>
+          <meta name="theme-color" content="#1B1B1F" />
+          <title safe>{title}</title>
+          <link rel="icon" href="https://kitajs.org/favicon.svg" type="image/svg+xml" />
           <script src="https://cdn.tailwindcss.com"></script>
           <script>
             {`
               tailwind.config = {
-                darkMode: 'class',
                 theme: {
                   extend: {
-                    animation: {
-                      'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    colors: {
+                      kita: {
+                        50: '#fdf5f4',
+                        100: '#fbe9e7',
+                        200: '#e4c8c5',
+                        300: '#d4a49e',
+                        400: '#bd695e',
+                        500: '#ad4336',
+                        600: '#9a3a2f',
+                        700: '#7d2f26',
+                        800: '#662722',
+                        900: '#54231f',
+                      }
                     }
                   }
                 }
               }
             `}
           </script>
+          <style>
+            {`
+              @keyframes shimmer {
+                0% { background-position: 200% 0; }
+                100% { background-position: -200% 0; }
+              }
+              .skeleton {
+                background: linear-gradient(90deg, rgba(173,67,54,0.1) 0%, rgba(173,67,54,0.2) 50%, rgba(173,67,54,0.1) 100%);
+                background-size: 200% 100%;
+                animation: shimmer 1.5s infinite;
+              }
+            `}
+          </style>
         </head>
-        <body class="bg-slate-900 min-h-screen text-slate-200">
-          <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-            <header class="text-center mb-12 p-8 bg-slate-800/50 rounded-2xl border border-slate-700/50 backdrop-blur">
-              <div class="flex items-center justify-center gap-4 mb-3">
-                <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center font-bold text-xl text-white shadow-lg shadow-indigo-500/25">
-                  K
-                </div>
-                <h1 class="text-3xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
-                  KitaJS Streaming Demo
-                </h1>
-              </div>
-              <p class="text-slate-400 text-lg">
-                Watch components load progressively with Suspense streaming
-              </p>
-            </header>
-
-            <main>{children}</main>
-
-            <footer class="text-center mt-12 py-6 text-slate-500 text-sm">
-              <p>
-                Built with{' '}
-                <a
-                  href="https://github.com/kitajs/html"
-                  class="text-purple-400 hover:text-purple-300 transition-colors"
-                >
-                  @kitajs/html
-                </a>{' '}
-                - The fastest JSX runtime for server-side rendering
-              </p>
-            </footer>
-          </div>
+        <body class="bg-stone-950 min-h-screen text-stone-200 p-6 overflow-y-auto">
+          {children}
         </body>
       </html>
-    </>
+    )
   );
 }
diff --git a/examples/http-server/src/templates/components.tsx b/examples/http-server/src/templates/components.tsx
index 4370a79fc..eba631a8e 100644
--- a/examples/http-server/src/templates/components.tsx
+++ b/examples/http-server/src/templates/components.tsx
@@ -3,34 +3,26 @@ import type { PropsWithChildren } from '@kitajs/html';
 // Card component
 interface CardProps {
   title?: string;
-  subtitle?: string;
   icon?: string;
-  iconBg?: string;
 }
 
-export function Card({
-  title,
-  subtitle,
-  icon,
-  iconBg = 'from-indigo-500 to-purple-600',
-  children
-}: PropsWithChildren<CardProps>) {
+export function Card({ title, icon, children }: PropsWithChildren<CardProps>) {
   return (
-    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 hover:bg-slate-800/70 transition-all duration-200 hover:shadow-xl hover:shadow-slate-900/50 hover:-translate-y-0.5">
+    <div class="bg-stone-900/50 border border-stone-800 rounded-xl p-4 h-full">
       {(title || icon) && (
-        <div class="flex items-center gap-3 mb-4">
+        <div class="flex items-center gap-2 mb-3">
           {icon && (
             <div
-              class={`w-10 h-10 bg-gradient-to-br ${iconBg} rounded-xl flex items-center justify-center text-lg shadow-lg`}
+              class="w-8 h-8 bg-gradient-to-br from-kita-500 to-kita-400 rounded-lg flex items-center justify-center text-sm"
+              safe
             >
               {icon}
             </div>
           )}
           {title && (
-            <div>
-              <h3 class="font-semibold text-white">{title}</h3>
-              {subtitle && <p class="text-sm text-slate-400">{subtitle}</p>}
-            </div>
+            <h3 class="font-semibold text-stone-100 text-sm" safe>
+              {title}
+            </h3>
           )}
         </div>
       )}
@@ -39,70 +31,47 @@ export function Card({
   );
 }
 
-// Loading skeleton for cards
-export function CardSkeleton() {
+// Card skeleton
+export function CardSkeleton({ height = 'h-32' }: { height?: string }) {
   return (
-    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 animate-pulse">
-      <div class="flex items-center gap-3 mb-4">
-        <div class="w-10 h-10 bg-slate-700 rounded-xl" />
-        <div class="space-y-2">
-          <div class="h-4 w-24 bg-slate-700 rounded" />
-          <div class="h-3 w-16 bg-slate-700/50 rounded" />
-        </div>
+    <div class={`bg-stone-900/50 border border-stone-800 rounded-xl p-4 ${height}`}>
+      <div class="flex items-center gap-2 mb-3">
+        <div class="w-8 h-8 skeleton rounded-lg" />
+        <div class="h-4 w-20 skeleton rounded" />
       </div>
-      <div class="space-y-3">
-        <div class="h-3 bg-slate-700 rounded w-full" />
-        <div class="h-3 bg-slate-700 rounded w-4/5" />
-        <div class="h-3 bg-slate-700 rounded w-3/5" />
+      <div class="space-y-2">
+        <div class="h-3 skeleton rounded w-full" />
+        <div class="h-3 skeleton rounded w-3/4" />
       </div>
     </div>
   );
 }
 
-// Stat card component
+// Stat card
 interface StatCardProps {
   label: string;
   value: string;
   change?: string;
-  changeType?: 'positive' | 'negative' | 'neutral';
-  icon?: string;
-  iconBg?: string;
+  positive?: boolean;
 }
 
-export function StatCard({
-  label,
-  value,
-  change,
-  changeType = 'neutral',
-  icon,
-  iconBg = 'from-indigo-500 to-purple-600'
-}: StatCardProps) {
-  const changeColors = {
-    positive: 'bg-emerald-500/20 text-emerald-400',
-    negative: 'bg-red-500/20 text-red-400',
-    neutral: 'bg-slate-500/20 text-slate-400'
-  };
-
+export function StatCard({ label, value, change, positive }: StatCardProps) {
   return (
-    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6">
-      <div class="flex items-center justify-between mb-4">
-        {icon && (
-          <div
-            class={`w-12 h-12 bg-gradient-to-br ${iconBg} rounded-xl flex items-center justify-center text-xl shadow-lg`}
-          >
-            {icon}
-          </div>
-        )}
-        {change && (
-          <span
-            class={`px-2.5 py-1 rounded-full text-xs font-medium ${changeColors[changeType]}`}
-          >
-            {change}
-          </span>
-        )}
+    <div class="bg-stone-900/50 border border-stone-800 rounded-xl p-4">
+      <div class="text-xs text-stone-400 mb-1" safe>
+        {label}
       </div>
-      <div class="text-3xl font-bold text-white mb-1">{value}</div>
-      <div class="text-sm text-slate-400">{label}</div>
+      <div class="text-2xl font-bold text-stone-100" safe>
+        {value}
+      </div>
+      {change && (
+        <div
+          class={`text-xs mt-1 ${positive ? 'text-emerald-400' : 'text-red-400'}`}
+          safe
+        >
+          {change}
+        </div>
+      )}
     </div>
   );
 }
@@ -110,172 +79,104 @@ export function StatCard({
 // Stat skeleton
 export function StatSkeleton() {
   return (
-    <div class="bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 animate-pulse">
-      <div class="flex items-center justify-between mb-4">
-        <div class="w-12 h-12 bg-slate-700 rounded-xl" />
-        <div class="w-16 h-6 bg-slate-700 rounded-full" />
-      </div>
-      <div class="h-8 w-20 bg-slate-700 rounded mb-2" />
-      <div class="h-4 w-24 bg-slate-700/50 rounded" />
+    <div class="bg-stone-900/50 border border-stone-800 rounded-xl p-4">
+      <div class="h-3 w-16 skeleton rounded mb-2" />
+      <div class="h-7 w-20 skeleton rounded mb-1" />
+      <div class="h-3 w-12 skeleton rounded" />
     </div>
   );
 }
 
-// Table component
-interface TableProps {
-  headers: string[];
+// List item
+interface ListItemProps {
+  primary: string;
+  secondary?: string;
+  badge?: string;
+  badgeColor?: string;
 }
 
-export function Table({ headers, children }: PropsWithChildren<TableProps>) {
+export function ListItem({
+  primary,
+  secondary,
+  badge,
+  badgeColor = 'bg-kita-500/20 text-kita-300'
+}: ListItemProps) {
   return (
-    <div class="overflow-x-auto">
-      <table class="w-full">
-        <thead>
-          <tr class="border-b border-slate-700/50">
-            {headers.map((header) => (
-              <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
-                {header}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-slate-700/30">{children}</tbody>
-      </table>
+    <div class="flex items-center justify-between py-2 border-b border-stone-800/50 last:border-0">
+      <div>
+        <div class="text-sm text-stone-200" safe>
+          {primary}
+        </div>
+        {secondary && (
+          <div class="text-xs text-stone-500" safe>
+            {secondary}
+          </div>
+        )}
+      </div>
+      {badge && (
+        <span class={`px-2 py-0.5 rounded-full text-xs ${badgeColor}`} safe>
+          {badge}
+        </span>
+      )}
     </div>
   );
 }
 
-// Table skeleton
-export function TableSkeleton({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {
+// List skeleton
+export function ListSkeleton({ items = 3 }: { items?: number }) {
   return (
-    <div class="animate-pulse">
-      <div class="border-b border-slate-700/50 py-3 flex gap-4">
-        {Array.from({ length: cols }).map(() => (
-          <div class="h-3 bg-slate-700 rounded flex-1" />
-        ))}
-      </div>
-      {Array.from({ length: rows }).map(() => (
-        <div class="border-b border-slate-700/30 py-4 flex gap-4">
-          {Array.from({ length: cols }).map(() => (
-            <div class="h-4 bg-slate-700/50 rounded flex-1" />
-          ))}
+    <div class="space-y-1">
+      {Array.from({ length: items }).map(() => (
+        <div class="flex items-center justify-between py-2 border-b border-stone-800/50 last:border-0">
+          <div class="space-y-1">
+            <div class="h-4 w-32 skeleton rounded" />
+            <div class="h-3 w-20 skeleton rounded" />
+          </div>
+          <div class="h-5 w-16 skeleton rounded-full" />
         </div>
       ))}
     </div>
   );
 }
 
-// Badge component
-interface BadgeProps {
-  variant?: 'success' | 'warning' | 'info' | 'error';
-}
-
-export function Badge({ variant = 'info', children }: PropsWithChildren<BadgeProps>) {
-  const variants = {
-    success: 'bg-emerald-500/20 text-emerald-400',
-    warning: 'bg-amber-500/20 text-amber-400',
-    info: 'bg-blue-500/20 text-blue-400',
-    error: 'bg-red-500/20 text-red-400'
-  };
-
-  return (
-    <span class={`px-2.5 py-1 rounded-full text-xs font-medium ${variants[variant]}`}>
-      {children}
-    </span>
-  );
-}
-
-// Avatar component
-interface AvatarProps {
-  name: string;
-  color?: string;
-}
-
-export function Avatar({ name, color = 'from-indigo-500 to-purple-600' }: AvatarProps) {
-  const initials = name
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2);
-
-  return (
-    <div
-      class={`w-8 h-8 bg-gradient-to-br ${color} rounded-full flex items-center justify-center text-xs font-semibold text-white`}
-    >
-      {initials}
-    </div>
-  );
-}
-
 // Progress bar
 interface ProgressProps {
   value: number;
-  color?: string;
-}
-
-export function Progress({
-  value,
-  color = 'from-indigo-500 to-purple-600'
-}: ProgressProps) {
-  return (
-    <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
-      <div
-        class={`h-full bg-gradient-to-r ${color} rounded-full transition-all duration-500`}
-        style={`width: ${Math.min(100, Math.max(0, value))}%`}
-      />
-    </div>
-  );
-}
-
-// Activity item
-interface ActivityItemProps {
-  avatar: string;
-  avatarColor?: string;
-  text: string;
-  time: string;
+  label: string;
 }
 
-export function ActivityItem({ avatar, avatarColor, text, time }: ActivityItemProps) {
+export function Progress({ value, label }: ProgressProps) {
   return (
-    <div class="flex items-start gap-3 py-3 border-b border-slate-700/30 last:border-0">
-      <Avatar name={avatar} color={avatarColor} />
-      <div class="flex-1 min-w-0">
-        <p class="text-sm text-slate-200">{text}</p>
-        <p class="text-xs text-slate-500 mt-0.5">{time}</p>
+    <div class="mb-2 last:mb-0">
+      <div class="flex justify-between text-xs mb-1">
+        <span class="text-stone-400" safe>
+          {label}
+        </span>
+        <span class="text-stone-300">{value}%</span>
+      </div>
+      <div class="h-1.5 bg-stone-800 rounded-full overflow-hidden">
+        <div
+          class="h-full bg-gradient-to-r from-kita-500 to-kita-400 rounded-full transition-all duration-700 ease-out"
+          style={`width: ${value}%`}
+        />
       </div>
     </div>
   );
 }
 
-// Activity skeleton
-export function ActivitySkeleton({ items = 4 }: { items?: number }) {
+// Progress skeleton
+export function ProgressSkeleton({ items = 3 }: { items?: number }) {
   return (
-    <div class="animate-pulse space-y-1">
+    <div class="space-y-3">
       {Array.from({ length: items }).map(() => (
-        <div class="flex items-start gap-3 py-3 border-b border-slate-700/30 last:border-0">
-          <div class="w-8 h-8 bg-slate-700 rounded-full" />
-          <div class="flex-1 space-y-2">
-            <div class="h-4 bg-slate-700 rounded w-3/4" />
-            <div class="h-3 bg-slate-700/50 rounded w-1/4" />
+        <div>
+          <div class="flex justify-between mb-1">
+            <div class="h-3 w-16 skeleton rounded" />
+            <div class="h-3 w-8 skeleton rounded" />
           </div>
+          <div class="h-1.5 skeleton rounded-full" />
         </div>
       ))}
     </div>
   );
 }
-
-// Section title
-interface SectionTitleProps {
-  title: string;
-  subtitle?: string;
-}
-
-export function SectionTitle({ title, subtitle }: SectionTitleProps) {
-  return (
-    <div class="mb-6">
-      <h2 class="text-xl font-bold text-white">{title}</h2>
-      {subtitle && <p class="text-sm text-slate-400 mt-1">{subtitle}</p>}
-    </div>
-  );
-}
diff --git a/examples/http-server/src/templates/pages/Dashboard.tsx b/examples/http-server/src/templates/pages/Dashboard.tsx
index 53bcd29c4..95e37a54a 100644
--- a/examples/http-server/src/templates/pages/Dashboard.tsx
+++ b/examples/http-server/src/templates/pages/Dashboard.tsx
@@ -1,445 +1,212 @@
 import { Suspense } from '@kitajs/html/suspense';
 import { setTimeout } from 'node:timers/promises';
 import {
-  ActivityItem,
-  ActivitySkeleton,
-  Badge,
   Card,
+  ListItem,
+  ListSkeleton,
   Progress,
-  SectionTitle,
+  ProgressSkeleton,
   StatCard,
-  StatSkeleton,
-  Table,
-  TableSkeleton
+  StatSkeleton
 } from '../components';
 import { Layout } from '../Layout';
 
-// Individual stat fetching functions with staggered delays
-async function fetchRevenueStat() {
-  await setTimeout(400);
-  return {
-    label: 'Total Revenue',
-    value: '$45,231',
-    change: '+12.5%',
-    changeType: 'positive' as const,
-    icon: '💰',
-    iconBg: 'from-emerald-500 to-teal-600'
-  };
-}
+// Random delay helper (base +/- variance)
+const randomDelay = (base: number, variance = 300) =>
+  base + Math.floor(Math.random() * variance * 2) - variance;
 
-async function fetchUsersStat() {
-  await setTimeout(1600);
-  return {
-    label: 'Active Users',
-    value: '2,345',
-    change: '+8.2%',
-    changeType: 'positive' as const,
-    icon: '👥',
-    iconBg: 'from-blue-500 to-cyan-600'
-  };
+// Individual stats with randomized timing
+async function fetchRevenue() {
+  await setTimeout(randomDelay(400, 200));
+  return { label: 'Revenue', value: '$12.4k', change: '+14%', positive: true };
 }
 
-async function fetchConversionStat() {
-  await setTimeout(1200);
-  return {
-    label: 'Conversion Rate',
-    value: '3.24%',
-    change: '-0.4%',
-    changeType: 'negative' as const,
-    icon: '📈',
-    iconBg: 'from-purple-500 to-pink-600'
-  };
+async function fetchUsers() {
+  await setTimeout(randomDelay(500, 250));
+  return { label: 'Users', value: '1,429', change: '+7%', positive: true };
 }
 
-async function fetchOrderValueStat() {
-  await setTimeout(800);
-  return {
-    label: 'Avg. Order Value',
-    value: '$89.50',
-    change: '+5.1%',
-    changeType: 'positive' as const,
-    icon: '🛒',
-    iconBg: 'from-orange-500 to-amber-600'
-  };
+async function fetchOrders() {
+  await setTimeout(randomDelay(600, 300));
+  return { label: 'Orders', value: '284', change: '-3%', positive: false };
 }
 
-async function fetchRecentOrders() {
-  await setTimeout(1500);
-  return [
-    {
-      id: '#ORD-7892',
-      customer: 'Sarah Wilson',
-      product: 'Pro Subscription',
-      amount: '$299.00',
-      status: 'completed'
-    },
-    {
-      id: '#ORD-7891',
-      customer: 'Mike Johnson',
-      product: 'Team Plan',
-      amount: '$599.00',
-      status: 'processing'
-    },
-    {
-      id: '#ORD-7890',
-      customer: 'Emily Davis',
-      product: 'Enterprise License',
-      amount: '$1,299.00',
-      status: 'completed'
-    },
-    {
-      id: '#ORD-7889',
-      customer: 'Alex Chen',
-      product: 'Starter Pack',
-      amount: '$49.00',
-      status: 'pending'
-    },
-    {
-      id: '#ORD-7888',
-      customer: 'Lisa Anderson',
-      product: 'Pro Subscription',
-      amount: '$299.00',
-      status: 'completed'
-    }
-  ];
+async function fetchConversion() {
+  await setTimeout(randomDelay(700, 350));
+  return { label: 'Conversion', value: '3.2%', change: '+0.8%', positive: true };
 }
 
-async function fetchActivity() {
-  await setTimeout(2000);
+// Grouped data fetching with randomized timing
+async function fetchRecentActivity() {
+  await setTimeout(randomDelay(1400, 400));
   return [
     {
-      avatar: 'John Doe',
-      avatarColor: 'from-blue-500 to-cyan-600',
-      text: 'Completed purchase of Enterprise License',
-      time: '2 minutes ago'
-    },
-    {
-      avatar: 'Sarah Miller',
-      avatarColor: 'from-purple-500 to-pink-600',
-      text: 'Upgraded to Pro subscription',
-      time: '15 minutes ago'
+      primary: 'New order #1234',
+      secondary: '2 min ago',
+      badge: '$299',
+      badgeColor: 'bg-emerald-500/20 text-emerald-400'
     },
     {
-      avatar: 'Tom Wilson',
-      avatarColor: 'from-emerald-500 to-teal-600',
-      text: 'Left a 5-star review',
-      time: '1 hour ago'
+      primary: 'User signup',
+      secondary: '5 min ago',
+      badge: 'New',
+      badgeColor: 'bg-kita-500/20 text-kita-300'
     },
     {
-      avatar: 'Emma Brown',
-      avatarColor: 'from-orange-500 to-amber-600',
-      text: 'Requested support ticket #1234',
-      time: '2 hours ago'
-    },
-    {
-      avatar: 'Chris Lee',
-      avatarColor: 'from-rose-500 to-red-600',
-      text: 'Signed up for newsletter',
-      time: '3 hours ago'
+      primary: 'Payment received',
+      secondary: '12 min ago',
+      badge: '$149',
+      badgeColor: 'bg-emerald-500/20 text-emerald-400'
     }
   ];
 }
 
-async function fetchTopProducts() {
-  await setTimeout(2500);
+async function fetchSystemStatus() {
+  await setTimeout(randomDelay(1600, 400));
   return [
-    { name: 'Pro Subscription', sales: 1234, revenue: '$368,766', progress: 85 },
-    { name: 'Team Plan', sales: 856, revenue: '$512,844', progress: 72 },
-    { name: 'Enterprise License', sales: 423, revenue: '$549,477', progress: 58 },
-    { name: 'Starter Pack', sales: 2341, revenue: '$114,709', progress: 45 }
+    { label: 'CPU', value: 45 },
+    { label: 'Memory', value: 72 },
+    { label: 'Storage', value: 28 }
   ];
 }
 
-async function fetchServerMetrics() {
-  await setTimeout(3000);
-  return {
-    cpu: 67,
-    memory: 82,
-    disk: 45,
-    network: 23
-  };
-}
-
-// Individual async stat components - each loads independently
+// Individual stat components
 async function RevenueStat() {
-  const stat = await fetchRevenueStat();
-  return <StatCard {...stat} />;
+  const data = await fetchRevenue();
+  return <StatCard {...data} />;
 }
 
 async function UsersStat() {
-  const stat = await fetchUsersStat();
-  return <StatCard {...stat} />;
-}
-
-async function ConversionStat() {
-  const stat = await fetchConversionStat();
-  return <StatCard {...stat} />;
+  const data = await fetchUsers();
+  return <StatCard {...data} />;
 }
 
-async function OrderValueStat() {
-  const stat = await fetchOrderValueStat();
-  return <StatCard {...stat} />;
+async function OrdersStat() {
+  const data = await fetchOrders();
+  return <StatCard {...data} />;
 }
 
-async function RecentOrdersSection() {
-  const orders = await fetchRecentOrders();
-  const statusBadge = {
-    completed: 'success' as const,
-    processing: 'info' as const,
-    pending: 'warning' as const
-  };
-
-  return (
-    <Card
-      title="Recent Orders"
-      subtitle="Latest transactions"
-      icon="📦"
-      iconBg="from-blue-500 to-cyan-600"
-    >
-      <Table headers={['Order ID', 'Customer', 'Product', 'Amount', 'Status']}>
-        {orders.map((order) => (
-          <tr class="hover:bg-slate-700/30 transition-colors">
-            <td class="px-4 py-3 text-sm font-mono text-slate-300">{order.id}</td>
-            <td class="px-4 py-3 text-sm text-white">{order.customer}</td>
-            <td class="px-4 py-3 text-sm text-slate-400">{order.product}</td>
-            <td class="px-4 py-3 text-sm font-semibold text-white">{order.amount}</td>
-            <td class="px-4 py-3">
-              <Badge variant={statusBadge[order.status as keyof typeof statusBadge]}>
-                {order.status}
-              </Badge>
-            </td>
-          </tr>
-        ))}
-      </Table>
-    </Card>
-  );
+async function ConversionStat() {
+  const data = await fetchConversion();
+  return <StatCard {...data} />;
 }
 
+// Grouped section components
 async function ActivitySection() {
-  const activities = await fetchActivity();
-
-  return (
-    <Card
-      title="Recent Activity"
-      subtitle="User actions"
-      icon="⚡"
-      iconBg="from-amber-500 to-orange-600"
-    >
-      <div class="space-y-1">
-        {activities.map((activity) => (
-          <ActivityItem {...activity} />
-        ))}
-      </div>
-    </Card>
-  );
-}
-
-async function TopProductsSection() {
-  const products = await fetchTopProducts();
-
+  const items = await fetchRecentActivity();
   return (
-    <Card
-      title="Top Products"
-      subtitle="Best sellers"
-      icon="🏆"
-      iconBg="from-purple-500 to-pink-600"
-    >
-      <div class="space-y-4">
-        {products.map((product) => (
-          <div>
-            <div class="flex items-center justify-between mb-2">
-              <span class="text-sm font-medium text-white">{product.name}</span>
-              <span class="text-sm text-slate-400">{product.sales} sales</span>
-            </div>
-            <Progress value={product.progress} color="from-purple-500 to-pink-500" />
-            <div class="text-xs text-slate-500 mt-1">{product.revenue} revenue</div>
-          </div>
-        ))}
-      </div>
+    <Card title="Recent Activity" icon="⚡">
+      {items.map((item) => (
+        <ListItem {...item} />
+      ))}
     </Card>
   );
 }
 
-async function ServerMetricsSection() {
-  const metrics = await fetchServerMetrics();
-
-  const metricItems = [
-    { label: 'CPU Usage', value: metrics.cpu, color: 'from-blue-500 to-cyan-500' },
-    { label: 'Memory', value: metrics.memory, color: 'from-purple-500 to-pink-500' },
-    { label: 'Disk Space', value: metrics.disk, color: 'from-emerald-500 to-teal-500' },
-    { label: 'Network', value: metrics.network, color: 'from-orange-500 to-amber-500' }
-  ];
-
+async function SystemSection() {
+  const metrics = await fetchSystemStatus();
   return (
-    <Card
-      title="Server Metrics"
-      subtitle="Real-time status"
-      icon="🖥️"
-      iconBg="from-emerald-500 to-teal-600"
-    >
-      <div class="space-y-4">
-        {metricItems.map((metric) => (
-          <div>
-            <div class="flex items-center justify-between mb-2">
-              <span class="text-sm font-medium text-white">{metric.label}</span>
-              <span class="text-sm font-semibold text-white">{metric.value}%</span>
-            </div>
-            <Progress value={metric.value} color={metric.color} />
-          </div>
-        ))}
-      </div>
+    <Card title="System Status" icon="📊">
+      {metrics.map((m) => (
+        <Progress label={m.label} value={m.value} />
+      ))}
     </Card>
   );
 }
 
-// Main Dashboard component
+// Main Dashboard
 export function Dashboard(rid: number | string) {
   return (
-    <Layout title="Dashboard - KitaJS Streaming Demo">
-      <div class="space-y-8">
-        {/* Stats Section - each card loads independently */}
-        <section>
-          <SectionTitle
-            title="Overview"
-            subtitle="Key metrics loading with streaming - watch them appear one by one!"
-          />
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <Suspense rid={rid} fallback={<StatSkeleton />}>
-              <RevenueStat />
-            </Suspense>
-            <Suspense rid={rid} fallback={<StatSkeleton />}>
-              <UsersStat />
-            </Suspense>
-            <Suspense rid={rid} fallback={<StatSkeleton />}>
-              <ConversionStat />
-            </Suspense>
-            <Suspense rid={rid} fallback={<StatSkeleton />}>
-              <OrderValueStat />
-            </Suspense>
+    <Layout title="KitaJS Streaming Demo">
+      <div class="flex flex-col max-w-5xl mx-auto w-full">
+        {/* Header */}
+        <header class="flex items-center justify-between mb-6 flex-shrink-0">
+          <div class="flex items-center gap-3">
+            <img src="https://kitajs.org/logo.svg" alt="KitaJS Logo" class="w-10 h-10" />
+            <div>
+              <h1 class="text-xl font-bold bg-gradient-to-r from-kita-400 to-kita-300 bg-clip-text text-transparent">
+                KitaJS Html
+              </h1>
+              <p class="text-xs text-stone-500">Suspense Streaming Demo</p>
+            </div>
           </div>
-        </section>
-
-        {/* Two column layout for orders and activity */}
-        <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Recent Orders - loads second (1500ms) */}
-          <div class="lg:col-span-2">
-            <Suspense
-              rid={rid}
-              fallback={
-                <Card
-                  title="Recent Orders"
-                  subtitle="Loading..."
-                  icon="📦"
-                  iconBg="from-blue-500 to-cyan-600"
-                >
-                  <TableSkeleton rows={5} cols={5} />
-                </Card>
-              }
+          <div class="flex items-center gap-3">
+            <a
+              href="https://github.com/kitajs/html"
+              class="text-xs text-stone-400 hover:text-kita-400 transition-colors"
             >
-              <RecentOrdersSection />
-            </Suspense>
+              GitHub
+            </a>
+            <div class="text-xs text-stone-500 bg-stone-900/50 px-3 py-1.5 rounded-full border border-stone-800">
+              Refresh to replay
+            </div>
           </div>
+        </header>
 
-          {/* Activity Feed - loads third (2000ms) */}
-          <div>
-            <Suspense
-              rid={rid}
-              fallback={
-                <Card
-                  title="Recent Activity"
-                  subtitle="Loading..."
-                  icon="⚡"
-                  iconBg="from-amber-500 to-orange-600"
-                >
-                  <ActivitySkeleton items={5} />
-                </Card>
-              }
-            >
-              <ActivitySection />
-            </Suspense>
-          </div>
+        {/* Stats Row - Individual Suspense for each */}
+        <section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <Suspense rid={rid} fallback={<StatSkeleton />}>
+            <RevenueStat />
+          </Suspense>
+          <Suspense rid={rid} fallback={<StatSkeleton />}>
+            <UsersStat />
+          </Suspense>
+          <Suspense rid={rid} fallback={<StatSkeleton />}>
+            <OrdersStat />
+          </Suspense>
+          <Suspense rid={rid} fallback={<StatSkeleton />}>
+            <ConversionStat />
+          </Suspense>
         </section>
 
-        {/* Bottom row - Products and Metrics */}
-        <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Top Products - loads fourth (2500ms) */}
+        {/* Content Grid - Grouped Suspense */}
+        <section class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-1 min-h-0">
           <Suspense
             rid={rid}
             fallback={
-              <Card
-                title="Top Products"
-                subtitle="Loading..."
-                icon="🏆"
-                iconBg="from-purple-500 to-pink-600"
-              >
-                <div class="animate-pulse space-y-4">
-                  {Array.from({ length: 4 }).map(() => (
-                    <div>
-                      <div class="flex justify-between mb-2">
-                        <div class="h-4 bg-slate-700 rounded w-1/3" />
-                        <div class="h-4 bg-slate-700 rounded w-16" />
-                      </div>
-                      <div class="h-2 bg-slate-700 rounded-full" />
-                      <div class="h-3 bg-slate-700/50 rounded w-20 mt-1" />
-                    </div>
-                  ))}
-                </div>
+              <Card title="Recent Activity" icon="⚡">
+                <ListSkeleton items={3} />
               </Card>
             }
           >
-            <TopProductsSection />
+            <ActivitySection />
           </Suspense>
 
-          {/* Server Metrics - loads last (3000ms) */}
           <Suspense
             rid={rid}
             fallback={
-              <Card
-                title="Server Metrics"
-                subtitle="Loading..."
-                icon="🖥️"
-                iconBg="from-emerald-500 to-teal-600"
-              >
-                <div class="animate-pulse space-y-4">
-                  {Array.from({ length: 4 }).map(() => (
-                    <div>
-                      <div class="flex justify-between mb-2">
-                        <div class="h-4 bg-slate-700 rounded w-1/4" />
-                        <div class="h-4 bg-slate-700 rounded w-12" />
-                      </div>
-                      <div class="h-2 bg-slate-700 rounded-full" />
-                    </div>
-                  ))}
-                </div>
+              <Card title="System Status" icon="📊">
+                <ProgressSkeleton items={3} />
               </Card>
             }
           >
-            <ServerMetricsSection />
+            <SystemSection />
           </Suspense>
         </section>
 
-        {/* Info banner */}
-        <section class="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 rounded-2xl p-6">
-          <div class="flex items-start gap-4">
-            <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-lg flex-shrink-0">
-              💡
-            </div>
-            <div>
-              <h3 class="font-semibold text-white mb-1">How Streaming Works</h3>
-              <p class="text-sm text-slate-400 leading-relaxed">
-                This demo shows two streaming patterns using{' '}
-                <code class="text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded">
-                  {'<Suspense>'}
-                </code>
-                : The <strong class="text-white">Overview stats</strong> load individually
-                (one Suspense per card) so you can see them appear one by one. The other
-                sections use <strong class="text-white">grouped loading</strong> (one
-                Suspense per section) for a cleaner UX. Refresh the page to see the
-                streaming effect again!
-              </p>
-            </div>
-          </div>
-        </section>
+        {/* Footer */}
+        <footer class="mt-6 text-center flex-shrink-0">
+          <p class="text-xs text-stone-600">
+            Each component loads independently with randomized timing - refresh to see
+            different patterns
+          </p>
+          <p class="text-xs text-stone-500 mt-1">
+            Built with{' '}
+            <a
+              href="https://kitajs.org"
+              class="text-kita-400 hover:text-kita-300 transition-colors"
+            >
+              KitaJS
+            </a>{' '}
+            +{' '}
+            <a
+              href="https://nodejs.org"
+              class="text-kita-400 hover:text-kita-300 transition-colors"
+            >
+              Node.js
+            </a>
+          </p>
+        </footer>
       </div>
     </Layout>
   );
diff --git a/packages/fastify-html-plugin/package.json b/packages/fastify-html-plugin/package.json
index 32b93487d..a806ede3e 100644
--- a/packages/fastify-html-plugin/package.json
+++ b/packages/fastify-html-plugin/package.json
@@ -25,15 +25,15 @@
     "test": "vitest --coverage --typecheck --run"
   },
   "dependencies": {
-    "fastify-plugin": "^5.1.0"
+    "fastify-plugin": "catalog:"
   },
   "devDependencies": {
-    "@fastify/formbody": "^8.0.2",
+    "@fastify/formbody": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
     "@typescript/native-preview": "catalog:",
     "@vitest/coverage-v8": "catalog:",
-    "fastify": "^5.7.1",
+    "fastify": "catalog:",
     "jsdom": "catalog:",
     "tslib": "catalog:",
     "typescript": "catalog:",
diff --git a/packages/html/test/suspense.test.tsx b/packages/html/test/suspense.test.tsx
index fe4226914..5e5a20063 100644
--- a/packages/html/test/suspense.test.tsx
+++ b/packages/html/test/suspense.test.tsx
@@ -18,6 +18,32 @@ function Throw(): string {
   throw new Error('test');
 }
 
+/**
+ * Parses HTTP chunked transfer encoding format and returns the decoded content. Format:
+ * <hex-size>\r\n<data>\r\n...0\r\n\r\n
+ */
+function parseChunkedResponse(data: string): string {
+  let result = '';
+  let pos = 0;
+
+  while (pos < data.length) {
+    const sizeEnd = data.indexOf('\r\n', pos);
+    if (sizeEnd === -1) break;
+
+    const size = parseInt(data.slice(pos, sizeEnd), 16);
+    if (size === 0) break;
+
+    const dataStart = sizeEnd + 2;
+    const dataEnd = data.indexOf('\r\n', dataStart);
+    if (dataEnd === -1) break;
+
+    result += data.slice(dataStart, dataEnd);
+    pos = dataEnd + 2;
+  }
+
+  return result;
+}
+
 // Detect leaks of pending promises
 afterEach(() => {
   expect(SUSPENSE_ROOT.requests.size).toBe(0);
@@ -25,17 +51,35 @@ afterEach(() => {
   // Reset suspense root
   SUSPENSE_ROOT.autoScript = true;
   SUSPENSE_ROOT.requestCounter = 1;
+  SUSPENSE_ROOT.chunkedEncoding = true;
   SUSPENSE_ROOT.requests.clear();
 });
 
 describe('Suspense', () => {
   test('Sync without suspense', async () => {
+    // Disable chunked encoding for this test to compare raw output
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(await text(renderToStream(() => <div />))).toBe(<div />);
 
     expect(await text(renderToStream(async () => <div />))).toBe(<div />);
   });
 
+  test('Sync without suspense with chunked encoding', async () => {
+    const raw = await text(renderToStream(() => <div />));
+    const html = parseChunkedResponse(raw);
+
+    expect(html).toBe(<div />);
+
+    const rawAsync = await text(renderToStream(async () => <div />));
+    const htmlAsync = parseChunkedResponse(rawAsync);
+
+    expect(htmlAsync).toBe(<div />);
+  });
+
   test('Suspense sync children', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -48,6 +92,8 @@ describe('Suspense', () => {
   });
 
   test('Suspense async children', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -75,6 +121,8 @@ describe('Suspense', () => {
   });
 
   test('Suspense async children & fallback', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -102,6 +150,8 @@ describe('Suspense', () => {
   });
 
   test('Suspense async fallback sync children', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -118,6 +168,8 @@ describe('Suspense', () => {
   });
 
   test('Multiple async renders cleanup', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     await Promise.all(
       Array.from({ length: 100 }, () => {
         return text(
@@ -151,6 +203,8 @@ describe('Suspense', () => {
   });
 
   test('Multiple sync renders cleanup', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     for (let i = 0; i < 10; i++) {
       expect(
         await text(
@@ -180,6 +234,8 @@ describe('Suspense', () => {
   });
 
   test('Multiple children', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -239,6 +295,8 @@ describe('Suspense', () => {
   });
 
   test('Concurrent renders', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const promises = [];
 
     for (const seconds of [9, 4, 7]) {
@@ -294,6 +352,8 @@ describe('Suspense', () => {
   });
 
   it('ensures autoScript works', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     // Sync does not needs autoScript
     expect(
       await text(
@@ -359,6 +419,8 @@ describe('Suspense', () => {
   });
 
   test('renderToStream', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const stream = renderToStream((r) => (
       <div>
         <Suspense rid={r} fallback={<div>2</div>}>
@@ -405,6 +467,8 @@ describe('Suspense', () => {
   });
 
   test('renderToStream without suspense', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const stream = renderToStream(() => '<div>not suspense</div>', 1227);
 
     expect(stream.readable).toBeTruthy();
@@ -419,6 +483,8 @@ describe('Suspense', () => {
   });
 
   it('tests suspense without children', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -430,6 +496,8 @@ describe('Suspense', () => {
   });
 
   it('works with async error handlers', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((r) => (
@@ -457,6 +525,8 @@ describe('Suspense', () => {
   });
 
   it('works with deep suspense calls', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((rid) => {
@@ -517,6 +587,8 @@ describe('Suspense', () => {
   });
 
   it('works with deep suspense calls resolving first', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     expect(
       await text(
         renderToStream((rid) => {
@@ -579,6 +651,8 @@ describe('Suspense', () => {
   });
 
   it('works with parallel deep suspense calls resolving first', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const html = await text(
       renderToStream((rid) => (
         <div>
@@ -738,6 +812,8 @@ describe('Suspense', () => {
   });
 
   it('Suspense works when children resolves first', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     async function Fallback() {
       for (let i = 0; i < 10; i++) {
         await setImmediate();
@@ -781,6 +857,8 @@ describe('Suspense', () => {
   });
 
   it('Suspense fails when children rejects first', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     async function Fallback(): Promise<string> {
       for (let i = 0; i < 10; i++) {
         await setImmediate();
@@ -814,6 +892,8 @@ describe('Suspense', () => {
 
 describe('Suspense errors', () => {
   it('Leaks if rendered outside of renderToStream', () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     try {
       const outside = (
         <Suspense rid={1} fallback={'1'}>
@@ -840,6 +920,8 @@ describe('Suspense errors', () => {
   });
 
   it('tests sync errors are thrown', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     await expect(
       text(
         renderToStream((r) => (
@@ -852,6 +934,8 @@ describe('Suspense errors', () => {
   });
 
   it('test sync errors after suspense', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     try {
       await text(
         renderToStream((r) => (
@@ -877,6 +961,8 @@ describe('Suspense errors', () => {
   });
 
   it('tests suspense without error boundary', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const err = new Error('component failed');
 
     try {
@@ -895,6 +981,8 @@ describe('Suspense errors', () => {
   });
 
   it('tests stream suspense without error boundary', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const err = new Error('component failed');
 
     const stream = renderToStream((r) => (
@@ -920,6 +1008,8 @@ describe('Suspense errors', () => {
   });
 
   it('tests suspense with function error boundary', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const err = new Error('component failed');
 
     // Sync does not needs autoScript
@@ -957,6 +1047,8 @@ describe('Suspense errors', () => {
   });
 
   it('throws when rid is not provided', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     await expect(
       text(
         renderToStream(() => (
@@ -968,6 +1060,8 @@ describe('Suspense errors', () => {
   });
 
   it('tests suspense with error boundary', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const err = new Error('component failed');
 
     // Sync does not needs autoScript
@@ -998,6 +1092,8 @@ describe('Suspense errors', () => {
   });
 
   it('does not write anything if stream is closed', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const rendered = renderToStream(async (r) => {
       // Closes the stream rightly after
       const rd = SUSPENSE_ROOT.requests.get(r)!;
@@ -1033,6 +1129,8 @@ describe('Suspense errors', () => {
   });
 
   it('does not allows to use the same rid', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     let i = 1;
 
     function render(r: number | string) {
@@ -1070,6 +1168,8 @@ describe('Suspense errors', () => {
   });
 
   it('emits error if factory function throws', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
     const stream = renderToStream(async () => {
       throw new Error('Factory error');
     });
@@ -1083,3 +1183,109 @@ describe('Suspense errors', () => {
     }
   });
 });
+
+describe('Chunked encoding', () => {
+  test('outputs chunked format for sync content without suspense', async () => {
+    const raw = await text(renderToStream(() => <div>hello</div>));
+
+    // Verify it's in chunked format
+    expect(raw).toMatch(/^[0-9a-f]+\r\n/);
+    expect(raw).toMatch(/0\r\n\r\n$/);
+
+    // Verify decoded content
+    const html = parseChunkedResponse(raw);
+    expect(html).toBe(<div>hello</div>);
+  });
+
+  test('outputs chunked format for async content without suspense', async () => {
+    const raw = await text(renderToStream(async () => <div>async</div>));
+
+    // Verify it's in chunked format
+    expect(raw).toMatch(/^[0-9a-f]+\r\n/);
+    expect(raw).toMatch(/0\r\n\r\n$/);
+
+    // Verify decoded content
+    const html = parseChunkedResponse(raw);
+    expect(html).toBe(<div>async</div>);
+  });
+
+  test('outputs chunked format for suspense with async children', async () => {
+    const raw = await text(
+      renderToStream((r) => (
+        <Suspense rid={r} fallback={<div>loading</div>}>
+          <SleepForMs ms={1} />
+        </Suspense>
+      ))
+    );
+
+    // Verify it's in chunked format
+    expect(raw).toMatch(/^[0-9a-f]+\r\n/);
+    expect(raw).toMatch(/0\r\n\r\n$/);
+
+    // Verify decoded content
+    const html = parseChunkedResponse(raw);
+    expect(html).toContain('<div id="B:1" data-sf>');
+    expect(html).toContain('<template id="N:1" data-sr>');
+    expect(html).toContain('$KITA_RC(1)');
+  });
+
+  test('handles UTF-8 multibyte characters correctly', async () => {
+    const raw = await text(renderToStream(() => <div>日本語テスト🎉</div>));
+
+    // Verify decoded content
+    const html = parseChunkedResponse(raw);
+    expect(html).toBe(<div>日本語テスト🎉</div>);
+
+    // Verify the chunk size is in bytes, not characters
+    const firstLine = raw.split('\r\n')[0]!;
+    const chunkSize = parseInt(firstLine, 16);
+    expect(chunkSize).toBe(Buffer.byteLength(<div>日本語テスト🎉</div>, 'utf8'));
+  });
+
+  test('empty content produces just terminator', async () => {
+    const raw = await text(
+      renderToStream((r) => (
+        //@ts-expect-error - testing empty children
+        <Suspense rid={r} fallback={<div>1</div>}></Suspense>
+      ))
+    );
+
+    // Empty content should still have proper chunked terminator
+    expect(raw).toMatch(/0\r\n\r\n$/);
+
+    const html = parseChunkedResponse(raw);
+    expect(html).toBe('');
+  });
+
+  test('multiple suspense components produce multiple chunks', async () => {
+    const raw = await text(
+      renderToStream((r) => (
+        <div>
+          <Suspense rid={r} fallback={<div>1</div>}>
+            <SleepForMs ms={1} />
+          </Suspense>
+          <Suspense rid={r} fallback={<div>2</div>}>
+            <SleepForMs ms={2} />
+          </Suspense>
+        </div>
+      ))
+    );
+
+    // Verify decoded content
+    const html = parseChunkedResponse(raw);
+    expect(html).toContain('<div id="B:1" data-sf>');
+    expect(html).toContain('<div id="B:2" data-sf>');
+    expect(html).toContain('<template id="N:1" data-sr>');
+    expect(html).toContain('<template id="N:2" data-sr>');
+  });
+
+  test('can disable chunked encoding', async () => {
+    SUSPENSE_ROOT.chunkedEncoding = false;
+
+    const raw = await text(renderToStream(() => <div>no chunks</div>));
+
+    // Should not be in chunked format
+    expect(raw).not.toMatch(/^[0-9a-f]+\r\n/);
+    expect(raw).toBe(<div>no chunks</div>);
+  });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c204e0295..b0e413114 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,9 @@ settings:
 
 catalogs:
   default:
+    '@fastify/formbody':
+      specifier: ^8.0.2
+      version: 8.0.2
     '@types/jsdom':
       specifier: ^27.0.0
       version: 27.0.0
@@ -24,6 +27,12 @@ catalogs:
     c8:
       specifier: ^10.1.3
       version: 10.1.3
+    fastify:
+      specifier: ^5.7.1
+      version: 5.7.1
+    fastify-plugin:
+      specifier: ^5.1.0
+      version: 5.1.0
     jsdom:
       specifier: ^27.4.0
       version: 27.4.0
@@ -309,6 +318,39 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
 
+  examples/fastify-htmx:
+    dependencies:
+      '@fastify/formbody':
+        specifier: 'catalog:'
+        version: 8.0.2
+      '@kitajs/fastify-html-plugin':
+        specifier: workspace:*
+        version: link:../../packages/fastify-html-plugin
+      '@kitajs/html':
+        specifier: workspace:*
+        version: link:../../packages/html
+      '@kitajs/ts-html-plugin':
+        specifier: workspace:*
+        version: link:../../packages/ts-html-plugin
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.10.9
+      fastify:
+        specifier: 'catalog:'
+        version: 5.7.1
+      pino-pretty:
+        specifier: ^13.1.3
+        version: 13.1.3
+      tslib:
+        specifier: 'catalog:'
+        version: 2.8.1
+      tsx:
+        specifier: 'catalog:'
+        version: 4.21.0
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+
   examples/http-server:
     dependencies:
       '@kitajs/html':
@@ -339,11 +381,11 @@ importers:
         specifier: workspace:^
         version: link:../ts-html-plugin
       fastify-plugin:
-        specifier: ^5.1.0
+        specifier: 'catalog:'
         version: 5.1.0
     devDependencies:
       '@fastify/formbody':
-        specifier: ^8.0.2
+        specifier: 'catalog:'
         version: 8.0.2
       '@types/jsdom':
         specifier: 'catalog:'
@@ -358,7 +400,7 @@ importers:
         specifier: 'catalog:'
         version: 4.0.17(vitest@4.0.17(@types/node@24.10.9)(jsdom@27.4.0)(tsx@4.21.0))
       fastify:
-        specifier: ^5.7.1
+        specifier: 'catalog:'
         version: 5.7.1
       jsdom:
         specifier: 'catalog:'
@@ -1211,6 +1253,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -1251,6 +1296,9 @@ packages:
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
+  dateformat@4.6.3:
+    resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -1305,6 +1353,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -1340,6 +1391,9 @@ packages:
   extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
+  fast-copy@4.0.2:
+    resolution: {integrity: sha512-ybA6PDXIXOXivLJK/z9e+Otk7ve13I4ckBvGO5I2RRmBU1gMHLVDJYEuJYhGwez7YNlYji2M2DvVU+a9mSFDlw==}
+
   fast-decode-uri-component@1.0.1:
     resolution: {integrity: sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==}
 
@@ -1359,6 +1413,9 @@ packages:
   fast-querystring@1.1.2:
     resolution: {integrity: sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==}
 
+  fast-safe-stringify@2.1.1:
+    resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
+
   fast-uri@3.1.0:
     resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
@@ -1454,6 +1511,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  help-me@5.0.0:
+    resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
+
   hono@4.11.5:
     resolution: {integrity: sha512-WemPi9/WfyMwZs+ZUXdiwcCh9Y+m7L+8vki9MzDw3jJ+W9Lc+12HGsd368Qc1vZi1xwW8BWMMsnK5efYKPdt4g==}
     engines: {node: '>=16.9.0'}
@@ -1548,6 +1608,10 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
@@ -1698,6 +1762,9 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1740,6 +1807,9 @@ packages:
     resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
     engines: {node: '>=14.0.0'}
 
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
   outdent@0.5.0:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
@@ -1823,6 +1893,10 @@ packages:
   pino-abstract-transport@3.0.0:
     resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
 
+  pino-pretty@13.1.3:
+    resolution: {integrity: sha512-ttXRkkOz6WWC95KeY9+xxWL6AtImwbyMHrL1mSwqwW9u+vLp/WIElvHvCSDg0xO/Dzrggz1zv3rN5ovTRVowKg==}
+    hasBin: true
+
   pino-std-serializers@7.1.0:
     resolution: {integrity: sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==}
 
@@ -1903,6 +1977,9 @@ packages:
   process-warning@5.0.0:
     resolution: {integrity: sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==}
 
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2077,6 +2154,10 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-json-comments@5.0.3:
+    resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
+    engines: {node: '>=14.16'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2297,6 +2378,9 @@ packages:
     resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
     engines: {node: '>=18'}
 
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
   ws@8.18.3:
     resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
     engines: {node: '>=10.0.0'}
@@ -3069,6 +3153,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colorette@2.0.20: {}
+
   commander@2.20.3: {}
 
   comment-parser@1.4.1: {}
@@ -3106,6 +3192,8 @@ snapshots:
 
   dataloader@1.4.0: {}
 
+  dateformat@4.6.3: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -3142,6 +3230,10 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -3192,6 +3284,8 @@ snapshots:
 
   extendable-error@0.1.7: {}
 
+  fast-copy@4.0.2: {}
+
   fast-decode-uri-component@1.0.1: {}
 
   fast-deep-equal@3.1.3: {}
@@ -3219,6 +3313,8 @@ snapshots:
     dependencies:
       fast-decode-uri-component: 1.0.1
 
+  fast-safe-stringify@2.1.1: {}
+
   fast-uri@3.1.0: {}
 
   fastify-plugin@5.1.0: {}
@@ -3329,6 +3425,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  help-me@5.0.0: {}
+
   hono@4.11.5: {}
 
   html-encoding-sniffer@6.0.0:
@@ -3416,6 +3514,8 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  joycon@3.1.1: {}
+
   js-tokens@9.0.1: {}
 
   js-yaml@3.14.1:
@@ -3670,6 +3770,8 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimist@1.2.8: {}
+
   minipass@7.1.2: {}
 
   mitata@1.0.34: {}
@@ -3694,6 +3796,10 @@ snapshots:
 
   on-exit-leak-free@2.1.2: {}
 
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
   outdent@0.5.0: {}
 
   p-filter@2.1.0:
@@ -3763,6 +3869,22 @@ snapshots:
     dependencies:
       split2: 4.2.0
 
+  pino-pretty@13.1.3:
+    dependencies:
+      colorette: 2.0.20
+      dateformat: 4.6.3
+      fast-copy: 4.0.2
+      fast-safe-stringify: 2.1.1
+      help-me: 5.0.0
+      joycon: 3.1.1
+      minimist: 1.2.8
+      on-exit-leak-free: 2.1.2
+      pino-abstract-transport: 3.0.0
+      pump: 3.0.3
+      secure-json-parse: 4.1.0
+      sonic-boom: 4.2.0
+      strip-json-comments: 5.0.3
+
   pino-std-serializers@7.1.0: {}
 
   pino@10.2.1:
@@ -3830,6 +3952,11 @@ snapshots:
 
   process-warning@5.0.0: {}
 
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
   punycode@2.3.1: {}
 
   quansync@0.2.11: {}
@@ -3998,6 +4125,8 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
+  strip-json-comments@5.0.3: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -4180,6 +4309,8 @@ snapshots:
       string-width: 7.2.0
       strip-ansi: 7.1.2
 
+  wrappy@1.0.2: {}
+
   ws@8.18.3: {}
 
   xml-name-validator@5.0.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index be805a5db..9764deb0c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,12 +4,15 @@ packages:
   - examples/*
 
 catalog:
+  '@fastify/formbody': ^8.0.2
   '@types/jsdom': ^27.0.0
   '@types/node': ^24.10.9
   '@types/react': ^19.2.9
   '@typescript/native-preview': 7.0.0-dev.20260122.2
   '@vitest/coverage-v8': ^4.0.17
   c8: ^10.1.3
+  fastify: ^5.7.1
+  fastify-plugin: ^5.1.0
   jsdom: ^27.4.0
   react: ^19.2.3
   react-dom: ^19.2.3

From 5cca6a7c9a0f3ff40ead1a7e32f6252ad767acf4 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 02:11:32 +0700
Subject: [PATCH 15/22] code

---
 examples/http-server/src/server.ts            |   1 +
 .../test/stream-html.test.tsx                 |  25 +++
 packages/html/README.md                       |  63 +-----
 packages/html/test/suspense.test.tsx          | 207 ------------------
 packages/html/tsconfig.json                   |   6 +-
 5 files changed, 34 insertions(+), 268 deletions(-)

diff --git a/examples/http-server/src/server.ts b/examples/http-server/src/server.ts
index 5ebb8b15d..e879f5b6d 100644
--- a/examples/http-server/src/server.ts
+++ b/examples/http-server/src/server.ts
@@ -14,6 +14,7 @@ const server = http.createServer((req, res) => {
 
   // Set proper content type with charset to prevent UTF-7 XSS attacks
   res.setHeader('Content-Type', 'text/html; charset=utf-8');
+  res.setHeader('Transfer-Encoding', 'chunked');
 
   // Create the HTML stream from the page renderer
   const htmlStream = renderToStream(Dashboard);
diff --git a/packages/fastify-html-plugin/test/stream-html.test.tsx b/packages/fastify-html-plugin/test/stream-html.test.tsx
index 2aaf1bba7..6da7cf17c 100644
--- a/packages/fastify-html-plugin/test/stream-html.test.tsx
+++ b/packages/fastify-html-plugin/test/stream-html.test.tsx
@@ -575,4 +575,29 @@ describe('Suspense', () => {
       </>
     );
   });
+
+  test('stream outputs raw HTML (Fastify handles chunked transfer encoding at HTTP level)', async () => {
+    // This test verifies that the stream output is clean HTML without manual chunk markers.
+    // HTTP chunked transfer encoding is handled automatically by Fastify/Node.js at the
+    // protocol level when streaming responses without a Content-Length header.
+
+    await using app = fastify();
+    app.register(fastifyKitaHtml);
+
+    app.get('/', (req, res) =>
+      res.html(
+        <Suspense rid={req.id} fallback={<div>loading</div>}>
+          <SleepForMs ms={1} />
+        </Suspense>
+      )
+    );
+
+    const res = await app.inject({ method: 'GET', url: '/' });
+
+    expect(res.statusCode).toBe(200);
+    // Response should be clean HTML starting with the actual content
+    expect(res.body.startsWith('<div id="B:1"')).toBe(true);
+    // Should NOT contain manual chunk size markers (e.g., "28\r\n<div>...\r\n")
+    expect(res.body).not.toMatch(/^[0-9a-f]+\r\n/i);
+  });
 });
diff --git a/packages/html/README.md b/packages/html/README.md
index 44a966a10..ae7f85af4 100644
--- a/packages/html/README.md
+++ b/packages/html/README.md
@@ -68,8 +68,6 @@
 - [How it works](#how-it-works)
 - [Serialization table](#serialization-table)
 - [Format HTML output](#format-html-output)
-- [Deprecating global register](#deprecating-global-register)
-- [Deprecating importing type extensions](#deprecating-importing-type-extensions)
 - [Fork credits](#fork-credits)
 
 <br />
@@ -402,6 +400,10 @@ function renderTemplate(rid: number) {
 The above example would only return anything after `MyAsyncFallback` is resolved. To catch
 async fallback errors, you must wrap it into a [`ErrorBoundary`](#error-boundaries).
 
+> [!NOTE] HTTP chunked transfer encoding is handled automatically by Node.js (and other
+> runtimes) when streaming responses without a `Content-Length` header. You don't need to
+> configure anything for this to work.
+
 <br />
 
 ### Error boundaries
@@ -1017,63 +1019,6 @@ console.log(prettify(html));
 
 <br />
 
-## Deprecating global register
-
-The `@kitajs/html/register` in favour of the `react-jsx` target `@kitajs/html` supports,
-which automatically registers the JSX runtime globally.
-
-Please update your tsconfig to use the new `jsxImportSource` option and remove all
-references to `'@kitajs/html/register'` from your codebase.
-
-```diff
-{
-  "compilerOptions": {
-+   "jsx": "react-jsx",
-+   "jsxImportSource": "@kitajs/html",
--   "jsx": "react",
--   "jsxFactory": "Html.createElement",
--   "jsxFragmentFactory": "Html.Fragment",
-    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
-  }
-}
-```
-
-You can also remove all references to `import { Html } from '@kitajs/html'` from your
-codebase.
-
-```diff
-- import { Html } from '@kitajs/html';
-```
-
-<br />
-
-## Deprecating importing type extensions
-
-Importing type extensions like `import '@kitajs/html/htmx'` and
-`import '@kitajs/html/alpine'` have been deprecated and will be removed in the next major
-version.
-
-Please change the way you import them to either use `/// <reference types="..." />`
-[triple slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)
-or the [`types`](https://www.typescriptlang.org/tsconfig/#types) option in your tsconfig.
-
-```diff
-- import '@kitajs/html/htmx';
-+ /// <reference types="@kitajs/html/htmx" />
-```
-
-**Or** add them in the `types` option present in your tsconfig:
-
-```diff
-{
-  "compilerOptions": {
-+   "types": ["@kitajs/html/htmx"]
-  }
-}
-```
-
-<br />
-
 ## Fork credits
 
 This repository was initially forked from
diff --git a/packages/html/test/suspense.test.tsx b/packages/html/test/suspense.test.tsx
index 5e5a20063..7078c42ed 100644
--- a/packages/html/test/suspense.test.tsx
+++ b/packages/html/test/suspense.test.tsx
@@ -18,32 +18,6 @@ function Throw(): string {
   throw new Error('test');
 }
 
-/**
- * Parses HTTP chunked transfer encoding format and returns the decoded content. Format:
- * <hex-size>\r\n<data>\r\n...0\r\n\r\n
- */
-function parseChunkedResponse(data: string): string {
-  let result = '';
-  let pos = 0;
-
-  while (pos < data.length) {
-    const sizeEnd = data.indexOf('\r\n', pos);
-    if (sizeEnd === -1) break;
-
-    const size = parseInt(data.slice(pos, sizeEnd), 16);
-    if (size === 0) break;
-
-    const dataStart = sizeEnd + 2;
-    const dataEnd = data.indexOf('\r\n', dataStart);
-    if (dataEnd === -1) break;
-
-    result += data.slice(dataStart, dataEnd);
-    pos = dataEnd + 2;
-  }
-
-  return result;
-}
-
 // Detect leaks of pending promises
 afterEach(() => {
   expect(SUSPENSE_ROOT.requests.size).toBe(0);
@@ -51,35 +25,16 @@ afterEach(() => {
   // Reset suspense root
   SUSPENSE_ROOT.autoScript = true;
   SUSPENSE_ROOT.requestCounter = 1;
-  SUSPENSE_ROOT.chunkedEncoding = true;
   SUSPENSE_ROOT.requests.clear();
 });
 
 describe('Suspense', () => {
   test('Sync without suspense', async () => {
-    // Disable chunked encoding for this test to compare raw output
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(await text(renderToStream(() => <div />))).toBe(<div />);
-
     expect(await text(renderToStream(async () => <div />))).toBe(<div />);
   });
 
-  test('Sync without suspense with chunked encoding', async () => {
-    const raw = await text(renderToStream(() => <div />));
-    const html = parseChunkedResponse(raw);
-
-    expect(html).toBe(<div />);
-
-    const rawAsync = await text(renderToStream(async () => <div />));
-    const htmlAsync = parseChunkedResponse(rawAsync);
-
-    expect(htmlAsync).toBe(<div />);
-  });
-
   test('Suspense sync children', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -92,8 +47,6 @@ describe('Suspense', () => {
   });
 
   test('Suspense async children', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -121,8 +74,6 @@ describe('Suspense', () => {
   });
 
   test('Suspense async children & fallback', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -150,8 +101,6 @@ describe('Suspense', () => {
   });
 
   test('Suspense async fallback sync children', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -168,8 +117,6 @@ describe('Suspense', () => {
   });
 
   test('Multiple async renders cleanup', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     await Promise.all(
       Array.from({ length: 100 }, () => {
         return text(
@@ -203,8 +150,6 @@ describe('Suspense', () => {
   });
 
   test('Multiple sync renders cleanup', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     for (let i = 0; i < 10; i++) {
       expect(
         await text(
@@ -234,8 +179,6 @@ describe('Suspense', () => {
   });
 
   test('Multiple children', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -295,8 +238,6 @@ describe('Suspense', () => {
   });
 
   test('Concurrent renders', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const promises = [];
 
     for (const seconds of [9, 4, 7]) {
@@ -352,8 +293,6 @@ describe('Suspense', () => {
   });
 
   it('ensures autoScript works', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     // Sync does not needs autoScript
     expect(
       await text(
@@ -419,8 +358,6 @@ describe('Suspense', () => {
   });
 
   test('renderToStream', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const stream = renderToStream((r) => (
       <div>
         <Suspense rid={r} fallback={<div>2</div>}>
@@ -467,8 +404,6 @@ describe('Suspense', () => {
   });
 
   test('renderToStream without suspense', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const stream = renderToStream(() => '<div>not suspense</div>', 1227);
 
     expect(stream.readable).toBeTruthy();
@@ -483,8 +418,6 @@ describe('Suspense', () => {
   });
 
   it('tests suspense without children', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -496,8 +429,6 @@ describe('Suspense', () => {
   });
 
   it('works with async error handlers', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((r) => (
@@ -525,8 +456,6 @@ describe('Suspense', () => {
   });
 
   it('works with deep suspense calls', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((rid) => {
@@ -587,8 +516,6 @@ describe('Suspense', () => {
   });
 
   it('works with deep suspense calls resolving first', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     expect(
       await text(
         renderToStream((rid) => {
@@ -651,8 +578,6 @@ describe('Suspense', () => {
   });
 
   it('works with parallel deep suspense calls resolving first', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const html = await text(
       renderToStream((rid) => (
         <div>
@@ -812,8 +737,6 @@ describe('Suspense', () => {
   });
 
   it('Suspense works when children resolves first', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     async function Fallback() {
       for (let i = 0; i < 10; i++) {
         await setImmediate();
@@ -857,8 +780,6 @@ describe('Suspense', () => {
   });
 
   it('Suspense fails when children rejects first', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     async function Fallback(): Promise<string> {
       for (let i = 0; i < 10; i++) {
         await setImmediate();
@@ -892,8 +813,6 @@ describe('Suspense', () => {
 
 describe('Suspense errors', () => {
   it('Leaks if rendered outside of renderToStream', () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     try {
       const outside = (
         <Suspense rid={1} fallback={'1'}>
@@ -920,8 +839,6 @@ describe('Suspense errors', () => {
   });
 
   it('tests sync errors are thrown', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     await expect(
       text(
         renderToStream((r) => (
@@ -934,8 +851,6 @@ describe('Suspense errors', () => {
   });
 
   it('test sync errors after suspense', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     try {
       await text(
         renderToStream((r) => (
@@ -961,8 +876,6 @@ describe('Suspense errors', () => {
   });
 
   it('tests suspense without error boundary', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const err = new Error('component failed');
 
     try {
@@ -981,8 +894,6 @@ describe('Suspense errors', () => {
   });
 
   it('tests stream suspense without error boundary', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const err = new Error('component failed');
 
     const stream = renderToStream((r) => (
@@ -1008,8 +919,6 @@ describe('Suspense errors', () => {
   });
 
   it('tests suspense with function error boundary', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const err = new Error('component failed');
 
     // Sync does not needs autoScript
@@ -1047,8 +956,6 @@ describe('Suspense errors', () => {
   });
 
   it('throws when rid is not provided', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     await expect(
       text(
         renderToStream(() => (
@@ -1060,8 +967,6 @@ describe('Suspense errors', () => {
   });
 
   it('tests suspense with error boundary', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const err = new Error('component failed');
 
     // Sync does not needs autoScript
@@ -1092,8 +997,6 @@ describe('Suspense errors', () => {
   });
 
   it('does not write anything if stream is closed', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const rendered = renderToStream(async (r) => {
       // Closes the stream rightly after
       const rd = SUSPENSE_ROOT.requests.get(r)!;
@@ -1129,8 +1032,6 @@ describe('Suspense errors', () => {
   });
 
   it('does not allows to use the same rid', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     let i = 1;
 
     function render(r: number | string) {
@@ -1168,8 +1069,6 @@ describe('Suspense errors', () => {
   });
 
   it('emits error if factory function throws', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
     const stream = renderToStream(async () => {
       throw new Error('Factory error');
     });
@@ -1183,109 +1082,3 @@ describe('Suspense errors', () => {
     }
   });
 });
-
-describe('Chunked encoding', () => {
-  test('outputs chunked format for sync content without suspense', async () => {
-    const raw = await text(renderToStream(() => <div>hello</div>));
-
-    // Verify it's in chunked format
-    expect(raw).toMatch(/^[0-9a-f]+\r\n/);
-    expect(raw).toMatch(/0\r\n\r\n$/);
-
-    // Verify decoded content
-    const html = parseChunkedResponse(raw);
-    expect(html).toBe(<div>hello</div>);
-  });
-
-  test('outputs chunked format for async content without suspense', async () => {
-    const raw = await text(renderToStream(async () => <div>async</div>));
-
-    // Verify it's in chunked format
-    expect(raw).toMatch(/^[0-9a-f]+\r\n/);
-    expect(raw).toMatch(/0\r\n\r\n$/);
-
-    // Verify decoded content
-    const html = parseChunkedResponse(raw);
-    expect(html).toBe(<div>async</div>);
-  });
-
-  test('outputs chunked format for suspense with async children', async () => {
-    const raw = await text(
-      renderToStream((r) => (
-        <Suspense rid={r} fallback={<div>loading</div>}>
-          <SleepForMs ms={1} />
-        </Suspense>
-      ))
-    );
-
-    // Verify it's in chunked format
-    expect(raw).toMatch(/^[0-9a-f]+\r\n/);
-    expect(raw).toMatch(/0\r\n\r\n$/);
-
-    // Verify decoded content
-    const html = parseChunkedResponse(raw);
-    expect(html).toContain('<div id="B:1" data-sf>');
-    expect(html).toContain('<template id="N:1" data-sr>');
-    expect(html).toContain('$KITA_RC(1)');
-  });
-
-  test('handles UTF-8 multibyte characters correctly', async () => {
-    const raw = await text(renderToStream(() => <div>日本語テスト🎉</div>));
-
-    // Verify decoded content
-    const html = parseChunkedResponse(raw);
-    expect(html).toBe(<div>日本語テスト🎉</div>);
-
-    // Verify the chunk size is in bytes, not characters
-    const firstLine = raw.split('\r\n')[0]!;
-    const chunkSize = parseInt(firstLine, 16);
-    expect(chunkSize).toBe(Buffer.byteLength(<div>日本語テスト🎉</div>, 'utf8'));
-  });
-
-  test('empty content produces just terminator', async () => {
-    const raw = await text(
-      renderToStream((r) => (
-        //@ts-expect-error - testing empty children
-        <Suspense rid={r} fallback={<div>1</div>}></Suspense>
-      ))
-    );
-
-    // Empty content should still have proper chunked terminator
-    expect(raw).toMatch(/0\r\n\r\n$/);
-
-    const html = parseChunkedResponse(raw);
-    expect(html).toBe('');
-  });
-
-  test('multiple suspense components produce multiple chunks', async () => {
-    const raw = await text(
-      renderToStream((r) => (
-        <div>
-          <Suspense rid={r} fallback={<div>1</div>}>
-            <SleepForMs ms={1} />
-          </Suspense>
-          <Suspense rid={r} fallback={<div>2</div>}>
-            <SleepForMs ms={2} />
-          </Suspense>
-        </div>
-      ))
-    );
-
-    // Verify decoded content
-    const html = parseChunkedResponse(raw);
-    expect(html).toContain('<div id="B:1" data-sf>');
-    expect(html).toContain('<div id="B:2" data-sf>');
-    expect(html).toContain('<template id="N:1" data-sr>');
-    expect(html).toContain('<template id="N:2" data-sr>');
-  });
-
-  test('can disable chunked encoding', async () => {
-    SUSPENSE_ROOT.chunkedEncoding = false;
-
-    const raw = await text(renderToStream(() => <div>no chunks</div>));
-
-    // Should not be in chunked format
-    expect(raw).not.toMatch(/^[0-9a-f]+\r\n/);
-    expect(raw).toBe(<div>no chunks</div>);
-  });
-});
diff --git a/packages/html/tsconfig.json b/packages/html/tsconfig.json
index dc25414e5..b5297ad81 100644
--- a/packages/html/tsconfig.json
+++ b/packages/html/tsconfig.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "self-html",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "skipLibCheck": false
   },
-  "include": ["src", "test"]
+  "include": ["src", "test"],
+  "exclude": ["dist"]
 }

From 2a32081f0b283d102c8346a1fbce47642c24ab1a Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 02:33:36 +0700
Subject: [PATCH 16/22] code

---
 .changeset/slimy-wolves-buy.md                |    5 +
 packages/html/test/attributes.test.tsx        |   22 +-
 packages/html/test/components.test.tsx        |   32 -
 packages/html/test/encoding.test.tsx          |   51 +-
 .../html/test/escape-tagged-func.test.tsx     |   72 +-
 packages/html/test/html-standards.test.tsx    |   14 -
 packages/html/test/simple-html.test.tsx       |   17 +-
 packages/html/test/suspense.test.tsx          | 1258 +++++------------
 packages/ts-html-plugin/README.md             |   18 +
 9 files changed, 409 insertions(+), 1080 deletions(-)
 create mode 100644 .changeset/slimy-wolves-buy.md
 delete mode 100644 packages/html/test/components.test.tsx
 delete mode 100644 packages/html/test/html-standards.test.tsx

diff --git a/.changeset/slimy-wolves-buy.md b/.changeset/slimy-wolves-buy.md
new file mode 100644
index 000000000..ff4ca0534
--- /dev/null
+++ b/.changeset/slimy-wolves-buy.md
@@ -0,0 +1,5 @@
+---
+'@kitajs/html': patch
+---
+
+Broather and more reliable test suite
diff --git a/packages/html/test/attributes.test.tsx b/packages/html/test/attributes.test.tsx
index 83b92fd21..b6e55a0cf 100644
--- a/packages/html/test/attributes.test.tsx
+++ b/packages/html/test/attributes.test.tsx
@@ -56,12 +56,26 @@ describe('Attributes', () => {
     ).toMatchInlineSnapshot(`"<div></div>"`);
   });
 
-  test('Dates & Objects', () => {
-    const date = new Date();
-    expect(<del datetime={date} />).toMatchInlineSnapshot(
-      `"<del datetime="${date.toISOString()}"></del>"`
+  test('Dates', () => {
+    const date = new Date('1914-12-20T08:00+0000');
+
+    expect(<time datetime={date}></time>).toMatchInlineSnapshot(
+      `"<time datetime="1914-12-20T08:00:00.000Z"></time>"`
+    );
+    expect(<ins datetime={date}>new</ins>).toMatchInlineSnapshot(
+      `"<ins datetime="1914-12-20T08:00:00.000Z">new</ins>"`
+    );
+    expect(<del datetime={date}>old</del>).toMatchInlineSnapshot(
+      `"<del datetime="1914-12-20T08:00:00.000Z">old</del>"`
     );
 
+    // Also works with ISO strings
+    expect(<time datetime={date.toISOString()}></time>).toMatchInlineSnapshot(
+      `"<time datetime="1914-12-20T08:00:00.000Z"></time>"`
+    );
+  });
+
+  test('Objects', () => {
     //@ts-expect-error - testing object attribute
     expect(<div test={{}}></div>).toMatchInlineSnapshot(
       `"<div test="[object Object]"></div>"`
diff --git a/packages/html/test/components.test.tsx b/packages/html/test/components.test.tsx
deleted file mode 100644
index 9c0cf5178..000000000
--- a/packages/html/test/components.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import * as Html from '../src/index.js';
-
-const Header: Html.Component<any> = ({ children, ...attributes }) => (
-  <h1 {...attributes}>{children}</h1>
-);
-
-function Button(attributes: Html.PropsWithChildren<any>) {
-  return (
-    <button type="button" class="original-class" {...attributes}>
-      {attributes.children}
-    </button>
-  );
-}
-
-describe('Components', () => {
-  test('helper components', () => {
-    expect(
-      <Header class="title">
-        <span>Header Text</span>
-      </Header>
-    ).toMatchInlineSnapshot(`"<h1 class="title"><span>Header Text</span></h1>"`);
-
-    expect(<Button class="override" test="a" b={3} />).toMatchInlineSnapshot(
-      `"<button type="button" class="override" test="a" b="3"></button>"`
-    );
-
-    expect(<Button>Button Text</Button>).toMatchInlineSnapshot(
-      `"<button type="button" class="original-class">Button Text</button>"`
-    );
-  });
-});
diff --git a/packages/html/test/encoding.test.tsx b/packages/html/test/encoding.test.tsx
index ad85dc47e..52bbffacb 100644
--- a/packages/html/test/encoding.test.tsx
+++ b/packages/html/test/encoding.test.tsx
@@ -1,54 +1,11 @@
 import { describe, expect, test } from 'vitest';
 
-describe('HTML Encoding', () => {
-  test('should encode " as &#34', () => {
+describe('Attribute Encoding', () => {
+  test('encodes " as &#34 in attributes', () => {
     expect(<div class={'"'}></div>).toMatchInlineSnapshot(`"<div class="&#34;"></div>"`);
   });
 
-  test('should encode & as &amp', () => {
-    expect(
-      <div class={'&'} safe>
-        &
-      </div>
-    ).toMatchInlineSnapshot(`"<div class="&">&amp;</div>"`);
-  });
-
-  test('should NOT encode \\u00A0 as &#32', () => {
-    expect(<div class={'\u00A0'}></div>).toMatchInlineSnapshot(`"<div class=" "></div>"`);
-  });
-
-  test('should encode date attributes as ISO strings', () => {
-    const date = new Date();
-
-    //@ts-expect-error - testing date attribute
-    expect(<div datetime={date}></div>).toBe(
-      `<div datetime="${date.toISOString()}"></div>`
-    );
-  });
-
-  test('using a Date type attribute', () => {
-    expect(
-      <time datetime={new Date('1914-12-20T08:00+0000')}></time>
-    ).toMatchInlineSnapshot(`"<time datetime="1914-12-20T08:00:00.000Z"></time>"`);
-
-    expect(
-      <ins datetime={new Date('1914-12-20T08:00+0000')}>new</ins>
-    ).toMatchInlineSnapshot(`"<ins datetime="1914-12-20T08:00:00.000Z">new</ins>"`);
-
-    expect(
-      <del datetime={new Date('1914-12-20T08:00+0000')}>old</del>
-    ).toMatchInlineSnapshot(`"<del datetime="1914-12-20T08:00:00.000Z">old</del>"`);
-
-    expect(
-      <time datetime={new Date('1914-12-20T08:00+0000').toISOString()}></time>
-    ).toMatchInlineSnapshot(`"<time datetime="1914-12-20T08:00:00.000Z"></time>"`);
-
-    expect(
-      <ins datetime={new Date('1914-12-20T08:00+0000').toISOString()}>new</ins>
-    ).toMatchInlineSnapshot(`"<ins datetime="1914-12-20T08:00:00.000Z">new</ins>"`);
-
-    expect(
-      <del datetime={new Date('1914-12-20T08:00+0000').toISOString()}>old</del>
-    ).toMatchInlineSnapshot(`"<del datetime="1914-12-20T08:00:00.000Z">old</del>"`);
+  test('preserves non-breaking space (\\u00A0)', () => {
+    expect(<div class={'\u00A0'}></div>).toBe('<div class="\u00A0"></div>');
   });
 });
diff --git a/packages/html/test/escape-tagged-func.test.tsx b/packages/html/test/escape-tagged-func.test.tsx
index ad328bfe0..6a57ed273 100644
--- a/packages/html/test/escape-tagged-func.test.tsx
+++ b/packages/html/test/escape-tagged-func.test.tsx
@@ -1,79 +1,11 @@
 import { describe, expect, test } from 'vitest';
 import * as Html from '../src/index.js';
 
-const unsafeTag = '<script tag="1">alert(1)</script>';
-const safeTag = Html.escape`${unsafeTag}`;
-
-describe('HTML Escaping', () => {
+describe('escape Tagged Template Function', () => {
   test('e is the same as escape', () => {
     expect(Html.e).toBe(Html.escape);
   });
 
-  test('escapes content', () => {
-    expect(<>{unsafeTag}</>).toBe(<>{unsafeTag}</>);
-  });
-
-  test('with children', () => {
-    expect(
-      <>
-        <div>{unsafeTag}</div>
-      </>
-    ).toBe(
-      <>
-        <div>{unsafeTag}</div>
-      </>
-    );
-  });
-
-  test('escapes children', () => {
-    expect(
-      <>
-        <div safe>{unsafeTag}</div>
-      </>
-    ).toBe(
-      <>
-        <div>{safeTag}</div>
-      </>
-    );
-  });
-
-  test('escapes deep children', () => {
-    expect(
-      <>
-        <div safe>
-          <div>{unsafeTag}</div>
-        </div>
-      </>
-    ).toBe(
-      <>
-        <div>{Html.escape`${(<div>{unsafeTag}</div>)}`}</div>
-      </>
-    );
-  });
-
-  test('always escapes attributes', () => {
-    expect(
-      <>
-        <div style={'"&<>\''}></div>
-        <div style={{ backgroundColor: '"&<>\'' }}></div>
-        <div class={'"&<>\''}></div>
-        <div class={'test:1" xss="false'}></div>
-      </>
-    ).toMatchInlineSnapshot(
-      `"<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div><div class="test:1&#34; xss=&#34;false"></div>"`
-    );
-
-    expect(
-      <>
-        <div style={`"&<>'`}></div>
-        <div style={{ backgroundColor: `"&<>'` }}></div>
-        <div class={`"&<>'`}></div>
-      </>
-    ).toMatchInlineSnapshot(
-      `"<div style="&#34;&<>'"></div><div style="background-color:&#34;&<>';"></div><div class="&#34;&<>'"></div>"`
-    );
-  });
-
   test('handles unknown values', () => {
     expect(Html.escape``).toBe('');
     expect(Html.escape`${{ a: 1 }}`).toBe('[object Object]');
@@ -88,7 +20,7 @@ describe('HTML Escaping', () => {
   // 6. Works when the text to escape is in the beginning
   // 7. Works when the text to escape is in the end
   // 8. Returns the same string when there's no need to escape
-  test('always escape', () => {
+  test('escapes special characters', () => {
     expect(Html.escape`absolutely nothing to do here`).toBe(
       'absolutely nothing to do here'
     );
diff --git a/packages/html/test/html-standards.test.tsx b/packages/html/test/html-standards.test.tsx
deleted file mode 100644
index 055b90a6a..000000000
--- a/packages/html/test/html-standards.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { describe, expect, test } from 'vitest';
-
-describe('Expose correct html standards types', () => {
-  test('Select', () => {
-    expect(
-      <select onchange="jsFunctionCall()">
-        <option value="dog">Dog</option>
-        <option value="cat">Cat</option>
-      </select>
-    ).toMatchInlineSnapshot(
-      `"<select onchange="jsFunctionCall()"><option value="dog">Dog</option><option value="cat">Cat</option></select>"`
-    );
-  });
-});
diff --git a/packages/html/test/simple-html.test.tsx b/packages/html/test/simple-html.test.tsx
index 9de414095..287cb01bf 100644
--- a/packages/html/test/simple-html.test.tsx
+++ b/packages/html/test/simple-html.test.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest';
 
-describe('Html structures', () => {
-  test('simple html structures', () => {
+describe('HTML structures', () => {
+  test('basic elements', () => {
     expect(<a href="test">a link</a>).toMatchInlineSnapshot(
       `"<a href="test">a link</a>"`
     );
@@ -46,7 +46,7 @@ describe('Html structures', () => {
     expect(<D notHref></D>).toMatchInlineSnapshot(`"<div></div>"`);
   });
 
-  test('simple svg structure', () => {
+  test('svg structure', () => {
     expect(
       <svg width="100" height="100" viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
@@ -55,4 +55,15 @@ describe('Html structures', () => {
       `"<svg width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>"`
     );
   });
+
+  test('select element', () => {
+    expect(
+      <select onchange="jsFunctionCall()">
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+      </select>
+    ).toMatchInlineSnapshot(
+      `"<select onchange="jsFunctionCall()"><option value="dog">Dog</option><option value="cat">Cat</option></select>"`
+    );
+  });
 });
diff --git a/packages/html/test/suspense.test.tsx b/packages/html/test/suspense.test.tsx
index 7078c42ed..1acee7cf1 100644
--- a/packages/html/test/suspense.test.tsx
+++ b/packages/html/test/suspense.test.tsx
@@ -1,7 +1,7 @@
 import { JSDOM } from 'jsdom';
 import { text } from 'node:stream/consumers';
-import { setImmediate, setTimeout } from 'node:timers/promises';
-import { afterEach, describe, expect, it, test, vi } from 'vitest';
+import { setTimeout } from 'node:timers/promises';
+import { afterEach, describe, expect, test, vi } from 'vitest';
 import { Html, type PropsWithChildren } from '../src/index.js';
 import {
   Suspense,
@@ -28,43 +28,124 @@ afterEach(() => {
   SUSPENSE_ROOT.requests.clear();
 });
 
-describe('Suspense', () => {
-  test('Sync without suspense', async () => {
+describe('renderToStream', () => {
+  test('without suspense - sync', async () => {
     expect(await text(renderToStream(() => <div />))).toBe(<div />);
+  });
+
+  test('without suspense - async', async () => {
     expect(await text(renderToStream(async () => <div />))).toBe(<div />);
   });
 
-  test('Suspense sync children', async () => {
+  test('with custom rid', async () => {
+    const stream = renderToStream(() => '<div>custom</div>', 'my-custom-rid');
+    expect(stream.readable).toBeTruthy();
+    expect(await text(stream)).toBe('<div>custom</div>');
+  });
+
+  test('with string rid', async () => {
+    expect(
+      await text(
+        renderToStream(
+          (r) => (
+            <Suspense rid={r} fallback={<div>loading</div>}>
+              {Promise.resolve(<div>loaded</div>)}
+            </Suspense>
+          ),
+          'string-rid-123'
+        )
+      )
+    ).toContain('<div>loaded</div>');
+  });
+
+  test('emits end event and chunks correctly', async () => {
+    const stream = renderToStream((r) => (
+      <div>
+        <Suspense rid={r} fallback={<div>fallback</div>}>
+          {Promise.resolve(<div>resolved</div>)}
+        </Suspense>
+      </div>
+    ));
+
+    const fn = vi.fn();
+    stream.on('end', fn);
+
+    const chunks = [];
+    for await (const chunk of stream) {
+      chunks.push(chunk.toString());
+    }
+
+    expect(fn).toHaveBeenCalledOnce();
+    expect(chunks.length).toBe(2);
+    expect(chunks[0]).toContain('data-sf');
+    expect(chunks[1]).toContain('data-sr');
+  });
+
+  test('rejects duplicate rid', async () => {
+    const stream = renderToStream(
+      (r) => (
+        <Suspense rid={r} fallback="1">
+          {Promise.resolve('2')}
+        </Suspense>
+      ),
+      1
+    );
+
+    await expect(
+      text(
+        renderToStream(
+          (r) => (
+            <Suspense rid={r} fallback="1">
+              {Promise.resolve('2')}
+            </Suspense>
+          ),
+          1
+        )
+      )
+    ).rejects.toThrow(/The provided Request Id is already in use: 1./);
+
+    await text(stream); // consume to cleanup
+  });
+
+  test('emits error if factory throws', async () => {
+    const stream = renderToStream(async () => {
+      throw new Error('Factory error');
+    });
+
+    await expect(text(stream)).rejects.toThrow('Factory error');
+  });
+});
+
+describe('Suspense - basic rendering', () => {
+  test('sync children returns content directly (no wrapper)', async () => {
     expect(
       await text(
         renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>}>
-            <div>2</div>
+          <Suspense rid={r} fallback={<div>fallback</div>}>
+            <div>sync content</div>
           </Suspense>
         ))
       )
-    ).toBe(<div>2</div>);
+    ).toBe(<div>sync content</div>);
   });
 
-  test('Suspense async children', async () => {
+  test('async children renders fallback then streams content', async () => {
     expect(
       await text(
         renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>}>
-            <SleepForMs ms={2} />
+          <Suspense rid={r} fallback={<div>loading</div>}>
+            <SleepForMs ms={1} />
           </Suspense>
         ))
       )
     ).toBe(
       <>
         <div id="B:1" data-sf>
-          <div>1</div>
+          <div>loading</div>
         </div>
-
         {safeSuspenseScript}
-
         <template id="N:1" data-sr>
-          2
+          1
         </template>
         <script id="S:1" data-ss>
           $KITA_RC(1)
@@ -73,126 +154,103 @@ describe('Suspense', () => {
     );
   });
 
-  test('Suspense async children & fallback', async () => {
+  test('async fallback with sync children returns content directly', async () => {
     expect(
       await text(
         renderToStream((r) => (
-          <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
-            <SleepForMs ms={2} />
+          <Suspense rid={r} fallback={Promise.resolve(<div>async fallback</div>)}>
+            <div>sync content</div>
           </Suspense>
         ))
       )
-    ).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-
-        {safeSuspenseScript}
+    ).toBe(<div>sync content</div>);
+  });
 
-        <template id="N:1" data-sr>
-          2
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
+  test('empty children', async () => {
+    expect(
+      await text(
+        renderToStream((r) => (
+          //@ts-expect-error - testing empty children
+          <Suspense rid={r} fallback={<div>fallback</div>}></Suspense>
+        ))
+      )
+    ).toBe('');
   });
 
-  test('Suspense async fallback sync children', async () => {
+  test('null children', async () => {
     expect(
       await text(
         renderToStream((r) => (
-          <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
-            <div>2</div>
+          <Suspense rid={r} fallback={<div>fallback</div>}>
+            {null}
           </Suspense>
         ))
       )
-    ).toBe(
-      <>
-        <div>2</div>
-      </>
-    );
+    ).toBe('');
   });
 
-  test('Multiple async renders cleanup', async () => {
-    await Promise.all(
-      Array.from({ length: 100 }, () => {
-        return text(
-          renderToStream((r) => {
-            return (
-              <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
-                <SleepForMs ms={2} />
-              </Suspense>
-            );
-          })
-        ).then((res) => {
-          expect(res).toBe(
-            <>
-              <div id="B:1" data-sf>
-                <div>1</div>
-              </div>
-
-              {safeSuspenseScript}
+  test('immediately resolving promise', async () => {
+    expect(
+      await text(
+        renderToStream((r) => (
+          <Suspense rid={r} fallback={<div>loading</div>}>
+            {Promise.resolve(<div>instant</div>)}
+          </Suspense>
+        ))
+      )
+    ).toContain('<div>instant</div>');
+  });
+});
 
-              <template id="N:1" data-sr>
-                2
-              </template>
-              <script id="S:1" data-ss>
-                $KITA_RC(1)
-              </script>
-            </>
-          );
-        });
-      })
+describe('Suspense - autoScript', () => {
+  test('includes SuspenseScript automatically for first async suspense', async () => {
+    const result = await text(
+      renderToStream((r) => (
+        <Suspense rid={r} fallback={<div>1</div>}>
+          {Promise.resolve(<div>2</div>)}
+        </Suspense>
+      ))
     );
+
+    expect(result).toContain('id="kita-html-suspense"');
+    expect(result).toContain('$KITA_RC');
   });
 
-  test('Multiple sync renders cleanup', async () => {
-    for (let i = 0; i < 10; i++) {
-      expect(
-        await text(
-          renderToStream((r) => (
-            <Suspense rid={r} fallback={Promise.resolve(<div>1</div>)}>
-              <SleepForMs ms={2} />
-            </Suspense>
-          ))
-        )
-      ).toBe(
-        <>
-          <div id="B:1" data-sf>
-            <div>1</div>
-          </div>
+  test('can disable autoScript', async () => {
+    SUSPENSE_ROOT.autoScript = false;
+
+    const result = await text(
+      renderToStream((r) => (
+        <Suspense rid={r} fallback={<div>1</div>}>
+          {Promise.resolve(<div>2</div>)}
+        </Suspense>
+      ))
+    );
 
-          {safeSuspenseScript}
+    expect(result).not.toContain('id="kita-html-suspense"');
+    expect(result).toContain('$KITA_RC(1)'); // still has the call
+  });
 
-          <template id="N:1" data-sr>
-            2
-          </template>
-          <script id="S:1" data-ss>
-            $KITA_RC(1)
-          </script>
-        </>
-      );
-    }
+  test('SuspenseScript is valid JavaScript', () => {
+    const scriptContent = safeSuspenseScript.slice(
+      safeSuspenseScript.indexOf('>') + 1,
+      -'</script>'.length
+    );
+    expect(() => eval(scriptContent)).not.toThrow();
   });
+});
 
-  test('Multiple children', async () => {
+describe('Suspense - multiple components', () => {
+  test('multiple sibling suspense components', async () => {
     expect(
       await text(
         renderToStream((r) => (
           <div>
             <Suspense rid={r} fallback={<div>1</div>}>
-              <SleepForMs ms={4} />
+              <SleepForMs ms={1} />
             </Suspense>
-
             <Suspense rid={r} fallback={<div>2</div>}>
-              <SleepForMs ms={5} />
-            </Suspense>
-
-            <Suspense rid={r} fallback={<div>3</div>}>
-              <SleepForMs ms={6} />
+              <SleepForMs ms={2} />
             </Suspense>
           </div>
         ))
@@ -206,879 +264,259 @@ describe('Suspense', () => {
           <div id="B:2" data-sf>
             <div>2</div>
           </div>
-          <div id="B:3" data-sf>
-            <div>3</div>
-          </div>
         </div>
-
         {safeSuspenseScript}
-
         <template id="N:1" data-sr>
-          4
+          1
         </template>
         <script id="S:1" data-ss>
           $KITA_RC(1)
         </script>
-
         <template id="N:2" data-sr>
-          5
+          2
         </template>
         <script id="S:2" data-ss>
           $KITA_RC(2)
         </script>
-
-        <template id="N:3" data-sr>
-          6
-        </template>
-        <script id="S:3" data-ss>
-          $KITA_RC(3)
-        </script>
       </>
     );
   });
 
-  test('Concurrent renders', async () => {
-    const promises = [];
+  test('mixed sync and async suspense components', async () => {
+    const result = await text(
+      renderToStream((r) => (
+        <div>
+          <Suspense rid={r} fallback={<div>sync-fallback</div>}>
+            <div>sync-content</div>
+          </Suspense>
+          <Suspense rid={r} fallback={<div>async-fallback</div>}>
+            {Promise.resolve(<div>async-content</div>)}
+          </Suspense>
+        </div>
+      ))
+    );
+
+    // Sync content appears inline, async has wrapper
+    expect(result).toContain('<div>sync-content</div>');
+    expect(result).toContain('data-sf');
+    expect(result).toContain('<div>async-content</div>');
+  });
+
+  test('concurrent renders with unique rids', async () => {
+    const results = await Promise.all([
+      text(
+        renderToStream((r) => (
+          <Suspense rid={r} fallback="a">
+            <SleepForMs ms={2}>A</SleepForMs>
+          </Suspense>
+        ))
+      ),
+      text(
+        renderToStream((r) => (
+          <Suspense rid={r} fallback="b">
+            <SleepForMs ms={1}>B</SleepForMs>
+          </Suspense>
+        ))
+      )
+    ]);
+
+    expect(results[0]).toContain('A');
+    expect(results[1]).toContain('B');
+  });
 
-    for (const seconds of [9, 4, 7]) {
-      const length = promises.push(
+  test('handles 100 concurrent renders without leaks', async () => {
+    await Promise.all(
+      Array.from({ length: 100 }, () =>
         text(
           renderToStream((r) => (
-            <div>
-              {Array.from({ length: seconds }, (_, i) => (
-                <Suspense rid={r} fallback={<div>{seconds - i} loading</div>}>
-                  <SleepForMs ms={seconds - i}>{seconds - i}</SleepForMs>
-                </Suspense>
-              ))}
-            </div>
+            <Suspense rid={r} fallback={<div>loading</div>}>
+              <SleepForMs ms={1} />
+            </Suspense>
           ))
         )
-      );
-
-      //@ts-expect-error - testing invalid promises
-      promises[length - 1]!.seconds = seconds;
-    }
+      )
+    );
+    // afterEach verifies no leaks
+  });
+});
 
-    const results = await Promise.all(promises);
+describe('Suspense - nested', () => {
+  test('nested suspense - inner resolves first', async () => {
+    const html = await text(
+      renderToStream((rid) => (
+        <div>
+          <Suspense rid={rid} fallback={<div>outer-loading</div>}>
+            {setTimeout(
+              20,
+              <div>
+                <Suspense rid={rid} fallback={<div>inner-loading</div>}>
+                  {setTimeout(10, <div>inner-content</div>)}
+                </Suspense>
+              </div>
+            )}
+          </Suspense>
+        </div>
+      ))
+    );
 
-    for (const [index, result] of results.entries()) {
-      //@ts-expect-error - testing invalid promises
-      const seconds = +promises[index]!.seconds;
+    // Inner resolves first, so N:1 appears before N:2
+    expect(html.indexOf('N:1')).toBeLessThan(html.indexOf('N:2'));
+    expect(html).toContain('inner-content');
+  });
 
-      expect(result).toBe(
-        <>
-          <div>
-            {Array.from({ length: seconds }, (_, i) => (
-              <div id={`B:${i + 1}`} data-sf>
-                <div>{seconds - i} loading</div>
+  test('nested suspense - outer resolves first', async () => {
+    const html = await text(
+      renderToStream((rid) => (
+        <div>
+          <Suspense rid={rid} fallback={<div>outer-loading</div>}>
+            {setTimeout(
+              10,
+              <div>
+                <Suspense rid={rid} fallback={<div>inner-loading</div>}>
+                  {setTimeout(20, <div>inner-content</div>)}
+                </Suspense>
               </div>
-            ))}
-          </div>
+            )}
+          </Suspense>
+        </div>
+      ))
+    );
 
-          {safeSuspenseScript}
+    expect(html).toContain('inner-content');
+  });
 
-          {Array.from({ length: seconds }, (_, i) => (
-            <>
-              <template id={`N:${seconds - i}`} data-sr>
-                {i + 1}
-              </template>
-              <script id={`S:${seconds - i}`} data-ss>
-                $KITA_RC({seconds - i})
-              </script>
-            </>
+  test('deeply nested parallel suspense with JSDOM validation', async () => {
+    const html = await text(
+      renderToStream((rid) => (
+        <div>
+          {Array.from({ length: 3 }, (_, i) => (
+            <Suspense rid={rid} fallback={<div>{i} outer loading</div>}>
+              <SleepForMs ms={i}>
+                <div>Outer {i}</div>
+                <Suspense rid={rid} fallback={<div>{i} inner loading</div>}>
+                  <SleepForMs ms={i}>
+                    <div>Inner {i}</div>
+                  </SleepForMs>
+                </Suspense>
+              </SleepForMs>
+            </Suspense>
           ))}
-        </>
-      );
-    }
+        </div>
+      ))
+    );
+
+    // Validate final DOM structure after script execution
+    const dom = new JSDOM(html, { runScripts: 'dangerously' });
+    const body = dom.window.document.body.innerHTML;
+
+    expect(body).toContain('<div>Outer 0</div>');
+    expect(body).toContain('<div>Inner 0</div>');
+    expect(body).toContain('<div>Outer 2</div>');
+    expect(body).toContain('<div>Inner 2</div>');
   });
+});
 
-  it('ensures autoScript works', async () => {
-    // Sync does not needs autoScript
-    expect(
-      await text(
-        renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>}>
-            <div>2</div>
-          </Suspense>
+describe('Suspense - error handling', () => {
+  test('throws when rid is not provided', async () => {
+    await expect(
+      text(
+        renderToStream(() => (
+          //@ts-expect-error - testing missing rid
+          <Suspense fallback={<div>1</div>}>{Promise.resolve('test')}</Suspense>
         ))
       )
-    ).toBe(<div>2</div>);
+    ).rejects.toThrow(/Suspense requires a `rid` to be specified./);
+  });
 
-    // Async renders SuspenseScript
-    expect(
-      await text(
+  test('sync error in children propagates', async () => {
+    await expect(
+      text(
         renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>}>
-            {Promise.resolve(<div>2</div>)}
+          <Suspense rid={r} fallback={<div>fallback</div>}>
+            <Throw />
           </Suspense>
         ))
       )
-    ).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>2</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
+    ).rejects.toThrow(/test/);
+  });
 
-    // Disable autoScript
-    SUSPENSE_ROOT.autoScript = false;
+  test('async error without catch handler propagates', async () => {
+    const err = new Error('async error');
 
-    // Async renders SuspenseScript
-    expect(
-      await text(
+    await expect(
+      text(
         renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>}>
-            {Promise.resolve(<div>2</div>)}
+          <Suspense rid={r} fallback={<div>loading</div>}>
+            {Promise.reject(err)}
           </Suspense>
         ))
       )
-    ).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-        <template id="N:1" data-sr>
-          <div>2</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
+    ).rejects.toBe(err);
   });
 
-  test('renderToStream', async () => {
-    const stream = renderToStream((r) => (
-      <div>
-        <Suspense rid={r} fallback={<div>2</div>}>
-          {Promise.resolve(<div>1</div>)}
+  test('catch handler as JSX element', async () => {
+    const result = await text(
+      renderToStream((r) => (
+        <Suspense rid={r} fallback={<div>loading</div>} catch={<div>error occurred</div>}>
+          {Promise.reject(new Error('fail'))}
         </Suspense>
-      </div>
-    ));
+      ))
+    );
 
-    expect(stream.readable).toBeTruthy();
+    expect(result).toContain('<div>error occurred</div>');
+  });
 
-    // emits end event
-    const fn = vi.fn();
-    stream.on('end', fn);
+  test('catch handler as function receives error', async () => {
+    const err = new Error('specific error');
+
+    const result = await text(
+      renderToStream((r) => (
+        <Suspense
+          rid={r}
+          fallback={<div>loading</div>}
+          catch={(e) => {
+            expect(e).toBe(err);
+            return <div>caught: {(e as Error).message}</div>;
+          }}
+        >
+          {Promise.reject(err)}
+        </Suspense>
+      ))
+    );
 
-    const chunks = [];
+    expect(result).toContain('caught: specific error');
+  });
 
-    for await (const chunk of stream) {
-      chunks.push(chunk);
-    }
-
-    expect(fn.mock.calls.length).toBe(1);
-    expect(chunks.length).toBe(2);
-
-    expect(chunks[0].toString()).toBe(
-      <div>
-        <div id="B:1" data-sf>
-          <div>2</div>
-        </div>
-      </div>
-    );
-
-    expect(chunks[1].toString()).toBe(
-      <>
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>1</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
-  });
-
-  test('renderToStream without suspense', async () => {
-    const stream = renderToStream(() => '<div>not suspense</div>', 1227);
-
-    expect(stream.readable).toBeTruthy();
-
-    const data = stream.read();
-
-    expect(data.toString()).toBe('<div>not suspense</div>');
-
-    expect(await text(stream)).toBe('');
-
-    expect(stream.closed).toBeTruthy();
-  });
-
-  it('tests suspense without children', async () => {
-    expect(
-      await text(
-        renderToStream((r) => (
-          //@ts-expect-error - testing invalid children
-          <Suspense rid={r} fallback={<div>1</div>}></Suspense>
-        ))
-      )
-    ).toBe('');
-  });
-
-  it('works with async error handlers', async () => {
-    expect(
-      await text(
-        renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>} catch={Promise.resolve(<div>2</div>)}>
-            {Promise.reject(<div>3</div>)}
-          </Suspense>
-        ))
-      )
-    ).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>2</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
-  });
-
-  it('works with deep suspense calls', async () => {
-    expect(
-      await text(
-        renderToStream((rid) => {
-          return (
-            <div>
-              <Suspense rid={rid} fallback={<div>1</div>}>
-                <div>2</div>
-
-                {setTimeout(10, <div>3</div>)}
-
-                {setTimeout(
-                  15,
-                  <div>
-                    <Suspense rid={rid} fallback={<div>4</div>}>
-                      <div>5</div>
-
-                      {setTimeout(20, <div>6</div>)}
-                    </Suspense>
-                  </div>
-                )}
-              </Suspense>
-            </div>
-          );
-        })
-      )
-    ).toBe(
-      <>
-        <div>
-          <div id="B:2" data-sf>
-            <div>1</div>
-          </div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:2" data-sr>
-          <div>2</div>
-          <div>3</div>
-          <div>
-            <div id="B:1" data-sf>
-              <div>4</div>
-            </div>
-          </div>
-        </template>
-        <script id="S:2" data-ss>
-          $KITA_RC(2)
-        </script>
-
-        <template id="N:1" data-sr>
-          <div>5</div>
-          <div>6</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
-  });
-
-  it('works with deep suspense calls resolving first', async () => {
-    expect(
-      await text(
-        renderToStream((rid) => {
-          return (
-            <div>
-              <Suspense rid={rid} fallback={<div>1</div>}>
-                <div>2</div>
-
-                {setTimeout(20, <div>3</div>)}
-
-                {setTimeout(
-                  15,
-                  <div>
-                    <Suspense rid={rid} fallback={<div>4</div>}>
-                      <div>5</div>
-
-                      {setTimeout(10, <div>6</div>)}
-                    </Suspense>
-                  </div>
-                )}
-              </Suspense>
-            </div>
-          );
-        })
-      )
-    ).toBe(
-      <>
-        <div>
-          <div id="B:2" data-sf>
-            <div>1</div>
-          </div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>5</div>
-          <div>6</div>
-        </template>
-
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-
-        <template id="N:2" data-sr>
-          <div>2</div>
-          <div>3</div>
-          <div>
-            <div id="B:1" data-sf>
-              <div>4</div>
-            </div>
-          </div>
-        </template>
-
-        <script id="S:2" data-ss>
-          $KITA_RC(2)
-        </script>
-      </>
-    );
-  });
-
-  it('works with parallel deep suspense calls resolving first', async () => {
-    const html = await text(
-      renderToStream((rid) => (
-        <div>
-          {Array.from({ length: 5 }, (_, i) => (
-            <Suspense rid={rid} fallback={<div>{i} fb outer</div>}>
-              <div>Outer {i}!</div>
-
-              <SleepForMs ms={i % 2 === 0 ? i / 2 : i}>
-                <Suspense rid={rid} fallback={<div>{i} fb inner!</div>}>
-                  <SleepForMs ms={i}>
-                    <div>Inner {i}!</div>
-                  </SleepForMs>
-                </Suspense>
-              </SleepForMs>
-            </Suspense>
-          ))}
-        </div>
-      ))
-    );
-
-    expect(html).toBe(
-      <>
-        <div>
-          <div id="B:2" data-sf>
-            <div>0 fb outer</div>
-          </div>
-          <div id="B:4" data-sf>
-            <div>1 fb outer</div>
-          </div>
-          <div id="B:6" data-sf>
-            <div>2 fb outer</div>
-          </div>
-          <div id="B:8" data-sf>
-            <div>3 fb outer</div>
-          </div>
-          <div id="B:10" data-sf>
-            <div>4 fb outer</div>
-          </div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>Inner 0!</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-
-        <template id="N:2" data-sr>
-          <div>Outer 0!</div>
-          <div id="B:1" data-sf>
-            <div>0 fb inner!</div>
-          </div>
-        </template>
-        <script id="S:2" data-ss>
-          $KITA_RC(2)
-        </script>
-
-        <template id="N:3" data-sr>
-          <div>Inner 1!</div>
-        </template>
-        <script id="S:3" data-ss>
-          $KITA_RC(3)
-        </script>
-
-        <template id="N:4" data-sr>
-          <div>Outer 1!</div>
-          <div id="B:3" data-sf>
-            <div>1 fb inner!</div>
-          </div>
-        </template>
-        <script id="S:4" data-ss>
-          $KITA_RC(4)
-        </script>
-
-        <template id="N:6" data-sr>
-          <div>Outer 2!</div>
-          <div id="B:5" data-sf>
-            <div>2 fb inner!</div>
-          </div>
-        </template>
-        <script id="S:6" data-ss>
-          $KITA_RC(6)
-        </script>
-
-        <template id="N:5" data-sr>
-          <div>Inner 2!</div>
-        </template>
-        <script id="S:5" data-ss>
-          $KITA_RC(5)
-        </script>
-
-        <template id="N:10" data-sr>
-          <div>Outer 4!</div>
-          <div id="B:9" data-sf>
-            <div>4 fb inner!</div>
-          </div>
-        </template>
-        <script id="S:10" data-ss>
-          $KITA_RC(10)
-        </script>
-
-        <template id="N:7" data-sr>
-          <div>Inner 3!</div>
-        </template>
-        <script id="S:7" data-ss>
-          $KITA_RC(7)
-        </script>
-
-        <template id="N:8" data-sr>
-          <div>Outer 3!</div>
-          <div id="B:7" data-sf>
-            <div>3 fb inner!</div>
-          </div>
-        </template>
-        <script id="S:8" data-ss>
-          $KITA_RC(8)
-        </script>
-
-        <template id="N:9" data-sr>
-          <div>Inner 4!</div>
-        </template>
-        <script id="S:9" data-ss>
-          $KITA_RC(9)
-        </script>
-      </>
-    );
-
-    // tests with final html result
-    expect(
-      new JSDOM(html, { runScripts: 'dangerously' }).window.document.body.innerHTML
-    ).toBe(
-      <>
-        <div>
-          <div>Outer 0!</div>
-          <div>Inner 0!</div>
-          <div>Outer 1!</div>
-          <div>Inner 1!</div>
-          <div>Outer 2!</div>
-          <div>Inner 2!</div>
-          <div>Outer 3!</div>
-          <div>Inner 3!</div>
-          <div>Outer 4!</div>
-          <div>Inner 4!</div>
-        </div>
-        {safeSuspenseScript}
-      </>
-    );
-  });
-
-  it('SuspenseScript is a valid JS code', () => {
-    // removes <script ...> and </script> tags
-    eval(
-      safeSuspenseScript.slice(safeSuspenseScript.indexOf('>') + 1, -'</script>'.length)
-    );
-  });
-
-  it('Suspense works when children resolves first', async () => {
-    async function Fallback() {
-      for (let i = 0; i < 10; i++) {
-        await setImmediate();
-      }
-      return 'Fallback!';
-    }
-
-    async function Child() {
-      await setImmediate();
-      return 'Child!';
-    }
-
-    const html = await text(
-      renderToStream((rid) => (
-        <div>
-          <Suspense rid={rid} fallback={<Fallback />}>
-            <Child />
-          </Suspense>
-        </div>
+  test('async catch handler', async () => {
+    const result = await text(
+      renderToStream((r) => (
+        <Suspense
+          rid={r}
+          fallback={<div>loading</div>}
+          catch={Promise.resolve(<div>async error handler</div>)}
+        >
+          {Promise.reject(new Error('fail'))}
+        </Suspense>
       ))
     );
 
-    expect(html).toBe(
-      <>
-        <div>
-          <div id="B:1" data-sf>
-            Fallback!
-          </div>
-        </div>
-
-        {safeSuspenseScript as 'safe'}
-
-        <template id="N:1" data-sr>
-          Child!
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
+    expect(result).toContain('<div>async error handler</div>');
   });
 
-  it('Suspense fails when children rejects first', async () => {
-    async function Fallback(): Promise<string> {
-      for (let i = 0; i < 10; i++) {
-        await setImmediate();
-      }
-
-      throw 'Fallback!';
-    }
-
-    async function Child(): Promise<string> {
-      await setImmediate();
-      return 'Child!';
-    }
-
-    try {
-      await text(
-        renderToStream((rid) => (
-          <div>
-            <Suspense rid={rid} fallback={<Fallback />}>
-              <Child />
-            </Suspense>
-          </div>
-        ))
-      );
-
-      throw new Error('should throw');
-    } catch (error) {
-      expect(error).toBe('Fallback!');
-    }
-  });
-});
-
-describe('Suspense errors', () => {
-  it('Leaks if rendered outside of renderToStream', () => {
-    try {
-      const outside = (
-        <Suspense rid={1} fallback={'1'}>
-          {Promise.resolve(2)}
-        </Suspense>
-      );
-
-      expect(outside).toBe(
-        <div id="B:1" data-sf>
-          1
-        </div>
-      );
-
-      const requestData = SUSPENSE_ROOT.requests.get(1);
-
-      expect(requestData?.running).toBe(1);
-      expect(requestData?.sent).toBe(false);
-    } finally {
-      expect(SUSPENSE_ROOT.requests.has(1)).toBeTruthy();
-
-      // cleans up
-      SUSPENSE_ROOT.requests.delete(1);
-    }
-  });
-
-  it('tests sync errors are thrown', async () => {
+  test('error in sync children after suspense registration', async () => {
     await expect(
       text(
-        renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>fallback</div>}>
-            <Throw />
-          </Suspense>
-        ))
-      )
-    ).rejects.toThrow(/test/);
-  });
-
-  it('test sync errors after suspense', async () => {
-    try {
-      await text(
         renderToStream((r) => (
           <div>
-            {/* Throws after suspense registration */}
             <Suspense rid={r} fallback={<div>fallback</div>}>
               {setTimeout(50).then(() => (
                 <div>1</div>
               ))}
             </Suspense>
-
-            <div>
-              <Throw />
-            </div>
-          </div>
-        ))
-      );
-
-      throw new Error('should throw');
-    } catch (error: any) {
-      expect(error.message).toBe('test');
-    }
-  });
-
-  it('tests suspense without error boundary', async () => {
-    const err = new Error('component failed');
-
-    try {
-      await text(
-        renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>}>
-            {Promise.reject(err)}
-          </Suspense>
-        ))
-      );
-
-      throw new Error('should throw');
-    } catch (error) {
-      expect(error).toBe(err);
-    }
-  });
-
-  it('tests stream suspense without error boundary', async () => {
-    const err = new Error('component failed');
-
-    const stream = renderToStream((r) => (
-      <Suspense rid={r} fallback={<div>1</div>}>
-        {Promise.reject(err)}
-      </Suspense>
-    ));
-
-    try {
-      for await (const data of stream) {
-        // Second stream would be the suspense result, which errors out
-        expect(data.toString()).toBe(
-          <div id="B:1" data-sf>
-            <div>1</div>
+            <Throw />
           </div>
-        );
-      }
-
-      throw new Error('should throw');
-    } catch (error) {
-      expect(error).toBe(err);
-    }
-  });
-
-  it('tests suspense with function error boundary', async () => {
-    const err = new Error('component failed');
-
-    // Sync does not needs autoScript
-    expect(
-      await text(
-        renderToStream((r) => (
-          <Suspense
-            rid={r}
-            fallback={<div>1</div>}
-            catch={(err2) => {
-              expect(err2).toBe(err);
-
-              return <div>3</div>;
-            }}
-          >
-            {Promise.reject(err)}
-          </Suspense>
-        ))
-      )
-    ).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-
-        {safeSuspenseScript}
-        <template id="N:1" data-sr>
-          <div>3</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
-  });
-
-  it('throws when rid is not provided', async () => {
-    await expect(
-      text(
-        renderToStream(() => (
-          //@ts-expect-error
-          <Suspense fallback={<div>1</div>}>{Promise.resolve('123')}</Suspense>
         ))
       )
-    ).rejects.toThrow(/Suspense requires a `rid` to be specified./);
-  });
-
-  it('tests suspense with error boundary', async () => {
-    const err = new Error('component failed');
-
-    // Sync does not needs autoScript
-    expect(
-      await text(
-        renderToStream((r) => (
-          <Suspense rid={r} fallback={<div>1</div>} catch={<div>3</div>}>
-            {Promise.reject(err)}
-          </Suspense>
-        ))
-      )
-    ).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>3</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
-  });
-
-  it('does not write anything if stream is closed', async () => {
-    const rendered = renderToStream(async (r) => {
-      // Closes the stream rightly after
-      const rd = SUSPENSE_ROOT.requests.get(r)!;
-
-      return (
-        <Suspense rid={r} fallback={<div>1</div>} catch={<div>2</div>}>
-          {setTimeout(5).then(async () => {
-            rd.stream.push(null);
-            await new Promise((res) => rd.stream.once('close', res));
-            return <div>3</div>;
-          })}
-        </Suspense>
-      );
-    });
-
-    const firstChunk = await new Promise<string>((resolve) => {
-      rendered.once('data', resolve);
-    });
-
-    await new Promise((res) => rendered.once('close', res));
-
-    expect(firstChunk.toString()).toBe(
-      <div id="B:1" data-sf>
-        <div>1</div>
-      </div>
-    );
-
-    // In case any .push() is called after the stream is closed,
-    // The error below would be thrown:
-    // Error [ERR_STREAM_PUSH_AFTER_EOF]: stream.push() after EOF
-
-    expect(await text(rendered)).toBe('');
-  });
-
-  it('does not allows to use the same rid', async () => {
-    let i = 1;
-
-    function render(r: number | string) {
-      return (
-        <Suspense rid={r} fallback={<div>{i++}</div>}>
-          {Promise.resolve(<div>{i++}</div>)}
-        </Suspense>
-      );
-    }
-
-    const stream = renderToStream(render, 1);
-
-    await expect(text(renderToStream(render, 1))).rejects.toThrow(
-      /The provided Request Id is already in use: 1./
-    );
-
-    const html = await text(stream);
-
-    expect(html).toBe(
-      <>
-        <div id="B:1" data-sf>
-          <div>1</div>
-        </div>
-
-        {safeSuspenseScript}
-
-        <template id="N:1" data-sr>
-          <div>2</div>
-        </template>
-        <script id="S:1" data-ss>
-          $KITA_RC(1)
-        </script>
-      </>
-    );
-  });
-
-  it('emits error if factory function throws', async () => {
-    const stream = renderToStream(async () => {
-      throw new Error('Factory error');
-    });
-
-    try {
-      await text(stream);
-
-      throw new Error('should throw');
-    } catch (error: any) {
-      expect(error.message).toBe('Factory error');
-    }
+    ).rejects.toThrow('test');
   });
 });
diff --git a/packages/ts-html-plugin/README.md b/packages/ts-html-plugin/README.md
index bf2f51b9d..2a0e4eacc 100644
--- a/packages/ts-html-plugin/README.md
+++ b/packages/ts-html-plugin/README.md
@@ -45,6 +45,7 @@
 - [Running as CLI](#running-as-cli)
 - [Handling Warnings](#handling-warnings)
 - [Vscode](#vscode)
+- [tsgo Compatibility](#tsgo-compatibility)
 - [Error codes](#error-codes)
   - [K601](#k601)
   - [K602](#k602)
@@ -177,6 +178,23 @@ current project's typescript version.
 
 <br />
 
+## tsgo Compatibility
+
+[tsgo](https://github.com/microsoft/typescript-go) (the native TypeScript compiler
+preview) does not currently implement support for Language Service Plugins. This means
+that when using tsgo, your IDE will not show XSS warnings and errors from this plugin.
+
+However, the `xss-scan` CLI tool will continue to work normally, as it uses the standard
+TypeScript compiler APIs. You can still use `xss-scan` in your CI/CD pipeline to catch XSS
+vulnerabilities even when developing with tsgo.
+
+```sh
+# This works regardless of whether you use tsgo or tsc
+xss-scan
+```
+
+<br />
+
 ## Error codes
 
 ### K601

From 2b3724528f178050975c73628e7226c2fd2341f8 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 02:44:35 +0700
Subject: [PATCH 17/22] code

---
 .changeset/stale-shrimps-spend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stale-shrimps-spend.md

diff --git a/.changeset/stale-shrimps-spend.md b/.changeset/stale-shrimps-spend.md
new file mode 100644
index 000000000..2367548f8
--- /dev/null
+++ b/.changeset/stale-shrimps-spend.md
@@ -0,0 +1,5 @@
+---
+'@kitajs/html': major
+---
+
+Removed deprecated @kitajs/html/register

From e76625c6d2f15cb126fe9adfa6b2d1cd64c235a5 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 03:01:58 +0700
Subject: [PATCH 18/22] docs

---
 packages/html/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/html/README.md b/packages/html/README.md
index ae7f85af4..88eda750d 100644
--- a/packages/html/README.md
+++ b/packages/html/README.md
@@ -568,7 +568,7 @@ namespace in every file you use JSX.
 ```tsx
 import { Html } from '@kitajs/html';
 
-const Html = (
+const html = (
   <div>
     <h1>Hello, world!</h1>
     <p>Welcome to the KitaJS HTML package.</p>
@@ -704,7 +704,7 @@ Or you can use the type option in your tsconfig to import the types globally:
 
 Often you will have a "template" html with doctype, things on the head, body and so on...
 Most users try to use them as a raw string and only use JSX for other components, but this
-is a not a good idea as
+is not a good idea as
 [you will have problems with it](https://github.com/nicojs/typed-html/issues/46).
 
 But you can always concatenate strings, like in this required use-case for `<doctype>`

From 82e180a0bbfaca453364828630c4f1dbb50a2185 Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 15:39:51 +0700
Subject: [PATCH 19/22] correctly set licence to MIT

---
 examples/fastify-htmx.tsx  | 109 -------------------------------------
 examples/http-server.tsx   |  55 -------------------
 packages/html/README.md    |   2 +-
 packages/html/src/index.ts |   2 +-
 4 files changed, 2 insertions(+), 166 deletions(-)
 delete mode 100644 examples/fastify-htmx.tsx
 delete mode 100644 examples/http-server.tsx

diff --git a/examples/fastify-htmx.tsx b/examples/fastify-htmx.tsx
deleted file mode 100644
index 4b0427f6a..000000000
--- a/examples/fastify-htmx.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/// <reference types="@kitajs/html/htmx" />
-
-import fastifyFormbody from '@fastify/formbody';
-import { Suspense } from '@kitajs/html/suspense';
-import fastify from 'fastify';
-import { setTimeout } from 'node:timers/promises';
-import { fastifyKitaHtml } from '../packages/fastify-html-plugin/types';
-
-const app = fastify({ logger: true });
-
-// Htmx requires body parsing
-app.register(fastifyFormbody);
-app.register(fastifyKitaHtml, {
-  // defaults
-  autoDoctype: true
-});
-
-const users: string[] = ['Arthur Fiorette'];
-
-app.get('/', (_req, rep) => {
-  rep.html(
-    <html lang="en">
-      <head>
-        <title>Fastify & Kita & Htmx</title>
-        <script src="https://unpkg.com/htmx.org@1" />
-      </head>
-      <body>
-        <h1>Users</h1>
-
-        <UserList />
-
-        <form hx-post="/users" hx-target="#user-list" hx-swap="beforeend">
-          <input name="username" required />
-          <button type="submit">Add user</button>
-        </form>
-
-        <div hx-boost>
-          <a href="/delay">Simulate this page with 5s delay</a>
-        </div>
-      </body>
-    </html>
-  );
-});
-
-// Simulates a slow response
-app.get('/delay', (req, rep) => {
-  rep.html(
-    <html lang="en">
-      <head>
-        <title>Fastify & Kita & Htmx</title>
-        <script src="https://unpkg.com/htmx.org@1" />
-      </head>
-      <body>
-        <h1>Users</h1>
-
-        <Suspense rid={req.id} fallback={<progress />}>
-          <UserList wait={5000} />
-        </Suspense>
-
-        <form hx-post="/users" hx-target="#user-list" hx-swap="beforeend">
-          <input name="username" required />
-          <button type="submit">Add user</button>
-        </form>
-
-        <div hx-boost>
-          <a href="/">Go back</a>
-        </div>
-      </body>
-    </html>
-  );
-});
-
-app.post(
-  '/users',
-  {
-    schema: {
-      body: {
-        type: 'object',
-        properties: { username: { type: 'string' } },
-        required: ['username']
-      }
-    }
-  },
-  (req, rep) => {
-    const { username } = req.body as { username: string };
-    users.push(username);
-
-    // Safe is required to avoid xss attacks.
-    // Use `xss-scan` CLI to automatically check for forgotten `safe` props.
-    rep.html(<li safe>{username}</li>);
-  }
-);
-
-/** Simple component that can simulate delay */
-async function UserList({ wait = 0 }) {
-  if (wait) {
-    await setTimeout(wait);
-  }
-
-  return (
-    <ul id="user-list">
-      {users.map((user) => (
-        <li safe>{user}</li>
-      ))}
-    </ul>
-  );
-}
-
-app.listen({ port: 3000 }).then(console.log);
diff --git a/examples/http-server.tsx b/examples/http-server.tsx
deleted file mode 100644
index b259d57c8..000000000
--- a/examples/http-server.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Html, { type PropsWithChildren } from '@kitajs/html';
-import { Suspense, renderToStream } from '@kitajs/html/suspense';
-import http from 'node:http';
-import { setTimeout } from 'node:timers/promises';
-
-async function SleepForMs({ ms, children }: PropsWithChildren<{ ms: number }>) {
-  await setTimeout(ms * 2);
-  return Html.contentsToString([children || String(ms)]);
-}
-
-function renderLayout(rid: number | string) {
-  return (
-    <html>
-      <div>
-        {Array.from({ length: 5 }, (_, i) => (
-          <Suspense rid={rid} fallback={<div>{i} Fallback Outer!</div>}>
-            <div>Outer {i}!</div>
-
-            <SleepForMs ms={i % 2 === 0 ? i * 2500 : i * 5000}>
-              <Suspense rid={rid} fallback={<div>{i} Fallback Inner!</div>}>
-                <SleepForMs ms={i * 5000}>
-                  <div>Inner {i}!</div>
-                </SleepForMs>
-              </Suspense>
-            </SleepForMs>
-          </Suspense>
-        ))}
-      </div>
-    </html>
-  );
-}
-
-http
-  .createServer((req, response) => {
-    // This simple webserver only has a index.html file
-    if (req.url !== '/' && req.url !== '/index.html') {
-      response.end();
-      return;
-    }
-
-    // ⚠️ Charset utf8 is important to avoid old browsers utf7 xss attacks
-    response.setHeader('Content-Type', 'text/html; charset=utf-8');
-
-    // Creates the html stream
-    const htmlStream = renderToStream(renderLayout);
-
-    // Pipes it into the response
-    htmlStream.pipe(response);
-
-    // If it's a fastify server just use
-    // response.type('text/html; charset=utf-8').send(htmlStream);
-  })
-  .listen(8080, () => {
-    console.log('Listening to http://localhost:8080');
-  });
diff --git a/packages/html/README.md b/packages/html/README.md
index 88eda750d..c58aff21b 100644
--- a/packages/html/README.md
+++ b/packages/html/README.md
@@ -1029,6 +1029,6 @@ Initial credits to [nicojs](https://github.com/nicojs) and
 [contributors](https://github.com/nicojs/typed-html/graphs/contributors) for the amazing
 work.
 
-Licensed under the [Apache License, Version 2.0](LICENSE).
+Licensed under the [MIT](LICENSE).
 
 <br />
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index d90fe8492..8678975ce 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -624,7 +624,7 @@ export const e: typeof escape = escape;
  * Fast and type safe HTML templates using JSX syntax.
  *
  * @module Html
- * @license Apache License Version 2.0
+ * @license MIT
  * @link https://github.com/kitajs/html
  * @link https://www.npmjs.com/package/@kitajs/html
  */

From 2d4ca0ebbc271827f455e8c341c4a6733fa220cd Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 15:40:25 +0700
Subject: [PATCH 20/22] readme examples

---
 examples/README.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 examples/README.md

diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 000000000..d8609825b
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,39 @@
+# KitaJS HTML Examples
+
+Real-world examples demonstrating how to use KitaJS HTML to build server-rendered
+applications with JSX.
+
+## What is KitaJS HTML?
+
+KitaJS HTML is a super-fast JSX runtime that generates HTML strings directly, without a
+virtual DOM. Perfect for server-side rendering, static site generation, HTMX applications,
+and streaming HTML with Suspense.
+
+## Running Examples
+
+Each example directory contains its own `package.json`. To run an example:
+
+```bash
+cd examples/<example-name>
+pnpm install
+pnpm dev
+```
+
+Check each example's directory for specific details and implementation patterns.
+
+## Documentation
+
+Learn more about the packages used in these examples:
+
+- **[@kitajs/html](../packages/html/README.md)** - Core JSX runtime, async components,
+  Suspense
+- **[@kitajs/ts-html-plugin](../packages/ts-html-plugin/README.md)** - XSS detection and
+  prevention
+- **[@kitajs/fastify-html-plugin](../packages/fastify-html-plugin/README.md)** - Fastify
+  integration
+
+## Getting Help
+
+- 💬 [Discord Community](https://kitajs.org/discord)
+- 🐛 [GitHub Issues](https://github.com/kitajs/html/issues)
+- 📚 [Full Documentation](https://github.com/kitajs/html)

From ee567f8a3acfabc19a49f229deea7d1d029f7cbc Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 16:03:08 +0700
Subject: [PATCH 21/22] bin fixes

---
 .changeset/metal-hairs-juggle.md          |  5 ++
 .github/workflows/ci.yml                  |  2 +-
 .gitignore                                | 15 ++---
 benchmarks/runner/package.json            |  2 +-
 package.json                              |  8 ++-
 packages/fastify-html-plugin/package.json |  1 +
 packages/ts-html-plugin/bin/index.js      |  8 +++
 packages/ts-html-plugin/package.json      |  4 +-
 packages/ts-html-plugin/src/cli.ts        |  6 +-
 pnpm-lock.yaml                            | 70 ++++++++++++++++++++++-
 turbo.json                                | 27 +++++++++
 11 files changed, 124 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/metal-hairs-juggle.md
 create mode 100755 packages/ts-html-plugin/bin/index.js
 create mode 100644 turbo.json

diff --git a/.changeset/metal-hairs-juggle.md b/.changeset/metal-hairs-juggle.md
new file mode 100644
index 000000000..111d507e9
--- /dev/null
+++ b/.changeset/metal-hairs-juggle.md
@@ -0,0 +1,5 @@
+---
+'@kitajs/ts-html-plugin': patch
+---
+
+Fixed CLI inconsistencies with a dedicated bin js file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 265762c35..b894c961b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -33,7 +33,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: pnpm build
+        run: pnpm build-all
 
       - name: Test
         run: pnpm test
diff --git a/.gitignore b/.gitignore
index e898f78fe..8812c91f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,12 +1,9 @@
-
-node_modules
-
-index.tsbuildinfo
-dist
-coverage
 .DS_Store
-
+.turbo
+*.cpuprofile
 *.log
 *.tsbuildinfo
-
-benchmarks/runner/profile.cpuprofile
\ No newline at end of file
+*.tsbuildinfo
+coverage
+dist
+node_modules
\ No newline at end of file
diff --git a/benchmarks/runner/package.json b/benchmarks/runner/package.json
index e983e95f2..76ddd652c 100644
--- a/benchmarks/runner/package.json
+++ b/benchmarks/runner/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "benchmark": "NODE_ENV=production node --expose-gc lib/benchmark.js",
     "profile": "node lib/profile.js",
     "start": "NODE_ENV=production node --expose-gc lib/benchmark.js",
-    "pretest": "pnpm --filter=@kitajs/bench-html-kitajs --filter=@kitajs/bench-html-reactjsx --filter=@kitajs/bench-html-react build",
     "test": "node lib/react-equality.js"
   },
   "dependencies": {
diff --git a/package.json b/package.json
index 95ff72637..45018b8ae 100644
--- a/package.json
+++ b/package.json
@@ -13,15 +13,16 @@
   "license": "MIT",
   "author": "Arthur Fiorette <kita@arthur.place>",
   "scripts": {
-    "bench": "pnpm -r --filter \"@kitajs/bench-html-*\" build && pnpm --filter \"@kitajs/bench-html-runner\" start",
-    "build": "pnpm -r --filter \"./packages/*\" --aggregate-output build",
+    "bench": "turbo run benchmark",
+    "build": "turbo run build --filter=\"./packages/*\"",
+    "build-all": "turbo run build",
     "changeset": "changeset",
     "ci-publish": "pnpm publish -r --access public && changeset tag",
     "ci-version": "changeset version && pnpm install --no-frozen-lockfile",
     "format": "prettier --write .",
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky",
-    "test": "pnpm -r --no-bail --aggregate-output --parallel test"
+    "test": "turbo run test"
   },
   "devDependencies": {
     "@arthurfiorette/prettier-config": "^1.0.12",
@@ -34,6 +35,7 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-packagejson": "^3.0.0",
     "self-ts-plugin": "link:packages/ts-html-plugin",
+    "turbo": "^2.7.6",
     "typescript": "catalog:"
   },
   "packageManager": "pnpm@10.28.1",
diff --git a/packages/fastify-html-plugin/package.json b/packages/fastify-html-plugin/package.json
index a806ede3e..b7e70a824 100644
--- a/packages/fastify-html-plugin/package.json
+++ b/packages/fastify-html-plugin/package.json
@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@fastify/formbody": "catalog:",
+    "@kitajs/html": "workspace:^",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
     "@typescript/native-preview": "catalog:",
diff --git a/packages/ts-html-plugin/bin/index.js b/packages/ts-html-plugin/bin/index.js
new file mode 100755
index 000000000..e74a2954b
--- /dev/null
+++ b/packages/ts-html-plugin/bin/index.js
@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+const { main } = require('../dist/cli.js');
+
+void main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/packages/ts-html-plugin/package.json b/packages/ts-html-plugin/package.json
index 518fb9e1e..15c557f5e 100644
--- a/packages/ts-html-plugin/package.json
+++ b/packages/ts-html-plugin/package.json
@@ -16,8 +16,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "ts-html-plugin": "dist/cli.js",
-    "xss-scan": "dist/cli.js"
+    "ts-html-plugin": "bin/index.js",
+    "xss-scan": "bin/index.js"
   },
   "files": [
     "dist",
diff --git a/packages/ts-html-plugin/src/cli.ts b/packages/ts-html-plugin/src/cli.ts
index d0081c738..20570f306 100644
--- a/packages/ts-html-plugin/src/cli.ts
+++ b/packages/ts-html-plugin/src/cli.ts
@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 import chalk from 'chalk';
 import fs from 'node:fs';
 import path from 'node:path';
@@ -103,7 +101,7 @@ function fileExists(p: string) {
   }
 }
 
-async function main() {
+export async function main() {
   const args = await yargs(hideBin(process.argv)).help(false).version(version).argv;
 
   if (args.help || args.h) {
@@ -229,5 +227,3 @@ async function main() {
   console.log(chalk.green(`No XSS vulnerabilities found in ${files.length} files!`));
   process.exit(0);
 }
-
-main().catch(console.error);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0e413114..5f71fa944 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,6 +89,9 @@ importers:
       self-ts-plugin:
         specifier: link:packages/ts-html-plugin
         version: link:packages/ts-html-plugin
+      turbo:
+        specifier: ^2.7.6
+        version: 2.7.6
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -374,9 +377,6 @@ importers:
 
   packages/fastify-html-plugin:
     dependencies:
-      '@kitajs/html':
-        specifier: workspace:^
-        version: link:../html
       '@kitajs/ts-html-plugin':
         specifier: workspace:^
         version: link:../ts-html-plugin
@@ -387,6 +387,9 @@ importers:
       '@fastify/formbody':
         specifier: 'catalog:'
         version: 8.0.2
+      '@kitajs/html':
+        specifier: workspace:^
+        version: link:../html
       '@types/jsdom':
         specifier: 'catalog:'
         version: 27.0.0
@@ -2226,6 +2229,40 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  turbo-darwin-64@2.7.6:
+    resolution: {integrity: sha512-bYu0qnWju2Ha3EbIkPCk1SMLT3sltKh1P/Jy5FER6BmH++H5z+T5MHh3W1Xoers9rk4N1VdKvog9FO1pxQyjhw==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.7.6:
+    resolution: {integrity: sha512-KCxTf3Y1hgNLYIWRLw8bwH8Zie9RyCGoxAlXYsCBI/YNqBSR+ZZK9KYzFxAqDaVaNvTwLFv3rJRGsXOFWg4+Uw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.7.6:
+    resolution: {integrity: sha512-vjoU8zIfNgvJR3cMitgw7inEoi6bmuVuFawDl5yKtxjAEhDktFdRBpGS3WojD4l3BklBbIK689ssXcGf21LxRA==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.7.6:
+    resolution: {integrity: sha512-TcMpBvTqZf+1DptrVYLbZls7WY1UVNDTGaf0bo7/GCgWYv5eZHCVo4Td7kCJeDU4glbXg67REX0md0S0V6ghMg==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.7.6:
+    resolution: {integrity: sha512-1/MhkYldiihjneY8QnnDMbAkHXn/udTWSVYS94EMlkE9AShozsLTTOT1gDOpX06EfEW5njP09suhMvxbvwuwpQ==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.7.6:
+    resolution: {integrity: sha512-0wDVnUJLFAWm4ZzOQFDkbyyUqaszorTGf3Rdc22IRIyJTTLd6ajqdb+cWD89UZ1RKr953+PZR1gqgWQY4PDuhA==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.7.6:
+    resolution: {integrity: sha512-PO9AvJLEsNLO+EYhF4zB+v10hOjsJe5kJW+S6tTbRv+TW7gf1Qer4mfjP9h3/y9h8ZiPvOrenxnEgDtFgaM5zw==}
+    hasBin: true
+
   typed-html@3.0.1:
     resolution: {integrity: sha512-JKCM9zTfPDuPqQqdGZBWSEiItShliKkBFg5c6yOR8zth43v763XkAzTWaOlVqc0Y6p9ee8AaAbipGfUnCsYZUA==}
     engines: {node: '>=12'}
@@ -4187,6 +4224,33 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  turbo-darwin-64@2.7.6:
+    optional: true
+
+  turbo-darwin-arm64@2.7.6:
+    optional: true
+
+  turbo-linux-64@2.7.6:
+    optional: true
+
+  turbo-linux-arm64@2.7.6:
+    optional: true
+
+  turbo-windows-64@2.7.6:
+    optional: true
+
+  turbo-windows-arm64@2.7.6:
+    optional: true
+
+  turbo@2.7.6:
+    optionalDependencies:
+      turbo-darwin-64: 2.7.6
+      turbo-darwin-arm64: 2.7.6
+      turbo-linux-64: 2.7.6
+      turbo-linux-arm64: 2.7.6
+      turbo-windows-64: 2.7.6
+      turbo-windows-arm64: 2.7.6
+
   typed-html@3.0.1: {}
 
   typescript@5.9.3: {}
diff --git a/turbo.json b/turbo.json
new file mode 100644
index 000000000..27dfa3b7f
--- /dev/null
+++ b/turbo.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://turborepo.dev/schema.json",
+  "concurrency": "90%",
+  "daemon": false,
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputLogs": "new-only"
+    },
+    "test": {
+      "dependsOn": ["^build"],
+      "outputLogs": "new-only"
+    },
+    "benchmark": {
+      "cache": false,
+      "dependsOn": ["^build"],
+      "outputLogs": "new-only"
+    },
+    "start": {
+      "cache": false,
+      "dependsOn": ["^build"],
+      "outputLogs": "new-only",
+      "persistent": true
+    }
+  },
+  "ui": "tui"
+}

From 931bba119f74af79d617db3875fb61c38064f37a Mon Sep 17 00:00:00 2001
From: Arthur Fiorette <me@arthur.place>
Date: Sun, 25 Jan 2026 16:07:45 +0700
Subject: [PATCH 22/22] turbo actions cache

---
 .github/workflows/ci.yml      | 8 ++++++++
 .github/workflows/release.yml | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b894c961b..f1a4b6de0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -32,6 +32,14 @@ jobs:
       - name: Install packages
         run: pnpm install --frozen-lockfile
 
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
       - name: Build
         run: pnpm build-all
 
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 9c2382666..43fa884a6 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -44,6 +44,14 @@ jobs:
       - name: Install packages
         run: pnpm install --frozen-lockfile
 
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
       - name: Build
         run: pnpm build