ivue 2.2.1 → 2.2.2

package/README.md

@@ -10,52 +10,35 @@
 <h3 align="center">Plain classes. Full reactivity.<br>Infinite scalability. One kilobyte.</h3>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/ivue"><img src="https://img.shields.io/npm/v/ivue.svg" alt="npm"></a>
+  <a href="https://www.npmjs.com/package/ivue"><img src="https://img.shields.io/npm/v/ivue.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/ivue"><img src="https://img.shields.io/npm/dm/ivue.svg" alt="npm downloads"></a>
   <a href="https://github.com/infinite-system/ivue/actions/workflows/ci.yml"><img src="https://github.com/infinite-system/ivue/actions/workflows/ci.yml/badge.svg?branch=main" alt="build status"></a>
+  <img src="https://img.shields.io/badge/coverage-100%25-34d399" alt="100% test coverage">
+  <img src="https://img.shields.io/badge/gzipped-1.1%20kB-818cf8" alt="1.1 kB gzipped">
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT license"></a>
 </p>
 
 <p align="center">
-  <strong>Docs: <a href="https://ivue.dev/">ivue.dev</a></strong>
+  <a href="https://ivue.dev/">Docs</a> ·
+  <a href="https://ivue.dev/guide/getting-started">Getting Started</a> ·
+  <a href="https://ivue.dev/guide/standard">The Standard</a> ·
+  <a href="https://ivue.dev/examples/">Examples</a> ·
+  <a href="https://ivue.dev/guide/benchmarks">Benchmarks</a> ·
+  <a href="https://ivue.dev/blog/">Blog</a> ·
+  <a href="https://ivue.dev/community">Community</a>
 </p>
 
+---
+
 ivue builds Vue 3 reactivity out of plain TypeScript classes. Real
 inheritance, real encapsulation, real polymorphism — on ordinary objects,
-with nothing paid until first access. The whole engine is **1.1kb gzipped**
+with nothing paid until first access. The whole engine is **1.1 kB gzipped**
 with zero dependencies.
 
-- **Native class API** — `extends`, `super`, getters, setters, private
-  fields. Real inheritance, encapsulation and polymorphism, all reactive.
-- **Zero-cost creation** — instances are plain objects. A million of them
-  take 22 ms — 6 to 132× faster than the alternatives.
-- **One kilobyte** — 1.1kb gzipped, zero dependencies, 100% test coverage.
-  Stripped to the load-bearing core — an API you can hold in your head.
-- **Store or ViewModel** — the same class serves as a global store, a
-  component ViewModel, or a domain model. One mental model everywhere.
-- **Composition API, fully compatible** — composables plug in through
-  `$`-getters. The entire Vue ecosystem works inside your classes.
-- **TypeScript first** — writable ref-getters, fully typed instances,
-  precise inference. The type system shaped the engine's design.
-
-## Getting started
-
 ```sh
 npm i ivue vue
 ```
 
