@bitstillery/mithril 3.0.1-AA → 3.0.3

package/README.md

@@ -1,18 +1,30 @@
 # @bitstillery/mithril
 
-> Mithril.js with **fine-grained reactivity**, **SSR hydration**, and **zero-dependency signals**.
+Mithril.js fork with fine-grained reactivity, SSR hydration, and built-in signals. Drop-in compatible with Mithril v2.x.
 
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+```bash
+bun add @bitstillery/mithril
+```
+
+## Why
 
-## The Problem
+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.js uses global `m.redraw()`—one state change updates **all** components. This fork adds fine-grained reactivity: only components using changed state re-render.
+| 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()`) |
 
-## What Makes This Different
+Signals are opt-in. Existing Mithril code works unchanged.
 
-### Signals
+**Docs**: [mithril.garage44.org](https://mithril.garage44.org)
 
-Fine-grained reactivity primitives with automatic dependency tracking. Zero-dependency implementation—no Preact Signals or other packages.
+## Signals
+
+Zero-dependency reactive primitives with automatic dependency tracking:
 
 ```typescript
 import {signal, computed, effect} from '@bitstillery/mithril'
@@ -20,71 +32,36 @@ import {signal, computed, effect} from '@bitstillery/mithril'
 const count = signal(0)
 const doubled = computed(() => count() * 2)
 
-effect(() => {
-    console.log(`Count: ${count()}, Doubled: ${doubled()}`)
-})
-
-count(5) // Logs: Count: 5, Doubled: 10
+effect(() => console.log(`${count()} × 2 = ${doubled()}`))
+count(5) // Logs: 5 × 2 = 10
 ```
 
-### Signal State
+## Proxy State
 
-Proxy-based reactive state that makes signals developer-friendly. Automatic dependency tracking with no manual redraw calls.
+Wraps signals in a proxy for ergonomic access. Components automatically track which properties they read and only re-render when those change.
 
 ```tsx
-import {state} from '@bitstillery/mithril'
-
-const $s = state(
-    {
-        count: 0,
-        user: {name: 'John'},
-        todos: [],
-        totalTodos: () => $s.todos.length, // Computed
-    },
-    'my.state',
-) // Name required for SSR serialization
-
-// Component only re-renders when $s.count changes
+import m, {state, MithrilComponent} from '@bitstillery/mithril'
+
+const $s = state({count: 0, todos: [], totalTodos: () => $s.todos.length}, 'app')
+
 class Counter extends MithrilComponent {
     view() {
         return (
             <div>
-                <p>Count: {$s.count}</p>
-                <button onclick={() => $s.count++}>Increment</button>
+                <p>{$s.count}</p>
+                <button onclick={() => $s.count++}>+</button>
             </div>
         )
     }
 }
-```
 
-### Persistent Store
-
-State persistence with automatic serialization. The `Store` class wraps `state()` with localStorage/sessionStorage support, seamlessly integrating with SSR hydration.
-
-```typescript
-import {Store} from '@bitstillery/mithril'
-
-const store = new Store<{user: {name: string}; preferences: Record<string, any>}>()
-
-// Define what persists vs what's volatile
-store.blueprint(
-    {user: {name: ''}, preferences: {}},
-    {
-        user: {name: ''}, // Persistent
-        preferences: {}, // Persistent
-    },
-)
-
-// Load from storage, or initialize with defaults
-store.load({user: {name: 'John'}, preferences: {theme: 'dark'}})
-
-// State is reactive and automatically saves on changes
-store.state.user.name = 'Jane' // Auto-saves to localStorage
+m.mount(document.body, Counter)
 ```
 
-### SSR Hydration
+The second argument to `state()` is a name used for SSR serialization.
 
-Server-side rendering with state preservation. `renderToString` automatically serializes state; restore it on the client before mounting.
+## SSR Hydration
 
 ```typescript
 // Server
@@ -94,57 +71,31 @@ const {html, state} = await m.renderToString(App)
 // Client
 import {deserializeAllStates} from '@bitstillery/mithril'
 
-const ssrState = document.getElementById('__SSR_STATE__')
-if (ssrState?.textContent) {
-    deserializeAllStates(JSON.parse(ssrState.textContent))
-}
+const el = document.getElementById('__SSR_STATE__')
+if (el?.textContent) deserializeAllStates(JSON.parse(el.textContent))
 m.mount(root, App)
 ```
 
-## The Complete Picture
-
-These features build on each other: signals provide the foundation for fine-grained reactivity, proxy-based state makes them developer-friendly, `Store` adds persistence for localStorage/sessionStorage, and SSR hydration enables search-engine friendly websites. The result? State that "just works"—from initial render through hydration, user interactions, and page refreshes—all while maintaining Mithril's familiar API.
-
-## Quick Start
-
-```bash
-bun add @bitstillery/mithril
-```
-
-```tsx
-import m, {state, MithrilComponent} from '@bitstillery/mithril'
+## Persistent Store
 
-const $s = state({count: 0}, 'app.state') // Name required for SSR
+`Store` wraps `state()` with localStorage/sessionStorage. Define a blueprint with defaults and which keys persist:
 
