ivue 2.2.1 → 2.3.0

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,38 @@ const { count } = counter;
 
 Full walkthrough: [Getting Started](https://ivue.dev/guide/getting-started).
 
-## Hard problems, solved together
+## Built for humans and AI
 
-Each of these sank earlier class-reactivity attempts. ivue ships all of them
-as one coherent design:
+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:
 
-- **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.
+```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).
+
+## Why classes, why now
+
+- **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 +120,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 +139,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 +225,31 @@ 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*.
 
+## 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/dist/LazyShared.d.ts

@@ -0,0 +1,49 @@
+/**
+ * `LazyShared<T>` — the safe shared-store cell for static classes.
+ *
+ * The static-class split (see `Static()`): `$`-prefixed static getters
+ * are compute-once-PER-RECEIVER caches — perfect for memos and per-class
+ * tuning, where a subclass forking its own copy is the feature. A SHARED
+ * store (a registry, a ledger) must never live there: per-receiver
+ * caching means a subclass reading `this.$store` silently forks the
+ * registry. The fix is a `static readonly` FIELD — one reference on the
+ * declaring class, inherited, never receiver-cached — but an eager field
+ * initializer runs at MODULE LOAD, so it may only hold dependency-free
+ * values; the moment it constructs another namespace's class it races
+ * import cycles.
+ *
+ * `LazyShared` closes the triangle. The field eagerly stores the CELL
+ * (load-safe — a thunk evaluates nothing), the thunk runs on first
+ * `.value` read (cycle-safe — every module in any import cycle has
+ * finished loading), and memoization mutates cell-internal state
+ * (fork-safe — no receiver, subclass included, can fork it):
+ *
+ *   class $SearchRegistry {
+ *     protected static readonly sharedBackend = new LazyShared(
+ *       () => new SearchBackend.Class(),
+ *     );
+ *     protected static get $backend() {
+ *       return this.sharedBackend.value; // the field IS the pin
+ *     }
+ *   }
+ *
+ * A thunk that reads its own cell (directly or through another cell)
+ * throws a NAMED cycle error instead of a bare stack overflow, and a
+ * failed construction leaves the cell retryable, never poisoned.
+ *
+ * Ships from `ivue/extras` (not the reactive core) so the primary `ivue`
+ * entry stays minimal.
+ */
+export declare class LazyShared<T> {
+    private readonly make;
+    constructor(make: () => T);
+    private constructed;
+    private constructing;
+    private stored;
+    get value(): T;
+    /**
+     * Drop the constructed value; the next read constructs again. For
+     * tests and process recomposition — production code never resets.
+     */
+    reset(): void;
+}

package/dist/extras.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=Object.hasOwn;exports.Static=function(c){const r=class extends c{},s=new Set;for(let o=c;o!==Function.prototype;o=Object.getPrototypeOf(o))for(const e of Reflect.ownKeys(o)){if(s.has(e))continue;s.add(e);const t=Object.getOwnPropertyDescriptor(o,e);if(typeof t.value=="function"){const i=t.value,n=typeof e=="string"?Symbol.for(`ivue.staticBound.${e}`):Symbol("ivue.staticBound");Object.defineProperty(r,e,{configurable:!0,enumerable:t.enumerable,get(){return u(this,n)||Object.defineProperty(this,n,{configurable:!0,value:i.bind(this)}),this[n]}})}else if(t.get&&!t.set&&typeof e=="string"&&e.startsWith("$")){const i=t.get,n=Symbol.for(`ivue.staticCache.${e}`);Object.defineProperty(r,e,{configurable:!0,enumerable:t.enumerable,get(){return u(this,n)||Object.defineProperty(this,n,{configurable:!0,value:i.call(this)}),this[n]}})}}return r};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=Object.hasOwn;exports.LazyShared=class{constructor(s){this.make=s,this.constructed=!1,this.constructing=!1,this.stored=null}get value(){if(!this.constructed){if(this.constructing)throw new Error("LazyShared thunk cycle: this cell is read inside its own construction. Break the dependency between the two thunks.");this.constructing=!0;try{this.stored=this.make(),this.constructed=!0}finally{this.constructing=!1}}return this.stored}reset(){this.constructed=!1,this.stored=null}},exports.Static=function(s){const i=class extends s{},c=new Set;for(let r=s;r!==Function.prototype;r=Object.getPrototypeOf(r))for(const t of Reflect.ownKeys(r)){if(c.has(t))continue;c.add(t);const e=Object.getOwnPropertyDescriptor(r,t);if(typeof e.value=="function"){const o=e.value,n=typeof t=="string"?Symbol.for(`ivue.staticBound.${t}`):Symbol("ivue.staticBound");Object.defineProperty(i,t,{configurable:!0,enumerable:e.enumerable,get(){return u(this,n)||Object.defineProperty(this,n,{configurable:!0,value:o.bind(this)}),this[n]}})}else if(e.get&&!e.set&&typeof t=="string"&&t.startsWith("$")){const o=e.get,n=Symbol.for(`ivue.staticCache.${t}`);Object.defineProperty(i,t,{configurable:!0,enumerable:e.enumerable,get(){return u(this,n)||Object.defineProperty(this,n,{configurable:!0,value:o.call(this)}),this[n]}})}}return i};

package/dist/extras.d.ts

@@ -7,3 +7,4 @@
  *   import { Static } from 'ivue/extras';
  */
 export { Static, type ClassConstructor } from './Static';
+export { LazyShared } from './LazyShared';

package/dist/extras.es.js

@@ -1,27 +1,49 @@
-const a = Object.hasOwn;
-function u(s) {
-  const r = class extends s {
+const u = Object.hasOwn;
+function a(i) {
+  const n = class extends i {
   }, c = /* @__PURE__ */ new Set();
-  for (let n = s; n !== Function.prototype; n = Object.getPrototypeOf(n))
-    for (const e of Reflect.ownKeys(n)) {
-      if (c.has(e))
+  for (let r = i; r !== Function.prototype; r = Object.getPrototypeOf(r))
+    for (const t of Reflect.ownKeys(r)) {
+      if (c.has(t))
         continue;
-      c.add(e);
-      const t = Object.getOwnPropertyDescriptor(n, e);
-      if (typeof t.value == "function") {
-        const i = t.value, o = typeof e == "string" ? Symbol.for(`ivue.staticBound.${e}`) : Symbol("ivue.staticBound");
-        Object.defineProperty(r, e, { configurable: !0, enumerable: t.enumerable, get() {
-          return a(this, o) || Object.defineProperty(this, o, { configurable: !0, value: i.bind(this) }), this[o];
+      c.add(t);
+      const e = Object.getOwnPropertyDescriptor(r, t);
+      if (typeof e.value == "function") {
+        const o = e.value, s = typeof t == "string" ? Symbol.for(`ivue.staticBound.${t}`) : Symbol("ivue.staticBound");
+        Object.defineProperty(n, t, { configurable: !0, enumerable: e.enumerable, get() {
+          return u(this, s) || Object.defineProperty(this, s, { configurable: !0, value: o.bind(this) }), this[s];
         } });
-      } else if (t.get && !t.set && typeof e == "string" && e.startsWith("$")) {
-        const i = t.get, o = Symbol.for(`ivue.staticCache.${e}`);
-        Object.defineProperty(r, e, { configurable: !0, enumerable: t.enumerable, get() {
-          return a(this, o) || Object.defineProperty(this, o, { configurable: !0, value: i.call(this) }), this[o];
+      } else if (e.get && !e.set && typeof t == "string" && t.startsWith("$")) {
+        const o = e.get, s = Symbol.for(`ivue.staticCache.${t}`);
+        Object.defineProperty(n, t, { configurable: !0, enumerable: e.enumerable, get() {
+          return u(this, s) || Object.defineProperty(this, s, { configurable: !0, value: o.call(this) }), this[s];
         } });
       }
     }
-  return r;
+  return n;
+}
+class h {
+  constructor(n) {
+    this.make = n, this.constructed = !1, this.constructing = !1, this.stored = null;
+  }
+  get value() {
+    if (!this.constructed) {
+      if (this.constructing)
+        throw new Error("LazyShared thunk cycle: this cell is read inside its own construction. Break the dependency between the two thunks.");
+      this.constructing = !0;
+      try {
+        this.stored = this.make(), this.constructed = !0;
+      } finally {
+        this.constructing = !1;
+      }
+    }
+    return this.stored;
+  }
+  reset() {
+    this.constructed = !1, this.stored = null;
+  }
 }
 export {
-  u as Static
+  h as LazyShared,
+  a as Static
 };

package/lib/LazyShared.ts

@@ -0,0 +1,71 @@
+/**
+ * `LazyShared<T>` — the safe shared-store cell for static classes.
+ *
+ * The static-class split (see `Static()`): `$`-prefixed static getters
+ * are compute-once-PER-RECEIVER caches — perfect for memos and per-class
+ * tuning, where a subclass forking its own copy is the feature. A SHARED
+ * store (a registry, a ledger) must never live there: per-receiver
+ * caching means a subclass reading `this.$store` silently forks the
+ * registry. The fix is a `static readonly` FIELD — one reference on the
+ * declaring class, inherited, never receiver-cached — but an eager field
+ * initializer runs at MODULE LOAD, so it may only hold dependency-free
+ * values; the moment it constructs another namespace's class it races
+ * import cycles.
+ *
+ * `LazyShared` closes the triangle. The field eagerly stores the CELL
+ * (load-safe — a thunk evaluates nothing), the thunk runs on first
+ * `.value` read (cycle-safe — every module in any import cycle has
+ * finished loading), and memoization mutates cell-internal state
+ * (fork-safe — no receiver, subclass included, can fork it):
+ *
+ *   class $SearchRegistry {
+ *     protected static readonly sharedBackend = new LazyShared(
+ *       () => new SearchBackend.Class(),
+ *     );
+ *     protected static get $backend() {
+ *       return this.sharedBackend.value; // the field IS the pin
+ *     }
+ *   }
+ *
+ * A thunk that reads its own cell (directly or through another cell)
+ * throws a NAMED cycle error instead of a bare stack overflow, and a
+ * failed construction leaves the cell retryable, never poisoned.
+ *
+ * Ships from `ivue/extras` (not the reactive core) so the primary `ivue`
+ * entry stays minimal.
+ */
+export class LazyShared<T> {
+  constructor(private readonly make: () => T) {}
+
+  private constructed = false;
+  private constructing = false;
+  private stored: T | null = null;
+
+  get value(): T {
+    if (!this.constructed) {
+      if (this.constructing) {
+        throw new Error(
+          'LazyShared thunk cycle: this cell is read inside its own ' +
+            'construction. Break the dependency between the two thunks.',
+        );
+      }
+      this.constructing = true;
+      try {
+        this.stored = this.make();
+        this.constructed = true;
+      } finally {
+        this.constructing = false;
+      }
+    }
+    return this.stored as T;
+  }
+
+  /**
+   * Drop the constructed value; the next read constructs again. For
+   * tests and process recomposition — production code never resets.
+   */
+  reset(): void {
+    this.constructed = false;
+    this.stored = null;
+  }
+}

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

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import { LazyShared } from '../LazyShared';
+import { Static } from '../Static';
+
+describe('LazyShared', () => {
+  it('evaluates nothing at definition, constructs once, shares the result', () => {
+    let constructionCount = 0;
+    const cell = new LazyShared(() => {
+      constructionCount += 1;
+      return { count: constructionCount };
+    });
+    expect(constructionCount).toBe(0); // load-safe: the thunk is inert
+    expect(cell.value).toBe(cell.value);
+    expect(constructionCount).toBe(1);
+  });
+
+  it('every receiver converges on the ONE singleton — forking the access path is harmless', () => {
+    let constructionCount = 0;
+    class $Owner {
+      protected static readonly sharedStore = new LazyShared(() => {
+        constructionCount += 1;
+        return new Map<string, number>();
+      });
+      static store(): Map<string, number> {
+        return this.sharedStore.value;
+      }
+    }
+    class $SubReceiver extends $Owner {}
+    $Owner.store().set('planted', 7);
+    expect($SubReceiver.store().get('planted')).toBe(7);
+    expect($SubReceiver.store()).toBe($Owner.store());
+    expect(constructionCount).toBe(1);
+  });
+
+  it('even a per-receiver $-cache over the cell returns the same singleton', () => {
+    // The registry-fork trap: Static()'s $-getters cache per receiver,
+    // so parent and subclass each run the getter body once. With the
+    // body reading a LazyShared cell, both receivers cache the SAME
+    // constructed value — the fork exists only in the access path.
+    let constructionCount = 0;
+    class $Registry {
+      protected static readonly sharedEntries = new LazyShared(() => {
+        constructionCount += 1;
+        return new Map<string, number>();
+      });
+      static get $entries(): Map<string, number> {
+        return this.sharedEntries.value;
+      }
+    }
+    const Registry = Static($Registry);
+    class $SubRegistry extends Registry {}
+    const SubRegistry = Static($SubRegistry);
+    Registry.$entries.set('planted', 7);
+    expect(SubRegistry.$entries).toBe(Registry.$entries);
+    expect(SubRegistry.$entries.get('planted')).toBe(7);
+    expect(constructionCount).toBe(1);
+  });
+
+  it('reset drops the value and the next read constructs again', () => {
+    let constructionCount = 0;
+    const cell = new LazyShared(() => (constructionCount += 1));
+    expect(cell.value).toBe(1);
+    cell.reset();
+    expect(cell.value).toBe(2);
+  });
+
+  it('a thunk cycle throws a named error and leaves the cell retryable', () => {
+    const cellA = new LazyShared((): number => cellB.value + 1);
+    const cellB = new LazyShared((): number => cellA.value + 1);
+    expect(() => cellA.value).toThrow('LazyShared thunk cycle');
+    // not poisoned: break the cycle and the same cell constructs fine
+    let repaired = 0;
+    const cellC = new LazyShared((): number => (repaired += 1));
+    expect(cellC.value).toBe(1);
+    // the failed cell itself retries once its dependency resolves
+    expect(() => cellB.value).toThrow('LazyShared thunk cycle');
+  });
+
+  it('a throwing thunk does not poison the cell — the next read retries', () => {
+    let attempts = 0;
+    const cell = new LazyShared(() => {
+      attempts += 1;
+      if (attempts === 1) throw new Error('backend not ready');
+      return 'ready';
+    });
+    expect(() => cell.value).toThrow('backend not ready');
+    expect(cell.value).toBe('ready');
+    expect(attempts).toBe(2);
+  });
+});

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/lib/extras.ts

@@ -7,3 +7,4 @@
  *   import { Static } from 'ivue/extras';
  */
 export { Static, type ClassConstructor } from './Static';
+export { LazyShared } from './LazyShared';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ivue",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {
@@ -29,6 +29,8 @@
     "measure:formula": "node demo/formula/measure.mjs",
     "measure:grid": "node demo/grid/measure.mjs",
     "dev:docs": "npm --prefix docs_v2 run dev -- --port 5174",
+    "admin": "vite newsletter/dashboard --host",
+    "build:admin": "vite build newsletter/dashboard",
     "test": "vitest --coverage.enabled=true --reporter=verbose --ui",
     "coverage": "vitest run --coverage",
     "bench": "vitest bench --run",
@@ -37,10 +39,17 @@
     "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 run sync:releases && npm run sync:blog-index && npm --prefix docs_v2 run build && npm run check:links && node docs_v2/scripts/check-related-posts.mjs",
+    "sync:releases": "node docs_v2/scripts/releases-page-generator.mjs",
+    "sync:blog-index": "node docs_v2/scripts/blog-index-generator.mjs",
+    "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",
+    "render:diagram": "node docs_v2/scripts/brand-image-generator.mjs diagram",
+    "render:embeds": "node docs_v2/scripts/blog-embed-shots.mjs",
+    "render:code-shots": "node docs_v2/scripts/blog-code-shots.mjs",
+    "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",
@@ -49,7 +58,8 @@
     "sync:examples": "node -e \"require('fs').copyFileSync('lib/Reactive.ts','examples/playground/src/ivue.ts')\"",
     "dev:playground": "vite examples/playground --host",
     "build:playground": "vite build examples/playground",
-    "preview:playground": "vite preview examples/playground --host"
+    "preview:playground": "vite preview examples/playground --host",
+    "rename:blog-slug": "node docs_v2/scripts/rename-blog-slug.mjs"
   },
   "peerDependencies": {
     "vue": "^3.2.0",
@@ -134,5 +144,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`
@@ -12,6 +12,12 @@ tracking), methods become stable bound functions. Instances stay plain objects.
 Follow the rules below exactly — every deviation is either a compile error or a
 silent no-op at runtime.
 
