@fictjs/runtime 0.2.3 → 0.4.0

package/dist/index.dev.js

@@ -22,14 +22,17 @@ var enterRootGuard = () => true;
 var exitRootGuard = () => {
 };
 var defaultOptions = {
-  enabled: isDev,
+  enabled: true,
   maxFlushCyclesPerMicrotask: 1e4,
   maxEffectRunsPerFlush: 2e4,
   windowSize: 5,
   highUsageRatio: 0.8,
   maxRootReentrantDepth: 10,
   enableWindowWarning: true,
-  devMode: false
+  devMode: isDev,
+  // Backoff warning options
+  enableBackoffWarning: isDev,
+  backoffWarningRatio: 0.5
 };
 var enabled = defaultOptions.enabled;
 var options = {
@@ -41,6 +44,8 @@ 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;
@@ -56,24 +61,55 @@ resetCycleProtectionStateForTests = () => {
   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;
-  if (next > options.maxFlushCyclesPerMicrotask || next > options.maxEffectRunsPerFlush) {
+  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.`
+      );
+    }
+  }
+  if (next > limit) {
     const message = `[fict] cycle protection triggered: flush-budget-exceeded`;
     if (options.devMode) {
-      throw new Error(message);
+      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); })`
+      );
     }
     if (!flushWarned) {
       flushWarned = true;
-      console.warn(message, { effectRuns: next });
+      console.warn(message, { effectRuns: next, limit });
     }
     return false;
   }
@@ -90,11 +126,16 @@ enterRootGuard = (root) => {
   if (depth > options.maxRootReentrantDepth) {
     const message = `[fict] cycle protection triggered: root-reentry`;
     if (options.devMode) {
-      throw new Error(message);
+      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.`
+      );
     }
     if (!rootWarned) {
       rootWarned = true;
-      console.warn(message, { depth });
+      console.warn(message, { depth, maxAllowed: options.maxRootReentrantDepth });
     }
     return false;
   }
@@ -180,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) {
@@ -371,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;
@@ -417,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;
@@ -432,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) {
@@ -588,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 = [];
@@ -624,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;
   }
@@ -642,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;
@@ -665,7 +810,7 @@ function runEffect(e) {
       }
     }
     ++cycle;
-    effectRunDevtools(e);
+    if (isDev4) effectRunDevtools(e);
     e.depsTail = void 0;
     e.flags = WatchingRunning;
     const prevSub = activeSub;
@@ -709,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;
@@ -758,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;
     }
@@ -782,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;
     }
@@ -795,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);
@@ -841,7 +1013,7 @@ function signalOper(value) {
   }
   return this.currentValue;
 }
-function computed(getter) {
+function computed(getter, options2) {
   const c = {
     value: void 0,
     subs: void 0,
@@ -849,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)) {
@@ -876,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;
@@ -899,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;
@@ -976,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;
   };
@@ -996,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;
   };
@@ -1010,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
@@ -1172,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",
@@ -1223,7 +1376,7 @@ var booleans = isDev4 ? [
   "sharedstoragewritable"
 ] : [];
 var BooleanAttributes = new Set(booleans);
-var properties = isDev4 ? [
+var properties = isDev5 ? [
   // Core properties
   "className",
   "value",
@@ -1259,7 +1412,7 @@ var ChildProperties = /* @__PURE__ */ new Set([
   "innerText",
   "children"
 ]);
-var PropAliases = isDev4 ? {
+var PropAliases = isDev5 ? {
   // Direct mapping
   class: "className",
   // Element-specific mappings
@@ -1348,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;
@@ -1357,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",
@@ -1441,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",
@@ -1664,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;
@@ -1757,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 = {};
@@ -1968,7 +2130,7 @@ function bindEvent(el, eventName, handler, options2) {
   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();
@@ -1983,7 +2145,7 @@ function bindEvent(el, eventName, handler, options2) {
       el[key] = void 0;
     };
   }
-  const getHandler = isReactive(handler) ? handler : () => handler;
+  const getHandler = isStrictlyReactive(handler) ? handler : () => handler;
   const wrapped = (event) => {
     try {
       const resolved = getHandler();
@@ -2071,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();
@@ -2094,7 +2244,7 @@ function __fictProp(getter) {
     if (Object.isExtensible(getter)) {
       try {
         ;
-        getter[PROP_GETTER_MARKER] = true;
+        getter[PROP_GETTER_MARKER2] = true;
       } catch {
       }
     }
@@ -2104,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") {
@@ -2218,6 +2368,13 @@ function mergeProps(...sources) {
     }
   });
 }
+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;
@@ -2239,6 +2396,7 @@ function prop(getter, options2) {
 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);
@@ -2331,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)) {
@@ -2955,6 +3131,7 @@ export {
   createRoot,
   createSuspenseToken,
   hasContext,
+  keyed,
   mergeProps,
   onCleanup,
   onDestroy,