ivue 2.2.0 → 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/dist/Reactive.d.ts

@@ -87,7 +87,9 @@ export declare type ReactiveInstance<T> = T & WritableGetters<T> & {
     /** Stop the instance's effect scope and drop cached cells. */
     $stopEffects: () => void;
 };
-export declare type ReactiveClass<C extends new (...args: any) => any> = new (...args: ConstructorParameters<C>) => ReactiveInstance<InstanceType<C>>;
+export declare type ReactiveClass<C extends new (...args: any) => any> = {
+    [Key in keyof C]: C[Key];
+} & (new (...args: ConstructorParameters<C>) => ReactiveInstance<InstanceType<C>>);
 /**
  * Component-authoring type utilities (types only — erased at build time).
  * These complement `propsWithDefaults` for the params/defaults component

package/dist/Static.d.ts

@@ -8,15 +8,26 @@
  *
  * Get-only static accessors whose name starts with `$` become
  * compute-once-per-receiver caches: the getter body runs on first read
- * through a given class, its (shallowly frozen) result is stored under a
- * symbol OWN property of that receiver, and later reads return the stored
- * value. The `Object.hasOwn` guard never walks the prototype chain, so a
- * parent's cache can never shadow a subclass — each class in a hierarchy
- * derives through its own overrides on its own first read, in ANY read
- * order. The `$` prefix IS the API: a static getter that must stay live
- * (a knob for subclasses to pinch, a fresh-per-read value) must not use
- * it. Cached values are frozen shallowly — cache-and-freeze or
- * return-fresh, never cache-mutable.
+ * through a given class, its result is stored under a symbol OWN property
+ * of that receiver, and later reads return the stored value. The
+ * `Object.hasOwn` guard never walks the prototype chain, so a parent's
+ * cache can never shadow a subclass — each class in a hierarchy derives
+ * through its own overrides on its own first read, in ANY read order.
+ * The `$` prefix IS the API: it promises STABLE IDENTITY per receiver,
+ * nothing more — whether the cached value is then treated as immutable
+ * config or as a mutable memo table is the author's design. A static
+ * getter that must stay live (a knob for subclasses to pinch, a
+ * fresh-per-read value) must not use the prefix.
+ *
+ * Method binding uses the same per-receiver symbol discipline: the bound
+ * function is cached under a symbol own property, never under the method
+ * name — so a parent-first read can never install a parent-bound method
+ * where a subclass's chain lookup would find it.
+ *
+ * `$` semantics are GRANTED BY the transform: a raw class, a raw
+ * subclass, or a class only passed through `Reactive()` keeps native
+ * getter behavior. A class that needs instance reactivity AND static
+ * `$`-caches composes the transforms: `Static(Reactive($Class))`.
  *
  * This is the namespace pattern's backend adapter: canonical namespace +
  * mutable `Class` slot + late reads, for STATELESS capability classes (a

package/dist/extras.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.Static=function(i){const o=class extends i{},s=new Set;for(let n=i;n!==Function.prototype;n=Object.getPrototypeOf(n))for(const e of Reflect.ownKeys(n)){if(s.has(e))continue;s.add(e);const t=Object.getOwnPropertyDescriptor(n,e);if(typeof t.value=="function"){const c=t.value;Object.defineProperty(o,e,{configurable:!0,enumerable:t.enumerable,get(){const r=c.bind(this);return Object.defineProperty(this,e,{...t,value:r}),r}})}else if(t.get&&!t.set&&typeof e=="string"&&e.startsWith("$")){const c=t.get,r=Symbol.for(`ivue.staticCache.${e}`);Object.defineProperty(o,e,{configurable:!0,enumerable:t.enumerable,get(){return Object.hasOwn(this,r)||Object.defineProperty(this,r,{configurable:!0,value:Object.freeze(c.call(this))}),this[r]}})}}return o};
+"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};

package/dist/extras.es.js

@@ -1,27 +1,27 @@
-function a(i) {
-  const o = class extends i {
-  }, s = /* @__PURE__ */ new Set();
-  for (let r = i; r !== Function.prototype; r = Object.getPrototypeOf(r))
-    for (const e of Reflect.ownKeys(r)) {
-      if (s.has(e))
+const a = Object.hasOwn;
+function u(s) {
+  const r = class extends s {
+  }, 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))
         continue;
-      s.add(e);
-      const t = Object.getOwnPropertyDescriptor(r, e);
+      c.add(e);
+      const t = Object.getOwnPropertyDescriptor(n, e);
       if (typeof t.value == "function") {
-        const c = t.value;
-        Object.defineProperty(o, e, { configurable: !0, enumerable: t.enumerable, get() {
-          const n = c.bind(this);
-          return Object.defineProperty(this, e, { ...t, value: n }), n;
+        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];
         } });
       } else if (t.get && !t.set && typeof e == "string" && e.startsWith("$")) {
-        const c = t.get, n = Symbol.for(`ivue.staticCache.${e}`);
-        Object.defineProperty(o, e, { configurable: !0, enumerable: t.enumerable, get() {
-          return Object.hasOwn(this, n) || Object.defineProperty(this, n, { configurable: !0, value: Object.freeze(c.call(this)) }), this[n];
+        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];
         } });
       }
     }