+The manual reads in three parts: the **`Reactive()` instance world**
+(the class and SFC templates, ownership, typing, watches, stores, keyed
+state), the **static world** (`Static()`, shared stores, and reading
+your own statics — everything from `ivue/extras`), and the **style
+contract** (naming, spacing, the self-review checklist).
+
 ## Setup — ivue must be installed
 
 `import { Reactive } from 'ivue'` resolves only when the package is a
@@ -146,11 +152,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).
@@ -186,6 +187,11 @@ export namespace Box {
 }
 ```
 
+A class with NO static members exports exactly this shape. Only a class
+that DECLARES statics anchors them — `export const $Class =
+Static($Box)` — and reads them from instance code through `self`; both
+live in the static-world sections below.
+
 ### The optional `Model` line (domain entity graphs)
 
 When classes hold and pass RAW instances of each other — entity
@@ -348,6 +354,23 @@ call site. Rules that keep it clean:
   nobody keeps it; here a named plain getter costs zero bytes, so there is
   no excuse. Templates read as prose: bindings, names, and events — never
   expressions.
+- **The rule covers EVERY binding kind, not just `v-if`** — the common
+  leaks are display strings, disabled states, and class objects:
+
+  | leaked into the template | derived on the class |
+  | --- | --- |
+  | interpolating `sending ? 'Sending…' : 'Send to ' + recipients.length` | interpolating `model.sendButtonLabel` |
+  | `:disabled="!model.canSend \|\| sending"` | `:disabled="model.sendDisabled"` |
+  | `:class="{ active: view === tab.name }"` | `:class="{ active: app.isOpen(tab.name) }"` |
+  | `row.name \|\| '—'` in a `v-for` cell | `Format.Class.orDash(row.name)` |
+  | `:style` width from `(day.count / peak) * 100 + '%'` | `:style` width from `model.barWidth(day)` |
+
+  Each right-hand form is a prototype member: unit-testable without
+  mounting anything, greppable by name, typed, and hot-graftable. The
+  one thing that stays in the template is STRUCTURE — `v-if`/`v-else`
+  branching on a named condition or a data field (`v-if="entry.nextSlug"`)
+  and `v-for` over a collection. Branching on data is structure;
+  COMPUTING with data is logic, and logic lives on the class.
 
 ## The outliving instance (module singleton, entity)
 
@@ -417,10 +440,13 @@ session.dispose();
 | ✅ `new X.Class(props, emit)` — raw instance everywhere | ❌ wrap in `reactive(instance)` or any shallow-unwrap view as the standard |
 | ✅ destructure ALL template-touched Refs/Computeds + element refs, grouped | ❌ destructure plain getters or methods — snapshots a dead value / loses nothing but clarity |
 | ✅ state bindings in templates; dotted `box.x` only for plain getters/methods | ❌ reach a Ref through the instance in a template — `v-if="box.someRef"` is always-truthy |
+| ✅ labels, disabled states, and class conditions as named getters/methods (`model.sendButtonLabel`, `model.sendDisabled`) | ❌ ternaries, `\|\|`/`&&` chains, comparisons, or string-building inside template expressions |
 | ✅ `defineExpose(box as X.Instance)` | ❌ `defineExpose(box)` raw — readonly-accessor writes will type-error for consumers |
 | ✅ 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` |
