@signaltree/core 7.3.0 → 7.6.1

package/README.md

@@ -118,7 +118,7 @@ Performance and bundle size vary by app shape, build tooling, device, and runtim
 
 ## Best Practices (SignalTree-First)
 
-> 📖 **Full guide**: [Implementation Patterns](https://github.com/JBorgia/signaltree/blob/main/docs/IMPLEMENTATION_PATTERNS.md)
+> 📖 **Full guide**: [Architecture Guide](https://github.com/JBorgia/signaltree/blob/main/docs/architecture/signaltree-architecture-guide.md)
 
 Follow these principles for idiomatic SignalTree code:
 
@@ -164,7 +164,7 @@ export function createUserTree() {
 // ✅ Correct: Derived from multiple signals
 const selectedUser = computed(() => {
   const id = $.selected.userId();
-  return id ? $.users.byId(id)() : null;
+  return id ? $.users.byId(id)?.() ?? null : null;
 });
 
 // ❌ Wrong: Wrapping an existing signal
@@ -175,8 +175,8 @@ const selectedUserId = computed(() => $.selected.userId()); // Unnecessary!
 
 ```typescript
 // ✅ SignalTree-native
-const user = $.users.byId(123)(); // O(1) lookup
-const allUsers = $.users.all; // Get all
+const user = $.users.byId(123)?.(); // O(1) lookup
+const allUsers = $.users.all(); // Get all
 $.users.setAll(usersFromApi); // Replace all
 
 // ❌ NgRx-style (avoid)
@@ -650,7 +650,7 @@ All enhancers are exported directly from `@signaltree/core`:
 
 **Data Management:**
 
-- `entities()` - Advanced CRUD operations for collections
+- `entities()` - Legacy helper (not required when using `entityMap()` in v7)
 - `createAsyncOperation()` - Async operation management with loading/error states
 - `trackAsync()` - Track async operations in your state
 - `serialization()` - State persistence and SSR support
@@ -658,7 +658,7 @@ All enhancers are exported directly from `@signaltree/core`:
 
 **Development Tools:**
 
-- `devTools()` - Redux DevTools integration
+- `devTools()` - Redux DevTools auto-connect, path actions, and time-travel dispatch
 - `withTimeTravel()` - Undo/redo functionality
 
 **Presets:**
@@ -691,14 +691,12 @@ const tree = signalTree({ count: 0 }).with(
 **Performance-Focused Stack:**
 
 ```typescript
-import { signalTree, batching, memoization, entities } from '@signaltree/core';
+import { signalTree, batching, memoization, entityMap } from '@signaltree/core';
 
 const tree = signalTree({
   products: entityMap<Product>(),
   ui: { loading: false },
-})
-  .with(entities()) // Efficient CRUD operations (auto-detects entityMap)
-  .with(batching()); // Batch updates for optimal rendering
+}).with(batching()); // Batch updates for optimal rendering
 
 // Entity CRUD operations
 tree.$.products.addOne(newProduct);
@@ -748,6 +746,8 @@ tree.undo(); // Revert changes
 
 #### Enhancer Metadata & Ordering
 
+Derived computed signals are preserved across `.with()` chaining, so enhancer composition does not recreate signal identities.
+
 Enhancers can declare metadata for automatic dependency resolution:
 
 ```typescript
@@ -782,20 +782,20 @@ const customTree = signalTree(state, TREE_PRESETS.DASHBOARD);
 SignalTree Core includes all enhancer functionality built-in. No separate packages needed:
 
 ```typescript
-import { signalTree, entityMap, entities } from '@signaltree/core';
+import { signalTree, entityMap } from '@signaltree/core';
 
 // Without entityMap - use manual array updates
 const basic = signalTree({ users: [] as User[] });
 basic.$.users.update((users) => [...users, newUser]);
 
-// With entityMap + entities - use entity helpers
+// With entityMap (v7+ auto-processed) - use entity helpers
 const enhanced = signalTree({
   users: entityMap<User>(),
-}).with(entities());
+});
 
 enhanced.$.users.addOne(newUser); // ✅ Advanced CRUD operations
-enhanced.$.users.byId(123)(); // ✅ O(1) lookups
-enhanced.$.users.all; // ✅ Get all as array
+enhanced.$.users.byId(123)?.(); // ✅ O(1) lookups
+enhanced.$.users.all(); // ✅ Get all as array
 ```
 
 Core includes several performance optimizations:
@@ -908,7 +908,7 @@ const tree = signalTree({ count: 0 }).with(withLogger());
 tree.log('Tree created');
 ```
 