-## Built for humans and AI
-
-ivue ships with an [Operating Manual](https://ivue.dev/guide/standard) —
-the complete authoring standard as annotated templates, rules, and a review
-checklist. It reads as documentation and works as a drop-in skill for AI
-coding agents, so generated code follows the same standard your team writes:
-
-```sh
-npx ivue skill        # installs .claude/skills/ivue/SKILL.md, version-locked
-npx ivue skill --all  # + Codex/Cursor/Copilot where already in use
-```
-
-### Usage
-
 ```ts
 import { Reactive } from 'ivue';
 import { ref } from 'vue';
@@ -79,8 +62,6 @@ export namespace Counter {
 }
 ```
 
-In a component:
-
 ```vue
 <script setup lang="ts">
 import { Counter } from './Counter';
@@ -98,19 +79,20 @@ const { count } = counter;
 
 Full walkthrough: [Getting Started](https://ivue.dev/guide/getting-started).
 
-## Hard problems, solved together
-
-Each of these sank earlier class-reactivity attempts. ivue ships all of them
-as one coherent design:
+## Why classes, why now
 
-- **Bound methods** — `this.method` is always correct, always the same reference.
-- **Reactive inheritance** — deep `super.x.value` chains resolve level-safe.
-- **Development parity** — the same class identity, direct binding, and engine branches in development and production.
-- **Circular import immunity** — the namespace pattern resolves mutual references in any load order.
-- **Writable getter types** — ref-returning getters type as writable; instances fully inferred.
-- **Deterministic teardown** — `$watch` scopes per instance, `$stopEffects()` cleans up.
-- **Minimal memory footprint** — derivations are shared prototype getters, not per-instance allocations.
-- **Hot paths** — reads hoist to native ref speed with one line where it matters.
+- **Native class API** — `extends`, `super`, getters, setters, private
+  fields. Real inheritance, encapsulation and polymorphism, all reactive.
+- **Zero-cost creation** — instances are plain objects. A million of them
+  take 22 ms — 6 to 132× faster than the alternatives.
+- **One kilobyte** — 1.1 kB gzipped, zero dependencies, 100% test coverage.
+  Stripped to the load-bearing core — an API you can hold in your head.
+- **Store or ViewModel** — the same class serves as a global store, a
+  component ViewModel, or a domain model. One mental model everywhere.
+- **Composition API, fully compatible** — composables plug in through
+  `$`-getters. The entire Vue ecosystem works inside your classes.
+- **TypeScript first** — writable ref-getters, fully typed instances,
+  precise inference. The type system shaped the engine's design.
 
 ## One idea, carried through
 
@@ -120,10 +102,8 @@ plain and re-derives on every read — reactive with zero allocation. Methods
 bind themselves once, to the right `this`. Instances stay ordinary objects:
 no proxy wraps them, no work happens at construction.
 
-Inheritance, teardown, development parity, speed — consequences of that one move.
-
-Composables plug straight in — the entire Vue ecosystem works inside your
-classes:
+Inheritance, teardown, development parity, speed — consequences of that one
+move. And composables plug straight in:
 
 ```ts
 import { useMouse } from '@vueuse/core';
@@ -141,10 +121,73 @@ class $Pointer {
 }
 ```
 
+## Hard problems, solved together
+
+Each of these sank earlier class-reactivity attempts. ivue ships all of them
+as one coherent design:
+
+- **Bound methods** — `this.method` is always correct, always the same reference.
+- **Reactive inheritance** — deep `super.x.value` chains resolve level-safe.
+- **Development parity** — the same class identity, direct binding, and engine branches in development and production.
+- **[Circular import immunity](https://ivue.dev/blog/circular-imports-dissolved)** — the namespace pattern resolves mutual references in any load order.
+- **Writable getter types** — ref-returning getters type as writable; instances fully inferred.
+- **Deterministic teardown** — `$watch` scopes per instance, `$stopEffects()` cleans up.
+- **Minimal memory footprint** — derivations are shared prototype getters, not per-instance allocations.
+- **Hot paths** — reads hoist to native ref speed with one line where it matters.
+
+## `Static()` — capability classes <sub>(`ivue/extras`, +0.5 kB)</sub>
+
+The same discipline for the class-level surface:
+[`Static()`](https://ivue.dev/guide/static) makes static methods lazy-bound
+and `$`-prefixed static getters cached **per receiver** — a lazy singleton,
+an inheritance-aware store, an override seam, and a test boundary in one
+declaration. It retires
+[module-level state](https://ivue.dev/blog/module-level-state) outright, and
+it has no Vue dependency — the identical idiom runs under Node and Bun:
+
+```ts
+import { Static } from 'ivue/extras';
+
+class $TextSegmentation {
+  protected static get $segmenter() {
+    return new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+  }
+}
+
+export namespace TextSegmentation {
+  export const $Class = Static($TextSegmentation); // anchor — children extend this
+  export let Class = $Class;
+}
+```
+
+## Proven at scale
+
+<p align="center">
+  <a href="https://ivue.dev/examples/invar">
+    <img src="docs_v2/public/invar-editor.svg" alt="Invar — a terminal IDE built on ivue" width="720">
+  </a>
+</p>
+
+[**Invar**](https://ivue.dev/examples/invar) is ivue at full scale: a
+complete terminal IDE — editor, workspace search, git, terminals, LSP,
+agents — running on ivue classes under Bun, with no DOM and no Vue
+components. **94,000 source lines, 345 classes, 35 invariant contracts,
+zero import cycles**, built almost entirely by AI agents holding the
+[Standard](https://ivue.dev/guide/standard) as their base discipline.
+
+And at the other end of scale on the web: a
+[1,000,000-row virtual scroller](https://ivue.dev/examples/virtual-scroller),
+a [20,000,000-cell flyweight grid](https://ivue.dev/examples/flyweight-grid)
+at 4.7 bytes per live cell, and
+[production-grade Quasar field components](https://ivue.dev/examples/choose-field) —
+all with full source on the page.
+
 ## The numbers
 
-Measured, not promised — method and live in-browser benchmarks in
-[the docs](https://ivue.dev/guide/benchmarks).
+Measured, not promised — every number carries its method, and the
+load-bearing benchmarks
+[run live in your browser](https://ivue.dev/guide/benchmarks) on the
+shipped engine:
 
 | creating 1,000,000 instances | time | ivue is |
 | --- | --- | --- |
@@ -164,22 +207,49 @@ Taken all the way down: a fully reactive spreadsheet model holding
 floor — because in ivue, everything costs proportional to what's *observed*,
 nothing costs proportional to what *exists*.
 
+## Built for humans and AI
+
+ivue ships with a
+[Standard Operating Manual](https://ivue.dev/guide/standard) — the complete
+authoring standard as annotated templates, rules, and a review checklist. It
+reads as documentation and works as a drop-in skill for AI coding agents, so
+generated code follows the same standard your team writes:
+
+```sh
+npx ivue skill        # installs .claude/skills/ivue/SKILL.md, version-locked
+npx ivue skill --all  # + Codex/Cursor/Copilot where already in use
+```
+
+Agents holding the Standard have
+[derived correct patterns its own author never wrote](https://ivue.dev/blog/patterns-the-author-never-wrote) —
+the manual is a generator, not a catalog. The wider argument:
+[Reactive framework for the AI era](https://ivue.dev/blog/reactive-framework-for-the-ai-era).
+
+## Go deeper
+
+- [Fundamental Principles](https://ivue.dev/guide/principles) — the design, from first ideas
+- [The Engine](https://ivue.dev/engine) — how the transform works, internals annotated
+- [Advanced Patterns](https://ivue.dev/guide/namespace-pattern) — Namespace, Computed Seed, Keyed Version Signals, Flyweight, Static, Backend ivue
+- [The Blog](https://ivue.dev/blog/) — 30 posts of measured argument, from [circular imports](https://ivue.dev/blog/circular-imports-dissolved) to [what JavaScript becomes](https://ivue.dev/blog/what-javascript-becomes)
+
+## Community
+
+Questions, ideas, bug reports — there's no ticket queue, just the people who
+write the code: [Discussions](https://github.com/infinite-system/ivue/discussions) ·
+[Issues](https://github.com/infinite-system/ivue/issues) ·
+[Discord](https://discord.gg/8MgZNsrfv) ·
+[X @evgenykalash](https://x.com/evgenykalash) ·
+[Community page](https://ivue.dev/community)
+
 ## A note on the size
 
-The complete engine is **1.1kb gzipped**: lazy prototype transformation,
+The complete engine is **1.1 kB gzipped**: lazy prototype transformation,
 bound methods, inheritance, lifecycle ownership, and the public utilities.
 Development uses that same engine without a second hot-update execution path.
 
 > *Perfection is achieved, not when there is nothing more to add, but when
 > there is nothing left to take away.* — Antoine de Saint-Exupéry
 
-## Documentation
-
-Full guide, principles, live benchmarks, advanced examples (a 1,000,000-row
-virtual scroller, a 20,000,000-cell flyweight grid, production-grade Quasar
-field components), and the API reference:
-**https://ivue.dev/**
-
 ## License
 
 [MIT](./LICENSE)

package/lib/__tests__/Static.vitest.spec.ts

@@ -362,6 +362,70 @@ describe('Static $-cached getters', () => {
     expect(open()).toBe(3); // detached, still bound
   });
 
+  it('the anchor shape: $Class = Static($X), Class = Reactive($Class)', () => {
+    class $Panel {
+      constructor(public seed: number) {}
+      get width() {
+        return ref(this.seed);
+      }
+      static get glyph() {
+        return '#'; // live knob
+      }
+      static get $legend() {
+        return { marker: this.glyph.repeat(2) };
+      }
+      static describe() {
+        return this.$legend.marker;
+      }
+    }
+
+    const Anchor = Static($Panel);
+    const Panel = Reactive(Anchor);
+
+    // instance side: full Reactive semantics through the wrapper
+    const panel: any = new Panel(7);
+    const widthCell = panel.width;
+    expect(widthCell.value).toBe(7);
+    expect(panel.width).toBe(widthCell); // cached cell
+    panel.$stopEffects();
+    expect(panel.width).not.toBe(widthCell); // teardown reset works
+
+    // static side: caches + binding live on the same published class
+    expect(Panel.$legend).toBe(Panel.$legend);
+    const describe = Panel.describe;
+    expect(describe()).toBe('##');
+
+    // Reactive() is identity, so anchor and published class are one object
+    expect(Panel).toBe(Anchor);
+  });
+
+  it('a bare double extending the anchor inherits working semantics', () => {
+    class $Momentum {
+      static get friction() {
+        return 2; // knob
+      }
+      static get $atRest() {
+        return { threshold: this.friction * 10 };
+      }
+      static settle() {
+        return this.$atRest.threshold;
+      }
+    }
+
+    const Anchor = Static($Momentum);
+    // the downstream case: a pinch-knob double with NO wrap of its own
+    class TunedMomentum extends Anchor {
+      static override get friction() {
+        return 7;
+      }
+    }
+
+    expect(Anchor.$atRest.threshold).toBe(20); // parent reads FIRST
+    expect(TunedMomentum.$atRest.threshold).toBe(70); // child still derives itself
+    const settle = TunedMomentum.settle;
+    expect(settle()).toBe(70); // inherited method binds to the child, detached
+  });
+
   it('walks the raw inheritance chain — ancestor $-getters cache per receiver', () => {
     class $Base {
       static get scale() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ivue",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {
@@ -37,10 +37,12 @@
     "cypress:headed": "cypress run --component --browser chrome --headed --no-exit",
     "build": "tsc --version;tsc --p ./tsconfig.json && vite build",
     "build:demo": "tsc --p ./tsconfig.json && vite build demo",
-    "build:docs": "npm run sync:examples && npm --prefix docs_v2 run build",
+    "build:docs": "npm run sync:examples && npm --prefix docs_v2 run build && npm run check:links",
+    "check:links": "node docs_v2/scripts/check-links.mjs",
     "render:og": "node docs_v2/scripts/brand-image-generator.mjs og",
     "render:form-header": "node docs_v2/scripts/brand-image-generator.mjs form-header",
     "render:banner": "node docs_v2/scripts/brand-image-generator.mjs blog",
+    "sync:blog-dates": "node docs_v2/scripts/blog-dates-generator.mjs",
     "preview:demo": "npm run build:demo && vite preview demo --host",
     "preview:docs": "npm --prefix docs_v2 run preview",
     "release": "npm run build && npm publish",
@@ -134,5 +136,6 @@
   "license": "MIT",
   "bin": {
     "ivue": "bin/ivue.mjs"
-  }
+  },
+  "packageManager": "npm@11.6.2"
 }

package/skills/ivue/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: ivue
-description: Use when writing or editing ivue `Reactive()` classes, converting a Vue component or composable to ivue, or resolving any `.value`-in-template, `defineExpose`/`reactive()` instance-typing, `ReactiveInstance`/`Instance`, `$watch`/`$watchEffect`, or namespace-export question — the operating manual for Vue 3 class-based reactivity where state is ref-getters, derived values are plain getters, and Refs/Computeds are `.value` everywhere.
+description: Use when writing or editing ivue `Reactive()` classes, converting a Vue component or composable to ivue, or resolving any `.value`-in-template, `defineExpose`/`reactive()` instance-typing, `ReactiveInstance`/`Instance`, `$watch`/`$watchEffect`, or namespace-export question, or any `Static()` capability-class / `$`-cached-static / anchor question — the operating manual for Vue 3 class-based reactivity where state is ref-getters, derived values are plain getters, and Refs/Computeds are `.value` everywhere.
 ---
 
 # ivue `Reactive`
@@ -30,6 +30,7 @@ path and skip the install; never add the dependency alongside a vendored copy.
 
 ```ts
 import { Reactive } from 'ivue'; // in this app: 'src/utils/ivue'
+import { Static } from 'ivue/extras';
 import {
   ref,
   shallowRef,
@@ -42,6 +43,10 @@ import {
 import { useProjectStore } from 'src/stores/project.store';
 
 class $Box {
+  static get DEFAULT_HEIGHT() {
+    return 4;
+  }
+
   // Constructor runs SYNCHRONOUSLY where you `new` — in setup() that
   // means the constructor body IS setup code, and the whole toolbox
   // works here:
@@ -68,7 +73,7 @@ class $Box {
   // RAW: read AND write via .value. shallowRef for big structures you
   // REPLACE wholesale.
   get height() {
-    return ref(4);
+    return ref((this.constructor as typeof $Box).DEFAULT_HEIGHT);
   }
   get rows() {
     return shallowRef<Row[]>([]);
@@ -146,11 +151,6 @@ class $Box {
     return this.$project.projectId;
   }
 
-  // CONSTANTS / CONFIG — plain fields ONLY. A plain field written
-  // from a method triggers NOTHING (no Ref/Computed, no dependency
-  // edge). Never store mutable state here.
-  baseWidth = 400;
-
   // METHODS — plain; engine-binds to raw (stable identity, safe as
   // handlers). Reactive-closure bodies above delegate HERE (the
   // thin-closure rule).
@@ -179,7 +179,7 @@ class $Box {
 }
 
 export namespace Box {
-  export const $Class = $Box; // raw — children `extends` this
+  export const $Class = Static($Box); // static anchor — children `extends` this
   export let Class = Reactive($Class); // reactive — you `new` this
   // the type of every unwrapping surface (defineExpose, reactive())
   export type Instance = typeof Class.Instance;
@@ -421,6 +421,7 @@ session.dispose();
 | ✅ constructor runs init; register hooks/watchers there | ❌ add an `init()` method expecting auto-call — ivue never calls it |
 | ✅ plain `watch` in component-scoped constructors; `$watch` + a `$stopEffects` dispose path for outliving instances | ❌ default to `this.$watch` in a component-scoped class — its scope silently outlives unmount |
 | ✅ compose cleanup as an ordinary method — `dispose() { /* non-Vue cleanup */ this.$stopEffects(); }` | ❌ expect a teardown hook — ivue auto-calls NOTHING (no `init()`, no `stopEffects()`) |
+| ✅ a class with static members anchors them: `const $Class = Static($X)` (`ivue/extras`) | ❌ `extends X.Class` — the mutable slot is an eager snapshot of one generation; always extend `$Class` |
 
 ## The unwrapping-surface typing invariant
 
@@ -498,6 +499,101 @@ safe without ordering discipline or `forwardRef`-style workarounds:
   stays impossible because it evaluates at load time and both parents cannot
   exist first.
 
+## `Static()` — the static-side sibling (from `ivue/extras`)
+
+`Reactive()` owns instances. Stateless CAPABILITY classes — function bags for
+files, git, parsers, clocks: never constructed, only called and swapped — use
+`Static()` from the `ivue/extras` entry (separate, so core stays the engine):
+
+- **Static methods bind lazily with stable identity** — detachable, safe as a
+  router/queue/listener callback, bound to the RECEIVING class.
+- **Get-only statics named `$…` compute once PER RECEIVER.** The `$` prefix
+  promises stable identity, NOT immutability — a mutable memo table is a
+  legitimate `$`-cache. Non-`$` static getters stay LIVE: those are the knobs
+  test subclasses pinch.
+
+THE ANCHOR RULE — a class that declares static members wraps them ONCE, at
+`$Class`, so subclasses and test doubles inherit working semantics by
+extending `$Class` bare:
+
+```ts
+import { Static } from 'ivue/extras';
+
+class $GitCommands {
+  static get binary() {
+    return 'git'; // LIVE knob — no $ prefix
+  }
+  static get $environment() {
+    return { LC_ALL: 'C' }; // computed once per receiver
+  }
+  static stage(path: string) {
+    return this.run(['add', '--', path]); // `this` = receiving class
+  }
+}
+
+export namespace GitCommands {
+  export const $Class = Static($GitCommands); // anchor — wrap HERE
+  export let Class = $Class; // selection — kernels/tests swap this
+}
+```
+
+Statics AND reactive instances on one class — anchor the statics, then
+`Reactive()`:
+
+```ts
+export namespace Settings {
+  export const $Class = Static($Settings);
+  export let Class = Reactive($Class); // in-place: Class === $Class
+  export type Instance = typeof Class.Instance;
+}
+```
+
+No static members → no wrapper: `$Class = $X`, the standard form unchanged.
+
+## Reading your own statics — the ladder
+
+`Reactive(X) === X`, so a namespace's `Class` slot IS the base class. A getter
+that reads statics through it therefore hard-binds to the base and silently
+IGNORES a subclass override — the exact opposite of what a live (non-`$`)
+static getter is for:
+
+```ts
+// ❌ three members, a double cast, and the override never applies
+protected get Tooltip() {
+  return Tooltip.Class as unknown as typeof $Tooltip;
+}
+public static get TOOLTIP_DWELL_SECONDS() { return 0.4; }
+protected get tooltipDwellSeconds() {
+  return this.Tooltip.TOOLTIP_DWELL_SECONDS;   // base value forever
+}
+```
+
+Measured: a subclass setting `0.1` still reads `0.4` through this shape.
+
+Take the first rung that applies:
+
+1. **Nothing outside the instance reads it** → delete the static. A plain
+   instance getter is zero bytes per instance and natively overridable:
+   ```ts
+   protected get tooltipDwellSeconds() { return 0.4; }
+   ```
+2. **Something outside reads it** (tests pinching the knob, another class)
+   → keep the static and read it live off the receiver:
+   ```ts
+   protected get tooltipDwellSeconds() {
+     return (this.constructor as typeof $Tooltip).TOOLTIP_DWELL_SECONDS;
+   }
+   ```
+   `this.constructor` is the actual class: the subclass when subclassed, and
+   an engine class that INHERITS `$Class` for a plain reactive instance, so
+   statics resolve in both cases. TypeScript types `constructor` as
+   `Function`, so the one cast is required and is the honest cost.
+3. **Overriding must NOT happen** → name the class directly,
+   `$Tooltip.TOOLTIP_DWELL_SECONDS`, and let the code say so.
+
+Never introduce a `protected get <ClassName>()` self-reference getter. It is a
+cast wearing a getter costume: it looks live and is not.
+
 ## Generic classes (brief)
 
 `ReactiveClass<C>` cannot carry `<T>` through (no higher-kinded types), but
@@ -664,6 +760,27 @@ Contiguity says "same kind of thing"; a blank line says "the kind changes,
 or complexity rises." Spend the signal deliberately — a blanket
 newline-between-everything rule makes air mean nothing.
 
+Class members use one order: static members → constructor → state getters →
+prop getters → derived getters → methods. The constructor is the first
+instance member. Comments and invariant annotations can precede the member
+they describe.
+
+Constants use one form per role:
+
+| Role | Form |
+| --- | --- |
+| Tunable or overridable class constant | `static get SCREAMING_SNAKE_CASE()` |
+| Protocol or byte constant on a hot path, never overridden | `static readonly SCREAMING_SNAKE_CASE` with a one-line hot-path comment |
+| Contributor or pane identity data | Instance `readonly lowerCamelCase` field |
+| Extensible constructed dependency | Field assigned from a prototype `createX()` factory method |
+| Any other supposed constant | Defect: choose the real role or remove it |
+
+Read live statics through the receiving class. JavaScript dispatches getter
+and prototype method overrides while a parent constructor runs. A subclass
+field initializer runs only after `super()` returns. It cannot change parent
+construction. This mechanism makes getters safe tunables and `createX()`
+methods safe construction seams.
+
 ```ts
 // state block — CONTIGUOUS: reads as the instance's STATE TABLE
 get sheet() {
@@ -708,7 +825,7 @@ convention and check it in review.
 ## Self-review checklist (run over your ivue diff)
 
 - [ ] Every mutable state member is `get x() { return ref(...) }` — no mutable plain fields.
-- [ ] Inside the class, every Ref/Computed read/write uses `.value`; plain fields are constants/config only.
+- [ ] Inside the class, every Ref/Computed read/write uses `.value`; every plain field matches one role in the constants table.
 - [ ] Derived values are PLAIN getters; `computed()` appears only for expensive / render-suppressing / stable-handle cases.
 - [ ] Stores/composables are injected via `private get $store() { return useStore() }`, not field initializers.
 - [ ] The class is exported through the namespace (`$Class` / `Class = Reactive($Class)` / `Instance`); generics cast `Class` and hand-apply `ReactiveInstance` to `Instance<T>`.
@@ -723,4 +840,6 @@ convention and check it in review.
 - [ ] Every `computed()`/constructor-watch CALLBACK delegates to a method (`computed(() => this.recalculate())`) — no logic inlined in reactive closures; the arrow form, never `computed(this.method)`.
 - [ ] Identifiers are unfolded to domain words (`row`/`col`/`cell`/`cellValue`/`versionRef`…), loop indices and specs included — no single-letter names, no name meaning different things in different methods.
 - [ ] Keyed/sparse state uses the Map-of-refs shape (get-or-create on read, peek-only bump on write, explicit release path) — never one getter per key, never a deep `reactive()` collection.
+- [ ] Static members are anchored (`const $Class = Static($X)`); `$`-prefixed static getters are compute-once-per-receiver caches, non-`$` statics stay live knobs, and inheritance extends `$Class` — never the mutable `Class`.
+- [ ] Static members precede the constructor; the constructor precedes state, prop, and derived getters; methods come last.
 - [ ] Spacing carries meaning: declaration-like getters contiguous within their group; blank lines only where a doc comment / multi-line body / category boundary begins; methods always separated.