+| ✅ instance code reads its own statics through `this.self` (the one cast per class); hoist `const self = this.self` for 2+ reads or any loop | ❌ per-site `(this.constructor as typeof $X)` casts — each one is an unchecked class-name assertion |
 
 ## The unwrapping-surface typing invariant
 
@@ -482,45 +508,6 @@ until mount — use `?.` in watch getters).
 - Watch CALLBACKS delegate to methods (the thin-closure rule):
   `watch(source, (newValue, oldValue) => this.onChanged(newValue, oldValue))`.
 
-## Circular references resolve by construction
-
-The hoisted-namespace + getter convention makes late cross-module references
-safe without ordering discipline or `forwardRef`-style workarounds:
-
-- Cross-references (`new Other.Class()` in a method, a store read in a
-  `$`-getter) resolve at FIRST ACCESS, when every module in the cycle has
-  long finished loading — any load order works.
-- Each file calls `Reactive()` on its own class safely: it is idempotent per
-  prototype level; a shared ancestor is transformed once, by
-  whichever file loads first.
-- Eager top-level dereferences can still fail; the convention keeps
-  cross-references inside late method and getter bodies. Circular `extends`
-  stays impossible because it evaluates at load time and both parents cannot
-  exist first.
-
-## Generic classes (brief)
-
-`ReactiveClass<C>` cannot carry `<T>` through (no higher-kinded types), but
-`Reactive(X) === X` by identity — so cast `Class` back to the raw
-constructor and apply `ReactiveInstance` explicitly for `Instance`:
-
-```ts
-class $Scroller<T extends BaseItem> {
-  get items() {
-    return ref<T[]>([]);
-  }
-}
-
-export namespace Scroller {
-  export const $Class = $Scroller;
-  // the cast keeps <T> available at `new` sites
-  export let Class = Reactive($Class) as unknown as typeof $Class;
-  export type Instance<T extends BaseItem> =
-    ReactiveInstance<$Scroller<T>>;
-}
-// consumer of a template ref: ShallowUnwrapRef<Scroller.Instance<T>>
-```
-
 ## computed() and watch callbacks delegate to methods
 
 A reactive closure is cached per instance. Keep that closure as a small
