@bitstillery/mithril 3.0.3 → 3.2.0

package/README.md

@@ -1,24 +1,22 @@
-# @bitstillery/mithril
+# Mithril Bitstillery
 
-Mithril.js fork with fine-grained reactivity, SSR hydration, and built-in signals. Drop-in compatible with Mithril v2.x.
+Mithril Bitstillery extends Mithril with integrated state management, SSR hydration, watchers, and a signal/proxy store. Drop-in compatible with Mithril v2.x.
 
 ```bash
 bun add @bitstillery/mithril
 ```
 
-## Why
+## Strengths
 
-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.
+Mithril Bitstillery focuses on **state management**, **SSR**, **watchers**, and **developer experience** around its signal/proxy store:
 
-| 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.
+| Feature          | Description                                                         |
+| ---------------- | ------------------------------------------------------------------- |
+| Proxy State      | Reactive objects with nested objects, arrays, computeds             |
+| State Management | `state()` + `Store` for persistence (localStorage, session)         |
+| SSR              | Full server-side rendering with state serialization + hydration     |
+| Watchers         | `watch()` for observing signal changes; `effect()` for side effects |
+| DX               | Automatic dependency tracking, no manual redraw for signals         |
 
 **Docs**: [mithril.garage44.org](https://mithril.garage44.org)
 
@@ -38,7 +36,7 @@ count(5) // Logs: 5 × 2 = 10
 
 ## Proxy State
 
-Wraps signals in a proxy for ergonomic access. Components automatically track which properties they read and only re-render when those change.
+`state()` creates reactive objects. Components track which properties they read and only re-render when those change.
 
 ```tsx
 import m, {state, MithrilComponent} from '@bitstillery/mithril'
@@ -61,6 +59,19 @@ m.mount(document.body, Counter)
 
 The second argument to `state()` is a name used for SSR serialization.
 
+## Watchers
+
+`watch()` observes signal changes:
+
+```typescript
+import {state, watch} from '@bitstillery/mithril'
+
+const $s = state({count: 0}, 'app')
+const unwatch = watch($s.$count, (newVal, oldVal) => console.log(`${oldVal} → ${newVal}`))
+$s.count++ // triggers callback
+unwatch() // stop observing
+```
+
 ## SSR Hydration
 
 ```typescript

package/api/router.ts

@@ -29,7 +29,7 @@ export type SSRResult = string | {html: string; state: SSRState}
 export interface Route {
     (path: string, params?: Record<string, any>, shouldReplaceHistory?: boolean): void
     (path: string, component: ComponentType, shouldReplaceHistory?: boolean): void
-    set: (path: string, params?: Record<string, any>, data?: any) => void
+    set: (path: string, params?: Record<string, any>, data?: any) => Promise<void>
     get: () => string
     prefix: string
     link: (vnode: VnodeType) => string
@@ -53,6 +53,8 @@ interface MountRedraw {
 }
 
 interface RouteOptions {
+    /** When true, forces the route component to remount (e.g. for same-route navigation with different query params) */
+    remount?: boolean
     replace?: boolean
     state?: any
     title?: string | null
@@ -77,6 +79,9 @@ export default function router($window: any, mountRedraw: MountRedraw) {
     let attrs: Record<string, any> = {}
     let currentPath: string | undefined
     let lastUpdate: ((comp: any) => void) | null = null
+    let routeSetResolve: (() => void) | null = null
+    let remountPath: string | null = null
+    let pendingRemount = false
 
     const RouterRoot: ComponentType = {
         onremove: function () {
@@ -89,11 +94,22 @@ export default function router($window: any, mountRedraw: MountRedraw) {
             // if (!hasBeenResolved) return
 
             // Pass currentPath in attrs so RouteResolver.render can use it for routePath.
-            // Use attrs.key (not currentPath) so that route param changes within the same
-            // route pattern update the component instead of causing a full remount.
+            // Use remountPath when set (from route.set with remount: true) to force remount
+            // for same-route navigation; otherwise attrs.key for route param changes.
             const routeAttrs = {...attrs, routePath: currentPath || attrs.routePath}
-            const vnode = Vnode(component, attrs.key, routeAttrs, null, null, null)
-            if (currentResolver) return currentResolver.render!(vnode as any)
+            const vnodeKey = remountPath ?? attrs.key
+            const vnode = Vnode(component, vnodeKey, routeAttrs, null, null, null)
+            if (currentResolver) {
+                const result = currentResolver.render!(vnode as any)
+                // When remount requested, wrap in keyed fragment so same-route navigation
+                // (e.g. Stock <-> TBO) forces full remount. Key must change when path changes.
+                // Always wrap when we have a path so structure is consistent; key drives remount.
+                const fragmentKey = remountPath ?? currentPath ?? undefined
+                if (fragmentKey != null) {
+                    return hyperscript.fragment({key: fragmentKey}, result)
+                }
+                return result
+            }
             // Wrap in a fragment to preserve existing key semantics
             return [vnode]
         },
@@ -176,7 +192,9 @@ export default function router($window: any, mountRedraw: MountRedraw) {
 
         function reject(e: any) {
             console.error(e)
-            route.set(fallbackRoute!, null, {replace: true})
+            const resolve = routeSetResolve
+            routeSetResolve = null
+            route.set(fallbackRoute!, null, {replace: true}).then(() => resolve?.())
         }
 
         loop(0)
@@ -206,8 +224,10 @@ export default function router($window: any, mountRedraw: MountRedraw) {
                         if (isRedirect(comp)) {
                             // Extract redirect target path
                             const redirectPath = comp[REDIRECT]
-                            // Trigger navigation to redirect target
-                            route.set(redirectPath, null)
+                            const resolve = routeSetResolve
+                            routeSetResolve = null
+                            // Trigger navigation to redirect target; resolve original Promise when redirect completes
+                            route.set(redirectPath, null).then(() => resolve?.())
                             // Skip rendering current route - new route resolution will handle redirect target
                             return
                         }
@@ -228,7 +248,13 @@ export default function router($window: any, mountRedraw: MountRedraw) {
                         }
                         attrs = data.params
                         currentPath = path
+                        if (pendingRemount) {
+                            remountPath = path
+                            pendingRemount = false
+                        }
                         lastUpdate = null
+                        routeSetResolve?.()
+                        routeSetResolve = null
                         if (hasBeenResolved) mountRedraw.redraw()
                         else {
                             hasBeenResolved = true
@@ -255,7 +281,9 @@ export default function router($window: any, mountRedraw: MountRedraw) {
             if (path === fallbackRoute) {
                 throw new Error('Could not resolve default route ' + fallbackRoute + '.')
             }
-            route.set(fallbackRoute!, null, {replace: true})
+            const resolve = routeSetResolve
+            routeSetResolve = null
+            route.set(fallbackRoute!, null, {replace: true}).then(() => resolve?.())
         }
     }
 
@@ -304,32 +332,39 @@ export default function router($window: any, mountRedraw: MountRedraw) {
         // The RouterRoot component is mounted when the route is first resolved.
         resolveRoute()
     }
-    route.set = function (path: string, data: Record<string, any> | null, options?: RouteOptions) {
+    route.set = function (path: string, data: Record<string, any> | null, options?: RouteOptions): Promise<void> {
         if (lastUpdate != null) {
             options = options || {}
             options.replace = true
         }
         lastUpdate = null
 
+        if (!options?.remount) {
+            remountPath = null
+        }
+        pendingRemount = options?.remount ?? false
+
         path = buildPathname(path, data || {})
-        if (ready) {
-            // Router is initialized - use history API for navigation
-            const state = options ? options.state : null
-            const title = options ? options.title : null
-            if ($window?.history) {
-                if (options && options.replace) $window.history.replaceState(state, title, route.prefix + path)
-                else $window.history.pushState(state, title, route.prefix + path)
-            }
-            // Update URL before fireAsync so resolveRoute reads the new path
-            fireAsync()
-            // In SSR context (no $window), navigation is a no-op since we're just rendering HTML
-        } else {
-            // Router not yet initialized - use location.href for initial navigation
+        if (!ready || !$window) {
+            // Router not yet initialized or SSR - navigation is a no-op
             if ($window?.location) {
                 $window.location.href = route.prefix + path
             }
-            // In SSR context (no $window), this is a no-op since we're just rendering HTML
+            return Promise.resolve()
         }
+        // Router is initialized - use history API for navigation
+        const state = options ? options.state : null
+        const title = options ? options.title : null
+        if ($window.history) {
+            if (options && options.replace) $window.history.replaceState(state, title, route.prefix + path)
+            else $window.history.pushState(state, title, route.prefix + path)
+        }
+        const promise = new Promise<void>((resolve) => {
+            routeSetResolve = resolve
+        })
+        // Update URL before fireAsync so resolveRoute reads the new path
+        fireAsync()
+        return promise
     }
     route.get = function (): string {
         // If currentPath is not set (e.g., during SSR before route.resolve is called),
@@ -352,11 +387,12 @@ export default function router($window: any, mountRedraw: MountRedraw) {
             // let them be specified in the selector as well.
             const child = hyperscript(
                 vnode.attrs?.selector || 'a',
-                censor(vnode.attrs || {}, ['options', 'params', 'selector', 'onclick']),
+                censor(vnode.attrs || {}, ['options', 'params', 'selector', 'onclick', 'onafternavigate']),
                 vnode.children,
             )
             let options: RouteOptions | undefined
             let onclick: any
+            let onafternavigate: (() => void) | undefined
             let href: string
 
             // Let's provide a *right* way to disable a route link, rather than
@@ -373,6 +409,7 @@ export default function router($window: any, mountRedraw: MountRedraw) {
             } else {
                 options = vnode.attrs?.options
                 onclick = vnode.attrs?.onclick
+                onafternavigate = vnode.attrs?.onafternavigate
                 // Easier to build it now to keep it isomorphic.
                 href = buildPathname(child.attrs!.href || '', vnode.attrs?.params || {})
                 // Make Link isomorphic - use empty prefix on server for pathname routing
@@ -421,7 +458,7 @@ export default function router($window: any, mountRedraw: MountRedraw) {
                             e.originalEvent.preventDefault()
                         }
                         ;(e as any).redraw = false
-                        route.set(href, null, options)
+                        route.set(href, null, options).then(onafternavigate ?? (() => {}))
                     }
                 }
             }

package/index.ts

@@ -102,7 +102,7 @@ setSignalRedrawCallback((sig: Signal<any>) => {
 
 // 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'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitstillery/mithril",
-    "version": "3.0.3",
+    "version": "3.2.0",
     "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": "./scripts/release.sh",
+        "release:patch": "./scripts/release.sh --release-as patch",
+        "release:minor": "./scripts/release.sh --release-as minor",
+        "release:major": "./scripts/release.sh --release-as major"
     },
     "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/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