-> 📖 **Full guide**: [Custom Markers & Enhancers](https://github.com/JBorgia/signaltree/blob/main/docs/custom-markers-enhancers.md)
+> 📖 **Full guide**: [Custom Markers & Enhancers](https://github.com/JBorgia/signaltree/blob/main/docs/guides/custom-markers-enhancers.md)
 >
 > 📱 **Interactive demo**: [Demo App](/custom-extensions)
 
@@ -1574,19 +1574,19 @@ const filteredProducts = computed(() => {
 ### Data Management Composition
 
 ```typescript
-import { signalTree, entityMap, entities } from '@signaltree/core';
+import { signalTree, entityMap } from '@signaltree/core';
 
-// Add data management capabilities (+2.77KB total)
+// Add data management capabilities (entityMap is auto-processed)
 const tree = signalTree({
   users: entityMap<User>(),
   posts: entityMap<Post>(),
   ui: { loading: false, error: null as string | null },
-}).with(entities());
+});
 
 // Advanced entity operations via tree.$ accessor
 tree.$.users.addOne(newUser);
-tree.$.users.selectBy((u) => u.active);
-tree.$.users.updateMany([{ id: '1', changes: { status: 'active' } }]);
+tree.$.users.where((u) => u.active); // Filtered signal
+tree.$.users.updateMany(['1'], { status: 'active' });
 
 // Entity helpers work with nested structures
 // Example: deeply nested entities in a domain-driven design pattern
@@ -1603,13 +1603,13 @@ const appTree = signalTree({
       reports: entityMap<Report>(),
     },
   },
-}).with(entities());
+});
 
 // Access nested entities using tree.$ accessor
-appTree.$.app.data.users.selectBy((u) => u.isAdmin); // Filtered signal
-appTree.$.app.data.products.selectTotal(); // Count signal
-appTree.$.admin.data.logs.all; // All items as array
-appTree.$.admin.data.reports.selectIds(); // ID array signal
+appTree.$.app.data.users.where((u) => u.isAdmin); // Filtered signal
+appTree.$.app.data.products.count(); // Count
+appTree.$.admin.data.logs.all(); // All items as array
+appTree.$.admin.data.reports.ids(); // ID array
 
 // For async operations, use manual async or async helpers
 async function fetchUsers() {
@@ -1628,7 +1628,7 @@ async function fetchUsers() {
 ### Full-Featured Development Composition
 
 ```typescript
-import { signalTree, batching, entities, serialization, withTimeTravel, devTools } from '@signaltree/core';
+import { signalTree, batching, serialization, withTimeTravel, devTools } from '@signaltree/core';
 
 // Full development stack (example)
 const tree = signalTree({
@@ -1639,7 +1639,6 @@ const tree = signalTree({
   },
 }).with(
   batching(), // Performance
-  entities(), // Data management
   // withAsync removed — use async helpers for API integration
   serialization({
     // State persistence
@@ -1653,7 +1652,9 @@ const tree = signalTree({
   devTools({
     // Debug tools (dev only)
     name: 'MyApp',
-    trace: true,
+    enableTimeTravel: true,
+    includePaths: ['app.*', 'ui.*'],
+    formatPath: (path) => path.replace(/\.(\d+)/g, '[$1]'),
   })
 );
 
@@ -1661,7 +1662,7 @@ const tree = signalTree({
 async function fetchUser(id: string) {
   return await api.getUser(id);
 }
-tree.$.app.data.users.byId(userId)(); // O(1) lookup
+tree.$.app.data.users.byId(userId)?.(); // O(1) lookup
 tree.undo(); // Time travel
 tree.save(); // Persistence
 ```
@@ -1669,12 +1670,11 @@ tree.save(); // Persistence
 ### Production-Ready Composition
 
 ```typescript
-import { signalTree, batching, entities, serialization } from '@signaltree/core';
+import { signalTree, batching, serialization } from '@signaltree/core';
 
 // Production build (no dev tools)
 const tree = signalTree(initialState).with(
   batching(), // Performance optimization
-  entities(), // Data management
   // withAsync removed — use async helpers for API integration
   serialization({
     // User preferences
@@ -1690,14 +1690,13 @@ const tree = signalTree(initialState).with(
 ### Conditional Enhancement
 
 ```typescript
-import { signalTree, batching, entities, devTools, withTimeTravel } from '@signaltree/core';
+import { signalTree, batching, devTools, withTimeTravel } from '@signaltree/core';
 
 const isDevelopment = process.env['NODE_ENV'] === 'development';
 
 // Conditional enhancement based on environment
 const tree = signalTree(state).with(
   batching(), // Always include performance
-  entities(), // Always include data management
   ...(isDevelopment
     ? [
         // Development-only features
@@ -1742,7 +1741,7 @@ const tree = signalTree(state);
 const tree2 = tree.with(batching());
 
 // Phase 3: Add data management for collections
-const tree3 = tree2.with(entities());
+const tree3 = tree2; // entityMap is auto-processed in v7
 
 // Phase 4: Add async for API integration
 // withAsync removed — no explicit async enhancer; use async helpers instead
@@ -1820,7 +1819,7 @@ For fair, reproducible measurements that reflect your app and hardware, use the
           {{ userTree.$.error() }}
           <button (click)="loadUsers()">Retry</button>
         </div>
-        } @else { @for (user of users.selectAll()(); track user.id) {
+        } @else { @for (user of users(); track user.id) {
         <div class="user-card">
           <h3>{{ user.name }}</h3>
           <p>{{ user.email }}</p>
@@ -1848,6 +1847,8 @@ class UserManagerComponent implements OnInit {
     form: { id: '', name: '', email: '' },
   });
 
+  readonly users = this.userTree.$.users;
+
   constructor(private userService: UserService) {}
 
   ngOnInit() {
@@ -2032,9 +2033,9 @@ tree.destroy(); // Cleanup resources
 
 // Entity helpers (when using entityMap + entities)
 // tree.$.users.addOne(user);    // Add single entity
-// tree.$.users.byId(id)();      // O(1) lookup by ID
-// tree.$.users.all;         // Get all as array
-// tree.$.users.selectBy(pred);  // Filtered signal
+// tree.$.users.byId(id)?.();      // O(1) lookup by ID
+// tree.$.users.all();             // Get all as array
+// tree.$.users.where(pred)();     // Filtered array
 ```
 
 ## Extending with enhancers
@@ -2054,8 +2055,8 @@ All enhancers are included in `@signaltree/core`:
 
 - **batching()** - Batch multiple updates for better performance
 - **memoization()** - Intelligent caching & performance optimization
-- **entities()** - Advanced entity management & CRUD operations
-- **devTools()** - Redux DevTools integration for debugging
+- **entities()** - Legacy helper (not required when using `entityMap()` in v7)
+- **devTools()** - Auto-connect, path actions, and time-travel dispatch
 - **withTimeTravel()** - Undo/redo functionality & state history
 - **serialization()** - State persistence & SSR support
 - **createDevTree()** - Pre-configured development setup
@@ -2210,11 +2211,11 @@ All enhancers are now consolidated in the core package. The following features a
 
 ### Advanced Features
 
-- **entities()** (+0.97KB gzipped) - Enhanced CRUD operations & entity management
+- **entities()** (+0.97KB gzipped) - Legacy helper (not required when using `entityMap()` in v7)
 
 ### Development Tools
 
-- **devTools()** (+2.49KB gzipped) - Development tools & Redux DevTools integration
+- **devTools()** (+2.49KB gzipped) - Auto-connect, path actions, and time-travel dispatch
 - **withTimeTravel()** (+1.75KB gzipped) - Undo/redo functionality & state history
 
 ### Integration & Convenience

package/dist/enhancers/devtools/devtools.js

@@ -1,5 +1,7 @@
-import { signal } from '@angular/core';
+import { effect, signal } from '@angular/core';
 import { copyTreeProperties } from '../utils/copy-tree-properties.js';
+import { getPathNotifier } from '../../lib/path-notifier.js';
+import { snapshotState, applyState } from '../../lib/utils.js';
 
 function createActivityTracker() {
   const modules = new Map();
@@ -130,16 +132,150 @@ function createModularMetrics() {
     }
   };
 }
+function toArray(value) {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function matchesPattern(pattern, path) {
+  if (pattern === '**') return true;
+  if (pattern === path) return true;
+  if (pattern.endsWith('.*')) {
+    const prefix = pattern.slice(0, -2);
+    return path.startsWith(prefix + '.');
+  }
+  return false;
+}
+function defaultFormatPath(path) {
+  const segments = path.split('.');
+  let formatted = '';
+  for (const segment of segments) {
+    if (!segment) continue;
+    if (/^\d+$/.test(segment)) {
+      formatted += `[${segment}]`;
+    } else {
+      formatted += formatted ? `.${segment}` : segment;
+    }
+  }
+  return formatted || path;
+}
+function computeChangedPaths(prev, next, maxDepth, maxArrayLength, path = '', depth = 0, output = []) {
+  if (prev === next) return output;
+  if (depth >= maxDepth) {
+    if (path) output.push(path);
+    return output;
+  }
+  if (prev === null || next === null || prev === undefined || next === undefined) {
+    if (path) output.push(path);
+    return output;
+  }
+  const prevType = typeof prev;
+  const nextType = typeof next;
+  if (prevType !== 'object' || nextType !== 'object') {
+    if (path) output.push(path);
+    return output;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    if (prev.length !== next.length) {
+      if (path) output.push(path);
+      return output;
+    }
+    if (prev.length > maxArrayLength) {
+      if (path) output.push(path);
+      return output;
+    }
+    for (let i = 0; i < prev.length; i += 1) {
+      computeChangedPaths(prev[i], next[i], maxDepth, maxArrayLength, path ? `${path}.${i}` : `${i}`, depth + 1, output);
+    }
+    return output;
+  }
+  const prevObj = prev;
+  const nextObj = next;
+  const keys = new Set([...Object.keys(prevObj), ...Object.keys(nextObj)]);
+  if (keys.size === 0) {
+    if (path) output.push(path);
+    return output;
+  }
+  for (const key of keys) {
+    computeChangedPaths(prevObj[key], nextObj[key], maxDepth, maxArrayLength, path ? `${path}.${key}` : key, depth + 1, output);
+  }
+  return output;
+}
+function sanitizeState(value, options, depth = 0, seen = new WeakSet()) {
+  const {
+    maxDepth,
+    maxArrayLength,
+    maxStringLength
+  } = options;
+  if (value === null || value === undefined) return value;
+  if (typeof value === 'string') {
+    if (value.length > maxStringLength) {
+      return `${value.slice(0, maxStringLength)}…`;
+    }
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') return value;
+  if (typeof value === 'bigint') return `${value.toString()}n`;
+  if (typeof value === 'symbol') return String(value);
+  if (typeof value === 'function') return undefined;
+  if (depth >= maxDepth) return '[MaxDepth]';
+  if (value instanceof Date) return value.toISOString();
+  if (value instanceof RegExp) return value.toString();
+  if (value instanceof Error) {
+    return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack
+    };
+  }
+  if (typeof value === 'object') {
+    const obj = value;
+    if (seen.has(obj)) return '[Circular]';
+    seen.add(obj);
+    if (value instanceof Map) {
+      const entries = Array.from(value.entries()).slice(0, maxArrayLength);
+      return entries.map(([k, v]) => [sanitizeState(k, options, depth + 1, seen), sanitizeState(v, options, depth + 1, seen)]);
+    }
+    if (value instanceof Set) {
+      const values = Array.from(value.values()).slice(0, maxArrayLength);
+      return values.map(v => sanitizeState(v, options, depth + 1, seen));
+    }
+    if (Array.isArray(value)) {
+      const list = value.slice(0, maxArrayLength);
+      return list.map(item => sanitizeState(item, options, depth + 1, seen));
+    }
+    const result = {};
+    for (const [key, val] of Object.entries(obj)) {
+      if (typeof val === 'function') continue;
+      result[key] = sanitizeState(val, options, depth + 1, seen);
+    }
+    return result;
+  }
+  return value;
+}
 function devTools(config = {}) {
   const {
     enabled = true,
     treeName = 'SignalTree',
     name,
     enableBrowserDevTools = true,
+    enableTimeTravel = true,
     enableLogging = true,
-    performanceThreshold = 16
+    performanceThreshold = 16,
+    includePaths,
+    excludePaths,
+    formatPath,
+    rateLimitMs,
+    maxSendsPerSecond,
+    maxDepth = 10,
+    maxArrayLength = 50,
+    maxStringLength = 2000,
+    serialize
   } = config;
   const displayName = name ?? treeName;
+  const pathInclude = toArray(includePaths);
+  const pathExclude = toArray(excludePaths);
+  const sendRateLimitMs = maxSendsPerSecond && maxSendsPerSecond > 0 ? Math.ceil(1000 / maxSendsPerSecond) : rateLimitMs ?? 0;
+  const formatPathFn = formatPath ?? defaultFormatPath;
   return tree => {
     if (!enabled) {
       const noopMethods = {
@@ -152,9 +288,228 @@ function devTools(config = {}) {
     const logger = enableLogging ? createCompositionLogger() : createNoopLogger();
     const metrics = createModularMetrics();
     const compositionHistory = [];
+    const compositionChain = [];
+    const trackComposition = modules => {
+      compositionHistory.push({
+        timestamp: new Date(),
+        chain: [...modules]
+      });
+      metrics.updateMetrics({
+        compositionChain: modules
+      });
+      logger.logComposition(modules, 'with');
+    };
     const activeProfiles = new Map();
+    let browserDevToolsConnection = null;
     let browserDevTools = null;
+    let isConnected = false;
+    let isApplyingExternalState = false;
+    let unsubscribeDevTools = null;
+    let unsubscribeNotifier = null;
+    let unsubscribeFlush = null;
+    let pendingPaths = [];
+    let effectRef = null;
+    let effectPrimed = false;
+    let sendScheduled = false;
+    let pendingAction = null;
+    let pendingExplicitAction = false;
+    let pendingSource;
+    let pendingDuration;
+    let lastSnapshot = undefined;
+    let lastSendAt = 0;
+    let sendTimer = null;
+    const isPathAllowed = path => {
+      if (pathInclude.length > 0) {
+        const matched = pathInclude.some(pattern => matchesPattern(pattern, path));
+        if (!matched) return false;
+      }
+      if (pathExclude.length > 0) {
+        const blocked = pathExclude.some(pattern => matchesPattern(pattern, path));
+        if (blocked) return false;
+      }
+      return true;
+    };
+    const readSnapshot = () => {
+      try {
+        if ('$' in tree) {
+          return snapshotState(tree.$);
+        }
+      } catch {}
+      return originalTreeCall();
+    };
+    const buildSerializedState = rawState => {
+      if (serialize) {
+        try {
+          return serialize(rawState);
+        } catch {}
+      }
+      return sanitizeState(rawState, {
+        maxDepth,
+        maxArrayLength,
+        maxStringLength
+      });
+    };
+    const buildAction = (type, payload, meta) => ({
+      type,
+      ...(payload !== undefined && {
+        payload
+      }),
+      ...(meta && {
+        meta: meta
+      })
+    });
+    const flushSend = () => {
+      sendScheduled = false;
+      if (!browserDevTools || isApplyingExternalState) return;
+      const rawSnapshot = readSnapshot();
+      const currentSnapshot = rawSnapshot ?? {};
+      const sanitized = buildSerializedState(currentSnapshot);
+      const defaultPaths = lastSnapshot === undefined ? [] : computeChangedPaths(lastSnapshot, currentSnapshot, maxDepth, maxArrayLength);
+      const mergedPaths = Array.from(new Set([...pendingPaths, ...defaultPaths.filter(path => path && isPathAllowed(path))]));
+      const formattedPaths = mergedPaths.map(path => formatPathFn(path));
+      if (pathInclude.length > 0 && formattedPaths.length === 0 && !pendingExplicitAction) {
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        pendingPaths = [];
+        lastSnapshot = currentSnapshot;
+        return;
+      }
+      const effectiveAction = pendingExplicitAction ? pendingAction : formattedPaths.length === 1 ? buildAction(`SignalTree/${formattedPaths[0]}`, formattedPaths[0]) : formattedPaths.length > 1 ? buildAction('SignalTree/update', formattedPaths) : buildAction('SignalTree/update');
+      const actionMeta = {
+        timestamp: Date.now(),
+        ...(pendingSource && {
+          source: pendingSource
+        }),
+        ...(pendingDuration !== undefined && {
+          duration: pendingDuration,
+          slow: pendingDuration > performanceThreshold
+        }),
+        ...(formattedPaths.length > 0 && {
+          paths: formattedPaths
+        })
+      };
+      const actionToSend = buildAction(effectiveAction?.type ?? 'SignalTree/update', effectiveAction?.payload, actionMeta);
+      try {
+        browserDevTools.send(actionToSend, sanitized);
+      } catch {} finally {
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        pendingPaths = [];
+        lastSnapshot = currentSnapshot;
+        lastSendAt = Date.now();
+      }
+    };
+    const scheduleSend = (action, meta) => {
+      if (isApplyingExternalState) return;
+      if (action !== undefined) {
+        pendingAction = action;
+        pendingExplicitAction = true;
+      }
+      if (meta?.source) {
+        if (!pendingSource) {
+          pendingSource = meta.source;
+        } else if (pendingSource !== meta.source) {
+          pendingSource = 'mixed';
+        }
+      }
+      if (meta?.duration !== undefined) {
+        pendingDuration = pendingDuration === undefined ? meta.duration : Math.max(pendingDuration, meta.duration);
+      }
+      if (!browserDevTools) return;
+      if (sendScheduled) return;
+      sendScheduled = true;
+      queueMicrotask(() => {
+        if (!browserDevTools) {
+          sendScheduled = false;
+          return;
+        }
+        const now = Date.now();
+        const waitMs = Math.max(0, sendRateLimitMs - (now - lastSendAt));
+        if (waitMs > 0) {
+          if (sendTimer) return;
+          sendTimer = setTimeout(() => {
+            sendTimer = null;
+            flushSend();
+          }, waitMs);
+          return;
+        }
+        flushSend();
+      });
+    };
+    const parseDevToolsState = state => {
+      if (typeof state === 'string') {
+        try {
+          return JSON.parse(state);
+        } catch {
+          return undefined;
+        }
+      }
+      return state;
+    };
+    const applyExternalState = state => {
+      if (state === undefined || state === null) return;
+      isApplyingExternalState = true;
+      try {
+        if ('$' in tree) {
+          applyState(tree.$, state);
+        } else {
+          originalTreeCall(state);
+        }
+      } finally {
+        isApplyingExternalState = false;
+        lastSnapshot = readSnapshot();
+        pendingPaths = [];
+      }
+    };
+    const handleDevToolsMessage = message => {
+      if (!enableTimeTravel) return;
+      if (!message || typeof message !== 'object') return;
+      const msg = message;
+      if (msg.type !== 'DISPATCH' || !msg.payload?.type) return;
+      const actionType = msg.payload.type;
+      if (actionType === 'JUMP_TO_STATE' || actionType === 'JUMP_TO_ACTION') {
+        const nextState = parseDevToolsState(msg.state);
+        applyExternalState(nextState);
+        return;
+      }
+      if (actionType === 'ROLLBACK') {
+        const nextState = parseDevToolsState(msg.state);
+        applyExternalState(nextState);
+        if (browserDevTools) {
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+        }
+        return;
+      }
+      if (actionType === 'COMMIT') {
+        if (browserDevTools) {
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+        }
+        return;
+      }
+      if (actionType === 'IMPORT_STATE') {
+        const lifted = msg.payload.nextLiftedState;
+        const computedStates = lifted?.computedStates ?? [];
+        const index = lifted?.currentStateIndex ?? computedStates.length - 1;
+        const entry = computedStates[index];
+        const nextState = parseDevToolsState(entry?.state);
+        applyExternalState(nextState);
+        if (browserDevTools) {
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+        }
+      }
+    };
     const initBrowserDevTools = () => {
+      if (isConnected) return;
       if (!enableBrowserDevTools || typeof window === 'undefined' || !('__REDUX_DEVTOOLS_EXTENSION__' in window)) {
         return;
       }
@@ -168,10 +523,26 @@ function devTools(config = {}) {
             skip: true
           }
         });
+        browserDevToolsConnection = connection;
         browserDevTools = {
-          send: connection.send
+          send: connection.send,
+          subscribe: connection.subscribe
         };
-        browserDevTools.send('@@INIT', tree());
+        if (browserDevTools.subscribe && !unsubscribeDevTools) {
+          const maybeUnsubscribe = browserDevTools.subscribe(handleDevToolsMessage);
+          if (typeof maybeUnsubscribe === 'function') {
+            unsubscribeDevTools = maybeUnsubscribe;
+          } else {
+            unsubscribeDevTools = () => {
+              browserDevTools?.subscribe?.(() => void 0);
+            };
+          }
+        }
+        const rawSnapshot = readSnapshot();
+        const sanitized = buildSerializedState(rawSnapshot);
+        browserDevTools.send('@@INIT', sanitized);
+        lastSnapshot = rawSnapshot;
+        isConnected = true;
         console.log(`🔗 Connected to Redux DevTools as "${displayName}"`);
       } catch (e) {
         console.warn('[SignalTree] Failed to connect to Redux DevTools:', e);
@@ -193,13 +564,16 @@ function devTools(config = {}) {
         }
       }
       const duration = performance.now() - startTime;
-      const newState = originalTreeCall();
+      originalTreeCall();
       metrics.trackModuleUpdate('core', duration);
       if (duration > performanceThreshold) {
         logger.logPerformanceWarning('core', 'update', duration, performanceThreshold);
       }
       if (browserDevTools) {
-        browserDevTools.send('UPDATE', newState);
+        scheduleSend(undefined, {
+          source: 'tree.update',
+          duration
+        });
       }
       return result;
     };
@@ -210,6 +584,15 @@ function devTools(config = {}) {
         if (typeof enhancer !== 'function') {
           throw new Error('Enhancer must be a function');
         }
+        const enhancerName = enhancer.name || 'anonymousEnhancer';
+        compositionChain.push(enhancerName);
+        trackComposition([...compositionChain]);
+        scheduleSend(buildAction('SignalTree/with', {
+          enhancer: enhancerName,
+          chain: [...compositionChain]
+        }), {
+          source: 'composition'
+        });
         return enhancer(enhancedTree);
       },
       writable: false,
@@ -234,16 +617,7 @@ function devTools(config = {}) {
       activityTracker,
       logger,
       metrics: metrics.signal,
-      trackComposition: modules => {
-        compositionHistory.push({
-          timestamp: new Date(),
-          chain: [...modules]
-        });
-        metrics.updateMetrics({
-          compositionChain: modules
-        });
-        logger.logComposition(modules, 'with');
-      },
+      trackComposition,
       startModuleProfiling: module => {
         const profileId = `${module}_${Date.now()}`;
         activeProfiles.set(profileId, {
@@ -262,8 +636,14 @@ function devTools(config = {}) {
         }
       },
       connectDevTools: name => {
+        if (!browserDevTools || !isConnected) {
+          initBrowserDevTools();
+        }
         if (browserDevTools) {
-          browserDevTools.send('@@INIT', originalTreeCall());
+          const rawSnapshot = readSnapshot();
+          const sanitized = buildSerializedState(rawSnapshot);
+          browserDevTools.send('@@INIT', sanitized);
+          lastSnapshot = rawSnapshot;
           console.log(`🔗 Connected to Redux DevTools as "${name}"`);
         }
       },
@@ -279,10 +659,73 @@ function devTools(config = {}) {
         initBrowserDevTools();
       },
       disconnectDevTools() {
+        try {
+          unsubscribeDevTools?.();
+        } catch {}
+        try {
+          browserDevToolsConnection?.unsubscribe?.();
+        } catch {}
+        try {
+          browserDevToolsConnection?.disconnect?.();
+        } catch {}
         browserDevTools = null;
+        browserDevToolsConnection = null;
+        isConnected = false;
+        if (unsubscribeNotifier) {
+          unsubscribeNotifier();
+          unsubscribeNotifier = null;
+        }
+        if (unsubscribeFlush) {
+          unsubscribeFlush();
+          unsubscribeFlush = null;
+        }
+        unsubscribeDevTools = null;
+        if (effectRef) {
+          effectRef.destroy();
+          effectRef = null;
+        }
+        if (sendTimer) {
+          clearTimeout(sendTimer);
+          sendTimer = null;
+        }
+        pendingPaths = [];
+        sendScheduled = false;
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        lastSnapshot = undefined;
       }
     };
     enhancedTree['__devTools'] = devToolsInterface;
+    try {
+      initBrowserDevTools();
+      const notifier = getPathNotifier();
+      unsubscribeNotifier = notifier.subscribe('**', (_value, _prev, path) => {
+        if (!isPathAllowed(path)) return;
+        pendingPaths.push(path);
+      });
+      unsubscribeFlush = notifier.onFlush(() => {
+        if (!browserDevTools) {
+          pendingPaths = [];
+          return;
+        }
+        if (pendingPaths.length === 0) return;
+        scheduleSend(undefined, {
+          source: 'path-notifier'
+        });
+      });
+      effectRef = effect(() => {
+        void originalTreeCall();
+        if (!effectPrimed) {
+          effectPrimed = true;
+          return;
+        }
+        scheduleSend(undefined, {
+          source: 'signal'
+        });
+      });
+    } catch {}
     return Object.assign(enhancedTree, methods);
   };
 }

package/dist/lib/entity-signal.js

@@ -20,13 +20,11 @@ function createEntitySignal(config, pathNotifier, basePath) {
     mapSignal.set(map);
   }
   function createEntityNode(id, entity) {
-    const node = () => storage.get(id);
+    const node = () => mapSignal().get(id);
     for (const key of Object.keys(entity)) {
       Object.defineProperty(node, key, {
         get: () => {
-          const current = storage.get(id);
-          const value = current?.[key];
-          return () => value;
+          return () => mapSignal().get(id)?.[key];
         },
         enumerable: true,
         configurable: true
@@ -46,7 +44,8 @@ function createEntitySignal(config, pathNotifier, basePath) {
   const findCache = new WeakMap();
   const api = {
     byId(id) {
-      const entity = storage.get(id);
+      const map = mapSignal();
+      const entity = map.get(id);
       if (!entity) return undefined;
       return getOrCreateNode(id, entity);
     },

package/dist/lib/signal-tree.js

@@ -359,9 +359,6 @@ function createBuilder(baseTree) {
           } catch {}
         }
       }
-      for (const factory of derivedQueue) {
-        newBuilder.derived(factory);
-      }
       return newBuilder;
     },
     enumerable: false,

package/dist/lib/utils.js

@@ -180,6 +180,8 @@ function unwrap(node) {
         } else {
           result[key] = unwrappedValue;
         }
+      } else if (typeof value === 'function') {
+        continue;
       } else if (typeof value === 'object' && value !== null && !Array.isArray(value) && !isBuiltInObject(value)) {
         result[key] = unwrap(value);
       } else {
@@ -212,6 +214,9 @@ function unwrap(node) {
       if (typeof v === 'function') continue;
     }
     const value = node[key];
+    if (typeof value === 'function' && !isNodeAccessor(value) && !isSignal(value)) {
+      continue;
+    }
     if (isNodeAccessor(value)) {
       const unwrappedValue = value();
       if (typeof unwrappedValue === 'object' && unwrappedValue !== null && !Array.isArray(unwrappedValue) && !isBuiltInObject(unwrappedValue)) {
@@ -235,6 +240,9 @@ function unwrap(node) {
   const symbols = Object.getOwnPropertySymbols(node);
   for (const sym of symbols) {
     const value = node[sym];
+    if (typeof value === 'function' && !isNodeAccessor(value) && !isSignal(value)) {
+      continue;
+    }
     if (isNodeAccessor(value)) {
       const unwrappedValue = value();
       if (typeof unwrappedValue === 'object' && unwrappedValue !== null && !Array.isArray(unwrappedValue) && !isBuiltInObject(unwrappedValue)) {
@@ -260,5 +268,54 @@ function unwrap(node) {
 function snapshotState(state) {
   return unwrap(state);
 }
+function applyState(stateNode, snapshot) {
+  if (snapshot === null || snapshot === undefined) return;
+  if (typeof snapshot !== 'object') return;
+  if (stateNode && typeof stateNode === 'object' && typeof stateNode.setAll === 'function' && snapshot && typeof snapshot === 'object' && Array.isArray(snapshot.all)) {
+    try {
+      stateNode.setAll(snapshot.all);
+      return;
+    } catch {}
+  }
+  for (const key of Object.keys(snapshot)) {
+    const val = snapshot[key];
+    const target = stateNode[key];
+    if (isNodeAccessor(target)) {
+      if (val && typeof val === 'object') {
+        try {
+          applyState(target, val);
+        } catch {
+          try {
+            target(val);
+          } catch {}
+        }
+      } else {
+        try {
+          target(val);
+        } catch {}
+      }
+    } else if (isSignal(target)) {
+      try {
+        target.set?.(val);
+      } catch {
+        try {
+          target(val);
+        } catch {}
+      }
+    } else if (target && typeof target === 'object' && val && typeof val === 'object' && !Array.isArray(target) && !Array.isArray(val)) {
+      try {
+        applyState(target, val);
+      } catch {
+        try {
+          stateNode[key] = val;
+        } catch {}
+      }
+    } else {
+      try {
+        stateNode[key] = val;
+      } catch {}
+    }
+  }
+}
 
-export { composeEnhancers, createLazySignalTree, isAnySignal, isBuiltInObject, isEntityMapMarker, isNodeAccessor, snapshotState, toWritableSignal, unwrap };
+export { applyState, composeEnhancers, createLazySignalTree, isAnySignal, isBuiltInObject, isEntityMapMarker, isNodeAccessor, snapshotState, toWritableSignal, unwrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signaltree/core",
-  "version": "7.3.0",
+  "version": "7.6.1",
   "description": "Reactive JSON for Angular. JSON branches, reactive leaves. No actions. No reducers. No selectors.",
   "license": "MIT",
   "type": "module",

package/src/lib/types.d.ts

@@ -246,11 +246,21 @@ export interface DevToolsConfig {
     enableBrowserDevTools?: boolean;
     enableLogging?: boolean;
     performanceThreshold?: number;
+    enableTimeTravel?: boolean;
     name?: string;
     treeName?: string;
     enabled?: boolean;
     logActions?: boolean;
     maxAge?: number;
+    rateLimitMs?: number;
+    maxSendsPerSecond?: number;
+    includePaths?: string[];
+    excludePaths?: string[];
+    formatPath?: (path: string) => string;
+    maxDepth?: number;
+    maxArrayLength?: number;
+    maxStringLength?: number;
+    serialize?: (state: unknown) => unknown;
     features?: {
         jump?: boolean;
         skip?: boolean;