@@ -561,37 +548,91 @@ silently receives stale data. Always the arrow.
 `$`-prefixed singleton getters are frozen caches too — keep their bodies to
 a single composable/service call (`return useThing()`), nothing more.
 
-## Naming: unfold to the domain
+## The store pattern: a singleton behind `use()`, injected by `$`-getter
 
-Readable code is the product. In ivue classes the class shape already reads
-like prose — don't ruin it with letter soup:
+Shared application state (session, navigation, toasts, the current user)
+is a STORE — one ivue class published as a module singleton — never a
+model passed down as a prop. Prop-drilling a shared model
+(`<ChildView :app="app" />`, `constructor(public app: AppModel.Instance)`)
+threads one object through every component and constructor signature it
+crosses; the store pattern deletes the thread.
 
-- **No single-letter or abbreviated identifiers** — including loop indices
-  and callback parameters. `row`/`col`, not `r`/`c`; `cell`, `cellValue`,
-  `entry`, `versionRef`, `aggregate`, `newValue`/`oldValue`, not
-  `c`/`v`/`e`/`agg`/`nv`/`ov`.
-- **The one-letter-many-meanings failure mode is the reason.** A file where
-  `c` means cell in one method, column in the next, and cellValue in a
-  third makes every reader re-derive the type system in their head. Named
-  after the domain, the ambiguity cannot exist.
-- **Booleans are predicates** (`isFineTier`, `hasModel`); counts say what
-  they count (`observerRuns`, `releasedCount`); prior values are
-  `originalX`/`previousX`, not `old`/`prev` alone.
-- Abbreviate only when the abbreviation IS the domain term (`px`, `id`,
-  `fx`, A1-notation like `startRow`/`endCol`).
-- Tests are code — the same rules apply to specs.
+```ts
+// app/AppStore.ts — the store IS an ivue class; `use()` owns the singleton
+class $AppStore {
+  get authenticated() {
+    return ref(false);
+  }
+
+  notify(message: string) {
+    /* ... */
+  }
+}
+
+export namespace AppStore {
+  export const $Class = $AppStore;
+  export let Class = Reactive($Class);
+  export type Instance = typeof Class.Instance;
+
+  let singleton: Instance | null = null;
+  export function use(): Instance {
+    return (singleton ??= new Class());
+  }
+}
+```
+
+Consumers never receive it — they REACH for it:
 
 ```ts
-// ❌ const v = this.cellVersions.get(k);
-// ✅ const versionRef = this.cellVersions.get(cellKey);
+// any model — the `$`-getter caches the store per instance, forever
+class $SubscribersModel {
+  protected get $app() {
+    return AppStore.use();
+  }
 
-// ❌ for (let r = r1; r <= r2; r++)
-// ✅ for (let row = startRow; row <= endRow; row++)
+  async refresh() {
+    try {
+      /* ... */
+    } catch (error) {
+      this.$app.reportFailure(error);
+    }
+  }
+}
+```
 