-class App extends MithrilComponent {
-    view() {
-        return (
-            <div>
-                <p>Count: {$s.count}</p>
-                <button onclick={() => $s.count++}>Increment</button>
-            </div>
-        )
-    }
-}
+```typescript
+import {Store} from '@bitstillery/mithril'
 
-m.mount(document.body, App)
+const store = new Store<{user: {name: string}; preferences: Record<string, any>}>()
+store.blueprint(
+    {user: {name: ''}, preferences: {}},
+    {user: {name: ''}, preferences: {}}, // Keys here persist to storage
+)
+store.load({user: {name: 'John'}, preferences: {theme: 'dark'}})
+store.state.user.name = 'Jane' // Auto-saves
 ```
 
 ## Examples
 
-- **SSR**: [`examples/ssr/`](examples/ssr/) - Server-side rendering with hydration
-- **State**: [`examples/state/`](examples/state/) - Signals, state management, and Store persistence patterns
-
-## Differences from Mithril.js
-
-| Feature          | Original            | This Fork                       |
-| ---------------- | ------------------- | ------------------------------- |
-| Reactivity       | Global `m.redraw()` | Fine-grained component updates  |
-| State Management | Manual redraw calls | Signals with automatic tracking |
-| SSR Hydration    | State loss          | Proper state preservation       |
-| TypeScript       | Community types     | Native TypeScript               |
-
-**100% API compatible** with Mithril.js v2.x. Signals are opt-in.
+- [`examples/ssr/`](examples/ssr/) — Server-side rendering with hydration
+- [`examples/state/`](examples/state/) — Signals, state, and Store patterns
 
 ## Development
 
@@ -155,31 +106,8 @@ bun test
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) file for details.
+MIT — see [LICENSE](LICENSE).
 
 ## Credits
 
-Mithril.js was originally written by Leo Horie, but it is where it is today thanks to the hard work and great ideas of many people.
-
-Special thanks to:
-
-- Pat Cavit, who exposed most of the public API for Mithril.js 1.0, brought in test coverage and automated the publishing process
-- Claudia Meadows, who brought in linting, modernized the test suite and has been a strong voice in design discussions
-- Zoli Kahan, who replaced the original Promise implementation with one that actually worked properly
-- Alec Embke, who single-handedly wrote the JSON-P implementation
-- Barney Carroll, who suggested many great ideas and relentlessly pushed Mithril.js to the limit to uncover design issues prior to Mithril.js 1.0
-- Dominic Gannaway, who offered insanely meticulous technical insight into rendering performance
-- Boris Letocha, whose search space reduction algorithm is the basis for Mithril.js' virtual DOM engine
-- Joel Richard, whose monomorphic virtual DOM structure is the basis for Mithril.js' vnode implementation
-- Simon Friis Vindum, whose open source work was an inspiration to many design decisions for Mithril.js 1.0
-- Boris Kaul, for his awesome work on the benchmarking tools used to develop Mithril.js
-- Leon Sorokin, for writing a DOM instrumentation tool that helped improve performance in Mithril.js 1.0
-- Jordan Walke, whose work on React was prior art to the implementation of keys in Mithril.js
-- Pierre-Yves Gérardy, who consistently makes high quality contributions
-- Gyandeep Singh, who contributed significant IE performance improvements
-
-Other people who also deserve recognition:
-
-- Arthur Clemens - creator of [Polythene](https://github.com/ArthurClemens/Polythene) and the [HTML-to-Mithril converter](https://arthurclemens.github.io/mithril-template-converter/index.html)
-- Stephan Hoyer - creator of [mithril-node-render](https://github.com/StephanHoyer/mithril-node-render), [mithril-query](https://github.com/StephanHoyer/mithril-query) and [mithril-source-hint](https://github.com/StephanHoyer/mithril-source-hint)
-- the countless people who have reported and fixed bugs, participated in discussions, and helped promote Mithril.js
+Originally created by Leo Horie. See the [Mithril.js contributors](https://github.com/MithrilJS/mithril.js/graphs/contributors) for the many people who made Mithril what it is.

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,14 +70,33 @@ 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)
+        }
     }
 })
 
@@ -90,6 +109,7 @@ 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,7 +1,7 @@
 {
     "name": "@bitstillery/mithril",
-    "version": "3.0.1-AA",
-    "description": "Mithril AA (AI Augmented) - Mithril + Signals, Store and SSR",
+    "version": "3.0.3",
+    "description": "Mithril + Signals, Store and SSR",
     "license": "MIT",
     "author": "Bitstillery",
     "repository": {
@@ -58,9 +58,19 @@
         "htm": "^3.1.1"
     },
     "devDependencies": {
+        "@codemirror/lang-html": "^6.4.9",
+        "@codemirror/lang-javascript": "^6.2.2",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/theme-one-dark": "^6.1.2",
+        "@codemirror/view": "^6.39.1",
         "@types/bun": "^1.3.9",
         "@typescript/native-preview": "^7.0.0-dev.20260120.1",
+        "codemirror": "^6.0.1",
+        "marked": "^15.0.4",
+        "marked-gfm-heading-id": "^4.0.0",
         "oxfmt": "^0.32.0",
-        "oxlint": "^1.30.0"
+        "oxlint": "^1.30.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/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, {})
                 }
             }
         }