mobx-mantle 0.3.7 → 0.7.0

package/dist/index.cjs

@@ -1,65 +1,31 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Behavior: () => Behavior,
-  View: () => View,
-  ViewModel: () => View,
-  action: () => action3,
-  computed: () => computed3,
-  configure: () => configure,
-  createBehavior: () => createBehavior,
-  createView: () => createView,
-  observable: () => observable3
-});
-module.exports = __toCommonJS(index_exports);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-// src/mantle.tsx
-var import_react = require("react");
-var import_mobx2 = require("mobx");
-var import_mobx_react_lite = require("mobx-react-lite");
+var _chunkWNF647U6cjs = require('./chunk-WNF647U6.cjs');
 
-// src/behavior.ts
-var import_mobx = require("mobx");
+// src/services.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // src/config.ts
+var _mobx = require('mobx'); var mobx = _interopRequireWildcard(_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) {
+    _mobx.configure.call(void 0, { 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
     );
   }
@@ -68,18 +34,355 @@ function configure(config) {
   Object.assign(globalConfig, config);
 }
 
+// src/services.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function createServiceToken(description) {
+  return Symbol(description);
+}
+var ServiceContext = _react2.default.createContext(void 0);
+function ServiceProvider({ resolve, children }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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: _nullishCoalesce(resolve, () => ( globalConfig.resolveService)), values: /* @__PURE__ */ new WeakSet() }, construct);
+}
+function captureServiceScope(owner) {
+  scopes.set(owner, _nullishCoalesce(constructingScope, () => ( { resolve: globalConfig.resolveService, values: /* @__PURE__ */ new WeakSet() })));
+}
+function getServiceResolver(owner) {
+  return _optionalChain([scopes, 'access', _2 => _2.get, 'call', _3 => _3(owner), 'optionalAccess', _4 => _4.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 (!_optionalChain([scope, 'optionalAccess', _5 => _5.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 _nullishCoalesce(_optionalChain([scopes, 'access', _6 => _6.get, 'call', _7 => _7(owner), 'optionalAccess', _8 => _8.values, 'access', _9 => _9.has, 'call', _10 => _10(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
+
+
+var ModelContext = _react2.default.createContext(void 0);
+function ModelProvider({ models, children }) {
+  const [snapshot] = _react2.default.useState(() => new Map(Array.from(models, ([type, replacement]) => [type, { ...replacement }])));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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
+
+
+
+// src/observer.ts
+
+
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? _react.useLayoutEffect : _react.useEffect;
+var uncommittedReactionRegistry = typeof FinalizationRegistry !== "undefined" ? new FinalizationRegistry((adm) => {
+  _optionalChain([adm, 'access', _11 => _11.reaction, 'optionalAccess', _12 => _12.dispose, 'call', _13 => _13()]);
+  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 (0, _mobx.Reaction)(`mantle-observer(${adm.name})`, () => {
+    adm.stateVersion = /* @__PURE__ */ Symbol();
+    _optionalChain([adm, 'access', _14 => _14.onStoreChange, 'optionalCall', _15 => _15()]);
+  });
+  if (adm.holder) {
+    adm.holder.current = adm.reaction;
+  }
+}
+function useMantleObserver(render, name, holder) {
+  if (isServer) {
+    return render();
+  }
+  const admRef = _react.useRef.call(void 0, null);
+  if (!admRef.current) {
+    const adm2 = {
+      reaction: null,
+      onStoreChange: null,
+      stateVersion: /* @__PURE__ */ Symbol(),
+      name,
+      holder,
+      subscribe(onStoreChange) {
+        _optionalChain([uncommittedReactionRegistry, 'optionalAccess', _16 => _16.unregister, 'call', _17 => _17(adm2)]);
+        adm2.onStoreChange = onStoreChange;
+        if (!adm2.reaction) {
+          createReaction(adm2);
+          adm2.stateVersion = /* @__PURE__ */ Symbol();
+          onStoreChange();
+        }
+        return () => {
+          adm2.onStoreChange = null;
+          _optionalChain([adm2, 'access', _18 => _18.reaction, 'optionalAccess', _19 => _19.dispose, 'call', _20 => _20()]);
+          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);
+    _optionalChain([uncommittedReactionRegistry, 'optionalAccess', _21 => _21.register, 'call', _22 => _22(admRef, adm, adm)]);
+  }
+  _react.useSyncExternalStore.call(void 0, 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 = _react.memo.call(void 0, Observed);
+  trackedComponents.add(Memoized);
+  return Memoized;
+}
+
+// src/decorators.ts
+
+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 _optionalChain([descriptor, 'optionalAccess', _23 => _23.value]) !== "function" || kind === "getter" && !_optionalChain([descriptor, 'optionalAccess', _24 => _24.get]) || kind === "field" && descriptor) {
+        throw new Error(`[mobx-mantle] This decorator requires a public instance ${kind}.`);
+      }
+      map = _nullishCoalesce(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
-var BEHAVIOR_MARKER = /* @__PURE__ */ Symbol("behavior");
+
+
+// src/internals.ts
+
+function smartBind(fn, context) {
+  return function(...args) {
+    const globalState = _mobx._getGlobalState.call(void 0, );
+    const isInTrackingContext = globalState.trackingDerivation !== null;
+    if (isInTrackingContext) {
+      return fn.apply(context, args);
+    }
+    return _mobx.runInAction.call(void 0, () => fn.apply(context, args));
+  };
+}
+if (process.env.NODE_ENV !== "production") {
+  const globalState = _mobx._getGlobalState.call(void 0, );
+  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;
+    _optionalChain([spec, 'access', _25 => _25.dispose, 'optionalCall', _26 => _26()]);
+  };
+}
+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.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;
@@ -89,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 {
+        _mobx.runInAction.call(void 0, 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) {
@@ -107,36 +466,119 @@ var Behavior = class {
    * }
    * ```
    */
-  watch(expr, callback, options) {
-    const dispose = (0, import_mobx.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, _optionalChain([options, 'optionalAccess', _27 => _27.fireImmediately]), this.constructor.name);
+    return registerReactive(this, () => {
+      const dispose = _mobx.reaction.call(void 0, 
+        expr,
+        (value, prevValue) => {
+          try {
+            callback(value, prevValue);
+          } catch (e) {
+            reportError(e, { phase: "watch", name: this.constructor.name, isBehavior: true });
+          }
+        },
+        {
+          delay: _optionalChain([options, 'optionalAccess', _28 => _28.delay]),
+          fireImmediately: _optionalChain([options, 'optionalAccess', _29 => _29.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 = _mobx.autorun.call(void 0, 
+        () => {
+          _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _30 => _30()]));
+          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: _optionalChain([options, 'optionalAccess', _31 => _31.delay]) }
+      );
+      return this._addCleanup(() => {
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _32 => _32()]));
+        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 _chunkWNF647U6cjs.toValue.call(void 0, 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([
@@ -147,42 +589,117 @@ 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] = _mobx.observable.ref;
+      continue;
+    }
     if (isRefLike(value)) {
-      annotations[key] = import_mobx.observable.ref;
+      annotations[key] = _mobx.observable.ref;
     } else {
-      annotations[key] = import_mobx.observable;
+      annotations[key] = _mobx.observable;
     }
   }
-  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] = import_mobx.computed;
-      } else if (typeof descriptor.value === "function") {
-        annotations[key] = import_mobx.action.bound;
-      }
+  const protoInfo = collectProtoInfo(instance, Behavior.prototype, BEHAVIOR_EXCLUDES, behaviorProtoInfo);
+  for (const key of protoInfo.computedKeys) {
+    if (key in annotations) continue;
+    annotations[key] = _mobx.computed;
+  }
+  _mobx.makeObservable.call(void 0, 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);
     }
-    proto = Object.getPrototypeOf(proto);
   }
-  (0, import_mobx.makeObservable)(instance, annotations);
 }
 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, () => _mobx.runInAction.call(void 0, () => this.onCreate(...args)));
       }
-      const autoObservable = options?.autoObservable ?? globalConfig.autoObservable;
-      if (autoObservable) {
+      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 = _nullishCoalesce(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 = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _33 => _33.autoObservable]), () => ( globalConfig.autoObservable));
+      const annotations = getAnnotations(this);
+      if (annotations) {
+        _mobx.makeObservable.call(void 0, 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 {
-        (0, import_mobx.makeObservable)(this);
+        _mobx.makeObservable.call(void 0, this);
+      }
+      if (syncedFields.length > 0) {
+        const self = this;
+        const specs = syncedFields.map(({ key, source }) => ({
+          create: () => {
+            const dispose = _mobx.autorun.call(void 0, () => {
+              try {
+                const next = source();
+                self._syncWriting = true;
+                try {
+                  _mobx.runInAction.call(void 0, () => {
+                    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 {
+              _mobx.intercept.call(void 0, 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 (e2) {
+            }
+          }
+        }
       }
     }
   }, _c[_a] = true, _c);
@@ -195,35 +712,57 @@ function createBehavior(Def, options) {
 }
 function isBehavior(value) {
   if (value === null || typeof value !== "object") return false;
-  return value.constructor?.[BEHAVIOR_MARKER] === true;
+  return _optionalChain([value, 'access', _34 => _34.constructor, 'optionalAccess', _35 => _35[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 = _mobx.runInAction.call(void 0, () => 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 = _mobx.runInAction.call(void 0, () => 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);
+  _mobx.runInAction.call(void 0, () => _optionalChain([behavior, 'access', _36 => _36.layoutCleanup, 'optionalCall', _37 => _37()]));
+  _mobx.runInAction.call(void 0, () => _optionalChain([behavior, 'access', _38 => _38.cleanup, 'optionalCall', _39 => _39()]));
   if ("onUnmount" in inst && typeof inst.onUnmount === "function") {
     try {
-      inst.onUnmount();
+      _mobx.runInAction.call(void 0, () => inst.onUnmount());
     } catch (e) {
       reportError(e, { phase: "onUnmount", name: inst.constructor.name, isBehavior: true });
     }
@@ -231,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
-var mobx = __toESM(require("mobx"), 1);
-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
+
+var componentRefs = /* @__PURE__ */ new WeakSet();
+var ComponentParentContext = _react2.default.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;
@@ -280,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 = _mobx.createAtom.call(void 0, name);
+  }
+  get() {
+    const own = _optionalChain([this, 'access', _40 => _40._renderReaction, 'optionalAccess', _41 => _41.current]);
+    if (!own || _mobx._getGlobalState.call(void 0, ).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 _optionalChain([componentParents, 'access', _42 => _42.get, 'call', _43 => _43(this), 'optionalAccess', _44 => _44.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 _nullishCoalesce(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 = _react.forwardRef.call(void 0, (props, ref) => {
+      const scope = ownerScope(owner);
+      const rendered = useMantleObserver(() => render(withRef(props, ref)), name);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentParentContext.Provider, { value: scope.handle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ServiceContext.Provider, { value: scope.resolver, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModelContext.Provider, { value: scope.substitutions, children: rendered }) }) });
+    });
+    View.displayName = name;
+    const Memoized = _react.memo.call(void 0, 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 {
+        _mobx.runInAction.call(void 0, 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) => {
@@ -323,41 +1024,98 @@ var View = class {
    * }
    * ```
    */
-  watch(expr, callback, options) {
-    const dispose = (0, import_mobx2.reaction)(
-      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, _optionalChain([options, 'optionalAccess', _45 => _45.fireImmediately]), this.constructor.name);
+    return registerReactive(this, () => {
+      const dispose = _mobx.reaction.call(void 0, 
+        expr,
+        (value, prevValue) => {
+          try {
+            callback(value, prevValue);
+          } catch (e) {
+            reportError(e, { phase: "watch", name: this.constructor.name, isBehavior: false });
+          }
+        },
+        {
+          delay: _optionalChain([options, 'optionalAccess', _46 => _46.delay]),
+          fireImmediately: _optionalChain([options, 'optionalAccess', _47 => _47.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 = _mobx.autorun.call(void 0, 
+        () => {
+          _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _48 => _48()]));
+          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: _optionalChain([options, 'optionalAccess', _49 => _49.delay]) }
+      );
+      return this._addCleanup(() => {
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _50 => _50()]));
+        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 });
       }
     }
@@ -383,6 +1141,10 @@ var View = class {
 };
 var BASE_EXCLUDES = /* @__PURE__ */ new Set([
   "props",
+  "getParent",
+  "findParent",
+  "getParents",
+  "getRoot",
   "_propsBox",
   "forwardRef",
   "onCreate",
@@ -392,8 +1154,13 @@ var BASE_EXCLUDES = /* @__PURE__ */ new Set([
   "onUnmount",
   "render",
   "ref",
+  "view",
+  "addCleanup",
+  "_addCleanup",
   "watch",
+  "effect",
   "constructor",
+  "inject",
   "_behaviors",
   "_collectBehaviors",
   "_layoutMountBehaviors",
@@ -401,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),
@@ -416,71 +1187,98 @@ 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] = import_mobx2.observable.ref;
+      annotations[key] = _mobx.observable.ref;
       continue;
     }
-    if (isViewRef(value)) {
-      annotations[key] = import_mobx2.observable.ref;
+    if (isComponentRef(value)) {
+      annotations[key] = _mobx.observable.ref;
     } else {
-      annotations[key] = import_mobx2.observable;
+      annotations[key] = _mobx.observable;
     }
   }
-  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] = _mobx.computed;
+  }
+  _mobx.makeObservable.call(void 0, instance, annotations);
+  if (autoBind) {
+    for (const key of protoInfo.methodKeys) {
       if (key in annotations) continue;
-      if (descriptor.get) {
-        annotations[key] = import_mobx2.computed;
-      } else if (typeof descriptor.value === "function") {
-        annotations[key] = autoBind ? import_mobx2.action.bound : import_mobx2.action;
+      const method = instance[key];
+      if (typeof method === "function") {
+        instance[key] = smartBind(method, instance);
       }
     }
-    proto = Object.getPrototypeOf(proto);
   }
-  (0, import_mobx2.makeObservable)(instance, annotations);
 }
-function createView(ViewClass, templateOrOptions) {
+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] = _mobx.observable.ref;
+  }
+  _mobx.makeObservable.call(void 0, instance, annotations);
+}
+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 = (0, import_react.forwardRef)((props, ref) => {
-    const vmRef = (0, import_react.useRef)(null);
-    const classRef = (0, import_react.useRef)(ViewClass);
-    const prevPropsRef = (0, import_react.useRef)(null);
-    const propsNotifyingRef = (0, import_react.useRef)(false);
-    if (vmRef.current && classRef.current !== ViewClass) {
-      classRef.current = ViewClass;
+  const ReactComponent = _react.forwardRef.call(void 0, (props, ref) => {
+    const parentHandle = _react2.default.useContext(ComponentParentContext);
+    const resolver = _react2.default.useContext(ServiceContext);
+    const substitutions = _react2.default.useContext(ModelContext);
+    const substitutedTemplate = _react.useRef.call(void 0, void 0);
+    const vmRef = _react.useRef.call(void 0, null);
+    const componentHandleRef = _react.useRef.call(void 0, null);
+    const classRef = _react.useRef.call(void 0, ComponentClass);
+    const prevPropsRef = _react.useRef.call(void 0, null);
+    const propsNotifyingRef = _react.useRef.call(void 0, false);
+    const renderReactionRef = _react.useRef.call(void 0, { 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 = import_mobx2.observable.box(props, { deep: false });
+      applyMobxActionPolicy();
+      const substitution = _optionalChain([substitutions, 'optionalAccess', _51 => _51.get, 'call', _52 => _52(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 = _optionalChain([substitution, 'optionalAccess', _53 => _53.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] = import_mobx2.action.bound;
-            }
+        _mobx.makeObservable.call(void 0, 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);
         }
-        (0, import_mobx2.makeObservable)(instance, annotations);
       } else if (autoObservable) {
-        makeViewObservable(instance, true);
+        makeComponentObservable(instance, true);
       } else {
-        (0, import_mobx2.makeObservable)(instance);
+        _mobx.makeObservable.call(void 0, instance);
       }
       const reactiveProps = new Proxy({}, {
         get: (_, key) => instance.props[key],
@@ -488,100 +1286,283 @@ function createView(ViewClass, templateOrOptions) {
         ownKeys: () => Reflect.ownKeys(instance.props),
         getOwnPropertyDescriptor: (_, key) => Reflect.getOwnPropertyDescriptor(instance.props, key)
       });
-      instance.onCreate?.(reactiveProps);
+      withOwnerServiceScope(instance, () => _mobx.runInAction.call(void 0, () => _optionalChain([instance, 'access', _54 => _54.onCreate, 'optionalCall', _55 => _55(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 (!_mobx.isObservableProp.call(void 0, 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 = _nullishCoalesce(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;
-    (0, import_react.useLayoutEffect)(() => {
+    useIsomorphicLayoutEffect(() => {
       if (!shallowEqual(prevPropsRef.current, props)) {
         prevPropsRef.current = props;
         propsNotifyingRef.current = true;
-        (0, import_mobx2.runInAction)(() => {
+        _mobx.runInAction.call(void 0, () => {
           vm._propsBox.set(props);
         });
         propsNotifyingRef.current = false;
       }
     });
-    (0, import_react.useLayoutEffect)(() => {
+    useIsomorphicLayoutEffect(() => {
+      activateSpecs(vm);
       vm._layoutMountBehaviors();
       let cleanup;
       try {
-        const result = vm.onLayoutMount?.();
+        const result = _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _56 => _56.onLayoutMount, 'optionalCall', _57 => _57()]));
         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?.();
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _58 => _58()]));
       };
     }, [vm]);
-    (0, import_react.useEffect)(() => {
+    _react.useEffect.call(void 0, () => {
       vm._mountBehaviors();
       let cleanup;
       try {
-        const result = vm.onMount?.();
+        const result = _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _59 => _59.onMount, 'optionalCall', _60 => _60()]));
         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?.();
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _61 => _61()]));
         try {
-          vm.onUnmount?.();
+          _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _62 => _62.onUnmount, 'optionalCall', _63 => _63()]));
         } 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]);
-    (0, import_react.useEffect)(() => {
+    _react.useEffect.call(void 0, () => {
       try {
-        vm.onUpdate?.();
+        _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _64 => _64.onUpdate, 'optionalCall', _65 => _65()]));
       } 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 (0, import_mobx_react_lite.useObserver)(() => {
-      return template ? template(vm) : vm.render();
-    });
+    const rendered = useMantleObserver(
+      () => renderTemplate ? renderTemplate(vm) : vm.render(),
+      ComponentClass.name,
+      renderReactionRef.current
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentParentContext.Provider, { value: componentHandle, children: rendered });
   });
-  return (0, import_react.memo)(Component);
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Behavior,
-  View,
-  ViewModel,
-  action,
-  computed,
-  configure,
-  createBehavior,
-  createView,
-  observable
-});
+  return _react.memo.call(void 0, ReactComponent);
+}
+function createForwardRef(ComponentClass, templateOrOptions) {
+  return createComponent(ComponentClass, templateOrOptions);
+}
+function createView(ModelClass, template) {
+  const name = `${ModelClass.name}.${template.name || "view"}`;
+  const View = _react.forwardRef.call(void 0, (props, ref) => {
+    let vm = _optionalChain([_react.useContext.call(void 0, ComponentParentContext), 'optionalAccess', _66 => _66.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 = _react.memo.call(void 0, View);
+  trackedComponents.add(Memoized);
+  return Memoized;
+}
+
+// src/useBehavior.ts
+
+
+function useBehavior(create) {
+  const resolver = _react.useContext.call(void 0, ServiceContext);
+  const [entry] = _react.useState.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    if (!isBehavior(entry.instance)) return;
+    mountBehavior(entry);
+    return () => unmountBehavior(entry);
+  }, [entry]);
+  return entry.instance;
+}
+
+// src/shared.ts
+
+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 _mobx.isObservableProp.call(void 0, store, key);
+  });
+}
+function serialize(store, fields) {
+  const values = {};
+  for (const field of fields) values[field] = _mobx.toJS.call(void 0, store[field]);
+  return JSON.stringify(values);
+}
+function apply(store, fields, json) {
+  let parsed;
+  try {
+    parsed = JSON.parse(json);
+  } catch (e3) {
+    return false;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return false;
+  const values = parsed;
+  _mobx.runInAction.call(void 0, () => {
+    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 (e4) {
+    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;
+  _optionalChain([channel, 'optionalAccess', _67 => _67.unref, 'optionalCall', _68 => _68()]);
+  let stored = null;
+  try {
+    stored = _nullishCoalesce(_optionalChain([storage, 'optionalAccess', _69 => _69.getItem, 'call', _70 => _70(key)]), () => ( null));
+  } catch (e5) {
+    stored = null;
+  }
+  if (stored !== null) apply(target, fields, stored);
+  let current = serialize(target, fields);
+  const stopPublish = _mobx.reaction.call(void 0, 
+    () => serialize(target, fields),
+    (json) => {
+      if (json === current) return;
+      current = json;
+      try {
+        _optionalChain([storage, 'optionalAccess', _71 => _71.setItem, 'call', _72 => _72(key, json)]);
+      } catch (e6) {
+      }
+      _optionalChain([channel, 'optionalAccess', _73 => _73.postMessage, 'call', _74 => _74(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);
+  };
+  _optionalChain([channel, 'optionalAccess', _75 => _75.addEventListener, 'call', _76 => _76("message", onMessage)]);
+  window.addEventListener("storage", onStorage);
+  registry.set(store, {
+    dispose() {
+      stopPublish();
+      _optionalChain([channel, 'optionalAccess', _77 => _77.removeEventListener, 'call', _78 => _78("message", onMessage)]);
+      _optionalChain([channel, 'optionalAccess', _79 => _79.close, 'call', _80 => _80()]);
+      window.removeEventListener("storage", onStorage);
+      registry.delete(store);
+    }
+  });
+  return store;
+}
+function unshare(store) {
+  _optionalChain([registry, 'access', _81 => _81.get, 'call', _82 => _82(store), 'optionalAccess', _83 => _83.dispose, 'call', _84 => _84()]);
+}
+function shareStores(stores, options = {}) {
+  const { prefix = "shared", ...rest } = options;
+  for (const [name, store] of Object.entries(stores)) {
+    shared(store, `${prefix}:${name}`, rest);
+  }
+  return stores;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Behavior = Behavior; exports.Component = Component; exports.ModelProvider = ModelProvider; exports.ServiceProvider = ServiceProvider; exports.ViewModel = Component; exports.action = action2; exports.computed = computed2; exports.configure = configure; exports.createBehavior = createBehavior; exports.createComponent = createComponent; exports.createForwardRef = createForwardRef; exports.createServiceToken = createServiceToken; exports.createView = createView; exports.inject = inject; exports.isModel = isModel; exports.observable = observable2; exports.observer = observer; exports.shareStores = shareStores; exports.shared = shared; exports.toValue = _chunkWNF647U6cjs.toValue; exports.unshare = unshare; exports.useBehavior = useBehavior; exports.withInjectionScope = withInjectionScope;
 //# sourceMappingURL=index.cjs.map