-// ❌ watch(c, (nv, ov) => …)
-// ✅ watch(value, (newValue, oldValue) => this.onChanged(…))
+```vue
+<script setup lang="ts">
+// any component — call use() directly; no prop, no provide/inject
+import { AppStore } from '../app/AppStore';
+
+const app = AppStore.use();
+const { authenticated } = app;
+</script>
+
+<template>
+  <button v-if="authenticated" @click="app.logout()">Lock</button>
+</template>
 ```
 
+Why this shape and not alternatives:
+
+- **`use()` is lazy** — the singleton constructs on first touch, after the
+  app exists, so module-load order and circular imports stay non-events
+  (the same late-read property as every cross-module reference).
+- **The `$`-getter is the injection point** — cached whole, per instance,
+  on first read. A model names its dependency once; every method reads
+  `this.$app` with zero lookup cost and zero constructor plumbing.
+- **Tests swap the slot, not the callers** — `AppStore.Class = $TestStore`
+  before the first `use()` (or reset the singleton) and every consumer
+  gets the double through the same seam.
+- A store is component-OUTLIVING by definition: watchers inside it use
+  `this.$watch`/`$watchEffect`, never plain `watch`, and lifecycle hooks
+  never belong in it.
+- Pass PROPS for what is genuinely per-instance input (a row, a slug, a
+  config knob). Reach for the STORE for what is genuinely shared. A prop
+  named `app`, `store`, or `session` is the tell that a store is being
+  drilled.
+
 ## Keyed reactivity — the third state shape
 
 Ref-getters express NAMED members; `shallowRef` expresses wholesale-replaced