-  return o;
+  return r;
 }
 export {
-  a as Static
+  u as Static
 };

package/lib/Reactive.ts

@@ -434,9 +434,9 @@ export type ReactiveInstance<T> = T &
     $stopEffects: () => void;
   };
 
-export type ReactiveClass<C extends new (...args: any) => any> = new (
-  ...args: ConstructorParameters<C>
-) => ReactiveInstance<InstanceType<C>>;
+export type ReactiveClass<C extends new (...args: any) => any> = {
+  [Key in keyof C]: C[Key];
+} & (new (...args: ConstructorParameters<C>) => ReactiveInstance<InstanceType<C>>);
 
 /**
  * Component-authoring type utilities (types only — erased at build time).

package/lib/Static.ts

@@ -8,15 +8,26 @@
  *
  * Get-only static accessors whose name starts with `$` become
  * compute-once-per-receiver caches: the getter body runs on first read
- * through a given class, its (shallowly frozen) result is stored under a
- * symbol OWN property of that receiver, and later reads return the stored
- * value. The `Object.hasOwn` guard never walks the prototype chain, so a
- * parent's cache can never shadow a subclass — each class in a hierarchy
- * derives through its own overrides on its own first read, in ANY read
- * order. The `$` prefix IS the API: a static getter that must stay live
- * (a knob for subclasses to pinch, a fresh-per-read value) must not use
- * it. Cached values are frozen shallowly — cache-and-freeze or
- * return-fresh, never cache-mutable.
+ * through a given class, its result is stored under a symbol OWN property
+ * of that receiver, and later reads return the stored value. The
+ * `Object.hasOwn` guard never walks the prototype chain, so a parent's
+ * cache can never shadow a subclass — each class in a hierarchy derives
+ * through its own overrides on its own first read, in ANY read order.
+ * The `$` prefix IS the API: it promises STABLE IDENTITY per receiver,
+ * nothing more — whether the cached value is then treated as immutable
+ * config or as a mutable memo table is the author's design. A static
+ * getter that must stay live (a knob for subclasses to pinch, a
+ * fresh-per-read value) must not use the prefix.
+ *
+ * Method binding uses the same per-receiver symbol discipline: the bound
+ * function is cached under a symbol own property, never under the method
+ * name — so a parent-first read can never install a parent-bound method
+ * where a subclass's chain lookup would find it.
+ *
+ * `$` semantics are GRANTED BY the transform: a raw class, a raw
+ * subclass, or a class only passed through `Reactive()` keeps native
+ * getter behavior. A class that needs instance reactivity AND static
+ * `$`-caches composes the transforms: `Static(Reactive($Class))`.
  *
  * This is the namespace pattern's backend adapter: canonical namespace +
  * mutable `Class` slot + late reads, for STATELESS capability classes (a
@@ -29,6 +40,8 @@
  */
 export type ClassConstructor = new (...arguments_: any[]) => any;
 
