@fictjs/runtime 0.2.2 → 0.3.0

package/dist/index.dev.js

@@ -21,110 +21,158 @@ var endFlushGuard = () => {
 var enterRootGuard = () => true;
 var exitRootGuard = () => {
 };
-if (isDev) {
-  const defaultOptions = {
-    maxFlushCyclesPerMicrotask: 1e4,
-    maxEffectRunsPerFlush: 2e4,
-    windowSize: 5,
-    highUsageRatio: 0.8,
-    maxRootReentrantDepth: 10,
-    enableWindowWarning: true,
-    devMode: false
-  };
-  let options = {
-    ...defaultOptions
-  };
-  let effectRunsThisFlush = 0;
-  let windowUsage = [];
-  let rootDepth = /* @__PURE__ */ new WeakMap();
-  let flushWarned = false;
-  let rootWarned = false;
-  let windowWarned = false;
-  setCycleProtectionOptions = (opts) => {
-    options = { ...options, ...opts };
-  };
-  resetCycleProtectionStateForTests = () => {
-    options = { ...defaultOptions };
-    effectRunsThisFlush = 0;
-    windowUsage = [];
-    rootDepth = /* @__PURE__ */ new WeakMap();
-    flushWarned = false;
-    rootWarned = false;
-    windowWarned = false;
-  };
-  beginFlushGuard = () => {
-    effectRunsThisFlush = 0;
-    flushWarned = false;
-    windowWarned = false;
-  };
-  beforeEffectRunGuard = () => {
-    const next = ++effectRunsThisFlush;
-    if (next > options.maxFlushCyclesPerMicrotask || next > options.maxEffectRunsPerFlush) {
-      const message = `[fict] cycle protection triggered: flush-budget-exceeded`;
-      if (options.devMode) {
-        throw new Error(message);
-      }
-      if (!flushWarned) {
-        flushWarned = true;
-        console.warn(message, { effectRuns: next });
-      }
-      return false;
+var defaultOptions = {
+  enabled: true,
+  maxFlushCyclesPerMicrotask: 1e4,
+  maxEffectRunsPerFlush: 2e4,
+  windowSize: 5,
+  highUsageRatio: 0.8,
+  maxRootReentrantDepth: 10,
+  enableWindowWarning: true,
+  devMode: isDev,
+  // Backoff warning options
+  enableBackoffWarning: isDev,
+  backoffWarningRatio: 0.5
+};
+var enabled = defaultOptions.enabled;
+var options = {
+  ...defaultOptions
+};
+var effectRunsThisFlush = 0;
+var windowUsage = [];
+var rootDepth = /* @__PURE__ */ new WeakMap();
+var flushWarned = false;
+var rootWarned = false;
+var windowWarned = false;
+var backoffWarned50 = false;
+var backoffWarned75 = false;
+setCycleProtectionOptions = (opts) => {
+  if (typeof opts.enabled === "boolean") {
+    enabled = opts.enabled;
+  }
+  options = { ...options, ...opts };
+};
+resetCycleProtectionStateForTests = () => {
+  options = { ...defaultOptions };
+  enabled = defaultOptions.enabled;
+  effectRunsThisFlush = 0;
+  windowUsage = [];
+  rootDepth = /* @__PURE__ */ new WeakMap();
+  flushWarned = false;
+  rootWarned = false;
+  windowWarned = false;
+  backoffWarned50 = false;
+  backoffWarned75 = false;
+};
+beginFlushGuard = () => {
+  if (!enabled) return;
+  effectRunsThisFlush = 0;
+  flushWarned = false;
+  windowWarned = false;
+  backoffWarned50 = false;
+  backoffWarned75 = false;
+};
+beforeEffectRunGuard = () => {
+  if (!enabled) return true;
+  const next = ++effectRunsThisFlush;
+  const limit = Math.min(options.maxFlushCyclesPerMicrotask, options.maxEffectRunsPerFlush);
+  if (options.enableBackoffWarning && isDev) {
+    const ratio = next / limit;
+    const backoffRatio = options.backoffWarningRatio ?? 0.5;
+    if (!backoffWarned50 && ratio >= backoffRatio && ratio < backoffRatio + 0.25) {
+      backoffWarned50 = true;
+      console.warn(
+        `[fict] cycle guard: approaching effect limit (${Math.round(ratio * 100)}% of budget used)
+  - Current: ${next} effects, Limit: ${limit}
+  - Tip: Check for effects that trigger other effects in a loop.
+  - Common causes: signal updates inside effects that read and write the same signal.`
+      );
+    } else if (!backoffWarned75 && ratio >= backoffRatio + 0.25 && ratio < 1) {
+      backoffWarned75 = true;
+      console.warn(
+        `[fict] cycle guard: nearing effect limit (${Math.round(ratio * 100)}% of budget used)
+  - Current: ${next} effects, Limit: ${limit}
+  - Warning: Consider breaking the reactive dependency cycle.
+  - Debug: Use browser devtools to identify the recursive effect chain.`
+      );
     }
-    return true;
-  };
-  endFlushGuard = () => {
-    recordWindowUsage(effectRunsThisFlush, options.maxFlushCyclesPerMicrotask);
-    effectRunsThisFlush = 0;
-  };
-  enterRootGuard = (root) => {
-    const depth = (rootDepth.get(root) ?? 0) + 1;
-    if (depth > options.maxRootReentrantDepth) {
-      const message = `[fict] cycle protection triggered: root-reentry`;
-      if (options.devMode) {
-        throw new Error(message);
-      }
-      if (!rootWarned) {
-        rootWarned = true;
-        console.warn(message, { depth });
-      }
-      return false;
+  }
+  if (next > limit) {
+    const message = `[fict] cycle protection triggered: flush-budget-exceeded`;
+    if (options.devMode) {
+      throw new Error(
+        message + `
+  - Effect runs: ${next}, Limit: ${limit}
+  - This indicates a reactive cycle where effects keep triggering each other.
+  - Check for patterns like: createEffect(() => { signal(); signal(newValue); })`
+      );
     }
-    rootDepth.set(root, depth);
-    return true;
-  };
-  exitRootGuard = (root) => {
-    const depth = rootDepth.get(root);
-    if (depth === void 0) return;
-    if (depth <= 1) {
-      rootDepth.delete(root);
-    } else {
-      rootDepth.set(root, depth - 1);
+    if (!flushWarned) {
+      flushWarned = true;
+      console.warn(message, { effectRuns: next, limit });
     }
-  };
-  const recordWindowUsage = (used, budget) => {
-    if (!options.enableWindowWarning) return;
-    const entry = { used, budget };
-    windowUsage.push(entry);
-    if (windowUsage.length > options.windowSize) {
-      windowUsage.shift();
-    }
-    if (windowWarned) return;
-    if (windowUsage.length >= options.windowSize && windowUsage.every(
-      (item) => item.budget > 0 && item.used / item.budget >= options.highUsageRatio
-    )) {
-      windowWarned = true;
-      reportCycle("high-usage-window", {
-        windowSize: options.windowSize,
-        ratio: options.highUsageRatio
-      });
+    return false;
+  }
+  return true;
+};
+endFlushGuard = () => {
+  if (!enabled) return;
+  recordWindowUsage(effectRunsThisFlush, options.maxFlushCyclesPerMicrotask);
+  effectRunsThisFlush = 0;
+};
+enterRootGuard = (root) => {
+  if (!enabled) return true;
+  const depth = (rootDepth.get(root) ?? 0) + 1;
+  if (depth > options.maxRootReentrantDepth) {
+    const message = `[fict] cycle protection triggered: root-reentry`;
+    if (options.devMode) {
+      throw new Error(
+        message + `
+  - Re-entry depth: ${depth}, Max allowed: ${options.maxRootReentrantDepth}
+  - This indicates recursive render() or component initialization.
+  - Check for components that trigger re-renders during their own render phase.`
+      );
     }
-  };
-  const reportCycle = (reason, detail = void 0) => {
-    const hook = getDevtoolsHook();
-    hook?.cycleDetected?.(detail ? { reason, detail } : { reason });
-    console.warn(`[fict] cycle protection triggered: ${reason}`, detail ?? "");
-  };
-}
+    if (!rootWarned) {
+      rootWarned = true;
+      console.warn(message, { depth, maxAllowed: options.maxRootReentrantDepth });
+    }
+    return false;
+  }
+  rootDepth.set(root, depth);
+  return true;
+};
+exitRootGuard = (root) => {
+  if (!enabled) return;
+  const depth = rootDepth.get(root);
+  if (depth === void 0) return;
+  if (depth <= 1) {
+    rootDepth.delete(root);
+  } else {
+    rootDepth.set(root, depth - 1);
+  }
+};
+var recordWindowUsage = (used, budget) => {
+  if (!options.enableWindowWarning) return;
+  const entry = { used, budget };
+  windowUsage.push(entry);
+  if (windowUsage.length > options.windowSize) {
+    windowUsage.shift();
+  }
+  if (windowWarned) return;
+  if (windowUsage.length >= options.windowSize && windowUsage.every((item) => item.budget > 0 && item.used / item.budget >= options.highUsageRatio)) {
+    windowWarned = true;
+    reportCycle("high-usage-window", {
+      windowSize: options.windowSize,
+      ratio: options.highUsageRatio
+    });
+  }
+};
+var reportCycle = (reason, detail = void 0) => {
+  const hook = getDevtoolsHook();
+  hook?.cycleDetected?.(detail ? { reason, detail } : { reason });
+  console.warn(`[fict] cycle protection triggered: ${reason}`, detail ?? "");
+};
 
 // src/lifecycle.ts
 var isDev2 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
@@ -173,13 +221,19 @@ function onCleanup(fn) {
 function flushOnMount(root) {
   const cbs = root.onMountCallbacks;
   if (!cbs || cbs.length === 0) return;
-  for (let i = 0; i < cbs.length; i++) {
-    const cleanup = cbs[i]();
-    if (typeof cleanup === "function") {
-      root.cleanups.push(cleanup);
+  const prevRoot = currentRoot;
+  currentRoot = root;
+  try {
+    for (let i = 0; i < cbs.length; i++) {
+      const cleanup = cbs[i]();
+      if (typeof cleanup === "function") {
+        root.cleanups.push(cleanup);
+      }
     }
+  } finally {
+    currentRoot = prevRoot;
+    cbs.length = 0;
   }
-  cbs.length = 0;
 }
 function registerRootCleanup(fn) {
   if (currentRoot) {
@@ -208,8 +262,8 @@ function destroyRoot(root) {
     globalSuspenseHandlers.delete(root);
   }
 }
-function createRoot(fn, options) {
-  const parent = options?.inherit ? currentRoot : void 0;
+function createRoot(fn, options2) {
+  const parent = options2?.inherit ? currentRoot : void 0;
   const root = createRootContext(parent);
   const prev = pushRoot(root);
   let value;
@@ -364,8 +418,98 @@ function handleSuspend(token, startRoot) {
   return false;
 }
 
-// src/signal.ts
+// src/effect.ts
+function createEffect(fn) {
+  let cleanups = [];
+  const rootForError = getCurrentRoot();
+  const doCleanup = () => {
+    runCleanupList(cleanups);
+    cleanups = [];
+  };
+  const run = () => {
+    const bucket = [];
+    withEffectCleanups(bucket, () => {
+      try {
+        const maybeCleanup = fn();
+        if (typeof maybeCleanup === "function") {
+          bucket.push(maybeCleanup);
+        }
+      } catch (err) {
+        if (handleSuspend(err, rootForError)) {
+          return;
+        }
+        if (handleError(err, { source: "effect" }, rootForError)) {
+          return;
+        }
+        throw err;
+      }
+    });
+    cleanups = bucket;
+  };
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
+  const teardown = () => {
+    runCleanupList(cleanups);
+    disposeEffect();
+  };
+  registerRootCleanup(teardown);
+  return teardown;
+}
+function createRenderEffect(fn) {
+  let cleanup;
+  const rootForError = getCurrentRoot();
+  const doCleanup = () => {
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+  };
+  const run = () => {
+    try {
+      const maybeCleanup = fn();
+      if (typeof maybeCleanup === "function") {
+        cleanup = maybeCleanup;
+      }
+    } catch (err) {
+      if (handleSuspend(err, rootForError)) {
+        return;
+      }
+      const handled = handleError(err, { source: "effect" }, rootForError);
+      if (handled) {
+        return;
+      }
+      throw err;
+    }
+  };
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
+  const teardown = () => {
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+    disposeEffect();
+  };
+  registerRootCleanup(teardown);
+  return teardown;
+}
+
+// src/hooks.ts
 var isDev3 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var ctxStack = [];
+function __fictPushContext() {
+  const ctx = { slots: [], cursor: 0 };
+  ctxStack.push(ctx);
+  return ctx;
+}
+function __fictGetCurrentComponentId() {
+  return ctxStack[ctxStack.length - 1]?.componentId;
+}
+function __fictPopContext() {
+  const ctx = ctxStack.pop();
+  if (ctx) ctx.rendering = false;
+}
+
+// src/signal.ts
+var isDev4 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 var Mutable = 1;
 var Watching = 2;
 var Running = 4;
@@ -410,6 +554,7 @@ function link(dep, sub, version) {
   else sub.deps = newLink;
   if (prevSub !== void 0) prevSub.nextSub = newLink;
   else dep.subs = newLink;
+  if (isDev4) trackDependencyDevtools(dep, sub);
 }
 function unlink(lnk, sub = lnk.sub) {
   const dep = lnk.dep;
@@ -425,6 +570,7 @@ function unlink(lnk, sub = lnk.sub) {
   else dep.subsTail = prevSub;
   if (prevSub !== void 0) prevSub.nextSub = nextSub;
   else if ((dep.subs = nextSub) === void 0) unwatched(dep);
+  if (isDev4) untrackDependencyDevtools(dep, sub);
   return nextDep;
 }
 function unwatched(dep) {
@@ -581,6 +727,11 @@ function shallowPropagate(firstLink) {
 function update(node) {
   return "getter" in node && node.getter !== void 0 ? updateComputed(node) : updateSignal(node);
 }
+function valuesDiffer(node, prev, next) {
+  if (node.equals === false) return true;
+  if (typeof node.equals === "function") return !node.equals(prev, next);
+  return prev !== next;
+}
 function notify(effect) {
   effect.flags &= ~Watching;
   const effects = [];
@@ -617,7 +768,7 @@ function updateSignal(s) {
   s.flags = Mutable;
   const current = s.currentValue;
   const pending = s.pendingValue;
-  if (current !== pending) {
+  if (valuesDiffer(s, current, pending)) {
     s.currentValue = pending;
     return true;
   }
@@ -635,8 +786,9 @@ function updateComputed(c) {
     activeSub = prevSub;
     c.flags &= ~Running;
     purgeDeps(c);
-    if (oldValue !== newValue) {
+    if (valuesDiffer(c, oldValue, newValue)) {
       c.value = newValue;
+      if (isDev4) updateComputedDevtools(c, newValue);
       return true;
     }
     return false;
@@ -658,7 +810,7 @@ function runEffect(e) {
       }
     }
     ++cycle;
-    effectRunDevtools(e);
+    if (isDev4) effectRunDevtools(e);
     e.depsTail = void 0;
     e.flags = WatchingRunning;
     const prevSub = activeSub;
@@ -702,7 +854,7 @@ function runEffect(e) {
     }
     if (isDirty) {
       ++cycle;
-      effectRunDevtools(e);
+      if (isDev4) effectRunDevtools(e);
       e.depsTail = void 0;
       e.flags = WatchingRunning;
       const prevSub = activeSub;
@@ -751,10 +903,21 @@ function flush() {
   while (highIndex < highPriorityQueue.length) {
     const e = highPriorityQueue[highIndex];
     if (!beforeEffectRunGuard()) {
-      if (highIndex > 0) {
-        highPriorityQueue.copyWithin(0, highIndex);
-        highPriorityQueue.length -= highIndex;
+      for (let i = 0; i < highPriorityQueue.length; i++) {
+        const queued = highPriorityQueue[i];
+        if (queued && queued.flags !== 0) {
+          queued.flags = Watching;
+        }
+      }
+      for (let i = 0; i < lowPriorityQueue.length; i++) {
+        const queued = lowPriorityQueue[i];
+        if (queued && queued.flags !== 0) {
+          queued.flags = Watching;
+        }
       }
+      highPriorityQueue.length = 0;
+      lowPriorityQueue.length = 0;
+      flushScheduled = false;
       endFlushGuard();
       return;
     }
@@ -775,10 +938,21 @@ function flush() {
     }
     const e = lowPriorityQueue[lowIndex];
     if (!beforeEffectRunGuard()) {
-      if (lowIndex > 0) {
-        lowPriorityQueue.copyWithin(0, lowIndex);
-        lowPriorityQueue.length -= lowIndex;
+      for (let i = 0; i < highPriorityQueue.length; i++) {
+        const queued = highPriorityQueue[i];
+        if (queued && queued.flags !== 0) {
+          queued.flags = Watching;
+        }
       }
+      for (let i = 0; i < lowPriorityQueue.length; i++) {
+        const queued = lowPriorityQueue[i];
+        if (queued && queued.flags !== 0) {
+          queued.flags = Watching;
+        }
+      }
+      highPriorityQueue.length = 0;
+      lowPriorityQueue.length = 0;
+      flushScheduled = false;
       endFlushGuard();
       return;
     }
@@ -788,26 +962,31 @@ function flush() {
   lowPriorityQueue.length = 0;
   endFlushGuard();
 }
-function signal(initialValue) {
+function signal(initialValue, options2) {
   const s = {
     currentValue: initialValue,
     pendingValue: initialValue,
     subs: void 0,
     subsTail: void 0,
     flags: Mutable,
-    __id: void 0
+    __id: void 0,
+    ...options2?.equals !== void 0 ? { equals: options2.equals } : {},
+    ...options2?.name !== void 0 ? { name: options2.name } : {},
+    ...options2?.devToolsSource !== void 0 ? { devToolsSource: options2.devToolsSource } : {}
   };
-  registerSignalDevtools(initialValue, s);
+  if (isDev4) registerSignalDevtools(s);
   const accessor = signalOper.bind(s);
   accessor[SIGNAL_MARKER] = true;
   return accessor;
 }
 function signalOper(value) {
   if (arguments.length > 0) {
-    if (this.pendingValue !== value) {
-      this.pendingValue = value;
+    const next = value;
+    const prev = this.pendingValue;
+    if (valuesDiffer(this, prev, next)) {
+      this.pendingValue = next;
       this.flags = MutableDirty;
-      updateSignalDevtools(this, value);
+      if (isDev4) updateSignalDevtools(this, next);
       const subs = this.subs;
       if (subs !== void 0) {
         propagate(subs);
@@ -834,7 +1013,7 @@ function signalOper(value) {
   }
   return this.currentValue;
 }
-function computed(getter) {
+function computed(getter, options2) {
   const c = {
     value: void 0,
     subs: void 0,
@@ -842,13 +1021,21 @@ function computed(getter) {
     deps: void 0,
     depsTail: void 0,
     flags: 0,
-    getter
+    getter,
+    __id: void 0,
+    ...options2?.equals !== void 0 ? { equals: options2.equals } : {},
+    ...options2?.name !== void 0 ? { name: options2.name } : {},
+    ...options2?.devToolsSource !== void 0 ? { devToolsSource: options2.devToolsSource } : {}
   };
-  const bound = computedOper.bind(c);
+  if (isDev4) registerComputedDevtools(c);
+  const bound = computedOper.bind(
+    c
+  );
   bound[COMPUTED_MARKER] = true;
   return bound;
 }
 function computedOper() {
+  if (inCleanup) return this.value;
   const flags = this.flags;
   if (flags & Dirty) {
     if (updateComputed(this)) {
@@ -869,6 +1056,7 @@ function computedOper() {
     const prevSub = setActiveSub(this);
     try {
       this.value = this.getter(void 0);
+      if (isDev4) updateComputedDevtools(this, this.value);
     } finally {
       setActiveSub(prevSub);
       this.flags &= ~Running;
@@ -892,12 +1080,12 @@ function effectWithCleanup(fn, cleanupRunner, root) {
   if (resolvedRoot) {
     e.root = resolvedRoot;
   }
-  registerEffectDevtools(e);
+  if (isDev4) registerEffectDevtools(e);
   const prevSub = activeSub;
   if (prevSub !== void 0) link(e, prevSub, 0);
   activeSub = e;
   try {
-    effectRunDevtools(e);
+    if (isDev4) effectRunDevtools(e);
     fn();
   } finally {
     activeSub = prevSub;
@@ -969,17 +1157,28 @@ function setTransitionContext(value) {
 var registerSignalDevtools = () => void 0;
 var updateSignalDevtools = () => {
 };
+var registerComputedDevtools = () => void 0;
+var updateComputedDevtools = () => {
+};
 var registerEffectDevtools = () => void 0;
 var effectRunDevtools = () => {
 };
-if (isDev3) {
-  let devtoolsSignalId = 0;
-  let devtoolsEffectId = 0;
-  registerSignalDevtools = (value, node) => {
+var trackDependencyDevtools = () => {
+};
+var untrackDependencyDevtools = () => {
+};
+if (isDev4) {
+  let nextDevtoolsId = 0;
+  registerSignalDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
-    const id = ++devtoolsSignalId;
-    hook.registerSignal(id, value);
+    const id = ++nextDevtoolsId;
+    const options2 = {};
+    if (node.name !== void 0) options2.name = node.name;
+    if (node.devToolsSource !== void 0) options2.source = node.devToolsSource;
+    const ownerId = __fictGetCurrentComponentId();
+    if (ownerId !== void 0) options2.ownerId = ownerId;
+    hook.registerSignal(id, node.currentValue, options2);
     node.__id = id;
     return id;
   };
@@ -989,11 +1188,32 @@ if (isDev3) {
     const id = node.__id;
     if (id) hook.updateSignal(id, value);
   };
+  registerComputedDevtools = (node) => {
+    const hook = getDevtoolsHook();
+    if (!hook) return void 0;
+    const id = ++nextDevtoolsId;
+    const options2 = {};
+    if (node.name !== void 0) options2.name = node.name;
+    if (node.devToolsSource !== void 0) options2.source = node.devToolsSource;
+    const ownerId = __fictGetCurrentComponentId();
+    if (ownerId !== void 0) options2.ownerId = ownerId;
+    options2.hasValue = false;
+    hook.registerComputed(id, node.value, options2);
+    node.__id = id;
+    return id;
+  };
+  updateComputedDevtools = (node, value) => {
+    const hook = getDevtoolsHook();
+    if (!hook) return;
+    const id = node.__id;
+    if (id) hook.updateComputed(id, value);
+  };
   registerEffectDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
-    const id = ++devtoolsEffectId;
-    hook.registerEffect(id);
+    const id = ++nextDevtoolsId;
+    const ownerId = __fictGetCurrentComponentId();
+    hook.registerEffect(id, ownerId !== void 0 ? { ownerId } : void 0);
     node.__id = id;
     return id;
   };
@@ -1003,85 +1223,25 @@ if (isDev3) {
     const id = node.__id;
     if (id) hook.effectRun(id);
   };
-}
-
-// src/memo.ts
-function createMemo(fn) {
-  return computed(fn);
-}
-
-// src/effect.ts
-function createEffect(fn) {
-  let cleanups = [];
-  const rootForError = getCurrentRoot();
-  const doCleanup = () => {
-    runCleanupList(cleanups);
-    cleanups = [];
-  };
-  const run = () => {
-    const bucket = [];
-    withEffectCleanups(bucket, () => {
-      try {
-        const maybeCleanup = fn();
-        if (typeof maybeCleanup === "function") {
-          bucket.push(maybeCleanup);
-        }
-      } catch (err) {
-        if (handleSuspend(err, rootForError)) {
-          return;
-        }
-        if (handleError(err, { source: "effect" }, rootForError)) {
-          return;
-        }
-        throw err;
-      }
-    });
-    cleanups = bucket;
+  trackDependencyDevtools = (dep, sub) => {
+    const hook = getDevtoolsHook();
+    if (!hook?.trackDependency) return;
+    const depId = dep.__id;
+    const subId = sub.__id;
+    if (depId && subId) hook.trackDependency(subId, depId);
   };
-  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
-  const teardown = () => {
-    runCleanupList(cleanups);
-    disposeEffect();
+  untrackDependencyDevtools = (dep, sub) => {
+    const hook = getDevtoolsHook();
+    if (!hook?.untrackDependency) return;
+    const depId = dep.__id;
+    const subId = sub.__id;
+    if (depId && subId) hook.untrackDependency(subId, depId);
   };
-  registerRootCleanup(teardown);
-  return teardown;
 }
-function createRenderEffect(fn) {
-  let cleanup;
-  const rootForError = getCurrentRoot();
-  const doCleanup = () => {
-    if (cleanup) {
-      cleanup();
-      cleanup = void 0;
-    }
-  };
-  const run = () => {
-    try {
-      const maybeCleanup = fn();
-      if (typeof maybeCleanup === "function") {
-        cleanup = maybeCleanup;
-      }
-    } catch (err) {
-      if (handleSuspend(err, rootForError)) {
-        return;
-      }
-      const handled = handleError(err, { source: "effect" }, rootForError);
-      if (handled) {
-        return;
-      }
-      throw err;
-    }
-  };
-  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
-  const teardown = () => {
-    if (cleanup) {
-      cleanup();
-      cleanup = void 0;
-    }
-    disposeEffect();
-  };
-  registerRootCleanup(teardown);
-  return teardown;
+
+// src/memo.ts
+function createMemo(fn, options2) {
+  return computed(fn, options2);
 }
 
 // src/ref.ts
@@ -1165,8 +1325,8 @@ var DelegatedEventNames = [
 ];
 
 // src/constants.ts
-var isDev4 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
-var booleans = isDev4 ? [
+var isDev5 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var booleans = isDev5 ? [
   "allowfullscreen",
   "async",
   "alpha",
@@ -1216,7 +1376,7 @@ var booleans = isDev4 ? [
   "sharedstoragewritable"
 ] : [];
 var BooleanAttributes = new Set(booleans);
-var properties = isDev4 ? [
+var properties = isDev5 ? [
   // Core properties
   "className",
   "value",
@@ -1252,7 +1412,7 @@ var ChildProperties = /* @__PURE__ */ new Set([
   "innerText",
   "children"
 ]);
-var PropAliases = isDev4 ? {
+var PropAliases = isDev5 ? {
   // Direct mapping
   class: "className",
   // Element-specific mappings
@@ -1341,7 +1501,7 @@ var PropAliases = isDev4 ? {
   }
 } : {};
 function getPropAlias(prop2, tagName) {
-  if (!isDev4) return void 0;
+  if (!isDev5) return void 0;
   const a = PropAliases[prop2];
   if (typeof a === "object") {
     return a[tagName] ? a["$"] : void 0;
@@ -1350,7 +1510,7 @@ function getPropAlias(prop2, tagName) {
 }
 var $$EVENTS = "_$FICT_DELEGATE";
 var DelegatedEvents = new Set(DelegatedEventNames);
-var svgElements = isDev4 ? [
+var svgElements = isDev5 ? [
   "altGlyph",
   "altGlyphDef",
   "altGlyphItem",
@@ -1434,7 +1594,7 @@ var SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-var unitlessList = isDev4 ? [
+var unitlessList = isDev5 ? [
   "animationIterationCount",
   "animation-iteration-count",
   "borderImageOutset",
@@ -1657,13 +1817,22 @@ function removeNodes(nodes) {
 }
 
 // src/binding.ts
-var isDev5 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev6 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 function isReactive(value) {
   if (typeof value !== "function") return false;
   if (isSignal(value) || isComputed(value)) return true;
   if (isEffect(value) || isEffectScope(value)) return false;
   return value.length === 0;
 }
+function isStrictlyReactive(value) {
+  if (typeof value !== "function") return false;
+  return isSignal(value) || isComputed(value) || isPropGetterFn(value);
+}
+var PROP_GETTER_MARKER = Symbol.for("fict:prop-getter");
+function isPropGetterFn(value) {
+  if (typeof value !== "function") return false;
+  return value[PROP_GETTER_MARKER] === true;
+}
 function callEventHandler(handler, event, node, data) {
   if (!handler) return;
   const context = node ?? event.currentTarget ?? void 0;
@@ -1750,7 +1919,7 @@ function applyStyle(el, value, prev) {
     }
   }
 }
-var isUnitlessStyleProperty = isDev5 ? (prop2) => UnitlessStyles.has(prop2) : (prop2) => prop2 === "opacity" || prop2 === "zIndex";
+var isUnitlessStyleProperty = isDev6 ? (prop2) => UnitlessStyles.has(prop2) : (prop2) => prop2 === "opacity" || prop2 === "zIndex";
 function createClassBinding(el, value) {
   if (isReactive(value)) {
     let prev = {};
@@ -1953,15 +2122,15 @@ function globalEventHandler(e) {
   }
   retarget(oriTarget);
 }
-function bindEvent(el, eventName, handler, options) {
+function bindEvent(el, eventName, handler, options2) {
   if (handler == null) return () => {
   };
   const rootRef = getCurrentRoot();
-  const shouldDelegate = options == null && DelegatedEvents.has(eventName);
+  const shouldDelegate = options2 == null && DelegatedEvents.has(eventName);
   if (shouldDelegate) {
     const key = `$$${eventName}`;
     delegateEvents([eventName]);
-    const resolveHandler = isReactive(handler) ? handler : () => handler;
+    const resolveHandler = isStrictlyReactive(handler) ? handler : () => handler;
     el[key] = function(...args) {
       try {
         const fn = resolveHandler();
@@ -1976,7 +2145,7 @@ function bindEvent(el, eventName, handler, options) {
       el[key] = void 0;
     };
   }
-  const getHandler = isReactive(handler) ? handler : () => handler;
+  const getHandler = isStrictlyReactive(handler) ? handler : () => handler;
   const wrapped = (event) => {
     try {
       const resolved = getHandler();
@@ -1988,8 +2157,8 @@ function bindEvent(el, eventName, handler, options) {
       throw err;
     }
   };
-  el.addEventListener(eventName, wrapped, options);
-  const cleanup = () => el.removeEventListener(eventName, wrapped, options);
+  el.addEventListener(eventName, wrapped, options2);
+  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
   registerRootCleanup(cleanup);
   return cleanup;
 }
@@ -2064,20 +2233,8 @@ function createPortal(container, render2, createElementFn) {
   };
 }
 
-// src/hooks.ts
-var isDev6 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
-var ctxStack = [];
-function __fictPushContext() {
-  const ctx = { slots: [], cursor: 0 };
-  ctxStack.push(ctx);
-  return ctx;
-}
-function __fictPopContext() {
-  ctxStack.pop();
-}
-
 // src/props.ts
-var PROP_GETTER_MARKER = Symbol.for("fict:prop-getter");
+var PROP_GETTER_MARKER2 = Symbol.for("fict:prop-getter");
 var propGetters = /* @__PURE__ */ new WeakSet();
 var rawToProxy = /* @__PURE__ */ new WeakMap();
 var proxyToRaw = /* @__PURE__ */ new WeakMap();
@@ -2087,7 +2244,7 @@ function __fictProp(getter) {
     if (Object.isExtensible(getter)) {
       try {
         ;
-        getter[PROP_GETTER_MARKER] = true;
+        getter[PROP_GETTER_MARKER2] = true;
       } catch {
       }
     }
@@ -2097,7 +2254,7 @@ function __fictProp(getter) {
 function isPropGetter(value) {
   if (typeof value !== "function") return false;
   const fn = value;
-  return propGetters.has(fn) || fn[PROP_GETTER_MARKER] === true;
+  return propGetters.has(fn) || fn[PROP_GETTER_MARKER2] === true;
 }
 function createPropsProxy(props) {
   if (!props || typeof props !== "object") {
@@ -2211,12 +2368,19 @@ function mergeProps(...sources) {
     }
   });
 }
-function prop(getter, options) {
+function keyed(target, key, options2) {
+  return prop(() => {
+    const resolvedTarget = isPropGetter(target) ? target() : target;
+    const resolvedKey = typeof key === "function" ? key() : key;
+    return resolvedTarget[resolvedKey];
+  }, options2);
+}
+function prop(getter, options2) {
   if (isPropGetter(getter)) {
     return getter;
   }
   const fn = getter;
-  const unwrap = options?.unwrap !== false;
+  const unwrap = options2?.unwrap !== false;
   return __fictProp(
     createMemo(() => {
       const value = fn();
@@ -2232,6 +2396,7 @@ function prop(getter, options) {
 var SVG_NS = "http://www.w3.org/2000/svg";
 var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
 var isDev7 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var nextComponentId = 1;
 function render(view, container) {
   const root = createRootContext();
   const prev = pushRoot(root);
@@ -2324,9 +2489,27 @@ function createElementWithContext(node, namespace) {
       }
     });
     const props = createPropsProxy(baseProps);
-    __fictPushContext();
+    const hook = isDev7 ? getDevtoolsHook() : void 0;
+    const parentId = hook ? __fictGetCurrentComponentId() : void 0;
+    const componentId = hook ? nextComponentId++ : void 0;
+    if (hook?.registerComponent && componentId !== void 0) {
+      hook.registerComponent(componentId, vnode.type.name || "Anonymous", parentId);
+    }
+    const ctx = __fictPushContext();
+    if (componentId !== void 0) {
+      ctx.componentId = componentId;
+      if (parentId !== void 0) {
+        ctx.parentId = parentId;
+      }
+    }
     try {
       const rendered = vnode.type(props);
+      if (hook && componentId !== void 0) {
+        onMount(() => {
+          hook.componentMount?.(componentId);
+        });
+        onCleanup(() => hook.componentUnmount?.(componentId));
+      }
       return createElementWithContext(rendered, namespace);
     } catch (err) {
       if (handleSuspend(err)) {
@@ -2948,6 +3131,7 @@ export {
   createRoot,
   createSuspenseToken,
   hasContext,
+  keyed,
   mergeProps,
   onCleanup,
   onDestroy,