diff --git a/.github/workflows/test_and_release.yml b/.github/workflows/test_and_release.yml
index 838c8cc..6746be9 100644
--- a/.github/workflows/test_and_release.yml
+++ b/.github/workflows/test_and_release.yml
@@ -11,24 +11,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v7
-
-      - uses: actions/setup-python@v7
-        with:
-          python-version: "3.12"
-
-      # Install and run pre-commit
-      - run: |
-          pip install pre-commit
-          pre-commit install
-          pre-commit run --all-files
+      - uses: astral-sh/setup-uv@v6
+      - run: uvx nox -s pre_commit
 
   pytest:
-    name: Pytest ${{ matrix.config.name }}
+    name: Pytest ${{ matrix.config.name }} - Python ${{ matrix.python-version }}
     runs-on: ${{ matrix.config.os }}
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["3.12"]
+        python-version: ["3.10", "3.11", "3.12", "3.13", "3.14"]
         config:
           - { name: "Linux", os: ubuntu-latest }
         # - {
@@ -45,41 +37,18 @@ jobs:
         shell: bash
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v7
-
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v7
-        with:
-          python-version: ${{ matrix.python-version }}
-
+      - uses: actions/checkout@v7
+      - uses: astral-sh/setup-uv@v6
       - name: Set Up Node
         uses: actions/setup-node@v7
         with:
           node-version: 24
-
-      - name: Build Vue2 App
-        run: |
-          cd vue2-app
-          npm ci
-          npm run build
-
-      - name: Build Vue3 App
-        run: |
-          cd vue3-app
-          npm ci
-          npm run build
-
-      - name: Install and Run Tests
+      - name: Run Tests (via nox)
         run: |
-          pip install .[test]
-          # Install requirements for playwright
-          playwright install
-          # Run the tests with coverage so we get a coverage report too
-          pip install coverage
-          coverage run --source . -m pytest -s .
-          # Print the coverage report
-          coverage report -m
+          # noxfile.py builds the Vue2/Vue3 client bundles, installs the
+          # package with test extras, installs Playwright, and runs pytest
+          # under coverage for this specific Python version.
+          uvx nox -s "tests-${{ matrix.python-version }}"
 
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v7
@@ -101,6 +70,7 @@ jobs:
           cd js-lib
           npm ci
           npm run typecheck
+          npm test
           npm run build
 
       - name: Build Vue2 App
@@ -115,6 +85,13 @@ jobs:
           npm ci
           npm run build
 
+      - name: Build React App
+        run: |
+          cd react-app
+          npm ci
+          npm test
+          npm run build
+
   release:
     needs: [pre-commit, pytest, test-npm-build]
     runs-on: ubuntu-latest
@@ -137,6 +114,12 @@ jobs:
         with:
           node-version: 24
 
+      - name: Build js-lib
+        run: |
+          cd js-lib
+          npm ci
+          npm run build
+
       - name: Build Vue2 App
         run: |
           cd vue2-app
@@ -149,6 +132,12 @@ jobs:
           npm ci
           npm run build
 
+      - name: Build React App
+        run: |
+          cd react-app
+          npm ci
+          npm run build
+
       - name: Python Semantic Release
         id: release
         uses: relekang/python-semantic-release@v10.6.2
diff --git a/README.rst b/README.rst
index 7fcaf81..c07e3cc 100644
--- a/README.rst
+++ b/README.rst
@@ -116,7 +116,10 @@ Python environment setup
     pre-commit install --hook-type commit-msg
 
     # Run pre-commit
-    pre-commit run --all-files
+    nox -s pre_commit
+
+    # Run tests for only 1 python version
+    nox -s tests-3.12
 
 
 JavaScript dependency
diff --git a/docs/adding-support-for-react/react-app-implementation-plan.md b/docs/adding-support-for-react/react-app-implementation-plan.md
new file mode 100644
index 0000000..84c5906
--- /dev/null
+++ b/docs/adding-support-for-react/react-app-implementation-plan.md
@@ -0,0 +1,526 @@
+# `react-app/` — React client for `client_type="react"`
+
+> **Status: implementation plan, not yet built.** Written after
+> `src/trame_client/widgets/react.py`, `widgets/core.py`'s `client_type`
+> dispatch, and `widgets/generator.py`'s React-flavored prop generation were
+> already implemented and committed (covered by `tests/test_react.py`).
+> `module/__init__.py`'s `client_type == "react"` branch is still a no-op
+> because no client bundle exists yet — this document designs that missing
+> piece. Cross-referenced against the design docs in this directory
+> (`react-getting-started.md`, `react-refs.md`, `react-scoped-slots.md`,
+> `react-text-interpolation.md`, `vue-vs-react-with-trame.md`) and against the
+> existing `vue3-app/` and `js-lib/` implementations it's meant to mirror.
+
+## Context
+
+`trame-client` currently ships two Vue-based clients (`vue2-app`, `vue3-app`, built into `src/trame_client/module/{vue2,vue3}-www` and served by `module/vue2.py`/`module/vue3.py`). The Python side has been extending support for a third, `client_type="react"`: `src/trame_client/widgets/react.py` (a full `AbstractElement._impl` implementation producing a serializable `{tag, props, children}` JSON tree instead of a Vue template string), `widgets/core.py` (dispatches `_impl` by `client_type`), and `widgets/generator.py` (emits React-flavored camelCase prop names for every generated `html.*` element) are already implemented, committed on this branch, and covered by `tests/test_react.py`. `module/__init__.py`'s `client_type == "react"` branch is still a no-op (`pass`) because **no client bundle exists yet** — there is no `react-app/` to build one.
+
+This plan designs that missing piece: a Vite/React app, structurally mirroring `vue3-app/`, that (a) connects to the trame server using `js-lib` (published as `@kitware/trame`, already a complete, framework-agnostic reimplementation of the connect/state/wslink layer — do not duplicate it, the way `vue3-app` still duplicates its own older copy of that logic), and (b) walks the JSON tree `react.py` produces via a generic `<TrameNode>` renderer, per the design worked out in `docs/adding-support-for-react/`.
+
+**Scope, per discussion with the user:** core primitive layer only — the app shell, `<TrameNode>`, `Bind`/`Callback`/`If`/`For`/`Slot`/`ref` resolution, and just enough of `widgets/trame.py`'s helper widgets to boot (`ServerTemplate`, `Loading`). The wider widget ecosystem and the rest of `widgets/trame.py` (`Getter`, `DeepReactive`, `Handler`, `Style`, `Script`, `ClientTriggers`, `SizeObserver`, `LifeCycleMonitor`, `ClientStateChange`) stay Vue-only for now — several of them currently poke raw Vue `v-slot`/`v-bind` strings directly and aren't react-compatible; fixing that is explicitly deferred, noted as follow-up.
+
+**Reactivity, per discussion with the user:** no new state-management dependency (no Redux/Zustand/Jotai/Valtio). Build on React's `useSyncExternalStore` wired to js-lib's `State.watch(keys, fn)` (already a dynamic per-key subscription primitive), plus a small home-grown expression evaluator that auto-discovers which state keys/scope vars each `{js: ...}` expression actually reads (Valtio-style dependency tracking via a `Proxy`, but self-contained).
+
+---
+
+## 1. Scaffold
+
+```
+react-app/
+  package.json
+  vite.config.js
+  index.html
+  src/
+    main.jsx
+    style.css
+    setup.js              # page-resource loading, ported from vue3-app/src/core/trame/setup.js
+    messageChannel.js      # verbatim port of vue3-app/src/messageChannel.js
+    components/
+      TrameApp.jsx
+      TrameTemplate.jsx
+      TrameLoading.jsx
+      TrameReconnect.jsx
+      TrameNode.jsx
+      ReactIf.jsx
+      ReactFor.jsx
+    runtime/
+      trameContext.js     # React context wrapping {trame, getRefCallback}
+      scope.js             # scope-chain (extendScope, buildMergedScope, hasOwnLocal)
+      expr.js               # compile cache + Proxy dependency tracking (evalTracked)
+      resolveNode.js         # useResolvedNode: the one hook-call-site per TrameNodeOne
+      refs.js                 # callback-ref registry
+      tags.js                  # tag -> component registry (resolveTag/registerTag)
+  tests/  (vitest, mirrors js-lib/tests/ conventions)
+```
+
+### `package.json`
+
+```json
+{
+  "name": "trame-app-react",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --emptyOutDir",
+    "debug": "vite build --sourcemap -m dev",
+    "dev": "vite",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@kitware/trame": "file:../js-lib",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "@testing-library/react": "^16.0.0",
+    "jsdom": "^27.4.0",
+    "vite": "^8.0.11",
+    "vitest": "^4.1.11"
+  }
+}
+```
+
+- **React 19**: `react-refs.md` §2 relies on function components taking `ref` as an ordinary prop with no `forwardRef` boilerplate.
+- **`@kitware/trame: file:../js-lib`**: no npm-workspace tooling exists in this repo (confirmed — no root `package.json`, no `pnpm-workspace.yaml`); `file:` is the simplest way to consume the in-repo js-lib during co-development, and resolves through js-lib's real `dist/` build (its `package.json` `main`/`module`/`types` point at `dist/trame.umd.js`/`dist/trame.mjs`/`dist/main.d.ts`) — **so `js-lib` must be built (`npm ci && npm run build`) before `react-app` is `npm ci`'d/built.**
+- **One required, additive change to js-lib**: `js-lib/src/main.ts` currently only exports `Trame` (default) + types. `react-app` also needs `configDecorator`/`createClient` (from `js-lib/src/wslink/index.ts`) and `extractURLParameters` (from `js-lib/src/URLExtract.ts`) — neither is re-exported today. Add them as named exports from `main.ts`. This is additive (no signature changes to anything existing), and is the only js-lib change this plan requires.
+
+### `vite.config.js`
+
+```js
+import react from "@vitejs/plugin-react";
+
+export default {
+  base: "./",
+  plugins: [react()],
+  build: {
+    outDir: "../src/trame_client/module/react-www",
+  },
+};
+```
+
+Mirrors `vue3-app/vite.config.js` exactly, plus the JSX plugin (for react-app's *own* components — unrelated to the "no compiler ships for the widget tree" decision: `TrameNode` still calls `React.createElement` directly for the dynamic tree since `tag` is a runtime string, never JSX).
+
+### `index.html`
+
+Same shape as `vue3-app/index.html` (meta tags, `data-app-name`/`data-launcher-retry` dataset attrs consumed by `configDecorator`, `#app` div, the `loading.tpl`-fetch-and-inline-before-connect trick), minus `<script src="vue.global.js">` (no global Vue runtime), with `<script type="module" src="/src/main.jsx"></script>`.
+
+### `src/main.jsx`
+
+Bootstrap sequence ported from `vue3-app/src/main.js`, rebased directly onto js-lib's `Trame` class (no `core/trame`/`core/wslink` duplication):
+
+1. Cross-origin-safe `window.parent.trameJupyter.init` check (verbatim).
+2. `const trame = new Trame(window.WSLINK)`; `configDecorator({application: "trame", useUrl: true})`.
+3. URL-param cleanup (verbatim port of the `paramsToClean` block).
+4. `await trame.connect(config)` — on failure, render `<TrameReconnect>`/`<TrameLoading>` directly via `createRoot(...).render(...)` instead of Vue's pre-mount state-key-write trick (React doesn't need a template round-trip through state to render arbitrary content before the app tree exists — simpler than the Vue original, not a gap).
+5. `console.error` override forwarding to `trame.client.getRemote().Trame.sendError(...)` (verbatim).
+6. `handlePageResources(trame.state.get())` from `./setup.js` — styles/scripts/module_scripts/favicon/title only (see §9, `trame__vue_use` has no React equivalent and is dropped).
+7. `createRoot(document.getElementById("app")).render(<TrameApp trame={trame} />)`.
+8. Bottom-of-file service-worker (`enableSharedArrayBufferServiceWorker`) and `wsChannel`/`MessageChannel` proxy bootstrapping — verbatim port of the corresponding block in `vue3-app/src/main.js`.
+
+### `src/setup.js`, `src/messageChannel.js`
+
+Ports of `vue3-app/src/core/trame/setup.js` and `vue3-app/src/messageChannel.js` — both are framework-agnostic DOM/browser code with no Vue dependency; copy near-verbatim. `setup.js` drops the `trame__vue_use` → `state.trame__vue_use.map(...)` tail of `handlePageResources` (no plugin-registration concept in React).
+
+---
+
+## 2. `<TrameNode>` — the generic JSON-tree renderer
+
+`src/components/TrameNode.jsx` is two components:
+
+```jsx
+export default function TrameNode({ nodes, scope }) {
+  if (nodes == null) return null;
+  const trame = useTrame();
+  const list = Array.isArray(nodes) ? nodes : [nodes];
+  return list.map((node, i) => (
+    <TrameNodeOne key={computeNodeKey(node, scope, trame, i)} node={node} scope={scope} />
+  ));
+}
+
+function TrameNodeOne({ node, scope }) {
+  if (typeof node === "string") return node;
+  if (isBindLeaf(node)) return <ExprLeaf jsExpression={node.js} scope={scope} />;
+  if (!node || node.tag === undefined) return null;
+
+  const Component = resolveTag(node.tag);
+  const { props } = useResolvedNode(node, scope);   // the ONE hook-call-site, see §2.2
+
+  if (isStructuralTag(node.tag)) {
+    return createElement(Component, { ...props, rawChildren: node.children, scope });
+  }
+  const children = node.children?.length
+    ? createElement(TrameNode, { nodes: node.children, scope })
+    : undefined;
+  return createElement(Component, props, children);
+}
+```
+
+- **`computeNodeKey`** (plain function, no hooks): if `node?.props?.key` is a `{js: expr}` leaf, evaluate it synchronously (via `evalTracked`, no subscription — the enclosing `TrameNode` already re-renders whenever its own reactive inputs change, so a fresh read here is always current); if it's a plain scalar, use it directly; otherwise fall back to the array index `i`. This has to happen at the *parent's* `.map()` step, not inside `TrameNodeOne`, because React needs an element's `key` before that element is even created/mounted.
+- **Structural tags** (`ReactIf`, `ReactFor`) get their raw, unresolved `children` + the current `scope` passed as ordinary props (`rawChildren`, `scope`) instead of a pre-built `<TrameNode>` — they need to control *whether* and *with what extended scope* their children render, which a pre-resolved child element can't express. Every other tag (DOM host tags, and any future custom-widget tag) gets its children pre-wrapped in a nested `<TrameNode>`, exactly like any other prop.
+- **`key=`** needs no special-casing beyond `computeNodeKey` above: React's `createElement` already strips a `key` found in the props object before handing `props` to the component, so `key` also going through the normal reactive-prop path in `useResolvedNode` (§2.2) alongside everything else is harmless, if slightly redundant.
+
+### 2.1 Prop-resolution order
+
+By **prop key** first, then by **value shape**, matching `react-refs.md` §5 / `react-scoped-slots.md` §4 exactly:
+
+1. `key === "ref"` → dispatch to the ref-callback registry (§5). `ref`'s value is *always* a plain string (a name to register under), never wrapped — checked by key, not shape.
+2. Everything else, checked by value shape: `"js" in value` → reactive expression; `"callback" in value` → event handler; `"slot" in value` → render-prop generator; otherwise → plain passthrough.
+
+### 2.2 `useResolvedNode` — one hook-call-site per node (`runtime/resolveNode.js`)
+
+A naive design calls a hook (`useTrameExpr`, `useMemo` for each callback, ...) once per prop while iterating `Object.entries(node.props)` — that's a **Rules-of-Hooks violation risk** (hook-call count/order would depend on how many reactive/callback props a given node happens to have) and needlessly creates one `useSyncExternalStore` subscription per reactive prop instead of one per node. Instead, `useResolvedNode(node, scope)` is a **single hook**, always called the same way regardless of node shape, that internally batches all of a node's reactive props into one subscription:
+
+```js
+export function useResolvedNode(node, scope) {
+  const trame = useTrame();
+
+  // Pure, non-hook classification of node.props — cheap object walk.
+  const { reactive, callbacks, slots, ref, static_ } = classifyProps(node.props);
+
+  // One subscription for the whole node's reactive props (Bind-valued
+  // props, including a Bind-valued `key`), keyed on the UNION of every
+  // state key any of them actually reads.
+  const trackedKeys = useMemo(() => {
+    const merged = buildMergedScope(scope, trame.state);
+    const keys = new Set();
+    reactive.forEach(([, expr]) => evalTracked(expr, merged).keys.forEach((k) => keys.add(k)));
+    return [...keys];
+  }, [reactive, scope, trame.state]);
+
+  const reactiveValues = useSyncExternalStore(
+    (onChange) => trame.state.watch(trackedKeys, onChange),
+    () => Object.fromEntries(
+      reactive.map(([key, expr]) => [key, evalTracked(expr, buildMergedScope(scope, trame.state)).value]),
+    ),
+  );
+
+  // One memo for all callback props, content-keyed (not identity-keyed) so
+  // a re-render doesn't mint fresh handler functions unless the underlying
+  // js/trigger/args/modifiers actually changed (see §2.3, §6).
+  const callbackDepKey = callbacks.map(([k, v]) => k + JSON.stringify(v)).join("|");
+  const callbackValues = useMemo(
+    () => Object.fromEntries(callbacks.map(([key, spec]) => [key, makeCallbackHandler(spec, scope, trame)])),
+    [callbackDepKey, scope, trame],
+  );
+
+  // Slots: no subscription needed - just capture children/scope, cheap to rebuild.
+  const slotValues = Object.fromEntries(slots.map(([key, spec]) => [key, makeSlotRenderProp(spec, scope)]));
+
+  const props = { ...Object.fromEntries(static_), ...reactiveValues, ...callbackValues, ...slotValues };
+  if (ref) props.ref = getRefCallback(ref);
+  return { props };
+}
+```
+
+This gives a **fixed hook sequence** (`useTrame`/context read → `useMemo` → `useSyncExternalStore` → `useMemo`) per `TrameNodeOne` instance, independent of how many props of which kind that node has — safe under the Rules of Hooks, and far cheaper than one subscription per reactive prop.
+
+### 2.3 Reactive expression evaluator (`runtime/expr.js`)
+
+```js
+const compiledCache = new Map(); // expression string -> Function, never evicted (finite, server-authored set)
+
+export function compile(jsExpression) {
+  let fn = compiledCache.get(jsExpression);
+  if (!fn) {
+    // eslint-disable-next-line no-new-func -- same trust model Vue's compiled
+    // templates already accept: expression strings are server/app-author-controlled.
+    fn = new Function("scope", `with (scope) { return (${jsExpression}); }`);
+    compiledCache.set(jsExpression, fn);
+  }
+  return fn;
+}
+
+export function evalTracked(jsExpression, mergedScope) {
+  const tracked = new Set();
+  const proxy = new Proxy(mergedScope, {
+    has() { return true; }, // force every free identifier through `get`, see below
+    get(target, prop) {
+      if (typeof prop === "string" && !hasOwnLocal(target, prop)) tracked.add(prop);
+      return target[prop];
+    },
+  });
+  return { value: compile(jsExpression)(proxy), keys: [...tracked] };
+}
+```
+
+- `with (scope) { ... }` inside a `Function`-constructed body works even though the calling module is strict (bodies created via the `Function` constructor are *not* strict by default) — this is what lets a bare identifier like `count` in a Python-authored expression resolve against an arbitrary runtime object without the caller having named it as a parameter.
+- `with` probes the scope's `has` trap for every free identifier before falling through to outer/global scope; returning `true` unconditionally forces every identifier through `get`, which is where tracking happens.
+- `hasOwnLocal` (§3) distinguishes "resolved from a `For`/`Slot`-introduced local variable" (not tracked — shadowing, not state) from "resolved from trame state" (tracked, becomes a `state.watch` dependency).
+- **Cost**: two evaluations of a small cached `Function` over a small object per render pass (one via `useMemo` to compute `trackedKeys`, one inside `getSnapshot`) — required because `useSyncExternalStore`'s `getSnapshot` must be a pure function of only its own closure, not of a value computed earlier in the same render.
+- **Resubscription semantics**: `state.watch(keys, fn)`'s dependency list is fixed for the life of one subscription, so an expression like `state[mode === "a" ? "x" : "y"]` correctly triggers a new subscription (via `trackedKeys` changing identity in the `useMemo`) when `mode` flips — matches how Valtio's own dependency tracking behaves, not a shortcut.
+
+### 2.4 Scope chain (`runtime/scope.js`)
+
+Chosen shape: **`Object.create`-based prototype chain**, not an explicit array — JS property lookup along a prototype chain already implements "nearest enclosing scope wins, else fall through" for free, and composes directly with the `Proxy` in §2.3 (the proxy wraps the chain head; `target[prop]` triggers the walk automatically). Nesting (`For` inside `For`, `Slot` inside `For`) is just another `Object.create(currentFrame)` call — no special nesting logic (resolves the "nested scoped slots" open question in `react-scoped-slots.md` §6 for the common case).
+
+```js
+export function extendScope(parentScope, names, values) {
+  const frame = Object.create(parentScope ?? STATE_FACADE);
+  names.forEach((name, i) => { frame[name] = values[i]; });
+  return frame;
+}
+
+const STATE_FACADE = { __isStateFacade: true };
+
+export function buildMergedScope(scope, trameState) {
+  const facade = new Proxy(STATE_FACADE, {
+    get: (_t, prop) => (prop === "__isStateFacade" ? true : trameState.get(String(prop))),
+  });
+  return scope ? Object.assign(Object.create(facade), scope) : facade;
+  // (see note below on why this needs one more pass than a naive "just set
+  // scope's ultimate prototype to facade" — scope's own chain was already
+  // built against a static STATE_FACADE marker at extendScope() time, not a
+  // live trameState-backed proxy, so buildMergedScope re-roots it per call.)
+}
+
+function hasOwnLocal(frame, prop) {
+  while (frame && !frame.__isStateFacade) {
+    if (Object.prototype.hasOwnProperty.call(frame, prop)) return true;
+    frame = Object.getPrototypeOf(frame);
+  }
+  return false;
+}
+```
+
+This is the single fiddliest piece in the whole plan — worth deliberate unit tests (§10): a loop variable or slot param shadowing a same-named state key must never be recorded as a `state.watch` dependency.
+
+---
+
+## 3. `ReactIf` / `ReactFor` (`components/ReactIf.jsx`, `components/ReactFor.jsx`)
+
+Both are plain presentational components — `value`/`items` arrive already resolved (via `useResolvedNode` in the parent `TrameNodeOne`, §2.2), so neither needs its own hooks:
+
+```jsx
+export default function ReactIf({ value, rawChildren, scope }) {
+  return value ? <TrameNode nodes={rawChildren} scope={scope} /> : null;
+}
+```
+
+```jsx
+export default function ReactFor({ items, name, rawChildren, scope }) {
+  return (items ?? []).map((item, index) => (
+    <TrameNode key={index} nodes={rawChildren} scope={extendScope(scope, [name], [item])} />
+  ));
+}
+```
+
+`ReactFor` uses the array index as its own React key (no other generically-available stable identity — `react.For` doesn't mandate items carry an id). A widget author wanting stable row identity across reordering puts an explicit `key=` on the element(s) inside the `For` body, which is honored one level down by `computeNodeKey` (§2) inside the nested `<TrameNode>` — not by `ReactFor`'s own `.map()`. Per-row fine-grained memoization beyond this is out of scope (§10).
+
+---
+
+## 4. Callback resolution (`makeCallbackHandler`, part of `runtime/resolveNode.js`)
+
+```js
+const MODIFIER_HANDLERS = { prevent: (e) => e.preventDefault(), stop: (e) => e.stopPropagation() };
+
+function makeCallbackHandler({ callback, modifiers }, scope, trame) {
+  return (event) => {
+    modifiers?.forEach((m) => MODIFIER_HANDLERS[m]?.(event));
+    const merged = buildMergedScope(extendScope(scope, ["$event"], [event]), trame.state);
+    if ("js" in callback) {
+      compile(callback.js)(merged);
+      return;
+    }
+    const args = callback.args ? compile(callback.args.js)(merged) : [];
+    const kwargs = callback.kwargs ? compile(callback.kwargs.js)(merged) : {};
+    trame.trigger(callback.trigger, args, kwargs);
+  };
+}
+```
+
+- The DOM event is exposed as an ordinary scope binding under the name `$event` (matching `react.py`/`react-getting-started.md`'s convention exactly, e.g. `onChange=react.Callback("count = Number($event.target.value)")`), via the same `extendScope` mechanism as loop vars.
+- `callback.args`/`callback.kwargs` are themselves `{js: "..."}`-wrapped expression strings (per `react.py`'s `Callback.to_json`), evaluated fresh **at call time** against the scope captured when the handler was created — correct, since Python's `args`/`kwargs` are meant to be re-evaluated per call, not memoized as a static value.
+- **Memoization**: `useResolvedNode` (§2.2) already memoizes the whole `callbacks` map per node via one `useMemo` keyed on a content hash (`key + JSON.stringify(spec)`) plus `scope`/`trame` identity — avoids minting a fresh function every render (the "freshly-minted functions" problem flagged in `react-scoped-slots.md` §6 / `react-fine-grained-reactivity.md` §1) while still correctly re-minting when `scope` changes (e.g., each `For` row is a distinct component instance via `key`, so this mostly guards the same instance's scope value changing across renders without a full remount).
+
+---
+
+## 5. Ref callback registry (`runtime/refs.js`)
+
+Direct transcription of `react-refs.md` §5, instantiated once per `trame` instance (since `trame.refs` — from `js-lib/src/trame.ts` — is per-connection: a fresh `Trame()` on reconnect gets a fresh `refs` map):
+
+```js
+export function createRefRegistry(trame) {
+  const cache = new Map();
+  return function getRefCallback(name) {
+    if (!cache.has(name)) {
+      cache.set(name, (el) => {
+        if (el) trame.refs[name] = el;
+        else { delete trame.refs[name]; cache.delete(name); }
+      });
+    }
+    return cache.get(name);
+  };
+}
+```
+
+Exposed via `TrameContext` (`runtime/trameContext.js`, `createContext({trame, getRefCallback})`) alongside `trame` itself, so `useResolvedNode` can call it for `ref=` props (§2.1).
+
+---
+
+## 6. Tag registry (`runtime/tags.js`)
+
+```js
+const registry = { ReactIf, ReactFor };
+export function registerTag(name, Component) { registry[name] = Component; }
+export function isStructuralTag(tag) { return tag === "ReactIf" || tag === "ReactFor"; }
+export function resolveTag(tag) {
+  if (tag in registry) return registry[tag];
+  if (/^[a-z]/.test(tag)) return tag; // lower-case first char => real DOM host tag
+  console.warn(`TrameNode: unknown tag "${tag}", rendering nothing`);
+  return () => null;
+}
+```
+
+`tags.js` never imports from `components/` (avoids an import cycle with `TrameNode.jsx`); `TrameApp.jsx` calls `registerTag("trame-loading", TrameLoading)` / `registerTag("trame-template", TrameTemplate)` once at module load, before first render. This flat registry **is** the extension point a future custom-widget ecosystem would grow into — no dynamic registration API beyond `registerTag` is designed now, since there's nothing real yet to register against it (§10).
+
+---
+
+## 7. App shell
+
+### `components/TrameApp.jsx`
+
+Responsibilities ported from `vue3-app/src/components/TrameApp.js`, **minus** per-`trame__template_*`-name dynamic-component registration (no Vue-style "register a component by string name" system to feed — `TrameTemplate` just reads its state key directly and hands the dict to `TrameNode`). Keeps: connection-ready gating, `onClose`/reconnect-driven re-render (`refreshTS`), the `beforeunload` → `lifeCycleUpdate("client_exited")` hookup, `client_unmounted` on unmount.
+
+### `components/TrameTemplate.jsx`
+
+Direct analog of `vue3-app/src/components/TrameTemplate.js`'s default export (not its separate `setup()` helper, which exists only to build a Vue-instance-reactive API object for Vue's template compiler — no equivalent need here, since `TrameNode` reads `trame.state`/scope directly):
+
+```jsx
+export default function TrameTemplate({ templateName = "main", urlKey = "ui", useUrl = false }) {
+  const { trame } = useTrame();
+  const params = useUrl ? extractURLParameters() : {};
+  const stateKey = `trame__template_${params[urlKey] ?? templateName}`;
+  const tree = useSyncExternalStore(
+    (cb) => trame.state.watch([stateKey], cb),
+    () => trame.state.get(stateKey),
+  );
+  return <TrameNode nodes={tree} scope={undefined} />;
+}
+```
+
+Simpler than the Vue original precisely because there's no dynamic-component-by-name indirection to replicate — `AbstractLayout.flush_content()` (`src/trame_client/ui/core.py`) already puts the JSON tree dict directly into that state key (confirmed via `tests/test_react.py`: `root.html` is a `dict`).
+
+### `components/TrameLoading.jsx`, `components/TrameReconnect.jsx`
+
+Near-verbatim ports of `vue3-app/src/components/TrameLoading.js` / `TrameReconnect.js` — same markup/CSS classes (`trame__loader`/`trame__message`, copy the relevant rules from `vue3-app/src/style.css` into `react-app/src/style.css`), swapping `onMounted`/`onBeforeUnmount`/`inject("trame")` for `useEffect`/`useTrame()`.
+
+---
+
+## 8. Python-side wiring
+
+### `src/trame_client/module/react.py` (new)
+
+```python
+from pathlib import Path
+
+www = str(Path(__file__).with_name("react-www").resolve())
+```
+
+Exact mirror of `module/vue3.py`.
+
+### `src/trame_client/module/__init__.py`
+
+Replace the current no-op branch:
+
+```python
+    elif client_type == "react":
+        from . import react
+
+        server.enable_module(react)
+        setup_handler_module(server)
+```
+
+(`setup_handler_module` — already defined in this file — wires up `trame__scripts`/`trame__module_scripts` serving for user-provided external scripts; included for parity since `react-app/src/setup.js` already handles those state keys, §1.)
+
+### Build tooling
+
+- `noxfile.py`: `VUE_APPS` (currently `{"vue2-app": ..., "vue3-app": ...}`) gains `"react-app": Path("src/trame_client/module/react-www")`. Since `react-app` additionally depends on `js-lib`'s build output, add a step that builds `js-lib` first (`npm ci && npm run build` inside `js-lib/`, only if `js-lib/dist` doesn't already exist) before `_ensure_vue_apps_built` iterates into `react-app`.
+- `pyproject.toml`: `[tool.hatch.build] include` currently lists `/src/trame_client/module/vue2-www/**` and `/src/trame_client/module/vue3-www/**` explicitly — add `/src/trame_client/module/react-www/**` alongside them.
+
+---
+
+## 9. Explicitly deferred / out of scope
+
+- **Widget ecosystem port** (a Vuetify-equivalent, `VDataTable`, etc.) — `registerTag` (§6) is the only extension point; nothing real registers against it in this plan.
+- **`widgets/trame.py` widgets beyond `Loading`/`ServerTemplate`**: `Getter`, `DeepReactive`, `Handler`, `Style`, `Script`, `ClientTriggers`, `SizeObserver`, `LifeCycleMonitor`, `ClientStateChange` stay Vue-only (several poke raw Vue `v-slot`/`v-bind` strings directly today and need Python-side rework first) — follow-up, not attempted here.
+- **`trame__vue_use`** (Vue-plugin registration via `state.trame__vue_use`) — no React equivalent; silently dropped from `setup.js`.
+- **Per-row `For` memoization beyond index-based `key`** — acceptable at this scope (§3).
+- **A real component registry / dynamic tag resolution beyond the flat object in `tags.js`** — fine for two structural tags plus two lifecycle widgets; would need real design once actual custom widgets exist.
+- **`react.py`/`widgets/core.py`'s existing contract is untouched** — nothing here proposes changing the already-committed Python tree-serialization code.
+- **The one required js-lib change** (§1: additive named exports from `main.ts`) is the sole out-of-band dependency this plan has on code outside `react-app/` itself.
+
+---
+
+## 10. Verification
+
+### Manual smoke test
+
+1. `cd js-lib && npm ci && npm run build`
+2. `cd react-app && npm ci && npm run build` → produces `src/trame_client/module/react-www`
+3. New example, `examples/react/reactive_state.py`, mirroring `examples/vue3/reactive_state.py`'s style (`from trame.app import get_server`, `from trame.widgets import html, react`, `from trame.ui.html import DivLayout` — all confirmed real/working imports via `tests/test_react.py`, which already does `from trame.widgets import html, react`):
+
+```python
+from trame.app import get_server
+from trame.widgets import html, react
+from trame.ui.html import DivLayout
+
+server = get_server(client_type="react")
+state = server.state
+state.count = 2
+state.todos = ["Write docs", "Review PR", "Ship it"]
+
+
+def reset(value=2):
+    state.count = value
+
+
+with DivLayout(server) as layout:
+    html.Div(["count = ", react.Bind("count", count=2)])
+    html.Input(
+        type="range", min=0, max=10, step=1,
+        value=react.Bind("count", count=2),
+        onChange=react.Callback("count = Number($event.target.value)"),
+    )
+    html.Button("Reset", onClick=react.Callback(reset))
+    with react.If(value="todos.length > 0"):
+        with html.Ul():
+            with react.For(items="todos", name="todo"):
+                html.Li([react.Bind("todo")], key=react.Bind("todo"))
+
+server.start()
+```
+
+4. `python examples/react/reactive_state.py`, open the browser. Checklist:
+   - Page connects and renders (no stuck `TrameLoading`).
+   - Dragging the range input updates the displayed count live; clicking Reset sets it back to 2.
+   - The todo list renders from `For`, disappears if `todos` is emptied (via a second trigger, or manually through devtools) and the "empty" `If` branch would need adding to fully exercise both branches.
+   - Add a temporary `console.log` in an unrelated sibling node to confirm it does *not* re-render when only `count` changes — validates fine-grained subscription (§2.2/§2.3) is actually narrow, not tree-wide.
+   - `?reconnect=auto` after killing/restarting the server process exercises `TrameReconnect`.
+
+### Automated tests
+
+`js-lib/tests/` (vitest + `jsdom`, `describe`/`it`/`expect`, a `helpers/fakeClient.ts`-style fake) is the pattern to follow; add `react-app/vitest.config.js` in the same shape plus `@testing-library/react`. Priority coverage, given §2.4/§2.3 are the novel/fiddly pieces:
+
+- `runtime/scope.test.js` — `extendScope` nesting (`For` inside `For`, `Slot` inside `For`) preserves shadowing; `hasOwnLocal` stops correctly at the state-facade sentinel.
+- `runtime/expr.test.js` — same expression string reuses the cached `Function`; dependency tracking records only identifiers actually read (a ternary only tracks its taken branch); a scope-chain local shadowing a same-named state key is never tracked as a `state.watch` dependency (the critical regression case).
+- `components/TrameNode.test.jsx` (`@testing-library/react` + a fake `trame`) — renders a `{tag:"div", props:{className:"x"}, children:["hi"]}` tree to the expected DOM; a `{"js":"count"}` child re-renders only when `count` changes (render-count spy); `ref="name"` populates `trame.refs.name` on mount, removes it on unmount.
+- `components/ReactFor.test.jsx` — each row's scope correctly isolates its own loop variable (row *N* must not see row *N-1*'s value).
+- `runtime/resolveNode.test.js` — `{callback:{trigger:"foo", args:{js:"[$event.target.value]"}}}` calls `trame.trigger("foo", [value], {})` with correctly-evaluated args; `modifiers:["prevent"]` calls `event.preventDefault()`.
+
+No browser/e2e suite is proposed here beyond the manual smoke test — the repo's root `tests/` already has Playwright coverage for vue2/vue3 per `noxfile.py`; extending that to drive `react-app` once built is a natural, separate follow-up.
+
+---
+
+## Appendix: grounding notes from codebase review
+
+Cross-checked against the actual repo state (2026-09-03, branch `add-react-support`) before implementation:
+
+- `js-lib/src/main.ts` today exports only `Trame` (default) plus `TrameConnectConfig`/`Decorator`/`StateChangeEvent` types — confirms §1's "one required js-lib change" is real and additive. `js-lib/src/wslink/index.ts` exports a default object `{ configDecorator, createClient }` (not named exports) and `js-lib/src/URLExtract.ts` exports a default object `{ toNativeType, extractURLParameters }` — `main.ts`'s new named exports need to destructure these default exports, not just re-export a name that doesn't exist.
+- `js-lib/src/trame.ts`'s `Trame` class already exposes `client`, `state`, `config`, `refs`, `connect()`, `trigger()`, `onClose()`, `onError()` exactly as this plan assumes; `state.watch(keys, fn)` (`js-lib/src/state.ts`) calls `fn` immediately with current values on subscribe, which `useSyncExternalStore` depends on for its synchronous initial snapshot.
+- `js-lib/tests/helpers/fakeClient.ts` is a ready-made fake `vtkWSLinkClient` (`getState`, `updateState`, `trigger`, `subscribeToStateUpdate`, `subscribeToActions`, connect/disconnect/busy) — reuse this pattern (or the same helper via a relative import) for `react-app`'s own vitest suite rather than re-inventing a fake client.
+- `tests/test_react.py` confirms the exact wire shapes this plan relies on: `{"js": ...}` leaves for `Bind`, `{"callback": {...}, "modifiers": [...]}` for `Callback` (with `trigger`/`args`/`kwargs` sub-keys when wrapping a Python callable), `{"tag": "ReactIf"/"ReactFor", "props": {...}, "children": [...]}` for structural nodes, and `{"slot": {"params": [...], "children": [...]}}` for `Slot`. It also confirms `key=` can itself be a `Bind` (`html.Li([...], key=react.Bind("todo"))` serializes to `"key": {"js": "todo"}`), validating §2's `computeNodeKey` needing to handle a `{js: ...}` leaf, not just plain scalars.
+- `react-getting-started.md` and the `onChange=react.Callback("count = Number($event.target.value)")` examples confirm the DOM event is referenced as `$event` in author-facing JS expressions — §4 (`makeCallbackHandler`) binds the scope variable as `$event` accordingly.
+- `widgets/core.py`'s `AbstractElement.__init__` dispatches `self._impl = _get_impl_class(self.server.client_type)(self, kwargs)`, and already has a `client_type == "react"` branch returning `react.HtmlElement` — so the Python side is fully wired up to produce trees for any widget once `self.server.client_type == "react"`; only the client bundle and `module/__init__.py`'s dispatch (§8) are missing.
+- `widgets/trame.py`'s `Loading` (`_elem_name = "trame-loading"`, attr `message`) and `ServerTemplate` (`_elem_name = "trame-template"`, attrs `name`→`templateName`, `use_url`→`useUrl`, `url_key`→`urlKey`) both declare their attrs via `self._attr_names += [...]`, which `widgets/core.py`'s backward-compat aliasing routes to `self._impl.props` — i.e. `react.HtmlElement` (already implemented) picks these up automatically through the existing `props`/`SHARED_PROPS` mechanism; no Python-side change is needed for these two widgets, only client-side `TrameLoading`/`TrameTemplate` components registered under those exact tag strings (§6/§7).
+- `noxfile.py`'s existing `VUE_APPS` dict and `_ensure_vue_apps_built` helper, and `pyproject.toml`'s `[tool.hatch.build] include` list, were read directly to confirm the exact edits described in §8 are additive (new dict entry / new glob line) rather than requiring restructuring.
diff --git a/docs/adding-support-for-react/react-fine-grained-reactivity.md b/docs/adding-support-for-react/react-fine-grained-reactivity.md
new file mode 100644
index 0000000..945a8ec
--- /dev/null
+++ b/docs/adding-support-for-react/react-fine-grained-reactivity.md
@@ -0,0 +1,67 @@
+# Fine-Grained Reactivity for trame's React `client_type`
+
+> **Status: design exploration, just getting started.** Follow-on from
+> [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md) (section 6, item 7)
+> and [`react-scoped-slots.md`](./react-scoped-slots.md) (section 6, "Freshly-minted
+> functions on every render"). Nothing here is decided yet — this is a working
+> comparison to reason from, not a conclusion.
+
+## 1. The problem
+
+Vue's `client_type` gets fine-grained reactivity for free. `TrameTemplate.js`
+wraps every trame state key in its own `customRef` (`toRef()`), so a binding
+like `{{ count }}` only triggers a re-render of the exact spot in the template
+that reads `count` — nothing else re-evaluates when `count` changes.
+
+The React JSON-tree design (`vue-vs-react-with-trame.md`, section 2) has no such
+guarantee by construction: `TrameNode` walks a plain JSON tree and calls
+`state.get(key)` wherever a `{ "js": ... }` leaf needs a value. Unless something
+scopes *which* component re-renders on *which* state key changing, any state
+update risks re-rendering the whole tree — and the scoped-slots design compounds
+this, since `resolveProp` mints a fresh render-prop closure on every render
+unless the underlying state primitive itself is fine-grained enough to avoid
+re-invoking components that don't need it.
+
+So the real question isn't just "what store do we use" — it's "what store lets
+a generic, dynamically-shaped `TrameNode` component subscribe to *exactly* the
+state keys its own subtree binds, with no upfront knowledge of what those keys
+are, since the tree comes from Python and can be anything."
+
+## 2. Candidate libraries
+
+| Library | Model | Fine-grained by default? | Notes |
+| --- | --- | --- | --- |
+| **Redux** (+ Redux Toolkit) | Single store, reducers/actions, selectors | No — needs manual selector + memoization (`reselect`) discipline | Still common in large/legacy codebases; heavier boilerplate than the alternatives below; no longer the default choice for new projects |
+| **Zustand** | Single store (or several), plain functions to read/set | Opt-in via selectors — `useStore(s => s.count)` re-renders only if the selected value changes | The closest thing to "the mainstream default" today; very low boilerplate; fine-graininess is something *you* write per usage, not automatic |
+| **Jotai** | Atomic — one `atom` per piece of state | Yes, per-atom, by construction | `useAtom(atom)` subscribes to exactly that atom; maps naturally onto trame state since it's already a flat dict of named keys — one atom per key |
+| **Valtio** | Proxy-based — mutate a plain object directly, subscribe via `useSnapshot` | Yes, per-key-actually-read, by construction | Structurally the closest analog to Vue's own reactivity system (which is also proxy-based) — the same mental model trame's Vue path already exploits |
+| **Recoil** | Atomic, same idea as Jotai | Yes, per-atom | Meta-authored; largely superseded by Jotai in new adoption; mentioned for completeness |
+
+## 3. Why this matters more than usual here
+
+In a normal React app, you know your component tree at build time, so you can
+hand-write `useAtom(countAtom)` or `useStore(s => s.count)` exactly where
+needed. trame's tree is **dynamic and server-driven** — `TrameNode` doesn't
+know in advance which state keys a given JSON subtree will reference; it finds
+out by walking `{ "js": "..." }` leaves at render time. Whatever store trame
+picks has to support **subscribing to a key computed at runtime**, not just a
+key known at author time. That's a real constraint: Zustand's typical selector
+usage assumes you write `s => s.count` in source code; Jotai's `atom` family
+pattern (`atomFamily(key => ...)`) is built for exactly this "atom per
+dynamically-named key" case; Valtio's proxy just reacts to whatever properties
+were actually read on a given render, so runtime-computed key names fall out
+for free.
+
+## 4. Open questions to work through next
+
+- Does `atomFamily` (Jotai) or a Valtio proxy keyed by state name end up
+  simpler to wire into the existing `trame.state.get/set` wire protocol
+  (`_event_value_processing` in `widgets/core.py`, and the `toRef()` pattern in
+  `TrameTemplate.js`) that both `client_type`s share underneath?
+- How does whichever store is picked interact with `react.For`'s per-iteration
+  local scope and `react.Slot`'s widget-supplied scope (`react-scoped-slots.md`)
+  — those aren't global state keys at all, so they sit outside whatever
+  store manages the `trame.state` proxy.
+- What does list re-rendering look like under `react.For` for a large array —
+  does the chosen store help avoid re-rendering every row when only one row's
+  backing data changes, or is that a separate problem the store doesn't solve?
diff --git a/docs/adding-support-for-react/react-for-vue-developers.md b/docs/adding-support-for-react/react-for-vue-developers.md
new file mode 100644
index 0000000..009b2cd
--- /dev/null
+++ b/docs/adding-support-for-react/react-for-vue-developers.md
@@ -0,0 +1,155 @@
+# React for trame Developers Coming from Vue
+
+> **Status: design exploration — nothing here is implemented yet.** This is a
+> practical, syntax-first companion for people who already build trame apps
+> with `client_type="vue3"` and want the direct translation to
+> `client_type="react"`. If you have no Vue background, use
+> [`react-getting-started.md`](./react-getting-started.md) instead — it
+> teaches the React side on its own terms, with no Vue references at all. For
+> the reverse mapping (React → Vue), see
+> [`vue-for-react-developers.md`](./vue-for-react-developers.md) — note that
+> one describes real, already-shipped behavior, since `client_type="vue3"`
+> exists today and `client_type="react"` here does not. For the design
+> rationale behind *why* each translation looks the way it does, see
+> [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md).
+
+## Dynamic text
+
+Vue's `{{ }}` mustache syntax becomes its own item in the children list:
+
+```python
+# Vue
+html.Div("count = {{ count }}")
+
+# React
+html.Div(["count = ", react.Bind("count")])
+```
+
+`html.Div` takes one `children` argument, not variadic `*args` — multiple
+children (literal text and bindings both) go in a single list/tuple.
+
+📖 [`react-text-interpolation.md`](./react-text-interpolation.md)
+
+## Bound props and two-way binding
+
+Vue's `v-model` (and its modifiers) is a single directive that implies both a
+controlled value and a change handler. React has no equivalent directive, so
+it splits into two explicit pieces:
+
+```python
+# Vue
+html.Input(type="range", min=0, max=10, step=1, v_model_number=("count", 2))
+
+# React
+html.Input(
+    type="range", min=0, max=10, step=1,
+    value=react.Bind("count", count=2),
+    onChange=react.Callback("count = Number($event.target.value)"),
+)
+```
+
+📖 [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md), section 4
+
+## Events and triggers
+
+```python
+# Vue
+html.Button("Reset", click=self.reset)
+html.Button("Reset to 4", click=(self.reset, "[4]", "{}"))
+html.Input(v_on_dblclick_prevent="count = 2 * count")
+
+# React
+html.Button("Reset", onClick=react.Callback(self.reset))
+html.Button("Reset to 4", onClick=react.Callback(self.reset, "[4]", "{}"))
+html.Input(
+    onDoubleClick=react.Callback("count = 2 * count", modifiers=["prevent"])
+)
+```
+
+Vue's `v_on_<event>_<modifier>=` naming convention becomes an explicit
+`modifiers=[...]` list on `react.Callback`.
+
+📖 [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md), section 3
+
+## Conditional rendering
+
+Vue's `v_if=` is a per-element attribute; React expresses conditionals
+structurally, as a wrapping block:
+
+```python
+# Vue
+html.Div("Count is high", v_if="count > 5")
+
+# React
+with react.If(value="count > 5"):
+    html.Div("Count is high")
+```
+
+📖 [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md), section 4
+
+## List rendering
+
+```python
+# Vue
+with html.Ul():
+    html.Li("{{ item.name }}", v_for="item in items", key="item.id")
+
+# React
+with html.Ul():
+    with react.For(items="items", name="item"):
+        html.Li(react.Bind("item.name"), key=react.Bind("item.id"))
+```
+
+Vue's implicit list diffing still requires a `key=`, same as React — the
+difference is `v_for=` folds the loop into the element's own attributes,
+while `react.For` wraps the templated child as its own block.
+
+📖 [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md), section 4
+
+## Scoped slots
+
+```python
+# Vue
+with VDataTable(items=("items", data)):
+    with Template(v_slot_item_name="{ item }"):
+        html.Strong("{{ item.name }}")
+
+# React
+with react.Slot(params=["item"]) as render_item_name:
+    html.Strong([react.Bind("item.name")])
+
+VDataTable(items=react.Bind("items"), renderItemName=render_item_name)
+```
+
+Vue's `v_slot_<name>="{ destructure }"` string becomes an explicit
+`react.Slot(params=[...])` block, defined outside the widget's own `with`
+block and passed in as an ordinary prop.
+
+📖 [`react-scoped-slots.md`](./react-scoped-slots.md)
+
+## Refs and imperative calls
+
+No translation needed — this part of the API is identical for both
+`client_type`s:
+
+```python
+html.Input(ref="my_input")
+self.server.js_call("my_input", "focus")
+```
+
+📖 [`react-refs.md`](./react-refs.md)
+
+## Cheat sheet
+
+| Vue | React |
+| --- | --- |
+| `"{{ count }}"` in children | `react.Bind("count")` as its own child in a list |
+| `v_if="expr"` | `with react.If(value="expr"):` |
+| `v_for="item in items"` | `with react.For(items="items", name="item"):` |
+| `v_model_number="count"` | `value=react.Bind("count")`, `onChange=react.Callback("count = Number($event.target.value)")` |
+| `@click="trigger('fn')"` / `click=self.fn` | `onClick=react.Callback(self.fn)` |
+| `click=(self.fn, "[4]", "{}")` | `onClick=react.Callback(self.fn, "[4]", "{}")` |
+| `v_on_dblclick_prevent="expr"` | `onDoubleClick=react.Callback("expr", modifiers=["prevent"])` |
+| `Template(v_slot_item_name="{ item }")` | `with react.Slot(params=["item"]) as x: ...` passed as `some_prop=x` |
+| `ref="name"` | `ref="name"` (unchanged) |
+| `self.server.js_call("name", "method", *args)` | unchanged |
diff --git a/docs/adding-support-for-react/react-getting-started.md b/docs/adding-support-for-react/react-getting-started.md
new file mode 100644
index 0000000..ccc418e
--- /dev/null
+++ b/docs/adding-support-for-react/react-getting-started.md
@@ -0,0 +1,339 @@
+# Getting Started with trame + React (Python Guide)
+
+> **Status: design exploration — nothing in this guide is implemented yet.**
+> `client_type="react"` does not exist in `trame-client` today. This document
+> writes up the *intended* Python-facing API as if it already existed, so it
+> reads like a normal getting-started guide rather than a design discussion.
+> The reasoning behind each piece — and the open questions still unresolved —
+> lives in the companion docs, linked at the bottom of each section.
+>
+> The helper classes shown here (`Bind`, `Callback`, `If`, `For`, `Slot`) are
+> proposed to live in `trame.widgets.react`, mirroring how `trame.widgets.html`
+> holds the framework-agnostic HTML elements — imported and used the same way,
+> as a namespace: `from trame.widgets import react`, then `react.Bind(...)`.
+> That module doesn't exist yet either — the import lines below are the
+> proposed location, not a confirmed one.
+
+## All imports used in this guide
+
+```python
+from trame.app import TrameApp
+from trame.decorators import change, trigger, controller, life_cycle
+from trame.ui.html import DivLayout
+from trame.widgets import html, react
+```
+
+Every example below uses some subset of these. Nothing else is needed for the
+use cases covered here.
+
+## 1. Minimal app
+
+```python
+from trame.app import TrameApp
+from trame.ui.html import DivLayout
+from trame.widgets import html
+
+
+class MyApp(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="react")
+        self._build_ui()
+
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
+            html.Div("Hello, trame + React")
+
+
+if __name__ == "__main__":
+    app = MyApp()
+    app.server.start()
+```
+
+A `TrameApp` subclass with `client_type="react"` and a layout is all it takes.
+`self.state`, `self.ctrl`, `DivLayout`, and `html.*` all work exactly the way
+you'd expect from any other trame app.
+
+## 2. Static content and static props
+
+Plain strings and plain attribute values need nothing special — they're
+static data:
+
+```python
+html.Div("This text never changes")
+html.Input(type="range", min=0, max=10, step=1)
+html.Button("Click me", classes="my-button")
+```
+
+## 3. Showing a value that changes over time
+
+To display a value that updates as state changes, add a `react.Bind(...)`
+entry directly in the children list, right next to whatever literal text
+surrounds it:
+
+```python
+html.Div(["count = ", react.Bind("count", count=2)])
+```
+
+Multiple children (literal text and bindings both) always go in a single
+list/tuple argument — `html.Div` takes one `children` argument, not variadic
+`*args`:
+
+```python
+html.Div([
+    "Reset count to ", react.Bind("default_value", default_value=1),
+    " then double it to ", react.Bind("double_default", double_default=2),
+])
+```
+
+`react.Bind`'s first argument is a JavaScript expression string, evaluated
+against the current state. A plain state key name (`"count"`) is itself a
+trivially valid expression, so no special-casing is needed for the common
+case.
+
+📖 Deeper dive: [`react-text-interpolation.md`](./react-text-interpolation.md)
+
+## 4. Binding a dynamic value to a prop
+
+The same `react.Bind` also works as a prop value. Its signature is:
+
+```python
+react.Bind(js_expression, **state_defaults)
+```
+
+- **The first, positional argument is a JavaScript expression string**,
+  evaluated client-side against the current scope (trame state, plus any
+  `react.For`/`react.Slot` local scope in effect). A plain state key name
+  (`"count"`) is the trivial case of a valid expression; it doesn't have to
+  be just a bare key.
+- **Every keyword argument sets a default on trame's shared state**, one
+  `state.setdefault(key, value)` call per kwarg — not a single "default value
+  for the bound key" slot.
+
+The common case binds and defaults the same single key:
+
+```python
+html.Input(
+    type="range", min=0, max=10, step=1,
+    value=react.Bind("count", count=2),  # expression: "count", default: state.count = 2
+)
+```
+
+But because the kwargs are independent of the expression, an expression that
+combines several state keys can default all of them in one call:
+
+```python
+# expression: "count + offset" — defaults both count and offset,
+# neither of which needs to already exist in state
+html.Div(["total = ", react.Bind("count + offset", count=2, offset=1)])
+```
+
+Kwarg names don't have to match anything in the expression either — you could
+default a key elsewhere in state that this particular binding doesn't
+reference, though in practice keeping kwarg names aligned with the keys the
+expression actually reads is the common, readable pattern.
+
+## 5. Handling events and calling Python
+
+`react.Callback` wraps either a raw JS expression or a Python callable:
+
+```python
+# Raw JS expression, evaluated client-side
+html.Input(onChange=react.Callback("count = Number($event.target.value)"))
+
+# Python callable, invoked server-side
+html.Button("Reset", onClick=react.Callback(self.reset))
+
+# Python callable with extra positional/keyword arguments
+# (JS expression strings, evaluated client-side and sent along with the call)
+html.Button("Reset to 4", onClick=react.Callback(self.reset, "[4]", "{}"))
+
+# Event modifiers - run $event.preventDefault(), $event.stopPropagation(), etc.
+# before the callback fires
+html.Input(
+    onDoubleClick=react.Callback(
+        "count = 2 * count",
+        modifiers=["prevent"],
+    )
+)
+```
+
+```python
+def reset(self, value=2):
+    self.state.count = value
+```
+
+📖 Deeper dive: [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md),
+section 3
+
+## 6. Building a controlled input (two-way binding)
+
+To create an input whose value both reflects and updates state, pair
+`react.Bind` (for `value=`) with `react.Callback` (for `onChange=`):
+
+```python
+html.Input(
+    type="range", min=0, max=10, step=1,
+    value=react.Bind("count", count=2),
+    onChange=react.Callback("count = Number($event.target.value)"),
+)
+```
+
+## 7. Rendering content conditionally
+
+To render content only when a condition holds, wrap it in `react.If`:
+
+```python
+with react.If(value="count > 5"):
+    html.Div("Count is high")
+```
+
+📖 Deeper dive: [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md),
+section 4
+
+## 8. Rendering a list of items
+
+`name=` introduces the loop variable, referenced in children the same way any
+other bound value is — via `react.Bind`:
+
+```python
+with html.Ul():
+    with react.For(
+        items=react.Bind("items", items=["Apple", "Banana", "Cherry"]),
+        name="item",
+    ):
+        html.Li(
+            react.Bind("item.name"),
+            key=react.Bind("item.id"),
+        )
+```
+
+**Don't forget `key=`.** Each list item needs a stable, unique key so the
+renderer can track which piece of content corresponds to which piece of data
+across updates. `key` is a plain shared attribute, bound the same way as any
+other prop.
+
+📖 Deeper dive: [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md),
+section 4
+
+## 9. Letting a widget hand data back into content you provide
+
+Some widgets need to hand data back into the content you give them — for
+example, a data table that lets you control exactly how each row's cells look,
+while it decides which row is currently being rendered. Define that content
+with `react.Slot` and pass the resulting handle as an ordinary prop — not
+nested inside the widget's own `with` block:
+
+```python
+with react.Slot(params=["item"]) as render_item_name:
+    html.Strong([react.Bind("item.name")])
+
+VDataTable(
+    items=react.Bind("items"),
+    renderItemName=render_item_name,
+)
+```
+
+The widget calls `renderItemName(item)` once per row; you never need to know
+or care how that invocation happens from the Python side.
+
+📖 Deeper dive: [`react-scoped-slots.md`](./react-scoped-slots.md)
+
+## 10. Referencing an element or component to call its methods
+
+`ref=` lets you attach a name to an element or component so you can call
+methods on it later:
+
+```python
+html.Input(ref="my_input")
+html.Canvas(ref="my_chart")
+```
+
+Calling a method on a ref uses `server.js_call(ref, method, *args)` — an
+existing, already-implemented API (`trame_server.core.Server.js_call`), used
+today by widgets like `JSEval` and `ClientTriggers`:
+
+```python
+def focus_input(self):
+    self.server.js_call("my_input", "focus")
+
+def reset_zoom(self):
+    self.server.js_call("my_chart", "resetZoom")
+```
+
+For a plain DOM element (`html.Input`), the method called is whatever the
+native DOM API provides (`focus()`, `scrollIntoView()`, ...). For a custom
+widget, it's whatever that widget's author chose to expose — trame doesn't
+standardize or restrict this.
+
+📖 Deeper dive: [`react-refs.md`](./react-refs.md)
+
+## 11. Full worked example
+
+Putting it together — a counter with a derived value, a reset button, and a
+todo list:
+
+```python
+from trame.app import TrameApp
+from trame.decorators import change
+from trame.ui.html import DivLayout
+from trame.widgets import html, react
+
+
+class TodoApp(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="react")
+        self.state.todos = ["Write docs", "Review PR", "Ship it"]
+        self._build_ui()
+
+    @change("count")
+    def update_count(self, count, **_):
+        self.state.double = 2 * int(count)
+
+    def reset(self, value=2):
+        self.state.count = value
+
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
+            html.Div(["count = ", react.Bind("count", count=2)])
+            html.Div(["2 x count = ", react.Bind("double", double=4)])
+            html.Input(
+                type="range", min=0, max=10, step=1,
+                value=react.Bind("count", count=2),
+                onChange=react.Callback("count = Number($event.target.value)"),
+            )
+            html.Button("Reset", onClick=react.Callback(self.reset))
+
+            with react.If(value="todos.length > 0"):
+                with html.Ul():
+                    with react.For(items="todos", name="todo"):
+                        html.Li([react.Bind("todo")], key=react.Bind("todo"))
+
+            with react.If(value="todos.length === 0"):
+                html.Div("Nothing left to do!")
+
+
+if __name__ == "__main__":
+    app = TodoApp()
+    app.server.start()
+```
+
+## 12. Where to read more
+
+- [`react-scoped-slots.md`](./react-scoped-slots.md) — scoped slots / render
+  props, in depth
+- [`react-refs.md`](./react-refs.md) — refs, imperative handles, `TrameNode`
+  impact
+- [`react-text-interpolation.md`](./react-text-interpolation.md) — the
+  reasoning behind `react.Bind` in children
+- [`react-fine-grained-reactivity.md`](./react-fine-grained-reactivity.md) —
+  the state-management library landscape and why it matters for a
+  dynamically-shaped tree
+- [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md) — the overall
+  design rationale, and what's still missing for full parity (notably: the
+  widget ecosystem, deliberately out of scope for now)
+- Coming from trame's Vue-based `client_type` and want a direct syntax
+  comparison? See
+  [`react-for-vue-developers.md`](./react-for-vue-developers.md)
+- Coming from React and want to pick up trame's existing (real,
+  already-shipped) Vue-based `client_type`? See
+  [`vue-for-react-developers.md`](./vue-for-react-developers.md)
diff --git a/docs/adding-support-for-react/react-refs.md b/docs/adding-support-for-react/react-refs.md
new file mode 100644
index 0000000..72f3464
--- /dev/null
+++ b/docs/adding-support-for-react/react-refs.md
@@ -0,0 +1,200 @@
+# Refs and Imperative Method Calls in trame's React `client_type`
+
+> **Status: design exploration, just getting started.** Follow-on from
+> [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md), section 6, item 4
+> ("Refs"). Nothing here is decided yet.
+
+## 1. Can you call methods on a React component?
+
+Two different cases, with very different answers:
+
+- **Plain DOM elements** (`<input ref={r}>`, `<canvas ref={r}>`, ...) — yes,
+  trivially. `ref.current` is the actual DOM node, so the full native element
+  API is available with no extra work (`.focus()`, `.scrollIntoView()`,
+  `.value`, ...).
+- **Custom components** — no, not by default. Function components have no
+  instance at all; `<MyWidget ref={r} />` yields `null` (and a dev warning)
+  unless the component explicitly opts in.
+
+## 2. The recommended pattern: `useImperativeHandle`
+
+A component that wants to expose a callable API declares exactly what
+`ref.current` will be:
+
+```jsx
+function MyChart({ ref, ...props }) {
+  const canvasRef = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    resetZoom() {
+      /* ... */
+    },
+    exportPNG() {
+      return canvasRef.current.toDataURL();
+    },
+  }));
+
+  return <canvas ref={canvasRef} {...props} />;
+}
+```
+
+```jsx
+// parent
+const chartRef = useRef(null);
+<MyChart ref={chartRef} />;
+chartRef.current.resetZoom();
+```
+
+Notes:
+
+- Pre-React 19, the component had to be wrapped in
+  `forwardRef((props, ref) => ...)` to even receive `ref` as an argument.
+  React 19 allows function components to accept `ref` as an ordinary prop
+  directly (as above); `forwardRef` still works but is being phased out.
+- React's own guidance is that the exposed handle should be **deliberately
+  minimal and intentional** — a curated set of methods, not "everything the
+  component happens to have internally." This is closer to Vue 3's
+  `<script setup>` + `defineExpose()` model than to Vue 2's implicit "expose
+  all of `this`."
+
+## 3. Implication for trame's `ref=` design
+
+Vue's `client_type` today is permissive: `AbstractElement.html` patches any
+`ref=` attribute for vue3 into `:ref="(el) => trame.refs[name] = el"`
+(`widgets/core.py`), and whatever ends up in `trame.refs[name]` — a DOM node or
+a component's public instance — is fair game to call methods on from Python
+(via `ctrl`/`js_call`-style triggers). Nothing about *what* gets exposed is
+decided by the widget author at the point of authoring the ref; it's decided
+implicitly by however much Vue's reactivity/instance system exposes.
+
+React's model flips that: exposing anything beyond a raw DOM node requires the
+**widget author** to explicitly write a `useImperativeHandle` call declaring
+the public surface. That means, unlike the Vue path, a `client_type="react"`
+widget isn't automatically "ref-able" with an arbitrary method surface — each
+widget that wants to support calling methods on it needs to be written with
+that in mind.
+
+## 4. Resolved: a plain side map, decoupled from state
+
+- **No standardized handle shape.** Each widget author decides what (if
+  anything) it exposes via `useImperativeHandle`, exactly as loosely as Vue
+  treats this today. trame imposes no fixed contract on the methods a ref
+  must/can have.
+- **Python doesn't need to distinguish the two cases.** `trame.refs[name]` is
+  populated uniformly whether the registered value is a raw DOM node or a
+  component's hand-written imperative handle — from Python's side, `ref=name`
+  is just a string, and calling `refs[name].some_method(...)` works the same
+  way regardless of which kind of object ended up under that name.
+- **Refs are a side channel, not part of state.** `trame.refs` is a plain
+  mutable map that lives outside React's render cycle entirely — it is not
+  wired into whatever store [`react-fine-grained-reactivity.md`](./react-fine-grained-reactivity.md)
+  settles on, and calling a method on a ref is a one-off imperative action with
+  no round-trip into trame state, no reactivity concerns, and no interaction
+  with React's render scheduling. This mirrors how Vue's `trame.refs` already
+  behaves — it's an escape hatch, deliberately outside the reactive system.
+
+## 5. Serialized shape and the `TrameNode` implementation
+
+### Python side: no change
+
+`ref` is already a plain shared attribute (`SHARED_ATTRIBUTES` in
+`widgets/core.py`) — `html.Input(ref="my_input")` works identically for both
+`client_type`s. There's nothing new to design on the Python-facing API; this
+section is purely about serialization and the client runtime.
+
+### Serialized shape: `ref` stays a plain string, keyed by prop name
+
+Unlike `value`/`onChange`/other prop values (`vue-vs-react-with-trame.md`
+section 3, `react-scoped-slots.md` section 4), `ref` doesn't need a wrapper
+object like `{ "js": ... }` or `{ "callback": ... }` to disambiguate what kind
+of value it is. There's nothing to disambiguate — a `ref` prop's value is
+*always* "a name to register under," never a literal DOM attribute or a bound
+expression, since React doesn't support passing a plain string as `ref`
+either. So resolution here is dispatched by **prop key**, not by inspecting the
+value's shape:
+
+```json
+{
+  "tag": "input",
+  "props": {
+    "type": "text",
+    "ref": "my_input"
+  }
+}
+```
+
+### `TrameNode` impact
+
+The generic prop-resolution pass (section 3/4 of the other docs) gains one
+more case, checked by key instead of by value shape:
+
+```jsx
+function resolveProps(rawProps, scope) {
+  const resolved = {};
+  for (const [key, value] of Object.entries(rawProps ?? {})) {
+    if (key === "ref") {
+      resolved.ref = getRefCallback(value); // value is the plain ref name
+      continue;
+    }
+    resolved[key] = resolveProp(value, scope); // js / callback / slot / plain
+  }
+  return resolved;
+}
+
+// one stable callback per ref name, cached across renders
+const refCallbacks = new Map();
+function getRefCallback(name) {
+  if (!refCallbacks.has(name)) {
+    refCallbacks.set(name, (el) => {
+      if (el) {
+        trame.refs[name] = el;
+      } else {
+        delete trame.refs[name];
+        refCallbacks.delete(name); // free to re-mint if this name resurfaces later
+      }
+    });
+  }
+  return refCallbacks.get(name);
+}
+```
+
+### Why a callback ref, not `useRef`
+
+This isn't a stand-in for `useRef` — it's the only option that actually works
+here. React accepts two kinds of value for a `ref` prop: a ref *object* from
+`useRef()` (React sets `.current` for you), or a plain callback *function*
+(React calls it with the element on mount, `null` on unmount). Both are
+first-class, documented mechanisms.
+
+`useRef()` is a hook, so it's bound by the rules of hooks: called
+unconditionally, the same number of times, in the same order, on every render
+of a given component instance. `TrameNode` can't satisfy that — the set of ref
+names to attach comes from a **dynamic, server-sent tree** that can differ
+between renders (a widget might gain or lose a `ref=` between one state update
+and the next, with an arbitrary name each time). There's no fixed number of
+`useRef()` calls that could cover "however many differently-named refs this
+particular render happens to contain" — the same dynamic-key problem already
+called out for state atoms in `react-fine-grained-reactivity.md` (section 3).
+A callback ref has no such restriction, since it's just a function value, not a
+hook — constructible for any number of dynamically named targets, which is why
+it's the right fit rather than an approximation of `useRef`. (Contrast this
+with section 2's example, where `useRef` was used validly in hand-authored code
+consuming one specific, statically-known widget — a different situation from
+`TrameNode`'s arbitrary, dynamically-shaped tree.)
+
+Two more things worth calling out:
+
+- **Works identically for DOM elements and custom widgets.** `TrameNode`
+  doesn't need to know or care which case it's attaching to — a host tag like
+  `"input"` hands the callback the raw DOM node, a custom widget hands it
+  whatever `useImperativeHandle` produced (or nothing, if the widget didn't
+  opt in). Matches section 4: the map is populated uniformly either way.
+- **The callback must be stable across renders, or React churns it.** If
+  `getRefCallback` minted a fresh closure every render (the same "freshly-minted
+  functions" issue flagged in `react-scoped-slots.md` section 6 and
+  `react-fine-grained-reactivity.md`), React would treat every render as "ref
+  changed" — detaching the old one (calling it with `null`) and attaching the
+  new one — even though the target element never changed. Caching one callback
+  per ref name avoids that churn. `el === null` on the cached callback still
+  correctly signals real unmount/detachment, which is when `trame.refs[name]`
+  should actually be cleared (and now, the cache entry along with it).
diff --git a/docs/adding-support-for-react/react-scoped-slots.md b/docs/adding-support-for-react/react-scoped-slots.md
new file mode 100644
index 0000000..14abb9b
--- /dev/null
+++ b/docs/adding-support-for-react/react-scoped-slots.md
@@ -0,0 +1,250 @@
+# Scoped Slots: Vue → React Translation for trame
+
+> **Status: design exploration.** Follow-on from
+> [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md), section 6, item 5
+> ("the hardest semantic gap"). Nothing described here exists in the codebase yet.
+> Scoped out for now: this only covers the mechanism itself, not any specific
+> widget library port (see the parent doc's note on deferring the widget
+> ecosystem).
+
+## 1. What a Vue scoped slot actually is
+
+A normal Vue slot just projects markup from parent to child — the parent decides
+*what* renders, the child decides *where*. A **scoped** slot goes one step
+further: the child also hands data back to that markup, computed from something
+only the child knows about (its internal iteration, its internal state, ...).
+
+Vuetify's data table is the canonical example. Internally, for every row it
+renders, it exposes a slot together with the row's data:
+
+```html
+<!-- (conceptual) inside VDataTable's own template -->
+<slot name="item.name" :item="item">{{ item.name }}</slot>
+```
+
+The consumer supplies the slot content using `trame`'s existing `Template`
+widget (`src/trame_client/widgets/core.py`), which maps a `v_slot_item_name=`
+kwarg to Vue's `v-slot:item.name="{ item }"` syntax:
+
+```python
+with VDataTable(items=("items", data)):
+    with Template(v_slot_item_name="{ item }"):
+        html.Strong("{{ item.name }}")
+```
+
+The critical detail: `item` is **not** a trame state key. It's a local variable
+that only exists while `VDataTable` is rendering that particular row, and a
+different `item` value is injected on every iteration. Python never sees or
+needs to understand `item` — the whole `"{ item }"` destructuring string is just
+forwarded as-is for Vue's compiler to interpret.
+
+## 2. Why nothing already designed covers this
+
+[`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md) already has a
+concept of "extra local scope" — `react.For(items=..., name="item")` introduces
+`item` as a loop variable, resolved via a scope chain instead of flat global
+state (section 4). Scoped slots need the *same underlying mechanism*, but
+**triggered by a different party**:
+
+| | Who owns the loop/iteration | Who introduces the scope variable |
+| --- | --- | --- |
+| `react.For` | trame's own generic renderer | trame's own generic renderer |
+| Scoped slot | An arbitrary third-party widget (`VDataTable`) | The widget's own React implementation, at a time and with values only it knows |
+
+`react.For` can extend scope itself because it *is* the loop. A scoped slot's
+content has to be handed to the widget as something the widget can invoke
+*whenever it wants, with whatever data it wants* — which is a fundamentally
+different shape of problem: not "loop over a known array," but "expose an
+extension point that some other component controls."
+
+## 3. The React idiom this maps to: render props
+
+React has no built-in "slot" concept, but it has had a well-established pattern
+for exactly this problem since long before hooks existed: **render props** (a
+prop whose value is a function, invoked by the component that owns it, with
+that component's own data as arguments).
+
+```jsx
+// Hand-written React, for comparison — not what Python would generate
+<DataTable
+  items={items}
+  renderItemName={(item) => <strong>{item.name}</strong>}
+/>
+```
+
+```jsx
+function DataTable({ items, renderItemName }) {
+  return (
+    <table>
+      <tbody>
+        {items.map((item) => (
+          <tr key={item.id}>
+            <td>{renderItemName(item)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```
+
+`DataTable` calls `renderItemName(item)` itself, once per row, exactly when it
+knows what `item` is — that call site is the React equivalent of Vue's
+`<slot name="item.name" :item="item" />`.
+
+The catch for trame: **a Python process cannot ship a real JavaScript closure.**
+Vue sidesteps this because its compiler turns the `Template`/`v-slot` markup
+into an actual function at runtime, client-side, from a string. React has no
+such compiler. So the render-prop function has to be *synthesized on the
+client* from data, not shipped as a value.
+
+## 4. Proposed design: `react.Slot` + a generic slot renderer
+
+### Python-facing API
+
+A new structural widget, `react.Slot`, analogous to `Template`/`v_slot` but
+explicit about the parameter names the slot will receive:
+
+```python
+with react.Slot(params=["item"]) as renderItemName:
+    html.Strong("{{ item.name }}")
+VDataTable(items=react.Bind("items"), renderItemName=renderItemName)
+```
+
+`params=["item"]` is the React-side equivalent of Vue's `"{ item }"`
+destructuring string — except spelled out explicitly, since there's no compiler
+available client-side to parse a destructuring pattern out of an opaque string.
+
+The object bound by `as renderItemName` is the `react.Slot` instance itself
+(`__enter__` returning `self`, same as `VirtualNode`/`AbstractElement` already
+do) — it's recognized by type during prop serialization exactly like
+`react.Bind`/`react.Callback` instances already are. Because it's defined outside
+`VDataTable`'s own `with` block, `react.Slot` needs `connect_parent=False`
+(already a supported `AbstractElement.__init__` option) so it isn't *also*
+auto-attached as a child of whatever layout context happens to be open at the
+point it's defined — its only attachment point is the `renderItemName=` prop it
+gets explicitly passed to.
+
+### Serialized shape
+
+A `react.Slot` value serializes like any other special prop value — no separate
+`slots` map, no name-string namespace. It's just one more recognized shape a
+prop value can take, alongside `{ "js": ... }` and `{ "callback": ... }`:
+
+```json
+{
+  "tag": "VDataTable",
+  "props": {
+    "items": { "js": "items" },
+    "renderItemName": {
+      "slot": {
+        "params": ["item"],
+        "children": [
+          { "tag": "strong", "children": [{ "js": "item.name" }] }
+        ]
+      }
+    }
+  }
+}
+```
+
+### Client-side: turning slot data into a real render prop
+
+This is the missing generic piece — but it plugs into machinery that already
+has to exist anyway. `TrameNode`'s generic prop-resolution pass already turns a
+`{ "js": ... }` value into a plain value and a `{ "callback": ... }` value into
+a plain function *before* a widget's `props` are ever assembled (section 3 of
+the parent doc). `{ "slot": ... }` is a third case handled the same way:
+
+```jsx
+function resolveProp(value, scope) {
+  if (value?.js !== undefined) return evaluate(value.js, scope);
+  if (value?.callback !== undefined) return makeCallback(value.callback, scope);
+  if (value?.slot !== undefined) {
+    const { params, children } = value.slot;
+    return (scopeValues) => (
+      <TrameNode
+        nodes={children}
+        // extend the active scope chain with the widget-supplied values,
+        // keyed by the declared `params` - the same scope-chain mechanism
+        // react.For already needs for its loop variable
+        scope={extendScope(scope, params, Object.values(scopeValues))}
+      />
+    );
+  }
+  return value;
+}
+```
+
+Because resolution happens generically before the widget ever sees its props,
+`VDataTable`'s own React implementation needs **no special-casing at all** —
+`renderItemName` just arrives as an ordinary callable, indistinguishable from a
+render prop someone wrote by hand:
+
+```jsx
+function VDataTable({ items, renderItemName }) {
+  return (
+    <table>
+      <tbody>
+        {items.map((item) => (
+          <tr key={item.id}>
+            <td>
+              {renderItemName ? renderItemName({ item }) : item.name}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```
+
+This is a further point in favor of `renderItemName=` being a plain prop rather
+than a separately-namespaced `slots` value: the widget author writes the exact
+same code they'd write for hand-authored React, with zero trame-specific
+plumbing visible inside the component itself.
+
+## 5. Summary
+
+- Vue scoped slot = "child hands data to markup the parent supplied."
+- React equivalent = render props: a function prop, called by the child, with
+  the child's own data as arguments.
+- trame can't ship a real function from Python, so `react.Slot` ships **data**
+  (`{ params, children }`) as the value of an ordinary prop, and the same
+  generic prop-resolution pass that already turns `{ "js": ... }` into a value
+  and `{ "callback": ... }` into a function turns `{ "slot": ... }` into a
+  callable — no separate `slots` namespace, and no special-casing required
+  inside the widget's own React implementation.
+- This reuses the scope-chain concept `react.For` already needs — the only new
+  idea is that the scope extension can be triggered by an arbitrary widget's own
+  render logic, not just trame's built-in loop construct.
+- `react.Slot` itself is not a new mechanism so much as `VirtualNode`
+  (`widgets/core.py`) applied to a new attachment point: capture children now,
+  hand off a reference, attach it elsewhere (as a prop value instead of as
+  layout content).
+
+## 6. Open questions
+
+- **Multiple/renamed params.** `params=["item", "index"]` composes naturally
+  with the scheme above, but nested scoped slots (a slot inside a slot, each
+  introducing its own variables) need the scope chain to nest correctly rather
+  than flatten — not yet worked out.
+- **Default slot content.** Vue's `<slot>...</slot>` can have fallback content
+  when the parent doesn't provide that slot (`item.name` falling back to
+  `{{ item.name }}` in the example in section 1). The design above has no
+  fallback path yet — if `renderItemName` simply isn't passed, the prop is
+  `undefined`, pushing the fallback-rendering responsibility onto each widget
+  author individually (as shown in the `VDataTable` example) rather than
+  providing it for free.
+- **Unnamed/default slot.** Most widgets also have an unscoped default slot
+  (children with no `v-slot:` at all). That's just `props.children` in React —
+  no new mechanism needed — but it's worth stating explicitly so `react.Slot`
+  doesn't get reached for the common case where a plain scope-free slot would
+  do.
+- **Freshly-minted functions on every render.** Because `resolveProp` builds a
+  new closure for `{ "slot": ... }` (and `{ "callback": ... }`) each time it
+  runs, `renderItemName` is a new function identity on every re-render unless
+  the resolution pass memoizes per-node — the same fine-grained-reactivity
+  concern already flagged in the parent doc (section 6, item 7), just visible
+  here as a concrete case: an unmemoized render prop can defeat `React.memo` on
+  whatever the widget renders with it.
diff --git a/docs/adding-support-for-react/react-text-interpolation.md b/docs/adding-support-for-react/react-text-interpolation.md
new file mode 100644
index 0000000..60aaacb
--- /dev/null
+++ b/docs/adding-support-for-react/react-text-interpolation.md
@@ -0,0 +1,162 @@
+# Rethinking Text Interpolation for trame's React `client_type`
+
+> **Status: design exploration.** Revisits
+> [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md) section 3, which
+> originally proposed reusing Vue's `{{ }}` mustache syntax and splitting it into
+> DOM-shaped children at Python serialization time. This document asks whether
+> that was actually the right call for a React `client_type`, or just an
+> unexamined carry-over from the Vue path. **Scoped to `client_type="react"`
+> only** — the Vue path keeps `{{ }}` exactly as-is; Vue's own runtime compiler
+> is what makes that syntax work there, and nothing about it needs to change.
+
+## 1. What does React itself do here?
+
+Nothing special, and that's the point. JSX never introduced a text-templating
+mini-language, because it never needed one — children are just a list, and a
+list can already mix literal strings with expressions:
+
+```jsx
+<div>count = {count}</div>
+<div>Reset count to {defaultValue} then double it to {2 * defaultValue}</div>
+```
+
+`{count}` isn't a string-embedded marker being parsed out of `"count = {count}"`
+— it's a separate child in the JSX children array, sitting right next to the
+literal string `"count = "`. There is no equivalent in React to Vue's `{{ }}`
+because there's no problem left for it to solve once you can just write another
+child.
+
+This means trame's `{{ }}` convention isn't "the React way, spelled slightly
+differently" — it's a Vue-specific solution (string templates, compiled at
+runtime) applied to a design (the JSON tree) that doesn't actually have the
+constraint that made `{{ }}` necessary in the first place.
+
+## 2. Options considered
+
+### (a) Keep `{{ }}`, split it in Python (status quo)
+
+What `vue-vs-react-with-trame.md` section 3 already proposes: parse
+`"count = {{ count }}"` with a regex at serialization time into
+`["count = ", { "js": "count" }]`.
+
+- Works, and was already designed. But it's stringly-typed (a typo inside the
+  mustache, e.g. `{{ cuont }}`, is invisible to any tooling until it fails at
+  runtime), needs an escaping story for literal `{{`/`}}` in real text, and
+  requires a regex-based parser to exist and be maintained at all — solving a
+  problem React's own data model doesn't actually have.
+
+### (b) Python f-strings
+
+Tempting at first glance — `f"count = {count}"` looks exactly like what we
+want, and it's already native Python syntax with full IDE/lint support.
+
+- **Doesn't work.** An f-string evaluates immediately, at the point the Python
+  code runs, using whatever `count` is bound to *in Python* at that moment. It
+  bakes in a snapshot value and produces a plain `str` — there's no way for it
+  to stay bound to the *client-side* state key over time. Using an f-string
+  here would silently produce a UI that never updates, which is worse than a
+  syntax problem — it's a correctness trap. Rejected.
+
+### (c) Single-brace `.format()`-style placeholders
+
+A cosmetic variant of (a): `"count = {count}"`, parsed by trame instead of by
+Python's own `str.format`.
+
+- Doesn't address any of (a)'s actual problems — still a string convention
+  trame has to parse, still no tooling support, still needs an escaping story.
+  Changing the delimiter doesn't change the underlying philosophy mismatch.
+  Rejected for the same reasons as (a).
+
+### (d) Children are just a list; dynamic parts are a typed marker object
+
+Mirror JSX directly: a literal string is a literal string, and a dynamic part
+is its own explicit item in the children list — not a substring inside one.
+
+```python
+html.Div(["count = ", react.Bind("count")])
+html.Div([
+    "Reset count to ", react.Bind("default_value"),
+    " then double it to ", react.Bind("double_default"),
+])
+```
+
+Note the list/tuple wrapping: `AbstractElement.__init__` (`widgets/core.py`)
+takes a single `children` argument — a plain value is treated as one child,
+and a list/tuple is what lets you pass several. This isn't `*args`-style
+variadic children; the whole sequence has to be handed over as one argument.
+
+This is the recommendation. See below for why.
+
+## 3. Why (d) fits better
+
+- **No parser needed at all.** Python's own argument/list syntax already does
+  the splitting `{{ }}` needed a regex for. There's nothing to write, maintain,
+  or get subtly wrong with escaping.
+- **No escaping problem.** A plain string child is *always* literal text.
+  `html.Div("Use {{ this }} syntax literally")` just displays that text — no
+  `v-pre`-style opt-out needed, because there was never any parsing to opt out
+  of.
+- **Typos become visible.** `react.Bind("cuont")` is a real Python value that
+  can eventually be linted/checked against known state keys; a typo buried
+  inside a mustache string cannot be, short of parsing every string children at
+  lint time.
+- **Reuses `react.Bind` as-is — no new class needed.** `react.Bind` already
+  exists (`vue-vs-react-with-trame.md`, `react-scoped-slots.md`) for exactly
+  "a value that should reactively reflect a state expression," currently used
+  for prop values like `value=react.Bind("count", count=2)`. A child position
+  and a prop-value position both bottom out in the same serialized leaf shape,
+  `{ "js": "count" }` — so the same class does both jobs. This also resolves a
+  real inconsistency the status quo had: props already used typed objects
+  (`react.Bind`, `react.Callback`, `react.Slot`) to express dynamism, while
+  children were still stuck on a stringly-typed convention borrowed from Vue.
+  `react.Bind` in children brings the whole design onto one consistent idiom.
+
+### Serialized shape: unchanged
+
+This is a Python-authoring change, not a wire-format change — the JSON tree
+still looks exactly like `vue-vs-react-with-trame.md` section 3 already
+specified:
+
+```json
+{ "tag": "div", "children": ["count = ", { "js": "count" }] }
+```
+
+The only difference is *how* Python arrives at that array: previously, a
+regex split one string apart; now, the caller already handed the widget an
+already-split list, and each `react.Bind` instance serializes directly to its
+`{ "js": ... }` leaf — nothing left to parse client-side or server-side.
+
+## 4. Trade-off worth naming
+
+Interleaving many small pieces reads a little more verbosely in Python than
+one mustache-laden string for long, heavily-interpolated sentences:
+
+```python
+html.Div([
+    "Reset count to ", react.Bind("default_value"),
+    " then double it to ", react.Bind("double_default"),
+    ", or leave it at ", react.Bind("count"),
+])
+```
+
+vs. the single-string Vue equivalent:
+
+```python
+html.Div("Reset count to {{ default_value }} then double it to {{ double_default }}, or leave it at {{ count }}")
+```
+
+This is a real ergonomic cost for prose-heavy text, but it's the same
+trade-off JSX itself already accepts for the same reason — and it's the
+trade-off that buys typo-visibility and removes an entire parser from the
+design.
+
+## 5. Open questions
+
+- Should there be a lighter-weight alias/shorthand for the extremely common
+  single-binding case (`html.Div(["count = ", react.Bind("count")])`) to reduce
+  friction versus the old one-liner, without reintroducing string parsing?
+- Does this change anything about how `react.For`'s loop variable (`{{ item }}`
+  today) gets referenced in children — presumably it becomes
+  `react.Bind("item")` resolved against the loop's local scope, consistent with
+  everything above, but worth confirming against `react-scoped-slots.md`'s
+  scope-chain design.
diff --git a/docs/adding-support-for-react/vue-for-react-developers.md b/docs/adding-support-for-react/vue-for-react-developers.md
new file mode 100644
index 0000000..bde7804
--- /dev/null
+++ b/docs/adding-support-for-react/vue-for-react-developers.md
@@ -0,0 +1,193 @@
+# Vue for trame Developers Coming from React
+
+> **Status: this describes real, already-shipped behavior.** Unlike the
+> `react.*` companion docs (which are design exploration for a `client_type`
+> that doesn't exist yet), `client_type="vue3"` is real and has been trame's
+> primary client for a long time (`src/trame_client/widgets/core.py`). This
+> guide is a practical mapping from React concepts you already know to the
+> Vue-based syntax trame actually uses today — useful if you're a React
+> developer picking up an existing trame + Vue codebase, or evaluating trame
+> for the first time with a React background.
+>
+> If you'd rather trame worked the other way — React syntax instead of Vue —
+> see [`react-getting-started.md`](./react-getting-started.md) (a proposed,
+> not-yet-built `client_type="react"`). For the reverse mapping (Vue → React),
+> see [`react-for-vue-developers.md`](./react-for-vue-developers.md). For the
+> design rationale comparing the two approaches in depth, see
+> [`vue-vs-react-with-trame.md`](./vue-vs-react-with-trame.md).
+
+## Displaying a value that changes over time
+
+In JSX, a dynamic value is just an expression in curly braces, sitting next to
+literal text as another child. trame's Vue path uses mustache interpolation
+instead — a `{{ expr }}` marker embedded directly inside a string:
+
+```jsx
+// React (conceptually)
+<div>count = {count}</div>
+```
+
+```python
+# trame + Vue
+html.Div("count = {{ count }}")
+```
+
+Unlike JSX, the expression lives *inside* the string rather than as a separate
+child — trame's Vue path parses `{{ }}` out of whatever string children you
+pass, so `"count = {{ count }}"` is a single argument, not a list.
+
+## Binding a value to a prop / controlled input
+
+In React, a controlled input is always two explicit props: `value` and
+`onChange`. Vue's `v-model` directive bundles both into one — trame exposes it
+as a single kwarg, with an optional default via tuple:
+
+```jsx
+// React (conceptually)
+<input
+  type="range" min={0} max={10} step={1}
+  value={count}
+  onChange={(e) => setCount(Number(e.target.value))}
+/>
+```
+
+```python
+# trame + Vue
+html.Input(
+    type="range", min=0, max=10, step=1,
+    v_model_number=("count", 2),  # ("state key", default value)
+)
+```
+
+You don't write the change handler yourself — `v_model_number` (the `.number`
+modifier casts the input's string value to a number) wires the input's value
+both ways automatically. Other modifiers exist too: `v_model_lazy` (update on
+`change` instead of every keystroke), `v_model_trim`.
+
+## Handling events and calling Python
+
+```jsx
+// React (conceptually)
+<button onClick={() => reset()}>Reset</button>
+<button onClick={() => reset(4)}>Reset to 4</button>
+<input onDoubleClick={(e) => { e.preventDefault(); setCount(2 * count); }} />
+```
+
+```python
+# trame + Vue
+html.Button("Reset", click=self.reset)
+html.Button("Reset to 4", click=(self.reset, "[4]", "{}"))
+html.Input(v_on_dblclick_prevent="count = 2 * count")
+```
+
+A bare Python callable (`click=self.reset`) becomes a server round-trip
+(`trigger(...)` under the hood) with no arguments. A `(callable, args_js,
+kwargs_js)` tuple passes arguments along with that trip. Event modifiers
+(React's manual `e.preventDefault()`, `e.stopPropagation()`, ...) become a
+suffix on the kwarg name itself: `v_on_<event>_<modifier>`.
+
+## Rendering content conditionally
+
+In JSX, conditionals are just JavaScript (`&&`, a ternary, or an early
+return). Vue expresses them as a template attribute instead:
+
+```jsx
+// React (conceptually)
+{count > 5 && <div>Count is high</div>}
+```
+
+```python
+# trame + Vue
+html.Div("Count is high", v_if="count > 5")
+```
+
+`v_if` takes a JS-ish expression string, evaluated against trame state by
+Vue's own template compiler — there's no need to compute the boolean in Python
+first, though you certainly can if the condition gets complex.
+
+## Rendering a list of items
+
+```jsx
+// React (conceptually)
+<ul>
+  {items.map((item) => (
+    <li key={item.id}>{item.name}</li>
+  ))}
+</ul>
+```
+
+```python
+# trame + Vue
+with html.Ul():
+    html.Li("{{ item.name }}", v_for="item in items", key="item.id")
+```
+
+Same requirement as React — list items need a stable, unique `key` — but
+instead of `Array.prototype.map` in your own code, the iteration itself is
+declared as a `v_for="item in items"` attribute, and `item` becomes available
+inside that element's children/attributes as if it were state.
+
+## Render props / scoped content
+
+React's answer to "let a child component hand data back into content the
+caller provides" is a render prop — a function passed as a prop, called by
+the child with its own data. Vue's answer is a **scoped slot**:
+
+```jsx
+// React (conceptually)
+<DataTable
+  items={items}
+  renderItemName={(item) => <strong>{item.name}</strong>}
+/>
+```
+
+```python
+# trame + Vue
+with VDataTable(items=("items", data)):
+    with Template(v_slot_item_name="{ item }"):
+        html.Strong("{{ item.name }}")
+```
+
+`Template(v_slot_item_name="{ item }")` is the Vue equivalent of the render
+prop's function signature — `"{ item }"` is a destructuring pattern Vue's
+compiler parses out of the string, introducing `item` as a local variable
+available only inside that `Template` block, supplied by `VDataTable` itself
+(not global state). This only works for widgets that have registered
+`"item.<name>"` as a known scoped-slot name — the same way a React component
+has to define which render props it accepts.
+
+## Refs and imperative calls
+
+Same idea as React's `useRef`/`useImperativeHandle`, and the same syntax
+regardless of client type:
+
+```jsx
+// React (conceptually)
+const inputRef = useRef(null);
+<input ref={inputRef} />;
+inputRef.current.focus();
+```
+
+```python
+# trame + Vue (also identical for client_type="react")
+html.Input(ref="my_input")
+self.server.js_call("my_input", "focus")
+```
+
+`ref="name"` registers the element (or component instance) under that name;
+`server.js_call(name, method, *args)` calls a method on whatever's registered
+there.
+
+## Cheat sheet
+
+| React (conceptually) | trame + Vue |
+| --- | --- |
+| `{count}` as a child | `"{{ count }}"` embedded in a string child |
+| `value={x} onChange={...}` | `v_model_number=("x", default)` |
+| `onClick={() => fn()}` | `click=self.fn` |
+| `onClick={() => fn(4)}` | `click=(self.fn, "[4]", "{}")` |
+| `onDoubleClick={(e) => { e.preventDefault(); ... }}` | `v_on_dblclick_prevent="..."` |
+| `{cond && <div>...</div>}` | `html.Div(..., v_if="cond")` |
+| `items.map((item) => <li key={item.id}>...)` | `html.Li(..., v_for="item in items", key="item.id")` |
+| render prop (`renderItemName={(item) => ...}`) | `Template(v_slot_item_name="{ item }")` |
+| `useRef` / `useImperativeHandle` | `ref="name"` + `self.server.js_call("name", "method", *args)` |
diff --git a/docs/adding-support-for-react/vue-vs-react-with-trame.md b/docs/adding-support-for-react/vue-vs-react-with-trame.md
new file mode 100644
index 0000000..8195c56
--- /dev/null
+++ b/docs/adding-support-for-react/vue-vs-react-with-trame.md
@@ -0,0 +1,383 @@
+# Vue vs React `client_type` in trame: Syntax Exploration
+
+> **Status: design exploration.** As of this writing, `trame-client` only implements
+> `client_type = "vue2"` and `"vue3"` (see `src/trame_client/module/__init__.py` and
+> `src/trame_client/widgets/core.py`). There is no `"react"` client type yet. This
+> document explores what the Python-facing syntax and client-side architecture
+> *could* look like if one were added, and where it necessarily has to diverge from
+> the Vue implementation. It is meant to support planning, not to document shipped
+> behavior.
+
+## 1. How the Vue `client_type` actually works today
+
+This part matters because it explains *why* a naive "just add a React renderer"
+approach doesn't work.
+
+`AbstractElement.html` (`src/trame_client/widgets/core.py`) doesn't build a DOM or a
+virtual-DOM tree — it builds a **literal Vue template string**:
+
+```python
+html.Div("count = {{ count }}")
+html.Input(type="range", min=0, max=10, step=1, v_model_number="count")
+```
+
+serializes to something like:
+
+```html
+<div>count = {{ count }}</div>
+<input type="range" min="0" max="10" step="1" v-model.number="count" />
+```
+
+This string is shipped to the browser and registered as a dynamic Vue component
+(see `vue3-app/src/components/TrameTemplate.js`), which Vue **compiles at runtime**
+using its bundled template compiler. That's the load-bearing fact: Vue ships a
+runtime template compiler, so arbitrary strings containing directives
+(`v-if`, `v-for`, `v-model`, `v-bind`, `{{ mustache }}` interpolation) can be turned
+into a working reactive render function *after* the page has already loaded, purely
+from server-sent strings. State variables become `customRef`s (`toRef()` in
+`TrameTemplate.js`) so any `{{ name }}` or `v-model="name"` in the string
+automatically wires into the shared trame state store.
+
+React has **no runtime JSX/template compiler** in its standard distribution. JSX is
+normally compiled ahead-of-time (Babel/SWC) to `React.createElement(...)` calls.
+There's no directive system (`v-if`, `v-for`, `v-model` are Vue-template concepts,
+not HTML/React concepts) — conditionals and loops are just JavaScript. This is the
+central design problem a `client_type = "react"` implementation has to solve.
+
+## 2. The serializable widget tree strategy
+
+Instead of a template-like string (the Vue approach), a React `client_type` emits
+a **serializable widget tree (JSON)** that mirrors the real DOM: each node is a
+`tag` + `props` + `children`. A small generic `<TrameNode>` React component walks
+that tree at runtime and calls `React.createElement` directly — no compiler
+needed at all. Conditionals, loops, and two-way binding become properties of the
+tree/renderer rather than syntax embedded in a string.
+
+This is a good idiomatic fit for React's data-driven mental model, and it's the
+same pattern used by most "server-driven UI" systems, so the examples below build
+on it throughout.
+
+## 3. Syntax comparison
+
+### Vue.js example
+
+```python
+from trame.app import TrameApp
+from trame.widgets import html
+from trame.ui.html import DivLayout
+from trame.decorators import change
+
+class VueImplementation(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="vue3")
+        self._build_ui()
+
+    @change("count")
+    def update_count(count, **_):
+        self.state.double = 2 * int(count)
+
+    def reset(self, value=2):
+        self.state.count = value
+        
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
+            html.Div("count = {{ count }}")
+            html.Div("2 x count = {{ double }}")
+            html.Input(
+                type="range", min=0, max=10, step=1,
+                v_model_number=("count", 2),
+                v_on_dblclick_prevent="count = 2 * count"
+            )
+            html.Button(
+                "Reset",
+                click=self.reset,
+            )
+            html.Button(
+                "Reset 4",
+                click=(self.reset, "[4]", "{}"),
+            )
+```
+
+### React example
+
+```python
+from trame.app import TrameApp
+from trame.widgets import html
+from trame.ui.html import DivLayout
+from trame.decorators import change
+
+class ReactImplementation(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="react")
+        self._build_ui()
+
+    @change("count")
+    def update_count(count, **_):
+        self.state.double = 2 * int(count)
+
+    def reset(self, value=2):
+        self.state.count = value
+        
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
+            html.Div("count = {{ count }}")
+            html.Div("2 x count = {{ double }}")
+            html.Input(
+                type="range", min=0, max=10, step=1,
+                value=react.Bind("count", count=2),
+                onChange=react.Callback("count = Number($event.target.value)"),
+                onDoubleClick=react.Callback("count = 2 * count", modifiers=["prevent"]),
+            )
+            html.Button(
+                "Reset",
+                onClick=react.Callback(self.reset)
+            )
+            html.Button(
+                "Reset 4",
+                onClick=react.Callback(self.reset, "[4]", "{}")
+            )
+```
+
+Those examples will then update the template state variable with those values:
+
+For vue
+
+```html
+<div>count = {{ count }}</div>
+<div>2 x count = {{ double }}</div>
+<input 
+    type="range"
+    min="0"
+    max="10"
+    step="1"
+    v-model.number="count"
+    v-on:dblclick.prevent="count = 2 * count"
+/>
+<button @click="trigger('trigger_1')">Reset</button>
+<button @click="trigger('trigger_1', [4], {})">Reset 4</button>
+```
+
+For react
+
+```json
+[
+  { "tag": "div", "children": ["count = ", { "js": "count" }] },
+  { "tag": "div", "children": ["2 x count = ", { "js": "double" }] },
+  {
+    "tag": "input",
+    "props": {
+      "type": "range",
+      "min": 0,
+      "max": 10,
+      "step": 1,
+      "value": { "js": "count" },
+      "onChange": { "callback": { "js": "count = Number($event.target.value)" } },
+      "onDoubleClick": {
+        "callback": { "js": "count = 2 * count" },
+        "modifiers": ["prevent"]
+      }
+    }
+  },
+  {
+    "tag": "button",
+    "children": ["Reset"],
+    "props": {
+      "onClick": { "callback": { "trigger": "trigger_1" } }
+    }
+  },
+  {
+    "tag": "button",
+    "children": ["Reset 4"],
+    "props": {
+      "onClick": {
+        "callback": {
+          "trigger": "trigger_1",
+          "args": { "js": "[4]" },
+          "kwargs": { "js": "{}" }
+        }
+      }
+    }
+  }
+]
+```
+
+`react.Bind(js_expression, **state_defaults)` — the first, positional argument
+is the JS expression to evaluate against the current scope; every keyword
+argument sets a default on trame's shared state (`state.setdefault(key,
+value)`, one call per kwarg), independent of what the expression itself
+references. See `react-getting-started.md` section 4 for the full breakdown
+and a multi-key example.
+
+react.Callback is use to generate a JavaScript callback that will either evaluate a JavaScript function or make a call to a trame trigger function.
+
+
+## 4. A concrete Python-facing API proposal: `react.If`, `react.For`, `react.Bind`
+
+Rather than inventing a JSON-tree DSL from scratch (section 3), structural
+directives can be modeled as **widgets** that reuse the same context-manager
+pattern already used by `Template`/`VirtualNode` in `widgets/core.py` (pushing
+onto `HTML_CTX` in `__enter__`/popping in `__exit__`). This keeps Python authoring
+close to parity between `client_type="vue3"` and a future `client_type="react"`.
+
+### `v-if` → `react.If`
+
+```python
+# internally "count > 5" will be wrapped with react.Bind("count > 5") as needed
+with react.If(value="count > 5"):
+    html.Div("Count is high")
+```
+
+vs. Vue:
+
+```python
+html.Div("Count is high", v_if="count > 5")
+```
+
+`react.If` isn't a real DOM tag — it's a structural marker. It wraps its children
+and tells the client renderer "only mount this subtree while `value` is truthy,"
+i.e. it moves the conditional from an *attribute* (Vue) to a *block* (React),
+which matches how React actually expresses conditionals in JSX.
+
+### `v-for` → `react.For`
+
+```python
+# react.Bind can be used or tagged internally for specific kwargs
+with react.For(items="Object.keys(obj)", name="item"):
+    html.Li("{{ item }}")
+```
+
+vs. Vue:
+
+```python
+html.Li("{{ item }}", v_for="item in Object.keys(obj)")
+```
+
+### `v-model` → `react.Bind` + `react.Callback`
+
+```python
+html.Input(
+    value=react.Bind("count", count=2),
+    onChange=react.Callback("count=Number($event.target.value)", modifiers=["prevent"])
+)
+```
+
+vs. Vue:
+
+```python
+html.Input(v_model_number="count")
+```
+
+Vue's single `v-model` directive splits into two explicit pieces under React:
+`react.Bind` supplies the controlled `value` (a JS expression — here just the
+bare key `"count"` — serialized as the `{ "js": "count" }` leaf shown in
+section 3, with `count=2` setting `state.setdefault("count", 2)` as a side
+effect, independent of the expression itself), and `react.Callback` supplies
+the `onChange` handler that writes back to state —
+either a raw JS expression (as here) or a Python callable, optionally combined
+with event `modifiers` (`prevent`, `stop`, ...) standing in for Vue's
+`.prevent`/`.stop` modifiers. `react.Callback` isn't `v-model`-specific — it's
+the same helper used for every other event prop (`onClick`, `onDoubleClick`,
+...), so there's one unified mechanism for both directive-style two-way binding
+and plain event wiring, rather than a dedicated `v-model` construct.
+
+### Why this fits well
+
+- Reuses the existing Python idiom (context managers for structure, kwargs for
+  bindings) instead of introducing a parallel tree-building API just for React.
+- Keeps the same "arbitrary JS expression string" escape hatch the Vue path
+  already relies on (`v_if="count > 5"`, `v_bind_x="expr"` already flow through
+  `translate_js_expression` in `widgets/core.py`) — nothing new at the Python
+  level, only the client-side handling of that string changes.
+
+### What it requires that doesn't exist yet
+
+- **A client-side expression evaluator.** Under Vue, `v_if="count > 5"` works
+  because Vue's compiler turns the string into real JS bound to the reactive
+  scope. React ships no such compiler, so `react.If.value` and `react.For.items`
+  would need trame's own small evaluator at runtime (e.g.
+  `new Function(...stateKeys, 'return (' + expr + ')')(...stateValues)`) —
+  effectively reimplementing in miniature what Vue's compiler currently does
+  for free.
+- **Mustache interpolation on non-state names.** `{{ item }}` inside `react.For`
+  isn't a trame state key — it's a local loop variable introduced by
+  `react.For(..., name="item")`. Since `{{ item }}` splits into the same
+  `{ "js": "item" }` leaf described in section 3, this falls out for free as
+  long as the runtime scope resolution checks the nearest enclosing `react.For`
+  binding before falling back to global state — no separate mechanism needed,
+  just a scope chain instead of a flat lookup.
+
+## 5. What's structurally harder for React
+
+- **Two-way binding (`v-model`)** has no first-class React equivalent — every
+  instance has to be expanded into an explicit controlled `value`/`onChange` pair,
+  which is more verbose per-widget than Vue's single directive.
+- **Conditionals and loops** move from "syntax embedded in markup" (Vue) to "logic
+  in the renderer / tree shape" (React) — there's no way to keep them as
+  inline string directives without shipping a JSX compiler to the browser.
+- **Arbitrary expressions** (e.g. `v-if="count > 5 && ready"`) are trivial for Vue's
+  compiler to evaluate from a string, but a JSON-tree approach would need either a
+  small expression-evaluator DSL or would have to push such logic to be computed
+  server-side into a plain boolean state key before it reaches the client.
+
+## 6. What's still missing for full parity
+
+Sections 1-5 cover the **core primitive layer**: text binding, events/triggers,
+and `v-if`/`v-for`/`v-model` equivalents. That layer is basically fully specified
+at this point. But "the same way we use trame with Vue today" pulls in a lot more
+than raw `html.Div`/`Input` usage, and none of the following is addressed yet —
+ranked roughly by impact:
+
+1. **The widget ecosystem — by far the biggest gap.** Most real trame apps aren't
+   built from `html.*` primitives; they're built from trame-vuetify, trame-vtk,
+   trame-plotly, trame-matplotlib, etc. Each of those ships an actual Vue
+   component implementation today. Porting the core mechanism described in
+   sections 1-5 doesn't get you a single `<v-btn>` or `<vtk-view>` in React — this
+   dwarfs the work discussed so far.
+
+2. **Custom-tag resolution.** The JSON tree assumes `tag` → `React.createElement(tag, ...)`,
+   i.e. a literal DOM tag. But `<v-btn>`/`<vtk-view>` aren't DOM tags — Vue
+   resolves them through a global component registry tied to the asset-loading
+   system in `src/trame_client/module/__init__.py`. There's no documented React
+   counterpart: a registry mapping widget names to actual React component
+   references that `TrameNode` would need to check before falling back to
+   `createElement(tag, ...)`.
+
+3. **No client app shell exists yet.** There's no `react-app/` equivalent of
+   `vue3-app/`. All the life-cycle glue currently living in
+   `vue3-app/src/components/` (`TrameSizeObserver`, `TrameGetter`, `TrameScript`,
+   `TrameExec`, `TrameReconnect`, `TrameClientStateChange`,
+   `TrameLifeCycleMonitor`, ...) is built on Vue's `onMounted`/`onUpdated` hooks
+   and needs a from-scratch React reimplementation using `useEffect`.
+
+4. **Refs.** `AbstractElement.html` already special-cases `ref=` for vue3
+   (patches it to `trame.refs[name] = el`), used by apps to imperatively reach
+   into a rendered component. The JSON-tree schema has no `"ref"` field or
+   callback-ref mechanism yet.
+
+5. **Scoped slots — the hardest semantic gap.** Widget libraries lean on Vue's
+   scoped slots (a child component, like a data table, handing per-row data back
+   into the slot template it's given). `react.If`/`react.For`/`react.Bind` don't
+   generalize to "a widget hands you extra scope at render time" — that's a
+   fundamentally different mechanism than binding against known state keys,
+   closer to React's "render props" pattern, and nothing designed so far covers
+   it.
+
+6. **The expression evaluator is still aspirational.** Section 4 says `react.If`/
+   `react.For` "would need" one, but building it safely — sandboxing
+   `new Function`, caching per unique expression string instead of re-parsing on
+   every render, deciding the supported grammar — is real, unstarted work. Vue's
+   compiler already solved this; a hand-rolled version doesn't inherit that
+   hardening for free.
+
+7. **Fine-grained reactivity/perf.** Vue's `customRef` gives cheap per-key
+   updates (see `toRef()` in `TrameTemplate.js`). A React renderer walking a
+   JSON tree needs each `TrameNode` to subscribe narrowly to only the state keys
+   its own subtree binds, or state changes will over-render the whole tree —
+   not addressed anywhere in this design yet.
+
+**Recommendation:** treat items 1 and 5 as the real litmus test for this design.
+Prototype one non-trivial third-party widget end-to-end — something with a
+scoped slot, like a table row template — before investing further design time in
+the core mechanism. That's where the JSON-tree schema is least proven, and if it
+doesn't hold up there, it changes the schema everything else in this document
+depends on.
diff --git a/docs/adding-support-for-react/vue-vs-react.md b/docs/adding-support-for-react/vue-vs-react.md
new file mode 100644
index 0000000..fb66505
--- /dev/null
+++ b/docs/adding-support-for-react/vue-vs-react.md
@@ -0,0 +1,146 @@
+# Vue.js vs React: High-Level Comparison
+
+## Templating Philosophy
+
+- **Vue**: HTML-based templates with directives (`v-if`, `v-for`, `v-bind`). Looks close to plain HTML/CSS/JS, separated into `.vue` single-file components (template/script/style blocks). Lower barrier for people coming from traditional web dev.
+- **React**: JSX — HTML-like syntax embedded directly in JavaScript. Everything is "just JS," so logic and markup live together. Steeper initial learning curve (mixing markup in JS feels odd at first) but more expressive once you're used to it.
+
+## Reactivity Model
+
+- **Vue**: Reactivity is built into the framework via a proxy-based system (`ref`/`reactive`). You mutate data and the view updates automatically — closer to a "magic" data-binding feel.
+- **React**: Explicit state via hooks (`useState`, `useEffect`). Nothing is reactive by default — you must call `setState` to trigger re-renders, and re-renders re-run the whole function component. More explicit/functional mental model, but more foot-guns around stale closures and dependency arrays.
+
+## Component Style
+
+- **Vue**: Options API (older, more structured/beginner-friendly) or Composition API (newer, hooks-like, more flexible). Two ways to write components can be a source of fragmentation in a codebase.
+- **React**: Function components + hooks is now the single standard way. More consistency across the ecosystem, but hooks rules (no conditional hooks, dependency arrays) trip up newcomers.
+
+## Ecosystem & Tooling
+
+- **Vue**: More "batteries included" — Vue Router, Pinia/Vuex, and build tooling are official, curated, and integrate tightly.
+- **React**: More "bring your own" — routing, state management, and even data fetching are third-party choices (React Router, Redux/Zustand/Jotai, React Query). More flexibility, more decision fatigue.
+
+## Learning Curve & Adoption
+
+- **Vue**: Generally considered easier to pick up initially, great docs, gentle progression.
+- **React**: Larger job market, ecosystem, and community; more transferable skill (concepts carry to React Native, Next.js, etc.).
+
+## Performance
+
+- Both are comparably fast for most apps. Vue's fine-grained reactivity can avoid unnecessary re-renders more automatically; React relies on the developer (or compiler tooling like the React Compiler) to avoid wasted re-renders.
+
+## Code Example: Props, Events, and Directives Side-by-Side
+
+The example below is the same small component (a labeled counter with a toggle and a filtered list) written both ways, to show how Vue directives map onto plain JS/JSX patterns in React.
+
+### Vue (Composition API, `<script setup>`)
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+// --- props ---
+const props = defineProps({
+  items: { type: Array, required: true },
+})
+
+// --- events (emits) ---
+const emit = defineEmits(['count-changed'])
+
+const count = ref(0)
+const showDetails = ref(false)
+const filter = ref('')
+
+function increment() {
+  count.value++
+  emit('count-changed', count.value)
+}
+
+const filteredItems = computed(() =>
+  props.items.filter((item) => item.includes(filter.value))
+)
+</script>
+
+<template>
+  <!-- v-model: two-way binding on the input -->
+  <input v-model="filter" placeholder="Filter items..." />
+
+  <button @click="increment">Count: {{ count }}</button>
+
+  <!-- v-if: conditional rendering -->
+  <p v-if="showDetails">Details are visible</p>
+  <button @click="showDetails = !showDetails">Toggle details</button>
+
+  <!-- v-for: list rendering -->
+  <ul>
+    <li v-for="item in filteredItems" :key="item">{{ item }}</li>
+  </ul>
+</template>
+```
+
+### React (function component + hooks)
+
+```jsx
+import { useState, useMemo } from 'react';
+
+// --- props: plain function arguments (destructured object) ---
+// --- events: passed in as a callback prop, e.g. onCountChanged ---
+function Counter({ items, onCountChanged }) {
+  const [count, setCount] = useState(0);
+  const [showDetails, setShowDetails] = useState(false);
+  const [filter, setFilter] = useState('');
+
+  function increment() {
+    const next = count + 1;
+    setCount(next);
+    onCountChanged?.(next); // calling the callback prop == emitting an event
+  }
+
+  const filteredItems = useMemo(
+    () => items.filter((item) => item.includes(filter)),
+    [items, filter]
+  );
+
+  return (
+    <>
+      {/* v-model equivalent: controlled input (value + onChange) */}
+      <input
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        placeholder="Filter items..."
+      />
+
+      <button onClick={increment}>Count: {count}</button>
+
+      {/* v-if equivalent: JS conditional (&&, ternary, or early return) */}
+      {showDetails && <p>Details are visible</p>}
+      <button onClick={() => setShowDetails(!showDetails)}>
+        Toggle details
+      </button>
+
+      {/* v-for equivalent: Array.prototype.map with a key prop */}
+      <ul>
+        {filteredItems.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+// Parent usage — passing a prop and listening to the "event"
+<Counter items={myItems} onCountChanged={(n) => console.log('count is', n)} />
+```
+
+### Key takeaways from the example
+
+| Concept | Vue | React |
+| --- | --- | --- |
+| Props | `defineProps` | Function arguments (destructured object) |
+| Events | `defineEmits` + `emit('name', payload)` | A callback prop (e.g. `onCountChanged`) passed down and called directly |
+| `v-if` | Directive on the element | Plain JS: `&&`, ternary, or early `return null` |
+| `v-for` | Directive with `:key` | `array.map()` returning JSX, with a `key` prop |
+| `v-model` | Directive providing automatic two-way binding | Manual "controlled component": `value` + `onChange` |
+| State updates | Mutate `ref`/`reactive` directly | Must call the setter function (`setCount`), never mutate directly |
+
+The overarching pattern: Vue directives are declarative shorthand baked into the template compiler, while React expresses the same ideas as ordinary JavaScript expressions inside JSX — nothing "magic," but more boilerplate for things like two-way binding.
diff --git a/examples/react/client_widgets.py b/examples/react/client_widgets.py
new file mode 100644
index 0000000..af3c971
--- /dev/null
+++ b/examples/react/client_widgets.py
@@ -0,0 +1,235 @@
+"""
+Exercise every widget in `trame.widgets.client` against the react client:
+
+    - Style               inject/update a global <style> tag
+    - Script              inject a global <script> tag and call what it defines
+    - ClientStateChange   fire a callback whenever a state variable changes
+    - ClientTriggers      call named client-side handlers from the server,
+                           and route client-side events back to the server
+    - JSEval              run arbitrary JS client-side from a server trigger
+    - LifeCycleMonitor    observe a subtree's mount/unmount life cycle
+    - SizeObserver        bind an element's on-screen size to state
+
+Each section below is self-contained and logs what happened to the shared
+event log on the right so its behavior is visible without opening the
+browser console.
+"""
+
+from trame.app import TrameApp
+from trame.widgets import client, html, react
+from trame.ui.html import DivLayout
+
+# React elements take `style` as a dict of camelCase CSS properties, not a
+# CSS text string (that's a Vue-ism).
+CARD_STYLE = {
+    "border": "1px solid #ccc",
+    "borderRadius": "6px",
+    "padding": "12px",
+    "marginBottom": "12px",
+}
+
+
+class ClientWidgetsApp(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="react")
+
+        self.state.counter = 0
+        self.state.events = []
+        self.state.box_size = None
+        self.state.dark_theme = False
+        self.state.show_monitor = True
+
+        with DivLayout(self.server) as self.ui:
+            self._style = client.Style(self._css(dark=False))
+            client.Script(
+                "window.trameClientWidgetsDemo = "
+                "() => window.alert('Injected by client.Script!');"
+            )
+
+            with html.Div(
+                style={"maxWidth": "900px", "margin": "0 auto", "padding": "16px"}
+            ):
+                html.H1("trame client widgets (react)")
+
+                with html.Div(
+                    style={
+                        "display": "grid",
+                        "gridTemplateColumns": "2fr 1fr",
+                        "gap": "16px",
+                    }
+                ):
+                    with html.Div():
+                        self._style_section()
+                        self._script_section()
+                        self._client_state_change_section()
+                        self._client_triggers_section()
+                        self._js_eval_section()
+                        self._life_cycle_monitor_section()
+                        self._size_observer_section()
+
+                    self._event_log()
+
+    # -------------------------------------------------------------------
+    # Shared helpers
+    # -------------------------------------------------------------------
+    def _css(self, dark):
+        if dark:
+            return (
+                "body { margin: 0; font-family: sans-serif; "
+                "background: #222; color: #eee; }"
+            )
+        return "body { margin: 0; font-family: sans-serif; }"
+
+    def _log(self, message):
+        self.state.events = [message, *self.state.events][:12]
+
+    def _event_log(self):
+        with html.Div(style={**CARD_STYLE, "height": "fit-content"}):
+            html.H3("Event log")
+            with html.Ul(style={"paddingLeft": "18px", "fontFamily": "monospace"}):
+                with react.For(items="events", name="entry"):
+                    html.Li([react.Bind("entry")])
+
+    # -------------------------------------------------------------------
+    # client.Style
+    # -------------------------------------------------------------------
+    def _style_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("Style")
+            html.P("Toggle a global CSS rule injected by client.Style.")
+            html.Button("Toggle dark theme", on_click=react.Callback(self.toggle_theme))
+
+    def toggle_theme(self):
+        self.state.dark_theme = not self.state.dark_theme
+        self._style.update(self._css(self.state.dark_theme))
+        self._log(f"Style: theme is now {'dark' if self.state.dark_theme else 'light'}")
+
+    # -------------------------------------------------------------------
+    # client.Script
+    # -------------------------------------------------------------------
+    def _script_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("Script")
+            html.P("Call a function defined by the script client.Script injected.")
+            html.Button(
+                "Call window.trameClientWidgetsDemo()",
+                on_click=react.Callback("window.trameClientWidgetsDemo()"),
+            )
+
+    # -------------------------------------------------------------------
+    # client.ClientStateChange
+    # -------------------------------------------------------------------
+    def _client_state_change_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("ClientStateChange")
+            html.P(["counter = ", react.Bind("counter")])
+            html.Button("counter += 1", on_click=react.Callback(self.increment))
+            client.ClientStateChange(
+                value="counter",
+                trigger_on_create=True,
+                change=react.Callback(self.on_counter_changed),
+            )
+
+    def increment(self):
+        self.state.counter += 1
+
+    def on_counter_changed(self):
+        self._log(f"ClientStateChange: counter changed to {self.state.counter}")
+
+    # -------------------------------------------------------------------
+    # client.ClientTriggers
+    # -------------------------------------------------------------------
+    def _client_triggers_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("ClientTriggers")
+            html.P("Ask the client to emit 'ping', which calls back to the server.")
+            triggers = client.ClientTriggers(
+                mounted=react.Callback(self.on_triggers_mounted),
+                ping=react.Callback(self.on_ping),
+            )
+            html.Button(
+                "Ping client",
+                on_click=react.Callback(triggers.call, "['ping']"),
+            )
+
+    def on_triggers_mounted(self):
+        self._log("ClientTriggers: mounted")
+
+    def on_ping(self):
+        self._log("ClientTriggers: server asked client to ping, client replied")
+
+    # -------------------------------------------------------------------
+    # client.JSEval
+    # -------------------------------------------------------------------
+    def _js_eval_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("JSEval")
+            html.P("Trigger arbitrary JS from the server, with a bound payload.")
+            js_eval = client.JSEval(
+                event="Hello from JSEval!",
+                exec=react.Callback("window.alert($event)"),
+            )
+            html.Button("Show alert", on_click=react.Callback(js_eval.exec))
+
+    # -------------------------------------------------------------------
+    # client.LifeCycleMonitor
+    # -------------------------------------------------------------------
+    def _life_cycle_monitor_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("LifeCycleMonitor")
+            html.P("Mount/unmount a monitored subtree and watch the log.")
+            html.Button(
+                "Toggle monitored subtree",
+                on_click=react.Callback("show_monitor = !show_monitor"),
+            )
+            with react.If(value="show_monitor"):
+                client.LifeCycleMonitor(
+                    name="DemoMonitor",
+                    type="emit",
+                    value="counter",
+                    events=["mounted", "destroyed"],
+                    mounted=react.Callback(self.on_monitor_event, "['mounted']"),
+                    destroyed=react.Callback(self.on_monitor_event, "['destroyed']"),
+                )
+                html.Div("(monitored subtree is mounted)")
+
+    def on_monitor_event(self, phase):
+        self._log(f"LifeCycleMonitor: {phase}")
+
+    # -------------------------------------------------------------------
+    # client.SizeObserver
+    # -------------------------------------------------------------------
+    def _size_observer_section(self):
+        with html.Div(style=CARD_STYLE):
+            html.H3("SizeObserver")
+            html.P("Drag the bottom-right corner to resize and watch the size update.")
+            with html.Div(
+                style={
+                    "width": "320px",
+                    "height": "120px",
+                    "resize": "both",
+                    "overflow": "auto",
+                    "border": "1px dashed #888",
+                }
+            ):
+                with client.SizeObserver("box_size"):
+                    html.Div(
+                        [
+                            react.Bind(
+                                "box_size ? "
+                                "`${Math.round(box_size.size.width)} x "
+                                "${Math.round(box_size.size.height)} px` : "
+                                "'measuring...'"
+                            )
+                        ],
+                        style={"padding": "8px"},
+                    )
+
+
+def main():
+    app = ClientWidgetsApp()
+    app.server.start()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/examples/react/dynamic_style.py b/examples/react/dynamic_style.py
new file mode 100644
index 0000000..4015115
--- /dev/null
+++ b/examples/react/dynamic_style.py
@@ -0,0 +1,30 @@
+from trame.app import TrameApp
+from trame.widgets import html, react
+from trame.ui.html import DivLayout
+
+
+class DynamicStyleReact(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="react")
+
+        with DivLayout(self.server) as self.ui:
+            html.Div(
+                "Dynamic style",
+                style={
+                    "fontWeight": "bold",
+                    "color": react.Bind("color", color="red"),
+                },
+            )
+            html.Input(
+                value=react.Bind("color", color="red"),
+                on_change=react.Callback("color = $event.target.value"),
+            )
+
+
+def main():
+    app = DynamicStyleReact()
+    app.server.start()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/examples/react/reactive_state.py b/examples/react/reactive_state.py
new file mode 100644
index 0000000..b24df87
--- /dev/null
+++ b/examples/react/reactive_state.py
@@ -0,0 +1,78 @@
+from trame.app import TrameApp
+from trame.widgets import html, react, client
+from trame.ui.html import DivLayout
+from trame.decorators import change
+
+
+class TestReact(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server, client_type="react")
+
+        self.state.todos = ["Write docs", "Review PR", "Ship it"]
+
+        with DivLayout(self.server) as self.ui:
+            html.Div(["count = ", react.Bind("count", count=2)])
+            html.Input(
+                type="range",
+                min=0,
+                max=10,
+                step=1,
+                value=react.Bind("count", count=2),
+                on_change=react.Callback("count = Number($event.target.value)"),
+            )
+            html.Button("Reset", on_click=react.Callback(self.reset))
+            html.Input(
+                value=react.Bind("text", text="Hello world"),
+                on_change=react.Callback("text = $event.target.value"),
+            )
+            html.Button("Add todo", on_click=react.Callback(self.add_todo, "[text]"))
+
+            with react.If(value="todos.length > 0"):
+                with html.Ul():
+                    with react.For(items="todos", name="todo"):
+                        html.Li([react.Bind("todo")], key=react.Bind("todo"))
+
+            with react.If(value="todos.length == 0"):
+                html.Div("No todos...")
+
+            html.Hr()
+            client.ServerTemplate(name="subview")
+            html.Hr()
+
+            html.A("Go to view 2", href="/?ui=view2")
+
+        with DivLayout(self.server, template_name="view2"):
+            html.Div("Yes it is still me")
+            html.A("Go home", href="/")
+
+        with DivLayout(self.server, template_name="subview"):
+            html.Div("From a SubView")
+            with html.Ul():
+                for i in range(10):
+                    html.Li(f"Sub view item {i}")
+
+    def reset(self, value=2):
+        self.state.count = value
+
+    def add_todo(self, value):
+        self.state.todos.append(value)
+        self.state.dirty("todos")
+        self.state.count += 1
+
+    @change("count")
+    def _on_count(self, count, **_):
+        while len(self.state.todos) > count:
+            self.state.todos.pop()
+        while len(self.state.todos) < count:
+            self.state.todos.append(f"Item {len(self.state.todos)}")
+
+        self.state.dirty("todos")
+
+
+def main():
+    app = TestReact()
+    app.server.start()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/examples/test/react_client_widgets.py b/examples/test/react_client_widgets.py
new file mode 100644
index 0000000..152ffdb
--- /dev/null
+++ b/examples/test/react_client_widgets.py
@@ -0,0 +1,22 @@
+from trame.app import get_server
+from trame.widgets import html, client, react
+from trame.ui.html import DivLayout
+from trame_client.utils.testing import enable_testing
+
+server = get_server(client_type="react")
+server.state.mounted_count = 0
+
+
+def on_mounted():
+    server.state.mounted_count += 1
+
+
+with DivLayout(server) as layout:
+    client.Style("body { margin: 0; } .sizeBox { background: red; }")
+    client.ClientTriggers(ref="triggers1", mounted=react.Callback(on_mounted))
+    html.Div([react.Bind("mounted_count")], classes="mountedCount")
+    with client.SizeObserver("box_size"):
+        html.Div(classes="sizeBox", style={"width": "200px", "height": "100px"})
+
+enable_testing(server, "mounted_count", "box_size")
+server.start()
diff --git a/examples/test/react_if_for.py b/examples/test/react_if_for.py
new file mode 100644
index 0000000..c0586cc
--- /dev/null
+++ b/examples/test/react_if_for.py
@@ -0,0 +1,44 @@
+from trame.app import get_server
+from trame.widgets import html, react
+from trame.ui.html import DivLayout
+from trame_client.utils.testing import enable_testing
+
+server = get_server(client_type="react")
+server.state.count = 2
+server.state.todos = ["Write docs", "Review PR", "Ship it"]
+
+
+def reset(value=2):
+    server.state.count = value
+
+
+def clear_todos():
+    server.state.todos = []
+
+
+with DivLayout(server) as layout:
+    html.Div([react.Bind("count")], classes="countValue")
+    html.Input(
+        type="range",
+        min=0,
+        max=10,
+        step=1,
+        classes="countSlider",
+        value=react.Bind("count"),
+        on_change=react.Callback("count = Number($event.target.value)"),
+    )
+    html.Button("Reset", classes="resetButton", on_click=react.Callback(reset))
+    html.Button(
+        "Clear todos", classes="clearButton", on_click=react.Callback(clear_todos)
+    )
+    with react.If(value="todos.length > 0"):
+        with html.Ul(classes="todoList"):
+            with react.For(items="todos", name="todo"):
+                html.Li(
+                    [react.Bind("todo")], classes="todoItem", key=react.Bind("todo")
+                )
+    with react.If(value="todos.length === 0"):
+        html.Div("No todos left", classes="emptyMsg")
+
+enable_testing(server, "count", "todos")
+server.start()
diff --git a/examples/test/react_reactivity.py b/examples/test/react_reactivity.py
new file mode 100644
index 0000000..379907d
--- /dev/null
+++ b/examples/test/react_reactivity.py
@@ -0,0 +1,22 @@
+from trame.app import get_server
+from trame.widgets import html, react
+from trame.ui.html import DivLayout
+from trame_client.utils.testing import enable_testing
+
+server = get_server(client_type="react")
+server.state.count = 1
+
+with DivLayout(server) as layout:
+    html.Div(
+        react.Bind("count"),
+        classes="countValue",
+        style={"padding": "20px", "background": "red"},
+    )
+    html.Button(
+        "Add to count",
+        classes="plusButton",
+        on_click=react.Callback("count++"),
+    )
+
+enable_testing(server, "count")
+server.start()
diff --git a/js-lib/.eslintrc.cjs b/js-lib/.eslintrc.cjs
deleted file mode 100644
index e24735b..0000000
--- a/js-lib/.eslintrc.cjs
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
-module.exports = {
-  root: true,
-  extends: ["eslint:recommended", "@vue/eslint-config-prettier"],
-  env: {
-    browser: true,
-    es6: true,
-  },
-  rules: {
-    "no-unused-vars": 2,
-    "no-undef": 2,
-  },
-  parserOptions: {
-    sourceType: "module",
-    ecmaVersion: "latest",
-  },
-};
diff --git a/js-lib/README.md b/js-lib/README.md
index e32649b..199e286 100644
--- a/js-lib/README.md
+++ b/js-lib/README.md
@@ -32,7 +32,7 @@ const result = await trame.trigger("name", [arg_0, arg_1], {
 
 // Register JS object so Python can make method calls
 // py => server.js_call("name", "method", arg_0, arg_1)
-trame.refs[("name", js_object)];
+trame.refs["name"] = js_object;
 ```
 
 More API examples
@@ -58,12 +58,6 @@ const unsubscribeOnError = trame.onError((info) => {
 });
 unsubscribeOnError();
 
-// Listen to connection status change
-const unsubscribeOnDisconnect = trame.onDisconnect(() => {
-  console.log("Client is disconnecting");
-});
-unsubscribeOnDisconnect();
-
 // Ask server to exit and disconnect
 trame.exit(timeout);
 
diff --git a/js-lib/eslint.config.mjs b/js-lib/eslint.config.mjs
new file mode 100644
index 0000000..5d5a278
--- /dev/null
+++ b/js-lib/eslint.config.mjs
@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import vuePrettier from "@vue/eslint-config-prettier";
+import globals from "globals";
+
+export default tseslint.config(
+  { ignores: ["dist", "examples/**"] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  vuePrettier,
+  {
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+      },
+    },
+    rules: {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+);
diff --git a/js-lib/package-lock.json b/js-lib/package-lock.json
index f54ee4c..4a55605 100644
--- a/js-lib/package-lock.json
+++ b/js-lib/package-lock.json
@@ -1,25 +1,212 @@
 {
   "name": "@kitware/trame",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@kitware/trame",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "license": "MIT",
       "dependencies": {
         "@kitware/wslink": "^2.5.6"
       },
       "devDependencies": {
-        "@rushstack/eslint-patch": "^1.4.0",
+        "@eslint/js": "^10.0.1",
         "@types/node": "^25.6.2",
         "@vue/eslint-config-prettier": "^10.2.0",
         "eslint": "^10.3.0",
         "eslint-plugin-vue": "^10.9.1",
+        "globals": "^17.12.0",
+        "jsdom": "^27.4.0",
         "prettier": "^3.8.3",
         "typescript": "^6.0.3",
-        "vite": "^8.0.11"
+        "typescript-eslint": "^8.69.0",
+        "vite": "^8.0.11",
+        "vite-plugin-dts": "^5.1.0",
+        "vitest": "^4.1.11"
+      }
+    },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz",
+      "integrity": "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.0.0",
+        "@csstools/css-color-parser": "^4.0.1",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.5"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "dev": true,
+      "license": "MIT",
+      "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.6"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.1.tgz",
+      "integrity": "sha512-gLNsunvwf3mCi5u5o46/Z/JcJMnhbHSaZ69rkgPzNM3J4s8hWwpPUQB6/tt0EDFyCiWzxANlx+2LJwpYj4zS1w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.3.0.tgz",
+      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.2.2.tgz",
+      "integrity": "sha512-3QKjR/vxyjcSXBLgb6lP0S3MGdvwbmqSsvLPbYdVORqPDc8FX1HAJ0Spk38bxaRXgvENTA47tlhhbb5Z2e8hEg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.1",
+        "@csstools/css-calc": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.12.tgz",
+      "integrity": "sha512-3vLQK+dXxhBMR2Wx99PTCifE+vHtW2ndZWyla8yK813ev6oGhyn8Lja8jCyGAWTJ+LEYZK7EVtJxrDj8ztevJw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
       }
     },
     "node_modules/@emnapi/core": {
@@ -139,6 +326,27 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@eslint/object-schema": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
@@ -163,6 +371,24 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "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
+        }
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
@@ -229,6 +455,56 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@kitware/wslink": {
       "version": "2.5.6",
       "resolved": "https://registry.npmjs.org/@kitware/wslink/-/wslink-2.5.6.tgz",
@@ -553,10 +829,33 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@rushstack/eslint-patch": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.16.1.tgz",
-      "integrity": "sha512-TvZbIpeKqGQQ7X0zSCvPH9riMSFQFSggnfBjFZ1mEoILW+UuXCKwOoPcgjMwiUtRqFZ8jWhPJc4um14vC6I4ag==",
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
+      "integrity": "sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
       "dev": true,
       "license": "MIT"
     },
@@ -571,6 +870,24 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -602,82 +919,494 @@
         "undici-types": "~7.19.0"
       }
     },
-    "node_modules/@vue/eslint-config-prettier": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz",
-      "integrity": "sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==",
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.69.0.tgz",
+      "integrity": "sha512-t5jQTKPIgVW1PE6dR6H6Qz5gm8zjMlX5/2gRaOGd9eO6V7J+tQc6iWKukEe7dY8u9HyYasQ0yfF0/FSSTEO2gA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-config-prettier": "^10.0.1",
-        "eslint-plugin-prettier": "^5.2.2"
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.69.0",
+        "@typescript-eslint/type-utils": "8.69.0",
+        "@typescript-eslint/utils": "8.69.0",
+        "@typescript-eslint/visitor-keys": "8.69.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": ">= 8.21.0",
-        "prettier": ">= 3.0.0"
+        "@typescript-eslint/parser": "^8.69.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.8.tgz",
+      "integrity": "sha512-YYNsSlXBjMk92SKnkwvB5LOVSa6OznlFUGcsvrFgNJbJCd0M1XKeFVRc8ZByeCqz32FivYNHJVooLmdqrmvp/Q==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">= 4"
       }
     },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.69.0.tgz",
+      "integrity": "sha512-l4b0DhWioGg6Gt2ebGlvfkFMOjRsauxtsnDRwUSRX1qHq3HdTfQHV8wW9zEXeciai6HfeaKOedQn2Zoofx3WBw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.69.0",
+        "@typescript-eslint/types": "8.69.0",
+        "@typescript-eslint/typescript-estree": "8.69.0",
+        "@typescript-eslint/visitor-keys": "8.69.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
-      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.69.0.tgz",
+      "integrity": "sha512-yi4obFrHMmnsesWehHbkg9zMA7Jt8cXT+mKM08G999pH1yT6nqgsHx7MYm0uY1wAj8CqiBXYRJ7WAT0QdQHQXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "@typescript-eslint/tsconfig-utils": "^8.69.0",
+        "@typescript-eslint/types": "^8.69.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.69.0.tgz",
+      "integrity": "sha512-ewfspqWvSxKSOaplqAUNbaSFO0eB6w1EtQ+esfYFRm3614Ty4uNtExkcbgd6nWsXphbqKyf9ZYdbZdv2xEoWEQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.69.0",
+        "@typescript-eslint/visitor-keys": "8.69.0"
+      },
       "engines": {
-        "node": "18 || 20 || >=22"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.69.0.tgz",
+      "integrity": "sha512-xNqK7YTDZsLniQMV/4rpFR8Z5JlqeRvVjuG1YgF/mdPVH84HSD19L8CczMA0qg2RfwEV231GHH3VnToJDo4MfQ==",
       "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.69.0.tgz",
+      "integrity": "sha512-ZfoJAVg3JZndQEpEl9petVlxau3lRuElc4HRMuAlLCf8to04/iHz692RUSNmXKDjEuJmIL+KZ2/BsOcBc16dsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.69.0",
+        "@typescript-eslint/typescript-estree": "8.69.0",
+        "@typescript-eslint/utils": "8.69.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.69.0.tgz",
+      "integrity": "sha512-K3VrubUPhlo9VDBS6QdI8YB5j7ClpqLRdefcz6PFrhnwicehBweqQ9Evhl4l+FYz0HdDmMqIiSX0aldGRYtDCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.69.0.tgz",
+      "integrity": "sha512-AdFkgqck3Vudb/kWnxlyafU/4aBhHrbQ9locP2N4psXTy5mOBg0SHJumnLvx7r6g1gV4DKvUFwV2nJZBoqOD8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.69.0",
+        "@typescript-eslint/tsconfig-utils": "8.69.0",
+        "@typescript-eslint/types": "8.69.0",
+        "@typescript-eslint/visitor-keys": "8.69.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.69.0.tgz",
+      "integrity": "sha512-tUbx60BBqQa31kXF5MCsOOLL5E/WzUuxIn7YpAvq+eaUlqvk8/NXnXMBNAdLCr0icjkzem7iUA5QqWHe/hJ1aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.69.0",
+        "@typescript-eslint/types": "8.69.0",
+        "@typescript-eslint/typescript-estree": "8.69.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.69.0.tgz",
+      "integrity": "sha512-+rmdgPA+EXkNgKYvHvFfhrs35utXbwaC5PGpDquSXcoXQDKUA5UjV0LmTucG/4JXkM31BTu4TilHtrN8IVBe8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.69.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.11.tgz",
+      "integrity": "sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.11.tgz",
+      "integrity": "sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.11",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.11.tgz",
+      "integrity": "sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.11.tgz",
+      "integrity": "sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.11",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.11.tgz",
+      "integrity": "sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.11.tgz",
+      "integrity": "sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.11.tgz",
+      "integrity": "sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
+      "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.28"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.28.tgz",
+      "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.28.tgz",
+      "integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/eslint-config-prettier": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz",
+      "integrity": "sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-prettier": "^5.2.2"
+      },
+      "peerDependencies": {
+        "eslint": ">= 8.21.0",
+        "prettier": ">= 3.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -687,6 +1416,37 @@
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/compare-versions": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.1.tgz",
+      "integrity": "sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -702,6 +1462,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -715,6 +1489,46 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
+      "integrity": "sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^4.1.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.21",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.1.tgz",
+      "integrity": "sha512-euIQENZg6x8mj3fO6o9+fOW8MimUI4PpD/fZBhJfeioZVy9TUpM4UY7KjQNVZFlqwJ0UdzRDzkycB997HEq1BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^15.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -733,6 +1547,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -750,6 +1571,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -984,6 +1825,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -994,6 +1842,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz",
+      "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1119,6 +1984,67 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/globals": {
+      "version": "17.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.12.0.tgz",
+      "integrity": "sha512-cezEd/DTyyht9cvSSURyygXPfy04GtWO/5e6ZPvH7fCtjKz9PYOmuawphw1Ctd1f6C+5JypXfGD7ahNMXvevBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -1162,6 +2088,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1169,6 +2102,56 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jsdom": {
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
+      "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@acemir/cssom": "^0.9.28",
+        "@asamuzakjp/dom-selector": "^6.7.6",
+        "@exodus/bytes": "^1.6.0",
+        "cssstyle": "^5.3.4",
+        "data-urls": "^6.0.0",
+        "decimal.js": "^10.6.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": "^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-mimetype": "^4.0.0",
+        "whatwg-url": "^15.1.0",
+        "ws": "^8.18.3",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -1200,6 +2183,13 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -1475,6 +2465,24 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -1491,6 +2499,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -1507,6 +2542,38 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1553,6 +2620,20 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -1603,6 +2684,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -1623,6 +2724,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1643,6 +2751,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.14",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
@@ -1735,6 +2855,33 @@
         "node": ">=6"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0.tgz",
@@ -1769,6 +2916,19 @@
         "@rolldown/binding-win32-x64-msvc": "1.0.0"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/semver": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
@@ -1805,6 +2965,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1815,6 +2982,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/synckit": {
       "version": "0.11.12",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
@@ -1831,6 +3019,23 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
+      "integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -1848,6 +3053,75 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.1.tgz",
+      "integrity": "sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.11",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.11.tgz",
+      "integrity": "sha512-aBiNayCfTQxuIJBm06M+xR14cYaYlDlSXZbgsnKzKNxDKUVq7KFwTjwBSsb7m9Y5xO8WfPnBc63WaYFMTGlvqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.11"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.11",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.11.tgz",
+      "integrity": "sha512-CW3WN2rIIE/Of21mulhgnGOwoDyEFNygyIBOONSdyAuSATgMMUCpLeUlB+E8sAwA5xRV9hYPl+kyZ9citHCaKg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -1883,6 +3157,37 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.69.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.69.0.tgz",
+      "integrity": "sha512-B3MltX0VqjUBNEe3b3sSuiRbfa6XrfHFtBiPamjT5AsW/dfq+y+bc0wyuS9DxAS1LyzCxRp2+rxzpLUvqM2BvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.69.0",
+        "@typescript-eslint/parser": "8.69.0",
+        "@typescript-eslint/typescript-estree": "8.69.0",
+        "@typescript-eslint/utils": "8.69.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "7.19.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
@@ -1890,6 +3195,77 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-dts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unplugin-dts/-/unplugin-dts-1.1.0.tgz",
+      "integrity": "sha512-KZJ+qk+lmd9dJY/PJvDRFL9BUtVubKDiX7Ai/X6mlkCArcQNzwmupKjVqHbRA42uqO5ZfFRFc+o8/OCbQ1GonQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.4",
+        "@volar/typescript": "^2.4.26",
+        "compare-versions": "^6.1.1",
+        "debug": "^4.4.0",
+        "glob-to-regexp": "0.4.1",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "unplugin": "^2.3.2"
+      },
+      "peerDependencies": {
+        "@microsoft/api-extractor": ">=7",
+        "@rspack/core": "^1",
+        "@vue/language-core": "^3.1.5",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": ">=3",
+        "typescript": ">=4",
+        "vite": ">=3",
+        "webpack": "^4 || ^5"
+      },
+      "peerDependenciesMeta": {
+        "@microsoft/api-extractor": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "@vue/language-core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -1985,6 +3361,129 @@
         }
       }
     },
+    "node_modules/vite-plugin-dts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-5.1.0.tgz",
+      "integrity": "sha512-MfLc2G+mXPUDGGxpHQeYbdunavFP9UpT9yxiAsTgUXRxfEd3HqysSAM4E72jhz5eIz3OOexCHkqiVlQq8ok9/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unplugin-dts": "1.1.0"
+      },
+      "peerDependencies": {
+        "@microsoft/api-extractor": ">=7",
+        "rollup": ">=3",
+        "vite": ">=3"
+      },
+      "peerDependenciesMeta": {
+        "@microsoft/api-extractor": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.11.tgz",
+      "integrity": "sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.11",
+        "@vitest/mocker": "4.1.11",
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/runner": "4.1.11",
+        "@vitest/snapshot": "4.1.11",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "es-module-lexer": "^2.0.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": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.11",
+        "@vitest/browser-preview": "4.1.11",
+        "@vitest/browser-webdriverio": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "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/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.2.0.tgz",
+      "integrity": "sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-eslint-parser": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.4.0.tgz",
@@ -2010,6 +3509,70 @@
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/w3c-xmlserializer/node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2026,6 +3589,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -2036,6 +3616,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -2046,6 +3648,13 @@
         "node": ">=12"
       }
     },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/js-lib/package.json b/js-lib/package.json
index bd61255..069f8cb 100644
--- a/js-lib/package.json
+++ b/js-lib/package.json
@@ -5,6 +5,7 @@
   "main": "./dist/trame.umd.js",
   "unpkg": "./dist/trame.umd.js",
   "module": "./dist/trame.mjs",
+  "types": "./dist/main.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/Kitware/trame-client.git",
@@ -16,21 +17,28 @@
   "scripts": {
     "build": "vite build --emptyOutDir",
     "debug": "vite build --sourcemap -m dev",
-    "lint": "eslint . --ext .js --fix --ignore-path .gitignore --ignore-pattern public",
-    "typecheck": "tsc --noEmit --strict src/**/*.d.ts"
+    "lint": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@kitware/wslink": "^2.5.6"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.4.0",
+    "@eslint/js": "^10.0.1",
     "@types/node": "^25.6.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "eslint": "^10.3.0",
     "eslint-plugin-vue": "^10.9.1",
+    "globals": "^17.12.0",
+    "jsdom": "^27.4.0",
     "prettier": "^3.8.3",
     "typescript": "^6.0.3",
-    "vite": "^8.0.11"
+    "typescript-eslint": "^8.69.0",
+    "vite": "^8.0.11",
+    "vite-plugin-dts": "^5.1.0",
+    "vitest": "^4.1.11"
   },
   "files": [
     "dist/**/*",
diff --git a/js-lib/src/URLExtract/index.js b/js-lib/src/URLExtract.ts
similarity index 78%
rename from js-lib/src/URLExtract/index.js
rename to js-lib/src/URLExtract.ts
index e75eaa1..16a8b6a 100644
--- a/js-lib/src/URLExtract/index.js
+++ b/js-lib/src/URLExtract.ts
@@ -1,8 +1,8 @@
-function identity(i) {
+function identity<T>(i: T): T {
   return i;
 }
 
-function toNativeType(str) {
+function toNativeType(str: any): any {
   if (str === null || str === "null") {
     return null;
   }
@@ -23,7 +23,7 @@ function toNativeType(str) {
     return str
       .substring(1, str.length - 1)
       .split(",")
-      .map((s) => toNativeType(s.trim()));
+      .map((s: string) => toNativeType(s.trim()));
   }
 
   if (str === "" || Number.isNaN(Number(str))) {
@@ -35,9 +35,9 @@ function toNativeType(str) {
 
 function extractURLParameters(
   castToNativeType = true,
-  query = window.location.search,
-) {
-  const summary = {};
+  query: string = window.location.search,
+): Record<string, any> {
+  const summary: Record<string, any> = {};
   const convert = castToNativeType ? toNativeType : identity;
   const params = new URLSearchParams(query);
   params.forEach((value, key) => {
diff --git a/js-lib/src/URLExtract/index.d.ts b/js-lib/src/URLExtract/index.d.ts
deleted file mode 100644
index 715f191..0000000
--- a/js-lib/src/URLExtract/index.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- *
- * @param {Boolean} [castToNativeType]
- * @param {String} [query]
- */
-export function extractURLParameters(
-  castToNativeType?: boolean,
-  query?: string
-): object;
-
-/**
- *
- * @param {String} str The type value as string.
- */
-export function toNativeType(str: string): void;
-
-declare const _default: {
-  toNativeType: typeof toNativeType;
-  extractURLParameters: typeof extractURLParameters;
-};
-export default _default;
diff --git a/js-lib/src/decorators.d.ts b/js-lib/src/decorators.d.ts
deleted file mode 100644
index df89945..0000000
--- a/js-lib/src/decorators.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface Decorator {
-  priority: number;
-  decorate(value: any): Promise<any>;
-}
-
-export const fileHandler: Decorator;
-export const fileListHandler: Decorator;
-export const fileInObjectHandler: Decorator;
-
-export function registerDecorator(decorator: Decorator): void;
-export function decorate(value: any): Promise<any>;
diff --git a/js-lib/src/decorators.js b/js-lib/src/decorators.ts
similarity index 58%
rename from js-lib/src/decorators.js
rename to js-lib/src/decorators.ts
index 1e4c0fb..13c8a49 100644
--- a/js-lib/src/decorators.js
+++ b/js-lib/src/decorators.ts
@@ -1,33 +1,40 @@
-function compareDecorator(a, b) {
+export interface Decorator {
+  priority: number;
+  decorate(value: any): Promise<any>;
+}
+
+function compareDecorator(a: Decorator, b: Decorator): number {
   return a.priority - b.priority;
 }
 
-export const fileHandler = {
+export const fileHandler: Decorator = {
   priority: 0,
-  async decorate(value) {
+  async decorate(value: any): Promise<any> {
     if (value === null || value === undefined) return value;
     if (value.constructor && value.constructor === File) {
-      const { name, lastModified, size, type } = value;
+      const { name, lastModified, size, type } = value as File;
 
       // Will be null in the event of an error on read, DataView otherwise
-      let content = null;
+      let content: DataView | null = null;
       // Will be an error string if content failed to read, null otherwise
-      let error = null;
+      let error: string | null = null;
 
       try {
-        const arrayBuffer = await new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.addEventListener("loadend", () => {
-            resolve(reader.result);
-          });
-          reader.addEventListener("error", () => {
-            reject(reader.error);
-          });
-          reader.readAsArrayBuffer(value);
-        });
+        const arrayBuffer = await new Promise<ArrayBuffer>(
+          (resolve, reject) => {
+            const reader = new FileReader();
+            reader.addEventListener("loadend", () => {
+              resolve(reader.result as ArrayBuffer);
+            });
+            reader.addEventListener("error", () => {
+              reject(reader.error);
+            });
+            reader.readAsArrayBuffer(value);
+          },
+        );
 
         content = new DataView(arrayBuffer);
-      } catch (e) {
+      } catch (e: any) {
         error = e?.message ?? String(e);
       }
 
@@ -46,41 +53,43 @@ export const fileHandler = {
   },
 };
 
-export const fileListHandler = {
+export const fileListHandler: Decorator = {
   priority: 0,
-  async decorate(value) {
+  async decorate(value: any): Promise<any> {
     if (value === null || value === undefined) return value;
     if (typeof value === "string") {
       return value;
     }
     if ((value.constructor && value.constructor === FileList) || value.length) {
       const results = await Promise.allSettled(
-        Array.from(value).map((file) => fileHandler.decorate(file)),
+        Array.from(value as ArrayLike<File>).map((file) =>
+          fileHandler.decorate(file),
+        ),
       );
-      return results.map((result) => result.value);
+      return results.map((result: any) => result.value);
     }
     return value;
   },
 };
 
-export const fileInObjectHandler = {
+export const fileInObjectHandler: Decorator = {
   priority: 0,
-  async decorate(value) {
+  async decorate(value: any): Promise<any> {
     if (value === null || value === undefined) return value;
     if (typeof value === "string") {
       return value;
     }
     if (value.constructor && value.constructor === Object) {
-      const newValue = {};
+      const newValue: Record<string, any> = {};
       const names = Object.keys(value);
-      /* eslint-disable no-await-in-loop */
+
       for (let i = 0; i < names.length; i++) {
         const name = names[i];
         newValue[name] = value[name];
         newValue[name] = await fileListHandler.decorate(newValue[name]);
         newValue[name] = await fileHandler.decorate(newValue[name]);
       }
-      /* eslint-enable no-await-in-loop */
+
       return newValue;
     }
     return value;
@@ -91,22 +100,26 @@ export const fileInObjectHandler = {
 // API
 // ----------------------------------------------------------------------------
 
-const STATE_DECORATORS = [fileHandler, fileListHandler, fileInObjectHandler];
+const STATE_DECORATORS: Decorator[] = [
+  fileHandler,
+  fileListHandler,
+  fileInObjectHandler,
+];
 
-export function registerDecorator(decorator) {
+export function registerDecorator(decorator: Decorator): void {
   STATE_DECORATORS.push(decorator);
   STATE_DECORATORS.sort(compareDecorator);
 }
 
-export async function decorate(value) {
+export async function decorate(value: any): Promise<any> {
   let result = value;
-  /* eslint-disable no-await-in-loop */
+
   for (let i = 0; i < STATE_DECORATORS.length; i++) {
     if (result === null || result === undefined) {
       return result;
     }
     result = await STATE_DECORATORS[i].decorate(result);
   }
-  /* eslint-enable no-await-in-loop */
+
   return result;
 }
diff --git a/js-lib/src/listeners.d.ts b/js-lib/src/listeners.d.ts
deleted file mode 100644
index d24b8c7..0000000
--- a/js-lib/src/listeners.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export class ListenerManager {
-  constructor(name: string);
-  on(fn: (...args: any[]) => void): () => void;
-  emit(...args: any[]): void;
-  getListeners(): Array<(...args: any[]) => void>;
-}
-
-export class WatcherManager {
-  constructor();
-  watch(
-    dependencies: string[],
-    callback: (...args: any[]) => void
-  ): () => void;
-  notifyWatchers(changedKeys: string[], fullState: Record<string, any>): void;
-  getWatchers(): Array<{
-    key: string;
-    dependencies: string[];
-    callback: (...args: any[]) => void;
-  }>;
-}
diff --git a/js-lib/src/listeners.js b/js-lib/src/listeners.ts
similarity index 69%
rename from js-lib/src/listeners.js
rename to js-lib/src/listeners.ts
index 17af04f..3a0837d 100644
--- a/js-lib/src/listeners.js
+++ b/js-lib/src/listeners.ts
@@ -1,18 +1,22 @@
 export class ListenerManager {
-  constructor(name) {
+  name: string;
+  nextId: number;
+  listeners: Record<string, (...args: any[]) => void>;
+
+  constructor(name: string) {
     this.name = name;
     this.nextId = 1;
     this.listeners = {};
   }
 
-  on(fn) {
+  on(fn: (...args: any[]) => void): () => void {
     const key = `${this.nextId++}`;
     this.listeners[key] = fn;
     const unsubscribe = () => delete this.listeners[key];
     return unsubscribe;
   }
 
-  emit(...args) {
+  emit(...args: any[]): void {
     const listeners = Object.values(this.listeners);
     for (let i = 0; i < listeners.length; i++) {
       try {
@@ -23,18 +27,30 @@ export class ListenerManager {
     }
   }
 
-  getListeners() {
+  getListeners(): Array<(...args: any[]) => void> {
     return Object.values(this.listeners);
   }
 }
 
+interface Watcher {
+  key: string;
+  dependencies: string[];
+  callback: (...args: any[]) => void;
+}
+
 export class WatcherManager {
+  nextId: number;
+  listeners: Record<string, Watcher>;
+
   constructor() {
     this.nextId = 1;
     this.listeners = {};
   }
 
-  watch(dependencies, callback) {
+  watch(
+    dependencies: string[],
+    callback: (...args: any[]) => void,
+  ): () => void {
     const key = `${this.nextId++}`;
     this.listeners[key] = {
       key,
@@ -45,7 +61,7 @@ export class WatcherManager {
     return unsubscribe;
   }
 
-  notifyWatchers(changedKeys, fullState) {
+  notifyWatchers(changedKeys: string[], fullState: Record<string, any>): void {
     const watchers = Object.values(this.listeners);
     const keys = new Set(changedKeys);
 
@@ -62,7 +78,7 @@ export class WatcherManager {
     }
   }
 
-  getWatchers() {
+  getWatchers(): Watcher[] {
     return Object.values(this.listeners);
   }
 }
diff --git a/js-lib/src/main.js b/js-lib/src/main.js
deleted file mode 100644
index 97af92d..0000000
--- a/js-lib/src/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Trame } from "./trame";
-
-export default Trame;
diff --git a/js-lib/src/main.ts b/js-lib/src/main.ts
new file mode 100644
index 0000000..5e1e4ba
--- /dev/null
+++ b/js-lib/src/main.ts
@@ -0,0 +1,11 @@
+import { Trame } from "./trame";
+import wslink from "./wslink";
+import vtkURLExtract from "./URLExtract";
+
+export default Trame;
+export type { TrameConnectConfig } from "./trame";
+export type { Decorator } from "./decorators";
+export type { StateChangeEvent } from "./state";
+
+export const { configDecorator, createClient } = wslink;
+export const { extractURLParameters } = vtkURLExtract;
diff --git a/js-lib/src/state.d.ts b/js-lib/src/state.d.ts
deleted file mode 100644
index e95b3c5..0000000
--- a/js-lib/src/state.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export interface StateChangeEvent {
-  type: "dirty-state" | "new-keys";
-  keys: string[];
-}
-
-export class State {
-  constructor(client: any, oldState?: State);
-  loadState(): Promise<void>;
-  canDirty(name: string): boolean;
-  dirty(...keys: string[]): void;
-  set(key: string, value: any): Promise<void>;
-  get(): Record<string, any>;
-  get(key: string): any;
-  getAllKeys(): string[];
-  update(obj: Record<string, any>): Promise<void>;
-  onChange(fn: (event: StateChangeEvent) => void): () => void;
-  watch(keys: string[], fn: (...values: any[]) => void): () => void;
-  flush(...keys: (string | string[])[]): Promise<void>;
-  delete(): void;
-}
diff --git a/js-lib/src/state.js b/js-lib/src/state.ts
similarity index 75%
rename from js-lib/src/state.js
rename to js-lib/src/state.ts
index 473ada3..a744939 100644
--- a/js-lib/src/state.js
+++ b/js-lib/src/state.ts
@@ -1,14 +1,35 @@
+import type { vtkWSLinkClient } from "@kitware/wslink/src/WsLinkClient";
 import { decorate } from "./decorators";
 import { ListenerManager, WatcherManager } from "./listeners";
 
+export interface StateChangeEvent {
+  type: "dirty-state" | "new-keys";
+  keys: string[];
+}
+
 export class State {
+  private _name: string;
+  private _client: vtkWSLinkClient;
+  private _dirtyKeys: Set<string>;
+  private _state: Record<string, any>;
+  private _keyTS: Record<string, number>;
+  private _mtime: number;
+  private _ready: boolean;
+  private _listeners: ListenerManager;
+  private _watchers: WatcherManager;
+  private _subscriptions: Array<() => void>;
+  private _wslinkSubscriptions: any[];
+  private _updateFromServer: (
+    serverState: Record<string, any>,
+  ) => Promise<void>;
+
   /**
    * State constructor
    *
-   * @param {TrameClient} client managing the communication to the server
-   * @param {State} oldState previous state so we can keep existing listener
+   * @param client managing the communication to the server
+   * @param oldState previous state so we can keep existing listener
    */
-  constructor(client, oldState) {
+  constructor(client: vtkWSLinkClient, oldState?: State | null) {
     this._name = "undefined";
     this._client = client;
     this._dirtyKeys = new Set();
@@ -37,8 +58,8 @@ export class State {
       }),
     );
 
-    this._updateFromServer = async (serverState) => {
-      const updatedKeys = [];
+    this._updateFromServer = async (serverState: Record<string, any>) => {
+      const updatedKeys: string[] = [];
       const allKeys = Object.keys(serverState);
       for (let i = 0; i < allKeys.length; i++) {
         let modified = true;
@@ -71,7 +92,7 @@ export class State {
       }
 
       this._mtime += 1;
-      const newKeys = [];
+      const newKeys: string[] = [];
       for (let i = 0; i < updatedKeys.length; i++) {
         const key = updatedKeys[i];
         if (this._keyTS[key] === undefined) {
@@ -89,7 +110,7 @@ export class State {
     this._wslinkSubscriptions.push(
       this._client
         .getRemote()
-        .Trame.subscribeToStateUpdate(([serverState]) =>
+        .Trame.subscribeToStateUpdate(([serverState]: [Record<string, any>]) =>
           this._updateFromServer(serverState),
         ),
     );
@@ -98,7 +119,7 @@ export class State {
   /**
    * Async method used to bootstrap state content.
    */
-  async loadState() {
+  async loadState(): Promise<void> {
     const { state, name } = await this._client.getRemote().Trame.getState();
     this._name = name;
     this._updateFromServer(state);
@@ -108,11 +129,8 @@ export class State {
   /**
    * Return true if the given state variable can be modified and
    * therefore can be sent to the server when changed.
-   *
-   * @param {string} name
-   * @return {boolean}
    */
-  canDirty(name) {
+  canDirty(name: string): boolean {
     if (!this._state.trame__client_only) {
       return true;
     }
@@ -121,10 +139,8 @@ export class State {
 
   /**
    * Mark any local state variables dirty using their name(s)
-   *
-   * @param  {...string} keys
    */
-  dirty(...keys) {
+  dirty(...keys: string[]): void {
     keys.forEach((key) => {
       if (this.canDirty(key)) {
         this._dirtyKeys.add(key);
@@ -142,12 +158,9 @@ export class State {
    * the dirty state to the server. The returned promise can
    * be use for waiting for network exchange completion.
    *
-   * @param {string} key
-   * @param {any} value
-   *
-   * @return {Promise<void>} in case you want to wait for completion
+   * @return in case you want to wait for completion
    */
-  async set(key, value) {
+  async set(key: string, value: any): Promise<void> {
     // Prevent triggering change when same value is set
     if (this._state[key] === value) {
       return;
@@ -161,19 +174,18 @@ export class State {
   }
 
   /**
-   * @return {Array<string>} list of keys that compose the state
+   * @return list of keys that compose the state
    */
-  getAllKeys() {
+  getAllKeys(): string[] {
     return Object.keys(this._state);
   }
 
   /**
    * Update the state with a set of key/value pair.
    *
-   * @param {Map<string, any>} obj
-   * @return {Promise<void>} in case you want to wait for completion
+   * @return in case you want to wait for completion
    */
-  async update(obj) {
+  async update(obj: Record<string, any>): Promise<void> {
     this._mtime += 1;
     for (const [key, value] of Object.entries(obj)) {
       if (this._state[key] !== value) {
@@ -186,10 +198,14 @@ export class State {
   }
 
   /**
-   * @param {string} key
+   * @returns the full state
+   */
+  get(): Record<string, any>;
+  /**
    * @returns the state value for that given key
    */
-  get(key) {
+  get(key: string): any;
+  get(key?: string): any {
     if (key === undefined) {
       return this._state;
     }
@@ -205,11 +221,9 @@ export class State {
    *        keys: [...],           # list of key name affected
    *    }
    *
-   *
-   * @param {function} fn
-   * @return {function} unsubscribe function
+   * @return unsubscribe function
    */
-  onChange(fn) {
+  onChange(fn: (event: StateChangeEvent) => void): () => void {
     return this._listeners.on(fn);
   }
 
@@ -218,11 +232,9 @@ export class State {
    * The provided method will be called with all the listed keys
    * as args.
    *
-   * @param {Array<string>} keys
-   * @param {function} fn
-   * @return {function} unsubscribe function
+   * @return unsubscribe function
    */
-  watch(keys, fn) {
+  watch(keys: string[], fn: (...values: any[]) => void): () => void {
     const unsubscribe = this._watchers.watch(keys, fn);
 
     // Call it right away with available values
@@ -234,14 +246,14 @@ export class State {
   /**
    * Delete state by unsubscribing to all its internal listeners
    */
-  delete() {
+  delete(): void {
     while (this._wslinkSubscriptions.length) {
-      this.client
+      this._client
         .getRemote()
         .Trame.unsubscribe(this._wslinkSubscriptions.pop());
     }
     while (this._subscriptions.length) {
-      this._subscriptions.pop()();
+      this._subscriptions.pop()!();
     }
   }
 
@@ -249,10 +261,8 @@ export class State {
    * Push dirty data over the network.
    * If any argument (state key name(s)) is provided,
    * they will be marked dirty and pushed to the server.
-   *
-   * @param  {...string} keys
    */
-  async flush(...keys) {
+  async flush(...keys: (string | string[])[]): Promise<void> {
     if (keys.length) {
       keys.forEach((key) => {
         if (Array.isArray(key)) {
@@ -264,8 +274,8 @@ export class State {
     }
 
     if (this._dirtyKeys.size && !this._client.isBusy()) {
-      const waitOn = [];
-      const keys = [];
+      const waitOn: Promise<any>[] = [];
+      const keys: string[] = [];
       this._dirtyKeys.forEach((key) => {
         waitOn.push(decorate(this._state[key]));
         keys.push(key);
diff --git a/js-lib/src/trame.d.ts b/js-lib/src/trame.d.ts
deleted file mode 100644
index 2a2494c..0000000
--- a/js-lib/src/trame.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { State } from "./state";
-import { Decorator } from "./decorators";
-import { vtkWSLinkClient } from "@kitware/wslink/src/WsLinkClient";
-
-export interface TrameConnectConfig {
-  sessionManagerURL?: string;
-  sessionURL?: string;
-  application?: string;
-  secret?: string;
-  wsProxy?: any;
-}
-
-export class Trame {
-  client: vtkWSLinkClient | null;
-  state: State | null;
-  config: TrameConnectConfig | null;
-  refs: Record<string, any>;
-
-  constructor(wsProxy?: any);
-  isConnected(): boolean;
-  connect(config?: TrameConnectConfig): Promise<TrameConnectConfig | undefined>;
-  disconnect(): void;
-  exit(timeout?: number): void;
-  reconnect(): Promise<TrameConnectConfig | undefined>;
-  onClose(fn: (...args: any[]) => void): () => void;
-  onError(fn: (...args: any[]) => void): () => void;
-  registerDecorator(decorator: Decorator): void;
-  trigger(
-    name: string,
-    args?: any[],
-    kwargs?: Record<string, any>
-  ): Promise<any>;
-}
diff --git a/js-lib/src/trame.js b/js-lib/src/trame.ts
similarity index 69%
rename from js-lib/src/trame.js
rename to js-lib/src/trame.ts
index 3bb535e..9100cd6 100644
--- a/js-lib/src/trame.js
+++ b/js-lib/src/trame.ts
@@ -1,26 +1,46 @@
+import type { vtkWSLinkClient } from "@kitware/wslink/src/WsLinkClient";
 import { State } from "./state";
-import { decorate, registerDecorator } from "./decorators";
+import { decorate, registerDecorator, type Decorator } from "./decorators";
 import { ListenerManager } from "./listeners";
 import wslink from "./wslink";
-import vtkWSLinkClient from "@kitware/wslink/src/WsLinkClient";
 
-/**
- * @typedef TrameConnectConfig
- * @type {object}
- * @property {string} sessionManagerURL (/paraview) http(s) url for the launcher endpoint
- * @property {string} sessionURL (/ws if no launcher) ws(s) url for WebSocket session endpoint
- * @property {string} application (trame) name for the session to launch
- * @property {string} secret (wslink-secret) authorization token for WebSocket connection
- * @property {object} wsProxy A way to inject alternative WebSocket connection
- */
+export interface TrameConnectConfig {
+  /** (/paraview) http(s) url for the launcher endpoint */
+  sessionManagerURL?: string;
+  /** (/ws if no launcher) ws(s) url for WebSocket session endpoint */
+  sessionURL?: string;
+  /** (trame) name for the session to launch */
+  application?: string;
+  /** (wslink-secret) authorization token for WebSocket connection */
+  secret?: string;
+  /** A way to inject alternative WebSocket connection */
+  wsProxy?: any;
+  /** Extract additional connection arguments from the current URL */
+  useUrl?: boolean;
+  [key: string]: any;
+}
 
-/**
- * @typedef {Object} Decorator
- * @property {number} priority
- * @property {function} decorate: async function aiming to return the value as is or modify it.
- */
+interface TrameAction {
+  ref: string;
+  type: string;
+  method: string;
+  args: any[];
+}
 
 export class Trame {
+  private _initialized: boolean;
+  private _nextListenerId: number;
+  private _wsProxy: any;
+  private _subscriptions: Array<() => void>;
+  private _execAction: (action: TrameAction) => void;
+  private _closeListeners: ListenerManager;
+  private _errorListeners: ListenerManager;
+
+  client: vtkWSLinkClient | null;
+  state: State | null;
+  config: TrameConnectConfig | null;
+  refs: Record<string, any>;
+
   /**
    * Create a trame object that once connectect will have the following set of properties:
    *  - client: Object responsible for handling the network communication with the server.
@@ -28,12 +48,12 @@ export class Trame {
    *  - config: connection configuration provided as a response to the launcher.
    *  - refs: dictionary mapping a user element name to an object on which method can be called.
    *
-   * @param {Object} wsProxy aim to provide a mean to provide your own websocket implementation.
+   * @param wsProxy aim to provide a mean to provide your own websocket implementation.
    *        While it is not currently fully implemented, we use a similar infrastructure within
    *        Jupyter to reuse their communication infrastructure rather than creating our own
    *        websocket connection.
    */
-  constructor(wsProxy) {
+  constructor(wsProxy?: any) {
     this._initialized = false;
     this._nextListenerId = 1;
     this._wsProxy = wsProxy;
@@ -50,24 +70,18 @@ export class Trame {
     this._errorListeners = new ListenerManager("trame connection error");
 
     // public objects
-    /**@type{vtkWSLinkClient}*/
     this.client = null;
-    /**@type{State}*/
     this.state = null;
-    /**@type{TrameConnectConfig}*/
     this.config = null;
-    /**@type{Object.<string,any>}*/
     this.refs = {};
   }
 
   /**
    * Return the status of the client connection.
    * Is trame fully initialized and connected to its server or no?
-   *
-   * @return {Boolean}
    */
-  isConnected() {
-    return this._initialized && this.client?.isConnected();
+  isConnected(): boolean {
+    return Boolean(this._initialized && this.client?.isConnected());
   }
 
   /**
@@ -109,12 +123,11 @@ export class Trame {
    * The secret is used to authorized the connection on the given
    * sessionURL. And works in pair with the --authKey arg.
    *
-   *
-   * @param {TrameConnectConfig} config
-   * @return {Promise<TrameConnectConfig>} the updated configuration once
-   *         fully connected
+   * @return the updated configuration once fully connected
    */
-  async connect(config) {
+  async connect(
+    config?: TrameConnectConfig | null,
+  ): Promise<TrameConnectConfig | undefined> {
     if (this.isConnected()) {
       console.error("Trame.connect() when already connected");
       return;
@@ -122,7 +135,7 @@ export class Trame {
 
     while (this._subscriptions.length) {
       try {
-        this._subscriptions.pop()();
+        this._subscriptions.pop()!();
       } catch (e) {
         console.error("Try to unsubscribe from previous trame client", e);
       }
@@ -146,7 +159,7 @@ export class Trame {
       }).unsubscribe,
     );
 
-    await this.client.connect(config);
+    await this.client.connect(config ?? {});
     this.config = this.client.getConfig();
     this.state = new State(this.client, this.state);
     await this.state.loadState();
@@ -155,7 +168,9 @@ export class Trame {
     // Listen to client
     const wslinkSub = this.client
       .getRemote()
-      .Trame.subscribeToActions(([actions]) => actions.map(this._execAction));
+      .Trame.subscribeToActions(([actions]: [TrameAction[]]) =>
+        actions.map(this._execAction),
+      );
     this._subscriptions.push(() =>
       this.client?.getRemote()?.Trame.unsubscribe(wslinkSub),
     );
@@ -167,10 +182,10 @@ export class Trame {
   /**
    * Disconnect the current connection and stop the server right away.
    */
-  disconnect() {
+  disconnect(): void {
     if (this.isConnected()) {
-      this.client.getRemote()?.Trame?.lifeCycleUpdate("client_exited");
-      this.client.disconnect(0);
+      this.client?.getRemote()?.Trame?.lifeCycleUpdate("client_exited");
+      this.client?.disconnect(0);
     }
   }
 
@@ -181,23 +196,21 @@ export class Trame {
    * If we want to disconnect but let the server running,
    * you can set the timeout to -1.
    *
-   * @param {number} timeout (default: 60s) time after
+   * @param timeout (default: 60s) time after
    *        which the server will exit automatically.
    */
-  exit(timeout = 60) {
+  exit(timeout = 60): void {
     if (this.isConnected()) {
-      this.client.getRemote()?.Trame?.lifeCycleUpdate("client_exited");
-      this.client.disconnect(timeout);
+      this.client?.getRemote()?.Trame?.lifeCycleUpdate("client_exited");
+      this.client?.disconnect(timeout);
     }
   }
 
   /**
    * Try to reconnect reusing the previously saved configuration
    * which should have a sessionURL and secret.
-   *
-   * @return {Promise<TrameConnectConfig>}
    */
-  async reconnect() {
+  async reconnect(): Promise<TrameConnectConfig | undefined> {
     return this.connect(this.config);
   }
 
@@ -205,10 +218,9 @@ export class Trame {
    * Register a function that should be called if the connection
    * get closed.
    *
-   * @param {function} fn
-   * @return {function} to call in case you want to unsubscribe.
+   * @return function to call in case you want to unsubscribe.
    */
-  onClose(fn) {
+  onClose(fn: (...args: any[]) => void): () => void {
     return this._closeListeners.on(fn);
   }
 
@@ -216,33 +228,31 @@ export class Trame {
    * Register a function that should be called if the connection
    * trigger an error and close.
    *
-   * @param {function} fn
-   * @return {function} to call in case you want to unsubscribe.
+   * @return function to call in case you want to unsubscribe.
    */
-  onError(fn) {
+  onError(fn: (...args: any[]) => void): () => void {
     return this._errorListeners.on(fn);
   }
 
   /**
    * Register a decorator that aim extend JavaScript structure serialization
-   *
-   * @param {Decorator} decorator
    */
-  registerDecorator(decorator) {
+  registerDecorator(decorator: Decorator): void {
     registerDecorator(decorator);
   }
 
   /**
    * Trigger a method call on the server using its name
    *
-   * @param {string} name
-   * @param {Array<any>} args
-   * @param {Map<string, any>} kwargs
-   * @return {Promise<any>} result from server method call
+   * @return result from server method call
    */
-  async trigger(name, args = [], kwargs = {}) {
-    let decoratedArgs = [];
-    const decoratedKwargs = {};
+  async trigger(
+    name: string,
+    args: any[] = [],
+    kwargs: Record<string, any> = {},
+  ): Promise<any> {
+    let decoratedArgs: any[] = [];
+    const decoratedKwargs: Record<string, any> = {};
 
     if (args) {
       const decorateArgs = args.map((arg) => decorate(arg));
@@ -250,8 +260,8 @@ export class Trame {
     }
 
     if (kwargs) {
-      const keys = [];
-      const values = [];
+      const keys: string[] = [];
+      const values: Promise<any>[] = [];
       Object.entries(kwargs).forEach((entry) => {
         keys.push(entry[0]);
         values.push(decorate(entry[1]));
@@ -264,7 +274,7 @@ export class Trame {
     }
 
     return await this.client
-      .getRemote()
+      ?.getRemote()
       .Trame.trigger(name, decoratedArgs, decoratedKwargs);
   }
 }
diff --git a/js-lib/src/wslink/index.js b/js-lib/src/wslink/index.ts
similarity index 82%
rename from js-lib/src/wslink/index.js
rename to js-lib/src/wslink/index.ts
index 2b529a1..4056371 100644
--- a/js-lib/src/wslink/index.js
+++ b/js-lib/src/wslink/index.ts
@@ -2,19 +2,20 @@ import SmartConnect from "@kitware/wslink/src/SmartConnect";
 import vtkWSLinkClient from "@kitware/wslink/src/WsLinkClient";
 
 import vtkURLExtract from "../URLExtract";
+import type { TrameConnectConfig } from "../trame";
 
 import protocols from "./protocols";
 
 vtkWSLinkClient.setSmartConnectClass(SmartConnect);
 
-const WS_PROTOCOL = {
+const WS_PROTOCOL: Record<string, string> = {
   "http:": "ws:",
   "https:": "wss:",
   "ws:": "ws:",
   "wss:": "wss:",
 };
 
-const NOT_BUSY_LIST = [
+const NOT_BUSY_LIST: string[] = [
   // *
   "unsubscribe",
   // SyncView
@@ -25,7 +26,7 @@ const NOT_BUSY_LIST = [
   "subscribeToViewChange",
 ];
 
-function configDecorator(config) {
+function configDecorator(config: TrameConnectConfig): TrameConnectConfig {
   const outputConfig = { ...config };
 
   // Process sessionURL
@@ -41,7 +42,7 @@ function configDecorator(config) {
     }
 
     // handle variable replacement
-    const use_mapping = {
+    const use_mapping: Record<string, string> = {
       use_hostname: httpURL.hostname,
       use_host: httpURL.host,
     };
@@ -55,10 +56,10 @@ function configDecorator(config) {
 
   // Extract app-name from html
   outputConfig.application =
-    document.querySelector("html").dataset.appName || outputConfig.application;
+    document.documentElement.dataset.appName || outputConfig.application;
 
   const sessionManagerURL =
-    document.querySelector("html").dataset.sessionManagerUrl ||
+    document.documentElement.dataset.sessionManagerUrl ||
     outputConfig.sessionManagerURL;
   if (sessionManagerURL) {
     outputConfig.sessionManagerURL = sessionManagerURL;
@@ -76,8 +77,6 @@ function configDecorator(config) {
 
 /**
  * Instantiate WSLinkClient with trame protocols
- *
- * @returns {vtkWSLinkClient}
  */
 function createClient() {
   return vtkWSLinkClient.newInstance({
diff --git a/js-lib/src/wslink/protocols/SyncView.js b/js-lib/src/wslink/protocols/SyncView.ts
similarity index 60%
rename from js-lib/src/wslink/protocols/SyncView.js
rename to js-lib/src/wslink/protocols/SyncView.ts
index b41b411..81b2dd9 100644
--- a/js-lib/src/wslink/protocols/SyncView.js
+++ b/js-lib/src/wslink/protocols/SyncView.ts
@@ -1,30 +1,32 @@
-export default (session) => ({
-  getArray(hash, binary = true) {
+import type { WSLinkSession } from "./types";
+
+export default (session: WSLinkSession) => ({
+  getArray(hash: string, binary = true) {
     return session
       .call("viewport.geometry.array.get", [hash, binary])
-      .then((res) => {
+      .then((res: any) => {
         if (res.buffer) {
           return new Blob([res]);
         }
         return res;
       });
   },
-  getViewState(viewId, newSubscription = false) {
+  getViewState(viewId: string, newSubscription = false) {
     return session.call("viewport.geometry.view.get.state", [
       viewId,
       newSubscription,
     ]);
   },
-  addViewObserver(viewId) {
+  addViewObserver(viewId: string) {
     return session.call("viewport.geometry.view.observer.add", [viewId]);
   },
-  removeViewObserver(viewId) {
+  removeViewObserver(viewId: string) {
     return session.call("viewport.geometry.view.observer.remove", [viewId]);
   },
-  subscribeToViewChange(callback) {
+  subscribeToViewChange(callback: (...args: any[]) => void) {
     return session.subscribe("viewport.geometry.view.subscription", callback);
   },
-  unsubscribe(subscription) {
+  unsubscribe(subscription: any) {
     return session.unsubscribe(subscription);
   },
 });
diff --git a/js-lib/src/wslink/protocols/Trame.js b/js-lib/src/wslink/protocols/Trame.ts
similarity index 53%
rename from js-lib/src/wslink/protocols/Trame.js
rename to js-lib/src/wslink/protocols/Trame.ts
index 088c491..d881fb9 100644
--- a/js-lib/src/wslink/protocols/Trame.js
+++ b/js-lib/src/wslink/protocols/Trame.ts
@@ -1,26 +1,28 @@
-export default (session) => ({
-  lifeCycleUpdate(phaseName) {
+import type { WSLinkSession } from "./types";
+
+export default (session: WSLinkSession) => ({
+  lifeCycleUpdate(phaseName: string) {
     return session.call("trame.lifecycle.update", [phaseName]);
   },
-  sendError(message) {
+  sendError(message: string) {
     return session.call("trame.error.client", [message]);
   },
   getState() {
     return session.call("trame.state.get", []);
   },
-  trigger(name, args = [], kwargs = {}) {
+  trigger(name: string, args: any[] = [], kwargs: Record<string, any> = {}) {
     return session.call("trame.trigger", [name, args, kwargs]);
   },
-  updateState(changes) {
+  updateState(changes: Array<{ key: string; value: any }>) {
     return session.call("trame.state.update", [changes]);
   },
-  subscribeToStateUpdate(callback) {
+  subscribeToStateUpdate(callback: (...args: any[]) => void) {
     return session.subscribe("trame.state.topic", callback);
   },
-  subscribeToActions(callback) {
+  subscribeToActions(callback: (...args: any[]) => void) {
     return session.subscribe("trame.actions.topic", callback);
   },
-  unsubscribe(subscription) {
+  unsubscribe(subscription: any) {
     return session.unsubscribe(subscription);
   },
 });
diff --git a/js-lib/src/wslink/protocols/index.js b/js-lib/src/wslink/protocols/index.ts
similarity index 100%
rename from js-lib/src/wslink/protocols/index.js
rename to js-lib/src/wslink/protocols/index.ts
diff --git a/js-lib/src/wslink/protocols/types.ts b/js-lib/src/wslink/protocols/types.ts
new file mode 100644
index 0000000..1127d06
--- /dev/null
+++ b/js-lib/src/wslink/protocols/types.ts
@@ -0,0 +1,9 @@
+export interface WSLinkSession {
+  call(
+    method: string,
+    args?: any[],
+    kwargs?: Record<string, any>,
+  ): Promise<any>;
+  subscribe(topic: string, callback: (...args: any[]) => void): any;
+  unsubscribe(subscription: any): any;
+}
diff --git a/js-lib/tests/URLExtract.test.ts b/js-lib/tests/URLExtract.test.ts
new file mode 100644
index 0000000..4af4234
--- /dev/null
+++ b/js-lib/tests/URLExtract.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import vtkURLExtract from "../src/URLExtract";
+
+describe("toNativeType()", () => {
+  it("parses booleans, null and undefined", () => {
+    expect(vtkURLExtract.toNativeType("true")).toBe(true);
+    expect(vtkURLExtract.toNativeType("false")).toBe(false);
+    expect(vtkURLExtract.toNativeType("null")).toBeNull();
+    expect(vtkURLExtract.toNativeType("undefined")).toBeUndefined();
+  });
+
+  it("parses numbers", () => {
+    expect(vtkURLExtract.toNativeType("42")).toBe(42);
+    expect(vtkURLExtract.toNativeType("3.14")).toBe(3.14);
+  });
+
+  it("parses bracketed lists recursively", () => {
+    expect(vtkURLExtract.toNativeType("[1, 2, 3]")).toEqual([1, 2, 3]);
+    expect(vtkURLExtract.toNativeType("[true, false, null]")).toEqual([
+      true,
+      false,
+      null,
+    ]);
+  });
+
+  it("leaves non-numeric strings as-is", () => {
+    expect(vtkURLExtract.toNativeType("hello")).toBe("hello");
+  });
+});
+
+describe("extractURLParameters()", () => {
+  it("extracts and type-casts query parameters by default", () => {
+    const result = vtkURLExtract.extractURLParameters(
+      true,
+      "?application=trame&count=3&debug=true",
+    );
+
+    expect(result).toEqual({ application: "trame", count: 3, debug: true });
+  });
+
+  it("keeps values as raw strings when castToNativeType is false", () => {
+    const result = vtkURLExtract.extractURLParameters(false, "?count=3");
+
+    expect(result).toEqual({ count: "3" });
+  });
+
+  it("treats a valueless flag as true", () => {
+    const result = vtkURLExtract.extractURLParameters(true, "?useUrl");
+
+    expect(result).toEqual({ useUrl: true });
+  });
+});
diff --git a/js-lib/tests/decorators.test.ts b/js-lib/tests/decorators.test.ts
new file mode 100644
index 0000000..812fa0d
--- /dev/null
+++ b/js-lib/tests/decorators.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  decorate,
+  fileHandler,
+  fileListHandler,
+  registerDecorator,
+} from "../src/decorators";
+
+describe("decorate()", () => {
+  it("passes plain values through untouched", async () => {
+    expect(await decorate(5)).toBe(5);
+    expect(await decorate("hello")).toBe("hello");
+    expect(await decorate(null)).toBe(null);
+    expect(await decorate(undefined)).toBe(undefined);
+  });
+
+  it("serializes a File into a plain, transferable object", async () => {
+    const file = new File(["hello world"], "greeting.txt", {
+      type: "text/plain",
+    });
+
+    const result = await decorate(file);
+
+    expect(result.name).toBe("greeting.txt");
+    expect(result.type).toBe("text/plain");
+    expect(result.content).toBeInstanceOf(DataView);
+    expect(result.error).toBeNull();
+    expect(result._filter).toEqual(["content"]);
+  });
+
+  it("serializes each File found in a FileList-like collection", async () => {
+    // jsdom has no DataTransfer to build a real FileList; fileListHandler
+    // accepts any array-like with a length, which is what <input type="file">
+    // effectively hands the app in a real browser.
+    const files = [new File(["a"], "a.txt"), new File(["b"], "b.txt")];
+
+    const result = await decorate(files);
+
+    expect(result).toHaveLength(2);
+    expect(result.map((r: any) => r.name)).toEqual(["a.txt", "b.txt"]);
+  });
+
+  it("recurses into plain objects to find nested Files", async () => {
+    const file = new File(["hi"], "nested.txt");
+
+    const result = await decorate({ label: "upload", payload: file });
+
+    expect(result.label).toBe("upload");
+    expect(result.payload.name).toBe("nested.txt");
+    expect(result.payload._filter).toEqual(["content"]);
+  });
+
+  it("registerDecorator() (README: trame.registerDecorator) plugs in custom serialization", async () => {
+    registerDecorator({
+      priority: 1000,
+      async decorate(value) {
+        if (typeof value === "number") {
+          return value * 2;
+        }
+        return value;
+      },
+    });
+
+    expect(await decorate(21)).toBe(42);
+  });
+
+  it("fileHandler ignores non-File values", async () => {
+    expect(await fileHandler.decorate("not a file")).toBe("not a file");
+  });
+
+  it("fileListHandler passes through plain strings", async () => {
+    expect(await fileListHandler.decorate("keep-me")).toBe("keep-me");
+  });
+});
diff --git a/js-lib/tests/helpers/fakeClient.ts b/js-lib/tests/helpers/fakeClient.ts
new file mode 100644
index 0000000..ba5c2e8
--- /dev/null
+++ b/js-lib/tests/helpers/fakeClient.ts
@@ -0,0 +1,117 @@
+import { vi } from "vitest";
+
+export type TriggerHandler = (...args: any[]) => any;
+
+/**
+ * Minimal stand-in for a vtkWSLinkClient connected to a trame server.
+ * It keeps its own copy of the server-side state. Per trame_server's
+ * `update_state` RPC (trame.state.update), the server pushes state changes
+ * back over "trame.state.topic" with `skip_last_active_client=True`, so the
+ * client that sent an update does not get its own values echoed back; use
+ * `pushServerState()` to simulate a genuine server/other-client broadcast.
+ */
+export function createFakeClient(initialServerState: Record<string, any> = {}) {
+  let connected = false;
+  let serverState: Record<string, any> = { ...initialServerState };
+  const stateUpdateListeners: Array<(args: [Record<string, any>]) => void> = [];
+  const actionsListeners: Array<(args: [any[]]) => void> = [];
+  const closeListeners: Array<(...args: any[]) => void> = [];
+  const errorListeners: Array<(...args: any[]) => void> = [];
+  const triggerHandlers: Record<string, TriggerHandler> = {};
+
+  const lifeCycleUpdate = vi.fn(async (_phase: string) => {});
+
+  const remote = {
+    Trame: {
+      getState: vi.fn(async () => ({
+        name: "test-session",
+        state: serverState,
+      })),
+      updateState: vi.fn(
+        async (changes: Array<{ key: string; value: any }>) => {
+          // Mirrors trame_server: the sender's own values are applied
+          // locally but not echoed back to it (skip_last_active_client).
+          changes.forEach(({ key, value }) => {
+            serverState[key] = value;
+          });
+        },
+      ),
+      trigger: vi.fn(
+        async (
+          name: string,
+          args: any[] = [],
+          kwargs: Record<string, any> = {},
+        ) => {
+          const handler = triggerHandlers[name];
+          if (!handler) {
+            throw new Error(`No trigger registered for "${name}"`);
+          }
+          return handler(...args, kwargs);
+        },
+      ),
+      subscribeToStateUpdate: vi.fn(
+        (cb: (args: [Record<string, any>]) => void) => {
+          stateUpdateListeners.push(cb);
+          return { id: `state-${stateUpdateListeners.length}` };
+        },
+      ),
+      subscribeToActions: vi.fn((cb: (args: [any[]]) => void) => {
+        actionsListeners.push(cb);
+        return { id: `actions-${actionsListeners.length}` };
+      }),
+      unsubscribe: vi.fn(),
+      lifeCycleUpdate,
+    },
+  };
+
+  const client = {
+    isConnected: vi.fn(() => connected),
+    isBusy: vi.fn(() => false),
+    connect: vi.fn(async (_config: any) => {
+      connected = true;
+      return client;
+    }),
+    disconnect: vi.fn((_timeout: number) => {
+      connected = false;
+      closeListeners.forEach((cb) => cb("Connection closed"));
+    }),
+    getConfig: vi.fn(() => ({ application: "trame" })),
+    getRemote: vi.fn(() => remote),
+    onConnectionError: vi.fn((cb: (...args: any[]) => void) => {
+      errorListeners.push(cb);
+      return { unsubscribe: () => {} };
+    }),
+    onConnectionClose: vi.fn((cb: (...args: any[]) => void) => {
+      closeListeners.push(cb);
+      return { unsubscribe: () => {} };
+    }),
+    onBusyChange: vi.fn(() => ({ unsubscribe: () => {} })),
+  };
+
+  return {
+    client,
+    remote,
+    registerTrigger(name: string, handler: TriggerHandler) {
+      triggerHandlers[name] = handler;
+    },
+    getServerState() {
+      return serverState;
+    },
+    /** Simulate the server unilaterally broadcasting new/changed state, e.g. from another client. */
+    pushServerState(partial: Record<string, any>) {
+      serverState = { ...serverState, ...partial };
+      stateUpdateListeners.forEach((cb) => cb([{ ...serverState }]));
+    },
+    emitAction(action: any) {
+      actionsListeners.forEach((cb) => cb([[action]]));
+    },
+    emitClose(info: any) {
+      closeListeners.forEach((cb) => cb(info));
+    },
+    emitError(info: any) {
+      errorListeners.forEach((cb) => cb(info));
+    },
+  };
+}
+
+export type FakeClient = ReturnType<typeof createFakeClient>;
diff --git a/js-lib/tests/listeners.test.ts b/js-lib/tests/listeners.test.ts
new file mode 100644
index 0000000..f25bad7
--- /dev/null
+++ b/js-lib/tests/listeners.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from "vitest";
+import { ListenerManager, WatcherManager } from "../src/listeners";
+
+describe("ListenerManager", () => {
+  it("calls every registered listener on emit()", () => {
+    const manager = new ListenerManager("test");
+    const a = vi.fn();
+    const b = vi.fn();
+    manager.on(a);
+    manager.on(b);
+
+    manager.emit("payload", 2);
+
+    expect(a).toHaveBeenCalledWith("payload", 2);
+    expect(b).toHaveBeenCalledWith("payload", 2);
+  });
+
+  it("on() returns an unsubscribe function", () => {
+    const manager = new ListenerManager("test");
+    const fn = vi.fn();
+    const unsubscribe = manager.on(fn);
+
+    unsubscribe();
+    manager.emit();
+
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("keeps emitting to the remaining listeners if one throws", () => {
+    const manager = new ListenerManager("test");
+    const failing = vi.fn(() => {
+      throw new Error("boom");
+    });
+    const ok = vi.fn();
+    manager.on(failing);
+    manager.on(ok);
+
+    expect(() => manager.emit()).not.toThrow();
+    expect(ok).toHaveBeenCalled();
+  });
+});
+
+describe("WatcherManager", () => {
+  it("notifies only watchers whose dependencies changed", () => {
+    const manager = new WatcherManager();
+    const watchA = vi.fn();
+    const watchB = vi.fn();
+    manager.watch(["a"], watchA);
+    manager.watch(["b"], watchB);
+
+    manager.notifyWatchers(["a"], { a: 1, b: 2 });
+
+    expect(watchA).toHaveBeenCalledWith(1);
+    expect(watchB).not.toHaveBeenCalled();
+  });
+
+  it("unsubscribe stops further notifications", () => {
+    const manager = new WatcherManager();
+    const watch = vi.fn();
+    const unsubscribe = manager.watch(["a"], watch);
+
+    unsubscribe();
+    manager.notifyWatchers(["a"], { a: 1 });
+
+    expect(watch).not.toHaveBeenCalled();
+  });
+});
diff --git a/js-lib/tests/state.test.ts b/js-lib/tests/state.test.ts
new file mode 100644
index 0000000..b539ac7
--- /dev/null
+++ b/js-lib/tests/state.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from "vitest";
+import { State } from "../src/state";
+import { createFakeClient } from "./helpers/fakeClient";
+
+async function makeState(initialServerState: Record<string, any> = {}) {
+  const fake = createFakeClient(initialServerState);
+  // Mirrors real usage: Trame always connects the client before creating State.
+  await fake.client.connect({});
+  const state = new State(fake.client as any);
+  return { state, fake };
+}
+
+describe("State", () => {
+  it("loads its initial content from the server", async () => {
+    const { state } = await makeState({ a: 1, b: 2 });
+    await state.loadState();
+
+    expect(state.get("a")).toBe(1);
+    expect(state.get("b")).toBe(2);
+    expect(state.getAllKeys().sort()).toEqual(["a", "b"]);
+  });
+
+  it("set() updates locally and pushes to the server (README: state.set)", async () => {
+    const { state, fake } = await makeState();
+    await state.loadState();
+
+    await state.set("a", 5);
+
+    expect(state.get("a")).toBe(5);
+    expect(fake.getServerState().a).toBe(5);
+  });
+
+  it("get() returns undefined for keys that were never set (README: state.get('b'))", async () => {
+    const { state } = await makeState();
+    await state.loadState();
+
+    expect(state.get("b")).toBeUndefined();
+  });
+
+  it("get() with no key returns the full state object", async () => {
+    const { state } = await makeState({ a: 1 });
+    await state.loadState();
+
+    expect(state.get()).toMatchObject({ a: 1 });
+  });
+
+  it("update() applies several key/value pairs at once (README: state.update)", async () => {
+    const { state, fake } = await makeState();
+    await state.loadState();
+
+    await state.update({ a: 1, b: 2 });
+
+    expect(state.get("a")).toBe(1);
+    expect(state.get("b")).toBe(2);
+    expect(fake.getServerState()).toMatchObject({ a: 1, b: 2 });
+  });
+
+  it("watch() calls back immediately and on every dependency change (README: state.watch)", async () => {
+    const { state } = await makeState({ a: 1 });
+    await state.loadState();
+
+    const values: any[] = [];
+    state.watch(["a"], (a) => values.push(a));
+
+    // called right away with the current value
+    expect(values).toEqual([1]);
+
+    await state.set("a", 42);
+    expect(values).toEqual([1, 42]);
+  });
+
+  it("watch() unsubscribe stops future notifications", async () => {
+    const { state } = await makeState({ a: 1 });
+    await state.loadState();
+
+    const callback = vi.fn();
+    const unsubscribe = state.watch(["a"], callback);
+    callback.mockClear();
+
+    unsubscribe();
+    await state.set("a", 2);
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("onChange() reports dirty-state and new-keys events", async () => {
+    const { state, fake } = await makeState({ a: 1 });
+    await state.loadState();
+
+    const events: any[] = [];
+    state.onChange((event) => events.push(event));
+
+    await state.set("a", 2);
+    expect(events).toContainEqual({ type: "dirty-state", keys: ["a"] });
+
+    // "new-keys" fires when the server introduces a key the client didn't
+    // already know about, e.g. another client/the server adding one.
+    fake.pushServerState({ brandNewKey: "hello" });
+    expect(
+      events.some(
+        (e) => e.type === "new-keys" && e.keys.includes("brandNewKey"),
+      ),
+    ).toBe(true);
+  });
+
+  it("flush() forces the given keys to be pushed even without a prior set() (README: state.flush)", async () => {
+    const { state, fake } = await makeState({ a: 1, b: 2 });
+    await state.loadState();
+
+    // Mutate state directly, bypassing set(), then force a flush.
+    (state as any)._state.a = 99;
+    await state.flush("a");
+
+    expect(fake.getServerState().a).toBe(99);
+  });
+
+  it("canDirty() respects the server-provided trame__client_only list", async () => {
+    const { state } = await makeState({ trame__client_only: ["locked"] });
+    await state.loadState();
+
+    expect(state.canDirty("locked")).toBe(false);
+    expect(state.canDirty("free")).toBe(true);
+  });
+
+  it("delete() unsubscribes from the wslink client without throwing", async () => {
+    const { state, fake } = await makeState({ a: 1 });
+    await state.loadState();
+
+    expect(() => state.delete()).not.toThrow();
+    expect(fake.remote.Trame.unsubscribe).toHaveBeenCalled();
+  });
+});
diff --git a/js-lib/tests/trame.test.ts b/js-lib/tests/trame.test.ts
new file mode 100644
index 0000000..dfa4a83
--- /dev/null
+++ b/js-lib/tests/trame.test.ts
@@ -0,0 +1,219 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Trame } from "../src/trame";
+import { createFakeClient, type FakeClient } from "./helpers/fakeClient";
+
+// `Trame.connect()` builds its client via `wslink.createClient()`. We swap
+// that factory for one that hands back our in-memory fake so tests never
+// need a real server. vitest hoists `vi.mock` above the imports above, so
+// "../src/wslink" is already mocked by the time "../src/trame" loads it.
+let fake: FakeClient;
+vi.mock("../src/wslink", () => ({
+  default: {
+    createClient: () => fake.client,
+  },
+}));
+
+beforeEach(() => {
+  fake = createFakeClient({ a: 0, b: 0 });
+});
+
+describe("Trame (README: basic usage)", () => {
+  it("connect() returns the resolved configuration", async () => {
+    const trame = new Trame();
+    const config = await trame.connect({ application: "trame" });
+
+    expect(trame.isConnected()).toBe(true);
+    expect(config).toEqual({ application: "trame" });
+    expect(trame.client).toBe(fake.client);
+  });
+
+  it("state.set()/state.get() round-trip through the server (README: state.set/get)", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    await trame.state!.set("a", 5);
+
+    expect(trame.state!.get("a")).toBe(5);
+    expect(fake.getServerState().a).toBe(5);
+  });
+
+  it("state.update() applies multiple keys at once (README: state.update)", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    await trame.state!.update({ a: 1, b: 2 });
+
+    expect(trame.state!.get("a")).toBe(1);
+    expect(trame.state!.get("b")).toBe(2);
+  });
+
+  it("state.watch() reports changes for the watched keys (README: state.watch)", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    const seen: any[] = [];
+    trame.state!.watch(["a"], (a) => seen.push(a));
+
+    await trame.state!.set("a", 7);
+    expect(seen).toEqual([0, 7]);
+  });
+
+  it("trigger() calls the named server method and returns its result (README: trame.trigger)", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    fake.registerTrigger("name", (arg0, arg1, kwargs) => ({
+      arg0,
+      arg1,
+      kwargs,
+    }));
+
+    const result = await trame.trigger("name", ["arg_0", "arg_1"], {
+      kwarg_0: 1,
+      kwarg_1: 2,
+    });
+
+    expect(result).toEqual({
+      arg0: "arg_0",
+      arg1: "arg_1",
+      kwargs: { kwarg_0: 1, kwarg_1: 2 },
+    });
+  });
+
+  it("refs[name] lets the server invoke a method on a registered JS object (README: trame.refs)", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    const jsObject = { method: vi.fn() };
+    trame.refs["name"] = jsObject;
+
+    fake.emitAction({
+      ref: "name",
+      type: "method",
+      method: "method",
+      args: ["arg_0", "arg_1"],
+    });
+
+    expect(jsObject.method).toHaveBeenCalledWith("arg_0", "arg_1");
+  });
+});
+
+describe("Trame (README: more API examples)", () => {
+  it("registerDecorator() customizes trigger() argument serialization", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    // `registerDecorator` mutates a module-wide registry (like the README's
+    // built-in File handling), so this uses a value shape (a tagged marker
+    // object) that no other test in this file could ever produce, keeping
+    // the registration side effect from leaking into unrelated assertions.
+    class TestMarker {
+      constructor(public payload: string) {}
+    }
+    trame.registerDecorator({
+      priority: 1000,
+      async decorate(value) {
+        return value instanceof TestMarker ? { encoded: value.payload } : value;
+      },
+    });
+
+    fake.registerTrigger("encode", (value) => value);
+    const result = await trame.trigger("encode", [new TestMarker("hello")]);
+    expect(result).toEqual({ encoded: "hello" });
+  });
+
+  it("onClose() is notified when the connection closes, and can unsubscribe", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    const onClose = vi.fn();
+    const unsubscribe = trame.onClose(onClose);
+
+    trame.disconnect();
+    expect(onClose).toHaveBeenCalledWith("Connection closed");
+
+    unsubscribe();
+    fake.emitClose("closed again");
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("onError() is notified on connection errors, and can unsubscribe", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    const onError = vi.fn();
+    const unsubscribe = trame.onError(onError);
+
+    fake.emitError("boom");
+    expect(onError).toHaveBeenCalledWith("boom");
+
+    unsubscribe();
+    fake.emitError("boom again");
+    expect(onError).toHaveBeenCalledTimes(1);
+  });
+
+  it("disconnect() notifies the server lifecycle and closes the connection", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    trame.disconnect();
+
+    expect(fake.remote.Trame.lifeCycleUpdate).toHaveBeenCalledWith(
+      "client_exited",
+    );
+    expect(fake.client.disconnect).toHaveBeenCalledWith(0);
+    expect(trame.isConnected()).toBe(false);
+  });
+
+  it("exit(timeout) notifies the server lifecycle and disconnects with that timeout", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    trame.exit(120);
+
+    expect(fake.remote.Trame.lifeCycleUpdate).toHaveBeenCalledWith(
+      "client_exited",
+    );
+    expect(fake.client.disconnect).toHaveBeenCalledWith(120);
+  });
+
+  it("reconnect() re-establishes the connection using the saved configuration", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+    trame.disconnect();
+
+    const config = await trame.reconnect();
+
+    expect(trame.isConnected()).toBe(true);
+    expect(config).toEqual({ application: "trame" });
+  });
+
+  it("exposes client and state on the instance", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    expect(trame.client).toBeTruthy();
+    expect(trame.state).toBeTruthy();
+  });
+
+  it("state.flush(keys) force-pushes the given keys to the server", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    (trame.state as any)._state.a = 55;
+    await trame.state!.flush("a");
+
+    expect(fake.getServerState().a).toBe(55);
+  });
+
+  it("state.onChange() reports dirty-state and new-keys events", async () => {
+    const trame = new Trame();
+    await trame.connect({ application: "trame" });
+
+    const events: any[] = [];
+    trame.state!.onChange((event) => events.push(event));
+
+    await trame.state!.set("a", 2);
+    expect(events).toContainEqual({ type: "dirty-state", keys: ["a"] });
+  });
+});
diff --git a/js-lib/tsconfig.json b/js-lib/tsconfig.json
new file mode 100644
index 0000000..7bd51ae
--- /dev/null
+++ b/js-lib/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
diff --git a/js-lib/vite.config.js b/js-lib/vite.config.js
deleted file mode 100644
index ef9972d..0000000
--- a/js-lib/vite.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  base: "./",
-  build: {
-    lib: {
-      entry: "./src/main.js",
-      name: "Trame",
-      formats: ["es", "umd"],
-      fileName: "trame",
-    },
-    assetsDir: ".",
-  },
-};
diff --git a/js-lib/vite.config.ts b/js-lib/vite.config.ts
new file mode 100644
index 0000000..e20ed99
--- /dev/null
+++ b/js-lib/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  base: "./",
+  plugins: [dts({ insertTypesEntry: true })],
+  build: {
+    lib: {
+      entry: "./src/main.ts",
+      name: "Trame",
+      formats: ["es", "umd"],
+      fileName: "trame",
+    },
+    assetsDir: ".",
+  },
+});
diff --git a/js-lib/vitest.config.ts b/js-lib/vitest.config.ts
new file mode 100644
index 0000000..d806e23
--- /dev/null
+++ b/js-lib/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    include: ["tests/**/*.test.ts"],
+  },
+});
diff --git a/noxfile.py b/noxfile.py
new file mode 100644
index 0000000..e56850b
--- /dev/null
+++ b/noxfile.py
@@ -0,0 +1,75 @@
+"""
+Nox automation for trame-client.
+
+Usage:
+    uvx nox                 # run every default session (tests + pre-commit)
+    uvx nox -s tests         # run the test suite across all supported Pythons
+    uvx nox -s "tests-3.12"  # run the test suite against a single version
+    uvx nox -s pre_commit    # run pre-commit hooks against the whole repo
+
+Sessions use the `uv` backend (https://docs.astral.sh/uv/), so `nox` doesn't
+need pre-installed interpreters for every Python version - uv fetches
+whichever one a session asks for.
+"""
+
+import shutil
+from pathlib import Path
+
+import nox
+
+nox.options.default_venv_backend = "uv"
+nox.options.sessions = ["tests", "pre_commit"]
+
+PYTHON_VERSIONS = ["3.10", "3.11", "3.12", "3.13", "3.14"]
+
+# The Python package serves these prebuilt JS bundles (see pyproject.toml's
+# [tool.hatch.build] include list); the browser-driven tests need them built
+# once before pytest can exercise them.
+WEB_APPS = {
+    "vue2-app": Path("src/trame_client/module/vue2-www"),
+    "vue3-app": Path("src/trame_client/module/vue3-www"),
+    "react-app": Path("src/trame_client/module/react-www"),
+}
+
+
+def _ensure_vue_apps_built(session):
+    if shutil.which("npm") is None:
+        session.warn(
+            "npm not found - skipping Vue2/Vue3/React client build. "
+            "Browser-driven tests will fail without it."
+        )
+        return
+
+    # react-app consumes js-lib's built dist/ output (see
+    # docs/adding-support-for-react/react-app-implementation-plan.md §1).
+    js_lib_dist = Path("js-lib/dist")
+    if not js_lib_dist.exists():
+        with session.chdir("js-lib"):
+            session.run("npm", "ci", external=True)
+            session.run("npm", "run", "build", external=True)
+
+    for app_dir, output_dir in WEB_APPS.items():
+        if output_dir.exists():
+            session.log(f"{output_dir} already built, skipping `{app_dir}` build")
+            continue
+        with session.chdir(app_dir):
+            session.run("npm", "ci", external=True)
+            session.run("npm", "run", "build", external=True)
+
+
+@nox.session(python=PYTHON_VERSIONS)
+def tests(session):
+    """Run the test suite against a given Python version, installed via uv."""
+    _ensure_vue_apps_built(session)
+
+    session.install("-e", ".[test]", "coverage")
+    session.run("playwright", "install")
+    session.run("coverage", "run", "--source", ".", "-m", "pytest", "-s", ".")
+    session.run("coverage", "report", "-m")
+
+
+@nox.session(python="3.12")
+def pre_commit(session):
+    """Run every pre-commit hook against the full codebase."""
+    session.install("-e", ".[dev]")
+    session.run("pre-commit", "run", "--all-files")
diff --git a/pyproject.toml b/pyproject.toml
index fe73985..2e5c415 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -33,10 +33,12 @@ test = [
     "Pillow",
     "pixelmatch",
     "trame>=3.13",
+    "trame-server>=3.15",
 ]
 dev = [
     "pre-commit",
     "ruff",
+    "nox",
 ]
 
 [build-system]
@@ -48,6 +50,7 @@ include = [
   "/src/**/*.py",
   "/src/trame_client/module/vue2-www/**",
   "/src/trame_client/module/vue3-www/**",
+  "/src/trame_client/module/react-www/**",
   "src/trame_client/module/user_provided_scripts/**",
 ]
 
diff --git a/react-app/index.html b/react-app/index.html
new file mode 100644
index 0000000..125130c
--- /dev/null
+++ b/react-app/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en" data-app-name="trame" data-launcher-retry="[]">
+  <head>
+    <base href="." />
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"
+    />
+    <meta
+      name="description"
+      content="Application built with trame, a product from Kitware"
+    />
+    <meta
+      name="keywords"
+      content="trame, OpenSource, Stateful Python Application, Kitware"
+    />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link rel="icon" href="logo.png" />
+    <title>trame is built by Kitware</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but trame built by Kitware doesn't work properly without
+        JavaScript enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script>
+      fetch("./loading.tpl")
+        .then((r) => r.text())
+        .then((c) => (document.querySelector("#app").innerHTML = c));
+    </script>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/react-app/package-lock.json b/react-app/package-lock.json
new file mode 100644
index 0000000..dfa0a0b
--- /dev/null
+++ b/react-app/package-lock.json
@@ -0,0 +1,2070 @@
+{
+  "name": "trame-app-react",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "trame-app-react",
+      "dependencies": {
+        "@kitware/trame": "file:../js-lib",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@testing-library/react": "^16.0.0",
+        "@vitejs/plugin-react": "^6.0.0",
+        "jsdom": "^27.4.0",
+        "vite": "^8.0.11",
+        "vitest": "^4.1.11"
+      }
+    },
+    "../js-lib": {
+      "name": "@kitware/trame",
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "@kitware/wslink": "^2.5.6"
+      },
+      "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "@types/node": "^25.6.2",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "eslint": "^10.3.0",
+        "eslint-plugin-vue": "^10.9.1",
+        "globals": "^17.12.0",
+        "jsdom": "^27.4.0",
+        "prettier": "^3.8.3",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.69.0",
+        "vite": "^8.0.11",
+        "vite-plugin-dts": "^5.1.0",
+        "vitest": "^4.1.11"
+      }
+    },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz",
+      "integrity": "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.0.0",
+        "@csstools/css-color-parser": "^4.0.1",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.5"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "dev": true,
+      "license": "MIT",
+      "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.6"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.1.tgz",
+      "integrity": "sha512-gLNsunvwf3mCi5u5o46/Z/JcJMnhbHSaZ69rkgPzNM3J4s8hWwpPUQB6/tt0EDFyCiWzxANlx+2LJwpYj4zS1w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.3.0.tgz",
+      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.2.2.tgz",
+      "integrity": "sha512-3QKjR/vxyjcSXBLgb6lP0S3MGdvwbmqSsvLPbYdVORqPDc8FX1HAJ0Spk38bxaRXgvENTA47tlhhbb5Z2e8hEg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.1",
+        "@csstools/css-calc": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.12.tgz",
+      "integrity": "sha512-3vLQK+dXxhBMR2Wx99PTCifE+vHtW2ndZWyla8yK813ev6oGhyn8Lja8jCyGAWTJ+LEYZK7EVtJxrDj8ztevJw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "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
+        }
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@kitware/trame": {
+      "resolved": "../js-lib",
+      "link": true
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.148.0.tgz",
+      "integrity": "sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.7.tgz",
+      "integrity": "sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.7.tgz",
+      "integrity": "sha512-l17HE9EweWaqJZhuUuNBN/FzM62xw+DECVnJyvMsxn8vJFAGLy5QfLDoYAcronkAN8VxKZHezDpulHDPx95vFw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.7.tgz",
+      "integrity": "sha512-8ED8ELFvHXc6OCETIn4gXObPiaR6bckM/ipXtbzlPVDRMBfEGjCKgO90F9YtfdpDatVx/ZQw7aZ1vUMf/+T3Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.7.tgz",
+      "integrity": "sha512-/WPripjtiAIZ2tWY7ddijORT0Ujg87wxWW/qcoFVCKAWVDPhtY0xr7Dj0M3GyNGz60jGwTElhro/mkF9dT7dDQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.7.tgz",
+      "integrity": "sha512-14DI4NcqpvbICxSnGLx3PmtDaWqRP/KGSGb6C+JLLVPeZRl6dKdHba3pGsqT3vpdTqhEYIPG0MMQ8c0xYqoJxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.7.tgz",
+      "integrity": "sha512-bxrWIRvHWQvbJwi+VIie/kDJmQxcNE6xxWwZdqF/ExVAigtHkv54WTLQPb+QsZdnFy18fg7JPfWGL0RH6vwIlQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.7.tgz",
+      "integrity": "sha512-toOY2BChBZyuxU7OYX6Tn389di4IzAqPTycVcci0O7FSfBqzRB3RZn+K5Is6ANf4tmgRd/K1yZTsNTXbkXsnLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.7.tgz",
+      "integrity": "sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.7.tgz",
+      "integrity": "sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.7.tgz",
+      "integrity": "sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.7.tgz",
+      "integrity": "sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.7.tgz",
+      "integrity": "sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.7.tgz",
+      "integrity": "sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.7.tgz",
+      "integrity": "sha512-e3Gu3WxbNk/UqQhxqU7YIYO+9ZBvWNz3U+h/qRFosscMFzdRPbXYSaSWgSnklv2fz1TgzBTcti2z35c/7irsHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.7.tgz",
+      "integrity": "sha512-W/jg5qoRSqjsEv0+dZi4e687mcHqmVuU0P4fK6qS/xjetW2Gmc1W8j//z5nAeNcC8Ttm0hV46IjcYeuVwYhuiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.3.tgz",
+      "integrity": "sha512-Uo193NgQbPMz6lrrhtRQQFcMC6Re/ELLFbbuVL30WDlZxlpZf9/lMHTAVxPRLw1q1iu9OJmR1c2BLiENRstdBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
+      "integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "oxc-transform-react": "^0.145.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "oxc-transform-react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.11.tgz",
+      "integrity": "sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.11.tgz",
+      "integrity": "sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.11",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.11.tgz",
+      "integrity": "sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.11.tgz",
+      "integrity": "sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.11",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.11.tgz",
+      "integrity": "sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.11.tgz",
+      "integrity": "sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.11.tgz",
+      "integrity": "sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/cssstyle": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
+      "integrity": "sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^4.1.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.21",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.1.tgz",
+      "integrity": "sha512-euIQENZg6x8mj3fO6o9+fOW8MimUI4PpD/fZBhJfeioZVy9TUpM4UY7KjQNVZFlqwJ0UdzRDzkycB997HEq1BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^15.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
+      "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@acemir/cssom": "^0.9.28",
+        "@asamuzakjp/dom-selector": "^6.7.6",
+        "@exodus/bytes": "^1.6.0",
+        "cssstyle": "^5.3.4",
+        "data-urls": "^6.0.0",
+        "decimal.js": "^10.6.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": "^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-mimetype": "^4.0.0",
+        "whatwg-url": "^15.1.0",
+        "ws": "^8.18.3",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.18",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.7.tgz",
+      "integrity": "sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.148.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.7",
+        "@rolldown/binding-android-arm64": "1.2.7",
+        "@rolldown/binding-darwin-arm64": "1.2.7",
+        "@rolldown/binding-darwin-x64": "1.2.7",
+        "@rolldown/binding-freebsd-x64": "1.2.7",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.7",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.7",
+        "@rolldown/binding-linux-arm64-musl": "1.2.7",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.7",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.7",
+        "@rolldown/binding-linux-x64-gnu": "1.2.7",
+        "@rolldown/binding-linux-x64-musl": "1.2.7",
+        "@rolldown/binding-openharmony-arm64": "1.2.7",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.7",
+        "@rolldown/binding-win32-x64-msvc": "1.2.7"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.1.tgz",
+      "integrity": "sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.1.tgz",
+      "integrity": "sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.11",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.11.tgz",
+      "integrity": "sha512-aBiNayCfTQxuIJBm06M+xR14cYaYlDlSXZbgsnKzKNxDKUVq7KFwTjwBSsb7m9Y5xO8WfPnBc63WaYFMTGlvqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.11"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.11",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.11.tgz",
+      "integrity": "sha512-CW3WN2rIIE/Of21mulhgnGOwoDyEFNygyIBOONSdyAuSATgMMUCpLeUlB+E8sAwA5xRV9hYPl+kyZ9citHCaKg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
+      "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.26",
+        "rolldown": "~1.2.4",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0 || ^0.5.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.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
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.11.tgz",
+      "integrity": "sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.11",
+        "@vitest/mocker": "4.1.11",
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/runner": "4.1.11",
+        "@vitest/snapshot": "4.1.11",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "es-module-lexer": "^2.0.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": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.11",
+        "@vitest/browser-preview": "4.1.11",
+        "@vitest/browser-webdriverio": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "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/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/react-app/package.json b/react-app/package.json
new file mode 100644
index 0000000..fcc04ba
--- /dev/null
+++ b/react-app/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "trame-app-react",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --emptyOutDir",
+    "debug": "vite build --sourcemap -m dev",
+    "dev": "vite",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@kitware/trame": "file:../js-lib",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
+    "jsdom": "^27.4.0",
+    "vite": "^8.0.11",
+    "vitest": "^4.1.11"
+  }
+}
diff --git a/react-app/public/loading.tpl b/react-app/public/loading.tpl
new file mode 100644
index 0000000..4be9fd7
--- /dev/null
+++ b/react-app/public/loading.tpl
@@ -0,0 +1,91 @@
+<style>
+      .text-no-select {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      .trame__loader {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: calc(50% - 50px);
+        width: 150px;
+        height: 150px;
+        margin: -75px 0 0 -75px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #ac262c;
+
+        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #258e44;
+
+        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__loader:after {
+        content: "";
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+        border-radius: 50%;
+        border: 10px solid transparent;
+        border-top-color: #1c4678;
+
+        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+      }
+
+      .trame__message {
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        top: calc(50% + 50px);
+        font-size: 200%;
+        user-select: none;
+      }
+
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(0deg); /* IE 9 */
+          transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+        }
+        100% {
+          -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(360deg); /* IE 9 */
+          transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+        }
+      }
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(0deg); /* IE 9 */
+          transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+        }
+        100% {
+          -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+          -ms-transform: rotate(360deg); /* IE 9 */
+          transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+        }
+      }
+</style>
+<div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
+  <div class="trame__loader"></div>
+  <div class="trame__message">Loading...</div>
+</div>
diff --git a/react-app/public/logo.png b/react-app/public/logo.png
new file mode 100644
index 0000000..2abe7a0
Binary files /dev/null and b/react-app/public/logo.png differ
diff --git a/react-app/src/components/ReactFor.jsx b/react-app/src/components/ReactFor.jsx
new file mode 100644
index 0000000..6cb267c
--- /dev/null
+++ b/react-app/src/components/ReactFor.jsx
@@ -0,0 +1,19 @@
+import TrameNode from "./TrameNode.jsx";
+import { extendScope } from "../runtime/scope";
+
+// Plain presentational component - `items` arrives already resolved (via
+// useResolvedNode in the parent TrameNodeOne), so it needs no hooks of its own.
+// Uses the array index as its own React key (no other generically-available
+// stable identity - react.For doesn't mandate items carry an id). A widget
+// author wanting stable row identity across reordering puts an explicit
+// `key=` on the element(s) inside the For body, honored one level down by
+// computeNodeKey inside the nested <TrameNode>.
+export default function ReactFor({ items, name, rawChildren, scope }) {
+  return (items ?? []).map((item, index) => (
+    <TrameNode
+      key={index}
+      nodes={rawChildren}
+      scope={extendScope(scope, [name], [item])}
+    />
+  ));
+}
diff --git a/react-app/src/components/ReactIf.jsx b/react-app/src/components/ReactIf.jsx
new file mode 100644
index 0000000..bd4505b
--- /dev/null
+++ b/react-app/src/components/ReactIf.jsx
@@ -0,0 +1,7 @@
+import TrameNode from "./TrameNode.jsx";
+
+// Plain presentational component - `value` arrives already resolved (via
+// useResolvedNode in the parent TrameNodeOne), so it needs no hooks of its own.
+export default function ReactIf({ value, rawChildren, scope }) {
+  return value ? <TrameNode nodes={rawChildren} scope={scope} /> : null;
+}
diff --git a/react-app/src/components/TrameApp.jsx b/react-app/src/components/TrameApp.jsx
new file mode 100644
index 0000000..193863e
--- /dev/null
+++ b/react-app/src/components/TrameApp.jsx
@@ -0,0 +1,76 @@
+import { useEffect, useMemo, useState } from "react";
+import { TrameContext } from "../runtime/trameContext";
+import { createRefRegistry } from "../runtime/refs";
+import { registerTag } from "../runtime/tags";
+import ReactIf from "./ReactIf.jsx";
+import ReactFor from "./ReactFor.jsx";
+import TrameLoading from "./TrameLoading.jsx";
+import TrameTemplate from "./TrameTemplate.jsx";
+import TrameReconnect from "./TrameReconnect.jsx";
+import TrameJSEval from "./TrameJSEval.jsx";
+import TrameStyle from "./TrameStyle.jsx";
+import TrameScript from "./TrameScript.jsx";
+import TrameClientStateChange from "./TrameClientStateChange.jsx";
+import TrameClientTriggers from "./TrameClientTriggers.jsx";
+import TrameLifeCycleMonitor from "./TrameLifeCycleMonitor.jsx";
+import TrameSizeObserver from "./TrameSizeObserver.jsx";
+
+// Registered once at module load, before first render (§6 of the plan).
+registerTag("ReactIf", ReactIf);
+registerTag("ReactFor", ReactFor);
+registerTag("trame-loading", TrameLoading);
+registerTag("trame-template", TrameTemplate);
+registerTag("trame-exec", TrameJSEval);
+registerTag("trame-style", TrameStyle);
+registerTag("trame-script", TrameScript);
+registerTag("trame-client-state-change", TrameClientStateChange);
+registerTag("trame-client-triggers", TrameClientTriggers);
+registerTag("trame-life-cycle-monitor", TrameLifeCycleMonitor);
+registerTag("trame-size-observer", TrameSizeObserver);
+
+// Responsibilities ported from vue3-app/src/components/TrameApp.js, minus
+// per-`trame__template_*`-name dynamic-component registration (no Vue-style
+// "register a component by string name" system to feed - TrameTemplate just
+// reads its state key directly and hands the dict to TrameNode).
+export default function TrameApp({ trame, useUrl = false }) {
+  const [connected, setConnected] = useState(() => trame.isConnected());
+  const [refreshTS, setRefreshTS] = useState(0);
+
+  useEffect(() => {
+    const unsubscribe = trame.onClose(() => setConnected(false));
+
+    function onBeforeUnload() {
+      trame.client?.getRemote()?.Trame?.lifeCycleUpdate("client_exited");
+    }
+    window.addEventListener("beforeunload", onBeforeUnload);
+
+    return () => {
+      unsubscribe();
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      trame.client?.getRemote()?.Trame?.lifeCycleUpdate("client_unmounted");
+    };
+  }, [trame]);
+
+  const ctx = useMemo(
+    () => ({ trame, getRefCallback: createRefRegistry(trame) }),
+    [trame, refreshTS],
+  );
+
+  if (!connected) {
+    return (
+      <TrameReconnect
+        trame={trame}
+        onReconnected={() => {
+          setRefreshTS((v) => v + 1);
+          setConnected(true);
+        }}
+      />
+    );
+  }
+
+  return (
+    <TrameContext.Provider key={refreshTS} value={ctx}>
+      <TrameTemplate useUrl={useUrl} />
+    </TrameContext.Provider>
+  );
+}
diff --git a/react-app/src/components/TrameClientStateChange.jsx b/react-app/src/components/TrameClientStateChange.jsx
new file mode 100644
index 0000000..b244f54
--- /dev/null
+++ b/react-app/src/components/TrameClientStateChange.jsx
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+
+// Port of vue3-app/src/components/TrameClientStateChange.js. `value` arrives
+// already resolved (react.Bind, evaluated reactively by useResolvedNode), so
+// this only needs to notice when it changes. `immediate` (sync vs. Vue's
+// nextTick emission) has no meaningful react equivalent - useEffect already
+// defers to after commit either way - so it's accepted but unused here;
+// `triggerChangeOnCreate` fires `onChange` once on mount, before any change.
+export default function TrameClientStateChange({
+  value,
+  triggerChangeOnCreate,
+  onChange,
+  children,
+}) {
+  const isFirst = useRef(true);
+
+  useEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false;
+      if (triggerChangeOnCreate) onChange?.(value);
+      return;
+    }
+    onChange?.(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return children ?? null;
+}
diff --git a/react-app/src/components/TrameClientTriggers.jsx b/react-app/src/components/TrameClientTriggers.jsx
new file mode 100644
index 0000000..05aa060
--- /dev/null
+++ b/react-app/src/components/TrameClientTriggers.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useImperativeHandle } from "react";
+
+// Port of vue3-app/src/components/TrameClientTriggers.js. `events` collects
+// every non-ref prop by name - both the "built-in" ones (mounted, created,
+// beforeDestroy, beforeUnmount, exit) and any arbitrary custom topic name a
+// caller declared - so a single generic `emit(topic, event)` (exposed for
+// server-triggered `.call(method, *args)` dispatch via js-lib's ref-action
+// mechanism) can fire either kind the same way vue's `emit()` does.
+export default function TrameClientTriggers({ ref, children, ...events }) {
+  useImperativeHandle(
+    ref,
+    () => ({
+      emit: (topic, event) => events[topic]?.(event),
+    }),
+    [events],
+  );
+
+  useEffect(() => {
+    events.created?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    events.mounted?.();
+    return () => {
+      events.beforeDestroy?.();
+      events.beforeUnmount?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    function onExit() {
+      events.exit?.();
+    }
+    window.addEventListener("beforeunload", onExit);
+    return () => window.removeEventListener("beforeunload", onExit);
+  }, [events.exit]);
+
+  return children ?? null;
+}
diff --git a/react-app/src/components/TrameJSEval.jsx b/react-app/src/components/TrameJSEval.jsx
new file mode 100644
index 0000000..9622457
--- /dev/null
+++ b/react-app/src/components/TrameJSEval.jsx
@@ -0,0 +1,19 @@
+import { useImperativeHandle } from "react";
+
+// Port of vue3-app/src/components/TrameExec.js: exposes an imperative
+// `exec(arg)` method (invoked server-side via `server.js_call(ref, "exec",
+// ...)`, dispatched client-side through the generic ref-action mechanism in
+// js-lib's Trame class) - calling it with no argument fires `onExec` with
+// the bound `event` prop's current value, calling it with an argument fires
+// `onExec` with that argument instead.
+export default function TrameJSEval({ event, onExec, ref, children }) {
+  useImperativeHandle(
+    ref,
+    () => ({
+      exec: (arg) => onExec?.(arg === undefined ? event : arg),
+    }),
+    [event, onExec],
+  );
+
+  return children ?? null;
+}
diff --git a/react-app/src/components/TrameLifeCycleMonitor.jsx b/react-app/src/components/TrameLifeCycleMonitor.jsx
new file mode 100644
index 0000000..0793a78
--- /dev/null
+++ b/react-app/src/components/TrameLifeCycleMonitor.jsx
@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+
+const DEFAULT_EVENTS = [
+  "created",
+  "beforeMount",
+  "mounted",
+  "beforeUpdate",
+  "updated",
+  "beforeDestroy",
+  "destroyed",
+];
+
+// Port of vue3-app/src/components/TrameLifeCycleMonitor.js. React function
+// components have no separate before/after hook for mount or destroy (only
+// one commit point each), so - matching how TrameClientTriggers already
+// conflates beforeDestroy/beforeUnmount at its single unmount point -
+// created/beforeMount fire together (synchronously, during first render) and
+// beforeDestroy/destroyed fire together (at unmount cleanup). beforeUpdate/
+// updated fire together on every re-render after the first.
+export default function TrameLifeCycleMonitor({
+  name = "LifeCycleMonitor",
+  type = "log",
+  value = "value",
+  events = DEFAULT_EVENTS,
+  children,
+  ...topicHandlers
+}) {
+  const fire = (topicName) => {
+    if (!events.includes(topicName)) return;
+    if (type === "emit") {
+      topicHandlers[topicName]?.({ name, value });
+    } else {
+      // eslint-disable-next-line no-console
+      console[type]?.(name, topicName, value);
+    }
+  };
+
+  const isFirstRenderRef = useRef(true);
+  if (isFirstRenderRef.current) {
+    isFirstRenderRef.current = false;
+    fire("created");
+    fire("beforeMount");
+  } else {
+    fire("beforeUpdate");
+  }
+
+  // Runs once per actual mount/unmount (never re-runs on prop changes).
+  useEffect(() => {
+    fire("mounted");
+    return () => {
+      fire("beforeDestroy");
+      fire("destroyed");
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Runs after every commit; the first commit is "mounted" (already fired
+  // above), so only count "updated" from the second commit onward.
+  const commitCount = useRef(0);
+  useEffect(() => {
+    commitCount.current += 1;
+    if (commitCount.current > 1) fire("updated");
+  });
+
+  return children ?? null;
+}
diff --git a/react-app/src/components/TrameLoading.jsx b/react-app/src/components/TrameLoading.jsx
new file mode 100644
index 0000000..655c684
--- /dev/null
+++ b/react-app/src/components/TrameLoading.jsx
@@ -0,0 +1,17 @@
+export default function TrameLoading({ message = "Loading..." }) {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        zIndex: 1000,
+      }}
+    >
+      <div className="trame__loader" />
+      <div className="trame__message">{message}</div>
+    </div>
+  );
+}
diff --git a/react-app/src/components/TrameNode.jsx b/react-app/src/components/TrameNode.jsx
new file mode 100644
index 0000000..a9588e0
--- /dev/null
+++ b/react-app/src/components/TrameNode.jsx
@@ -0,0 +1,134 @@
+import { createElement, useMemo, useRef, useSyncExternalStore } from "react";
+import { useTrame } from "../runtime/trameContext";
+import { useResolvedNode } from "../runtime/resolveNode";
+import { createSnapshotCache, evalTracked } from "../runtime/expr";
+import { buildMergedScope } from "../runtime/scope";
+import { resolveTag, isStructuralTag } from "../runtime/tags";
+import { useLiteralChildren } from "../runtime/resolveLiteralChildren";
+
+function isBindLeaf(node) {
+  return node !== null && typeof node === "object" && !Array.isArray(node) && "js" in node;
+}
+
+// A `{js: "..."}` leaf found directly in a `children` array (text
+// interpolation, react-text-interpolation.md) rather than as a node prop:
+// its own small subscription, isolated from whatever sibling nodes surround
+// it, so a change to the expression's inputs re-renders only this leaf.
+function ExprLeaf({ jsExpression, scope }) {
+  const { trame } = useTrame();
+
+  const trackedKeys = useMemo(() => {
+    const merged = buildMergedScope(scope, trame.state);
+    return evalTracked(jsExpression, merged).keys;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [jsExpression, scope, trame.state]);
+
+  const snapshotCacheRef = useRef(null);
+  if (snapshotCacheRef.current === null) snapshotCacheRef.current = createSnapshotCache();
+
+  const value = useSyncExternalStore(
+    (onChange) => trame.state.watch(trackedKeys, onChange),
+    () =>
+      snapshotCacheRef.current(
+        evalTracked(jsExpression, buildMergedScope(scope, trame.state)).value,
+      ),
+  );
+
+  return value;
+}
+
+// Plain function (no hooks): has to run at the PARENT's .map() step, not
+// inside TrameNodeOne, because React needs an element's `key` before that
+// element is even created/mounted.
+function computeNodeKey(node, scope, trame, i) {
+  const keyProp = node?.props?.key;
+  if (keyProp !== null && typeof keyProp === "object" && "js" in keyProp) {
+    return evalTracked(keyProp.js, buildMergedScope(scope, trame.state)).value;
+  }
+  if (keyProp !== undefined) {
+    return keyProp;
+  }
+  return i;
+}
+
+// Builds one <TrameNodeOne> element PER node directly, rather than a single
+// <TrameNode> element wrapping the whole list - used both by the top-level
+// TrameNode component and inline inside TrameNodeOne (below) for a node's
+// own children. Passing the array itself as `children` (instead of one
+// nested <TrameNode>) matters for a parent Component that inspects its own
+// `children` via `React.Children.map`/`toArray` (e.g. MUI's
+// Tabs/RadioGroup/ButtonGroup, which clone each item to inject per-item
+// props like `onClick`/`selected`): with a single wrapper element in the
+// way, React.Children only ever sees that one opaque wrapper, not one
+// element per actual child, so there's nothing distinct to clone.
+function renderNodeList(nodes, scope, trame) {
+  if (nodes == null) return undefined;
+  const list = Array.isArray(nodes) ? nodes : [nodes];
+  return list.map((node, i) => (
+    <TrameNodeOne key={computeNodeKey(node, scope, trame, i)} node={node} scope={scope} />
+  ));
+}
+
+// `createElement(Component, props, childrenArray)` sets `props.children` to
+// that ARRAY even when it holds exactly one element - fine for a host that
+// reads React.Children as a list (the multi-child case renderNodeList's own
+// comment above is about), but not for one that requires its single child to
+// BE an element so it can React.cloneElement/isValidElement it directly (MUI
+// Snackbar/Tooltip wrap their one child this way to attach a transition
+// ref). A real single child stays a real single child; an empty or
+// multi-item list is untouched.
+function unwrapSingle(children) {
+  return Array.isArray(children) && children.length === 1 ? children[0] : children;
+}
+
+function TrameNodeOne({ node, scope, ...extraProps }) {
+  if (typeof node === "string") return node;
+  if (isBindLeaf(node)) return <ExprLeaf jsExpression={node.js} scope={scope} />;
+  if (!node || node.tag === undefined) return null;
+
+  const { trame } = useTrame();
+  const Component = resolveTag(node.tag);
+  const { props } = useResolvedNode(node, scope);
+
+  // A parent may have cloned this very element (React.cloneElement) to graft
+  // its own props onto it - the pattern MUI's Tabs/RadioGroup/ButtonGroup
+  // use on each of their `children` to inject `onClick`/`selected`/`checked`/
+  // etc. React strips `key`/`ref` out before they ever reach here, so
+  // `extraProps` only ever holds genuine DOM/component props, which take
+  // precedence over this node's own resolved ones - matching cloneElement's
+  // own "new props win" semantics. Note this only forwards props FORWARD
+  // (into what actually renders); `child.props.*` read back by the parent
+  // BEFORE cloning still sees this node's `{node, scope}`, not real ones -
+  // components needing that instead (Select's synchronous `child.props.value`
+  // reads) still need `literal_children` (resolveLiteralChildren.js).
+  const mergedProps = { ...props, ...extraProps };
+
+  if (isStructuralTag(node.tag)) {
+    // Structural tags (ReactIf/ReactFor) get their raw, unresolved children +
+    // the current scope as ordinary props - they control WHETHER and with
+    // WHAT EXTENDED SCOPE their children render, which a pre-resolved child
+    // element can't express.
+    return createElement(Component, { ...mergedProps, rawChildren: node.children, scope });
+  }
+
+  // node.literalChildren (react.py's `literal_children` widget flag) is
+  // static per tree position - like node.tag, it never toggles across
+  // re-renders of the same node - so this conditional hook call is safe,
+  // the same assumption the early returns above already make about a node's
+  // shape being stable (see resolveLiteralChildren.js for why this exists).
+  if (node.literalChildren) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const literalChildren = useLiteralChildren(node.children, scope);
+    return createElement(Component, mergedProps, unwrapSingle(literalChildren));
+  }
+
+  const children = node.children?.length
+    ? unwrapSingle(renderNodeList(node.children, scope, trame))
+    : undefined;
+  return createElement(Component, mergedProps, children);
+}
+
+export default function TrameNode({ nodes, scope }) {
+  const { trame } = useTrame();
+  return renderNodeList(nodes, scope, trame) ?? null;
+}
diff --git a/react-app/src/components/TrameReconnect.jsx b/react-app/src/components/TrameReconnect.jsx
new file mode 100644
index 0000000..ffba882
--- /dev/null
+++ b/react-app/src/components/TrameReconnect.jsx
@@ -0,0 +1,97 @@
+import { useEffect, useRef } from "react";
+import { extractURLParameters } from "@kitware/trame";
+
+// Near-verbatim port of vue3-app/src/components/TrameReconnect.js, swapping
+// onMounted/onBeforeUnmount/inject("trame") for useEffect/a `trame` prop
+// (rendered outside of <TrameContext.Provider> - there's no live app tree to
+// provide a context through while disconnected).
+export default function TrameReconnect({
+  trame,
+  onReconnected,
+  message = "Click to reconnect...",
+  maxRetry = 10,
+  delay = 500,
+}) {
+  const retryCount = useRef(0);
+  const interval = useRef(null);
+
+  async function connect() {
+    try {
+      await trame.reconnect();
+      onReconnected?.();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  function resetRetry() {
+    if (interval.current) {
+      clearInterval(interval.current);
+      interval.current = null;
+    }
+  }
+
+  useEffect(() => {
+    retryCount.current = 0;
+    const { reconnect } = extractURLParameters();
+    if (reconnect === "auto") {
+      interval.current = setInterval(() => {
+        if (retryCount.current++ < maxRetry) {
+          connect();
+        } else {
+          resetRetry();
+        }
+      }, delay);
+    }
+    return resetRetry;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        zIndex: 1000,
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "80%",
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-around",
+            textAlign: "center",
+            userSelect: "none",
+            backgroundColor: "#f1f1f1",
+            color: "black",
+            fontSize: "16px",
+            padding: "10px 20px",
+            border: "none",
+            cursor: "pointer",
+            borderRadius: "5px",
+            width: "200px",
+            margin: "10px auto",
+          }}
+          onClick={connect}
+        >
+          <svg style={{ width: 24 }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M4,1C2.89,1 2,1.89 2,3V7C2,8.11 2.89,9 4,9H1V11H13V9H10C11.11,9 12,8.11 12,7V3C12,1.89 11.11,1 10,1H4M4,3H10V7H4V3M14,13C12.89,13 12,13.89 12,15V19C12,20.11 12.89,21 14,21H11V23H23V21H20C21.11,21 22,20.11 22,19V15C22,13.89 21.11,13 20,13H14M3.88,13.46L2.46,14.88L4.59,17L2.46,19.12L3.88,20.54L6,18.41L8.12,20.54L9.54,19.12L7.41,17L9.54,14.88L8.12,13.46L6,15.59L3.88,13.46M14,15H20V19H14V15Z" />
+          </svg>
+          {message}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/react-app/src/components/TrameScript.jsx b/react-app/src/components/TrameScript.jsx
new file mode 100644
index 0000000..214b45d
--- /dev/null
+++ b/react-app/src/components/TrameScript.jsx
@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+// Port of vue3-app/src/components/TrameScript.js: injects/updates a global
+// `<script>` tag from a bound state string, removing it when the content
+// becomes falsy and always on unmount. `type` is only set at creation time,
+// matching the vue original.
+export default function TrameScript({ script, module, children }) {
+  const elRef = useRef(null);
+
+  useEffect(
+    () => () => {
+      elRef.current?.remove();
+      elRef.current = null;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!script) {
+      elRef.current?.remove();
+      elRef.current = null;
+      return;
+    }
+    if (!elRef.current) {
+      elRef.current = document.createElement("script");
+      elRef.current.type = module ? "module" : "text/javascript";
+      document.head.appendChild(elRef.current);
+    }
+    elRef.current.textContent = script;
+  }, [script, module]);
+
+  return children ?? null;
+}
diff --git a/react-app/src/components/TrameSizeObserver.jsx b/react-app/src/components/TrameSizeObserver.jsx
new file mode 100644
index 0000000..6d03aa4
--- /dev/null
+++ b/react-app/src/components/TrameSizeObserver.jsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+import { useTrame } from "../runtime/trameContext";
+
+// Port of vue3-app/src/components/TrameSizeObserver.js: wraps children in a
+// full-size container, observes its own size via ResizeObserver, and writes
+// {x, y, width, height, pixelRatio, dpi} directly into trame state under the
+// bound `name` on every resize (no need to also wire a change-event prop -
+// callers just watch the resulting state key, matching the python side,
+// which never registers a "change" event for this widget either).
+export default function TrameSizeObserver({ name, children }) {
+  const { trame } = useTrame();
+  const elRef = useRef(null);
+
+  useEffect(() => {
+    if (!elRef.current) return undefined;
+
+    const resize = () => {
+      const { x, y, width, height } = elRef.current.getBoundingClientRect();
+      const pixelRatio = window.devicePixelRatio;
+      const dpi = 96 * pixelRatio;
+      const event = { size: { x, y, width, height }, pixelRatio, dpi };
+      if (name) event.name = name;
+      trame.state.set(name, event);
+    };
+
+    const observer = new ResizeObserver(resize);
+    observer.observe(elRef.current);
+    return () => observer.disconnect();
+  }, [name, trame]);
+
+  return (
+    <div
+      ref={elRef}
+      style={{
+        overflow: "hidden",
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        margin: 0,
+        padding: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/react-app/src/components/TrameStyle.jsx b/react-app/src/components/TrameStyle.jsx
new file mode 100644
index 0000000..3bb03df
--- /dev/null
+++ b/react-app/src/components/TrameStyle.jsx
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+// Port of vue3-app/src/components/TrameStyle.js: injects/updates a global
+// `<style>` tag from a bound state string, removing it when the content
+// becomes falsy (mirrors the vue original's create-on-demand/remove-when-
+// empty behavior) and always on unmount.
+export default function TrameStyle({ css, children }) {
+  const elRef = useRef(null);
+
+  useEffect(
+    () => () => {
+      elRef.current?.remove();
+      elRef.current = null;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!css) {
+      elRef.current?.remove();
+      elRef.current = null;
+      return;
+    }
+    if (!elRef.current) {
+      elRef.current = document.createElement("style");
+      document.head.appendChild(elRef.current);
+    }
+    elRef.current.textContent = css;
+  }, [css]);
+
+  return children ?? null;
+}
diff --git a/react-app/src/components/TrameTemplate.jsx b/react-app/src/components/TrameTemplate.jsx
new file mode 100644
index 0000000..a95b77c
--- /dev/null
+++ b/react-app/src/components/TrameTemplate.jsx
@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react";
+import { extractURLParameters } from "@kitware/trame";
+import { useTrame } from "../runtime/trameContext";
+import TrameNode from "./TrameNode.jsx";
+
+// Direct analog of vue3-app/src/components/TrameTemplate.js's default export
+// (not its separate setup() helper, which exists only to build a
+// Vue-instance-reactive API object for Vue's template compiler - no
+// equivalent need here, since TrameNode reads trame.state/scope directly).
+// Simpler than the Vue original precisely because there's no
+// dynamic-component-by-name indirection to replicate: AbstractLayout's
+// flush_content() already puts the JSON tree dict directly into this state key.
+export default function TrameTemplate({ templateName = "main", urlKey = "ui", useUrl = false }) {
+  const { trame } = useTrame();
+  const params = useUrl ? extractURLParameters() : {};
+  const stateKey = `trame__template_${params[urlKey] ?? templateName}`;
+  const tree = useSyncExternalStore(
+    (cb) => trame.state.watch([stateKey], cb),
+    () => trame.state.get(stateKey),
+  );
+  return <TrameNode nodes={tree} scope={undefined} />;
+}
diff --git a/react-app/src/main.jsx b/react-app/src/main.jsx
new file mode 100644
index 0000000..108ba13
--- /dev/null
+++ b/react-app/src/main.jsx
@@ -0,0 +1,120 @@
+import "./style.css";
+
+import React from "react";
+import * as ReactDOMBase from "react-dom";
+import ReactDOM from "react-dom/client";
+
+import { createRoot } from "react-dom/client";
+import Trame, { configDecorator, extractURLParameters } from "@kitware/trame";
+import { handlePageResources } from "./setup";
+import { createMessageChannelWSFactory } from "./messageChannel";
+import TrameApp from "./components/TrameApp.jsx";
+import TrameLoading from "./components/TrameLoading.jsx";
+import TrameReconnect from "./components/TrameReconnect.jsx";
+import { registerTag } from "./runtime/tags";
+
+async function start() {
+  // Check if we need to override websocket
+  try {
+    // Can throw exception if parent is cross-origin
+    if (!window.WSLINK && window?.parent?.trameJupyter?.init) {
+      window.WSLINK = window.parent.trameJupyter.init(window);
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-empty
+  }
+
+  const trame = new Trame(window.WSLINK);
+  // Exposed so third-party react widgets (loaded as separate scripts, no
+  // build-time import access to this app's modules) can reach the live
+  // trame instance and register their own tags against the same registry
+  // TrameNode resolves tags from (runtime/tags.js).
+  window.trame = trame;
+  window.trame.registerTag = registerTag;
+
+  // Expose React
+  window.React = React;
+  window.ReactDOM = { ...ReactDOMBase, ...ReactDOM };
+
+  let config = configDecorator({
+    application: "trame",
+    useUrl: true,
+  });
+
+  // Clean URL params once config is generated
+  const params = new URL(window.location).searchParams;
+  const paramsToClean = [
+    "sessionURL",
+    "sessionManagerURL",
+    "secret",
+    "application",
+    "remove",
+  ].concat(params.get("remove")?.split(",") || []);
+  paramsToClean.forEach((v) => params.delete(v));
+  const cleanURL = `${window.location.pathname}${
+    params.size ? "?" : ""
+  }${params.toString()}${window.location.hash}`;
+  window.history.replaceState({}, document.title, cleanURL);
+
+  const root = createRoot(document.getElementById("app"));
+
+  // Connect client to server. React doesn't need a template round-trip
+  // through state to render arbitrary content before the app tree exists
+  // (unlike the Vue original), so a connect failure renders directly.
+  try {
+    config = await trame.connect(config);
+  } catch (e) {
+    const message = e?.response?.error || "try/catch on connect()";
+    if (config.reconnect) {
+      root.render(<TrameReconnect trame={trame} message={message} />);
+    } else {
+      root.render(<TrameLoading message={message} />);
+    }
+    return;
+  }
+
+  // Forward JS error to Python
+  const _error = console.error;
+  console.error = (...args) => {
+    try {
+      if (trame.client.isConnected()) {
+        trame.client.getRemote().Trame.sendError(args.join(" "));
+      }
+    } catch (e) {
+      _error(e);
+    } finally {
+      _error(...args);
+    }
+  };
+  window.addEventListener("error", (event) =>
+    console.error(`${event.type}: ${event.message}`),
+  );
+
+  // Load resources (js/css)
+  await handlePageResources(trame.state.get());
+
+  root.render(<TrameApp trame={trame} useUrl />);
+}
+
+const urlParams = extractURLParameters();
+
+if (urlParams.wsChannel) {
+  window.addEventListener("message", (event) => {
+    // Waiting for message initializing channel communication
+    // for websocket proxying
+    if (event.data !== "trame-ws-channel-init") {
+      // not for us! skip
+      return;
+    }
+
+    // Grab communication port and register fake WebSocket
+    window.WSLINK = {
+      createWebSocket: createMessageChannelWSFactory(event.ports[0]),
+    };
+
+    // Start trame client
+    start();
+  });
+} else {
+  start();
+}
diff --git a/react-app/src/messageChannel.js b/react-app/src/messageChannel.js
new file mode 100644
index 0000000..a5e893b
--- /dev/null
+++ b/react-app/src/messageChannel.js
@@ -0,0 +1,73 @@
+class MessageChannelWebSocket {
+  constructor(port) {
+    console.log("create MessageChannelWebSocket");
+    this._channel_port = port;
+    this.onmessage = null;
+    this.onclose = null;
+    this.onerror = null;
+
+    // Listen to channel messages
+    this._channel_port.onmessage = (e) => {
+      if (!this.onmessage) return;
+      const { a, b, t } = e.data;
+
+      if (a === "s") {
+        this.onmessage({ data: b || t });
+        return;
+      }
+      if (a === "c" && this.onclose) {
+        this.onclose(e.data.c);
+        return;
+      }
+      if (a === "e" && this.onerror) {
+        this.onerror(e.data.e);
+        return;
+      }
+    };
+  }
+
+  set onopen(callback) {
+    // Auto open but allow current listeners registration to complete before triggering
+    setTimeout(callback, 0);
+  }
+
+  send(data) {
+    console.log("send", data);
+    if (data.buffer) {
+      // may need a copy
+      if (data.buffer.byteLength !== data.length) {
+        const tmp = new Uint8Array(data.length);
+        tmp.set(data);
+        self._channel_port.postMessage(
+          {
+            a: "s",
+            b: tmp.buffer,
+          },
+          [tmp.buffer],
+        );
+        return;
+      }
+      self._channel_port.postMessage(
+        {
+          a: "s",
+          b: data.buffer,
+        },
+        [data.buffer],
+      );
+      return;
+    }
+    self._channel_port.postMessage({
+      a: "s",
+      t: data,
+    });
+  }
+
+  close() {
+    self._channel_port.postMessage({ a: "c", c: "Closing from client" });
+    self._channel_port.close();
+  }
+}
+
+export function createMessageChannelWSFactory(port) {
+  return () => new MessageChannelWebSocket(port);
+}
diff --git a/react-app/src/runtime/expr.js b/react-app/src/runtime/expr.js
new file mode 100644
index 0000000..82887f5
--- /dev/null
+++ b/react-app/src/runtime/expr.js
@@ -0,0 +1,71 @@
+import { hasOwnLocal } from "./scope";
+
+// expression string -> Function, never evicted (finite, server-authored set)
+const compiledCache = new Map();
+
+export function compile(jsExpression) {
+  let fn = compiledCache.get(jsExpression);
+  if (!fn) {
+    // eslint-disable-next-line no-new-func -- same trust model Vue's compiled
+    // templates already accept: expression strings are server/app-author-controlled.
+    fn = new Function("scope", `with (scope) { return (${jsExpression}); }`);
+    compiledCache.set(jsExpression, fn);
+  }
+  return fn;
+}
+
+// Valtio-style dependency tracking via a Proxy: forces every free identifier
+// referenced by the expression through `get`, recording it unless it resolves
+// to a local (For/Slot-introduced) scope variable rather than trame state.
+export function evalTracked(jsExpression, mergedScope) {
+  const tracked = new Set();
+  const proxy = new Proxy(mergedScope, {
+    // Only claims identifiers actually resolvable in mergedScope (a local
+    // frame binding, or an existing trame state key) - anything else (a
+    // real global like `Math`) must fall through to the outer/global scope,
+    // which only happens if `has` says "no" for it.
+    has(target, prop) {
+      return (
+        typeof prop === "string" &&
+        (hasOwnLocal(target, prop) || target[prop] !== undefined)
+      );
+    },
+    get(target, prop) {
+      if (typeof prop === "string" && !hasOwnLocal(target, prop)) {
+        tracked.add(prop);
+      }
+      return target[prop];
+    },
+  });
+  const value = compile(jsExpression)(proxy);
+  return { value, keys: [...tracked] };
+}
+
+// useSyncExternalStore requires getSnapshot() to return a referentially
+// stable value when nothing actually changed (React compares snapshots via
+// Object.is and re-renders - and re-invokes getSnapshot - whenever they
+// differ) - a fresh `Object.fromEntries(...)` on every call would never be
+// Object.is-equal to the previous one, causing an infinite render loop. This
+// caches the last snapshot and reuses its reference whenever every field is
+// still Object.is-equal to what it held before (primitives compare by value
+// so pass through unchanged; object/array-valued fields compare by
+// reference, which is stable as long as the underlying state value wasn't
+// reassigned).
+export function createSnapshotCache() {
+  let cached;
+  return (next) => {
+    if (
+      cached !== undefined &&
+      typeof next === "object" &&
+      next !== null &&
+      typeof cached === "object" &&
+      cached !== null &&
+      Object.keys(cached).length === Object.keys(next).length &&
+      Object.keys(next).every((k) => Object.is(cached[k], next[k]))
+    ) {
+      return cached;
+    }
+    cached = next;
+    return cached;
+  };
+}
diff --git a/react-app/src/runtime/refs.js b/react-app/src/runtime/refs.js
new file mode 100644
index 0000000..8f8dbee
--- /dev/null
+++ b/react-app/src/runtime/refs.js
@@ -0,0 +1,17 @@
+// Instantiated once per `trame` instance (trame.refs is per-connection: a
+// fresh Trame() on reconnect gets a fresh refs map).
+export function createRefRegistry(trame) {
+  const cache = new Map();
+  return function getRefCallback(name) {
+    if (!cache.has(name)) {
+      cache.set(name, (el) => {
+        if (el) trame.refs[name] = el;
+        else {
+          delete trame.refs[name];
+          cache.delete(name);
+        }
+      });
+    }
+    return cache.get(name);
+  };
+}
diff --git a/react-app/src/runtime/resolveLiteralChildren.js b/react-app/src/runtime/resolveLiteralChildren.js
new file mode 100644
index 0000000..9be4b2d
--- /dev/null
+++ b/react-app/src/runtime/resolveLiteralChildren.js
@@ -0,0 +1,154 @@
+import { createElement, useMemo, useRef, useSyncExternalStore } from "react";
+import { useTrame } from "./trameContext";
+import { buildMergedScope } from "./scope";
+import { compile, createSnapshotCache, evalTracked } from "./expr";
+import { resolveTag, isStructuralTag } from "./tags";
+import { classifyProps, makeCallbackHandler } from "./resolveNode";
+// Same TrameNode.jsx <-> runtime cycle resolveNode.js already has for Slot
+// rendering; safe because neither side is touched until render time, well
+// after module evaluation.
+import TrameNode from "../components/TrameNode.jsx";
+
+/*
+ * Support for `node.literalChildren` (set by react.py's `literal_children`
+ * widget flag - trame-mui sets it on Select/Tabs/RadioGroup/...): those
+ * components read `child.props.value` / `child.props.children` straight off
+ * their `children` array via `React.Children`, synchronously, before
+ * anything renders. The usual per-node <TrameNodeOne> wrapper (TrameNode.jsx)
+ * defeats that, since those props would live on the wrapper instead of on a
+ * real `<MenuItem>` element.
+ *
+ * This resolves a node's DIRECT children eagerly into literal elements of
+ * their real component type instead - only one level deep. Each resolved
+ * child's own GRANDchildren still render through the normal <TrameNode>
+ * wrapper and keep their own fine-grained reactivity (see
+ * react-fine-grained-reactivity.md); only the direct children's own props
+ * become one shared subscription (watching the union of every key they
+ * read), since the library only ever inspects that one level.
+ *
+ * react.For/react.If aren't supported as a direct child here - a
+ * dynamically-sized/conditional list of real elements can't come out of a
+ * single eager walk - such a node is skipped with a warning.
+ */
+
+function isBindLeaf(node) {
+  return (
+    node !== null &&
+    typeof node === "object" &&
+    !Array.isArray(node) &&
+    "js" in node
+  );
+}
+
+function walkTrackedKeys(node, mergedScope, keys) {
+  if (!node || typeof node !== "object" || node.tag === undefined) return;
+  if (isStructuralTag(node.tag)) return;
+
+  Object.values(node.props ?? {}).forEach((value) => {
+    if (isBindLeaf(value)) {
+      evalTracked(value.js, mergedScope).keys.forEach((k) => keys.add(k));
+    }
+  });
+}
+
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((k) => Object.is(a[k], b[k]));
+}
+
+// ctx.elementCache/ctx.callbackCache persist (via useRef) across
+// getSnapshot() calls so an unchanged child keeps returning the SAME element
+// reference - required for useSyncExternalStore's "cached snapshot"
+// contract, not just an optimization: a fresh element every call reads as
+// "the store changed" on every render, forcing React into a synchronous
+// re-render loop.
+function resolveLiteralChild(node, ctx, path) {
+  if (typeof node === "string") return node;
+  if (node === null || node === undefined) return null;
+  if (isBindLeaf(node)) return compile(node.js)(ctx.mergedScope);
+  if (node.tag === undefined) return null;
+  if (isStructuralTag(node.tag)) {
+    console.warn(
+      `TrameNode: "${node.tag}" isn't supported as a direct child of a literalChildren node, skipping`,
+    );
+    return null;
+  }
+
+  const Component = resolveTag(node.tag);
+  const { reactive, callbacks, ref, static_ } = classifyProps(node.props);
+
+  const props = Object.fromEntries(static_);
+  reactive.forEach(([key, expr]) => {
+    props[key] = compile(expr)(ctx.mergedScope);
+  });
+  callbacks.forEach(([key, spec]) => {
+    const cacheKey = `${path}#${key}`;
+    const depKey = JSON.stringify(spec);
+    const cached = ctx.callbackCache.get(cacheKey);
+    const handler =
+      cached && cached.depKey === depKey
+        ? cached.handler
+        : makeCallbackHandler(spec, ctx.scope, ctx.trame);
+    ctx.callbackCache.set(cacheKey, { depKey, handler });
+    props[key] = handler;
+  });
+  if (ref) props.ref = ctx.getRefCallback(ref);
+
+  const cached = ctx.elementCache.get(path);
+  if (
+    cached &&
+    cached.type === Component &&
+    shallowEqual(cached.props, props)
+  ) {
+    return cached.element;
+  }
+
+  const children = node.children?.length
+    ? createElement(TrameNode, { nodes: node.children, scope: ctx.scope })
+    : undefined;
+
+  const element = createElement(Component, { ...props, key: path }, children);
+  ctx.elementCache.set(path, { type: Component, props, element });
+  return element;
+}
+
+export function useLiteralChildren(nodes, scope) {
+  const { trame, getRefCallback } = useTrame();
+  const list = Array.isArray(nodes) ? nodes : nodes ? [nodes] : [];
+
+  const trackedKeys = useMemo(() => {
+    const merged = buildMergedScope(scope, trame.state);
+    const keys = new Set();
+    list.forEach((node) => walkTrackedKeys(node, merged, keys));
+    return [...keys];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list, scope, trame.state]);
+
+  const elementCacheRef = useRef(null);
+  if (elementCacheRef.current === null) elementCacheRef.current = new Map();
+  const callbackCacheRef = useRef(null);
+  if (callbackCacheRef.current === null) callbackCacheRef.current = new Map();
+  const snapshotCacheRef = useRef(null);
+  if (snapshotCacheRef.current === null)
+    snapshotCacheRef.current = createSnapshotCache();
+
+  return useSyncExternalStore(
+    (onChange) => trame.state.watch(trackedKeys, onChange),
+    () => {
+      const ctx = {
+        scope,
+        trame,
+        getRefCallback,
+        mergedScope: buildMergedScope(scope, trame.state),
+        elementCache: elementCacheRef.current,
+        callbackCache: callbackCacheRef.current,
+      };
+      return snapshotCacheRef.current(
+        list.map((node, i) => resolveLiteralChild(node, ctx, String(i))),
+      );
+    },
+  );
+}
diff --git a/react-app/src/runtime/resolveNode.js b/react-app/src/runtime/resolveNode.js
new file mode 100644
index 0000000..4aa627a
--- /dev/null
+++ b/react-app/src/runtime/resolveNode.js
@@ -0,0 +1,192 @@
+import { createElement, useMemo, useRef, useSyncExternalStore } from "react";
+import { useTrame } from "./trameContext";
+import { buildMergedScope, extendScope } from "./scope";
+import { compile, createSnapshotCache, evalTracked } from "./expr";
+import TrameNode from "../components/TrameNode.jsx";
+
+// A dict-valued prop (e.g. `style={"color": react.Bind(...)}`, see
+// react.py's HtmlElement._serialize_value) that mixes static entries with
+// nested `{"js": ...}` markers - resolved as a unit below (one composite
+// object per prop) rather than flattened into `reactive`, so its static
+// entries survive untouched alongside the per-key reactive ones.
+function isReactiveLeaf(value) {
+  return value !== null && typeof value === "object" && "js" in value;
+}
+
+// Pure, non-hook classification of node.props - cheap object walk. Ordered
+// by prop KEY first ("ref" is always a plain string, never wrapped), then by
+// VALUE SHAPE (matching react-refs.md §5 / react-scoped-slots.md §4).
+export function classifyProps(props) {
+  const reactive = [];
+  const callbacks = [];
+  const slots = [];
+  const composites = [];
+  const static_ = [];
+  let ref;
+
+  Object.entries(props ?? {}).forEach(([key, value]) => {
+    if (key === "ref") {
+      ref = value;
+      return;
+    }
+    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+      if ("js" in value) {
+        reactive.push([key, value.js]);
+        return;
+      }
+      if ("callback" in value) {
+        callbacks.push([key, value]);
+        return;
+      }
+      if ("slot" in value) {
+        slots.push([key, value.slot]);
+        return;
+      }
+      const reactiveEntries = Object.entries(value).filter(([, v]) =>
+        isReactiveLeaf(v),
+      );
+      if (reactiveEntries.length) {
+        const staticEntries = Object.fromEntries(
+          Object.entries(value).filter(([, v]) => !isReactiveLeaf(v)),
+        );
+        composites.push([key, { static: staticEntries, reactiveEntries }]);
+        return;
+      }
+    }
+    static_.push([key, value]);
+  });
+
+  return { reactive, callbacks, slots, composites, ref, static_ };
+}
+
+const MODIFIER_HANDLERS = {
+  prevent: (e) => e.preventDefault(),
+  stop: (e) => e.stopPropagation(),
+};
+
+export function makeCallbackHandler({ callback, modifiers }, scope, trame) {
+  return (event) => {
+    modifiers?.forEach((m) => MODIFIER_HANDLERS[m]?.(event));
+    const merged = buildMergedScope(
+      extendScope(scope, ["$event"], [event]),
+      trame.state,
+    );
+    if ("js" in callback) {
+      compile(callback.js)(merged);
+      return;
+    }
+    const args = callback.args ? compile(callback.args.js)(merged) : [];
+    const kwargs = callback.kwargs ? compile(callback.kwargs.js)(merged) : {};
+    trame.trigger(callback.trigger, args, kwargs);
+  };
+}
+
+function makeSlotRenderProp({ params, children }, scope) {
+  return (...args) =>
+    createElement(TrameNode, {
+      nodes: children,
+      scope: extendScope(scope, params, args),
+    });
+}
+
+// The ONE hook-call-site per TrameNodeOne instance: always called the same
+// way regardless of node shape (fixed sequence useTrame -> useMemo ->
+// useSyncExternalStore -> useMemo), so it's safe under the Rules of Hooks
+// and batches every reactive prop of a node into a single subscription
+// instead of one per prop.
+export function useResolvedNode(node, scope) {
+  const { trame, getRefCallback } = useTrame();
+
+  const { reactive, callbacks, slots, composites, ref, static_ } =
+    classifyProps(node.props);
+
+  const trackedKeys = useMemo(() => {
+    const merged = buildMergedScope(scope, trame.state);
+    const keys = new Set();
+    reactive.forEach(([, expr]) =>
+      evalTracked(expr, merged).keys.forEach((k) => keys.add(k)),
+    );
+    composites.forEach(([, { reactiveEntries }]) =>
+      reactiveEntries.forEach(([, v]) =>
+        evalTracked(v.js, merged).keys.forEach((k) => keys.add(k)),
+      ),
+    );
+    return [...keys];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reactive, composites, scope, trame.state]);
+
+  const snapshotCacheRef = useRef(null);
+  if (snapshotCacheRef.current === null)
+    snapshotCacheRef.current = createSnapshotCache();
+
+  // One nested cache per composite prop key (e.g. "style"), reused across
+  // calls - a bare `{...staticProps, ...evaluated}` object literal would be a
+  // fresh reference on every getSnapshot() call even when nothing in it
+  // changed, defeating snapshotCacheRef's own Object.is check on that key and
+  // recreating exactly the infinite-render-loop risk createSnapshotCache
+  // above exists to prevent.
+  const compositeCachesRef = useRef(null);
+  if (compositeCachesRef.current === null)
+    compositeCachesRef.current = new Map();
+
+  const reactiveValues = useSyncExternalStore(
+    (onChange) => trame.state.watch(trackedKeys, onChange),
+    () => {
+      const merged = buildMergedScope(scope, trame.state);
+      return snapshotCacheRef.current({
+        ...Object.fromEntries(
+          reactive.map(([key, expr]) => [key, evalTracked(expr, merged).value]),
+        ),
+        ...Object.fromEntries(
+          composites.map(([key, { static: staticProps, reactiveEntries }]) => {
+            let cache = compositeCachesRef.current.get(key);
+            if (!cache) {
+              cache = createSnapshotCache();
+              compositeCachesRef.current.set(key, cache);
+            }
+            return [
+              key,
+              cache({
+                ...staticProps,
+                ...Object.fromEntries(
+                  reactiveEntries.map(([subKey, v]) => [
+                    subKey,
+                    evalTracked(v.js, merged).value,
+                  ]),
+                ),
+              }),
+            ];
+          }),
+        ),
+      });
+    },
+  );
+
+  const callbackDepKey = callbacks
+    .map(([k, v]) => k + JSON.stringify(v))
+    .join("|");
+  const callbackValues = useMemo(
+    () =>
+      Object.fromEntries(
+        callbacks.map(([key, spec]) => [
+          key,
+          makeCallbackHandler(spec, scope, trame),
+        ]),
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [callbackDepKey, scope, trame],
+  );
+
+  const slotValues = Object.fromEntries(
+    slots.map(([key, spec]) => [key, makeSlotRenderProp(spec, scope)]),
+  );
+
+  const props = {
+    ...Object.fromEntries(static_),
+    ...reactiveValues,
+    ...callbackValues,
+    ...slotValues,
+  };
+  if (ref) props.ref = getRefCallback(ref);
+  return { props };
+}
diff --git a/react-app/src/runtime/scope.js b/react-app/src/runtime/scope.js
new file mode 100644
index 0000000..d48cf08
--- /dev/null
+++ b/react-app/src/runtime/scope.js
@@ -0,0 +1,85 @@
+// Object.create-based prototype chain: JS property lookup along a prototype
+// chain already implements "nearest enclosing scope wins, else fall through"
+// for free, and composes directly with the Proxy in expr.js (the proxy wraps
+// the chain head; `target[prop]` triggers the walk automatically). Nesting
+// (For inside For, Slot inside For) is just another Object.create(currentFrame)
+// call - no special nesting logic required.
+
+const STATE_FACADE = { __isStateFacade: true };
+
+export function extendScope(parentScope, names, values) {
+  const frame = Object.create(parentScope ?? STATE_FACADE);
+  names.forEach((name, i) => {
+    frame[name] = values[i];
+  });
+  return frame;
+}
+
+function isFacadeMarker(obj) {
+  return !!obj && Object.prototype.hasOwnProperty.call(obj, "__isStateFacade");
+}
+
+// scope's own chain was already built against the static STATE_FACADE marker
+// at extendScope() time, not a live trameState-backed proxy, so this walks
+// the chain re-rooting the terminal marker onto a fresh, live facade - every
+// intermediate For/Slot frame is preserved along the way (unlike a flat
+// `Object.assign(Object.create(facade), scope)`, which would only copy the
+// OUTERMOST frame's own properties and silently lose everything an enclosing
+// For/Slot introduced further up the chain).
+export function buildMergedScope(scope, trameState) {
+  const facade = new Proxy(STATE_FACADE, {
+    // Only claims identifiers that are actually trame state keys, so a
+    // Callback's `count = ...` writes back to trame state and a Bind's bare
+    // `count` reads it - while still letting `with` fall through to the
+    // REAL global scope for anything else (Number, Math, ...): if `has`
+    // claimed every identifier unconditionally, `with` would never even
+    // consult the outer scope, and `Number(...)` would read as
+    // `trameState.get("Number")` (undefined) instead of the global function.
+    has: (_t, prop) =>
+      prop === "__isStateFacade" || trameState.get(String(prop)) !== undefined,
+    get: (_t, prop) =>
+      prop === "__isStateFacade" ? true : trameState.get(String(prop)),
+    set: (_t, prop, value) => {
+      trameState.set(String(prop), value);
+      return true;
+    },
+  });
+
+  if (!scope) return facade;
+
+  // Object.assign would route through facade's `set` trap instead of
+  // defining an own property (target starts out empty, so the assignment
+  // finds no own property and walks up to facade's inherited setter) -
+  // defineProperty bypasses the prototype chain entirely, so each frame's
+  // own bindings actually land on the rebuilt object instead of leaking
+  // into trame state.
+  const rebase = (frame) => {
+    const parent = Object.getPrototypeOf(frame);
+    const rebasedParent = isFacadeMarker(parent) ? facade : rebase(parent);
+    const next = Object.create(rebasedParent);
+    Object.keys(frame).forEach((key) => {
+      Object.defineProperty(
+        next,
+        key,
+        Object.getOwnPropertyDescriptor(frame, key),
+      );
+    });
+    return next;
+  };
+  return rebase(scope);
+}
+
+// Distinguishes "resolved from a For/Slot-introduced local variable" (not
+// tracked - shadowing, not state) from "resolved from trame state" (tracked,
+// becomes a state.watch dependency). Stops exactly at the facade/sentinel
+// frame itself (checked via hasOwnProperty, since every frame *inherits*
+// `__isStateFacade` from that terminal marker - a plain truthy check would
+// short-circuit on the very first frame, defeating the whole walk).
+export function hasOwnLocal(frame, prop) {
+  let f = frame;
+  while (f && !Object.prototype.hasOwnProperty.call(f, "__isStateFacade")) {
+    if (Object.prototype.hasOwnProperty.call(f, prop)) return true;
+    f = Object.getPrototypeOf(f);
+  }
+  return false;
+}
diff --git a/react-app/src/runtime/tags.js b/react-app/src/runtime/tags.js
new file mode 100644
index 0000000..0e11907
--- /dev/null
+++ b/react-app/src/runtime/tags.js
@@ -0,0 +1,20 @@
+// Flat tag -> component registry. Never imports from `components/` (that
+// would create an import cycle with TrameNode.jsx, which imports this module
+// to resolve tags) - callers register their own components via registerTag()
+// at module load time instead (see components/TrameApp.jsx).
+const registry = {};
+
+export function registerTag(name, Component) {
+  registry[name] = Component;
+}
+
+export function isStructuralTag(tag) {
+  return tag === "ReactIf" || tag === "ReactFor";
+}
+
+export function resolveTag(tag) {
+  if (tag in registry) return registry[tag];
+  if (/^[a-z]/.test(tag)) return tag; // lower-case first char => real DOM host tag
+  console.warn(`TrameNode: unknown tag "${tag}", rendering nothing`);
+  return () => null;
+}
diff --git a/react-app/src/runtime/trameContext.js b/react-app/src/runtime/trameContext.js
new file mode 100644
index 0000000..25d36b5
--- /dev/null
+++ b/react-app/src/runtime/trameContext.js
@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+export const TrameContext = createContext(null);
+
+export function useTrame() {
+  const ctx = useContext(TrameContext);
+  if (!ctx) {
+    throw new Error("useTrame() called outside of a <TrameContext.Provider>");
+  }
+  return ctx;
+}
diff --git a/react-app/src/setup.js b/react-app/src/setup.js
new file mode 100644
index 0000000..ca3ee2e
--- /dev/null
+++ b/react-app/src/setup.js
@@ -0,0 +1,136 @@
+// ----------------------------------------------------------------------------
+// Initialisation helpers
+//   1. trame__styles  : list of url to load as css
+//   2. trame__scripts : list of url to load as scripts
+//   3. trame__favicon : favicon
+//   4. trame__title   : browser tab title
+// ----------------------------------------------------------------------------
+
+import { registerTag } from "./runtime/tags";
+
+var LOADED_URLS = [];
+
+function resolveWithError(resolve, msg) {
+  return () => {
+    console.error(msg);
+    resolve(false);
+  };
+}
+
+export function loadScript(url) {
+  return new Promise(function (resolve, reject) {
+    if (LOADED_URLS.indexOf(url) === -1) {
+      LOADED_URLS.push(url);
+      var newScriptTag = document.createElement("script");
+      newScriptTag.type = "text/javascript";
+      newScriptTag.src = url;
+      newScriptTag.onload = resolve;
+      newScriptTag.onerror = resolveWithError(
+        resolve,
+        `Failed loading script ${url}`,
+      );
+      document.body.appendChild(newScriptTag);
+    } else {
+      resolve(false);
+    }
+  });
+}
+
+export function loadScriptAsModule(url) {
+  return new Promise(function (resolve, reject) {
+    if (LOADED_URLS.indexOf(url) === -1) {
+      LOADED_URLS.push(url);
+      var newScriptTag = document.createElement("script");
+      newScriptTag.type = "module";
+      newScriptTag.src = url;
+      newScriptTag.onload = resolve;
+      newScriptTag.onerror = resolveWithError(
+        resolve,
+        `Failed loading script module ${url}`,
+      );
+      document.body.appendChild(newScriptTag);
+    } else {
+      resolve(false);
+    }
+  });
+}
+
+function loadCSS(url) {
+  return new Promise(function (resolve, reject) {
+    if (LOADED_URLS.indexOf(url) === -1) {
+      LOADED_URLS.push(url);
+      var newScriptTag = document.createElement("link");
+      newScriptTag.rel = "stylesheet";
+      newScriptTag.href = url;
+      newScriptTag.onload = resolve;
+      newScriptTag.onerror = resolveWithError(
+        resolve,
+        `Failed loading css ${url}`,
+      );
+      document.head.appendChild(newScriptTag);
+    } else {
+      resolve(false);
+    }
+  });
+}
+
+async function serialLoad(urls, loadFn) {
+  for (let i = 0; i < urls.length; i++) {
+    /* eslint-disable no-await-in-loop */
+    await loadFn(urls[i]);
+  }
+}
+
+// ----------------------------------------------------------------------------
+
+function loadURLs(urls, loadFn) {
+  const mainGroup = [];
+  const serialGroups = {};
+  for (let i = 0; i < urls.length; i++) {
+    let container = mainGroup;
+    let url = urls[i];
+    if (Array.isArray(url)) {
+      const groupName = url[1].serial;
+      if (groupName) {
+        if (!serialGroups[groupName]) {
+          serialGroups[groupName] = [];
+        }
+        container = serialGroups[groupName];
+      }
+      [url] = url;
+    }
+    container.push(url);
+  }
+
+  const waitList = mainGroup.map(loadFn);
+  const serialScripts = Object.values(serialGroups);
+  for (let i = 0; i < serialScripts.length; i++) {
+    waitList.push(serialLoad(serialScripts[i], loadFn));
+  }
+
+  return Promise.all(waitList);
+}
+
+// ----------------------------------------------------------------------------
+// Resource management (script/css)
+// ----------------------------------------------------------------------------
+
+export async function handlePageResources(state) {
+  await loadURLs(state.trame__styles ?? [], loadCSS);
+  await loadURLs(state.trame__scripts ?? [], loadScript);
+  await loadURLs(state.trame__module_scripts ?? [], loadScriptAsModule);
+
+  (state.trame__react_use ?? []).forEach((name) => {
+    const obj = window[name];
+    console.log("Install react", name, obj);
+    obj?.install?.(registerTag);
+  });
+
+  if (state.trame__favicon) {
+    document.querySelector("link[rel=icon]").href = state.trame__favicon;
+  }
+
+  if (state.trame__title) {
+    document.title = state.trame__title;
+  }
+}
diff --git a/react-app/src/style.css b/react-app/src/style.css
new file mode 100644
index 0000000..b002bdd
--- /dev/null
+++ b/react-app/src/style.css
@@ -0,0 +1,79 @@
+.trame__loader {
+  display: block;
+  position: relative;
+  left: 50%;
+  top: calc(50% - 50px);
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border-radius: 50%;
+  border: 10px solid transparent;
+  border-top-color: #ac262c;
+
+  -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+  animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+.trame__loader:before {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 50%;
+  border: 10px solid transparent;
+  border-top-color: #258e44;
+
+  -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+  animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+.trame__loader:after {
+  content: "";
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+  border-radius: 50%;
+  border: 10px solid transparent;
+  border-top-color: #1c4678;
+
+  -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+  animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+.trame__message {
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  top: calc(50% + 50px);
+  font-size: 200%;
+  user-select: none;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: rotate(0deg); /* IE 9 */
+    transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+  }
+  100% {
+    -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: rotate(360deg); /* IE 9 */
+    transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+  }
+}
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: rotate(0deg); /* IE 9 */
+    transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+  }
+  100% {
+    -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: rotate(360deg); /* IE 9 */
+    transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+  }
+}
diff --git a/react-app/tests/components/ReactFor.test.jsx b/react-app/tests/components/ReactFor.test.jsx
new file mode 100644
index 0000000..2853709
--- /dev/null
+++ b/react-app/tests/components/ReactFor.test.jsx
@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { TrameContext } from "../../src/runtime/trameContext";
+import { createRefRegistry } from "../../src/runtime/refs";
+import { extendScope } from "../../src/runtime/scope";
+import ReactFor from "../../src/components/ReactFor.jsx";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+afterEach(cleanup);
+
+describe("ReactFor", () => {
+  it("isolates each row's own loop variable (row N must not see row N-1's value)", () => {
+    const { trame } = createFakeTrame();
+    const ctx = { trame, getRefCallback: createRefRegistry(trame) };
+    const rawChildren = [{ tag: "li", props: {}, children: [{ js: "row.id" }] }];
+
+    render(
+      <TrameContext.Provider value={ctx}>
+        <ReactFor
+          items={[{ id: "a" }, { id: "b" }, { id: "c" }]}
+          name="row"
+          rawChildren={rawChildren}
+          scope={undefined}
+        />
+      </TrameContext.Provider>,
+    );
+
+    expect(screen.getByText("a")).toBeTruthy();
+    expect(screen.getByText("b")).toBeTruthy();
+    expect(screen.getByText("c")).toBeTruthy();
+  });
+
+  it("nests correctly inside an outer scope (For inside For style composition)", () => {
+    const { trame } = createFakeTrame();
+    const ctx = { trame, getRefCallback: createRefRegistry(trame) };
+    const rawChildren = [
+      { tag: "li", props: {}, children: [{ js: "outer + '-' + row.id" }] },
+    ];
+
+    render(
+      <TrameContext.Provider value={ctx}>
+        <ReactFor
+          items={[{ id: 1 }, { id: 2 }]}
+          name="row"
+          rawChildren={rawChildren}
+          scope={extendScope(undefined, ["outer"], ["group"])}
+        />
+      </TrameContext.Provider>,
+    );
+
+    expect(screen.getByText("group-1")).toBeTruthy();
+    expect(screen.getByText("group-2")).toBeTruthy();
+  });
+});
diff --git a/react-app/tests/components/TrameClientWidgets.test.jsx b/react-app/tests/components/TrameClientWidgets.test.jsx
new file mode 100644
index 0000000..944cf49
--- /dev/null
+++ b/react-app/tests/components/TrameClientWidgets.test.jsx
@@ -0,0 +1,211 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act } from "react";
+import { render, cleanup } from "@testing-library/react";
+import { TrameContext } from "../../src/runtime/trameContext";
+import { createRefRegistry } from "../../src/runtime/refs";
+import TrameJSEval from "../../src/components/TrameJSEval.jsx";
+import TrameStyle from "../../src/components/TrameStyle.jsx";
+import TrameScript from "../../src/components/TrameScript.jsx";
+import TrameClientStateChange from "../../src/components/TrameClientStateChange.jsx";
+import TrameClientTriggers from "../../src/components/TrameClientTriggers.jsx";
+import TrameLifeCycleMonitor from "../../src/components/TrameLifeCycleMonitor.jsx";
+import TrameSizeObserver from "../../src/components/TrameSizeObserver.jsx";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+afterEach(cleanup);
+
+function withContext(trame, node) {
+  const ctx = { trame, getRefCallback: createRefRegistry(trame) };
+  return <TrameContext.Provider value={ctx}>{node}</TrameContext.Provider>;
+}
+
+describe("TrameJSEval", () => {
+  it("exec() with no arg fires onExec with the bound event prop", () => {
+    const onExec = vi.fn();
+    const { trame } = createFakeTrame();
+    const getRefCallback = createRefRegistry(trame);
+    render(
+      withContext(
+        trame,
+        <TrameJSEval ref={getRefCallback("myExec")} event="hello" onExec={onExec} />,
+      ),
+    );
+
+    trame.refs.myExec.exec();
+    expect(onExec).toHaveBeenCalledWith("hello");
+  });
+
+  it("exec(arg) fires onExec with arg instead of the bound event prop", () => {
+    const onExec = vi.fn();
+    const { trame } = createFakeTrame();
+    const getRefCallback = createRefRegistry(trame);
+    render(
+      withContext(
+        trame,
+        <TrameJSEval ref={getRefCallback("myExec")} event="hello" onExec={onExec} />,
+      ),
+    );
+
+    trame.refs.myExec.exec("world");
+    expect(onExec).toHaveBeenCalledWith("world");
+  });
+});
+
+describe("TrameStyle", () => {
+  it("injects a <style> tag with the bound css and removes it when cleared", () => {
+    const { trame } = createFakeTrame();
+    const { rerender } = render(
+      withContext(trame, <TrameStyle css="body { color: red; }" />),
+    );
+
+    let styleEl = document.head.querySelector("style");
+    expect(styleEl.textContent).toBe("body { color: red; }");
+
+    rerender(withContext(trame, <TrameStyle css="" />));
+    styleEl = document.head.querySelector("style");
+    expect(styleEl).toBeNull();
+  });
+});
+
+describe("TrameScript", () => {
+  it("injects a <script> tag with the bound content and type", () => {
+    const { trame } = createFakeTrame();
+    render(withContext(trame, <TrameScript script="console.log(1)" module />));
+
+    const scriptEl = document.head.querySelector("script");
+    expect(scriptEl.textContent).toBe("console.log(1)");
+    expect(scriptEl.type).toBe("module");
+  });
+});
+
+describe("TrameClientStateChange", () => {
+  it("fires onChange when value changes, not on mount by default", () => {
+    const onChange = vi.fn();
+    const { trame } = createFakeTrame();
+    const { rerender } = render(
+      withContext(trame, <TrameClientStateChange value={1} onChange={onChange} />),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(withContext(trame, <TrameClientStateChange value={2} onChange={onChange} />));
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  it("triggerChangeOnCreate fires onChange once on mount", () => {
+    const onChange = vi.fn();
+    const { trame } = createFakeTrame();
+    render(
+      withContext(
+        trame,
+        <TrameClientStateChange value={1} triggerChangeOnCreate onChange={onChange} />,
+      ),
+    );
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+});
+
+describe("TrameClientTriggers", () => {
+  it("fires created/beforeMount synchronously and mounted after commit", () => {
+    const created = vi.fn();
+    const mounted = vi.fn();
+    const { trame } = createFakeTrame();
+    const getRefCallback = createRefRegistry(trame);
+    render(
+      withContext(
+        trame,
+        <TrameClientTriggers ref={getRefCallback("trig")} created={created} mounted={mounted} />,
+      ),
+    );
+
+    expect(created).toHaveBeenCalled();
+    expect(mounted).toHaveBeenCalled();
+  });
+
+  it("fires beforeDestroy/beforeUnmount on unmount", () => {
+    const beforeDestroy = vi.fn();
+    const beforeUnmount = vi.fn();
+    const { trame } = createFakeTrame();
+    const getRefCallback = createRefRegistry(trame);
+    const { unmount } = render(
+      withContext(
+        trame,
+        <TrameClientTriggers
+          ref={getRefCallback("trig")}
+          beforeDestroy={beforeDestroy}
+          beforeUnmount={beforeUnmount}
+        />,
+      ),
+    );
+    unmount();
+    expect(beforeDestroy).toHaveBeenCalled();
+    expect(beforeUnmount).toHaveBeenCalled();
+  });
+
+  it("server-triggered emit(topic, event) dispatches to any custom event by name", () => {
+    const myCustomEvent = vi.fn();
+    const { trame } = createFakeTrame();
+    const getRefCallback = createRefRegistry(trame);
+    render(
+      withContext(
+        trame,
+        <TrameClientTriggers ref={getRefCallback("trig")} myCustomEvent={myCustomEvent} />,
+      ),
+    );
+
+    trame.refs.trig.emit("myCustomEvent", "payload");
+    expect(myCustomEvent).toHaveBeenCalledWith("payload");
+  });
+});
+
+describe("TrameLifeCycleMonitor", () => {
+  it("logs created/beforeMount/mounted on first render, then beforeUpdate/updated on re-render", () => {
+    const spy = vi.spyOn(console, "log").mockImplementation(() => {});
+    const { trame } = createFakeTrame();
+    const { rerender } = render(
+      withContext(trame, <TrameLifeCycleMonitor name="mon" value="v1" />),
+    );
+
+    expect(spy.mock.calls.map((c) => c[1])).toEqual(["created", "beforeMount", "mounted"]);
+    spy.mockClear();
+
+    rerender(withContext(trame, <TrameLifeCycleMonitor name="mon" value="v2" />));
+    expect(spy.mock.calls.map((c) => c[1])).toEqual(["beforeUpdate", "updated"]);
+
+    spy.mockRestore();
+  });
+
+  it("logs beforeDestroy/destroyed on unmount", () => {
+    const spy = vi.spyOn(console, "log").mockImplementation(() => {});
+    const { trame } = createFakeTrame();
+    const { unmount } = render(withContext(trame, <TrameLifeCycleMonitor name="mon" />));
+    spy.mockClear();
+
+    unmount();
+    expect(spy.mock.calls.map((c) => c[1])).toEqual(["beforeDestroy", "destroyed"]);
+    spy.mockRestore();
+  });
+});
+
+describe("TrameSizeObserver", () => {
+  it("writes {size, pixelRatio, dpi} into trame state on resize", () => {
+    let resizeCallback;
+    const originalRO = window.ResizeObserver;
+    window.ResizeObserver = class {
+      constructor(cb) {
+        resizeCallback = cb;
+      }
+      observe() {}
+      disconnect() {}
+    };
+
+    const { trame } = createFakeTrame();
+    render(withContext(trame, <TrameSizeObserver name="mySize" />));
+
+    act(() => resizeCallback());
+    expect(trame.state.get("mySize").name).toBe("mySize");
+    expect(trame.state.get("mySize").size).toBeDefined();
+    expect(trame.state.get("mySize").dpi).toBeDefined();
+
+    window.ResizeObserver = originalRO;
+  });
+});
diff --git a/react-app/tests/components/TrameNode.test.jsx b/react-app/tests/components/TrameNode.test.jsx
new file mode 100644
index 0000000..be53c23
--- /dev/null
+++ b/react-app/tests/components/TrameNode.test.jsx
@@ -0,0 +1,125 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, Children, cloneElement } from "react";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+import { TrameContext } from "../../src/runtime/trameContext";
+import { createRefRegistry } from "../../src/runtime/refs";
+import { registerTag } from "../../src/runtime/tags";
+import TrameNode from "../../src/components/TrameNode.jsx";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+afterEach(cleanup);
+
+function renderTree(nodes, trame, scope) {
+  const ctx = { trame, getRefCallback: createRefRegistry(trame) };
+  return render(
+    <TrameContext.Provider value={ctx}>
+      <TrameNode nodes={nodes} scope={scope} />
+    </TrameContext.Provider>,
+  );
+}
+
+describe("TrameNode", () => {
+  it("renders a {tag, props, children} tree to the expected DOM", () => {
+    const { trame } = createFakeTrame();
+    renderTree({ tag: "div", props: { className: "x" }, children: ["hi"] }, trame);
+
+    const el = screen.getByText("hi");
+    expect(el.tagName).toBe("DIV");
+    expect(el.className).toBe("x");
+  });
+
+  it("a {js: ...} child re-renders only when the state it reads changes", () => {
+    const { trame, setState } = createFakeTrame({ count: 1, other: "a" });
+    const renderSpy = vi.fn();
+
+    function Wrapper() {
+      renderSpy();
+      return <TrameNode nodes={{ js: "count" }} />;
+    }
+
+    const ctx = { trame, getRefCallback: createRefRegistry(trame) };
+    render(
+      <TrameContext.Provider value={ctx}>
+        <Wrapper />
+      </TrameContext.Provider>,
+    );
+
+    expect(screen.getByText("1")).toBeTruthy();
+    renderSpy.mockClear();
+
+    act(() => setState({ other: "b" }));
+    expect(renderSpy).not.toHaveBeenCalled();
+
+    act(() => setState({ count: 2 }));
+    expect(screen.getByText("2")).toBeTruthy();
+  });
+
+  it("a style prop mixing static values with a {js: ...} entry resolves both and reacts to state changes", () => {
+    const { trame, setState } = createFakeTrame({ color: "red" });
+    renderTree(
+      {
+        tag: "div",
+        props: {
+          style: { fontWeight: "bold", color: { js: "color" } },
+        },
+        children: ["hi"],
+      },
+      trame,
+    );
+
+    const el = screen.getByText("hi");
+    expect(el.style.fontWeight).toBe("bold");
+    expect(el.style.color).toBe("red");
+
+    act(() => setState({ color: "blue" }));
+    expect(el.style.color).toBe("blue");
+    expect(el.style.fontWeight).toBe("bold");
+  });
+
+  it("ref='name' populates trame.refs.name on mount, removes it on unmount", () => {
+    const { trame } = createFakeTrame();
+    const { unmount } = renderTree(
+      { tag: "div", props: { ref: "myRef" }, children: [] },
+      trame,
+    );
+
+    expect(trame.refs.myRef).toBeTruthy();
+    expect(trame.refs.myRef.tagName).toBe("DIV");
+
+    unmount();
+    expect(trame.refs.myRef).toBeUndefined();
+  });
+
+  it("forwards props a parent injects via cloneElement onto a wrapped child's real element", () => {
+    // Mimics MUI compound components (Tabs/RadioGroup/ButtonGroup/...) that
+    // clone each of their `children` to graft on props like `onClick` -
+    // without needing literal_children, since this one doesn't read anything
+    // off `child.props` before cloning (contrast with resolveLiteralChildren
+    // .test.jsx's FakeSelect, which does and so still needs that flag).
+    function FakeGroup({ children }) {
+      return (
+        <div data-testid="group">
+          {Children.map(children, (child) => cloneElement(child, { extra: "injected" }))}
+        </div>
+      );
+    }
+    function FakeItem({ label, extra }) {
+      return <div data-testid="item">{label}-{extra}</div>;
+    }
+    registerTag("fake-group", FakeGroup);
+    registerTag("fake-item", FakeItem);
+
+    const { trame } = createFakeTrame();
+    renderTree(
+      {
+        tag: "fake-group",
+        props: {},
+        children: [{ tag: "fake-item", props: { label: "a" }, children: [] }],
+      },
+      trame,
+    );
+
+    expect(screen.getByTestId("item").textContent).toBe("a-injected");
+  });
+});
diff --git a/react-app/tests/helpers/fakeTrame.js b/react-app/tests/helpers/fakeTrame.js
new file mode 100644
index 0000000..da4f706
--- /dev/null
+++ b/react-app/tests/helpers/fakeTrame.js
@@ -0,0 +1,50 @@
+import { vi } from "vitest";
+
+/**
+ * Minimal fake `trame` object exposing only what react-app's runtime touches
+ * (`trame.state.get`/`.watch`, `trame.refs`, `trame.trigger`) - mirrors real
+ * `State.watch` behavior (js-lib/src/state.ts): calling the watcher
+ * immediately with current values on subscribe, and again whenever one of
+ * its watched keys changes.
+ */
+export function createFakeTrame(initialState = {}) {
+  const state = { ...initialState };
+  const watchers = [];
+
+  function notify(changedKeys) {
+    watchers.forEach(({ keys, fn }) => {
+      if (changedKeys.some((k) => keys.has(k))) fn();
+    });
+  }
+
+  const trameState = {
+    get: (key) => (key === undefined ? state : state[key]),
+    set: (key, value) => {
+      state[key] = value;
+      notify([key]);
+    },
+    watch: (keys, fn) => {
+      const entry = { keys: new Set(keys), fn };
+      watchers.push(entry);
+      fn(...keys.map((k) => state[k]));
+      return () => {
+        const idx = watchers.indexOf(entry);
+        if (idx >= 0) watchers.splice(idx, 1);
+      };
+    },
+  };
+
+  const trame = {
+    state: trameState,
+    refs: {},
+    trigger: vi.fn(),
+  };
+
+  return {
+    trame,
+    setState(partial) {
+      Object.assign(state, partial);
+      notify(Object.keys(partial));
+    },
+  };
+}
diff --git a/react-app/tests/runtime/expr.test.js b/react-app/tests/runtime/expr.test.js
new file mode 100644
index 0000000..d493b66
--- /dev/null
+++ b/react-app/tests/runtime/expr.test.js
@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from "vitest";
+import { compile, evalTracked } from "../../src/runtime/expr";
+import { extendScope, buildMergedScope } from "../../src/runtime/scope";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+describe("compile", () => {
+  it("reuses the cached Function for the same expression string", () => {
+    const fn1 = compile("1 + 1");
+    const fn2 = compile("1 + 1");
+    expect(fn1).toBe(fn2);
+  });
+
+  it("compiles distinct expression strings to distinct functions", () => {
+    const fn1 = compile("1 + 1");
+    const fn2 = compile("2 + 2");
+    expect(fn1).not.toBe(fn2);
+  });
+});
+
+describe("evalTracked", () => {
+  it("evaluates the expression against the merged scope", () => {
+    const { trame } = createFakeTrame({ count: 5 });
+    const merged = buildMergedScope(undefined, trame.state);
+    const { value } = evalTracked("count + 1", merged);
+    expect(value).toBe(6);
+  });
+
+  it("records only identifiers actually read", () => {
+    const { trame } = createFakeTrame({ a: 1, b: 2, c: 3 });
+    const merged = buildMergedScope(undefined, trame.state);
+    const { keys } = evalTracked("a + b", merged);
+    expect(keys.sort()).toEqual(["a", "b"]);
+  });
+
+  it("a ternary only tracks its taken branch", () => {
+    const { trame } = createFakeTrame({ mode: "a", x: 1, y: 2 });
+    const merged = buildMergedScope(undefined, trame.state);
+    const { keys } = evalTracked('mode === "a" ? x : y', merged);
+    expect(keys.sort()).toEqual(["mode", "x"]);
+  });
+
+  it("a scope-chain local shadowing a same-named state key is never tracked as a state dependency", () => {
+    const { trame } = createFakeTrame({ count: 100 });
+    const scope = extendScope(undefined, ["count"], ["local-value"]);
+    const merged = buildMergedScope(scope, trame.state);
+    const { value, keys } = evalTracked("count", merged);
+
+    expect(value).toBe("local-value");
+    expect(keys).toEqual([]);
+  });
+
+  it("state.watch only fires for keys the expression actually reads", () => {
+    const { trame, setState } = createFakeTrame({ a: 1, b: 2 });
+    const merged = buildMergedScope(undefined, trame.state);
+    const { keys } = evalTracked("a", merged);
+
+    const onChange = vi.fn();
+    trame.state.watch(keys, onChange);
+    onChange.mockClear();
+
+    setState({ b: 20 });
+    expect(onChange).not.toHaveBeenCalled();
+
+    setState({ a: 10 });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/react-app/tests/runtime/resolveLiteralChildren.test.jsx b/react-app/tests/runtime/resolveLiteralChildren.test.jsx
new file mode 100644
index 0000000..6f78cc0
--- /dev/null
+++ b/react-app/tests/runtime/resolveLiteralChildren.test.jsx
@@ -0,0 +1,111 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { act } from "react";
+import { Children, cloneElement } from "react";
+import { render, screen, cleanup } from "@testing-library/react";
+import { TrameContext } from "../../src/runtime/trameContext";
+import { createRefRegistry } from "../../src/runtime/refs";
+import { registerTag } from "../../src/runtime/tags";
+import TrameNode from "../../src/components/TrameNode.jsx";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+afterEach(cleanup);
+
+// Mimics MUI's SelectInput closely enough to exercise the bug this module
+// fixes: it reads `child.props.value` / `child.props.children` straight off
+// its `children` array via `Children.toArray`, before anything renders, and
+// re-attaches its own `onClick` via `cloneElement` - both only work if
+// `children` are real <FakeMenuItem> elements, not a wrapper component.
+function FakeSelect({ value, onSelect, children }) {
+  const renderSpy = FakeSelect.renderSpy;
+  renderSpy?.();
+  const items = Children.toArray(children);
+  const selected = items.find((child) => child.props.value === value);
+  return (
+    <div data-testid="fake-select">
+      {/* Rendered the way MUI's real SelectInput renders its computed
+          `display` value - `child.props.children` isn't necessarily a plain
+          string (grandchildren still go through the normal <TrameNode>
+          wrapper, see resolveLiteralChildren.js), so it has to be rendered,
+          not read as a string. */}
+      <div data-testid="fake-select-display">{selected?.props.children}</div>
+      {items.map((child) =>
+        cloneElement(child, { onClick: () => onSelect(child.props.value) }),
+      )}
+    </div>
+  );
+}
+
+function FakeMenuItem({ value, onClick, children }) {
+  return (
+    <div role="option" data-value={value} onClick={onClick}>
+      {children}
+    </div>
+  );
+}
+
+registerTag("fake-select", FakeSelect);
+registerTag("fake-menu-item", FakeMenuItem);
+
+function selectTree(valueExpr) {
+  return {
+    tag: "fake-select",
+    props: {
+      value: { js: valueExpr },
+      onSelect: { callback: { trigger: "onSelect", args: { js: "[$event]" } } },
+    },
+    literalChildren: true,
+    children: [
+      { tag: "fake-menu-item", props: { value: "vanilla" }, children: ["Vanilla"] },
+      { tag: "fake-menu-item", props: { value: "chocolate" }, children: ["Chocolate"] },
+    ],
+  };
+}
+
+function renderTree(nodes, trame, scope) {
+  const ctx = { trame, getRefCallback: createRefRegistry(trame) };
+  return render(
+    <TrameContext.Provider value={ctx}>
+      <TrameNode nodes={nodes} scope={scope} />
+    </TrameContext.Provider>,
+  );
+}
+
+describe("literalChildren", () => {
+  it("gives a React.Children-inspecting parent real elements with real props", () => {
+    const { trame } = createFakeTrame({ flavor: "vanilla" });
+    renderTree(selectTree("flavor"), trame);
+
+    expect(screen.getByTestId("fake-select-display").textContent).toBe("Vanilla");
+    expect(screen.getAllByRole("option")).toHaveLength(2);
+  });
+
+  it("clicking a cloned item's onClick still reaches the python trigger", () => {
+    const { trame } = createFakeTrame({ flavor: "vanilla" });
+    renderTree(selectTree("flavor"), trame);
+
+    screen.getByText("Chocolate").click();
+
+    expect(trame.trigger).toHaveBeenCalledWith("onSelect", ["chocolate"], {});
+  });
+
+  it("re-renders with the new selection when trame state changes", () => {
+    const { trame, setState } = createFakeTrame({ flavor: "vanilla" });
+    renderTree(selectTree("flavor"), trame);
+
+    act(() => setState({ flavor: "chocolate" }));
+
+    expect(screen.getByTestId("fake-select-display").textContent).toBe("Chocolate");
+  });
+
+  it("does not re-render when an untracked state key changes", () => {
+    const { trame, setState } = createFakeTrame({ flavor: "vanilla", other: "a" });
+    FakeSelect.renderSpy = vi.fn();
+    renderTree(selectTree("flavor"), trame);
+    FakeSelect.renderSpy.mockClear();
+
+    act(() => setState({ other: "b" }));
+
+    expect(FakeSelect.renderSpy).not.toHaveBeenCalled();
+    FakeSelect.renderSpy = undefined;
+  });
+});
diff --git a/react-app/tests/runtime/resolveNode.test.js b/react-app/tests/runtime/resolveNode.test.js
new file mode 100644
index 0000000..84a5444
--- /dev/null
+++ b/react-app/tests/runtime/resolveNode.test.js
@@ -0,0 +1,104 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  classifyProps,
+  makeCallbackHandler,
+} from "../../src/runtime/resolveNode";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+describe("classifyProps", () => {
+  it("splits a dict-valued prop mixing static entries with {js: ...} leaves into `composites`, leaving other props alone", () => {
+    const { reactive, composites, static_ } = classifyProps({
+      style: { fontWeight: "bold", color: { js: "color" } },
+      title: "hi",
+      value: { js: "count" },
+    });
+
+    expect(reactive).toEqual([["value", "count"]]);
+    expect(static_).toEqual([["title", "hi"]]);
+    expect(composites).toEqual([
+      [
+        "style",
+        {
+          static: { fontWeight: "bold" },
+          reactiveEntries: [["color", { js: "color" }]],
+        },
+      ],
+    ]);
+  });
+
+  it("treats a fully-static dict-valued prop as static, not a composite", () => {
+    const { composites, static_ } = classifyProps({
+      style: { fontWeight: "bold", color: "red" },
+    });
+
+    expect(composites).toEqual([]);
+    expect(static_).toEqual([["style", { fontWeight: "bold", color: "red" }]]);
+  });
+});
+
+function fakeEvent(value) {
+  return {
+    target: { value },
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+  };
+}
+
+describe("makeCallbackHandler", () => {
+  it("calls trame.trigger with correctly-evaluated args/kwargs", () => {
+    const { trame } = createFakeTrame();
+    const handler = makeCallbackHandler(
+      { callback: { trigger: "foo", args: { js: "[$event.target.value]" } } },
+      undefined,
+      trame,
+    );
+
+    handler(fakeEvent("hello"));
+
+    expect(trame.trigger).toHaveBeenCalledWith("foo", ["hello"], {});
+  });
+
+  it("evaluates a plain js callback expression against the merged scope", () => {
+    const { trame, setState } = createFakeTrame({ count: 1 });
+    const handler = makeCallbackHandler(
+      { callback: { js: "count = Number($event.target.value)" } },
+      undefined,
+      trame,
+    );
+
+    handler(fakeEvent("7"));
+
+    expect(trame.state.get("count")).toBe(7);
+    // sanity: setState helper still works independently of the handler
+    setState({ count: 9 });
+    expect(trame.state.get("count")).toBe(9);
+  });
+
+  it("modifiers:['prevent'] calls event.preventDefault()", () => {
+    const { trame } = createFakeTrame();
+    const handler = makeCallbackHandler(
+      { callback: { trigger: "foo" }, modifiers: ["prevent"] },
+      undefined,
+      trame,
+    );
+    const event = fakeEvent();
+
+    handler(event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("modifiers:['stop'] calls event.stopPropagation()", () => {
+    const { trame } = createFakeTrame();
+    const handler = makeCallbackHandler(
+      { callback: { trigger: "foo" }, modifiers: ["stop"] },
+      undefined,
+      trame,
+    );
+    const event = fakeEvent();
+
+    handler(event);
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+  });
+});
diff --git a/react-app/tests/runtime/scope.test.js b/react-app/tests/runtime/scope.test.js
new file mode 100644
index 0000000..b3577e8
--- /dev/null
+++ b/react-app/tests/runtime/scope.test.js
@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import {
+  extendScope,
+  buildMergedScope,
+  hasOwnLocal,
+} from "../../src/runtime/scope";
+import { createFakeTrame } from "../helpers/fakeTrame";
+
+describe("scope", () => {
+  it("extendScope nesting (For inside For) preserves shadowing", () => {
+    const outer = extendScope(undefined, ["item"], ["outer-item"]);
+    const inner = extendScope(outer, ["item"], ["inner-item"]);
+
+    expect(inner.item).toBe("inner-item");
+    expect(outer.item).toBe("outer-item");
+  });
+
+  it("extendScope nesting (Slot inside For) preserves shadowing", () => {
+    const forScope = extendScope(undefined, ["row"], [{ id: 1 }]);
+    const slotScope = extendScope(forScope, ["cell"], ["cell-value"]);
+
+    expect(slotScope.cell).toBe("cell-value");
+    expect(slotScope.row).toEqual({ id: 1 });
+  });
+
+  it("hasOwnLocal finds a local scope variable and stops at the state facade sentinel", () => {
+    const { trame } = createFakeTrame({ count: 1 });
+    const scope = extendScope(undefined, ["count"], ["shadowed"]);
+    const merged = buildMergedScope(scope, trame.state);
+
+    expect(hasOwnLocal(merged, "count")).toBe(true);
+    expect(hasOwnLocal(merged, "somethingElse")).toBe(false);
+  });
+
+  it("buildMergedScope falls back to trame state for names not in the local chain", () => {
+    const { trame } = createFakeTrame({ count: 42 });
+    const merged = buildMergedScope(undefined, trame.state);
+
+    expect(merged.count).toBe(42);
+  });
+
+  it("a scope-chain local shadowing a same-named state key wins over state", () => {
+    const { trame } = createFakeTrame({ count: 1 });
+    const scope = extendScope(undefined, ["count"], ["shadowed"]);
+    const merged = buildMergedScope(scope, trame.state);
+
+    expect(merged.count).toBe("shadowed");
+  });
+
+  it("buildMergedScope preserves an outer For's loop variable through a nested Slot frame", () => {
+    const { trame } = createFakeTrame({ count: 1 });
+    const forScope = extendScope(undefined, ["row"], [{ id: 7 }]);
+    const slotScope = extendScope(forScope, ["cell"], ["cell-value"]);
+    const merged = buildMergedScope(slotScope, trame.state);
+
+    expect(merged.cell).toBe("cell-value");
+    expect(merged.row).toEqual({ id: 7 });
+    expect(merged.count).toBe(1);
+  });
+
+  it("hasOwnLocal detects an outer For's loop variable through a nested Slot frame", () => {
+    const { trame } = createFakeTrame({ count: 1 });
+    const forScope = extendScope(undefined, ["row"], [{ id: 7 }]);
+    const slotScope = extendScope(forScope, ["cell"], ["cell-value"]);
+    const merged = buildMergedScope(slotScope, trame.state);
+
+    expect(hasOwnLocal(merged, "row")).toBe(true);
+    expect(hasOwnLocal(merged, "cell")).toBe(true);
+    expect(hasOwnLocal(merged, "count")).toBe(false);
+  });
+});
diff --git a/react-app/vite.config.js b/react-app/vite.config.js
new file mode 100644
index 0000000..3245f50
--- /dev/null
+++ b/react-app/vite.config.js
@@ -0,0 +1,9 @@
+import react from "@vitejs/plugin-react";
+
+export default {
+  base: "./",
+  plugins: [react()],
+  build: {
+    outDir: "../src/trame_client/module/react-www",
+  },
+};
diff --git a/react-app/vitest.config.js b/react-app/vitest.config.js
new file mode 100644
index 0000000..0aece33
--- /dev/null
+++ b/react-app/vitest.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    include: ["tests/**/*.test.{js,jsx}"],
+  },
+});
diff --git a/src/trame/widgets/client.py b/src/trame/widgets/client.py
index 620ce7d..30b56a6 100644
--- a/src/trame/widgets/client.py
+++ b/src/trame/widgets/client.py
@@ -1,4 +1,4 @@
-from trame_client.widgets.trame import *  # noqa F403
+from trame_client.widgets.client import *  # noqa F403
 
 
 def initialize(server):
diff --git a/src/trame/widgets/react.py b/src/trame/widgets/react.py
new file mode 100644
index 0000000..01d8d2e
--- /dev/null
+++ b/src/trame/widgets/react.py
@@ -0,0 +1,5 @@
+from trame_client.widgets.react import *  # noqa F403
+
+
+def initialize(server):
+    pass
diff --git a/src/trame_client/module/.gitignore b/src/trame_client/module/.gitignore
index a2c09b1..9cc907b 100644
--- a/src/trame_client/module/.gitignore
+++ b/src/trame_client/module/.gitignore
@@ -1,3 +1,4 @@
 www
 vue2-www
 vue3-www
+react-www
diff --git a/src/trame_client/module/__init__.py b/src/trame_client/module/__init__.py
index f38b501..cb9d08c 100644
--- a/src/trame_client/module/__init__.py
+++ b/src/trame_client/module/__init__.py
@@ -50,6 +50,11 @@ def setup(server, **kargs):
 
         server.enable_module(vue3)
         setup_handler_module(server)
+    elif client_type == "react":
+        from . import react
+
+        server.enable_module(react)
+        setup_handler_module(server)
     else:
         raise TypeError(
             f"Trying to initialize trame_client with unknown client_type={client_type}"
diff --git a/src/trame_client/module/react.py b/src/trame_client/module/react.py
new file mode 100644
index 0000000..a1e9203
--- /dev/null
+++ b/src/trame_client/module/react.py
@@ -0,0 +1,3 @@
+from pathlib import Path
+
+www = str(Path(__file__).with_name("react-www").resolve())
diff --git a/src/trame_client/resources/events.json b/src/trame_client/resources/events.json
deleted file mode 100644
index 0967ef4..0000000
--- a/src/trame_client/resources/events.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/src/trame_client/resources/vue.json b/src/trame_client/resources/vue.json
deleted file mode 100644
index 857d121..0000000
--- a/src/trame_client/resources/vue.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "events": {
-    "*": [
-      "click",
-      "mousedown",
-      "mouseup",
-      "mouseenter",
-      "mouseleave",
-      "contextmenu"
-    ]
-  },
-  "attributes": {
-    "*": [
-      "ref",
-      ["key", ":key"],
-      ["v_on", "v-on"],
-      ["v_bind", "v-bind"],
-      "v_text",
-      "v_html",
-      "v_show",
-      "v_if",
-      "v_else",
-      "v_else_if",
-      "v_for",
-      "v_model",
-      "v_pre",
-      "v_once",
-      "v_memo",
-      "v_cloak"
-    ]
-  }
-}
diff --git a/src/trame_client/utils/testing.py b/src/trame_client/utils/testing.py
index c71d88b..479933b 100644
--- a/src/trame_client/utils/testing.py
+++ b/src/trame_client/utils/testing.py
@@ -1,5 +1,6 @@
 import json
 import sys
+import time
 from pathlib import Path
 from xprocess import ProcessStarter
 from PIL import Image
@@ -42,6 +43,26 @@ def get(self, name):
         self.update()
         return self._last_state.get(name)
 
+    def wait_for(
+        self, name, predicate=lambda value: value is not None, timeout=5, interval=0.1
+    ):
+        """Poll the server state log until `predicate(value)` is truthy.
+
+        Useful for state that is written asynchronously (e.g. after a
+        browser-side ResizeObserver round-trip) and can't be awaited via a
+        DOM-based `expect(...)`.
+        """
+        deadline = time.time() + timeout
+        value = self.get(name)
+        while not predicate(value):
+            if time.time() >= deadline:
+                raise AssertionError(
+                    f"Timed out waiting for state {name!r} (last value: {value!r})"
+                )
+            time.sleep(interval)
+            value = self.get(name)
+        return value
+
 
 def print_state(**kwargs):
     print("STATE:", json.dumps(kwargs), flush=True)
diff --git a/src/trame_client/widgets/trame.py b/src/trame_client/widgets/client.py
similarity index 88%
rename from src/trame_client/widgets/trame.py
rename to src/trame_client/widgets/client.py
index f2cdaab..48712bf 100644
--- a/src/trame_client/widgets/trame.py
+++ b/src/trame_client/widgets/client.py
@@ -3,6 +3,7 @@
 from pathlib import Path
 
 from .core import AbstractElement
+from .react import Bind as ReactBind
 from ..external_script_handler import (
     UserDefinedFunction,
     ExternalScript,
@@ -86,13 +87,20 @@ def __init__(self, children=None, **kwargs):
         super().__init__("trame-exec", children, **kwargs)
         JSEval._next_id += 1
         self.__ref = kwargs.get("ref", f"trame_exec_ref_{JSEval._next_id}")
-        self._attributes["ref"] = f'ref="{self.__ref}"'
         self._attr_names += [
             "event",
         ]
-        self._event_names += [
-            "exec",
-        ]
+        if self.server.client_type == "react":
+            # "ref" is already a SHARED_PROPS entry for react (unlike vue,
+            # which needs a raw `ref="..."` template fragment) - just set it
+            # as an ordinary prop.
+            self.ref = self.__ref
+            self._event_names += [("exec", "onExec")]
+        else:
+            self._attributes["ref"] = f'ref="{self.__ref}"'
+            self._event_names += [
+                "exec",
+            ]
 
     def exec(self, event=None):
         if event is None:
@@ -113,8 +121,12 @@ def __init__(self, css_content=None, **kwargs):
         Style._next_id += 1
         super().__init__("trame-style", **kwargs)
         self._key = f"trame__inline_style_{Style._next_id}"
-        self._attributes["_css"] = f':css="{self._key}"'
         self.server.root_server.state.setdefault(self._key, css_content)
+        if self.server.client_type == "react":
+            self._attr_names += [("css", "css")]
+            self.css = ReactBind(self._key)
+        else:
+            self._attributes["_css"] = f':css="{self._key}"'
 
     def update(self, css_content):
         """Update style content"""
@@ -138,8 +150,12 @@ def __init__(self, script_content=None, **kwargs):
         Script._next_id += 1
         super().__init__("trame-script", **kwargs)
         self._key = f"trame__inline_script_{Script._next_id}"
-        self._attributes["_script"] = f':script="{self._key}"'
         self.server.root_server.state.setdefault(self._key, script_content)
+        if self.server.client_type == "react":
+            self._attr_names += [("script", "script")]
+            self.script = ReactBind(self._key)
+        else:
+            self._attributes["_script"] = f':script="{self._key}"'
         self._attr_names += [
             "module",  # type="module" or "text/javascript"
             "async",
@@ -177,6 +193,8 @@ class Getter(AbstractElement):
     :param update_nested_name: Method name if you aim to update the nested structure.
 
     :param update_name: Method name if you aim to update the full value.
+
+    Not implemented for client_type="react".
     """
 
     def __init__(
@@ -189,6 +207,10 @@ def __init__(
         **kwargs,
     ):
         super().__init__("trame-getter", **kwargs)
+        if self.server.client_type == "react":
+            raise NotImplementedError(
+                "client.Getter is not implemented for client_type='react'"
+            )
         self._attr_names += [
             "name",
         ]
@@ -229,12 +251,26 @@ class ClientStateChange(AbstractElement):
 
     def __init__(self, children=None, **kwargs):
         super().__init__("trame-client-state-change", children, **kwargs)
-        self._attr_names += [
-            ("value", ":value"),
-            "immediate",
-            ("trigger_on_create", "triggerChangeOnCreate"),
-        ]
-        self._event_names += ["change"]
+        if self.server.client_type == "react":
+            # Unlike vue's dynamic `:value="expr"` binding, react needs an
+            # explicit Bind so the value is actually reactively evaluated
+            # client-side rather than serialized as a literal string.
+            self._attr_names += [
+                "value",
+                "immediate",
+                ("trigger_on_create", "triggerChangeOnCreate"),
+            ]
+            value = self.value
+            if not isinstance(value, ReactBind):
+                self.value = ReactBind(value)
+            self._event_names += [("change", "onChange")]
+        else:
+            self._attr_names += [
+                ("value", ":value"),
+                "immediate",
+                ("trigger_on_create", "triggerChangeOnCreate"),
+            ]
+            self._event_names += ["change"]
 
 
 # -----------------------------------------------------------------------------
@@ -438,6 +474,8 @@ class Handler(AbstractElement):
         - success: Emitted when the function executes and returns successfully.
         - failure: Emitted when the function reports a handled error.
         - error: Emitted when an unhandled exception occurs during execution.
+
+    Not implemented for client_type="react".
     """
 
     def __init__(
@@ -451,6 +489,11 @@ def __init__(
 
         super().__init__("trame-handler", **kwargs, function_key=external_script_id)
 
+        if self.server.client_type == "react":
+            raise NotImplementedError(
+                "client.Handler is not implemented for client_type='react'"
+            )
+
         self.variable = variable
 
         if not self.state["trame__client_external_scripts"]:
diff --git a/src/trame_client/widgets/core.py b/src/trame_client/widgets/core.py
index 6c6b7d8..2b94ec9 100644
--- a/src/trame_client/widgets/core.py
+++ b/src/trame_client/widgets/core.py
@@ -1,154 +1,59 @@
-import logging
-import sys
+"""
+The trame widget tree, shared by every `client_type`.
+
+`ElementContextManager`/`HTML_CTX` and `VirtualNode` are framework-agnostic:
+they only manage the python-side parent/child stack used by the
+`with widget:` context-manager idiom.
+
+`AbstractElement` is the base every trame widget (across the whole trame
+ecosystem) is built on, so it stays defined here rather than moving behind a
+per-`client_type` subclass. What *is* isolated per `client_type` is how its
+python kwargs get turned into client-side output: at construction time,
+`AbstractElement` picks a rendering implementation based on
+`self.server.client_type` (`vue.HtmlElement` for `"vue2"`/`"vue3"`, and in the
+future `react.HtmlElement` for `"react"`) and stores it as `self._impl`. Every
+other method (`attrs()`, `events()`, `html`, `hide()`, `ttsSensitive()`, ...)
+just delegates to it, so adding a new `client_type` only means adding a new
+sibling module with its own `HtmlElement` implementation - `AbstractElement`
+itself never needs to change.
+
+`self.props`/`self.events` are aliases onto `self._impl.props`/`self._impl.events`
+- the preferred way for a widget to declare its properties:
+`self.props += [...]` / `self.events += [...]`. `_attr_names`/`_event_names`
+are kept working as the exact same aliases purely for backward compatibility:
+every widget package across the trame ecosystem already declares its
+properties with `self._attr_names += [...]` / `self._event_names += [...]`
+inside its own `__init__`, so those names have to keep resolving to whatever
+the active implementation considers its props/events.
+"""
 
 from trame_common.obj.component import TrameComponent
 
-from trame_client.utils.defaults import TrameDefault
-from trame_client.utils.formatter import to_pretty_html
-
-AVAILABLE_DIRECTIVES = [
-    ("v_text", "v-text"),
-    ("v_html", "v-html"),
-    ("v_show", "v-show"),
-    ("v_if", "v-if"),
-    ("v_else", "v-else"),
-    ("v_else_if", "v-else-if"),
-    ("v_for", "v-for"),
-    ("v_on", "v-on"),
-    ("v_bind", "v-bind"),
-    ("v_model", "v-model"),
-    ("v_model_lazy", "v-model.lazy"),
-    ("v_model_number", "v-model.number"),
-    ("v_model_trim", "v-model.trim"),
-    ("v_slot", "v-slot"),
-    ("v_pre", "v-pre"),
-    ("v_once", "v-once"),
-    ("v_memo", "v-memo"),
-    ("v_cloak", "v-cloak"),
-]
-KEY_ALIAS = [
-    "enter",
-    "tab",
-    "delete",
-    "esc",
-    "space",
-    "left",
-    "up",
-    "right",
-    "down",
-]
-KEY_MODIFIER = ["ctrl", "alt", "shift", "meta"]
-MOUSE_BUTTONS = ["left", "right", "middle"]
-V_ON_MODIFIER = [
-    "stop",
-    "prevent",
-    "capture",
-    "self",
-    "once",
-    "left",
-    "right",
-    "middle",
-    "passive",
-]  # *KEY_ALIAS
-V_ON_TYPE_MOUSE = [
-    "click",
-    "contextmenu",
-    "dblclick",
-    "mousedown",
-    "mouseenter",
-    "mouseleave",
-    "mousemove",
-    "mouseup",
-    "mouseout",
-    "mouseover",
-]
-V_ON_TYPE_KEYBOARD = [
-    "keydown",
-    "keyup",
-    "keypress",
-]
-V_ON_TYPE_FORM = [
-    "submit",
-    "input",
-    "change",
-    "focus",
-    "blur",
-]
-V_ON_TYPE_TOUCH = [
-    "touchstart",
-    "touchmove",
-    "touchend",
-    "touchcancel",
-]
-V_ON_TYPE_UI = [
-    "scroll",
-    "resize",
-    "select",
-]
-V_ON_TYPE_ANIM = [
-    "animationstart",
-    "animationend",
-    "animationiteration",
-]
-V_ON_TYPE_TRANSITION = [
-    "transitionstart",
-    "transitionend",
-    "transitioncancel",
-]
-
-V_MODEL_MODIFIER = {"lazy", "number", "trim"}
-
-SHARED_ATTRIBUTES = [
-    "accesskey",
-    "autocapitalize",
-    "autofocus",
-    ("classes", "class"),
-    "contenteditable",
-    "dir",
-    "draggable",
-    "enterkeyhint",
-    "hidden",
-    "id",
-    "inputmode",
-    "is",
-    "itemid",
-    "itemprop",
-    "itemref",
-    "itemscope",
-    "itemtype",
-    "lang",
-    "nonce",
-    "slot",
-    "spellcheck",
-    "style",
-    "tabindex",
-    "title",
-    "translate",
-    # --
-    "ref",
-    ["key", ":key"],
-]
-
-# !all modifiers should go through v_on_click_left_stop...
-SHARED_EVENTS = [
-    *V_ON_TYPE_MOUSE,
-    *V_ON_TYPE_KEYBOARD,
-    *V_ON_TYPE_FORM,
-    *V_ON_TYPE_TOUCH,
-    *V_ON_TYPE_ANIM,
-    *V_ON_TYPE_TRANSITION,
-    # -------------------------------------------------------------------------
-    # Should not enable by default as they tend to conflict with widget
-    # properties. Use v_on_{}= to enable any missing mapping.
-    # -------------------------------------------------------------------------
-    # *V_ON_TYPE_UI,
-]
+from ..utils.formatter import to_pretty_html
+
+VUE_CLIENT_TYPES = {"vue2", "vue3"}
+
+# Vue-only widgets (Template, Transition, ...) re-exported here for backward
+# compatibility: they've always been imported from `trame_client.widgets.core`
+# across the trame ecosystem. Resolved lazily (PEP 562) to avoid a circular
+# import at module-load time between `core` and `vue`.
+_VUE_WIDGET_EXPORTS = {
+    "Template",
+    "Component",
+    "Transition",
+    "TransitionGroup",
+    "KeepAlive",
+    "Teleport",
+    "Suspense",
+}
 
-logger = logging.getLogger(__name__)
 
+def __getattr__(name):
+    if name in _VUE_WIDGET_EXPORTS:
+        from . import vue
 
-def py2js_key(key):
-    return key.replace("_", "-")
+        return getattr(vue, name)
+    raise AttributeError(f"module {__name__!r} has no attribute {name!r}")
 
 
 class ElementContextManager:
@@ -292,48 +197,22 @@ def __call__(self, layout=None, **kwargs):
         HTML_CTX.add_child(self)
 
 
-def _event_value_processing(server, js_key, value):
-    if isinstance(value, str):
-        translated_value = server.state.translator.translate_js_expression(
-            server.state, value
-        )
-        return f'{js_key}="{translated_value}"'
-    elif callable(value):
-        trigger_name = server.trigger_name(value)
-        return f"{js_key}=\"trigger('{trigger_name}')\""
-    elif isinstance(value, tuple):
-        trigger_name = value[0]
-        if callable(trigger_name):
-            trigger_name = server.trigger_name(trigger_name)
-        if len(value) == 1:
-            return f"{js_key}=\"trigger('{trigger_name}')\""
-        if len(value) == 2:
-            translated_value = server.state.translator.translate_js_expression(
-                server.state, value[1]
-            )
-            return f"{js_key}=\"trigger('{trigger_name}', {translated_value})\""
-        if len(value) == 3:
-            translated_value = server.state.translator.translate_js_expression(
-                server.state, value[1]
-            )
-            # We don't want to translate kwargs as we may change keys rather than just values
-            return f"{js_key}=\"trigger('{trigger_name}', {translated_value}, {value[2]})\""
-    return False
-
-
-def as_py_arg(iterable):
-    if iterable is None:
-        return None
-    for item in iterable:
-        if isinstance(item, str):
-            yield item
-        else:
-            yield item[0]
+def _get_impl_class(client_type):
+    if client_type in VUE_CLIENT_TYPES:
+        from . import vue
+
+        return vue.HtmlElement
+    elif client_type == "react":
+        from . import react
+
+        return react.HtmlElement
+
+    raise TypeError(f"Unsupported client_type={client_type!r}")
 
 
 class AbstractElement(TrameComponent):
     """
-    A Vue component which can integrate with the rest of trame
+    A widget which can integrate with the rest of trame
 
     See Vue docs |vue_doc_link| for more info
 
@@ -380,7 +259,7 @@ class AbstractElement(TrameComponent):
     :param mouseleave: See |mdn_event_link| for more info
     :param contextmenu: See |mdn_event_link| for more info
 
-    Raw attributes
+    Raw attributes (Vue only)
 
     :param raw_attrs: List of string that will be added as-is in the generated template
 
@@ -400,63 +279,38 @@ class AbstractElement(TrameComponent):
     """
 
     _next_id = 1
-    _debug = "--debug" in sys.argv or "-d" in sys.argv
 
     def __init__(
         self,
         _elem_name,
         children=None,
-        raw_attrs=None,
         ctx_name=None,
         connect_parent=True,
+        literal_children=False,
         **kwargs,
     ):
         AbstractElement._next_id += 1
         self._id = AbstractElement._next_id
         self._server = kwargs.get("trame_server")
         self._elem_name = _elem_name
-        self._allowed_keys = set()
-        self._attr_names = (
-            kwargs.get("__properties", []) + SHARED_ATTRIBUTES + AVAILABLE_DIRECTIVES
-        )
-        self._event_names = kwargs.get("__events", []) + SHARED_EVENTS
-
-        style = kwargs.get("style", None)
-        if type(style) is dict:
-            kwargs["style"] = " ".join([f"{k}: {v};" for k, v in style.items()])
-
         self._attributes = {}
-        self._py_attr = kwargs
-        self._used_py_attr = {"trame_server", "__properties", "__events"}
         self._children = []
 
-        # Handle raw attributes if provided
-        if raw_attrs:
-            for idx, raw_value in enumerate(raw_attrs):
-                self._attributes[f"_raw_{idx}"] = raw_value
-
         if children:
             if isinstance(children, (list, tuple)):
                 self._children.extend(children)
             else:
                 self._children.append(children)
 
-        # Add ourself to context if any
+        # Add ourself to context if any (resolves self._server from the
+        # enclosing context if it wasn't provided explicitly)
         HTML_CTX.add_child(self, connect_parent)
 
-        super().__init__(self._server, ctx_name=ctx_name)
-
-    def _attr_str(self):
-        return " ".join(self._attributes.values())
+        # Client_type specific implementation (vue.HtmlElement, react.HtmlElement, ...)
+        self._impl = _get_impl_class(self.server.client_type)(self, kwargs)
+        self._impl.literal_children = literal_children
 
-    def _update_allowed_keys(self):
-        if hasattr(self, "_attr_names") and hasattr(self, "_event_names"):
-            for items in [self._attr_names, self._event_names]:
-                for item in items:
-                    if isinstance(item, str):
-                        self._allowed_keys.add(item)
-                    else:
-                        self._allowed_keys.add(item[0])
+        super().__init__(self._server, ctx_name=ctx_name)
 
     # -------------------------------------------------------------------------
     # Static helper for widgets
@@ -464,11 +318,9 @@ def _update_allowed_keys(self):
 
     @staticmethod
     def register_directive(py_name, js_name=None):
-        global AVAILABLE_DIRECTIVES
-        if js_name is None:
-            AVAILABLE_DIRECTIVES.append(py_name)
-        else:
-            AVAILABLE_DIRECTIVES.append((py_name, js_name))
+        from . import vue
+
+        vue.register_directive(py_name, js_name)
 
     # -------------------------------------------------------------------------
     # App associated to HTML element
@@ -483,46 +335,53 @@ def set_server(self, v):
     # -------------------------------------------------------------------------
 
     def __getitem__(self, name):
-        return self._py_attr[name]
+        return self._impl.get(name)
 
     def __setitem__(self, name, value):
-        if name in self._allowed_keys:
-            if value is None:
-                self._py_attr.pop(name, value)
-                self._attributes.pop(name, value)
-            else:
-                self._py_attr[name] = value
-
+        if name in self._impl.allowed_keys:
+            self._impl.set(name, value)
         else:
             print(f"Attribute {name} is not defined for {self._elem_name}")
 
     def __getattr__(self, name):
+        # self.props/self.events: aliases onto self._impl.props/self._impl.events.
+        # _attr_names/_event_names are the same aliases, kept for widgets
+        # across the trame ecosystem that declare their properties with
+        # `self._attr_names += [...]` / `self._event_names += [...]`.
+        if name in {"props", "_attr_names"}:
+            return self._impl.props
+        if name in {"events", "_event_names"}:
+            return self._impl.events
+        if name == "literal_children":
+            # Only meaningful for client_type="react" (react.HtmlElement) -
+            # absent under vue, where this whole indirection doesn't apply.
+            return getattr(self._impl, "literal_children", False)
+
         if name[0] == "_":
             raise AttributeError()
 
-        if name in self._py_attr:
-            return self._py_attr[name]
+        if self._impl.has(name):
+            return self._impl.get(name)
 
         print(f"{self._elem_name}.{name} is missing")
 
     def __setattr__(self, name, value):
-        if name[0] == "_":
+        # Backward-compat aliases (see __getattr__ above)
+        if name in {"props", "_attr_names"}:
+            self._impl.props = value
+        elif name in {"events", "_event_names"}:
+            self._impl.events = value
+        elif name == "literal_children":
+            self._impl.literal_children = value
+        elif name[0] == "_":
             self.__dict__[name] = value
         elif name == "children":
             self._children = value
-        elif name in self._allowed_keys:
-            if value is None:
-                self._py_attr.pop(name, value)
-                self._attributes.pop(name, value)
-            else:
-                self._py_attr[name] = value
-
+        elif name in self._impl.allowed_keys:
+            self._impl.set(name, value)
         else:
             super().__setattr__(name, value)
 
-        if name in ["_attr_names", "_event_names"]:
-            self._update_allowed_keys()
-
     # -------------------------------------------------------------------------
     # helpers
     # -------------------------------------------------------------------------
@@ -536,173 +395,7 @@ def ttsSensitive(self):
         This is especially useful for component that manage other elements outside
         of themself like VSelect in Vuetify.
         """
-        self._attributes["__tts"] = f':key="`w{self._id}-${{tts}}`"'
-        return self
-
-    def attrs(self, *names):
-        """
-        Calling this function will process the provided attribute names and
-        configure its internal so the matching HTML string could easily be
-        generated later on.
-
-        :param names: The names attribute to process
-        :type names: *str
-        """
-        directives = [
-            name
-            for name in self._py_attr.keys()
-            if name.startswith("v_model_") or name.startswith("v_bind_")
-        ]
-        self._used_py_attr.update(as_py_arg(directives))
-        self._used_py_attr.update(as_py_arg(names))
-        for _name in [*directives, *names]:
-            js_key = None
-            name = _name
-            if isinstance(_name, (list, tuple)):
-                name = _name[0]
-                js_key = _name[1]
-
-            if name in self._py_attr:
-                if js_key is None:
-                    js_key = py2js_key(name)
-                value = self._py_attr[name]
-
-                # smart key handling
-                if name.startswith("v_model_"):
-                    model_name, *modifiers = name.split("_")[2:]
-                    if model_name in V_MODEL_MODIFIER and len(modifiers) == 0:
-                        js_key = f"v-model.{model_name}"
-                    else:
-                        js_key = f"v-model:{model_name}{'.' if len(modifiers) else ''}{'.'.join(modifiers)}"
-                elif name.startswith("v_bind_"):
-                    prop_name, *modifiers = name.split("_")[2:]
-                    js_key = f":{prop_name}{'.' if len(modifiers) else ''}{'.'.join(modifiers)}"
-
-                if value is None:
-                    continue
-
-                logger.info("js_key = %s", js_key)
-
-                if isinstance(value, (tuple, list)):
-                    if len(value) > 1:
-                        if isinstance(value[1], TrameDefault):
-                            value[1].set_defaults(self.server)
-                        else:
-                            self.server.state.setdefault(value[0], value[1])
-
-                    logger.info("before: %s = %s", js_key, value[0])
-                    if isinstance(value[0], str):
-                        translated_value = (
-                            self.server.state.translator.translate_js_expression(
-                                self.server.state, value[0]
-                            )
-                        )
-                    else:
-                        translated_value = str(value[0])
-                        if AbstractElement._debug:
-                            logger.warning(
-                                'Warning: <%s %s="..." /> is set with an (%s)',
-                                self._elem_name,
-                                js_key,
-                                type(value[0]),
-                            )
-
-                    logger.info("after: %s = %s", js_key, translated_value)
-                    if js_key.startswith("v-"):
-                        self._attributes[name] = f'{js_key}="{translated_value}"'
-                    elif js_key.startswith(":"):
-                        self._attributes[name] = f'{js_key}="{translated_value}"'
-                    else:
-                        self._attributes[name] = f':{js_key}="{translated_value}"'
-                elif isinstance(value, bool):
-                    if value:
-                        self._attributes[name] = js_key
-                    else:
-                        self._attributes[name] = f':{js_key}="false"'
-                elif isinstance(value, str):
-                    if js_key.startswith("v-") or js_key.startswith(":"):
-                        logger.info("before: %s = %s", js_key, value)
-                        value = self.server.state.translator.translate_js_expression(
-                            self.server.state, value
-                        )
-                        logger.info("after: %s = %s", js_key, value)
-
-                    self._attributes[name] = f'{js_key}="{value}"'
-                elif isinstance(value, (int, float)):
-                    self._attributes[name] = f'{js_key}="{value}"'
-                else:
-                    print(
-                        "Error: Don't know how to handle attribute name "
-                        f"'{name}' with value '{value}' in {self.__class__}::{self._elem_name}"
-                    )
-
-        return self
-
-    def events(self, *names):
-        """
-        Calling this function will process the provided event names and
-        configure its internal so the matching HTML string could easily be
-        generated later on.
-
-        :param names: The names events to process
-        :type names: *str
-        """
-        self._used_py_attr.update(as_py_arg(names))
-        processed_event = set()
-        for _name in names:
-            js_key = None
-            name = _name
-            if isinstance(_name, tuple):
-                name = _name[0]
-                js_key = _name[1]
-            if name in self._py_attr:
-                if js_key is None:
-                    js_key = py2js_key(name)
-                js_key = f"@{js_key}"
-                value = self._py_attr[name]
-
-                if value is None:
-                    continue
-
-                attribute = _event_value_processing(self.server, js_key, value)
-                if attribute is None:
-                    # no match
-                    pass
-                elif isinstance(attribute, str):
-                    self._attributes[name] = attribute
-                    processed_event.add(name)
-                else:
-                    print(
-                        "Error: Don't know how to handle event name "
-                        f"'{name}' with value '{value}' in {self.__class__}::{self._elem_name}"
-                    )
-
-        # process v_on_....
-        for key_name in self._py_attr:
-            if key_name in processed_event:
-                continue
-
-            if key_name.startswith("v_on_"):
-                tokens = key_name.split("_")[2:]
-                js_key = f"@{'.'.join(tokens)}"
-                value = self._py_attr[key_name]
-
-                if value is None:
-                    continue
-
-                attribute = _event_value_processing(self.server, js_key, value)
-                if attribute is None:
-                    # no match
-                    pass
-                elif isinstance(attribute, str):
-                    self._used_py_attr.add(key_name)
-                    self._attributes[key_name] = attribute
-                else:
-                    print(
-                        "Error: Don't know how to handle event name "
-                        f"'{key_name}' with value '{value}' in {self.__class__}::{self._elem_name}"
-                    )
-
+        self._impl.tts_sensitive()
         return self
 
     def clear(self):
@@ -716,7 +409,7 @@ def hide(self):
         """
         Hide element while keeping it in the DOM. (display: none)
         """
-        self._attributes["__style"] = 'style="display: none"'
+        self._impl.hide()
 
     def add_child(self, child):
         """
@@ -760,57 +453,14 @@ def skipped_attributes(self):
         Return the attribute names that are skipped from the HTML representation.
         This can represent miss match property/event names or missing mapping.
         """
-        return set(self._py_attr.keys()) - self._used_py_attr
+        return self._impl.skipped_attributes
 
     @property
     def html(self):
         """
         Return a string representation of the HTML component
         """
-        try:
-            # Build attributes
-            self.attrs(*self._attr_names)
-            self.events(*self._event_names)
-
-            if AbstractElement._debug and self.skipped_attributes:
-                logger.warning(
-                    "Warning: <%s %s /> attributes will be skipped",
-                    self._elem_name,
-                    "=... ".join([*self.skipped_attributes, ""]),
-                )
-
-            # Patch ref to use trame registration
-            if (
-                self.server.client_type == "vue3"
-                and "ref" in self._attributes
-                and self._attributes["ref"].startswith("ref=")
-            ):
-                ref_name = self._attributes["ref"][5:-1]
-                self._attributes["ref"] = (
-                    f''':ref="(el) => trame.refs['{ref_name}'] = el"'''
-                )
-
-            # Compute HTML str
-            if len(self._children):
-                out_buffer = []
-                out_buffer.append(f"<{self._elem_name} {self._attr_str()}>")
-                for child in self._children:
-                    if isinstance(child, str):
-                        translated_value = (
-                            self.server.state.translator.translate_vue_templating(
-                                self.server.state, child
-                            )
-                        )
-                        out_buffer.append(translated_value)
-                    else:
-                        out_buffer.append(child.html)
-                out_buffer.append(f"</{self._elem_name}>")
-                return "\n".join(out_buffer)
-            else:
-                return f"<{self._elem_name} {self._attr_str()} />"
-        except Exception as e:
-            logger.error(e)
-            return f"<{self._elem_name} html-error />"
+        return self._impl.render()
 
     def __repr__(self):
         return to_pretty_html(self.html)
@@ -837,296 +487,3 @@ def __init__(self, _elem_name, children=None, **kwargs):
         super().__init__(_elem_name, children, **kwargs)
         if HtmlElement.MODULE and self.server:
             self.server.enable_module(HtmlElement.MODULE)
-
-
-# -----------------------------------------------------------------------------
-# Vue based components
-# -----------------------------------------------------------------------------
-
-
-class Template(AbstractElement):
-    """
-    The standard html content template element. This is mostly used by |slot_doc_link|.
-
-    .. |slot_doc_link| raw:: html
-
-        <a href="https://vuejs.org/v2/guide/instance.html" target="_blank">vue's slot system</a>
-
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-    :param v_slot: The slot this template corresponds to
-    """
-
-    slot_names = set()
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("template", children, **kwargs)
-        self._attr_names += ["v_slot"]
-        for slot_name in Template.slot_names:
-            safe_name = slot_name.replace("-", "_").replace(".", "_")
-            if "<name>" in safe_name:
-                safe_header, safe_tail = safe_name.split("<name>")
-                header, tail = slot_name.split("<name>")
-                for key in kwargs:
-                    if key.startswith(header):
-                        dyna_name = key[len(header) : -len(tail)]
-                        self._attr_names.append(
-                            (
-                                f"v_slot_{safe_header}{dyna_name}{safe_tail}",
-                                f"v-slot:{header}{dyna_name}{tail}",
-                            )
-                        )
-            else:
-                self._attr_names.append((f"v_slot_{safe_name}", f"v-slot:{slot_name}"))
-
-
-# -----------------------------------------------------------------------------
-
-
-class Component(AbstractElement):
-    """
-    Vue.js dynamic component element.
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-    :param is_name: name of the component to map
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("component", children, **kwargs)
-        self._attr_names += [
-            ("is_name", "is"),
-        ]
-
-
-# -----------------------------------------------------------------------------
-
-
-class Transition(AbstractElement):
-    """
-    Vue.js Transition component element.
-    Provides animated transition effects to a single element or component.
-
-    Properties:
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-    :param name: Used to automatically generate transition CSS class names.
-        e.g. `name: 'fade'` will auto expand to `.fade-enter`,
-        `.fade-enter-active`, etc.
-    :param css: Whether to apply CSS transition classes. (Default: true)
-    :param type: Specifies the type of transition events to wait for to
-        determine transition end timing. Default behavior is auto detecting
-        the type that has longer duration. (transition, animation)
-    :param duraction: Specifies explicit durations of the transition.
-        Default behavior is wait for the first `transitionend` or
-        `animationend` event on the root transition element.
-    :param mode: Controls the timing sequence of leaving/entering transitions.
-        Default behavior is simultaneous. ('in-out' | 'out-in' | 'default')
-    :param appear: Whether to apply transition on initial render.
-        (default: false)
-    :param enter_from_class: Props for customizing transition classes.
-    :param enter_active_class: Props for customizing transition classes.
-    :param enter_to_class: Props for customizing transition classes.
-    :param appear_from_class: Props for customizing transition classes.
-    :param appear_active_class: Props for customizing transition classes.
-    :param appear_to_class: Props for customizing transition classes.
-    :param leave_from_class: Props for customizing transition classes.
-    :param leave_active_class: Props for customizing transition classes.
-    :param leave_to_class: Props for customizing transition classes.
-
-    Events:
-
-    :param before_enter:
-    :param before_leave:
-    :param enter:
-    :param leave:
-    :param appear:
-    :param after_enter:
-    :param after_leave:
-    :param after_appear:
-    :param enter_cancelled:
-    :param leave_cancelled:
-    :param appear_cancelled:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("transition", children, **kwargs)
-        self._attr_names += [
-            "name",
-            "css",
-            "type",
-            "duraction",
-            "mode",
-            "appear",
-            ("enter_from_class", "enterFromClass"),
-            ("enter_active_class", "enterActiveClass"),
-            ("enter_to_class", "enterToClass"),
-            ("appear_from_class", "appearFromClass"),
-            ("appear_active_class", "appearActiveClass"),
-            ("appear_to_class", "appearToClass"),
-            ("leave_from_class", "leaveFromClass"),
-            ("leave_active_class", "leaveActiveClass"),
-            ("leave_to_class", "leaveToClass"),
-        ]
-        self._event_names += [
-            ("before_enter", "before-enter"),
-            ("before_leave", "before-leave"),
-            ("enter", "enter"),
-            ("leave", "leave"),
-            ("appear", "appear"),
-            ("after_enter", "after-enter"),
-            ("after_leave", "after-leave"),
-            ("after_appear", "after-appear"),
-            ("enter_cancelled", "enter-cancelled"),
-            ("leave_cancelled", "leave-cancelled"),
-            ("appear_cancelled", "appear-cancelled"),
-        ]
-
-
-# -----------------------------------------------------------------------------
-
-
-class TransitionGroup(AbstractElement):
-    """
-    Vue.js TransitionGroup component element.
-    Provides transition effects for multiple elements or components in a list.
-
-    Properties:
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-
-    Events:
-
-    :param before_enter:
-    :param before_leave:
-    :param enter:
-    :param leave:
-    :param appear:
-    :param after_enter:
-    :param after_leave:
-    :param after_appear:
-    :param enter_cancelled:
-    :param leave_cancelled:
-    :param appear_cancelled:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("transition-group", children, **kwargs)
-        self._attr_names += [
-            "tag",
-            ("move_class", "moveClass"),
-        ]
-        self._event_names += [
-            ("before_enter", "before-enter"),
-            ("before_leave", "before-leave"),
-            ("enter", "enter"),
-            ("leave", "leave"),
-            ("appear", "appear"),
-            ("after_enter", "after-enter"),
-            ("after_leave", "after-leave"),
-            ("after_appear", "after-appear"),
-            ("enter_cancelled", "enter-cancelled"),
-            ("leave_cancelled", "leave-cancelled"),
-            ("appear_cancelled", "appear-cancelled"),
-        ]
-
-
-# -----------------------------------------------------------------------------
-
-
-class KeepAlive(AbstractElement):
-    """
-    Vue.js KeepAlive component element.
-    Caches dynamically toggled components wrapped inside.
-
-    Properties:
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-    :param include: If specified, only components with names matched
-        by `include` will be cached.
-    :param exclude: Any component with a name matched by `exclude`
-        will not be cached.
-    :param max: The maximum number of component instances to cache.
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("keep-alive", children, **kwargs)
-        self._attr_names += [
-            "include",
-            "exclude",
-            "max",
-        ]
-
-
-# -----------------------------------------------------------------------------
-
-
-class Teleport(AbstractElement):
-    """
-    Vue.js Teleport component element.
-    Renders its slot content to another part of the DOM.
-
-    Properties:
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-    :param to: Required. Specify target container.
-        Can either be a selector or an actual element.
-    :param disabled: When `true`, the content will remain in its original
-        location instead of moved into the target container.
-        Can be changed dynamically.
-    :param defer: When `true`, the Teleport will defer until other parts
-        of the application have been mounted before resolving its target.
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("teleport", children, **kwargs)
-        self._attr_names += [
-            "to",
-            "disabled",
-            "defer",
-        ]
-
-
-# -----------------------------------------------------------------------------
-
-
-class Suspense(AbstractElement):
-    """
-    Vue.js Suspense component element.
-    Used for orchestrating nested async dependencies in a component tree.
-
-    Properties:
-
-    :param children: The children nested within this element
-    :type children:  str | list[trame.html.*] | trame.html.* | None
-    :type timeout:
-    :type suspensible:
-
-    Events:
-
-    :param resolve:
-    :param pending:
-    :param fallback:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("suspense", children, **kwargs)
-        self._attr_names += [
-            "timeout",
-            "suspensible",
-        ]
-        self._event_names += [
-            "resolve",
-            "pending",
-            "fallback",
-        ]
diff --git a/src/trame_client/widgets/generator.py b/src/trame_client/widgets/generator.py
index 4de426f..6a91efe 100644
--- a/src/trame_client/widgets/generator.py
+++ b/src/trame_client/widgets/generator.py
@@ -8,6 +8,16 @@ def load_json(name):
         return json.load(f)
 
 
+def to_py_name(v):
+    """Python kwarg name for an attributes.json entry (str or [py_name, html_name])."""
+    return v[0] if isinstance(v, (list, tuple)) else v
+
+
+def to_html_name(v):
+    """Actual HTML/wire attribute name for an attributes.json entry (str or [py_name, html_name])."""
+    return v[1] if isinstance(v, (list, tuple)) else v
+
+
 def to_str(v):
     if isinstance(v, (tuple, list)):
         return v
@@ -20,44 +30,150 @@ def to_doc_str(v):
     return v
 
 
+# -----------------------------------------------------------------------------
+# React: python kwarg name -> react DOM prop name, for the html attribute
+# names (resources/attributes.json) that don't already match React's
+# camelCase convention as-is. Anything not listed here keeps the exact same
+# spelling for both client types (e.g. "type", "min", "max", "value", ...).
+# Best-effort - reflects the common/well-known cases, not verified
+# exhaustively against react-dom's internal attribute table.
+# -----------------------------------------------------------------------------
+REACT_ATTRIBUTE_OVERRIDES = {
+    "accept-charset": "acceptCharset",
+    "accesskey": "accessKey",
+    "allowfullscreen": "allowFullScreen",
+    "allowpaymentrequest": "allowPaymentRequest",
+    "allowusermedia": "allowUserMedia",
+    "autocapitalize": "autoCapitalize",
+    "autocomplete": "autoComplete",
+    "autofocus": "autoFocus",
+    "autoplay": "autoPlay",
+    "cellpadding": "cellPadding",
+    "cellspacing": "cellSpacing",
+    "charoff": "charOff",
+    "charset": "charSet",
+    "classes": "className",
+    "classid": "classID",
+    "codebase": "codeBase",
+    "codetype": "codeType",
+    "colspan": "colSpan",
+    "contenteditable": "contentEditable",
+    "crossorigin": "crossOrigin",
+    "datetime": "dateTime",
+    "dirname": "dirName",
+    "enterkeyhint": "enterKeyHint",
+    "for": "htmlFor",
+    "formaction": "formAction",
+    "formenctype": "formEncType",
+    "formmethod": "formMethod",
+    "formnovalidate": "formNoValidate",
+    "formtarget": "formTarget",
+    "frameborder": "frameBorder",
+    "hreflang": "hrefLang",
+    "http-equiv": "httpEquiv",
+    "imagesizes": "imageSizes",
+    "imagesrcset": "imageSrcSet",
+    "inputmode": "inputMode",
+    "ismap": "isMap",
+    "itemid": "itemID",
+    "itemprop": "itemProp",
+    "itemref": "itemRef",
+    "itemscope": "itemScope",
+    "itemtype": "itemType",
+    "longdesc": "longDesc",
+    "marginheight": "marginHeight",
+    "marginwidth": "marginWidth",
+    "maxlength": "maxLength",
+    "minlength": "minLength",
+    "nomodule": "noModule",
+    "novalidate": "noValidate",
+    "playsinline": "playsInline",
+    "readonly": "readOnly",
+    "referrerpolicy": "referrerPolicy",
+    "rowspan": "rowSpan",
+    "spellcheck": "spellCheck",
+    "srcdoc": "srcDoc",
+    "srclang": "srcLang",
+    "srcset": "srcSet",
+    "tabindex": "tabIndex",
+    "typemustmatch": "typeMustMatch",
+    "usemap": "useMap",
+    "valuetype": "valueType",
+    "webkitdirectory": "webkitDirectory",
+}
+
+
+def to_vue_entry(v):
+    """
+    Convert an attributes.json entry (str or [py_name, html_name]) into a
+    vue-flavored (py_name, name) generator entry. Python kwargs can't contain
+    "-" (e.g. the "accept-charset"/"http-equiv" HTML attributes), so any
+    hyphenated name gets its own python-safe alias ("-" -> "_") mapped back
+    to the real HTML/Vue attribute name, the same way ["classes", "class"]
+    already maps around the "class" keyword clash.
+    """
+    py_name = to_py_name(v)
+    html_name = to_html_name(v)
+    safe_py_name = py_name.replace("-", "_")
+    if safe_py_name == html_name:
+        return safe_py_name
+    return [safe_py_name, html_name]
+
+
+def to_react_entry(v):
+    """
+    Convert an attributes.json entry (str or [py_name, html_name]) into a
+    (py_name, react_name) generator entry: same "-" -> "_" python-name
+    sanitizing as to_vue_entry, then translated through
+    REACT_ATTRIBUTE_OVERRIDES (looked up by the original, possibly
+    hyphenated, python name) where needed.
+    """
+    py_name = to_py_name(v)
+    safe_py_name = py_name.replace("-", "_")
+    react_name = REACT_ATTRIBUTE_OVERRIDES.get(py_name, py_name)
+    if react_name == safe_py_name:
+        return safe_py_name
+    return [safe_py_name, react_name]
+
+
 class HtmlEntry:
-    def __init__(self, html_element, html_attributes, html_events):
+    def __init__(self, html_element, html_attributes):
         self.name = html_element.capitalize()
         self.html_element = html_element
-        self.html_attributes = list(map(to_str, html_attributes))
-        self.html_events = list(map(to_str, html_events))
-        self._raw_props = html_attributes
-        self._raw_events = html_events
+        self._raw_props = list(map(to_vue_entry, html_attributes))
+        self.vue_attributes = list(map(to_str, self._raw_props))
+        self.react_attributes = list(map(to_str, map(to_react_entry, html_attributes)))
 
     def __str__(self):
         lines = []
         lines.append(f"class {self.name}(HtmlElement):")
         lines.append('    """')
-        lines.append("    Properties:\n")
-        for name in self._raw_props:
-            lines.append(f"    :param {to_doc_str(name)}:")
-        lines.append("\n    Events:\n")
-        for name in self._raw_events:
-            lines.append(f"    :param {to_doc_str(name)}:")
+        if len(self._raw_props):
+            lines.append("    Properties:\n")
+            for name in self._raw_props:
+                lines.append(f"    :param {to_doc_str(name)}:")
+        else:
+            lines.append(
+                "    No element-specific properties. See AbstractElement for the"
+            )
+            lines.append("    shared attributes/events available on every element.")
         lines.append('\n    """')
         lines.append("    def __init__(self, children=None, **kwargs):")
         lines.append(
             f'        super().__init__("{self.html_element}", children, **kwargs)'
         )
 
-        # List attributes
-        if len(self.html_attributes):
-            lines.append("        self._attr_names += [")
-            for attr in self.html_attributes:
-                lines.append(f"            {attr},")
-            lines.append("        ]")
-
-        # List events
-        if len(self.html_attributes):
-            lines.append("        self._event_names += [")
-            for event in self.html_events:
-                lines.append(f"            {event},")
-            lines.append("        ]")
+        if len(self.vue_attributes):
+            lines.append("        if self.server.client_type in VUE_CLIENT_TYPES:")
+            lines.append("            self.props += [")
+            for attr in self.vue_attributes:
+                lines.append(f"                {attr},")
+            lines.append("            ]")
+            lines.append('        elif self.server.client_type == "react":')
+            lines.append("            self.props += [")
+            for attr in self.react_attributes:
+                lines.append(f"                {attr},")
+            lines.append("            ]")
 
         lines.append("")
         return "\n".join(lines)
@@ -65,29 +181,24 @@ def __str__(self):
 
 # -----------------------------------------------------------------------------
 HTML_ATTRIBUTES = load_json("resources/attributes.json")
-HTML_EVENTS = load_json("resources/events.json")
-HTML_VUEJS = load_json("resources/vue.json")
 
-HTML_ELEMENTS = set(HTML_ATTRIBUTES.keys())
-HTML_ELEMENTS.discard("*")
+# Sorted (not a bare set) so regenerating this file twice in a row produces
+# an identical diff - plain `set` iteration order is subject to Python's
+# per-process string-hash randomization.
+HTML_ELEMENTS = sorted(set(HTML_ATTRIBUTES.keys()) - {"*"})
 
 
 def attributes(name):
-    return (
-        HTML_ATTRIBUTES.get("*", [])
-        + HTML_VUEJS["attributes"].get("*", [])
-        + HTML_ATTRIBUTES.get(name, [])
-        + HTML_VUEJS["attributes"].get(name, [])
-    )
-
-
-def events(name):
-    return (
-        HTML_EVENTS.get("*", [])
-        + HTML_VUEJS["events"].get("*", [])
-        + HTML_EVENTS.get(name, [])
-        + HTML_VUEJS["events"].get(name, [])
-    )
+    """
+    Element-specific attributes only. The universal ones (id, class(Name),
+    style, ref, key, the vue directives, ...) are already added to every
+    element by AbstractElement's active implementation
+    (vue.HtmlElement/react.HtmlElement's own SHARED_ATTRIBUTES/SHARED_PROPS)
+    - baking resources/attributes.json's "*" entry into every generated
+    class here too would just be a redundant (and, for react's differently
+    -spelled prop names, actively incorrect) duplicate.
+    """
+    return HTML_ATTRIBUTES.get(name, [])
 
 
 def generate_html_elements():
@@ -95,6 +206,7 @@ def generate_html_elements():
     output = [
         "# Generated file - DO NOT EDIT",
         "from .core import (",
+        "   VUE_CLIENT_TYPES,",
         "   HtmlElement,",
         "   Template,",
         "   Component,",
@@ -125,7 +237,7 @@ def generate_html_elements():
 
     # Fill classes
     for elem in HTML_ELEMENTS:
-        output.append(str(HtmlEntry(elem, attributes(elem), events(elem))))
+        output.append(str(HtmlEntry(elem, attributes(elem))))
 
     with open(dst_file, "w") as f:
         f.write("\n".join(output))
diff --git a/src/trame_client/widgets/html.py b/src/trame_client/widgets/html.py
index 2a79a5c..3d6eeab 100644
--- a/src/trame_client/widgets/html.py
+++ b/src/trame_client/widgets/html.py
@@ -1,5 +1,6 @@
 # Generated file - DO NOT EDIT
 from .core import (
+    VUE_CLIENT_TYPES,
     HtmlElement,
     Template,
     Component,
@@ -21,2030 +22,125 @@
     "KeepAlive",
     "Teleport",
     "Suspense",
-    "Tr",
-    "Form",
-    "Hr",
-    "Meta",
-    "Link",
-    "Rp",
-    "Label",
-    "Param",
-    "Textarea",
-    "P",
-    "H4",
-    "Iframe",
-    "Canvas",
-    "Table",
-    "Caption",
     "A",
-    "Div",
-    "Span",
-    "Style",
-    "Meter",
-    "Em",
-    "Samp",
-    "Img",
-    "Dialog",
-    "Kbd",
-    "Output",
-    "Video",
-    "Q",
+    "Abbr",
     "Address",
+    "Area",
+    "Article",
+    "Aside",
+    "Audio",
+    "B",
     "Base",
-    "Mark",
-    "Data",
-    "Td",
-    "Picture",
-    "Ol",
-    "Input",
-    "Ruby",
-    "Dfn",
+    "Bdi",
     "Bdo",
-    "Time",
-    "Var",
-    "Select",
-    "Script",
+    "Blockquote",
+    "Body",
+    "Br",
+    "Button",
+    "Canvas",
+    "Caption",
+    "Cite",
+    "Code",
+    "Col",
+    "Colgroup",
+    "Data",
+    "Datalist",
     "Dd",
+    "Del",
+    "Details",
+    "Dfn",
+    "Dialog",
+    "Div",
+    "Dl",
     "Dt",
+    "Em",
+    "Embed",
+    "Fieldset",
     "Figcaption",
+    "Figure",
+    "Footer",
+    "Form",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
     "H6",
-    "Code",
-    "U",
-    "Strong",
-    "B",
-    "Slot",
-    "Area",
-    "Section",
+    "Head",
+    "Header",
     "Hgroup",
-    "Br",
-    "Track",
-    "Svg",
-    "H3",
-    "Legend",
-    "Embed",
-    "Rt",
-    "Map",
-    "Tbody",
-    "H1",
-    "Button",
-    "Dl",
-    "Bdi",
-    "Sub",
-    "Cite",
-    "Aside",
-    "Li",
-    "Colgroup",
+    "Hr",
     "Html",
-    "Audio",
     "I",
-    "Datalist",
-    "Nav",
-    "Tfoot",
+    "Iframe",
+    "Img",
+    "Input",
+    "Ins",
+    "Kbd",
+    "Label",
+    "Legend",
+    "Li",
+    "Link",
     "Main",
-    "H5",
-    "Summary",
+    "Map",
+    "Mark",
+    "Menu",
+    "Meta",
+    "Meter",
+    "Nav",
     "Object",
-    "Footer",
-    "Figure",
+    "Ol",
+    "Optgroup",
+    "Option",
+    "Output",
+    "P",
+    "Param",
+    "Picture",
     "Pre",
+    "Progress",
+    "Q",
+    "Rp",
+    "Rt",
+    "Ruby",
+    "S",
+    "Samp",
+    "Script",
+    "Search",
+    "Section",
+    "Select",
+    "Slot",
+    "Small",
     "Source",
+    "Span",
+    "Strong",
+    "Style",
+    "Sub",
+    "Summary",
+    "Sup",
+    "Svg",
+    "Table",
+    "Tbody",
+    "Td",
+    "Textarea",
+    "Tfoot",
     "Th",
-    "Body",
     "Thead",
-    "Menu",
+    "Time",
     "Title",
-    "Header",
-    "Blockquote",
-    "Details",
-    "Head",
-    "Small",
-    "Optgroup",
-    "Ul",
-    "H2",
-    "Wbr",
-    "Col",
-    "Sup",
-    "Option",
-    "Search",
-    "Ins",
-    "Article",
-    "Fieldset",
-    "Abbr",
-    "S",
-    "Progress",
-    "Del",
-]
-
-
-class Tr(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param bgcolor:
-    :param char:
-    :param charoff:
-    :param valign:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("tr", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "bgcolor",
-            "char",
-            "charoff",
-            "valign",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Form(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param accept:
-    :param accept-charset:
-    :param action:
-    :param autocomplete:
-    :param enctype:
-    :param method:
-    :param name:
-    :param novalidate:
-    :param target:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("form", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "accept",
-            "accept-charset",
-            "action",
-            "autocomplete",
-            "enctype",
-            "method",
-            "name",
-            "novalidate",
-            "target",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Hr(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param noshade:
-    :param size:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("hr", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "noshade",
-            "size",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Meta(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param charset:
-    :param content:
-    :param http-equiv:
-    :param media:
-    :param name:
-    :param scheme:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("meta", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "charset",
-            "content",
-            "http-equiv",
-            "media",
-            "name",
-            "scheme",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Link(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param as:
-    :param charset:
-    :param color:
-    :param crossorigin:
-    :param disabled:
-    :param href:
-    :param hreflang:
-    :param imagesizes:
-    :param imagesrcset:
-    :param integrity:
-    :param media:
-    :param referrerpolicy:
-    :param rel:
-    :param rev:
-    :param sizes:
-    :param target:
-    :param type:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("link", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "as",
-            "charset",
-            "color",
-            "crossorigin",
-            "disabled",
-            "href",
-            "hreflang",
-            "imagesizes",
-            "imagesrcset",
-            "integrity",
-            "media",
-            "referrerpolicy",
-            "rel",
-            "rev",
-            "sizes",
-            "target",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Rp(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("rp", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Label(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param for:
-    :param form:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("label", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "for",
-            "form",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Param(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param name:
-    :param type:
-    :param value:
-    :param valuetype:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("param", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "name",
-            "type",
-            "value",
-            "valuetype",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Textarea(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param autocomplete:
-    :param cols:
-    :param dirname:
-    :param disabled:
-    :param form:
-    :param maxlength:
-    :param minlength:
-    :param name:
-    :param placeholder:
-    :param readonly:
-    :param required:
-    :param rows:
-    :param wrap:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("textarea", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "autocomplete",
-            "cols",
-            "dirname",
-            "disabled",
-            "form",
-            "maxlength",
-            "minlength",
-            "name",
-            "placeholder",
-            "readonly",
-            "required",
-            "rows",
-            "wrap",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class P(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("p", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class H4(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("h4", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Iframe(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param allow:
-    :param allowfullscreen:
-    :param allowpaymentrequest:
-    :param allowusermedia:
-    :param frameborder:
-    :param height:
-    :param loading:
-    :param longdesc:
-    :param marginheight:
-    :param marginwidth:
-    :param name:
-    :param referrerpolicy:
-    :param sandbox:
-    :param scrolling:
-    :param src:
-    :param srcdoc:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("iframe", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "allow",
-            "allowfullscreen",
-            "allowpaymentrequest",
-            "allowusermedia",
-            "frameborder",
-            "height",
-            "loading",
-            "longdesc",
-            "marginheight",
-            "marginwidth",
-            "name",
-            "referrerpolicy",
-            "sandbox",
-            "scrolling",
-            "src",
-            "srcdoc",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Canvas(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param height:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("canvas", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "height",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Table(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param bgcolor:
-    :param border:
-    :param cellpadding:
-    :param cellspacing:
-    :param frame:
-    :param rules:
-    :param summary:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("table", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "bgcolor",
-            "border",
-            "cellpadding",
-            "cellspacing",
-            "frame",
-            "rules",
-            "summary",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Caption(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("caption", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+    "Tr",
+    "Track",
+    "U",
+    "Ul",
+    "Var",
+    "Video",
+    "Wbr",
+]
 
 
 class A(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
     :param charset:
     :param coords:
     :param download:
@@ -2059,11358 +155,2745 @@ class A(HtmlElement):
     :param target:
     :param type:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
         super().__init__("a", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "charset",
-            "coords",
-            "download",
-            "href",
-            "hreflang",
-            "name",
-            "ping",
-            "referrerpolicy",
-            "rel",
-            "rev",
-            "shape",
-            "target",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "charset",
+                "coords",
+                "download",
+                "href",
+                "hreflang",
+                "name",
+                "ping",
+                "referrerpolicy",
+                "rel",
+                "rev",
+                "shape",
+                "target",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["charset", "charSet"],
+                "coords",
+                "download",
+                "href",
+                ["hreflang", "hrefLang"],
+                "name",
+                "ping",
+                ["referrerpolicy", "referrerPolicy"],
+                "rel",
+                "rev",
+                "shape",
+                "target",
+                "type",
+            ]
 
 
-class Div(HtmlElement):
+class Abbr(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("div", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("abbr", children, **kwargs)
 
 
-class Span(HtmlElement):
+class Address(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("span", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("address", children, **kwargs)
 
 
-class Style(HtmlElement):
+class Area(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param media:
+    :param alt:
+    :param coords:
+    :param download:
+    :param href:
+    :param hreflang:
+    :param nohref:
+    :param ping:
+    :param referrerpolicy:
+    :param rel:
+    :param shape:
+    :param target:
     :param type:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("style", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "media",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("area", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "alt",
+                "coords",
+                "download",
+                "href",
+                "hreflang",
+                "nohref",
+                "ping",
+                "referrerpolicy",
+                "rel",
+                "shape",
+                "target",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "alt",
+                "coords",
+                "download",
+                "href",
+                ["hreflang", "hrefLang"],
+                "nohref",
+                "ping",
+                ["referrerpolicy", "referrerPolicy"],
+                "rel",
+                "shape",
+                "target",
+                "type",
+            ]
 
 
-class Meter(HtmlElement):
+class Article(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param high:
-    :param low:
-    :param max:
-    :param min:
-    :param optimum:
-    :param value:
+    """
 
-    Events:
+    def __init__(self, children=None, **kwargs):
+        super().__init__("article", children, **kwargs)
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+
+class Aside(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("meter", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "high",
-            "low",
-            "max",
-            "min",
-            "optimum",
-            "value",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("aside", children, **kwargs)
 
 
-class Em(HtmlElement):
+class Audio(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param autoplay:
+    :param controls:
+    :param crossorigin:
+    :param loop:
+    :param muted:
+    :param preload:
+    :param src:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("em", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("audio", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "autoplay",
+                "controls",
+                "crossorigin",
+                "loop",
+                "muted",
+                "preload",
+                "src",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["autoplay", "autoPlay"],
+                "controls",
+                ["crossorigin", "crossOrigin"],
+                "loop",
+                "muted",
+                "preload",
+                "src",
+            ]
 
 
-class Samp(HtmlElement):
+class B(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("samp", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("b", children, **kwargs)
 
 
-class Img(HtmlElement):
+class Base(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param alt:
-    :param border:
-    :param crossorigin:
-    :param decoding:
-    :param height:
-    :param hspace:
-    :param ismap:
-    :param loading:
-    :param longdesc:
-    :param name:
-    :param referrerpolicy:
-    :param sizes:
-    :param src:
-    :param srcset:
-    :param usemap:
-    :param vspace:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param href:
+    :param target:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("img", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "alt",
-            "border",
-            "crossorigin",
-            "decoding",
-            "height",
-            "hspace",
-            "ismap",
-            "loading",
-            "longdesc",
-            "name",
-            "referrerpolicy",
-            "sizes",
-            "src",
-            "srcset",
-            "usemap",
-            "vspace",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("base", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "href",
+                "target",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "href",
+                "target",
+            ]
 
 
-class Dialog(HtmlElement):
+class Bdi(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param open:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("dialog", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "open",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("bdi", children, **kwargs)
 
 
-class Kbd(HtmlElement):
+class Bdo(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
     :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("kbd", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("bdo", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "dir",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "dir",
+            ]
 
 
-class Output(HtmlElement):
+class Blockquote(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param for:
-    :param form:
-    :param name:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param cite:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("output", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "for",
-            "form",
-            "name",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("blockquote", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "cite",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "cite",
+            ]
 
 
-class Video(HtmlElement):
+class Body(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param autoplay:
-    :param controls:
-    :param crossorigin:
-    :param height:
-    :param loop:
-    :param muted:
-    :param playsinline:
-    :param poster:
-    :param preload:
-    :param src:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param alink:
+    :param background:
+    :param bgcolor:
+    :param link:
+    :param text:
+    :param vlink:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("video", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "autoplay",
-            "controls",
-            "crossorigin",
-            "height",
-            "loop",
-            "muted",
-            "playsinline",
-            "poster",
-            "preload",
-            "src",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("body", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "alink",
+                "background",
+                "bgcolor",
+                "link",
+                "text",
+                "vlink",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "alink",
+                "background",
+                "bgcolor",
+                "link",
+                "text",
+                "vlink",
+            ]
 
 
-class Q(HtmlElement):
+class Br(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param cite:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param clear:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("q", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "cite",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("br", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "clear",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "clear",
+            ]
 
 
-class Address(HtmlElement):
+class Button(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param disabled:
+    :param form:
+    :param formaction:
+    :param formenctype:
+    :param formmethod:
+    :param formnovalidate:
+    :param formtarget:
+    :param name:
+    :param type:
+    :param value:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("address", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("button", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "disabled",
+                "form",
+                "formaction",
+                "formenctype",
+                "formmethod",
+                "formnovalidate",
+                "formtarget",
+                "name",
+                "type",
+                "value",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "disabled",
+                "form",
+                ["formaction", "formAction"],
+                ["formenctype", "formEncType"],
+                ["formmethod", "formMethod"],
+                ["formnovalidate", "formNoValidate"],
+                ["formtarget", "formTarget"],
+                "name",
+                "type",
+                "value",
+            ]
 
 
-class Base(HtmlElement):
+class Canvas(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param href:
-    :param target:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param height:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("base", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "href",
-            "target",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("canvas", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "height",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "height",
+                "width",
+            ]
 
 
-class Mark(HtmlElement):
+class Caption(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("mark", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("caption", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Data(HtmlElement):
+class Cite(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param value:
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("cite", children, **kwargs)
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Code(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("data", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "value",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("code", children, **kwargs)
 
 
-class Td(HtmlElement):
+class Col(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param abbr:
     :param align:
-    :param axis:
-    :param bgcolor:
     :param char:
     :param charoff:
-    :param colspan:
-    :param headers:
-    :param height:
-    :param nowrap:
-    :param rowspan:
-    :param scope:
+    :param span:
     :param valign:
     :param width:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
-    """
-
-    def __init__(self, children=None, **kwargs):
-        super().__init__("td", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "abbr",
-            "align",
-            "axis",
-            "bgcolor",
-            "char",
-            "charoff",
-            "colspan",
-            "headers",
-            "height",
-            "nowrap",
-            "rowspan",
-            "scope",
-            "valign",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
-
-
-class Picture(HtmlElement):
-    """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("picture", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("col", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "char",
+                "charoff",
+                "span",
+                "valign",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "char",
+                ["charoff", "charOff"],
+                "span",
+                "valign",
+                "width",
+            ]
 
 
-class Ol(HtmlElement):
+class Colgroup(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param compact:
-    :param reversed:
-    :param start:
-    :param type:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param char:
+    :param charoff:
+    :param span:
+    :param valign:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("ol", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "compact",
-            "reversed",
-            "start",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("colgroup", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "char",
+                "charoff",
+                "span",
+                "valign",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "char",
+                ["charoff", "charOff"],
+                "span",
+                "valign",
+                "width",
+            ]
 
 
-class Input(HtmlElement):
+class Data(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param accept:
-    :param align:
-    :param alt:
-    :param autocomplete:
-    :param checked:
-    :param dirname:
-    :param disabled:
-    :param form:
-    :param formaction:
-    :param formenctype:
-    :param formmethod:
-    :param formnovalidate:
-    :param formtarget:
-    :param height:
-    :param ismap:
-    :param list:
-    :param max:
-    :param maxlength:
-    :param min:
-    :param minlength:
-    :param multiple:
-    :param name:
-    :param pattern:
-    :param placeholder:
-    :param readonly:
-    :param required:
-    :param size:
-    :param src:
-    :param step:
-    :param type:
-    :param usemap:
     :param value:
-    :param webkitdirectory:
-    :param width:
 
-    Events:
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("data", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "value",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "value",
+            ]
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+
+class Datalist(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("input", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "accept",
-            "align",
-            "alt",
-            "autocomplete",
-            "checked",
-            "dirname",
-            "disabled",
-            "form",
-            "formaction",
-            "formenctype",
-            "formmethod",
-            "formnovalidate",
-            "formtarget",
-            "height",
-            "ismap",
-            "list",
-            "max",
-            "maxlength",
-            "min",
-            "minlength",
-            "multiple",
-            "name",
-            "pattern",
-            "placeholder",
-            "readonly",
-            "required",
-            "size",
-            "src",
-            "step",
-            "type",
-            "usemap",
-            "value",
-            "webkitdirectory",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("datalist", children, **kwargs)
 
 
-class Ruby(HtmlElement):
+class Dd(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("ruby", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("dd", children, **kwargs)
 
 
-class Dfn(HtmlElement):
+class Del(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param cite:
+    :param datetime:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("dfn", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("del", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "cite",
+                "datetime",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "cite",
+                ["datetime", "dateTime"],
+            ]
 
 
-class Bdo(HtmlElement):
+class Details(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param dir:
+    :param open:
+
+    """
 
-    Events:
+    def __init__(self, children=None, **kwargs):
+        super().__init__("details", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "open",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "open",
+            ]
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+
+class Dfn(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("bdo", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "dir",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("dfn", children, **kwargs)
 
 
-class Time(HtmlElement):
+class Dialog(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param datetime:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param open:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("time", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "datetime",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("dialog", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "open",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "open",
+            ]
 
 
-class Var(HtmlElement):
+class Div(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("var", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("div", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Select(HtmlElement):
+class Dl(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param autocomplete:
-    :param disabled:
-    :param form:
-    :param multiple:
-    :param name:
-    :param required:
-    :param size:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param compact:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("select", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "autocomplete",
-            "disabled",
-            "form",
-            "multiple",
-            "name",
-            "required",
-            "size",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("dl", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "compact",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "compact",
+            ]
 
 
-class Script(HtmlElement):
+class Dt(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param async:
-    :param charset:
-    :param crossorigin:
-    :param defer:
-    :param integrity:
-    :param language:
-    :param nomodule:
-    :param referrerpolicy:
-    :param src:
-    :param type:
+    """
 
-    Events:
+    def __init__(self, children=None, **kwargs):
+        super().__init__("dt", children, **kwargs)
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+
+class Em(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("script", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "async",
-            "charset",
-            "crossorigin",
-            "defer",
-            "integrity",
-            "language",
-            "nomodule",
-            "referrerpolicy",
-            "src",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("em", children, **kwargs)
 
 
-class Dd(HtmlElement):
+class Embed(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param height:
+    :param src:
+    :param type:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("dd", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("embed", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "height",
+                "src",
+                "type",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "height",
+                "src",
+                "type",
+                "width",
+            ]
 
 
-class Dt(HtmlElement):
+class Fieldset(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param disabled:
+    :param form:
+    :param name:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("dt", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("fieldset", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "disabled",
+                "form",
+                "name",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "disabled",
+                "form",
+                "name",
+            ]
 
 
 class Figcaption(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
         super().__init__("figcaption", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
 
 
-class H6(HtmlElement):
+class Figure(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("figure", children, **kwargs)
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Footer(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("h6", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("footer", children, **kwargs)
 
 
-class Code(HtmlElement):
+class Form(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param accept:
+    :param accept_charset:
+    :param action:
+    :param autocomplete:
+    :param enctype:
+    :param method:
+    :param name:
+    :param novalidate:
+    :param target:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("code", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("form", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "accept",
+                ["accept_charset", "accept-charset"],
+                "action",
+                "autocomplete",
+                "enctype",
+                "method",
+                "name",
+                "novalidate",
+                "target",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "accept",
+                ["accept_charset", "acceptCharset"],
+                "action",
+                ["autocomplete", "autoComplete"],
+                "enctype",
+                "method",
+                "name",
+                ["novalidate", "noValidate"],
+                "target",
+            ]
 
 
-class U(HtmlElement):
+class H1(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("u", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("h1", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Strong(HtmlElement):
+class H2(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("strong", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("h2", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class B(HtmlElement):
+class H3(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("b", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("h3", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Slot(HtmlElement):
+class H4(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param name:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("slot", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "name",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("h4", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Area(HtmlElement):
+class H5(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param alt:
-    :param coords:
-    :param download:
-    :param href:
-    :param hreflang:
-    :param nohref:
-    :param ping:
-    :param referrerpolicy:
-    :param rel:
-    :param shape:
-    :param target:
-    :param type:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("area", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "alt",
-            "coords",
-            "download",
-            "href",
-            "hreflang",
-            "nohref",
-            "ping",
-            "referrerpolicy",
-            "rel",
-            "shape",
-            "target",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("h5", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Section(HtmlElement):
+class H6(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("section", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("h6", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Hgroup(HtmlElement):
+class Head(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param profile:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("hgroup", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("head", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "profile",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "profile",
+            ]
 
 
-class Br(HtmlElement):
+class Header(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param clear:
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("header", children, **kwargs)
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Hgroup(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("br", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "clear",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("hgroup", children, **kwargs)
 
 
-class Track(HtmlElement):
+class Hr(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param default:
-    :param kind:
-    :param label:
-    :param src:
-    :param srclang:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param noshade:
+    :param size:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("track", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "default",
-            "kind",
-            "label",
-            "src",
-            "srclang",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("hr", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "noshade",
+                "size",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "noshade",
+                "size",
+                "width",
+            ]
 
 
-class Svg(HtmlElement):
+class Html(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param width:
-    :param height:
-    :param xmlns:
+    :param manifest:
+    :param version:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("html", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "manifest",
+                "version",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "manifest",
+                "version",
+            ]
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class I(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("svg", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "width",
-            "height",
-            "xmlns",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("i", children, **kwargs)
 
 
-class H3(HtmlElement):
+class Iframe(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
     :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param allow:
+    :param allowfullscreen:
+    :param allowpaymentrequest:
+    :param allowusermedia:
+    :param frameborder:
+    :param height:
+    :param loading:
+    :param longdesc:
+    :param marginheight:
+    :param marginwidth:
+    :param name:
+    :param referrerpolicy:
+    :param sandbox:
+    :param scrolling:
+    :param src:
+    :param srcdoc:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("h3", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("iframe", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "allow",
+                "allowfullscreen",
+                "allowpaymentrequest",
+                "allowusermedia",
+                "frameborder",
+                "height",
+                "loading",
+                "longdesc",
+                "marginheight",
+                "marginwidth",
+                "name",
+                "referrerpolicy",
+                "sandbox",
+                "scrolling",
+                "src",
+                "srcdoc",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "allow",
+                ["allowfullscreen", "allowFullScreen"],
+                ["allowpaymentrequest", "allowPaymentRequest"],
+                ["allowusermedia", "allowUserMedia"],
+                ["frameborder", "frameBorder"],
+                "height",
+                "loading",
+                ["longdesc", "longDesc"],
+                ["marginheight", "marginHeight"],
+                ["marginwidth", "marginWidth"],
+                "name",
+                ["referrerpolicy", "referrerPolicy"],
+                "sandbox",
+                "scrolling",
+                "src",
+                ["srcdoc", "srcDoc"],
+                "width",
+            ]
 
 
-class Legend(HtmlElement):
+class Img(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
     :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param alt:
+    :param border:
+    :param crossorigin:
+    :param decoding:
+    :param height:
+    :param hspace:
+    :param ismap:
+    :param loading:
+    :param longdesc:
+    :param name:
+    :param referrerpolicy:
+    :param sizes:
+    :param src:
+    :param srcset:
+    :param usemap:
+    :param vspace:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("legend", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("img", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "alt",
+                "border",
+                "crossorigin",
+                "decoding",
+                "height",
+                "hspace",
+                "ismap",
+                "loading",
+                "longdesc",
+                "name",
+                "referrerpolicy",
+                "sizes",
+                "src",
+                "srcset",
+                "usemap",
+                "vspace",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "alt",
+                "border",
+                ["crossorigin", "crossOrigin"],
+                "decoding",
+                "height",
+                "hspace",
+                ["ismap", "isMap"],
+                "loading",
+                ["longdesc", "longDesc"],
+                "name",
+                ["referrerpolicy", "referrerPolicy"],
+                "sizes",
+                "src",
+                ["srcset", "srcSet"],
+                ["usemap", "useMap"],
+                "vspace",
+                "width",
+            ]
 
 
-class Embed(HtmlElement):
+class Input(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
+    :param accept:
+    :param align:
+    :param alt:
+    :param autocomplete:
+    :param checked:
+    :param dirname:
+    :param disabled:
+    :param form:
+    :param formaction:
+    :param formenctype:
+    :param formmethod:
+    :param formnovalidate:
+    :param formtarget:
     :param height:
+    :param ismap:
+    :param list:
+    :param max:
+    :param maxlength:
+    :param min:
+    :param minlength:
+    :param multiple:
+    :param name:
+    :param pattern:
+    :param placeholder:
+    :param readonly:
+    :param required:
+    :param size:
     :param src:
+    :param step:
     :param type:
+    :param usemap:
+    :param value:
     :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param webkitdirectory:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("embed", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "height",
-            "src",
-            "type",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("input", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "accept",
+                "align",
+                "alt",
+                "autocomplete",
+                "checked",
+                "dirname",
+                "disabled",
+                "form",
+                "formaction",
+                "formenctype",
+                "formmethod",
+                "formnovalidate",
+                "formtarget",
+                "height",
+                "ismap",
+                "list",
+                "max",
+                "maxlength",
+                "min",
+                "minlength",
+                "multiple",
+                "name",
+                "pattern",
+                "placeholder",
+                "readonly",
+                "required",
+                "size",
+                "src",
+                "step",
+                "type",
+                "usemap",
+                "value",
+                "width",
+                "webkitdirectory",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "accept",
+                "align",
+                "alt",
+                ["autocomplete", "autoComplete"],
+                "checked",
+                ["dirname", "dirName"],
+                "disabled",
+                "form",
+                ["formaction", "formAction"],
+                ["formenctype", "formEncType"],
+                ["formmethod", "formMethod"],
+                ["formnovalidate", "formNoValidate"],
+                ["formtarget", "formTarget"],
+                "height",
+                ["ismap", "isMap"],
+                "list",
+                "max",
+                ["maxlength", "maxLength"],
+                "min",
+                ["minlength", "minLength"],
+                "multiple",
+                "name",
+                "pattern",
+                "placeholder",
+                ["readonly", "readOnly"],
+                "required",
+                "size",
+                "src",
+                "step",
+                "type",
+                ["usemap", "useMap"],
+                "value",
+                "width",
+                ["webkitdirectory", "webkitDirectory"],
+            ]
 
 
-class Rt(HtmlElement):
+class Ins(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param cite:
+    :param datetime:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("rt", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("ins", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "cite",
+                "datetime",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "cite",
+                ["datetime", "dateTime"],
+            ]
 
 
-class Map(HtmlElement):
+class Kbd(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param name:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("map", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "name",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("kbd", children, **kwargs)
 
 
-class Tbody(HtmlElement):
+class Label(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param char:
-    :param charoff:
-    :param valign:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param for:
+    :param form:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("tbody", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "char",
-            "charoff",
-            "valign",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("label", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "for",
+                "form",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["for", "htmlFor"],
+                "form",
+            ]
 
 
-class H1(HtmlElement):
+class Legend(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
     :param align:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("h1", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("legend", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Button(HtmlElement):
+class Li(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param disabled:
-    :param form:
-    :param formaction:
-    :param formenctype:
-    :param formmethod:
-    :param formnovalidate:
-    :param formtarget:
-    :param name:
     :param type:
     :param value:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("button", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "disabled",
-            "form",
-            "formaction",
-            "formenctype",
-            "formmethod",
-            "formnovalidate",
-            "formtarget",
-            "name",
-            "type",
-            "value",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("li", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "type",
+                "value",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "type",
+                "value",
+            ]
 
 
-class Dl(HtmlElement):
+class Link(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param compact:
+    :param as:
+    :param charset:
+    :param color:
+    :param crossorigin:
+    :param disabled:
+    :param href:
+    :param hreflang:
+    :param imagesizes:
+    :param imagesrcset:
+    :param integrity:
+    :param media:
+    :param referrerpolicy:
+    :param rel:
+    :param rev:
+    :param sizes:
+    :param target:
+    :param type:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("link", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "as",
+                "charset",
+                "color",
+                "crossorigin",
+                "disabled",
+                "href",
+                "hreflang",
+                "imagesizes",
+                "imagesrcset",
+                "integrity",
+                "media",
+                "referrerpolicy",
+                "rel",
+                "rev",
+                "sizes",
+                "target",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "as",
+                ["charset", "charSet"],
+                "color",
+                ["crossorigin", "crossOrigin"],
+                "disabled",
+                "href",
+                ["hreflang", "hrefLang"],
+                ["imagesizes", "imageSizes"],
+                ["imagesrcset", "imageSrcSet"],
+                "integrity",
+                "media",
+                ["referrerpolicy", "referrerPolicy"],
+                "rel",
+                "rev",
+                "sizes",
+                "target",
+                "type",
+            ]
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Main(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("dl", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "compact",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("main", children, **kwargs)
 
 
-class Bdi(HtmlElement):
+class Map(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param name:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("bdi", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("map", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "name",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "name",
+            ]
 
 
-class Sub(HtmlElement):
+class Mark(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("sub", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("mark", children, **kwargs)
 
 
-class Cite(HtmlElement):
+class Menu(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param compact:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("cite", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("menu", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "compact",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "compact",
+            ]
 
 
-class Aside(HtmlElement):
+class Meta(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param charset:
+    :param content:
+    :param http_equiv:
+    :param media:
+    :param name:
+    :param scheme:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("aside", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("meta", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "charset",
+                "content",
+                ["http_equiv", "http-equiv"],
+                "media",
+                "name",
+                "scheme",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["charset", "charSet"],
+                "content",
+                ["http_equiv", "httpEquiv"],
+                "media",
+                "name",
+                "scheme",
+            ]
 
 
-class Li(HtmlElement):
+class Meter(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param type:
+    :param high:
+    :param low:
+    :param max:
+    :param min:
+    :param optimum:
     :param value:
 
-    Events:
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("meter", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "high",
+                "low",
+                "max",
+                "min",
+                "optimum",
+                "value",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "high",
+                "low",
+                "max",
+                "min",
+                "optimum",
+                "value",
+            ]
+
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Nav(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("li", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "type",
-            "value",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("nav", children, **kwargs)
 
 
-class Colgroup(HtmlElement):
+class Object(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
     :param align:
-    :param char:
-    :param charoff:
-    :param span:
-    :param valign:
+    :param archive:
+    :param border:
+    :param classid:
+    :param codebase:
+    :param codetype:
+    :param data:
+    :param declare:
+    :param form:
+    :param height:
+    :param hspace:
+    :param name:
+    :param standby:
+    :param type:
+    :param typemustmatch:
+    :param usemap:
+    :param vspace:
     :param width:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("colgroup", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "char",
-            "charoff",
-            "span",
-            "valign",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("object", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "archive",
+                "border",
+                "classid",
+                "codebase",
+                "codetype",
+                "data",
+                "declare",
+                "form",
+                "height",
+                "hspace",
+                "name",
+                "standby",
+                "type",
+                "typemustmatch",
+                "usemap",
+                "vspace",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "archive",
+                "border",
+                ["classid", "classID"],
+                ["codebase", "codeBase"],
+                ["codetype", "codeType"],
+                "data",
+                "declare",
+                "form",
+                "height",
+                "hspace",
+                "name",
+                "standby",
+                "type",
+                ["typemustmatch", "typeMustMatch"],
+                ["usemap", "useMap"],
+                "vspace",
+                "width",
+            ]
 
 
-class Html(HtmlElement):
+class Ol(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param manifest:
-    :param version:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param compact:
+    :param reversed:
+    :param start:
+    :param type:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("html", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "manifest",
-            "version",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("ol", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "compact",
+                "reversed",
+                "start",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "compact",
+                "reversed",
+                "start",
+                "type",
+            ]
 
 
-class Audio(HtmlElement):
+class Optgroup(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param autoplay:
-    :param controls:
-    :param crossorigin:
-    :param loop:
-    :param muted:
-    :param preload:
-    :param src:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param disabled:
+    :param label:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("audio", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "autoplay",
-            "controls",
-            "crossorigin",
-            "loop",
-            "muted",
-            "preload",
-            "src",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("optgroup", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "disabled",
+                "label",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "disabled",
+                "label",
+            ]
 
 
-class I(HtmlElement):
+class Option(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param disabled:
+    :param label:
+    :param selected:
+    :param value:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("i", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("option", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "disabled",
+                "label",
+                "selected",
+                "value",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "disabled",
+                "label",
+                "selected",
+                "value",
+            ]
 
 
-class Datalist(HtmlElement):
+class Output(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param for:
+    :param form:
+    :param name:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("datalist", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("output", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "for",
+                "form",
+                "name",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["for", "htmlFor"],
+                "form",
+                "name",
+            ]
 
 
-class Nav(HtmlElement):
+class P(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("nav", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("p", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+            ]
 
 
-class Tfoot(HtmlElement):
+class Param(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param char:
-    :param charoff:
-    :param valign:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param name:
+    :param type:
+    :param value:
+    :param valuetype:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("tfoot", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "char",
-            "charoff",
-            "valign",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("param", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "name",
+                "type",
+                "value",
+                "valuetype",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "name",
+                "type",
+                "value",
+                ["valuetype", "valueType"],
+            ]
 
 
-class Main(HtmlElement):
+class Picture(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("main", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("picture", children, **kwargs)
 
 
-class H5(HtmlElement):
+class Pre(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("h5", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("pre", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "width",
+            ]
 
 
-class Summary(HtmlElement):
+class Progress(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param max:
+    :param value:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("summary", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("progress", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "max",
+                "value",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "max",
+                "value",
+            ]
 
 
-class Object(HtmlElement):
+class Q(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param archive:
-    :param border:
-    :param classid:
-    :param codebase:
-    :param codetype:
-    :param data:
-    :param declare:
-    :param form:
-    :param height:
-    :param hspace:
-    :param name:
-    :param standby:
-    :param type:
-    :param typemustmatch:
-    :param usemap:
-    :param vspace:
-    :param width:
+    :param cite:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("q", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "cite",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "cite",
+            ]
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Rp(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("object", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "archive",
-            "border",
-            "classid",
-            "codebase",
-            "codetype",
-            "data",
-            "declare",
-            "form",
-            "height",
-            "hspace",
-            "name",
-            "standby",
-            "type",
-            "typemustmatch",
-            "usemap",
-            "vspace",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("rp", children, **kwargs)
 
 
-class Footer(HtmlElement):
+class Rt(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("footer", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("rt", children, **kwargs)
 
 
-class Figure(HtmlElement):
+class Ruby(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("figure", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("ruby", children, **kwargs)
 
 
-class Pre(HtmlElement):
+class S(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param width:
+    """
 
-    Events:
+    def __init__(self, children=None, **kwargs):
+        super().__init__("s", children, **kwargs)
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+
+class Samp(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("pre", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("samp", children, **kwargs)
 
 
-class Source(HtmlElement):
+class Script(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param height:
-    :param media:
-    :param sizes:
+    :param async:
+    :param charset:
+    :param crossorigin:
+    :param defer:
+    :param integrity:
+    :param language:
+    :param nomodule:
+    :param referrerpolicy:
     :param src:
-    :param srcset:
     :param type:
-    :param width:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("source", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "height",
-            "media",
-            "sizes",
-            "src",
-            "srcset",
-            "type",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("script", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "async",
+                "charset",
+                "crossorigin",
+                "defer",
+                "integrity",
+                "language",
+                "nomodule",
+                "referrerpolicy",
+                "src",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "async",
+                ["charset", "charSet"],
+                ["crossorigin", "crossOrigin"],
+                "defer",
+                "integrity",
+                "language",
+                ["nomodule", "noModule"],
+                ["referrerpolicy", "referrerPolicy"],
+                "src",
+                "type",
+            ]
 
 
-class Th(HtmlElement):
+class Search(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param abbr:
-    :param align:
-    :param axis:
-    :param bgcolor:
-    :param char:
-    :param charoff:
-    :param colspan:
-    :param headers:
-    :param height:
-    :param nowrap:
-    :param rowspan:
-    :param scope:
-    :param valign:
-    :param width:
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("search", children, **kwargs)
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Section(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("th", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "abbr",
-            "align",
-            "axis",
-            "bgcolor",
-            "char",
-            "charoff",
-            "colspan",
-            "headers",
-            "height",
-            "nowrap",
-            "rowspan",
-            "scope",
-            "valign",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("section", children, **kwargs)
 
 
-class Body(HtmlElement):
+class Select(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param alink:
-    :param background:
-    :param bgcolor:
-    :param link:
-    :param text:
-    :param vlink:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param autocomplete:
+    :param disabled:
+    :param form:
+    :param multiple:
+    :param name:
+    :param required:
+    :param size:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("body", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "alink",
-            "background",
-            "bgcolor",
-            "link",
-            "text",
-            "vlink",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("select", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "autocomplete",
+                "disabled",
+                "form",
+                "multiple",
+                "name",
+                "required",
+                "size",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["autocomplete", "autoComplete"],
+                "disabled",
+                "form",
+                "multiple",
+                "name",
+                "required",
+                "size",
+            ]
 
 
-class Thead(HtmlElement):
+class Slot(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-    :param char:
-    :param charoff:
-    :param valign:
+    :param name:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("slot", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "name",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "name",
+            ]
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Small(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("thead", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "char",
-            "charoff",
-            "valign",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("small", children, **kwargs)
 
 
-class Menu(HtmlElement):
+class Source(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param compact:
+    :param height:
+    :param media:
+    :param sizes:
+    :param src:
+    :param srcset:
+    :param type:
+    :param width:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("source", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "height",
+                "media",
+                "sizes",
+                "src",
+                "srcset",
+                "type",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "height",
+                "media",
+                "sizes",
+                "src",
+                ["srcset", "srcSet"],
+                "type",
+                "width",
+            ]
 
-    Events:
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+class Span(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("menu", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "compact",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("span", children, **kwargs)
 
 
-class Title(HtmlElement):
+class Strong(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("title", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("strong", children, **kwargs)
 
 
-class Header(HtmlElement):
+class Style(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param media:
+    :param type:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("header", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("style", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "media",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "media",
+                "type",
+            ]
 
 
-class Blockquote(HtmlElement):
+class Sub(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param cite:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("blockquote", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "cite",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("sub", children, **kwargs)
 
 
-class Details(HtmlElement):
+class Summary(HtmlElement):
     """
-    Properties:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param open:
+    """
 
-    Events:
+    def __init__(self, children=None, **kwargs):
+        super().__init__("summary", children, **kwargs)
 
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+
+class Sup(HtmlElement):
+    """
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("details", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "open",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("sup", children, **kwargs)
 
 
-class Head(HtmlElement):
+class Svg(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param profile:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param width:
+    :param height:
+    :param xmlns:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("head", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "profile",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("svg", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "width",
+                "height",
+                "xmlns",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "width",
+                "height",
+                "xmlns",
+            ]
 
 
-class Small(HtmlElement):
+class Table(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param bgcolor:
+    :param border:
+    :param cellpadding:
+    :param cellspacing:
+    :param frame:
+    :param rules:
+    :param summary:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("small", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("table", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "bgcolor",
+                "border",
+                "cellpadding",
+                "cellspacing",
+                "frame",
+                "rules",
+                "summary",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "bgcolor",
+                "border",
+                ["cellpadding", "cellPadding"],
+                ["cellspacing", "cellSpacing"],
+                "frame",
+                "rules",
+                "summary",
+                "width",
+            ]
 
 
-class Optgroup(HtmlElement):
+class Tbody(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param disabled:
-    :param label:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param char:
+    :param charoff:
+    :param valign:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("optgroup", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "disabled",
-            "label",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("tbody", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "char",
+                "charoff",
+                "valign",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "char",
+                ["charoff", "charOff"],
+                "valign",
+            ]
 
 
-class Ul(HtmlElement):
+class Td(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param compact:
-    :param type:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param abbr:
+    :param align:
+    :param axis:
+    :param bgcolor:
+    :param char:
+    :param charoff:
+    :param colspan:
+    :param headers:
+    :param height:
+    :param nowrap:
+    :param rowspan:
+    :param scope:
+    :param valign:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("ul", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "compact",
-            "type",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("td", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "abbr",
+                "align",
+                "axis",
+                "bgcolor",
+                "char",
+                "charoff",
+                "colspan",
+                "headers",
+                "height",
+                "nowrap",
+                "rowspan",
+                "scope",
+                "valign",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "abbr",
+                "align",
+                "axis",
+                "bgcolor",
+                "char",
+                ["charoff", "charOff"],
+                ["colspan", "colSpan"],
+                "headers",
+                "height",
+                "nowrap",
+                ["rowspan", "rowSpan"],
+                "scope",
+                "valign",
+                "width",
+            ]
 
 
-class H2(HtmlElement):
+class Textarea(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param align:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param autocomplete:
+    :param cols:
+    :param dirname:
+    :param disabled:
+    :param form:
+    :param maxlength:
+    :param minlength:
+    :param name:
+    :param placeholder:
+    :param readonly:
+    :param required:
+    :param rows:
+    :param wrap:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("h2", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("textarea", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "autocomplete",
+                "cols",
+                "dirname",
+                "disabled",
+                "form",
+                "maxlength",
+                "minlength",
+                "name",
+                "placeholder",
+                "readonly",
+                "required",
+                "rows",
+                "wrap",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["autocomplete", "autoComplete"],
+                "cols",
+                ["dirname", "dirName"],
+                "disabled",
+                "form",
+                ["maxlength", "maxLength"],
+                ["minlength", "minLength"],
+                "name",
+                "placeholder",
+                ["readonly", "readOnly"],
+                "required",
+                "rows",
+                "wrap",
+            ]
 
 
-class Wbr(HtmlElement):
+class Tfoot(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param char:
+    :param charoff:
+    :param valign:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("wbr", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("tfoot", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "char",
+                "charoff",
+                "valign",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "char",
+                ["charoff", "charOff"],
+                "valign",
+            ]
 
 
-class Col(HtmlElement):
+class Th(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
+    :param abbr:
     :param align:
+    :param axis:
+    :param bgcolor:
     :param char:
     :param charoff:
-    :param span:
+    :param colspan:
+    :param headers:
+    :param height:
+    :param nowrap:
+    :param rowspan:
+    :param scope:
     :param valign:
     :param width:
 
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
-
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("col", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "align",
-            "char",
-            "charoff",
-            "span",
-            "valign",
-            "width",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("th", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "abbr",
+                "align",
+                "axis",
+                "bgcolor",
+                "char",
+                "charoff",
+                "colspan",
+                "headers",
+                "height",
+                "nowrap",
+                "rowspan",
+                "scope",
+                "valign",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "abbr",
+                "align",
+                "axis",
+                "bgcolor",
+                "char",
+                ["charoff", "charOff"],
+                ["colspan", "colSpan"],
+                "headers",
+                "height",
+                "nowrap",
+                ["rowspan", "rowSpan"],
+                "scope",
+                "valign",
+                "width",
+            ]
 
 
-class Sup(HtmlElement):
+class Thead(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param char:
+    :param charoff:
+    :param valign:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("sup", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("thead", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "char",
+                "charoff",
+                "valign",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "char",
+                ["charoff", "charOff"],
+                "valign",
+            ]
 
 
-class Option(HtmlElement):
+class Time(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param disabled:
-    :param label:
-    :param selected:
-    :param value:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param datetime:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("option", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "disabled",
-            "label",
-            "selected",
-            "value",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("time", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "datetime",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["datetime", "dateTime"],
+            ]
 
 
-class Search(HtmlElement):
+class Title(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("search", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("title", children, **kwargs)
 
 
-class Ins(HtmlElement):
+class Tr(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param cite:
-    :param datetime:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param align:
+    :param bgcolor:
+    :param char:
+    :param charoff:
+    :param valign:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("ins", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "cite",
-            "datetime",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("tr", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "align",
+                "bgcolor",
+                "char",
+                "charoff",
+                "valign",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "align",
+                "bgcolor",
+                "char",
+                ["charoff", "charOff"],
+                "valign",
+            ]
 
 
-class Article(HtmlElement):
+class Track(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param default:
+    :param kind:
+    :param label:
+    :param src:
+    :param srclang:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("article", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("track", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "default",
+                "kind",
+                "label",
+                "src",
+                "srclang",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "default",
+                "kind",
+                "label",
+                "src",
+                ["srclang", "srcLang"],
+            ]
 
 
-class Fieldset(HtmlElement):
+class U(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param disabled:
-    :param form:
-    :param name:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("fieldset", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "disabled",
-            "form",
-            "name",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("u", children, **kwargs)
 
 
-class Abbr(HtmlElement):
+class Ul(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param compact:
+    :param type:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("abbr", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("ul", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "compact",
+                "type",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                "compact",
+                "type",
+            ]
 
 
-class S(HtmlElement):
+class Var(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("s", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("var", children, **kwargs)
 
 
-class Progress(HtmlElement):
+class Video(HtmlElement):
     """
     Properties:
 
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param max:
-    :param value:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    :param autoplay:
+    :param controls:
+    :param crossorigin:
+    :param height:
+    :param loop:
+    :param muted:
+    :param playsinline:
+    :param poster:
+    :param preload:
+    :param src:
+    :param width:
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("progress", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "max",
-            "value",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("video", children, **kwargs)
+        if self.server.client_type in VUE_CLIENT_TYPES:
+            self.props += [
+                "autoplay",
+                "controls",
+                "crossorigin",
+                "height",
+                "loop",
+                "muted",
+                "playsinline",
+                "poster",
+                "preload",
+                "src",
+                "width",
+            ]
+        elif self.server.client_type == "react":
+            self.props += [
+                ["autoplay", "autoPlay"],
+                "controls",
+                ["crossorigin", "crossOrigin"],
+                "height",
+                "loop",
+                "muted",
+                ["playsinline", "playsInline"],
+                "poster",
+                "preload",
+                "src",
+                "width",
+            ]
 
 
-class Del(HtmlElement):
+class Wbr(HtmlElement):
     """
-    Properties:
-
-    :param accesskey:
-    :param autocapitalize:
-    :param autofocus:
-    :param classes:
-    :param contenteditable:
-    :param dir:
-    :param draggable:
-    :param enterkeyhint:
-    :param hidden:
-    :param id:
-    :param inputmode:
-    :param is:
-    :param itemid:
-    :param itemprop:
-    :param itemref:
-    :param itemscope:
-    :param itemtype:
-    :param lang:
-    :param nonce:
-    :param slot:
-    :param spellcheck:
-    :param style:
-    :param tabindex:
-    :param title:
-    :param translate:
-    :param ref:
-    :param key:
-    :param v_on:
-    :param v_bind:
-    :param v_text:
-    :param v_html:
-    :param v_show:
-    :param v_if:
-    :param v_else:
-    :param v_else_if:
-    :param v_for:
-    :param v_model:
-    :param v_pre:
-    :param v_once:
-    :param v_memo:
-    :param v_cloak:
-    :param cite:
-    :param datetime:
-
-    Events:
-
-    :param click:
-    :param mousedown:
-    :param mouseup:
-    :param mouseenter:
-    :param mouseleave:
-    :param contextmenu:
+    No element-specific properties. See AbstractElement for the
+    shared attributes/events available on every element.
 
     """
 
     def __init__(self, children=None, **kwargs):
-        super().__init__("del", children, **kwargs)
-        self._attr_names += [
-            "accesskey",
-            "autocapitalize",
-            "autofocus",
-            ["classes", "class"],
-            "contenteditable",
-            "dir",
-            "draggable",
-            "enterkeyhint",
-            "hidden",
-            "id",
-            "inputmode",
-            "is",
-            "itemid",
-            "itemprop",
-            "itemref",
-            "itemscope",
-            "itemtype",
-            "lang",
-            "nonce",
-            "slot",
-            "spellcheck",
-            "style",
-            "tabindex",
-            "title",
-            "translate",
-            "ref",
-            ["key", ":key"],
-            ["v_on", "v-on"],
-            ["v_bind", "v-bind"],
-            "v_text",
-            "v_html",
-            "v_show",
-            "v_if",
-            "v_else",
-            "v_else_if",
-            "v_for",
-            "v_model",
-            "v_pre",
-            "v_once",
-            "v_memo",
-            "v_cloak",
-            "cite",
-            "datetime",
-        ]
-        self._event_names += [
-            "click",
-            "mousedown",
-            "mouseup",
-            "mouseenter",
-            "mouseleave",
-            "contextmenu",
-        ]
+        super().__init__("wbr", children, **kwargs)
diff --git a/src/trame_client/widgets/react.py b/src/trame_client/widgets/react.py
new file mode 100644
index 0000000..4fa9c81
--- /dev/null
+++ b/src/trame_client/widgets/react.py
@@ -0,0 +1,480 @@
+"""
+React rendering implementation for `trame_client.widgets.core.AbstractElement`.
+
+Unlike Vue, React ships no runtime template compiler, so `AbstractElement.html`
+can't build a template string the way `vue.py` does (see that module's
+docstring). Instead this implements the "serializable widget tree" design from
+`docs/adding-support-for-react/`: each node serializes to a plain
+JSON-compatible `dict` - `{"tag": ..., "props": {...}, "children": [...]}` -
+that a client-side `TrameNode` component (not implemented here - there is no
+React client bundle yet) would walk and turn into `React.createElement(...)`
+calls directly, no compiler needed.
+
+`HtmlElement` (this module) is the `client_type="react"` counterpart to
+`vue.HtmlElement`: `AbstractElement` instantiates one per widget instance (as
+`self._impl`, see `core.py`) whenever `self.server.client_type == "react"`.
+A widget declares its React-specific properties the same way it would for Vue:
+
+    if self.server.client_type in VUE_CLIENT_TYPES:
+        self._impl.props += ["title"]
+        self._impl.events += ["click"]
+    elif self.server.client_type == "react":
+        self._impl.props += ["title"]
+        self._impl.events += [("on_click", "onClick")]
+
+`props`/`events` entries are looked up by their *python* kwarg name and
+serialize under their *react* prop name - a bare string means both are the
+same (already camelCase, matching the JS side directly, e.g. `onClick=`), a
+`(python_name, react_name)` tuple is for the rest (e.g. `("classes", "className")`).
+
+Structural directives that Vue expresses as element attributes (`v-if`,
+`v-for`) have no React equivalent as attributes - React expresses them as
+control flow, so they're modeled here as their own tree nodes instead:
+`If`, `For`. Two-way binding (`v-model`) has no single-directive React
+equivalent either, so it's always spelled out as an explicit `value=`/`onChange=`
+pair using `Bind`/`Callback`. Scoped slots become `Slot` (a render-prop
+generator, see `react-scoped-slots.md`).
+
+Everything under "What's still missing for full parity" in
+`vue-vs-react-with-trame.md` (the widget ecosystem, a client-side expression
+evaluator, fine-grained reactivity, ...) is client-runtime work with no
+existing `react-app/` bundle to receive it - out of scope here. This module
+only builds the Python-side tree/serialization; nothing consumes its output
+yet, and `client_type="react"` still isn't wired into `trame_client.module`
+(there is no built JS bundle to serve).
+
+Where the docs give an exact wire shape (`Bind`, `Callback`, `ref`, `Slot`),
+this follows it exactly. Where they explicitly leave the shape unresolved
+(`If`/`For` - see `vue-vs-react-with-trame.md` section 6, items 1 and 6),
+this picks a shape consistent with the rest of the schema (its own `"tag"`,
+alongside real DOM tags) rather than inventing a second schema.
+"""
+
+from trame_client.utils.defaults import TrameDefault
+from trame_client.widgets.core import HTML_CTX
+
+__all__ = [
+    "Bind",
+    "Callback",
+    "If",
+    "For",
+    "Slot",
+]
+
+
+# -----------------------------------------------------------------------------
+# Value wrappers - Bind / Callback
+# -----------------------------------------------------------------------------
+
+
+class Bind:
+    """
+    react.Bind(js_expression, **state_defaults)
+
+    A JavaScript expression string, evaluated client-side against the current
+    scope (trame state, plus any `For`/`Slot` local scope in effect). A plain
+    state key name (`"count"`) is itself a trivially valid expression.
+
+    Every keyword argument sets a default on trame's shared state - one
+    `state.setdefault(key, value)` call per kwarg - independent of what the
+    expression itself references.
+
+    Usable as a prop value (`value=react.Bind("count", count=2)`), directly
+    inside a `children` list (`html.Div(["count = ", react.Bind("count")])`,
+    see `react-text-interpolation.md`), or nested inside a dict-valued prop
+    such as `style` (`style={"color": react.Bind("color", color="red")}`) -
+    the surrounding dict's other entries stay static.
+    """
+
+    def __init__(self, js_expression, **state_defaults):
+        self.js_expression = js_expression
+        self.state_defaults = state_defaults
+
+    def to_json(self, server):
+        for key, value in self.state_defaults.items():
+            if isinstance(value, TrameDefault):
+                value.set_defaults(server)
+            else:
+                server.state.setdefault(key, value)
+
+        return {"js": self.js_expression}
+
+
+class Callback:
+    """
+    react.Callback(value, *args, modifiers=None)
+
+    Wraps either a raw JS expression (evaluated client-side, `value` is a
+    `str`) or a Python callable (invoked server-side through a trame
+    trigger), optionally combined with event `modifiers` (`"prevent"`,
+    `"stop"`, ...) standing in for Vue's `.prevent`/`.stop`.
+
+    `*args` are extra JS-expression strings forwarded to the trigger call
+    when `value` is callable - `Callback(self.reset, "[4]", "{}")` calls
+    `self.reset(4)` server-side, mirroring Vue's `click=(self.reset, "[4]", "{}")`.
+    """
+
+    def __init__(self, value, args=None, kwargs=None, modifiers=None):
+        self.value = value
+        self.args = args
+        self.kwargs = kwargs
+        self.modifiers = list(modifiers) if modifiers else []
+
+    def to_json(self, server):
+        if callable(self.value):
+            callback = {"trigger": server.trigger_name(self.value)}
+            if self.args:
+                callback["args"] = {"js": self.args}
+            if self.kwargs:
+                callback["kwargs"] = {"js": self.kwargs}
+        else:
+            callback = {"js": self.value}
+
+        result = {"callback": callback}
+        if self.modifiers:
+            result["modifiers"] = self.modifiers
+
+        return result
+
+
+def _serialize_children(children, server):
+    out_buffer = []
+    for child in children:
+        if isinstance(child, str):
+            # No {{ mustache }} parsing for react: a plain string child is
+            # always literal text (react-text-interpolation.md).
+            out_buffer.append(child)
+        elif isinstance(child, Bind):
+            out_buffer.append(child.to_json(server))
+        else:
+            # `child.html` is a property (recursively rendering child's own
+            # subtree) - `hasattr(child, "html")` would compute it once just
+            # to answer the question, then a second time right after to use
+            # it. That 2x-per-level doubling compounds multiplicatively with
+            # tree depth (2**depth), so a single `getattr(..., None)` here is
+            # what keeps a deeply nested tree linear instead of exponential.
+            html = getattr(child, "html", None)
+            out_buffer.append(child if html is None else html)
+    return out_buffer
+
+
+# -----------------------------------------------------------------------------
+# Structural nodes - If / For / Slot
+# -----------------------------------------------------------------------------
+
+
+class _ReactNode:
+    """
+    Shared base for the structural widgets below (`If`, `For`, `Slot`): none
+    of them render as a DOM tag, they only collect children and attach into
+    the surrounding widget tree the same way `AbstractElement`/`VirtualNode`
+    already do (`HTML_CTX`, `widgets/core.py`).
+    """
+
+    _elem_name = "react-node"
+
+    def __init__(self, connect_parent=True, **kwargs):
+        self._server = kwargs.get("trame_server")
+        self._children = []
+
+        # Resolves self._server from the enclosing context even when
+        # connect_parent=False (see Slot below)
+        HTML_CTX.add_child(self, connect_parent)
+
+    @property
+    def server(self):
+        return self._server
+
+    def set_server(self, v):
+        self._server = v
+
+    def add_child(self, child):
+        self._children.append(child)
+
+    def add_children(self, children):
+        self._children += children
+
+    @property
+    def children(self):
+        return self._children
+
+    def __enter__(self):
+        HTML_CTX.enter(self)
+        return self
+
+    def __exit__(self, exc_type, exc_value, exc_traceback):
+        HTML_CTX.exit(self)
+
+
+class If(_ReactNode):
+    """
+    with react.If(value="count > 5"):
+        html.Div("Count is high")
+
+    Structural marker (not a real DOM tag): tells the client renderer to only
+    mount its children while `value` is truthy. `value` is wrapped in `Bind`
+    automatically unless already one.
+    """
+
+    _elem_name = "ReactIf"
+
+    def __init__(self, value, **kwargs):
+        super().__init__(**kwargs)
+        self.value = value if isinstance(value, Bind) else Bind(value)
+
+    @property
+    def html(self):
+        return {
+            "tag": self._elem_name,
+            "props": {
+                "value": self.value.to_json(self.server),
+            },
+            "children": _serialize_children(self._children, self.server),
+        }
+
+
+class For(_ReactNode):
+    """
+    with react.For(items="items", name="item"):
+        html.Li(react.Bind("item"))
+
+    Structural marker (not a real DOM tag): tells the client renderer to
+    repeat its children once per entry of `items`, exposing each entry to
+    that subtree's scope under `name`. `items` is wrapped in `Bind`
+    automatically unless already one.
+    """
+
+    _elem_name = "ReactFor"
+
+    def __init__(self, items, name, **kwargs):
+        super().__init__(**kwargs)
+        self.items = items if isinstance(items, Bind) else Bind(items)
+        self.name = name
+
+    @property
+    def html(self):
+        return {
+            "tag": self._elem_name,
+            "props": {
+                "items": self.items.to_json(self.server),
+                "name": self.name,
+            },
+            "children": _serialize_children(self._children, self.server),
+        }
+
+
+class Slot(_ReactNode):
+    """
+    with react.Slot(params=["item"]) as render_item_name:
+        html.Strong(react.Bind("item.name"))
+
+    VDataTable(items=react.Bind("items"), renderItemName=render_item_name)
+
+    Captures children as reusable render-prop content, handed to a widget as
+    an ordinary prop value rather than nested inside that widget's own `with`
+    block - the React analogue of a Vue scoped slot (`react-scoped-slots.md`).
+    `params` names the values the owning widget will pass back at call time
+    (the React-side equivalent of Vue's `v-slot="{ item }"` destructuring).
+
+    Defined outside the widget's own `with` block, so unlike `If`/`For` it
+    defaults to `connect_parent=False`: it must not also get auto-attached as
+    a child of whatever context happens to be open at the point it's defined.
+    """
+
+    _elem_name = "trame-slot"
+
+    def __init__(self, params=None, connect_parent=False, **kwargs):
+        super().__init__(connect_parent=connect_parent, **kwargs)
+        self.params = list(params) if params else []
+
+    def to_json(self, server):
+        assert server == self.server
+        return {
+            "slot": {
+                "params": self.params,
+                "children": _serialize_children(self._children, self.server),
+            }
+        }
+
+
+# -----------------------------------------------------------------------------
+# HtmlElement - the client_type="react" AbstractElement._impl implementation
+# -----------------------------------------------------------------------------
+
+# Global HTML attributes / DOM events every react element recognizes by
+# default, mirroring vue.SHARED_ATTRIBUTES/SHARED_EVENTS in spirit. A bare
+# string means the python kwarg and the react prop share the same (already
+# camelCase) name; a (python_name, react_name) tuple is for the rest - every
+# SHARED_EVENTS entry is one of these, so Python callers use snake_case
+# (onClick= becomes on_click=) while the wire/react prop name stays camelCase.
+SHARED_PROPS = [
+    ("classes", "className"),
+    "id",
+    "style",
+    "title",
+    "hidden",
+    "lang",
+    "dir",
+    "draggable",
+    "spellCheck",
+    "contentEditable",
+    "tabIndex",
+    "ref",
+    "key",
+    "value",
+]
+
+SHARED_EVENTS = [
+    ("on_click", "onClick"),
+    ("on_double_click", "onDoubleClick"),
+    ("on_context_menu", "onContextMenu"),
+    ("on_mouse_down", "onMouseDown"),
+    ("on_mouse_up", "onMouseUp"),
+    ("on_mouse_enter", "onMouseEnter"),
+    ("on_mouse_leave", "onMouseLeave"),
+    ("on_mouse_move", "onMouseMove"),
+    ("on_mouse_over", "onMouseOver"),
+    ("on_mouse_out", "onMouseOut"),
+    ("on_key_down", "onKeyDown"),
+    ("on_key_up", "onKeyUp"),
+    ("on_key_press", "onKeyPress"),
+    ("on_submit", "onSubmit"),
+    ("on_input", "onInput"),
+    ("on_change", "onChange"),
+    ("on_focus", "onFocus"),
+    ("on_blur", "onBlur"),
+    ("on_touch_start", "onTouchStart"),
+    ("on_touch_move", "onTouchMove"),
+    ("on_touch_end", "onTouchEnd"),
+    ("on_touch_cancel", "onTouchCancel"),
+]
+
+
+class HtmlElement:
+    """
+    React rendering implementation for a single `AbstractElement` instance
+    (stored as `elem._impl`). Owns the python kwargs (`py_attr`), which of
+    them are recognized (`props`/`events`, mutable so widgets can extend
+    them), and serializes them into the JSON tree shape described above.
+    """
+
+    def __init__(self, elem, kwargs):
+        self._elem = elem
+        self._hidden = False
+        self._tts_sensitive = False
+        self.literal_children = False
+
+        self.props = kwargs.get("__properties", []) + SHARED_PROPS
+        self.events = kwargs.get("__events", []) + SHARED_EVENTS
+
+        self.py_attr = kwargs
+        self.used_py_attr = {"trame_server", "__properties", "__events"}
+
+    @property
+    def allowed_keys(self):
+        keys = set()
+        for items in (self.props, self.events):
+            for item in items:
+                if isinstance(item, str):
+                    keys.add(item)
+                else:
+                    keys.add(item[0])
+        return keys
+
+    def has(self, name):
+        return name in self.py_attr
+
+    def get(self, name):
+        return self.py_attr[name]
+
+    def set(self, name, value):
+        if value is None:
+            self.py_attr.pop(name, value)
+        else:
+            self.py_attr[name] = value
+
+    @property
+    def skipped_attributes(self):
+        """
+        Return the attribute names that are skipped from the tree
+        representation. This can represent miss match property/event names
+        or missing mapping.
+        """
+        return set(self.py_attr.keys()) - self.used_py_attr
+
+    def _serialize_value(self, name, value, server):
+        if isinstance(value, (Bind, Callback, Slot)):
+            return value.to_json(server)
+        if isinstance(value, dict):
+            # A dict-valued prop (e.g. `style={"color": react.Bind(...)}`) may
+            # mix plain values with `Bind`/`Callback` entries - recurse so the
+            # client sees a plain object with per-key `{"js": ...}` markers
+            # instead of an un-serialized Python object (react-app's
+            # `classifyProps` resolves those nested markers individually).
+            return {
+                key: self._serialize_value(name, item, server)
+                for key, item in value.items()
+            }
+        return value
+
+    def render(self):
+        """
+        Return a JSON-serializable dict representation of the owning
+        element, recursing into its children. There is no client bundle to
+        consume this yet (see module docstring) - this only builds the tree.
+        """
+        elem = self._elem
+
+        # Keyed by python name first (like vue.HtmlElement's `attributes`
+        # dict), then flattened to react names below - not the other way
+        # around. `widgets/html.py` (generated) bakes Vue-flavored
+        # (py_name, js_key) hints (e.g. ("key", ":key")) into every element's
+        # shared attribute list, redundantly with this module's own
+        # SHARED_PROPS; resolving by react name first would let a later,
+        # Vue-flavored duplicate for the same kwarg produce a second,
+        # incorrect prop instead of overwriting the first.
+        react_name_by_py_name = {}
+        for name in (*self.props, *self.events):
+            py_name, react_name = (
+                (name, name) if isinstance(name, str) else (name[0], name[1])
+            )
+            react_name_by_py_name.setdefault(py_name, react_name)
+
+        props = {}
+        for py_name, react_name in react_name_by_py_name.items():
+            if py_name not in self.py_attr:
+                continue
+
+            self.used_py_attr.add(py_name)
+            value = self.py_attr[py_name]
+            if value is None:
+                continue
+
+            props[react_name] = self._serialize_value(py_name, value, elem.server)
+
+        if self._hidden:
+            style = props.get("style")
+            style = dict(style) if isinstance(style, dict) else {}
+            style["display"] = "none"
+            props["style"] = style
+
+        result = {
+            "tag": elem._elem_name,
+            "props": props,
+            "children": _serialize_children(elem._children, elem.server),
+        }
+        if self.literal_children:
+            # See react-app/src/runtime/resolveLiteralChildren.js: some
+            # components (MUI's Select/Tabs/RadioGroup/...) read
+            # `child.props.value` / `child.props.children` straight off their
+            # `children` array via `React.Children`, before anything renders
+            # - the usual lazy per-node wrapper defeats that, since those
+            # props would live on the wrapper instead of on a real element.
+            result["literalChildren"] = True
+        return result
+
+    def hide(self):
+        self._hidden = True
+
+    def tts_sensitive(self):
+        """No implementation for react"""
diff --git a/src/trame_client/widgets/vue.py b/src/trame_client/widgets/vue.py
new file mode 100644
index 0000000..9cc2db5
--- /dev/null
+++ b/src/trame_client/widgets/vue.py
@@ -0,0 +1,793 @@
+"""
+Vue2/Vue3 rendering implementation for `trame_client.widgets.core.AbstractElement`.
+
+`AbstractElement.html` doesn't build a DOM or a virtual-DOM tree - it builds a
+literal Vue template string (directives, `{{ mustache }}` interpolation, ...)
+that is shipped to the browser and compiled at runtime by Vue's bundled
+template compiler.
+
+`HtmlElement` (this module) is that rendering implementation: `AbstractElement`
+instantiates one per widget instance (as `self._impl`, see `core.py`) whenever
+`self.server.client_type` is `"vue2"` or `"vue3"`, and delegates every kwargs
+/rendering concern to it. A widget declares its Vue-specific properties via
+`self.props`/`self.events` (aliases onto `self._impl.props`/`self._impl.events`,
+see `core.py`), e.g.:
+
+    if self.server.client_type in VUE_CLIENT_TYPES:
+        self.props += ["title"]
+        self.events += ["click"]
+
+A sibling module (e.g. `react.py`, with its own `HtmlElement`) can implement
+the same interface for another `client_type` without `AbstractElement` (or
+this module) needing to change.
+"""
+
+import logging
+import sys
+
+from trame_client.utils.defaults import TrameDefault
+from trame_client.widgets.core import AbstractElement
+
+DEBUG = "--debug" in sys.argv or "-d" in sys.argv
+
+AVAILABLE_DIRECTIVES = [
+    ("v_text", "v-text"),
+    ("v_html", "v-html"),
+    ("v_show", "v-show"),
+    ("v_if", "v-if"),
+    ("v_else", "v-else"),
+    ("v_else_if", "v-else-if"),
+    ("v_for", "v-for"),
+    ("v_on", "v-on"),
+    ("v_bind", "v-bind"),
+    ("v_model", "v-model"),
+    ("v_model_lazy", "v-model.lazy"),
+    ("v_model_number", "v-model.number"),
+    ("v_model_trim", "v-model.trim"),
+    ("v_slot", "v-slot"),
+    ("v_pre", "v-pre"),
+    ("v_once", "v-once"),
+    ("v_memo", "v-memo"),
+    ("v_cloak", "v-cloak"),
+]
+KEY_ALIAS = [
+    "enter",
+    "tab",
+    "delete",
+    "esc",
+    "space",
+    "left",
+    "up",
+    "right",
+    "down",
+]
+KEY_MODIFIER = ["ctrl", "alt", "shift", "meta"]
+MOUSE_BUTTONS = ["left", "right", "middle"]
+V_ON_MODIFIER = [
+    "stop",
+    "prevent",
+    "capture",
+    "self",
+    "once",
+    "left",
+    "right",
+    "middle",
+    "passive",
+]  # *KEY_ALIAS
+V_ON_TYPE_MOUSE = [
+    "click",
+    "contextmenu",
+    "dblclick",
+    "mousedown",
+    "mouseenter",
+    "mouseleave",
+    "mousemove",
+    "mouseup",
+    "mouseout",
+    "mouseover",
+]
+V_ON_TYPE_KEYBOARD = [
+    "keydown",
+    "keyup",
+    "keypress",
+]
+V_ON_TYPE_FORM = [
+    "submit",
+    "input",
+    "change",
+    "focus",
+    "blur",
+]
+V_ON_TYPE_TOUCH = [
+    "touchstart",
+    "touchmove",
+    "touchend",
+    "touchcancel",
+]
+V_ON_TYPE_UI = [
+    "scroll",
+    "resize",
+    "select",
+]
+V_ON_TYPE_ANIM = [
+    "animationstart",
+    "animationend",
+    "animationiteration",
+]
+V_ON_TYPE_TRANSITION = [
+    "transitionstart",
+    "transitionend",
+    "transitioncancel",
+]
+
+V_MODEL_MODIFIER = {"lazy", "number", "trim"}
+
+SHARED_ATTRIBUTES = [
+    "accesskey",
+    "autocapitalize",
+    "autofocus",
+    ("classes", "class"),
+    "contenteditable",
+    "dir",
+    "draggable",
+    "enterkeyhint",
+    "hidden",
+    "id",
+    "inputmode",
+    "is",
+    "itemid",
+    "itemprop",
+    "itemref",
+    "itemscope",
+    "itemtype",
+    "lang",
+    "nonce",
+    "slot",
+    "spellcheck",
+    "style",
+    "tabindex",
+    "title",
+    "translate",
+    # --
+    "ref",
+    ["key", ":key"],
+]
+
+# !all modifiers should go through v_on_click_left_stop...
+SHARED_EVENTS = [
+    *V_ON_TYPE_MOUSE,
+    *V_ON_TYPE_KEYBOARD,
+    *V_ON_TYPE_FORM,
+    *V_ON_TYPE_TOUCH,
+    *V_ON_TYPE_ANIM,
+    *V_ON_TYPE_TRANSITION,
+    # -------------------------------------------------------------------------
+    # Should not enable by default as they tend to conflict with widget
+    # properties. Use v_on_{}= to enable any missing mapping.
+    # -------------------------------------------------------------------------
+    # *V_ON_TYPE_UI,
+]
+
+logger = logging.getLogger(__name__)
+
+
+def py2js_key(key):
+    return key.replace("_", "-")
+
+
+def _event_value_processing(server, js_key, value):
+    if isinstance(value, str):
+        translated_value = server.state.translator.translate_js_expression(
+            server.state, value
+        )
+        return f'{js_key}="{translated_value}"'
+    elif callable(value):
+        trigger_name = server.trigger_name(value)
+        return f"{js_key}=\"trigger('{trigger_name}')\""
+    elif isinstance(value, tuple):
+        trigger_name = value[0]
+        if callable(trigger_name):
+            trigger_name = server.trigger_name(trigger_name)
+        if len(value) == 1:
+            return f"{js_key}=\"trigger('{trigger_name}')\""
+        if len(value) == 2:
+            translated_value = server.state.translator.translate_js_expression(
+                server.state, value[1]
+            )
+            return f"{js_key}=\"trigger('{trigger_name}', {translated_value})\""
+        if len(value) == 3:
+            translated_value = server.state.translator.translate_js_expression(
+                server.state, value[1]
+            )
+            # We don't want to translate kwargs as we may change keys rather than just values
+            return f"{js_key}=\"trigger('{trigger_name}', {translated_value}, {value[2]})\""
+    return False
+
+
+def as_py_arg(iterable):
+    if iterable is None:
+        return None
+    for item in iterable:
+        if isinstance(item, str):
+            yield item
+        else:
+            yield item[0]
+
+
+def register_directive(py_name, js_name=None):
+    if js_name is None:
+        AVAILABLE_DIRECTIVES.append(py_name)
+    else:
+        AVAILABLE_DIRECTIVES.append((py_name, js_name))
+
+
+class HtmlElement:
+    """
+    Vue2/Vue3 rendering implementation for a single `AbstractElement`
+    instance (stored as `elem._impl`). Owns the python kwargs (`py_attr`),
+    which of them are recognized (`props`/`events`, mutable so widgets can
+    extend them), and the serialized Vue template attribute-string cache
+    (`attributes`) used by `render()`.
+    """
+
+    def __init__(self, elem, kwargs):
+        self._elem = elem
+
+        style = kwargs.get("style", None)
+        if type(style) is dict:
+            kwargs["style"] = " ".join([f"{k}: {v};" for k, v in style.items()])
+
+        self.props = (
+            kwargs.get("__properties", []) + SHARED_ATTRIBUTES + AVAILABLE_DIRECTIVES
+        )
+        self.events = kwargs.get("__events", []) + SHARED_EVENTS
+
+        self.py_attr = kwargs
+        self.used_py_attr = {"trame_server", "__properties", "__events", "raw_attrs"}
+        self._elem._attributes = {}
+
+        raw_attrs = kwargs.get("raw_attrs")
+        if raw_attrs:
+            for idx, raw_value in enumerate(raw_attrs):
+                self._elem._attributes[f"_raw_{idx}"] = raw_value
+
+    @property
+    def allowed_keys(self):
+        keys = set()
+        for items in (self.props, self.events):
+            for item in items:
+                if isinstance(item, str):
+                    keys.add(item)
+                else:
+                    keys.add(item[0])
+        return keys
+
+    def has(self, name):
+        return name in self.py_attr
+
+    def get(self, name):
+        return self.py_attr[name]
+
+    def set(self, name, value):
+        if value is None:
+            self.py_attr.pop(name, value)
+            self._elem._attributes.pop(name, value)
+        else:
+            self.py_attr[name] = value
+
+    @property
+    def skipped_attributes(self):
+        """
+        Return the attribute names that are skipped from the HTML representation.
+        This can represent miss match property/event names or missing mapping.
+        """
+        return set(self.py_attr.keys()) - self.used_py_attr
+
+    def _attr_str(self):
+        return " ".join(self._elem._attributes.values())
+
+    def _process_attrs(self, names):
+        """
+        Process the given attribute names into Vue template attribute
+        strings, stored back into `self._elem._attributes`.
+        """
+        elem = self._elem
+        directives = [
+            name
+            for name in self.py_attr.keys()
+            if name.startswith("v_model_") or name.startswith("v_bind_")
+        ]
+        self.used_py_attr.update(as_py_arg(directives))
+        self.used_py_attr.update(as_py_arg(names))
+        for _name in [*directives, *names]:
+            js_key = None
+            name = _name
+            if isinstance(_name, (list, tuple)):
+                name = _name[0]
+                js_key = _name[1]
+
+            if name in self.py_attr:
+                if js_key is None:
+                    js_key = py2js_key(name)
+                value = self.py_attr[name]
+
+                # smart key handling
+                if name.startswith("v_model_"):
+                    model_name, *modifiers = name.split("_")[2:]
+                    if model_name in V_MODEL_MODIFIER and len(modifiers) == 0:
+                        js_key = f"v-model.{model_name}"
+                    else:
+                        js_key = f"v-model:{model_name}{'.' if len(modifiers) else ''}{'.'.join(modifiers)}"
+                elif name.startswith("v_bind_"):
+                    prop_name, *modifiers = name.split("_")[2:]
+                    js_key = f":{prop_name}{'.' if len(modifiers) else ''}{'.'.join(modifiers)}"
+
+                if value is None:
+                    continue
+
+                logger.info("js_key = %s", js_key)
+
+                if isinstance(value, (tuple, list)):
+                    if len(value) > 1:
+                        if isinstance(value[1], TrameDefault):
+                            value[1].set_defaults(elem.server)
+                        else:
+                            elem.server.state.setdefault(value[0], value[1])
+
+                    logger.info("before: %s = %s", js_key, value[0])
+                    if isinstance(value[0], str):
+                        translated_value = (
+                            elem.server.state.translator.translate_js_expression(
+                                elem.server.state, value[0]
+                            )
+                        )
+                    else:
+                        translated_value = str(value[0])
+                        if DEBUG:
+                            logger.warning(
+                                'Warning: <%s %s="..." /> is set with an (%s)',
+                                elem._elem_name,
+                                js_key,
+                                type(value[0]),
+                            )
+
+                    logger.info("after: %s = %s", js_key, translated_value)
+                    if js_key.startswith("v-"):
+                        self._elem._attributes[name] = f'{js_key}="{translated_value}"'
+                    elif js_key.startswith(":"):
+                        self._elem._attributes[name] = f'{js_key}="{translated_value}"'
+                    else:
+                        self._elem._attributes[name] = f':{js_key}="{translated_value}"'
+                elif isinstance(value, bool):
+                    if value:
+                        self._elem._attributes[name] = js_key
+                    else:
+                        self._elem._attributes[name] = f':{js_key}="false"'
+                elif isinstance(value, str):
+                    if js_key.startswith("v-") or js_key.startswith(":"):
+                        logger.info("before: %s = %s", js_key, value)
+                        value = elem.server.state.translator.translate_js_expression(
+                            elem.server.state, value
+                        )
+                        logger.info("after: %s = %s", js_key, value)
+
+                    self._elem._attributes[name] = f'{js_key}="{value}"'
+                elif isinstance(value, (int, float)):
+                    self._elem._attributes[name] = f'{js_key}="{value}"'
+                else:
+                    print(
+                        "Error: Don't know how to handle attribute name "
+                        f"'{name}' with value '{value}' in {elem.__class__}::{elem._elem_name}"
+                    )
+
+    def _process_events(self, names):
+        """
+        Process the given event names into Vue template event-binding
+        strings, stored back into `self._elem._attributes`.
+        """
+        elem = self._elem
+        self.used_py_attr.update(as_py_arg(names))
+        processed_event = set()
+        for _name in names:
+            js_key = None
+            name = _name
+            if isinstance(_name, tuple):
+                name = _name[0]
+                js_key = _name[1]
+            if name in self.py_attr:
+                if js_key is None:
+                    js_key = py2js_key(name)
+                js_key = f"@{js_key}"
+                value = self.py_attr[name]
+
+                if value is None:
+                    continue
+
+                attribute = _event_value_processing(elem.server, js_key, value)
+                if attribute is None:
+                    # no match
+                    pass
+                elif isinstance(attribute, str):
+                    self._elem._attributes[name] = attribute
+                    processed_event.add(name)
+                else:
+                    print(
+                        "Error: Don't know how to handle event name "
+                        f"'{name}' with value '{value}' in {elem.__class__}::{elem._elem_name}"
+                    )
+
+        # process v_on_....
+        for key_name in self.py_attr:
+            if key_name in processed_event:
+                continue
+
+            if key_name.startswith("v_on_"):
+                tokens = key_name.split("_")[2:]
+                js_key = f"@{'.'.join(tokens)}"
+                value = self.py_attr[key_name]
+
+                if value is None:
+                    continue
+
+                attribute = _event_value_processing(elem.server, js_key, value)
+                if attribute is None:
+                    # no match
+                    pass
+                elif isinstance(attribute, str):
+                    self.used_py_attr.add(key_name)
+                    self._elem._attributes[key_name] = attribute
+                else:
+                    print(
+                        "Error: Don't know how to handle event name "
+                        f"'{key_name}' with value '{value}' in {elem.__class__}::{elem._elem_name}"
+                    )
+
+    def render(self):
+        """
+        Return a Vue template string representation of the owning element,
+        recursing into its children.
+        """
+        elem = self._elem
+        try:
+            # Build attributes
+            self._process_attrs(self.props)
+            self._process_events(self.events)
+
+            if DEBUG and self.skipped_attributes:
+                logger.warning(
+                    "Warning: <%s %s /> attributes will be skipped",
+                    elem._elem_name,
+                    "=... ".join([*self.skipped_attributes, ""]),
+                )
+
+            # Patch ref to use trame registration
+            if (
+                elem.server.client_type == "vue3"
+                and "ref" in self._elem._attributes
+                and self._elem._attributes["ref"].startswith("ref=")
+            ):
+                ref_name = self._elem._attributes["ref"][5:-1]
+                self._elem._attributes["ref"] = (
+                    f''':ref="(el) => trame.refs['{ref_name}'] = el"'''
+                )
+
+            # Compute HTML str
+            if len(elem._children):
+                out_buffer = []
+                out_buffer.append(f"<{elem._elem_name} {self._attr_str()}>")
+                for child in elem._children:
+                    if isinstance(child, str):
+                        translated_value = (
+                            elem.server.state.translator.translate_vue_templating(
+                                elem.server.state, child
+                            )
+                        )
+                        out_buffer.append(translated_value)
+                    else:
+                        out_buffer.append(child.html)
+                out_buffer.append(f"</{elem._elem_name}>")
+                return "\n".join(out_buffer)
+            else:
+                return f"<{elem._elem_name} {self._attr_str()} />"
+        except Exception as e:
+            logger.error(e)
+            return f"<{elem._elem_name} html-error />"
+
+    def tts_sensitive(self):
+        self._elem._attributes["__tts"] = f':key="`w{self._elem._id}-${{tts}}`"'
+
+    def hide(self):
+        self._elem._attributes["__style"] = 'style="display: none"'
+
+
+# -----------------------------------------------------------------------------
+# Vue built-in components
+# -----------------------------------------------------------------------------
+
+
+class Template(AbstractElement):
+    """
+    The standard html content template element. This is mostly used by |slot_doc_link|.
+
+    .. |slot_doc_link| raw:: html
+
+        <a href="https://vuejs.org/v2/guide/instance.html" target="_blank">vue's slot system</a>
+
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+    :param v_slot: The slot this template corresponds to
+    """
+
+    slot_names = set()
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("template", children, **kwargs)
+        self.props += ["v_slot"]
+        for slot_name in Template.slot_names:
+            safe_name = slot_name.replace("-", "_").replace(".", "_")
+            if "<name>" in safe_name:
+                safe_header, safe_tail = safe_name.split("<name>")
+                header, tail = slot_name.split("<name>")
+                for key in kwargs:
+                    if key.startswith(header):
+                        dyna_name = key[len(header) : -len(tail)]
+                        self.props.append(
+                            (
+                                f"v_slot_{safe_header}{dyna_name}{safe_tail}",
+                                f"v-slot:{header}{dyna_name}{tail}",
+                            )
+                        )
+            else:
+                self.props.append((f"v_slot_{safe_name}", f"v-slot:{slot_name}"))
+
+
+# -----------------------------------------------------------------------------
+
+
+class Component(AbstractElement):
+    """
+    Vue.js dynamic component element.
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+    :param is_name: name of the component to map
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("component", children, **kwargs)
+        self.props += [
+            ("is_name", "is"),
+        ]
+
+
+# -----------------------------------------------------------------------------
+
+
+class Transition(AbstractElement):
+    """
+    Vue.js Transition component element.
+    Provides animated transition effects to a single element or component.
+
+    Properties:
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+    :param name: Used to automatically generate transition CSS class names.
+        e.g. `name: 'fade'` will auto expand to `.fade-enter`,
+        `.fade-enter-active`, etc.
+    :param css: Whether to apply CSS transition classes. (Default: true)
+    :param type: Specifies the type of transition events to wait for to
+        determine transition end timing. Default behavior is auto detecting
+        the type that has longer duration. (transition, animation)
+    :param duraction: Specifies explicit durations of the transition.
+        Default behavior is wait for the first `transitionend` or
+        `animationend` event on the root transition element.
+    :param mode: Controls the timing sequence of leaving/entering transitions.
+        Default behavior is simultaneous. ('in-out' | 'out-in' | 'default')
+    :param appear: Whether to apply transition on initial render.
+        (default: false)
+    :param enter_from_class: Props for customizing transition classes.
+    :param enter_active_class: Props for customizing transition classes.
+    :param enter_to_class: Props for customizing transition classes.
+    :param appear_from_class: Props for customizing transition classes.
+    :param appear_active_class: Props for customizing transition classes.
+    :param appear_to_class: Props for customizing transition classes.
+    :param leave_from_class: Props for customizing transition classes.
+    :param leave_active_class: Props for customizing transition classes.
+    :param leave_to_class: Props for customizing transition classes.
+
+    Events:
+
+    :param before_enter:
+    :param before_leave:
+    :param enter:
+    :param leave:
+    :param appear:
+    :param after_enter:
+    :param after_leave:
+    :param after_appear:
+    :param enter_cancelled:
+    :param leave_cancelled:
+    :param appear_cancelled:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("transition", children, **kwargs)
+        self.props += [
+            "name",
+            "css",
+            "type",
+            "duraction",
+            "mode",
+            "appear",
+            ("enter_from_class", "enterFromClass"),
+            ("enter_active_class", "enterActiveClass"),
+            ("enter_to_class", "enterToClass"),
+            ("appear_from_class", "appearFromClass"),
+            ("appear_active_class", "appearActiveClass"),
+            ("appear_to_class", "appearToClass"),
+            ("leave_from_class", "leaveFromClass"),
+            ("leave_active_class", "leaveActiveClass"),
+            ("leave_to_class", "leaveToClass"),
+        ]
+        self.events += [
+            ("before_enter", "before-enter"),
+            ("before_leave", "before-leave"),
+            ("enter", "enter"),
+            ("leave", "leave"),
+            ("appear", "appear"),
+            ("after_enter", "after-enter"),
+            ("after_leave", "after-leave"),
+            ("after_appear", "after-appear"),
+            ("enter_cancelled", "enter-cancelled"),
+            ("leave_cancelled", "leave-cancelled"),
+            ("appear_cancelled", "appear-cancelled"),
+        ]
+
+
+# -----------------------------------------------------------------------------
+
+
+class TransitionGroup(AbstractElement):
+    """
+    Vue.js TransitionGroup component element.
+    Provides transition effects for multiple elements or components in a list.
+
+    Properties:
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+
+    Events:
+
+    :param before_enter:
+    :param before_leave:
+    :param enter:
+    :param leave:
+    :param appear:
+    :param after_enter:
+    :param after_leave:
+    :param after_appear:
+    :param enter_cancelled:
+    :param leave_cancelled:
+    :param appear_cancelled:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("transition-group", children, **kwargs)
+        self.props += [
+            "tag",
+            ("move_class", "moveClass"),
+        ]
+        self.events += [
+            ("before_enter", "before-enter"),
+            ("before_leave", "before-leave"),
+            ("enter", "enter"),
+            ("leave", "leave"),
+            ("appear", "appear"),
+            ("after_enter", "after-enter"),
+            ("after_leave", "after-leave"),
+            ("after_appear", "after-appear"),
+            ("enter_cancelled", "enter-cancelled"),
+            ("leave_cancelled", "leave-cancelled"),
+            ("appear_cancelled", "appear-cancelled"),
+        ]
+
+
+# -----------------------------------------------------------------------------
+
+
+class KeepAlive(AbstractElement):
+    """
+    Vue.js KeepAlive component element.
+    Caches dynamically toggled components wrapped inside.
+
+    Properties:
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+    :param include: If specified, only components with names matched
+        by `include` will be cached.
+    :param exclude: Any component with a name matched by `exclude`
+        will not be cached.
+    :param max: The maximum number of component instances to cache.
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("keep-alive", children, **kwargs)
+        self.props += [
+            "include",
+            "exclude",
+            "max",
+        ]
+
+
+# -----------------------------------------------------------------------------
+
+
+class Teleport(AbstractElement):
+    """
+    Vue.js Teleport component element.
+    Renders its slot content to another part of the DOM.
+
+    Properties:
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+    :param to: Required. Specify target container.
+        Can either be a selector or an actual element.
+    :param disabled: When `true`, the content will remain in its original
+        location instead of moved into the target container.
+        Can be changed dynamically.
+    :param defer: When `true`, the Teleport will defer until other parts
+        of the application have been mounted before resolving its target.
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("teleport", children, **kwargs)
+        self.props += [
+            "to",
+            "disabled",
+            "defer",
+        ]
+
+
+# -----------------------------------------------------------------------------
+
+
+class Suspense(AbstractElement):
+    """
+    Vue.js Suspense component element.
+    Used for orchestrating nested async dependencies in a component tree.
+
+    Properties:
+
+    :param children: The children nested within this element
+    :type children:  str | list[trame.html.*] | trame.html.* | None
+    :type timeout:
+    :type suspensible:
+
+    Events:
+
+    :param resolve:
+    :param pending:
+    :param fallback:
+
+    """
+
+    def __init__(self, children=None, **kwargs):
+        super().__init__("suspense", children, **kwargs)
+        self.props += [
+            "timeout",
+            "suspensible",
+        ]
+        self.events += [
+            "resolve",
+            "pending",
+            "fallback",
+        ]
diff --git a/tests/refs/.gitignore b/tests/refs/.gitignore
new file mode 100644
index 0000000..b57db61
--- /dev/null
+++ b/tests/refs/.gitignore
@@ -0,0 +1 @@
+diff_ref1.png
diff --git a/tests/refs/react_simple_count_1.yml b/tests/refs/react_simple_count_1.yml
new file mode 100644
index 0000000..986b763
--- /dev/null
+++ b/tests/refs/react_simple_count_1.yml
@@ -0,0 +1,3 @@
+- document:
+    - text: "1"
+    - button "Add to count"
diff --git a/tests/refs/react_simple_count_5.yml b/tests/refs/react_simple_count_5.yml
new file mode 100644
index 0000000..ecaea73
--- /dev/null
+++ b/tests/refs/react_simple_count_5.yml
@@ -0,0 +1,3 @@
+- document:
+    - text: "5"
+    - button "Add to count"
diff --git a/tests/test_react.py b/tests/test_react.py
new file mode 100644
index 0000000..903e57f
--- /dev/null
+++ b/tests/test_react.py
@@ -0,0 +1,238 @@
+from trame.app import get_server
+from trame.widgets import html, react
+
+from trame_client.utils.defaults import TrameDefault
+from trame_client.widgets.core import AbstractElement
+
+
+def test_react_bind_and_callback():
+    server = get_server("test_react_bind_and_callback", client_type="react")
+
+    def reset(value=2):
+        server.state.count = value
+
+    with html.Div(trame_server=server) as root:
+        html.Div(["count = ", react.Bind("count", count=2)])
+        html.Input(
+            type="range",
+            min=0,
+            max=10,
+            step=1,
+            value=react.Bind("count", count=2),
+            on_change=react.Callback("count = Number($event.target.value)"),
+            on_double_click=react.Callback("count = 2 * count", modifiers=["prevent"]),
+        )
+        html.Button("Reset", on_click=react.Callback(reset))
+        html.Button("Reset 4", on_click=react.Callback(reset, args="[4]", kwargs="{}"))
+
+    assert server.state.count == 2
+
+    tree = root.html
+    assert tree == {
+        "tag": "div",
+        "props": {},
+        "children": [
+            {
+                "tag": "div",
+                "props": {},
+                "children": ["count = ", {"js": "count"}],
+            },
+            {
+                "tag": "input",
+                "props": {
+                    "type": "range",
+                    "min": 0,
+                    "max": 10,
+                    "step": 1,
+                    "value": {"js": "count"},
+                    "onChange": {
+                        "callback": {"js": "count = Number($event.target.value)"}
+                    },
+                    "onDoubleClick": {
+                        "callback": {"js": "count = 2 * count"},
+                        "modifiers": ["prevent"],
+                    },
+                },
+                "children": [],
+            },
+            {
+                "tag": "button",
+                "props": {
+                    "onClick": {"callback": {"trigger": server.trigger_name(reset)}}
+                },
+                "children": ["Reset"],
+            },
+            {
+                "tag": "button",
+                "props": {
+                    "onClick": {
+                        "callback": {
+                            "trigger": server.trigger_name(reset),
+                            "args": {"js": "[4]"},
+                            "kwargs": {"js": "{}"},
+                        }
+                    }
+                },
+                "children": ["Reset 4"],
+            },
+        ],
+    }
+
+
+def test_react_if_and_for():
+    server = get_server("test_react_if_and_for", client_type="react")
+    server.state.todos = ["Write docs", "Review PR", "Ship it"]
+
+    with html.Div(trame_server=server) as root:
+        with react.If(value="todos.length > 0"):
+            with html.Ul():
+                with react.For(items="todos", name="todo"):
+                    html.Li([react.Bind("todo")], key=react.Bind("todo"))
+
+        with react.If(value="todos.length === 0"):
+            html.Div("Nothing left to do!")
+
+    tree = root.html
+    assert tree["children"][0] == {
+        "tag": "ReactIf",
+        "props": {"value": {"js": "todos.length > 0"}},
+        "children": [
+            {
+                "tag": "ul",
+                "props": {},
+                "children": [
+                    {
+                        "tag": "ReactFor",
+                        "props": {"items": {"js": "todos"}, "name": "todo"},
+                        "children": [
+                            {
+                                "tag": "li",
+                                "props": {"key": {"js": "todo"}},
+                                "children": [{"js": "todo"}],
+                            }
+                        ],
+                    }
+                ],
+            }
+        ],
+    }
+    assert tree["children"][1] == {
+        "tag": "ReactIf",
+        "props": {"value": {"js": "todos.length === 0"}},
+        "children": [{"tag": "div", "props": {}, "children": ["Nothing left to do!"]}],
+    }
+
+
+def test_react_classes_maps_to_class_name():
+    server = get_server("test_react_classes_maps_to_class_name", client_type="react")
+    div = html.Div(trame_server=server, classes="my-item")
+    assert div.html["props"] == {"className": "my-item"}
+
+
+def test_react_slot():
+    server = get_server("test_react_slot", client_type="react")
+
+    class VDataTable(AbstractElement):
+        def __init__(self, **kwargs):
+            super().__init__("VDataTable", trame_server=server, **kwargs)
+            self._attr_names += ["items", "renderItemName"]
+
+    with html.Div(trame_server=server) as root:
+        with react.Slot(params=["item"]) as render_item_name:
+            html.Strong(react.Bind("item.name"))
+
+        VDataTable(items=react.Bind("items"), renderItemName=render_item_name)
+
+    # Slot must not also be auto-attached as a visible child: its only
+    # attachment point is the renderItemName= prop it's explicitly passed to.
+    assert len(root.children) == 1
+
+    tree = root.html
+    assert tree["children"][0] == {
+        "tag": "VDataTable",
+        "props": {
+            "items": {"js": "items"},
+            "renderItemName": {
+                "slot": {
+                    "params": ["item"],
+                    "children": [
+                        {
+                            "tag": "strong",
+                            "props": {},
+                            "children": [{"js": "item.name"}],
+                        }
+                    ],
+                }
+            },
+        },
+        "children": [],
+    }
+
+
+def test_react_skipped_attributes():
+    server = get_server("test_react_skipped_attributes", client_type="react")
+    div = html.Div(
+        trame_server=server, a="a", title="b", something_that_does_not_exist="c"
+    )
+    assert div.html["props"] == {"title": "b"}
+    assert div.skipped_attributes == {"a", "something_that_does_not_exist"}
+
+
+def test_react_hide_merges_with_existing_style():
+    server = get_server(
+        "test_react_hide_merges_with_existing_style", client_type="react"
+    )
+    div = html.Div(trame_server=server, style={"color": "red"})
+    div.hide()
+    assert div.html["props"]["style"] == {"color": "red", "display": "none"}
+
+
+def test_react_bind_inside_style():
+    server = get_server("test_react_bind_inside_style", client_type="react")
+    div = html.Div(
+        trame_server=server,
+        style={
+            "fontWeight": "bold",
+            "color": react.Bind("color", color="red"),
+        },
+    )
+    assert div.html["props"]["style"] == {
+        "fontWeight": "bold",
+        "color": {"js": "color"},
+    }
+    assert server.state.color == "red"
+
+
+def test_react_bind_applies_trame_default():
+    server = get_server("test_react_bind_applies_trame_default", client_type="react")
+    div = html.Div(trame_server=server, title=react.Bind("t", t=TrameDefault(x=1)))
+    _ = div.html
+    assert server.state.x == 1
+
+
+def test_react_literal_children_flag():
+    server = get_server("test_react_literal_children_flag", client_type="react")
+
+    div = html.Div(trame_server=server)
+    assert div.literal_children is False
+    assert "literalChildren" not in div.html
+
+    select = html.Div(trame_server=server)
+    select.literal_children = True
+    with select:
+        html.Span("Vanilla", value="vanilla")
+
+    tree = select.html
+    assert tree["literalChildren"] is True
+    assert tree["children"] == [
+        {"tag": "span", "props": {"value": "vanilla"}, "children": ["Vanilla"]}
+    ]
+
+
+def test_react_tts_sensitive_is_a_noop():
+    server = get_server("test_react_tts_sensitive_is_a_noop", client_type="react")
+    div = html.Div(trame_server=server)
+    before = div.html
+    div.ttsSensitive()
+    after = div.html
+    assert before == after
diff --git a/tests/test_react_browser.py b/tests/test_react_browser.py
new file mode 100644
index 0000000..b737154
--- /dev/null
+++ b/tests/test_react_browser.py
@@ -0,0 +1,72 @@
+import pytest
+from playwright.sync_api import expect
+
+from trame_client.utils.testing import assert_snapshot_matches
+
+
+@pytest.mark.parametrize("server_path", ["examples/test/react_reactivity.py"])
+def test_react_reactivity(server, page, ref_dir):
+    url = f"http://127.0.0.1:{server.port}/"
+    page.goto(url)
+
+    plus_button = page.locator(".plusButton")
+    count_value = page.locator(".countValue")
+
+    # Wait for the initial connect/render round trip (async, unlike Vue's
+    # synchronous template mount) before snapshotting or interacting.
+    expect(count_value).to_have_text("1")
+    assert_snapshot_matches(page, ref_dir, "react_simple_count_1")
+
+    assert server.get("count") == 1
+    plus_button.click()
+    expect(count_value).to_have_text("2")
+    assert server.get("count") == 2
+    plus_button.click()
+    plus_button.click()
+    expect(count_value).to_have_text("4")
+    assert server.get("count") == 4
+    plus_button.click()
+    expect(count_value).to_have_text("5")
+    assert server.get("count") == 5
+
+    assert_snapshot_matches(page, ref_dir, "react_simple_count_5")
+
+
+@pytest.mark.parametrize("server_path", ["examples/test/react_if_for.py"])
+def test_react_if_for(server, page):
+    url = f"http://127.0.0.1:{server.port}/"
+    page.goto(url)
+
+    count_value = page.locator(".countValue")
+    slider = page.locator(".countSlider")
+
+    # Bind: initial value round-trips from Python state
+    expect(count_value).to_have_text("2")
+
+    # Callback with a JS expression (`count = Number($event.target.value)`):
+    # exercises client-side reactivity without a server round trip.
+    slider.fill("7")
+    slider.dispatch_event("change")
+    expect(count_value).to_have_text("7")
+    assert server.get("count") == 7
+
+    # Callback wrapping a Python callable: triggers a server-side method,
+    # whose state write flows back down to the client.
+    page.locator(".resetButton").click()
+    expect(count_value).to_have_text("2")
+    assert server.get("count") == 2
+
+    # For: one <li> per item, each bound to its own loop variable.
+    todo_items = page.locator(".todoItem")
+    expect(todo_items).to_have_count(3)
+    expect(todo_items.nth(0)).to_have_text("Write docs")
+    expect(todo_items.nth(1)).to_have_text("Review PR")
+    expect(todo_items.nth(2)).to_have_text("Ship it")
+    expect(page.locator(".emptyMsg")).to_have_count(0)
+
+    # If: flips which branch is mounted once the bound expression's truthiness
+    # changes server-side.
+    page.locator(".clearButton").click()
+    expect(page.locator(".todoList")).to_have_count(0)
+    expect(page.locator(".emptyMsg")).to_have_text("No todos left")
+    assert server.get("todos") == []
diff --git a/tests/test_react_client_widgets.py b/tests/test_react_client_widgets.py
new file mode 100644
index 0000000..31f6c68
--- /dev/null
+++ b/tests/test_react_client_widgets.py
@@ -0,0 +1,117 @@
+from trame.app import get_server
+from trame.widgets import html, client, react
+
+
+def test_react_jseval_ref_and_exec_event():
+    server = get_server("test_react_jseval", client_type="react")
+
+    with html.Div(trame_server=server) as root:
+        client.JSEval(event="hello", ref="my_exec")
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-exec"
+    assert tree["props"]["ref"] == "my_exec"
+    assert tree["props"]["event"] == "hello"
+    # Vue's raw `_attributes["ref"]` hack must not leak into the react tree.
+    assert "onExec" not in tree["props"]
+
+
+def test_react_style_binds_css_reactively():
+    server = get_server("test_react_style", client_type="react")
+
+    with html.Div(trame_server=server) as root:
+        style = client.Style("body { color: red; }")
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-style"
+    assert tree["props"]["css"] == {"js": style.var_name}
+    assert server.state[style.var_name] == "body { color: red; }"
+
+    style.update("body { color: blue; }")
+    assert server.state[style.var_name] == "body { color: blue; }"
+
+
+def test_react_script_binds_script_reactively():
+    server = get_server("test_react_script", client_type="react")
+
+    with html.Div(trame_server=server) as root:
+        script = client.Script("console.log(1)", module=True)
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-script"
+    assert tree["props"]["script"] == {"js": script.var_name}
+    assert tree["props"]["module"] is True
+    assert server.state[script.var_name] == "console.log(1)"
+
+
+def test_react_client_state_change_wraps_value_in_bind():
+    server = get_server("test_react_client_state_change", client_type="react")
+    server.state.count = 1
+
+    def on_change():
+        pass
+
+    with html.Div(trame_server=server) as root:
+        client.ClientStateChange(
+            value="count",
+            trigger_on_create=True,
+            change=react.Callback(on_change),
+        )
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-client-state-change"
+    assert tree["props"]["value"] == {"js": "count"}
+    assert tree["props"]["triggerChangeOnCreate"] is True
+    assert tree["props"]["onChange"] == {
+        "callback": {"trigger": server.trigger_name(on_change)}
+    }
+
+
+def test_react_client_triggers_ref_and_custom_events():
+    server = get_server("test_react_client_triggers", client_type="react")
+
+    def on_mounted():
+        pass
+
+    def on_custom():
+        pass
+
+    with html.Div(trame_server=server) as root:
+        client.ClientTriggers(
+            ref="my_triggers",
+            mounted=react.Callback(on_mounted),
+            my_custom_event=react.Callback(on_custom),
+        )
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-client-triggers"
+    assert tree["props"]["ref"] == "my_triggers"
+    assert tree["props"]["mounted"] == {
+        "callback": {"trigger": server.trigger_name(on_mounted)}
+    }
+    assert tree["props"]["my_custom_event"] == {
+        "callback": {"trigger": server.trigger_name(on_custom)}
+    }
+
+
+def test_react_life_cycle_monitor_serializes_cleanly():
+    server = get_server("test_react_life_cycle_monitor", client_type="react")
+
+    with html.Div(trame_server=server) as root:
+        client.LifeCycleMonitor(name="mon", type="log", value="v")
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-life-cycle-monitor"
+    assert tree["props"] == {"name": "mon", "type": "log", "value": "v"}
+
+
+def test_react_size_observer_serializes_cleanly():
+    server = get_server("test_react_size_observer", client_type="react")
+
+    with html.Div(trame_server=server) as root:
+        client.SizeObserver("my_size")
+
+    tree = root.html["children"][0]
+    assert tree["tag"] == "trame-size-observer"
+    assert tree["props"]["name"] == "my_size"
+    assert server.state.my_size is None
diff --git a/tests/test_react_client_widgets_browser.py b/tests/test_react_client_widgets_browser.py
new file mode 100644
index 0000000..11cbb73
--- /dev/null
+++ b/tests/test_react_client_widgets_browser.py
@@ -0,0 +1,27 @@
+import pytest
+from playwright.sync_api import expect
+
+
+@pytest.mark.parametrize("server_path", ["examples/test/react_client_widgets.py"])
+def test_react_client_widgets(server, page):
+    url = f"http://127.0.0.1:{server.port}/"
+    page.goto(url)
+
+    mounted_count = page.locator(".mountedCount")
+    size_box = page.locator(".sizeBox")
+
+    # ClientTriggers: fires "mounted" once on the initial connect/render.
+    expect(mounted_count).to_have_text("1")
+    assert server.get("mounted_count") == 1
+
+    # Style: injected CSS actually applies (background becomes red).
+    expect(size_box).to_be_visible()
+    bg = size_box.evaluate("el => getComputedStyle(el).backgroundColor")
+    assert bg == "rgb(255, 0, 0)"
+
+    # SizeObserver: writes the observed box's dimensions into state.
+    # This happens asynchronously after the browser-side ResizeObserver
+    # fires, so poll instead of reading the state once.
+    box_size = server.wait_for("box_size")
+    assert box_size["size"]["width"] > 0
+    assert box_size["size"]["height"] > 0
diff --git a/tests/test_template_gotchas.py b/tests/test_template_gotchas.py
new file mode 100644
index 0000000..0898b5e
--- /dev/null
+++ b/tests/test_template_gotchas.py
@@ -0,0 +1,419 @@
+"""
+Locks down `AbstractElement`/`Template` serialization behavior that isn't
+covered elsewhere, with a focus on behavior that either:
+
+- must stay identical across `client_type`s (vue2/vue3 today; a future
+  "react" client_type should be checked against these the same way), or
+- is a deliberate, known per-`client_type` divergence (currently just the
+  `ref=` handling for vue3).
+
+This file exists to give a future `client_type="react"` a clear baseline to
+be validated against, and to catch accidental regressions in the string-based
+template generation used by the Vue paths today.
+"""
+
+import pytest
+
+from trame.app import get_server
+from trame_client.utils.defaults import TrameDefault
+from trame_client.widgets.html import (
+    Div,
+    Input,
+    Li,
+    Ul,
+    Component,
+    Transition,
+    TransitionGroup,
+    KeepAlive,
+    Teleport,
+    Suspense,
+    Template,
+)
+
+CLIENT_TYPES = ["vue2", "vue3"]
+
+
+# -----------------------------------------------------------------------------
+# ref= is the one attribute that is genuinely client_type-specific today
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_ref_handling_per_client_type(client_type):
+    server = get_server(f"test_ref_{client_type}", client_type=client_type)
+    widget = Div(trame_server=server, ref="my_ref")
+
+    if client_type == "vue3":
+        # vue3 rewrites ref= into a callback that registers the element
+        # into trame.refs, so JS-side method calls (server.js_call) work.
+        assert widget.html == ("<div :ref=\"(el) => trame.refs['my_ref'] = el\" />")
+    elif client_type == "vue2":
+        # vue2 has no equivalent rewrite - ref stays a plain Vue template ref.
+        assert widget.html == '<div ref="my_ref" />'
+    else:
+        assert False, "Invalid client type"
+
+
+# -----------------------------------------------------------------------------
+# Attribute value type handling - identical regardless of client_type
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_boolean_attribute_serialization(client_type):
+    server = get_server(f"test_bool_{client_type}", client_type=client_type)
+
+    # True -> bare attribute, no value
+    assert Div(trame_server=server, hidden=True).html == "<div hidden />"
+
+    # False -> explicit JS-bound false, not simply omitted
+    assert Div(trame_server=server, hidden=False).html == '<div :hidden="false" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_style_dict_is_flattened_to_css_string(client_type):
+    server = get_server(f"test_style_{client_type}", client_type=client_type)
+    widget = Div(trame_server=server, style={"color": "red", "font-size": "12px"})
+    assert widget.html == '<div style="color: red; font-size: 12px;" />'
+
+
+# -----------------------------------------------------------------------------
+# v-model modifier gotchas
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_v_model_named_modifiers(client_type):
+    server = get_server(f"test_vmodel_named_{client_type}", client_type=client_type)
+
+    assert Input(trame_server=server, v_model_lazy="a").html == (
+        '<input v-model.lazy="a" />'
+    )
+    assert Input(trame_server=server, v_model_trim="a").html == (
+        '<input v-model.trim="a" />'
+    )
+    # a name that is *not* a known modifier keyword becomes a named v-model
+    assert Input(trame_server=server, v_model_hello="a").html == (
+        '<input v-model:hello="a" />'
+    )
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_v_model_modifier_plus_extra_suffix_is_a_gotcha(client_type):
+    """
+    Combining a recognized modifier keyword (number/lazy/trim) with an
+    *additional* modifier does NOT produce `v-model.number.lazy` as one might
+    expect. Because `model_name` ("number") is technically a known modifier
+    but `modifiers` is non-empty, the code falls into the "named model"
+    branch and emits a colon instead of a dot for the first segment:
+    `v-model:number.lazy` rather than `v-model.number.lazy`.
+
+    This is almost certainly not what a Vue author would intend (there is no
+    custom model literally named "number" here) - it's captured as a test so
+    the behavior can't silently change (or silently "get fixed") without
+    this test flagging it either way.
+    """
+    server = get_server(f"test_vmodel_combo_{client_type}", client_type=client_type)
+    widget = Input(trame_server=server, v_model_number_lazy="a")
+    assert widget.html == '<input v-model:number.lazy="a" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_v_model_tuple_sets_state_default(client_type):
+    server = get_server(f"test_vmodel_default_{client_type}", client_type=client_type)
+    widget = Input(trame_server=server, v_model_number=("count", 2))
+    assert widget.html == '<input v-model.number="count" />'
+    assert server.state.count == 2
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_v_model_tuple_with_trame_default_sets_multiple_keys(client_type):
+    """
+    The second element of a (expr, default) tuple can be a `TrameDefault`
+    instead of a plain value, letting a single binding set defaults for
+    several state keys at once - not just the one being bound.
+    """
+    server = get_server(
+        f"test_vmodel_multidefault_{client_type}", client_type=client_type
+    )
+    widget = Input(
+        trame_server=server,
+        v_model_number=("count", TrameDefault(count=2, offset=1)),
+    )
+    assert widget.html == '<input v-model.number="count" />'
+    assert server.state.count == 2
+    assert server.state.offset == 1
+
+
+# -----------------------------------------------------------------------------
+# Event value forms: string / callable / 1-tuple / 2-tuple / 3-tuple
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_event_as_raw_js_string(client_type):
+    server = get_server(f"test_event_str_{client_type}", client_type=client_type)
+    widget = Div(trame_server=server, click="count = count + 1")
+    assert widget.html == '<div @click="count = count + 1" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_event_as_callable_and_tuples(client_type):
+    server = get_server(f"test_event_callable_{client_type}", client_type=client_type)
+
+    def handler():
+        pass
+
+    trigger_name = server.trigger_name(handler)
+
+    # bare callable -> trigger with no arguments
+    assert Div(trame_server=server, click=handler).html == (
+        f"<div @click=\"trigger('{trigger_name}')\" />"
+    )
+
+    # 1-tuple -> same as bare callable
+    assert Div(trame_server=server, click=(handler,)).html == (
+        f"<div @click=\"trigger('{trigger_name}')\" />"
+    )
+
+    # 2-tuple -> (callable, args_js)
+    assert Div(trame_server=server, click=(handler, "[4]")).html == (
+        f"<div @click=\"trigger('{trigger_name}', [4])\" />"
+    )
+
+    # 3-tuple -> (callable, args_js, kwargs_js)
+    assert Div(trame_server=server, click=(handler, "[4]", "{}")).html == (
+        f"<div @click=\"trigger('{trigger_name}', [4], {{}})\" />"
+    )
+
+
+def test_event_3tuple_kwargs_are_not_translated():
+    """
+    `_event_value_processing` deliberately translates the *args* JS
+    expression (2nd tuple element) against the state translator/namespace,
+    but passes the *kwargs* JS expression (3rd element) through verbatim.
+    This matters for namespaced/child servers, where a bare identifier like
+    `f` would otherwise get silently renamed to `child_f`.
+    """
+    root = get_server("test_event_kwargs_translation_root", client_type="vue3")
+    child = root.create_child_server(prefix="child_")
+    child.state.f = 1
+
+    def handler():
+        pass
+
+    trigger_name = child.trigger_name(handler)
+
+    widget = Div(trame_server=child, click=(handler, "f", "{other: f}"))
+
+    # args ("f") got namespaced to the child-prefixed key
+    assert f"trigger('{trigger_name}', child_f, {{other: f}})" in widget.html
+    # kwargs ("{other: f}") were NOT namespaced - passed through as-is
+    assert "{other: f}" in widget.html
+
+
+# -----------------------------------------------------------------------------
+# Custom `__properties`/`__events` extension mechanism (how a widget author
+# adds attributes/events beyond the built-in shared set)
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_custom_property_plain_string_is_literal(client_type):
+    """
+    A custom property registered as a plain name (no explicit JS key) is
+    treated as a literal HTML attribute, not a JS-bound one - the value is
+    NOT run through the JS expression translator, even though it "looks"
+    like it could be a bound prop.
+    """
+    server = get_server(f"test_custom_prop_{client_type}", client_type=client_type)
+    widget = Div(
+        trame_server=server,
+        __properties=["custom_prop"],
+        custom_prop="hello",
+    )
+    assert widget.html == '<div custom-prop="hello" />'
+    assert "custom_prop" not in widget.skipped_attributes
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_custom_property_explicit_js_key_supports_binding(client_type):
+    """
+    Registering a custom property as an (py_name, js_key) tuple with an
+    explicit `:jsKey` lets it behave like a real bound prop, including
+    the (expr, default) tuple form that sets a state default.
+    """
+    server = get_server(f"test_custom_prop_js_{client_type}", client_type=client_type)
+    widget = Div(
+        trame_server=server,
+        __properties=[("custom_prop", ":customProp")],
+        custom_prop=("my_key", 42),
+    )
+    assert widget.html == '<div :customProp="my_key" />'
+    assert server.state.my_key == 42
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_custom_event(client_type):
+    server = get_server(f"test_custom_event_{client_type}", client_type=client_type)
+    widget = Div(
+        trame_server=server,
+        __events=["custom_event"],
+        custom_event="doSomething()",
+    )
+    assert widget.html == '<div @custom-event="doSomething()" />'
+
+
+# -----------------------------------------------------------------------------
+# Small standalone helpers on AbstractElement
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_tts_sensitive_adds_key_binding(client_type):
+    server = get_server(f"test_tts_{client_type}", client_type=client_type)
+    widget = Div(trame_server=server)
+    widget.ttsSensitive()
+    assert ':key="`w' in widget.html
+    assert '-${tts}`"' in widget.html
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_raw_attrs_are_inserted_verbatim(client_type):
+    server = get_server(f"test_raw_attrs_{client_type}", client_type=client_type)
+    widget = Template(
+        trame_server=server,
+        raw_attrs=["v-slot:item.1", 'class="bg-red"'],
+    )
+    assert widget.html == '<template v-slot:item.1 class="bg-red" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_hide_sets_display_none(client_type):
+    server = get_server(f"test_hide_{client_type}", client_type=client_type)
+    widget = Div(trame_server=server)
+    widget.hide()
+    assert 'style="display: none"' in widget.html
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_hide_combined_with_explicit_style_is_a_gotcha(client_type):
+    """
+    `hide()` writes to a distinct internal attribute key ("__style") rather
+    than merging with an already-set `style=` kwarg. The two coexist in the
+    attribute dict, so calling `.hide()` on a widget that also has an
+    explicit `style=` kwarg renders **two** `style="..."` attributes in the
+    output - technically invalid HTML (duplicate attribute), even though
+    browsers will just use one of them. Captured here so this doesn't
+    silently change (or silently get "fixed") without a test noticing.
+    """
+    server = get_server(f"test_hide_style_combo_{client_type}", client_type=client_type)
+    widget = Div(trame_server=server, style={"color": "red"})
+    widget.hide()
+    assert widget.html.count('style="') == 2
+    assert 'style="color: red;"' in widget.html
+    assert 'style="display: none"' in widget.html
+
+
+# -----------------------------------------------------------------------------
+# Vue-only structural components - smoke tests for attribute/event mapping
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_component_is_attribute(client_type):
+    server = get_server(f"test_dyncomp_{client_type}", client_type=client_type)
+    widget = Component(trame_server=server, is_name="MyWidget")
+    assert widget.html == '<component is="MyWidget" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_transition_camel_case_props_and_events(client_type):
+    server = get_server(f"test_transition_{client_type}", client_type=client_type)
+    widget = Transition(
+        trame_server=server,
+        name="fade",
+        enter_from_class="x",
+        before_enter="onBeforeEnter()",
+    )
+    assert 'name="fade"' in widget.html
+    assert 'enterFromClass="x"' in widget.html
+    assert '@before-enter="onBeforeEnter()"' in widget.html
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_transition_group_move_class(client_type):
+    server = get_server(f"test_transitiongroup_{client_type}", client_type=client_type)
+    widget = TransitionGroup(trame_server=server, tag="ul", move_class="move")
+    assert widget.html == '<transition-group tag="ul" moveClass="move" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_keep_alive_props(client_type):
+    server = get_server(f"test_keepalive_{client_type}", client_type=client_type)
+    widget = KeepAlive(trame_server=server, include="a,b", max=5)
+    assert widget.html == '<keep-alive include="a,b" max="5" />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_teleport_props(client_type):
+    server = get_server(f"test_teleport_{client_type}", client_type=client_type)
+    widget = Teleport(trame_server=server, to="body", disabled=True)
+    assert widget.html == '<teleport to="body" disabled />'
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_suspense_props_and_events(client_type):
+    server = get_server(f"test_suspense_{client_type}", client_type=client_type)
+    widget = Suspense(trame_server=server, timeout=100, resolve="onResolve()")
+    assert 'timeout="100"' in widget.html
+    assert '@resolve="onResolve()"' in widget.html
+
+
+# -----------------------------------------------------------------------------
+# Template slot name registration (fixed, non-dynamic names)
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_template_fixed_slot_name(client_type):
+    """
+    `Template.slot_names` is a *class-level*, globally shared set - any
+    widget library that registers slot names (e.g. a data table widget
+    registering "item.name") makes that slot kwarg available on every
+    `Template` instance for the rest of the process. Save/restore it here so
+    this test doesn't leak state into others.
+    """
+    server = get_server(f"test_template_slot_{client_type}", client_type=client_type)
+    original_slot_names = set(Template.slot_names)
+    try:
+        Template.slot_names.add("item.name")
+        widget = Template(trame_server=server, v_slot_item_name="{ item }")
+        assert widget.html == '<template v-slot:item.name="{ item }" />'
+    finally:
+        Template.slot_names.clear()
+        Template.slot_names.update(original_slot_names)
+
+
+# -----------------------------------------------------------------------------
+# Parity check: same widget tree should produce structurally equivalent
+# output across client types, aside from the known ref= divergence above.
+# -----------------------------------------------------------------------------
+
+
+@pytest.mark.parametrize("client_type", CLIENT_TYPES)
+def test_full_widget_tree_parity_across_client_types(client_type):
+    server = get_server(f"test_parity_{client_type}", client_type=client_type)
+    server.state.items = ["a", "b"]
+
+    with Ul(trame_server=server) as ul:
+        Li(
+            trame_server=server,
+            children="{{ item }}",
+            v_for="item in items",
+            key="item",
+        )
+
+    assert ul.html == (
+        '<ul >\n<li :key="item" v-for="item in items">\n{{ item }}\n</li>\n</ul>'
+    )