+const hasOwn = Object.hasOwn;
+
 export function Static<Class extends ClassConstructor>(targetClass: Class): Class {
   const SelectedClass = class extends targetClass {};
   const visitedKeys = new Set<PropertyKey>();
@@ -46,14 +59,22 @@ export function Static<Class extends ClassConstructor>(targetClass: Class): Clas
 
       if (typeof descriptor.value === 'function') {
         const method = descriptor.value;
+        const bindKey =
+          typeof key === 'string'
+            ? Symbol.for(`ivue.staticBound.${key}`)
+            : Symbol('ivue.staticBound');
 
         Object.defineProperty(SelectedClass, key, {
           configurable: true,
           enumerable: descriptor.enumerable,
-          get(this: ClassConstructor) {
-            const boundMethod = method.bind(this);
-            Object.defineProperty(this, key, { ...descriptor, value: boundMethod });
-            return boundMethod;
+          get(this: any) {
+            if (!hasOwn(this, bindKey)) {
+              Object.defineProperty(this, bindKey, {
+                configurable: true,
+                value: method.bind(this),
+              });
+            }
+            return this[bindKey];
           },
         });
       } else if (
@@ -69,10 +90,10 @@ export function Static<Class extends ClassConstructor>(targetClass: Class): Clas
           configurable: true,
           enumerable: descriptor.enumerable,
           get(this: any) {
-            if (!Object.hasOwn(this, cacheKey)) {
+            if (!hasOwn(this, cacheKey)) {
               Object.defineProperty(this, cacheKey, {
                 configurable: true,
-                value: Object.freeze(getter.call(this)),
+                value: getter.call(this),
               });
             }
             return this[cacheKey];

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

@@ -1,4 +1,6 @@
+import { ref } from 'vue';
 import { describe, expect, it } from 'vitest';
+import { Reactive } from '../Reactive';
 import { Static } from '../Static';
 
 describe('Static', () => {
@@ -81,6 +83,23 @@ describe('Static', () => {
     expect(Config.resolve('/path')).toBe('https://example.test/path');
   });
 
+  it('binds symbol-keyed static methods with the same discipline', () => {
+    const describeKind = Symbol('describeKind');
+
+    class $Shape {
+      static kind = 'circle';
+      static [describeKind]() {
+        return `kind:${this.kind}`;
+      }
+    }
+
+    const Shape = Static($Shape);
+    const described = (Shape as any)[describeKind];
+
+    expect((Shape as any)[describeKind]).toBe(described); // identity-stable
+    expect(described()).toBe('kind:circle'); // bound through detachment
+  });
+
   it('binds `this` to the wrapped class, so statics compose', () => {
     class $Report {
       static header() {
@@ -166,21 +185,26 @@ describe('Static $-cached getters', () => {
     expect(computeRuns).toBe(2); // once per receiver, never shared
   });
 
-  it('freezes cached values — mutation throws instead of corrupting', () => {
-    class $Config {
-      static get $defaults() {
-        return { width: 80 };
+  it('promises stable identity, not immutability — memo tables mutate freely', () => {
+    class $Wrap {
+      static get $memo() {
+        return new Map<string, number>();
+      }
+      static get $state() {
+        return { frame: 0, quiescent: false };
       }
     }
 
-    const Config = Static($Config);
-    const defaults = Config.$defaults;
+    const Wrap = Static($Wrap);
+
+    // a cached Map used as a per-class memo table — the dominant real pattern
+    Wrap.$memo.set('row', 42);
+    expect(Wrap.$memo.get('row')).toBe(42); // same table, mutation retained
 
-    expect(Object.isFrozen(defaults)).toBe(true);
-    expect(() => {
-      (defaults as any).width = 120;
-    }).toThrow(TypeError);
-    expect(Config.$defaults.width).toBe(80);
+    // a cached plain object used as deliberate mutable state
+    Object.assign(Wrap.$state, { frame: 7, quiescent: true });
+    expect(Wrap.$state.frame).toBe(7);
+    expect(Wrap.$state).toBe(Wrap.$state); // identity stable throughout
   });
 
   it('caches primitive results too', () => {
@@ -257,6 +281,151 @@ describe('Static $-cached getters', () => {
     expect(Theme.$accent).toBe('blue');
   });
 
+  it('method binding is order-correct: parent read first, child dispatch intact', () => {
+    class $Render {
+      static get glyph() {
+        return '-'; // a knob subclasses pinch
+      }
+      static paint() {
+        return this.glyph.repeat(3);
+      }
+    }
+
+    const Render = Static($Render);
+    class DottedRender extends Render {
+      static override get glyph() {
+        return '.';
+      }
+    }
+
+    // PARENT reads first — the named-own-property shape poisoned this order
+    const parentPaint = Render.paint;
+    expect(parentPaint()).toBe('---');
+    expect(DottedRender.paint()).toBe('...'); // child binds itself, chain not shadowed
+    expect(DottedRender.paint).toBe(DottedRender.paint); // still identity-stable
+    expect(Render.paint).toBe(parentPaint);
+  });
+
+  it('method binding is order-correct: child read first, parent unaffected', () => {
+    class $Render {
+      static get glyph() {
+        return '-';
+      }
+      static paint() {
+        return this.glyph.repeat(2);
+      }
+    }
+
+    const Render = Static($Render);
+    class DottedRender extends Render {
+      static override get glyph() {
+        return '.';
+      }
+    }
+
+    expect(DottedRender.paint()).toBe('..');
+    expect(Render.paint()).toBe('--');
+  });
+
+  it('composes with Reactive(): Static(Reactive($Class)) grants both contracts', () => {
+    let derivations = 0;
+
+    class $Channel {
+      get status() {
+        return ref('idle');
+      }
+      announce() {
+        return `channel:${this.status.value}`;
+      }
+      static get $defaults() {
+        derivations++;
+        return { retries: 3 };
+      }
+      static open() {
+        return this.$defaults.retries;
+      }
+    }
+
+    const Channel = Static(Reactive($Channel));
+
+    // instance side: Reactive semantics intact through the Static subclass
+    const channel: any = new Channel();
+    const statusCell = channel.status;
+    expect(statusCell.value).toBe('idle');
+    expect(channel.status).toBe(statusCell); // cached ref cell
+    expect(channel.announce()).toBe('channel:idle');
+
+    // static side: $-cache + bound methods from Static
+    expect(Channel.$defaults).toBe(Channel.$defaults);
+    expect(derivations).toBe(1);
+    const open = Channel.open;
+    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.0",
+  "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.