@bitstillery/mithril 3.0.2 → 3.1.2

package/README.md

@@ -10,12 +10,13 @@ bun add @bitstillery/mithril
 
 Mithril.js uses global `m.redraw()` — one state change re-renders **everything**. This fork adds component-level reactivity via signals so only affected components update.
 
-| Feature          | Original            | This Fork                       |
-| ---------------- | ------------------- | ------------------------------- |
-| Reactivity       | Global `m.redraw()` | Fine-grained component updates  |
-| State Management | Manual redraw calls | Signals with automatic tracking |
-| SSR              | No hydration        | State serialization + hydration |
-| TypeScript       | Community types     | Native                          |
+| Feature          | Original            | This Fork                        |
+| ---------------- | ------------------- | -------------------------------- |
+| Reactivity       | Global `m.redraw()` | Fine-grained component updates   |
+| State Management | Manual redraw calls | Signals with automatic tracking  |
+| SSR              | No hydration        | State serialization + hydration  |
+| TypeScript       | Community types     | Native                           |
+| Stream / request | Built-in            | Removed (use signals, `fetch()`) |
 
 Signals are opt-in. Existing Mithril code works unchanged.
 

package/api/mount-redraw.ts

@@ -1,5 +1,6 @@
 import Vnode from '../render/vnode'
 import {getSignalComponents, type Signal} from '../signal'
+import {getStateMaps} from '../render/render'
 
 import type {ComponentType, Children, Vnode as VnodeType} from '../render/vnode'
 
@@ -54,11 +55,9 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
     function redrawComponent(componentOrState: ComponentType) {
         // componentOrState might be vnode.state (from signal tracking) or component object
         // Try to find the actual component object if it's vnode.state
-        let component = componentOrState
-        const stateToComponentMap = (globalThis as any).__mithrilStateToComponent as WeakMap<any, ComponentType> | undefined
-        if (stateToComponentMap && stateToComponentMap.has(componentOrState)) {
-            component = stateToComponentMap.get(componentOrState)!
-        }
+        const {stateToComponentMap, stateToDomMap, stateToVnodeMap} = getStateMaps()
+        const resolved = stateToComponentMap.get(componentOrState)
+        const component = resolved !== undefined ? resolved : componentOrState
 
         // First try: find element in componentToElement (for m.mount components)
         // Check this first to ensure synchronous redraws for m.mount components
@@ -74,14 +73,31 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
             }
         }
 
-        // Second try: find DOM element directly from component state (for routed components)
+        // Second try: targeted redraw for nested components (stateToDomMap path)
         // Only check this if componentToElement didn't find anything (not an m.mount component)