@@ -658,12 +699,275 @@ Same invariant at three granularities — nothing exists until observed: getters
 price MEMBERS, keyed collections price KEYS. (Proven at 20M cells / 4.7
 bytes each — see the flyweight grid.)
 
+## Generic classes (brief)
+
+`ReactiveClass<C>` cannot carry `<T>` through (no higher-kinded types), but
+`Reactive(X) === X` by identity — so cast `Class` back to the raw
+constructor and apply `ReactiveInstance` explicitly for `Instance`:
+
+```ts
+class $Scroller<T extends BaseItem> {
+  get items() {
+    return ref<T[]>([]);
+  }
+}
+
+export namespace Scroller {
+  export const $Class = $Scroller;
+  // the cast keeps <T> available at `new` sites
+  export let Class = Reactive($Class) as unknown as typeof $Class;
+  export type Instance<T extends BaseItem> =
+    ReactiveInstance<$Scroller<T>>;
+}
+// consumer of a template ref: ShallowUnwrapRef<Scroller.Instance<T>>
+```
+
+## Circular references resolve by construction
+
+The hoisted-namespace + getter convention makes late cross-module references
+safe without ordering discipline or `forwardRef`-style workarounds:
+
+- Cross-references (`new Other.Class()` in a method, a store read in a
+  `$`-getter) resolve at FIRST ACCESS, when every module in the cycle has
+  long finished loading — any load order works.
+- Each file calls `Reactive()` on its own class safely: it is idempotent per
+  prototype level; a shared ancestor is transformed once, by
+  whichever file loads first.
+- Eager top-level dereferences can still fail; the convention keeps
+  cross-references inside late method and getter bodies. Circular `extends`
+  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: the settings a
+  subclass or test double overrides.
+- **A SHARED STORE never lives in receiver-space.** Per-receiver caching
+  means a subclass reading `this.$store` silently forks a fresh copy — the
+  registry-fork trap. The store is a `static readonly` FIELD on the
+  declaring class — one reference, inherited through the prototype chain,
+  never receiver-cached — so every receiver read (`this.$store`,
+  `this.constructor.$store`) resolves to the one store with no special
+  case anywhere; the `$`-getter pins by returning the field:
+  ```ts
+  class $Registry {
+    protected static readonly sharedRegistrations = new Map<object, Registration>();
+    protected static get $registrations() {
+      return this.sharedRegistrations; // the field IS the pin
+    }
+  }
+  ```
+  Two questions place every static value:
+
+  1. **Should a subclass get its own copy?** Yes → per-receiver
+     `$`-cache. That is what memos and per-class tuning want: forking on
+     subclass is the feature. No → it is a SHARED store (a registry, a
+     ledger — forking is the bug), and it lives in a `static readonly`
+     field as above.
+  2. **Shared store: can its initializer run at module load?** A field
+     initializer runs while modules are still loading, so it may only
+     hold a dependency-free value — a bare `new Map()`, a literal. The
+     moment construction needs ANOTHER module's class, the field holds a
+     `LazyShared` cell instead (`import { LazyShared } from
+     'ivue/extras'`), and the `$`-getter reads through it:
+     ```ts
+     protected static readonly sharedBackend = new LazyShared(
+       () => new SearchBackend.Class(),
+     );
+     protected static get $backend() {
+       return this.sharedBackend.value;
+     }
+     ```
+     Each step is safe on its own terms. Storing the cell eagerly is
+     safe because a thunk evaluates nothing at load. Running the thunk
+     on first read is safe because by then every import cycle has
+     resolved. And sharing is safe because the memoized value lives
+     INSIDE the cell — every access path, subclass receivers and
+     per-receiver `$`-caches over the cell included, converges on the
+     one constructed singleton.
+
+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** (a test overriding the knob, another class)
+   → keep the static and read it through **`self`** — the one cast per
+   class, declared beside the statics it types — DIRECTLY at each call
+   site:
+   ```ts
+   protected get self() {
+     return this.constructor as typeof $Tooltip;
+   }
+
+   show() {
+     this.dwellTimer.start(this.self.TOOLTIP_DWELL_SECONDS);
+   }
+   ```
+   An instance getter over a static earns its place when it genuinely
+   derives — mixing in instance state or transforming the value; a
+   plain read stays a direct `this.self.X` at the call site, so the
+   knob keeps one name and one override surface (the static).
+   `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 late-bound in both cases.
+   TypeScript types `constructor` as bare
+   `Function`, so ONE cast is unavoidable; `self` is where it lives.
+   Never scatter per-site `(this.constructor as typeof $X)` casts: each
+   is an unchecked assertion that the class name is right, and the
+   copy-paste error it invites typechecks silently against the wrong
+   statics. Rules that keep `self` honest:
+   - **Plain getter, never `$self`** — a `$`-cache would spend a
+     per-instance slot on what `this.constructor` hands back for free.
+   - **One read → `this.self.X` inline. Two or more reads, or any
+     loop → hoist:** `const self = this.self;` as the first line, then
+     `self.X` throughout. Measured (Node 26): the de-opted `self` getter
+     costs ~2 ns/read over an inline cast — noise for a single read —
+     while the hoisted form runs at ~0.4 ns/iter in loops, CHEAPER than
+     the inline cast, because the engine hoists the class as a loop
+     constant.
+   - **A subclass that adds statics redeclares `self`** with its own
+     `typeof $Sub` (a covariant override); a subclass that only tunes
+     inherited statics needs nothing — `self` is already late-bound.
+   - **`self` is NOT the namespace slot.** `this.self` is the class you
+     were constructed from; `Namespace.Class` is the live mutable slot a
+     kernel may have re-pointed since. Receiver statics (constants,
+     per-class tuning, `$`-caches) read through `self`; late-bound
+     capability dispatch reads through `Namespace.Class`. Blurring them
+     trades typo bugs for staleness bugs.
+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 — `self` is its
+honest replacement.
+
+## Naming: unfold to the domain
+
+Readable code is the product. In ivue classes the class shape already reads
+like prose — don't ruin it with letter soup:
+
+- **No single-letter or abbreviated identifiers** — including loop indices
+  and callback parameters. `row`/`col`, not `r`/`c`; `cell`, `cellValue`,
+  `entry`, `versionRef`, `aggregate`, `newValue`/`oldValue`, not
+  `c`/`v`/`e`/`agg`/`nv`/`ov`.
+- **The one-letter-many-meanings failure mode is the reason.** A file where
+  `c` means cell in one method, column in the next, and cellValue in a
+  third makes every reader re-derive the type system in their head. Named
+  after the domain, the ambiguity cannot exist.
+- **Booleans are predicates** (`isFineTier`, `hasModel`); counts say what
+  they count (`observerRuns`, `releasedCount`); prior values are
+  `originalX`/`previousX`, not `old`/`prev` alone.
+- Abbreviate only when the abbreviation IS the domain term (`px`, `id`,
+  `fx`, A1-notation like `startRow`/`endCol`).
+- Tests are code — the same rules apply to specs.
+
+```ts
+// ❌ const v = this.cellVersions.get(k);
+// ✅ const versionRef = this.cellVersions.get(cellKey);
+
+// ❌ for (let r = r1; r <= r2; r++)
+// ✅ for (let row = startRow; row <= endRow; row++)
+
+// ❌ watch(c, (nv, ov) => …)
+// ✅ watch(value, (newValue, oldValue) => this.onChanged(…))
+```
+
 ## Spacing is information
 
 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 +1012,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 +1027,7 @@ 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`.
+- [ ] Instance reads of own statics go through `this.self` (declared once per class needing it, cast to `typeof $X`, plain getter never `$self`); 2+ reads or loops hoist `const self = this.self`; no per-site `this.constructor` casts; `Namespace.Class` reads stay reserved for late-bound capability dispatch.
+- [ ] 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.