mobx-mantle 0.3.7 → 0.7.0

package/dist/index.js

@@ -1,21 +1,31 @@
-// src/mantle.tsx
-import { useRef, useEffect, useLayoutEffect, forwardRef as reactForwardRef, memo } from "react";
-import { makeObservable as makeObservable2, observable as observable4, computed as computed4, action as action4, runInAction, reaction as reaction2 } from "mobx";
-import { useObserver } from "mobx-react-lite";
+import {
+  toValue
+} from "./chunk-LP5TAGSI.js";
 
-// src/behavior.ts
-import { makeObservable, observable, computed, action, reaction } from "mobx";
+// src/services.tsx
+import React from "react";
 
 // src/config.ts
+import { configure as mobxConfigure } from "mobx";
 var globalConfig = {
-  autoObservable: true
+  autoObservable: true,
+  cacheAnnotations: true,
+  manageMobxActions: false
 };
+var actionPolicyApplied = false;
+function applyMobxActionPolicy() {
+  if (actionPolicyApplied) return;
+  actionPolicyApplied = true;
+  if (globalConfig.manageMobxActions === true) {
+    mobxConfigure({ enforceActions: "never" });
+  }
+}
 function reportError(error, context) {
   if (globalConfig.onError) {
     globalConfig.onError(error, context);
   } else {
     console.error(
-      `[mobx-mantle] Error in ${context.isBehavior ? "behavior" : "view"} ${context.name}.${context.phase}():`,
+      `[mobx-mantle] Error in ${context.isBehavior ? "behavior" : "component"} ${context.name}.${context.phase}():`,
       error
     );
   }
@@ -24,18 +34,355 @@ function configure(config) {
   Object.assign(globalConfig, config);
 }
 
+// src/services.tsx
+import { jsx } from "react/jsx-runtime";
+function createServiceToken(description) {
+  return Symbol(description);
+}
+var ServiceContext = React.createContext(void 0);
+function ServiceProvider({ resolve, children }) {
+  return /* @__PURE__ */ jsx(ServiceContext.Provider, { value: resolve, children });
+}
+var constructingScope;
+var scopes = /* @__PURE__ */ new WeakMap();
+function runWithScope(scope, construct) {
+  const previous = constructingScope;
+  constructingScope = scope;
+  try {
+    return construct();
+  } finally {
+    constructingScope = previous;
+  }
+}
+function withInjectionScope(resolve, construct) {
+  return runWithScope({ resolve: resolve ?? globalConfig.resolveService, values: /* @__PURE__ */ new WeakSet() }, construct);
+}
+function captureServiceScope(owner) {
+  scopes.set(owner, constructingScope ?? { resolve: globalConfig.resolveService, values: /* @__PURE__ */ new WeakSet() });
+}
+function getServiceResolver(owner) {
+  return scopes.get(owner)?.resolve;
+}
+function resolveService(owner, token) {
+  return resolveInScope(scopes.get(owner), token);
+}
+function inject(token) {
+  if (!constructingScope) {
+    throw new Error("[mobx-mantle] inject() requires an active construction scope. Use this.inject() in later methods, or withInjectionScope() outside React.");
+  }
+  return resolveInScope(constructingScope, token);
+}
+function resolveInScope(scope, token) {
+  if (!scope?.resolve) throw new Error("[mobx-mantle] Service injection requires configure({ resolveService }), a ServiceProvider, or withInjectionScope() during construction.");
+  const value = scope.resolve(token);
+  if ((typeof value !== "object" || value === null) && typeof value !== "function") {
+    throw new Error("[mobx-mantle] Services must be objects or functions; wrap primitive configuration in an object.");
+  }
+  scope.values.add(value);
+  return value;
+}
+function isServiceValue(owner, value) {
+  return scopes.get(owner)?.values.has(value) ?? false;
+}
+function withOwnerServiceScope(owner, construct) {
+  const scope = scopes.get(owner);
+  if (!scope) throw new Error("[mobx-mantle] Missing owner service scope.");
+  return runWithScope(scope, construct);
+}
+
+// src/model-scope.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ModelContext = React2.createContext(void 0);
+function ModelProvider({ models, children }) {
+  const [snapshot] = React2.useState(() => new Map(Array.from(models, ([type, replacement]) => [type, { ...replacement }])));
+  return /* @__PURE__ */ jsx2(ModelContext.Provider, { value: snapshot, children });
+}
+var identities = /* @__PURE__ */ new WeakMap();
+function setModelIdentity(model, type) {
+  identities.set(model, type);
+}
+function isModel(model, type) {
+  const logical = identities.get(model);
+  return model instanceof type || logical === type || !!logical && logical.prototype instanceof type;
+}
+
+// src/mantle.tsx
+import React4, { useRef as useRef2, useEffect as useEffect2, useContext, forwardRef as reactForwardRef, memo as memo2 } from "react";
+import { makeObservable as makeObservable2, observable as observable4, computed as computed4, runInAction as runInAction3, reaction as reaction2, autorun as autorun2, createAtom, isObservableProp, _getGlobalState as _getGlobalState2 } from "mobx";
+
+// src/observer.ts
+import { memo, useRef, useSyncExternalStore, useEffect, useLayoutEffect } from "react";
+import { Reaction } from "mobx";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var uncommittedReactionRegistry = typeof FinalizationRegistry !== "undefined" ? new FinalizationRegistry((adm) => {
+  adm.reaction?.dispose();
+  adm.reaction = null;
+}) : void 0;
+if (process.env.NODE_ENV !== "production" && !uncommittedReactionRegistry) {
+  console.warn(
+    "[mobx-mantle] FinalizationRegistry is not available in this environment. Reactions created for renders that React discards cannot be cleaned up, which can leak under Suspense and concurrent rendering."
+  );
+}
+var isServer = typeof window === "undefined";
+var trackedComponents = /* @__PURE__ */ new WeakSet();
+function createReaction(adm) {
+  adm.reaction = new Reaction(`mantle-observer(${adm.name})`, () => {
+    adm.stateVersion = /* @__PURE__ */ Symbol();
+    adm.onStoreChange?.();
+  });
+  if (adm.holder) {
+    adm.holder.current = adm.reaction;
+  }
+}
+function useMantleObserver(render, name, holder) {
+  if (isServer) {
+    return render();
+  }
+  const admRef = useRef(null);
+  if (!admRef.current) {
+    const adm2 = {
+      reaction: null,
+      onStoreChange: null,
+      stateVersion: /* @__PURE__ */ Symbol(),
+      name,
+      holder,
+      subscribe(onStoreChange) {
+        uncommittedReactionRegistry?.unregister(adm2);
+        adm2.onStoreChange = onStoreChange;
+        if (!adm2.reaction) {
+          createReaction(adm2);
+          adm2.stateVersion = /* @__PURE__ */ Symbol();
+          onStoreChange();
+        }
+        return () => {
+          adm2.onStoreChange = null;
+          adm2.reaction?.dispose();
+          adm2.reaction = null;
+          if (adm2.holder) {
+            adm2.holder.current = null;
+          }
+        };
+      },
+      getSnapshot() {
+        return adm2.stateVersion;
+      }
+    };
+    admRef.current = adm2;
+  }
+  const adm = admRef.current;
+  adm.holder = holder;
+  if (!adm.reaction) {
+    createReaction(adm);
+    uncommittedReactionRegistry?.register(admRef, adm, adm);
+  }
+  useSyncExternalStore(adm.subscribe, adm.getSnapshot, adm.getSnapshot);
+  let result;
+  let didThrow = false;
+  let thrown;
+  adm.reaction.track(() => {
+    try {
+      result = render();
+    } catch (e) {
+      didThrow = true;
+      thrown = e;
+    }
+  });
+  if (didThrow) {
+    throw thrown;
+  }
+  return result;
+}
+function observer(fc) {
+  const name = fc.displayName || fc.name || "observed";
+  const Observed = (props) => useMantleObserver(() => fc(props), name);
+  Observed.displayName = `observer(${name})`;
+  const Memoized = memo(Observed);
+  trackedComponents.add(Memoized);
+  return Memoized;
+}
+
+// src/decorators.ts
+import * as mobx from "mobx";
+var ANNOTATIONS = /* @__PURE__ */ Symbol("mantle:annotations");
+var legacy = /* @__PURE__ */ new WeakMap();
+function annotation(value, kind) {
+  return function(_target, key, descriptor) {
+    let map;
+    let name;
+    if (typeof key === "object") {
+      if (key.static || key.private || key.kind !== kind) {
+        throw new Error(`[mobx-mantle] This decorator requires a public instance ${kind}. Use an ordinary field, not an auto-accessor, for @observable.`);
+      }
+      if (!key.metadata) throw new Error("[mobx-mantle] TC39 decorators require Symbol.metadata. Load its polyfill before decorated classes.");
+      if (!Object.prototype.hasOwnProperty.call(key.metadata, ANNOTATIONS)) key.metadata[ANNOTATIONS] = /* @__PURE__ */ Object.create(null);
+      map = key.metadata[ANNOTATIONS];
+      name = key.name;
+    } else {
+      if (typeof _target === "function" || kind === "method" && typeof descriptor?.value !== "function" || kind === "getter" && !descriptor?.get || kind === "field" && descriptor) {
+        throw new Error(`[mobx-mantle] This decorator requires a public instance ${kind}.`);
+      }
+      map = legacy.get(_target) ?? /* @__PURE__ */ Object.create(null);
+      legacy.set(_target, map);
+      name = key;
+    }
+    map[name] = value;
+  };
+}
+var observable2 = Object.assign(annotation(mobx.observable, "field"), {
+  ref: annotation(mobx.observable.ref, "field"),
+  shallow: annotation(mobx.observable.shallow, "field"),
+  deep: annotation(mobx.observable.deep, "field"),
+  struct: annotation(mobx.observable.struct, "field")
+});
+var actionMethod = annotation(mobx.action.bound, "method");
+var actionField = annotation(mobx.action, "field");
+var action2 = function(target, key, descriptor) {
+  const isField = typeof key === "object" ? key.kind === "field" : !descriptor;
+  return (isField ? actionField : actionMethod)(target, key, descriptor);
+};
+var computed2 = annotation(mobx.computed, "getter");
+function getAnnotations(instance) {
+  const chain = [];
+  for (let proto = Object.getPrototypeOf(instance); proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) chain.unshift(proto);
+  const result = /* @__PURE__ */ Object.create(null);
+  for (const proto of chain) {
+    const constructor = proto.constructor;
+    const symbol = Symbol.metadata;
+    const metadata = symbol && Object.prototype.hasOwnProperty.call(constructor, symbol) ? constructor[symbol] : void 0;
+    const modern = metadata && Object.prototype.hasOwnProperty.call(metadata, ANNOTATIONS) ? metadata[ANNOTATIONS] : void 0;
+    for (const own of [legacy.get(proto), modern]) {
+      if (!own) continue;
+      for (const key of Reflect.ownKeys(own)) {
+        if (key in result && result[key] !== own[key]) throw new Error(`[mobx-mantle] Cannot change the inherited annotation of ${String(key)}.`);
+        result[key] = own[key];
+      }
+    }
+  }
+  for (const key of Reflect.ownKeys(result)) {
+    const own = Object.getOwnPropertyDescriptor(instance, key);
+    if (own && "value" in own && isServiceValue(instance, own.value)) throw new Error(`[mobx-mantle] Leave service field ${String(key)} undecorated; its resolver owns observability.`);
+  }
+  return Reflect.ownKeys(result).length ? result : void 0;
+}
+
+// src/behavior.ts
+import { makeObservable, observable as observable3, computed as computed3, reaction, autorun, intercept, runInAction as runInAction2 } from "mobx";
+
+// src/internals.ts
+import { _getGlobalState, runInAction } from "mobx";
+function smartBind(fn, context) {
+  return function(...args) {
+    const globalState = _getGlobalState();
+    const isInTrackingContext = globalState.trackingDerivation !== null;
+    if (isInTrackingContext) {
+      return fn.apply(context, args);
+    }
+    return runInAction(() => fn.apply(context, args));
+  };
+}
+if (process.env.NODE_ENV !== "production") {
+  const globalState = _getGlobalState();
+  if (!globalState || !("trackingDerivation" in globalState)) {
+    console.warn(
+      "[mobx-mantle] MobX internal state no longer exposes trackingDerivation. smartBind cannot detect tracking contexts and props reads cannot skip self-notification, so method calls may not batch correctly and prop changes may double-render. Check mobx version compatibility."
+    );
+  }
+}
+function toWatchExpression(source, fireImmediately, ownerName) {
+  if (typeof source === "function") {
+    return source;
+  }
+  if (process.env.NODE_ENV !== "production" && !fireImmediately) {
+    console.warn(
+      `[mobx-mantle] ${ownerName}.watch() received a plain value, which can never change \u2014 the callback will never fire. Pass a getter (() => expr) to watch a live source, or add { fireImmediately: true } if a single immediate call is intended.`
+    );
+  }
+  return () => source;
+}
+function registerReactive(host, create) {
+  if (host._mounted) {
+    return create();
+  }
+  const spec = { create, stopped: false, dispose: null };
+  host._reactiveSpecs.push(spec);
+  return () => {
+    spec.stopped = true;
+    spec.dispose?.();
+  };
+}
+function activateSpecs(host) {
+  if (host._wasUnmounted) {
+    host._wasUnmounted = false;
+    for (const spec of host._reactiveSpecs) {
+      if (!spec.stopped) {
+        spec.dispose = spec.create();
+      }
+    }
+  } else if (!host._mounted) {
+    for (const spec of host._reactiveSpecs) {
+      if (!spec.stopped && spec.dispose === null) {
+        spec.dispose = spec.create();
+      }
+    }
+  }
+  host._mounted = true;
+}
+function collectProtoInfo(instance, stopProto, excludes, cache) {
+  const ctor = instance.constructor;
+  const useCache = globalConfig.cacheAnnotations !== false;
+  if (useCache) {
+    const cached = cache.get(ctor);
+    if (cached) return cached;
+  }
+  const info = { computedKeys: [], methodKeys: [] };
+  const seen = /* @__PURE__ */ new Set();
+  let proto = Object.getPrototypeOf(instance);
+  while (proto && proto !== stopProto && proto !== Object.prototype) {
+    const descriptors = Object.getOwnPropertyDescriptors(proto);
+    for (const [key, descriptor] of Object.entries(descriptors)) {
+      if (excludes.has(key) || seen.has(key)) continue;
+      seen.add(key);
+      if (descriptor.get) {
+        info.computedKeys.push(key);
+      } else if (typeof descriptor.value === "function") {
+        info.methodKeys.push(key);
+      }
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  if (useCache) cache.set(ctor, info);
+  return info;
+}
+
 // src/behavior.ts
-var BEHAVIOR_MARKER = /* @__PURE__ */ Symbol("behavior");
+var BEHAVIOR_MARKER = /* @__PURE__ */ Symbol.for("mobx-mantle.behavior");
 var BEHAVIOR_EXCLUDES = /* @__PURE__ */ new Set([
   "onCreate",
   "onLayoutMount",
   "onMount",
   "onUnmount",
+  "addCleanup",
+  "_addCleanup",
   "watch",
+  "effect",
+  "sync",
   "constructor",
+  "inject",
   "_watchDisposers",
-  "_disposeWatchers"
+  "_disposeWatchers",
+  "_reactiveSpecs",
+  "_behaviors",
+  "_pendingSyncs",
+  "_syncWriting",
+  "_mounted",
+  "_wasUnmounted"
 ]);
+var SyncMarker = class {
+  constructor(source) {
+    this.source = source;
+  }
+};
 function isRefLike(value) {
   if (value === null || typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
@@ -45,16 +392,72 @@ var Behavior = class {
   constructor() {
     /** @internal */
     this._watchDisposers = [];
+    /** @internal — pre-mount watch/effect registrations, materialized at mount */
+    this._reactiveSpecs = [];
+    /** @internal — child behaviors declared as fields, collected at construction */
+    this._behaviors = [];
+    /** @internal — true after the parent Component first mounts */
+    this._mounted = false;
+    /** @internal — set when effects clean up so StrictMode replay can resurrect pre-mount watchers */
+    this._wasUnmounted = false;
+    /** @internal — sync() markers awaiting the post-onCreate field scan; null once construction completes */
+    this._pendingSyncs = [];
+    /** @internal — true while the hidden sync effect writes a mirrored field (dev write-guard) */
+    this._syncWriting = false;
+    captureServiceScope(this);
+  }
+  inject(token) {
+    return resolveService(this, token);
+  }
+  /**
+   * Register a cleanup function to run automatically on unmount.
+   * Returns a function that can be called for early cleanup.
+   *
+   * Cleanups are one-shot: they are not re-created during React StrictMode's
+   * same-instance effect replay. Call this from onMount (which is replayed),
+   * or use effect() for a replay-safe setup/teardown pair.
+   */
+  addCleanup(cleanup) {
+    if (process.env.NODE_ENV !== "production" && !this._mounted) {
+      console.warn(
+        `[mobx-mantle] ${this.constructor.name}.addCleanup() called before mount. Cleanups are one-shot: they run when mount effects clean up and are not re-created during React StrictMode's same-instance effect replay. Acquire resources in onMount(), or use effect() for a replay-safe setup/teardown pair.`
+      );
+    }
+    return this._addCleanup(cleanup);
+  }
+  /** @internal — addCleanup without the pre-mount dev warning (used by watch/effect) */
+  _addCleanup(cleanup) {
+    let active = true;
+    const dispose = () => {
+      if (!active) return;
+      active = false;
+      try {
+        runInAction2(cleanup);
+      } finally {
+        const idx = this._watchDisposers.indexOf(dispose);
+        if (idx !== -1) this._watchDisposers.splice(idx, 1);
+      }
+    };
+    this._watchDisposers.push(dispose);
+    return dispose;
   }
   /**
    * Watch a reactive expression and run a callback when it changes.
-   * Automatically disposed on unmount.
-   * 
-   * @param expr - Reactive expression (getter) to watch
+   * Automatically disposed on unmount and re-created during React StrictMode's
+   * same-instance effect replay.
+   *
+   * Safe to call from onCreate: registration is recorded and comes alive
+   * when the parent commits (just before first paint), so the watcher
+   * tracks observable fields correctly and renders that React discards
+   * never leak reactions.
+   *
+   * @param source - Reactive expression (getter) to watch, or a MaybeGetter
+   *   argument passed through as-is. To watch a value that is itself a
+   *   function, wrap it: `watch(() => this.callback, …)`
    * @param callback - Called when the expression result changes
    * @param options - Optional configuration (delay, fireImmediately)
    * @returns Dispose function for early teardown
-   * 
+   *
    * @example
    * ```tsx
    * onCreate(url: string) {
@@ -63,36 +466,119 @@ var Behavior = class {
    * }
    * ```
    */
-  watch(expr, callback, options) {
-    const dispose = reaction(
-      expr,
-      (value, prevValue) => {
-        try {
-          callback(value, prevValue);
-        } catch (e) {
-          reportError(e, { phase: "watch", name: this.constructor.name, isBehavior: true });
+  watch(source, callback, options) {
+    const expr = toWatchExpression(source, options?.fireImmediately, this.constructor.name);
+    return registerReactive(this, () => {
+      const dispose = reaction(
+        expr,
+        (value, prevValue) => {
+          try {
+            callback(value, prevValue);
+          } catch (e) {
+            reportError(e, { phase: "watch", name: this.constructor.name, isBehavior: true });
+          }
+        },
+        {
+          delay: options?.delay,
+          fireImmediately: options?.fireImmediately
         }
-      },
-      {
-        delay: options?.delay,
-        fireImmediately: options?.fireImmediately
+      );
+      return this._addCleanup(dispose);
+    });
+  }
+  /**
+   * Run a side effect that auto-tracks reactive dependencies.
+   * Re-runs whenever any accessed observable changes.
+   * Automatically disposed on unmount.
+   * 
+   * Best for simple synchronization (DOM updates, logging). For complex
+   * side effects with explicit triggers, prefer `watch()`.
+   * 
+   * @param fn - Effect function. May return a cleanup function.
+   * @param options - Optional configuration (delay)
+   * @returns Dispose function for early teardown
+   * 
+   * @example
+   * ```tsx
+   * onCreate() {
+   *   this.effect(() => {
+   *     console.log('Current value:', this.value);
+   *   });
+   * }
+   * ```
+   */
+  effect(fn, options) {
+    return registerReactive(this, () => {
+      let cleanup;
+      const dispose = autorun(
+        () => {
+          runInAction2(() => cleanup?.());
+          cleanup = void 0;
+          try {
+            const result = fn();
+            if (typeof result === "function") {
+              cleanup = result;
+            }
+          } catch (e) {
+            reportError(e, { phase: "effect", name: this.constructor.name, isBehavior: true });
+          }
+        },
+        { delay: options?.delay }
+      );
+      return this._addCleanup(() => {
+        runInAction2(() => cleanup?.());
+        dispose();
+      });
+    });
+  }
+  /**
+   * Normalize a MaybeGetter argument into an ordinary field that stays
+   * current. Call once in onCreate (or a field initializer) and assign the
+   * result to a field; everywhere else, read the field like normal state:
+   *
+   * ```tsx
+   * url!: string;
+   *
+   * onCreate(url: MaybeGetter<string>) {
+   *   this.url = this.sync(url);            // the one convention line
+   *   this.watch(() => this.url, (u) => this.load(u));
+   * }
+   * refresh() { this.load(this.url); }      // plain read, always current
+   * ```
+   *
+   * - Plain value → the field just holds it (no effect registered).
+   * - Getter → a hidden effect keeps the field updated whenever the getter's
+   *   observable sources change (alive from mount, like watch/effect).
+   *
+   * The sync is one-way (argument → field). Don't write to the field from
+   * outside: the next source change overwrites it (dev mode warns).
+   */
+  sync(source) {
+    if (typeof source !== "function") {
+      return source;
+    }
+    if (this._pendingSyncs === null) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[mobx-mantle] ${this.constructor.name}.sync() called after construction. sync() only works in field initializers or onCreate; returning a one-time snapshot instead. Use watch()/effect() for post-mount reactions.`
+        );
       }
-    );
-    this._watchDisposers.push(dispose);
-    return () => {
-      dispose();
-      const idx = this._watchDisposers.indexOf(dispose);
-      if (idx !== -1) this._watchDisposers.splice(idx, 1);
-    };
+      return toValue(source);
+    }
+    const marker = new SyncMarker(source);
+    this._pendingSyncs.push(marker);
+    return marker;
   }
   /** @internal */
   _disposeWatchers() {
-    for (const dispose of this._watchDisposers) {
+    const disposers = this._watchDisposers.slice();
+    this._watchDisposers.length = 0;
+    for (const dispose of disposers) {
       dispose();
     }
-    this._watchDisposers.length = 0;
   }
 };
+var behaviorProtoInfo = /* @__PURE__ */ new WeakMap();
 function makeBehaviorObservable(instance) {
   const annotations = {};
   const ownKeys = /* @__PURE__ */ new Set([
@@ -103,43 +589,118 @@ function makeBehaviorObservable(instance) {
     if (BEHAVIOR_EXCLUDES.has(key)) continue;
     if (key in annotations) continue;
     const value = instance[key];
-    if (typeof value === "function") continue;
+    if (typeof value === "function" || isServiceValue(instance, value)) continue;
+    if (isBehavior(value)) {
+      annotations[key] = observable3.ref;
+      continue;
+    }
     if (isRefLike(value)) {
-      annotations[key] = observable.ref;
+      annotations[key] = observable3.ref;
     } else {
-      annotations[key] = observable;
+      annotations[key] = observable3;
     }
   }
-  let proto = Object.getPrototypeOf(instance);
-  while (proto && proto !== Behavior.prototype && proto !== Object.prototype) {
-    const descriptors = Object.getOwnPropertyDescriptors(proto);
-    for (const [key, descriptor] of Object.entries(descriptors)) {
-      if (BEHAVIOR_EXCLUDES.has(key)) continue;
-      if (key in annotations) continue;
-      if (descriptor.get) {
-        annotations[key] = computed;
-      } else if (typeof descriptor.value === "function") {
-        annotations[key] = action.bound;
-      }
-    }
-    proto = Object.getPrototypeOf(proto);
+  const protoInfo = collectProtoInfo(instance, Behavior.prototype, BEHAVIOR_EXCLUDES, behaviorProtoInfo);
+  for (const key of protoInfo.computedKeys) {
+    if (key in annotations) continue;
+    annotations[key] = computed3;
   }
   makeObservable(instance, annotations);
+  for (const key of protoInfo.methodKeys) {
+    if (key in annotations) continue;
+    const method = instance[key];
+    if (typeof method === "function") {
+      instance[key] = smartBind(method, instance);
+    }
+  }
 }
 function createBehavior(Def, options) {
   var _a, _b, _c;
   const BehaviorClass = (_c = class extends (_b = Def, _a = BEHAVIOR_MARKER, _b) {
     constructor(...args) {
+      applyMobxActionPolicy();
       super(...args);
       if (typeof this.onCreate === "function") {
-        this.onCreate(...args);
+        withOwnerServiceScope(this, () => runInAction2(() => this.onCreate(...args)));
+      }
+      const children = [];
+      for (const key of Object.keys(this)) {
+        if (key.startsWith("_")) continue;
+        const value = this[key];
+        if (isBehavior(value) && !isServiceValue(this, value)) {
+          children.push({ instance: value });
+        }
       }
+      this._behaviors = children;
+      const syncedFields = [];
+      const pending = this._pendingSyncs ?? null;
+      if (Array.isArray(pending) && pending.length > 0) {
+        for (const key of Object.keys(this)) {
+          const value = this[key];
+          if (value instanceof SyncMarker) {
+            syncedFields.push({ key, source: value.source });
+            this[key] = value.source();
+          }
+        }
+        if (process.env.NODE_ENV !== "production" && syncedFields.length !== pending.length) {
+          console.warn(
+            `[mobx-mantle] ${Def.name}: ${pending.length - syncedFields.length} sync() result(s) were not assigned to a field. Assign sync() directly to a field (this.url = this.sync(url)) so Mantle can keep it updated.`
+          );
+        }
+      }
+      this._pendingSyncs = null;
       const autoObservable = options?.autoObservable ?? globalConfig.autoObservable;
-      if (autoObservable) {
+      const annotations = getAnnotations(this);
+      if (annotations) {
+        makeObservable(this, annotations);
+        const info = collectProtoInfo(this, Behavior.prototype, BEHAVIOR_EXCLUDES, behaviorProtoInfo);
+        for (const key of info.methodKeys) if (!(key in annotations)) this[key] = smartBind(this[key], this);
+      } else if (autoObservable) {
         makeBehaviorObservable(this);
       } else {
         makeObservable(this);
       }
+      if (syncedFields.length > 0) {
+        const self = this;
+        const specs = syncedFields.map(({ key, source }) => ({
+          create: () => {
+            const dispose = autorun(() => {
+              try {
+                const next = source();
+                self._syncWriting = true;
+                try {
+                  runInAction2(() => {
+                    self[key] = next;
+                  });
+                } finally {
+                  self._syncWriting = false;
+                }
+              } catch (e) {
+                reportError(e, { phase: "sync", name: self.constructor.name, isBehavior: true });
+              }
+            });
+            return self._addCleanup(dispose);
+          },
+          stopped: false,
+          dispose: null
+        }));
+        self._reactiveSpecs.unshift(...specs);
+        if (process.env.NODE_ENV !== "production") {
+          for (const { key } of syncedFields) {
+            try {
+              intercept(self, key, (change) => {
+                if (!self._syncWriting) {
+                  console.warn(
+                    `[mobx-mantle] ${Def.name}.${key} is a one-way synced field (this.sync()). Writing to it from outside will be overwritten by the next source change. Derive with a computed getter, or own the state in a plain field instead.`
+                  );
+                }
+                return change;
+              });
+            } catch {
+            }
+          }
+        }
+      }
     }
   }, _c[_a] = true, _c);
   Object.defineProperty(BehaviorClass, "name", { value: Def.name });
@@ -153,33 +714,55 @@ function isBehavior(value) {
   if (value === null || typeof value !== "object") return false;
   return value.constructor?.[BEHAVIOR_MARKER] === true;
 }
-function layoutMountBehavior(behavior) {
+function childBehaviors(inst) {
+  return Array.isArray(inst._behaviors) ? inst._behaviors : [];
+}
+function layoutMountBehavior(behavior, visited = /* @__PURE__ */ new WeakSet()) {
   const inst = behavior.instance;
+  if (visited.has(inst)) return;
+  visited.add(inst);
+  for (const child of childBehaviors(inst)) {
+    layoutMountBehavior(child, visited);
+  }
+  if (Array.isArray(inst._reactiveSpecs)) {
+    activateSpecs(inst);
+  } else {
+    inst._mounted = true;
+  }
   if ("onLayoutMount" in inst && typeof inst.onLayoutMount === "function") {
     try {
-      behavior.layoutCleanup = inst.onLayoutMount() ?? void 0;
+      const result = runInAction2(() => inst.onLayoutMount());
+      behavior.layoutCleanup = typeof result === "function" ? result : void 0;
     } catch (e) {
       reportError(e, { phase: "onLayoutMount", name: inst.constructor.name, isBehavior: true });
     }
   }
 }
-function mountBehavior(behavior) {
+function mountBehavior(behavior, visited = /* @__PURE__ */ new WeakSet()) {
   const inst = behavior.instance;
+  if (visited.has(inst)) return;
+  visited.add(inst);
+  for (const child of childBehaviors(inst)) {
+    mountBehavior(child, visited);
+  }
   if ("onMount" in inst && typeof inst.onMount === "function") {
     try {
-      behavior.cleanup = inst.onMount() ?? void 0;
+      const result = runInAction2(() => inst.onMount());
+      behavior.cleanup = typeof result === "function" ? result : void 0;
     } catch (e) {
       reportError(e, { phase: "onMount", name: inst.constructor.name, isBehavior: true });
     }
   }
 }
-function unmountBehavior(behavior) {
-  behavior.layoutCleanup?.();
-  behavior.cleanup?.();
+function unmountBehavior(behavior, visited = /* @__PURE__ */ new WeakSet()) {
   const inst = behavior.instance;
+  if (visited.has(inst)) return;
+  visited.add(inst);
+  runInAction2(() => behavior.layoutCleanup?.());
+  runInAction2(() => behavior.cleanup?.());
   if ("onUnmount" in inst && typeof inst.onUnmount === "function") {
     try {
-      inst.onUnmount();
+      runInAction2(() => inst.onUnmount());
     } catch (e) {
       reportError(e, { phase: "onUnmount", name: inst.constructor.name, isBehavior: true });
     }
@@ -187,44 +770,75 @@ function unmountBehavior(behavior) {
   if (typeof inst._disposeWatchers === "function") {
     inst._disposeWatchers();
   }
+  inst._wasUnmounted = true;
+  const children = childBehaviors(inst);
+  for (let i = children.length - 1; i >= 0; i--) {
+    unmountBehavior(children[i], visited);
+  }
 }
-
-// src/decorators.ts
-import * as mobx from "mobx";
-var ANNOTATIONS = /* @__PURE__ */ Symbol("mantle:annotations");
-function setAnnotation(context, annotation) {
-  var _a;
-  (_a = context.metadata)[ANNOTATIONS] ?? (_a[ANNOTATIONS] = {});
-  context.metadata[ANNOTATIONS][context.name] = annotation;
+function warnUncollectedBehaviors(host, hostName, entries, visited = /* @__PURE__ */ new WeakSet()) {
+  if (visited.has(host)) return;
+  visited.add(host);
+  const collected = new Set(entries.map((e) => e.instance));
+  for (const key of Object.keys(host)) {
+    if (key.startsWith("_")) continue;
+    const value = host[key];
+    if (isBehavior(value) && !isServiceValue(host, value) && !collected.has(value)) {
+      console.warn(
+        `[mobx-mantle] ${hostName}.${key} holds a behavior that was assigned after construction, so its lifecycle (onMount, watchers, cleanup) will never run. Create behaviors as class fields so they are collected when the host is constructed.`
+      );
+    }
+  }
+  for (const entry of entries) {
+    warnUncollectedBehaviors(
+      entry.instance,
+      entry.instance.constructor.name,
+      childBehaviors(entry.instance),
+      visited
+    );
+  }
 }
-function observable3(_value, context) {
-  setAnnotation(context, mobx.observable);
+
+// src/mantle.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var componentRefs = /* @__PURE__ */ new WeakSet();
+var ComponentParentContext = React4.createContext(void 0);
+var componentParents = /* @__PURE__ */ new WeakMap();
+var ownerScopes = /* @__PURE__ */ new WeakMap();
+function ownerScope(owner) {
+  let scope = ownerScopes.get(owner);
+  if (!scope) {
+    scope = { handle: { current: owner }, resolver: getServiceResolver(owner), substitutions: void 0 };
+    ownerScopes.set(owner, scope);
+  }
+  return scope;
 }
-observable3.ref = function(_value, context) {
-  setAnnotation(context, mobx.observable.ref);
-};
-observable3.shallow = function(_value, context) {
-  setAnnotation(context, mobx.observable.shallow);
-};
-observable3.struct = function(_value, context) {
-  setAnnotation(context, mobx.observable.struct);
-};
-observable3.deep = function(_value, context) {
-  setAnnotation(context, mobx.observable.deep);
-};
-function action3(_value, context) {
-  setAnnotation(context, mobx.action.bound);
+function withRef(props, ref) {
+  return ref == null ? props : { ...props, ref };
 }
-function computed3(_value, context) {
-  setAnnotation(context, mobx.computed);
+var activeComponentConstruction;
+function constructComponent(ComponentClass, props, parentHandle) {
+  const previousScope = activeComponentConstruction;
+  const scope = {
+    expectedClass: ComponentClass,
+    parentHandle,
+    consumed: false
+  };
+  activeComponentConstruction = scope;
+  try {
+    return new ComponentClass(props);
+  } finally {
+    activeComponentConstruction = previousScope;
+  }
 }
-function getAnnotations(instance) {
-  const metadata = instance.constructor[Symbol.metadata];
-  return metadata?.[ANNOTATIONS];
+function captureConstructingComponentParent(instance) {
+  const scope = activeComponentConstruction;
+  if (!scope || scope.consumed || instance.constructor !== scope.expectedClass) {
+    return;
+  }
+  scope.consumed = true;
+  componentParents.set(instance, scope.parentHandle);
 }
-
-// src/mantle.tsx
-var viewRefs = /* @__PURE__ */ new WeakSet();
 function shallowEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -236,37 +850,168 @@ function shallowEqual(a, b) {
   }
   return true;
 }
-var View = class {
-  constructor() {
+var PropsBox = class {
+  constructor(value, name) {
+    /**
+     * @internal The owning component's render reaction. Reads coming from it
+     * are not tracked: React already re-renders the component on prop change
+     * (via memo), so letting the render reaction observe the props atom would
+     * only schedule a redundant second render after every prop change.
+     * Computeds, watchers, and other components track normally.
+     */
+    this._renderReaction = null;
+    this._value = value;
+    this._atom = createAtom(name);
+  }
+  get() {
+    const own = this._renderReaction?.current;
+    if (!own || _getGlobalState2().trackingDerivation !== own) {
+      this._atom.reportObserved();
+    }
+    return this._value;
+  }
+  setSilently(value) {
+    this._value = value;
+  }
+  set(value) {
+    this._value = value;
+    this._atom.reportChanged();
+  }
+};
+var Component = class {
+  constructor(props) {
     /** @internal */
     this._behaviors = [];
     /** @internal */
     this._watchDisposers = [];
+    /** @internal — pre-mount watch/effect registrations, materialized at mount */
+    this._reactiveSpecs = [];
+    /** @internal — true after the first (layout) mount */
+    this._mounted = false;
+    /** @internal — set when effects clean up so StrictMode replay can resurrect watchers */
+    this._wasUnmounted = false;
+    this._propsBox = new PropsBox(props, `${this.constructor.name}.props`);
+    captureConstructingComponentParent(this);
+    captureServiceScope(this);
   }
   get props() {
     return this._propsBox.get();
   }
-  /** @internal — called by createView to silently update props during render */
+  /** Resolve through the scope captured during construction; preserve service identity. */
+  inject(token) {
+    return resolveService(this, token);
+  }
+  /** Return the immediate ancestor in the live Mantle view tree. */
+  getParent() {
+    return componentParents.get(this)?.current;
+  }
+  /** Find the nearest parent with the supplied logical model identity. */
+  findParent(type) {
+    for (const parent of this.getParents()) {
+      if (isModel(parent, type)) return parent;
+    }
+    return void 0;
+  }
+  /** Return all Mantle parents, ordered from the immediate parent to the root. */
+  getParents() {
+    const parents = [];
+    let current = this.getParent();
+    while (current) {
+      parents.push(current);
+      current = current.getParent();
+    }
+    return parents;
+  }
+  /** Return the highest Mantle ancestor, or this instance when already root. */
+  getRoot() {
+    const parents = this.getParents();
+    return parents[parents.length - 1] ?? this;
+  }
+  /** @internal — called by createComponent to silently update props during render */
   _syncProps(value) {
-    this._propsBox.value_ = value;
+    this._propsBox.setSilently(value);
   }
   ref() {
     const r = { current: null };
-    viewRefs.add(r);
+    componentRefs.add(r);
     return r;
   }
+  /**
+   * A tracked view of this instance, for handing to code you don't control
+   * (a table's row renderer, an error boundary's fallback, a map popup).
+   * Created once, so its identity is stable. Re-renders on its own when the
+   * state it reads changes. Forwards refs. Carries this model's context, so
+   * `findParent()` and services resolve inside it even when a library renders
+   * it in its own React root.
+   *
+   * @example
+   * ```tsx
+   * row = this.view((props: RowProps) => (
+   *   <tr {...props} className={props.id === this.activeId ? 'active' : ''} />
+   * ));
+   * ```
+   */
+  view(render) {
+    const owner = this;
+    const name = `${owner.constructor.name}.${render.name || "view"}`;
+    const View = reactForwardRef((props, ref) => {
+      const scope = ownerScope(owner);
+      const rendered = useMantleObserver(() => render(withRef(props, ref)), name);
+      return /* @__PURE__ */ jsx3(ComponentParentContext.Provider, { value: scope.handle, children: /* @__PURE__ */ jsx3(ServiceContext.Provider, { value: scope.resolver, children: /* @__PURE__ */ jsx3(ModelContext.Provider, { value: scope.substitutions, children: rendered }) }) });
+    });
+    View.displayName = name;
+    const Memoized = memo2(View);
+    trackedComponents.add(Memoized);
+    return Memoized;
+  }
+  /**
+   * Register a cleanup function to run automatically on unmount.
+   * Returns a function that can be called for early cleanup.
+   *
+   * Cleanups are one-shot: they are not re-created during React StrictMode's
+   * same-instance effect replay. Call this from onMount (which is replayed),
+   * or use effect() for a replay-safe setup/teardown pair.
+   */
+  addCleanup(cleanup) {
+    if (process.env.NODE_ENV !== "production" && !this._mounted) {
+      console.warn(
+        `[mobx-mantle] ${this.constructor.name}.addCleanup() called before mount. Cleanups are one-shot: they run when mount effects clean up and are not re-created during React StrictMode's same-instance effect replay. Acquire resources in onMount(), or use effect() for a replay-safe setup/teardown pair.`
+      );
+    }
+    return this._addCleanup(cleanup);
+  }
+  /** @internal — addCleanup without the pre-mount dev warning (used by watch/effect) */
+  _addCleanup(cleanup) {
+    let active = true;
+    const dispose = () => {
+      if (!active) return;
+      active = false;
+      try {
+        runInAction3(cleanup);
+      } finally {
+        const idx = this._watchDisposers.indexOf(dispose);
+        if (idx !== -1) this._watchDisposers.splice(idx, 1);
+      }
+    };
+    this._watchDisposers.push(dispose);
+    return dispose;
+  }
   /**
    * Watch a reactive expression and run a callback when it changes.
-   * Automatically disposed on unmount.
-   * 
-   * @param expr - Reactive expression (getter) to watch
+   * Automatically disposed on unmount. Watchers declared before mount
+   * (field initializers, onCreate) are re-created during React StrictMode's
+   * same-instance effect replay.
+   *
+   * @param source - Reactive expression (getter) to watch, or a MaybeGetter
+   *   argument passed through as-is. To watch a value that is itself a
+   *   function, wrap it: `watch(() => this.callback, …)`
    * @param callback - Called when the expression result changes
    * @param options - Optional configuration (delay, fireImmediately)
    * @returns Dispose function for early teardown
    * 
    * @example
    * ```tsx
-   * onCreate() {
+   * onMount() {
    *   this.watch(
    *     () => this.query,
    *     async (query) => {
@@ -279,41 +1024,98 @@ var View = class {
    * }
    * ```
    */
-  watch(expr, callback, options) {
-    const dispose = reaction2(
-      expr,
-      (value, prevValue) => {
-        try {
-          callback(value, prevValue);
-        } catch (e) {
-          reportError(e, { phase: "watch", name: this.constructor.name, isBehavior: false });
+  watch(source, callback, options) {
+    const expr = toWatchExpression(source, options?.fireImmediately, this.constructor.name);
+    return registerReactive(this, () => {
+      const dispose = reaction2(
+        expr,
+        (value, prevValue) => {
+          try {
+            callback(value, prevValue);
+          } catch (e) {
+            reportError(e, { phase: "watch", name: this.constructor.name, isBehavior: false });
+          }
+        },
+        {
+          delay: options?.delay,
+          fireImmediately: options?.fireImmediately
         }
-      },
-      {
-        delay: options?.delay,
-        fireImmediately: options?.fireImmediately
-      }
-    );
-    this._watchDisposers.push(dispose);
-    return () => {
-      dispose();
-      const idx = this._watchDisposers.indexOf(dispose);
-      if (idx !== -1) this._watchDisposers.splice(idx, 1);
-    };
+      );
+      return this._addCleanup(dispose);
+    });
+  }
+  /**
+   * Run a side effect that auto-tracks reactive dependencies.
+   * Re-runs whenever any accessed observable changes.
+   * Automatically disposed on unmount. Effects declared before mount
+   * (field initializers, onCreate) are re-created during React StrictMode's
+   * same-instance effect replay.
+   *
+   * Best for simple synchronization (DOM updates, logging). For complex
+   * side effects with explicit triggers, prefer `watch()`.
+   *
+   * @param fn - Effect function. May return a cleanup function.
+   * @param options - Optional configuration (delay)
+   * @returns Dispose function for early teardown
+   * 
+   * @example
+   * ```tsx
+   * onMount() {
+   *   this.effect(() => {
+   *     document.title = `${this.items.length} items`;
+   *   });
+   * }
+   * ```
+   *
+   * @example With cleanup
+   * ```tsx
+   * onMount() {
+   *   this.effect(() => {
+   *     const handler = () => console.log(this.count);
+   *     window.addEventListener('click', handler);
+   *     return () => window.removeEventListener('click', handler);
+   *   });
+   * }
+   * ```
+   */
+  effect(fn, options) {
+    return registerReactive(this, () => {
+      let cleanup;
+      const dispose = autorun2(
+        () => {
+          runInAction3(() => cleanup?.());
+          cleanup = void 0;
+          try {
+            const result = fn();
+            if (typeof result === "function") {
+              cleanup = result;
+            }
+          } catch (e) {
+            reportError(e, { phase: "effect", name: this.constructor.name, isBehavior: false });
+          }
+        },
+        { delay: options?.delay }
+      );
+      return this._addCleanup(() => {
+        runInAction3(() => cleanup?.());
+        dispose();
+      });
+    });
   }
   /** @internal */
   _disposeWatchers() {
-    for (const dispose of this._watchDisposers) {
+    const disposers = this._watchDisposers.slice();
+    this._watchDisposers.length = 0;
+    for (const dispose of disposers) {
       dispose();
     }
-    this._watchDisposers.length = 0;
   }
   /** @internal - Scan own properties for behavior instances and register them */
   _collectBehaviors() {
     for (const key of Object.keys(this)) {
       if (key.startsWith("_")) continue;
       const value = this[key];
-      if (isBehavior(value)) {
+      if (isBehavior(value) && !isServiceValue(this, value)) {
         this._behaviors.push({ instance: value });
       }
     }
@@ -339,6 +1141,10 @@ var View = class {
 };
 var BASE_EXCLUDES = /* @__PURE__ */ new Set([
   "props",
+  "getParent",
+  "findParent",
+  "getParents",
+  "getRoot",
   "_propsBox",
   "forwardRef",
   "onCreate",
@@ -348,8 +1154,13 @@ var BASE_EXCLUDES = /* @__PURE__ */ new Set([
   "onUnmount",
   "render",
   "ref",
+  "view",
+  "addCleanup",
+  "_addCleanup",
   "watch",
+  "effect",
   "constructor",
+  "inject",
   "_behaviors",
   "_collectBehaviors",
   "_layoutMountBehaviors",
@@ -357,12 +1168,16 @@ var BASE_EXCLUDES = /* @__PURE__ */ new Set([
   "_unmountBehaviors",
   "_syncProps",
   "_watchDisposers",
-  "_disposeWatchers"
+  "_disposeWatchers",
+  "_reactiveSpecs",
+  "_mounted",
+  "_wasUnmounted"
 ]);
-function isViewRef(value) {
-  return value !== null && typeof value === "object" && viewRefs.has(value);
+function isComponentRef(value) {
+  return value !== null && typeof value === "object" && componentRefs.has(value);
 }
-function makeViewObservable(instance, autoBind) {
+var componentProtoInfo = /* @__PURE__ */ new WeakMap();
+function makeComponentObservable(instance, autoBind) {
   const annotations = {};
   const ownKeys = /* @__PURE__ */ new Set([
     ...Object.keys(instance),
@@ -372,69 +1187,96 @@ function makeViewObservable(instance, autoBind) {
     if (BASE_EXCLUDES.has(key)) continue;
     if (key in annotations) continue;
     const value = instance[key];
-    if (typeof value === "function") continue;
+    if (typeof value === "function" || isServiceValue(instance, value) || trackedComponents.has(value)) continue;
     if (isBehavior(value)) {
       annotations[key] = observable4.ref;
       continue;
     }
-    if (isViewRef(value)) {
+    if (isComponentRef(value)) {
       annotations[key] = observable4.ref;
     } else {
       annotations[key] = observable4;
     }
   }
-  let proto = Object.getPrototypeOf(instance);
-  while (proto && proto !== View.prototype) {
-    const descriptors = Object.getOwnPropertyDescriptors(proto);
-    for (const [key, descriptor] of Object.entries(descriptors)) {
-      if (BASE_EXCLUDES.has(key)) continue;
+  const protoInfo = collectProtoInfo(instance, Component.prototype, BASE_EXCLUDES, componentProtoInfo);
+  for (const key of protoInfo.computedKeys) {
+    if (key in annotations) continue;
+    annotations[key] = computed4;
+  }
+  makeObservable2(instance, annotations);
+  if (autoBind) {
+    for (const key of protoInfo.methodKeys) {
       if (key in annotations) continue;
-      if (descriptor.get) {
-        annotations[key] = computed4;
-      } else if (typeof descriptor.value === "function") {
-        annotations[key] = autoBind ? action4.bound : action4;
+      const method = instance[key];
+      if (typeof method === "function") {
+        instance[key] = smartBind(method, instance);
       }
     }
-    proto = Object.getPrototypeOf(proto);
+  }
+}
+var SubstituteComponent = class extends Component {
+};
+function installSubstituteState(instance, state) {
+  const annotations = {};
+  for (const key of Reflect.ownKeys(state)) {
+    if (typeof key !== "string" || key.startsWith("_") || key in instance || BASE_EXCLUDES.has(key)) throw new Error("[mobx-mantle] Substitute state cannot replace framework member " + String(key));
+    const descriptor = Object.getOwnPropertyDescriptor(state, key);
+    if (!("value" in descriptor)) throw new Error("[mobx-mantle] Substitute state must contain data/callbacks, not getters.");
+    Object.defineProperty(instance, key, { value: descriptor.value, enumerable: true, writable: true, configurable: true });
+    annotations[key] = observable4.ref;
   }
   makeObservable2(instance, annotations);
 }
-function createView(ViewClass, templateOrOptions) {
+function createComponent(ComponentClass, templateOrOptions) {
   const template = typeof templateOrOptions === "function" ? templateOrOptions : void 0;
   const options = typeof templateOrOptions === "object" ? templateOrOptions : {};
   const { autoObservable = globalConfig.autoObservable } = options;
-  const Component = reactForwardRef((props, ref) => {
-    const vmRef = useRef(null);
-    const classRef = useRef(ViewClass);
-    const prevPropsRef = useRef(null);
-    const propsNotifyingRef = useRef(false);
-    if (vmRef.current && classRef.current !== ViewClass) {
-      classRef.current = ViewClass;
+  const ReactComponent = reactForwardRef((props, ref) => {
+    const parentHandle = React4.useContext(ComponentParentContext);
+    const resolver = React4.useContext(ServiceContext);
+    const substitutions = React4.useContext(ModelContext);
+    const substitutedTemplate = useRef2(void 0);
+    const vmRef = useRef2(null);
+    const componentHandleRef = useRef2(null);
+    const classRef = useRef2(ComponentClass);
+    const prevPropsRef = useRef2(null);
+    const propsNotifyingRef = useRef2(false);
+    const renderReactionRef = useRef2({ current: null });
+    if (!componentHandleRef.current) {
+      componentHandleRef.current = { current: void 0 };
+    }
+    const componentHandle = componentHandleRef.current;
+    if (vmRef.current && classRef.current !== ComponentClass) {
+      classRef.current = ComponentClass;
       vmRef.current = null;
     }
     if (!vmRef.current) {
-      const instance = new ViewClass();
-      instance._propsBox = observable4.box(props, { deep: false });
+      applyMobxActionPolicy();
+      const substitution = substitutions?.get(ComponentClass);
+      if (substitution && !substitution.template && !template) throw new Error("[mobx-mantle] A substituted integrated model requires an explicit test template.");
+      const instance = withInjectionScope(resolver, () => substitution ? constructComponent(SubstituteComponent, props, parentHandle) : constructComponent(ComponentClass, props, parentHandle));
+      substitutedTemplate.current = substitution?.template;
+      setModelIdentity(instance, ComponentClass);
+      if (substitution) installSubstituteState(instance, substitution.state());
       instance.forwardRef = ref;
-      instance._collectBehaviors();
+      instance._propsBox._renderReaction = renderReactionRef.current;
+      ownerScopes.set(instance, { handle: componentHandle, resolver: getServiceResolver(instance), substitutions });
+      if (!substitution) instance._collectBehaviors();
       const decoratorAnnotations = getAnnotations(instance);
-      if (decoratorAnnotations) {
+      if (substitution) {
+      } else if (decoratorAnnotations) {
         const annotations = { ...decoratorAnnotations };
-        let proto = Object.getPrototypeOf(instance);
-        while (proto && proto !== View.prototype) {
-          const descriptors = Object.getOwnPropertyDescriptors(proto);
-          for (const [key, descriptor] of Object.entries(descriptors)) {
-            if (BASE_EXCLUDES.has(key)) continue;
-            if (key in annotations) continue;
-            if (typeof descriptor.value === "function") {
-              annotations[key] = action4.bound;
-            }
+        makeObservable2(instance, annotations);
+        const protoInfo = collectProtoInfo(instance, Component.prototype, BASE_EXCLUDES, componentProtoInfo);
+        for (const key of protoInfo.methodKeys) {
+          if (key in annotations) continue;
+          const method = instance[key];
+          if (typeof method === "function") {
+            instance[key] = smartBind(method, instance);
           }
-          proto = Object.getPrototypeOf(proto);
         }
-        makeObservable2(instance, annotations);
       } else if (autoObservable) {
-        makeViewObservable(instance, true);
+        makeComponentObservable(instance, true);
       } else {
         makeObservable2(instance);
       }
@@ -444,99 +1286,283 @@ function createView(ViewClass, templateOrOptions) {
         ownKeys: () => Reflect.ownKeys(instance.props),
         getOwnPropertyDescriptor: (_, key) => Reflect.getOwnPropertyDescriptor(instance.props, key)
       });
-      instance.onCreate?.(reactiveProps);
+      withOwnerServiceScope(instance, () => runInAction3(() => instance.onCreate?.(reactiveProps)));
+      if (process.env.NODE_ENV !== "production" && autoObservable && !decoratorAnnotations && !substitution) {
+        for (const key of Object.keys(instance)) {
+          if (BASE_EXCLUDES.has(key) || key.startsWith("_")) continue;
+          const value = instance[key];
+          if (typeof value === "function" || isServiceValue(instance, value) || trackedComponents.has(value)) continue;
+          if (!isObservableProp(instance, key)) {
+            console.warn(
+              `[mobx-mantle] ${ComponentClass.name}.${key} was first assigned in onCreate() and is not reactive. Declare it as a class field so it can be made observable.`
+            );
+          }
+        }
+      }
       vmRef.current = instance;
       prevPropsRef.current = props;
     }
     const vm = vmRef.current;
+    const renderTemplate = substitutedTemplate.current ?? template;
+    componentParents.set(vm, parentHandle);
+    componentHandle.current = vm;
     if (process.env.NODE_ENV !== "production" && propsNotifyingRef.current) {
       console.warn(
-        `[mobx-mantle] ${ViewClass.name}: A reaction to a prop change modified observable state, which caused an extra re-render. Consider using a computed getter instead.`
+        `[mobx-mantle] ${ComponentClass.name}: A reaction to a prop change modified observable state, which caused an extra re-render. Consider using a computed getter instead.`
       );
       propsNotifyingRef.current = false;
     }
     vm._syncProps(props);
     vm.forwardRef = ref;
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (!shallowEqual(prevPropsRef.current, props)) {
         prevPropsRef.current = props;
         propsNotifyingRef.current = true;
-        runInAction(() => {
+        runInAction3(() => {
           vm._propsBox.set(props);
         });
         propsNotifyingRef.current = false;
       }
     });
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+      activateSpecs(vm);
       vm._layoutMountBehaviors();
       let cleanup;
       try {
-        const result = vm.onLayoutMount?.();
+        const result = runInAction3(() => vm.onLayoutMount?.());
         if (process.env.NODE_ENV !== "production" && result instanceof Promise) {
           console.error(
-            `[mobx-mantle] ${ViewClass.name}.onLayoutMount() returned a Promise. Lifecycle methods must be synchronous. Use a sync onLayoutMount that calls an async method instead.`
+            `[mobx-mantle] ${ComponentClass.name}.onLayoutMount() returned a Promise. Lifecycle methods must be synchronous. Use a sync onLayoutMount that calls an async method instead.`
           );
         }
-        cleanup = result;
+        cleanup = typeof result === "function" ? result : void 0;
       } catch (e) {
-        reportError(e, { phase: "onLayoutMount", name: ViewClass.name, isBehavior: false });
+        reportError(e, { phase: "onLayoutMount", name: ComponentClass.name, isBehavior: false });
       }
       return () => {
-        cleanup?.();
+        runInAction3(() => cleanup?.());
       };
     }, [vm]);
-    useEffect(() => {
+    useEffect2(() => {
       vm._mountBehaviors();
       let cleanup;
       try {
-        const result = vm.onMount?.();
+        const result = runInAction3(() => vm.onMount?.());
         if (process.env.NODE_ENV !== "production" && result instanceof Promise) {
           console.error(
-            `[mobx-mantle] ${ViewClass.name}.onMount() returned a Promise. Lifecycle methods must be synchronous. Use a sync onMount that calls an async method instead.`
+            `[mobx-mantle] ${ComponentClass.name}.onMount() returned a Promise. Lifecycle methods must be synchronous. Use a sync onMount that calls an async method instead.`
           );
         }
-        cleanup = result;
+        cleanup = typeof result === "function" ? result : void 0;
       } catch (e) {
-        reportError(e, { phase: "onMount", name: ViewClass.name, isBehavior: false });
+        reportError(e, { phase: "onMount", name: ComponentClass.name, isBehavior: false });
+      }
+      if (process.env.NODE_ENV !== "production") {
+        warnUncollectedBehaviors(vm, ComponentClass.name, vm._behaviors);
       }
       return () => {
-        cleanup?.();
+        runInAction3(() => cleanup?.());
         try {
-          vm.onUnmount?.();
+          runInAction3(() => vm.onUnmount?.());
         } catch (e) {
-          reportError(e, { phase: "onUnmount", name: ViewClass.name, isBehavior: false });
+          reportError(e, { phase: "onUnmount", name: ComponentClass.name, isBehavior: false });
         }
         vm._disposeWatchers();
         vm._unmountBehaviors();
+        vm._wasUnmounted = true;
       };
     }, [vm]);
-    useEffect(() => {
+    useEffect2(() => {
       try {
-        vm.onUpdate?.();
+        runInAction3(() => vm.onUpdate?.());
       } catch (e) {
-        reportError(e, { phase: "onUpdate", name: ViewClass.name, isBehavior: false });
+        reportError(e, { phase: "onUpdate", name: ComponentClass.name, isBehavior: false });
       }
     });
-    if (!template && !vm.render) {
+    if (!renderTemplate && !vm.render) {
       throw new Error(
-        `[mobx-mantle] ${ViewClass.name}: Missing render() method. Either define render() in your View class or pass a template function to createView().`
+        `[mobx-mantle] ${ComponentClass.name}: Missing render() method. Either define render() in your Component class or pass a template function to createComponent().`
       );
     }
-    return useObserver(() => {
-      return template ? template(vm) : vm.render();
-    });
+    const rendered = useMantleObserver(
+      () => renderTemplate ? renderTemplate(vm) : vm.render(),
+      ComponentClass.name,
+      renderReactionRef.current
+    );
+    return /* @__PURE__ */ jsx3(ComponentParentContext.Provider, { value: componentHandle, children: rendered });
   });
-  return memo(Component);
+  return memo2(ReactComponent);
+}
+function createForwardRef(ComponentClass, templateOrOptions) {
+  return createComponent(ComponentClass, templateOrOptions);
+}
+function createView(ModelClass, template) {
+  const name = `${ModelClass.name}.${template.name || "view"}`;
+  const View = reactForwardRef((props, ref) => {
+    let vm = useContext(ComponentParentContext)?.current;
+    while (vm && !isModel(vm, ModelClass)) vm = vm.getParent();
+    if (!vm) {
+      throw new Error(
+        `[mobx-mantle] createView(${ModelClass.name}): no ${ModelClass.name} is mounted above this view.`
+      );
+    }
+    const model = vm;
+    return useMantleObserver(() => template(withRef({ ...props, vm: model }, ref)), name);
+  });
+  View.displayName = name;
+  const Memoized = memo2(View);
+  trackedComponents.add(Memoized);
+  return Memoized;
+}
+
+// src/useBehavior.ts
+import { useContext as useContext2 } from "react";
+import { useEffect as useEffect3, useState } from "react";
+function useBehavior(create) {
+  const resolver = useContext2(ServiceContext);
+  const [entry] = useState(() => {
+    const instance = withInjectionScope(resolver, create);
+    if (process.env.NODE_ENV !== "production" && !isBehavior(instance)) {
+      console.warn(
+        "[mobx-mantle] useBehavior() expected the factory to return a behavior instance (created with a factory from createBehavior). Lifecycle relay will be skipped for this value."
+      );
+    }
+    return { instance };
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!isBehavior(entry.instance)) return;
+    layoutMountBehavior(entry);
+  }, [entry]);
+  useEffect3(() => {
+    if (!isBehavior(entry.instance)) return;
+    mountBehavior(entry);
+    return () => unmountBehavior(entry);
+  }, [entry]);
+  return entry.instance;
+}
+
+// src/shared.ts
+import { isObservableProp as isObservableProp2, reaction as reaction3, runInAction as runInAction4, toJS } from "mobx";
+var registry = /* @__PURE__ */ new WeakMap();
+function ownDataFields(store) {
+  return Object.keys(store).filter((key) => {
+    if (key.startsWith("_")) return false;
+    if (typeof store[key] === "function") return false;
+    return isObservableProp2(store, key);
+  });
+}
+function serialize(store, fields) {
+  const values = {};
+  for (const field of fields) values[field] = toJS(store[field]);
+  return JSON.stringify(values);
+}
+function apply(store, fields, json) {
+  let parsed;
+  try {
+    parsed = JSON.parse(json);
+  } catch {
+    return false;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return false;
+  const values = parsed;
+  runInAction4(() => {
+    for (const field of fields) {
+      if (field in values) store[field] = values[field];
+    }
+  });
+  return true;
+}
+function safeStorage() {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+function shared(store, key, options = {}) {
+  if (registry.has(store) || typeof window === "undefined") return store;
+  const target = store;
+  const fields = options.fields ? [...options.fields] : ownDataFields(store);
+  const storage = options.persist === false ? null : safeStorage();
+  const channel = typeof BroadcastChannel === "function" ? new BroadcastChannel(`mantle-shared:${key}`) : null;
+  channel?.unref?.();
+  let stored = null;
+  try {
+    stored = storage?.getItem(key) ?? null;
+  } catch {
+    stored = null;
+  }
+  if (stored !== null) apply(target, fields, stored);
+  let current = serialize(target, fields);
+  const stopPublish = reaction3(
+    () => serialize(target, fields),
+    (json) => {
+      if (json === current) return;
+      current = json;
+      try {
+        storage?.setItem(key, json);
+      } catch {
+      }
+      channel?.postMessage(json);
+    }
+  );
+  const receive = (json) => {
+    if (json === current) return;
+    current = json;
+    apply(target, fields, json);
+  };
+  const onMessage = (event) => {
+    if (typeof event.data === "string") receive(event.data);
+  };
+  const onStorage = (event) => {
+    if (event.key === key && event.newValue !== null) receive(event.newValue);
+  };
+  channel?.addEventListener("message", onMessage);
+  window.addEventListener("storage", onStorage);
+  registry.set(store, {
+    dispose() {
+      stopPublish();
+      channel?.removeEventListener("message", onMessage);
+      channel?.close();
+      window.removeEventListener("storage", onStorage);
+      registry.delete(store);
+    }
+  });
+  return store;
+}
+function unshare(store) {
+  registry.get(store)?.dispose();
+}
+function shareStores(stores, options = {}) {
+  const { prefix = "shared", ...rest } = options;
+  for (const [name, store] of Object.entries(stores)) {
+    shared(store, `${prefix}:${name}`, rest);
+  }
+  return stores;
 }
 export {
   Behavior,
-  View,
-  View as ViewModel,
-  action3 as action,
-  computed3 as computed,
+  Component,
+  ModelProvider,
+  ServiceProvider,
+  Component as ViewModel,
+  action2 as action,
+  computed2 as computed,
   configure,
   createBehavior,
+  createComponent,
+  createForwardRef,
+  createServiceToken,
   createView,
-  observable3 as observable
+  inject,
+  isModel,
+  observable2 as observable,
+  observer,
+  shareStores,
+  shared,
+  toValue,
+  unshare,
+  useBehavior,
+  withInjectionScope
 };
 //# sourceMappingURL=index.js.map