-        const stateToDomMap = (globalThis as any).__mithrilStateToDom as WeakMap<any, Element> | undefined
-        if (stateToDomMap && stateToDomMap.has(componentOrState)) {
-            // For routed components, always use global redraw to ensure RouterRoot re-renders correctly
-            // RouterRoot needs currentResolver and component to be set (from route resolution)
-            // A direct redraw might use stale route state, so we trigger a full sync instead
-            // This ensures RouterRoot re-renders with the current route, preserving Layout
+        const nestedElement = stateToDomMap.get(componentOrState)
+        if (nestedElement !== undefined) {
+            const vnodeInfo = stateToVnodeMap.get(componentOrState)
+            if (nestedElement?.isConnected && component != null && vnodeInfo != null) {
+                const parent = nestedElement.parentElement
+                const oldVnodes = parent != null ? (parent as any).vnodes : null
+                if (parent != null && Array.isArray(oldVnodes) && oldVnodes.length > 0) {
+                    const i = oldVnodes.findIndex((v: any) => v?.state === componentOrState)
+                    if (i >= 0) {
+                        const {key, attrs} = vnodeInfo
+                        const newVnodes = [...oldVnodes]
+                        newVnodes[i] = Vnode(component, key ?? null, attrs ?? null, null, null, null)
+                        try {
+                            render(parent, newVnodes, redraw)
+                            return
+                        } catch (e) {
+                            console.error(e)
+                            // Fall through to full sync on error
+                        }
+                    }
+                }
+            }
+            // Fallback: full sync for RouterRoot correctness or when targeted path fails
             if (!pending) {
                 pending = true
                 schedule(function () {
@@ -117,6 +133,107 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
         }
     }
 
+    function redrawComponents(components: Set<ComponentType>) {
+        const {stateToComponentMap, stateToDomMap, stateToVnodeMap} = getStateMaps()
+        const mountRoots: ComponentType[] = []
+        const nested = new Set<ComponentType>()
+
+        for (const c of components) {
+            const component = stateToComponentMap.get(c) ?? c
+            if (componentToElement.get(component)) {
+                mountRoots.push(c)
+            } else {
+                nested.add(c)
+            }
+        }
+
+        for (const c of mountRoots) {
+            redrawComponent(c)
+        }
+
+        if (nested.size === 0) return
+
+        // Group nested components by parent element
+        const parentToStates = new Map<Element, Set<ComponentType>>()
+        for (const state of nested) {
+            const el = stateToDomMap.get(state)
+            const parent = el?.parentElement
+            if (!parent || !el?.isConnected) {
+                // Can't do targeted redraw, fall back to full sync
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+                return
+            }
+            let set = parentToStates.get(parent)
+            if (!set) {
+                set = new Set()
+                parentToStates.set(parent, set)
+            }
+            set.add(state)
+        }
+
+        for (const [parent, states] of parentToStates) {
+            const oldVnodes = (parent as any).vnodes
+            if (!Array.isArray(oldVnodes) || oldVnodes.length === 0) {
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+                return
+            }
+
+            const newVnodes = [...oldVnodes]
+            let allFound = true
+            for (const state of states) {
+                const i = oldVnodes.findIndex((v: any) => v?.state === state)
+                if (i < 0) {
+                    allFound = false
+                    break
+                }
+                const component = stateToComponentMap.get(state) ?? state
+                const vnodeInfo = stateToVnodeMap.get(state)
+                if (!vnodeInfo) {
+                    allFound = false
+                    break
+                }
+                const {key, attrs} = vnodeInfo
+                newVnodes[i] = Vnode(component, key ?? null, attrs ?? null, null, null, null)
+            }
+
+            if (!allFound) {
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+                return
+            }
+
+            try {
+                render(parent, newVnodes, redraw)
+            } catch (e) {
+                console.error(e)
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+            }
+        }
+    }
+
     function redraw(component?: ComponentType) {
         // Component-level redraw
         if (component !== undefined) {
@@ -135,6 +252,7 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
     }
 
     redraw.sync = sync
+    ;(redraw as any).redrawComponents = redrawComponents
 
     // Export function to redraw components affected by signal changes
     ;(redraw as any).signal = function (signal: Signal<any>) {

package/index.ts

@@ -70,26 +70,46 @@ m.censor = censor
 m.nextTick = nextTick
 m.domFor = domFor
 
-// Set up signal-to-component redraw integration
+// Set up signal-to-component redraw integration with batching.
+// Collects all components needing redraw in the current tick, then flushes once via queueMicrotask.
+// Avoids N synchronous redraws when many signals fire (e.g. 50% of 800 rows).
+let pendingRedrawComponents = new Set<any>()
+let redrawScheduled = false
+
+function flushPendingRedraws() {
+    const components = new Set(pendingRedrawComponents)
+    pendingRedrawComponents.clear()
+    redrawScheduled = false
+    if (components.size === 1) {
+        m.redraw(components.values().next().value)
+    } else if (components.size > 1) {
+        const fn = (m.redraw as any).redrawComponents
+        if (fn) fn(components)
+        else m.redraw()
+    }
+}
+
 setSignalRedrawCallback((sig: Signal<any>) => {
     const components = getSignalComponents(sig)
-    if (components) {
-        components.forEach((component) => {
-            // Use the component-level redraw
-            m.redraw(component as any)
-        })
+    if (components && components.size > 0) {
+        components.forEach((c) => pendingRedrawComponents.add(c))
+        if (!redrawScheduled) {
+            redrawScheduled = true
+            queueMicrotask(flushPendingRedraws)
+        }
     }
 })
 
 // Export signals API
 export {signal, computed, effect, Signal, ComputedSignal, state, watch, registerState, getRegisteredStates}
-export type {State, StateOptions, Unwatch} from './state'
+export type {State, StateOptions, StateSignals, Unwatch} from './state'
 
 // Export Store class
 export {Store} from './store'
 
 // Export SSR utilities
 export {serializeStore, deserializeStore, serializeAllStates, deserializeAllStates} from './render/ssrState'
+export type {DeserializeOptions} from './render/ssrState'
 
 // Export SSR request context (for per-request store and state registry)
 export {getSSRContext, runWithContext, runWithContextAsync, cleanupWatchers} from './ssrContext'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitstillery/mithril",
-    "version": "3.0.2",
+    "version": "3.1.2",
     "description": "Mithril + Signals, Store and SSR",
     "license": "MIT",
     "author": "Bitstillery",
@@ -44,6 +44,9 @@
             "default": "./htm.ts"
         }
     },
+    "publishConfig": {
+        "access": "public"
+    },
     "scripts": {
         "lint": "bun run lint:ts",
         "lint:ts": "bun run lint:ts-format && bun run lint:ts-syntax && bun run lint:ts-types",
@@ -52,7 +55,11 @@
         "lint:ts-types": "tsgo --noEmit",
         "test": "bun test",
         "prepublishOnly": "bun run lint:ts",
-        "pack:dry-run": "npm pack --dry-run"
+        "pack:dry-run": "npm pack --dry-run",
+        "release": "standard-version && npm publish",
+        "release:patch": "standard-version --release-as patch && npm publish",
+        "release:minor": "standard-version --release-as minor && npm publish",
+        "release:major": "standard-version --release-as major && npm publish"
     },
     "dependencies": {
         "htm": "^3.1.1"
@@ -71,6 +78,7 @@
         "marked-gfm-heading-id": "^4.0.0",
         "oxfmt": "^0.32.0",
         "oxlint": "^1.30.0",
+        "standard-version": "^9.5.0",
         "tippy.js": "^6.3.7"
     }
 }

package/render/render.ts

@@ -9,6 +9,15 @@ import cachedAttrsIsStaticMap from './cachedAttrsIsStaticMap'
 
 import type {Vnode as VnodeType, Children} from './vnode'
 
+// Module-level maps for component/state-to-DOM tracking (used by mount-redraw for signal redraws)
+const stateToDomMap = new WeakMap<any, Element>()
+const stateToComponentMap = new WeakMap<any, any>()
+const stateToVnodeMap = new WeakMap<any, {key?: string | number | null; attrs?: Record<string, any>}>()
+
+export function getStateMaps() {
+    return {stateToDomMap, stateToComponentMap, stateToVnodeMap}
+}
+
 export default function renderFactory() {
     const nameSpace: Record<string, string> = {
         svg: 'http://www.w3.org/2000/svg',
@@ -383,8 +392,7 @@ export default function renderFactory() {
         // Track component for signal dependency tracking
         // Store mapping from vnode.state to vnode.tag (component object) for redraw
         if (vnode.state && vnode.tag && !isHydrating) {
-            ;(globalThis as any).__mithrilStateToComponent = (globalThis as any).__mithrilStateToComponent || new WeakMap()
-            ;(globalThis as any).__mithrilStateToComponent.set(vnode.state, vnode.tag)
+            stateToComponentMap.set(vnode.state, vnode.tag)
         }
         // Always track component dependencies for signal tracking (even during hydration)
         // This allows signals to know which components depend on them
@@ -418,10 +426,10 @@ export default function renderFactory() {
             vnode.dom = vnode.instance.dom
             vnode.domSize = vnode.instance.domSize
 
-            // Store component's DOM element for fine-grained redraw (not during hydration)
+            // Store component's DOM element and vnode info for fine-grained redraw (not during hydration)
             if (vnode.state && vnode.dom && !isHydrating) {
-                ;(globalThis as any).__mithrilStateToDom = (globalThis as any).__mithrilStateToDom || new WeakMap()
-                ;(globalThis as any).__mithrilStateToDom.set(vnode.state, vnode.dom)
+                stateToDomMap.set(vnode.state, vnode.dom)
+                stateToVnodeMap.set(vnode.state, {key: vnode.key, attrs: vnode.attrs})
             }
         } else {
             vnode.domSize = 0
@@ -697,8 +705,7 @@ export default function renderFactory() {
         // Track component for signal dependency tracking
         // Store mapping from vnode.state to vnode.tag (component object) for redraw
         if (vnode.state && vnode.tag && !isHydrating) {
-            ;(globalThis as any).__mithrilStateToComponent = (globalThis as any).__mithrilStateToComponent || new WeakMap()
-            ;(globalThis as any).__mithrilStateToComponent.set(vnode.state, vnode.tag)
+            stateToComponentMap.set(vnode.state, vnode.tag)
         }
         // Always track component dependencies for signal tracking (even during hydration)
         // This allows signals to know which components depend on them
@@ -723,10 +730,10 @@ export default function renderFactory() {
             vnode.dom = vnode.instance.dom
             vnode.domSize = vnode.instance.domSize
 
-            // Store component's DOM element for fine-grained redraw (not during hydration)
+            // Store component's DOM element and vnode info for fine-grained redraw (not during hydration)
             if (vnode.state && vnode.dom && !isHydrating) {
-                ;(globalThis as any).__mithrilStateToDom = (globalThis as any).__mithrilStateToDom || new WeakMap()
-                ;(globalThis as any).__mithrilStateToDom.set(vnode.state, vnode.dom)
+                stateToDomMap.set(vnode.state, vnode.dom)
+                stateToVnodeMap.set(vnode.state, {key: vnode.key, attrs: vnode.attrs})
             }
         } else {
             if (old.instance != null) removeNode(parent, old.instance)
@@ -912,9 +919,12 @@ export default function renderFactory() {
     }
 
     function onremove(vnode: any) {
-        // Clean up signal dependencies when component is removed
+        // Clean up signal dependencies and state maps when component is removed
         if (typeof vnode.tag !== 'string' && vnode.state != null) {
             clearComponentDependencies(vnode.state)
+            stateToDomMap.delete(vnode.state)
+            stateToComponentMap.delete(vnode.state)
+            stateToVnodeMap.delete(vnode.state)
         }
         if (typeof vnode.tag !== 'string' && typeof vnode.state.onremove === 'function')
             callHook.call(vnode.state.onremove, vnode)

package/render/ssrState.ts

@@ -326,12 +326,18 @@ function restoreComputedProperties(state: State<any>, initial: any): void {
     restore(initial, state)
 }
 
-export function deserializeAllStates(serialized: Record<string, any>): void {
+export interface DeserializeOptions {
+    /** Skip deserializing these state instances (e.g. Store state that should come from localStorage) */
+    skipStates?: Set<any>
+}
+
+export function deserializeAllStates(serialized: Record<string, any>, options?: DeserializeOptions): void {
     if (!serialized || typeof serialized !== 'object') {
         return
     }
 
     const registeredStates = getRegisteredStates()
+    const skipStates = options?.skipStates
 
     // First, deserialize all states
     for (const [name, serializedState] of Object.entries(serialized)) {
@@ -345,6 +351,10 @@ export function deserializeAllStates(serialized: Record<string, any>): void {
             continue
         }
 
+        if (skipStates?.has(entry.state)) {
+            continue
+        }
+
         try {
             deserializeStore(entry.state, serializedState)
         } catch (error) {
@@ -356,6 +366,9 @@ export function deserializeAllStates(serialized: Record<string, any>): void {
     // After deserializing, restore computed properties from original initial states
     // This ensures computed properties work after SSR deserialization
     for (const [name, entry] of registeredStates.entries()) {
+        if (skipStates?.has(entry.state)) {
+            continue
+        }
         try {
             restoreComputedProperties(entry.state, entry.initial)
         } catch (error) {

package/signal.ts

@@ -25,15 +25,20 @@ export function getCurrentComponent() {
 }
 
 export function trackComponentSignal(component: any, signal: Signal<any>) {
-    if (!componentSignalMap.has(component)) {
-        componentSignalMap.set(component, new Set())
+    let set = componentSignalMap.get(component)
+    if (!set) {
+        set = new Set()
+        componentSignalMap.set(component, set)
     }
-    componentSignalMap.get(component)!.add(signal)
+    if (set.has(signal)) return
+    set.add(signal)
 
-    if (!signalComponentMap.has(signal)) {
-        signalComponentMap.set(signal, new Set())
+    let compSet = signalComponentMap.get(signal)
+    if (!compSet) {
+        compSet = new Set()
+        signalComponentMap.set(signal, compSet)
     }
-    signalComponentMap.get(signal)!.add(component)
+    compSet.add(component)
 }
 
 export function getComponentSignals(component: any): Set<Signal<any>> | undefined {

package/state.ts

@@ -204,6 +204,16 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
             return stateCache.get(obj)
         }
 
+        const linkArrayParentSignal = (value: any, sig: Signal<any> | ComputedSignal<any>) => {
+            if (!value || typeof value !== 'object') return
+            if ((value as any).__isState === true && Array.isArray((value as any).__signals)) {
+                arrayParentSignalMap.set(value, sig as Signal<any>)
+                ;(value as any)._parentSignal = sig as Signal<any>
+            } else if (Array.isArray(value)) {
+                arrayParentSignalMap.set(value, sig as Signal<any>)
+            }
+        }
+
         // Handle arrays
         if (Array.isArray(obj)) {
             // Arrays don't get their own signalMap - they use the parent's
@@ -294,7 +304,19 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                         // Search methods also need unwrapped values for comparison
                         const searchMethods = ['includes', 'indexOf', 'lastIndexOf']
                         // Methods that return new arrays or strings need unwrapped values
-                        const returnMethods = ['slice', 'concat', 'flat', 'flatMap', 'join', 'toString', 'toLocaleString']
+                        const returnMethods = [
+                            'slice',
+                            'concat',
+                            'flat',
+                            'flatMap',
+                            'join',
+                            'toString',
+                            'toLocaleString',
+                            // ES2023 copy-with-mutate methods - bind to proxy so iteration unwraps signals
+                            'toSorted',
+                            'toReversed',
+                            'toSpliced',
+                        ]
                         // Iterator methods need unwrapped values
                         const iteratorMethods = ['entries', 'keys', 'values']
                         if (
@@ -554,7 +576,41 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
         // Each nested state gets its own signalMap (unless parentSignalMap is explicitly provided)
         // This prevents nested states from sharing the parent's signalMap
         const nestedSignalMap = parentSignalMap || new Map<string, Signal<any> | ComputedSignal<any>>()
-        const wrapped = new Proxy(obj, {
+        let wrapped: any
+        const getChildContext = (): InitContext | undefined =>
+            context ? {...context, rootState: stateRootMap.get(wrapped) ?? wrapped} : undefined
+
+        const createPropertySignal = (originalValue: any): Signal<any> | ComputedSignal<any> => {
+            if (typeof originalValue === 'function') {
+                return createStateComputed(wrapped, () => originalValue.call(wrapped), !!context?.deferComputed)
+            }
+            if (isGetSetDescriptor(originalValue)) {
+                if (typeof originalValue.get === 'function') {
+                    return createStateComputed(wrapped, () => originalValue.get.call(wrapped), !!context?.deferComputed)
+                }
+                return signal(undefined)
+            }
+            if (typeof originalValue === 'object' && originalValue !== null) {
+                const nestedState = initializeSignals(originalValue, undefined, getChildContext())
+                const sig = signal(nestedState)
+                if (nestedState && (nestedState as any).__isState) {
+                    stateRootMap.set(nestedState, stateRootMap.get(wrapped) ?? wrapped)
+                }
+                linkArrayParentSignal(nestedState, sig)
+                return sig
+            }
+            return toSignal(originalValue)
+        }
+
+        const ensurePropertySignal = (target: any, prop: string | symbol, key: string) => {
+            if (!nestedSignalMap.has(key)) {
+                const originalValue = Reflect.get(target, prop)
+                if (originalValue === undefined) return undefined
+                nestedSignalMap.set(key, createPropertySignal(originalValue))
+            }
+            return nestedSignalMap.get(key)
+        }
+        wrapped = new Proxy(obj, {
             get(target, prop) {
                 if (prop === '__originalKeys') return originalKeys
                 if (prop === '__isState') return true
@@ -581,143 +637,25 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                 if (propStr.startsWith('$') && propStr.length > 1) {
                     const key = propStr.slice(1) // Remove $ prefix
 
-                    // Ensure signal exists - initialize if needed
-                    // Use the same initialization logic as regular property access
-                    if (!nestedSignalMap.has(key)) {
-                        // First try to get from target (original object)
-                        const originalValue = Reflect.get(target, key)
-                        if (originalValue !== undefined) {
-                            if (typeof originalValue === 'function') {
-                                const computedSig = createStateComputed(
-                                    wrapped,
-                                    () => originalValue.call(wrapped),
-                                    !!context?.deferComputed,
-                                )
-                                nestedSignalMap.set(key, computedSig)
-                            } else if (isGetSetDescriptor(originalValue)) {
-                                // Get/set descriptor -> computed signal from get function
-                                if (typeof originalValue.get === 'function') {
-                                    const computedSig = createStateComputed(
-                                        wrapped,
-                                        () => originalValue.get.call(wrapped),
-                                        !!context?.deferComputed,
-                                    )
-                                    nestedSignalMap.set(key, computedSig)
-                                } else {
-                                    // Only setter, no getter - treat as regular signal with undefined initial value
-                                    const sig = signal(undefined)
-                                    nestedSignalMap.set(key, sig)
-                                }
-                            } else if (typeof originalValue === 'object' && originalValue !== null) {
-                                // Get the already-wrapped state from the wrapped object
-                                // Don't call initializeSignals again as it would create a new wrapped array
-                                const nestedState = (wrapped as any)[key]
-                                if (nestedState === undefined) {
-                                    // Fallback: initialize if not already wrapped
-                                    const childContext = context
-                                        ? {...context, rootState: stateRootMap.get(wrapped) ?? wrapped}
-                                        : undefined
-                                    const initialized = initializeSignals(originalValue, undefined, childContext)
-                                    const sig = signal(initialized)
-                                    if (Array.isArray(initialized)) {
-                                        arrayParentSignalMap.set(initialized, sig)
-                                    }
-                                    nestedSignalMap.set(key, sig)
-                                } else {
-                                    const sig = signal(nestedState)
-                                    // Store parent signal reference for arrays
-                                    if (Array.isArray(nestedState)) {
-                                        arrayParentSignalMap.set(nestedState, sig)
-                                    }
-                                    nestedSignalMap.set(key, sig)
-                                }
-                            } else {
-                                const sig = toSignal(originalValue)
-                                nestedSignalMap.set(key, sig)
-                            }
-                        } else {
-                            // Property doesn't exist - return undefined
-                            return undefined
-                        }
+                    const sig = ensurePropertySignal(target, key, key)
+                    if (!sig) return undefined
+
+                    // Re-link array-backed values so mutations (splice, push) notify subscribers.
+                    // Needed when $prop is accessed before .prop (e.g. watcher setup before render).
+                    if (sig && !(sig instanceof ComputedSignal)) {
+                        linkArrayParentSignal((sig as Signal<any>).peek(), sig)
                     }
 
                     // Return raw signal object (not the value)
-                    return nestedSignalMap.get(key)
+                    return sig
                 }
 
                 const key = propStr
 
-                // Check if we have a signal for this property
-                if (!nestedSignalMap.has(key)) {
-                    // Try to get from target first (original object properties)
-                    const originalValue = Reflect.get(target, prop)
-                    if (originalValue !== undefined) {
-                        // Initialize signal for this property
-                        if (typeof originalValue === 'function') {
-                            // Function property -> computed signal
-                            const computedSig = createStateComputed(
-                                wrapped,
-                                () => originalValue.call(wrapped),
-                                !!context?.deferComputed,
-                            )
-                            nestedSignalMap.set(key, computedSig)
-                        } else if (isGetSetDescriptor(originalValue)) {
-                            // Get/set descriptor -> computed signal from get function
-                            if (typeof originalValue.get === 'function') {
-                                const computedSig = createStateComputed(
-                                    wrapped,
-                                    () => originalValue.get.call(wrapped),
-                                    !!context?.deferComputed,
-                                )
-                                nestedSignalMap.set(key, computedSig)
-                            } else {
-                                // Only setter, no getter - treat as regular signal with undefined initial value
-                                const sig = signal(undefined)
-                                nestedSignalMap.set(key, sig)
-                            }
-                        } else if (typeof originalValue === 'object' && originalValue !== null) {
-                            // Nested object -> recursive state with its own signalMap
-                            const childContext = context
-                                ? {...context, rootState: stateRootMap.get(wrapped) ?? wrapped}
-                                : undefined
-                            const nestedState = initializeSignals(originalValue, undefined, childContext)
-                            const sig = signal(nestedState)
-                            // Store parent signal reference for arrays
-                            if (Array.isArray(nestedState)) {
-                                arrayParentSignalMap.set(nestedState, sig)
-                            }
-                            nestedSignalMap.set(key, sig)
-                        } else {
-                            // Primitive value -> signal
-                            const sig = toSignal(originalValue)
-                            nestedSignalMap.set(key, sig)
-                        }
-                    } else {
-                        // Property doesn't exist in original object
-                        // Check if it's a computed property that was added dynamically
-                        // For now, return undefined
-                    }
-                }
-
-                const sig = nestedSignalMap.get(key)
+                const sig = ensurePropertySignal(target, prop, key)
                 if (sig) {
                     // Access signal.value to track component dependency
-                    const value = sig.value
-                    // Always ensure parent signal is stored for arrays (in case it wasn't stored during initialization)
-                    // Check for wrapped arrays by looking for __isState and __signals properties
-                    // Array.isArray() may return false for Proxies, so we check __isState instead
-                    if (value && typeof value === 'object') {
-                        if ((value as any).__isState === true && Array.isArray((value as any).__signals)) {
-                            // This is a wrapped array - store parent signal
-                            arrayParentSignalMap.set(value, sig as Signal<any>)
-                            // Also store directly on the Proxy as a fallback
-                            ;(value as any)._parentSignal = sig as Signal<any>
-                        } else if (Array.isArray(value)) {
-                            // Regular array (shouldn't happen but just in case)
-                            arrayParentSignalMap.set(value, sig as Signal<any>)
-                        }
-                    }
-                    return value
+                    return sig.value
                 }
 
                 // Fallback to original property
@@ -786,47 +724,22 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                     const sig = nestedSignalMap.get(key)
                     if (sig && !(sig instanceof ComputedSignal)) {
                         if (typeof value === 'object' && value !== null) {
-                            // Nested object -> recursive state with its own signalMap
-                            const childContext = context
-                                ? {...context, rootState: stateRootMap.get(wrapped) ?? wrapped}
-                                : undefined
-                            const nestedState = initializeSignals(value, undefined, childContext)
-                            // Store parent signal reference for arrays
-                            if (Array.isArray(nestedState)) {
-                                arrayParentSignalMap.set(nestedState, sig as Signal<any>)
+                            const nestedState = initializeSignals(value, undefined, getChildContext())
+                            if (nestedState && (nestedState as any).__isState) {
+                                stateRootMap.set(nestedState, stateRootMap.get(wrapped) ?? wrapped)
                             }
+                            linkArrayParentSignal(nestedState, sig)
                             ;(sig as Signal<any>).value = nestedState
                         } else {
                             ;(sig as Signal<any>).value = value
                         }
                     } else {
                         // Replace computed with regular signal
-                        if (typeof value === 'object' && value !== null && Array.isArray(value)) {
-                            const childContext = context
-                                ? {...context, rootState: stateRootMap.get(wrapped) ?? wrapped}
-                                : undefined
-                            const nestedState = initializeSignals(value, undefined, childContext)
-                            const sig = signal(nestedState)
-                            arrayParentSignalMap.set(nestedState, sig)
-                            nestedSignalMap.set(key, sig)
-                        } else {
-                            nestedSignalMap.set(key, toSignal(value))
-                        }
+                        nestedSignalMap.set(key, createPropertySignal(value))
                     }
                 } else {
                     // Create new signal
-                    if (typeof value === 'object' && value !== null) {
-                        const childContext = context ? {...context, rootState: stateRootMap.get(wrapped) ?? wrapped} : undefined
-                        const nestedState = initializeSignals(value, undefined, childContext)
-                        const sig = signal(nestedState)
-                        // Store parent signal reference for arrays
-                        if (Array.isArray(nestedState)) {
-                            arrayParentSignalMap.set(nestedState, sig)
-                        }
-                        nestedSignalMap.set(key, sig)
-                    } else {
-                        nestedSignalMap.set(key, toSignal(value))
-                    }
+                    nestedSignalMap.set(key, createPropertySignal(value))
                 }
 
                 return true
@@ -890,6 +803,11 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
 
         stateRootMap.set(wrapped, context?.rootState ?? wrapped)
         stateCache.set(obj, wrapped)
+        for (const key of originalKeys) {
+            if (!nestedSignalMap.has(key)) {
+                nestedSignalMap.set(key, createPropertySignal((obj as any)[key]))
+            }
+        }
         return wrapped
     }
 
@@ -900,61 +818,6 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
         stateDeferredFlags.set(wrapped, {allowed: false})
     }
 
-    // Pre-initialize all signals from the initial object so they're available immediately
-    // This ensures $s.$property works even if $s.property hasn't been accessed yet
-    if (typeof initial === 'object' && initial !== null && !Array.isArray(initial)) {
-        for (const key in initial) {
-            if (Object.prototype.hasOwnProperty.call(initial, key)) {
-                if (!signalMap.has(key)) {
-                    const value = initial[key]
-                    if (typeof value === 'function') {
-                        const computedSig = createStateComputed(wrapped, () => value.call(wrapped), deferComputed)
-                        signalMap.set(key, computedSig)
-                    } else if (isGetSetDescriptor(value)) {
-                        // Get/set descriptor -> computed signal from get function
-                        if (typeof value.get === 'function') {
-                            const computedSig = createStateComputed(wrapped, () => value.get.call(wrapped), deferComputed)
-                            signalMap.set(key, computedSig)
-                        } else {
-                            // Only setter, no getter - treat as regular signal with undefined initial value
-                            const sig = signal(undefined)
-                            signalMap.set(key, sig)
-                        }
-                    } else if (typeof value === 'object' && value !== null) {
-                        // Get the already-wrapped state from stateCache (bypass Proxy to get the actual wrapped value)
-                        // This ensures we get the same wrapped array that was created during initializeSignals
-                        const preInitContext = initContext ? {...initContext, rootState: wrapped} : undefined
-                        const nestedState = stateCache.has(value)
-                            ? stateCache.get(value)
-                            : initializeSignals(value, undefined, preInitContext)
-                        if (nestedState && (nestedState as any).__isState) stateRootMap.set(nestedState, wrapped)
-                        const sig = signal(nestedState)
-                        // Always store parent signal reference for arrays
-                        // Check for wrapped arrays by looking for __isState and __signals properties
-                        // Array.isArray() may return false for Proxies, so we check __isState instead
-                        if (
-                            nestedState &&
-                            typeof nestedState === 'object' &&
-                            (nestedState as any).__isState === true &&
-                            Array.isArray((nestedState as any).__signals)
-                        ) {
-                            arrayParentSignalMap.set(nestedState, sig)
-                            // Also store directly on the Proxy as a fallback
-                            ;(nestedState as any)._parentSignal = sig
-                        } else if (Array.isArray(nestedState)) {
-                            // Fallback for regular arrays (shouldn't happen but just in case)
-                            arrayParentSignalMap.set(nestedState, sig)
-                        }
-                        signalMap.set(key, sig)
-                    } else {
-                        const sig = toSignal(value)
-                        signalMap.set(key, sig)
-                    }
-                }
-            }
-        }
-    }
-
     // Register state for SSR serialization when name is provided (required for hydration)
     if (name && typeof name === 'string' && name.trim() !== '') {
         registerState(name, wrapped, initial)
@@ -969,7 +832,7 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
  * - Nested objects: $prop => Signal<State<T[K]>>
  * - Functions: $prop => ComputedSignal (computed from getter)
  */
-type StateSignals<T extends Record<string, any>> = {
+export type StateSignals<T extends Record<string, any>> = {
     [K in keyof T as K extends string ? `$${K}` : never]: T[K] extends (...args: any[]) => any
         ? ComputedSignal<any>
         : T[K] extends object

package/store.ts

@@ -144,9 +144,13 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
     private lookup_verify_interval: number | null = null
     private lookup_ttl: number
     private computedPropertiesSetup?: () => void
+    private storageKey: string
+    private tabStorageKey: string
 
-    constructor(options: {lookup_ttl?: number} = {lookup_ttl: DEFAULT_LOOKUP_TTL}) {
+    constructor(options: {lookup_ttl?: number; storageKey?: string; tabStorageKey?: string} = {lookup_ttl: DEFAULT_LOOKUP_TTL}) {
         this.lookup_ttl = options.lookup_ttl || DEFAULT_LOOKUP_TTL
+        this.storageKey = options.storageKey ?? 'store'
+        this.tabStorageKey = options.tabStorageKey ?? this.storageKey
         // Initialize with empty state, will be loaded later (ADR-0013: defer computeds until ready() is called)
         const instanceName = `store.instance.${storeInstanceCounter++}`
         this.stateInstance = state({} as T, instanceName, {deferComputed: true})
@@ -271,8 +275,8 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
 
     load(saved: Partial<T>, temporary: Partial<T>, tab: Partial<T> = {} as Partial<T>, session: Partial<T> = {} as Partial<T>) {
         const restored_state = {
-            tab: this.get_tab_storage('store'),
-            store: this.get('store'),
+            tab: this.get_tab_storage(this.tabStorageKey),
+            store: this.get(this.storageKey),
         }
 
         this.templates = {
@@ -381,7 +385,7 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
 
         // Save to localStorage (saved state)
         if (saveSaved && this.templates.saved) {
-            this.set('store', this.blueprint(statePlain, copy_object(this.templates.saved)))
+            this.set(this.storageKey, this.blueprint(statePlain, copy_object(this.templates.saved)))
         }
 
         // Save to sessionStorage (tab state)
@@ -397,18 +401,18 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
                 if (isState(tabState)) {
                     const tabPlain = serializeStore(tabState)
                     // blueprint expects both arguments to have the same structure
-                    this.set_tab('store', this.blueprint(tabPlain, copy_object(tabTemplate)))
+                    this.set_tab(this.tabStorageKey, this.blueprint(tabPlain, copy_object(tabTemplate)))
                 } else {
                     // Plain object tab
-                    this.set_tab('store', this.blueprint(tabState, copy_object(tabTemplate)))
+                    this.set_tab(this.tabStorageKey, this.blueprint(tabState, copy_object(tabTemplate)))
                 }
             } else {
                 // No tab state - save empty tab based on template structure
                 const tabTemplate = (this.templates.tab as any).tab || this.templates.tab
                 if (tabTemplate && Object.keys(tabTemplate).length > 0) {
-                    this.set_tab('store', this.blueprint({} as any, copy_object(tabTemplate)))
+                    this.set_tab(this.tabStorageKey, this.blueprint({} as any, copy_object(tabTemplate)))
                 } else {
-                    this.set_tab('store', {})
+                    this.set_tab(this.tabStorageKey, {})
                 }
             }
         }