@fictjs/runtime 0.2.3 → 0.4.0

package/dist/{chunk-YVDWXY44.js → chunk-SO6X7G5S.js}

@@ -25,7 +25,7 @@ var DelegatedEventNames = [
 ];
 
 // src/constants.ts
-var isDev = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 var booleans = isDev ? [
   "allowfullscreen",
   "async",
@@ -387,7 +387,7 @@ function getDevtoolsHook() {
 }
 
 // src/cycle-guard.ts
-var isDev2 = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev2 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 var setCycleProtectionOptions = () => {
 };
 var resetCycleProtectionStateForTests = () => {
@@ -401,14 +401,17 @@ var enterRootGuard = () => true;
 var exitRootGuard = () => {
 };
 var defaultOptions = {
-  enabled: isDev2,
+  enabled: true,
   maxFlushCyclesPerMicrotask: 1e4,
   maxEffectRunsPerFlush: 2e4,
   windowSize: 5,
   highUsageRatio: 0.8,
   maxRootReentrantDepth: 10,
   enableWindowWarning: true,
-  devMode: false
+  devMode: isDev2,
+  // Backoff warning options
+  enableBackoffWarning: isDev2,
+  backoffWarningRatio: 0.5
 };
 var enabled = defaultOptions.enabled;
 var options = {
@@ -420,6 +423,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;
@@ -435,24 +440,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 && isDev2) {
+    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;
   }
@@ -469,11 +505,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;
   }
@@ -513,7 +554,7 @@ var reportCycle = (reason, detail = void 0) => {
 };
 
 // src/lifecycle.ts
-var isDev3 = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev3 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 var currentRoot;
 var currentEffectCleanups;
 var globalErrorHandlers = /* @__PURE__ */ new WeakMap();
@@ -559,13 +600,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) {
@@ -750,8 +797,164 @@ function handleSuspend(token, startRoot) {
   return false;
 }
 
+// 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 isDev4 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var ctxStack = [];
+function assertRenderContext(ctx, hookName) {
+  if (!ctx.rendering) {
+    const message = isDev4 ? `${hookName} can only be used during render execution` : "FICT:E_HOOK_RENDER";
+    throw new Error(message);
+  }
+}
+function __fictUseContext() {
+  if (ctxStack.length === 0) {
+    const message = isDev4 ? "Invalid hook call: hooks can only be used while rendering a component. Make sure you are not calling hooks in event handlers or outside of components." : "FICT:E_HOOK_OUTSIDE_RENDER";
+    throw new Error(message);
+  }
+  const ctx = ctxStack[ctxStack.length - 1];
+  if (!ctx.rendering) {
+    ctx.cursor = 0;
+    ctx.rendering = true;
+  }
+  return ctx;
+}
+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;
+}
+function __fictResetContext() {
+  ctxStack.length = 0;
+}
+function __fictUseSignal(ctx, initial, optionsOrSlot, slot) {
+  assertRenderContext(ctx, "__fictUseSignal");
+  const options2 = typeof optionsOrSlot === "number" ? void 0 : optionsOrSlot;
+  const resolvedSlot = typeof optionsOrSlot === "number" ? optionsOrSlot : slot;
+  const index = resolvedSlot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = signal(initial, options2);
+  }
+  return ctx.slots[index];
+}
+function __fictUseMemo(ctx, fn, optionsOrSlot, slot) {
+  assertRenderContext(ctx, "__fictUseMemo");
+  const options2 = typeof optionsOrSlot === "number" ? void 0 : optionsOrSlot;
+  const resolvedSlot = typeof optionsOrSlot === "number" ? optionsOrSlot : slot;
+  const index = resolvedSlot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = createMemo(fn, options2);
+  }
+  return ctx.slots[index];
+}
+function __fictUseEffect(ctx, fn, slot) {
+  if (slot !== void 0) {
+    if (ctx.slots[slot]) {
+      return;
+    }
+    ctx.slots[slot] = createEffect(fn);
+    return;
+  }
+  assertRenderContext(ctx, "__fictUseEffect");
+  const index = ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = createEffect(fn);
+  }
+}
+function __fictRender(ctx, fn) {
+  ctxStack.push(ctx);
+  ctx.cursor = 0;
+  ctx.rendering = true;
+  try {
+    return fn();
+  } finally {
+    ctx.rendering = false;
+    ctxStack.pop();
+  }
+}
+
 // src/signal.ts
-var isDev4 = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev5 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 var Mutable = 1;
 var Watching = 2;
 var Running = 4;
@@ -796,6 +999,7 @@ function link(dep, sub, version) {
   else sub.deps = newLink;
   if (prevSub !== void 0) prevSub.nextSub = newLink;
   else dep.subs = newLink;
+  if (isDev5) trackDependencyDevtools(dep, sub);
 }
 function unlink(lnk, sub = lnk.sub) {
   const dep = lnk.dep;
@@ -811,6 +1015,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 (isDev5) untrackDependencyDevtools(dep, sub);
   return nextDep;
 }
 function unwatched(dep) {
@@ -967,6 +1172,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(effect2) {
   effect2.flags &= ~Watching;
   const effects = [];
@@ -1003,7 +1213,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;
   }
@@ -1021,8 +1231,9 @@ function updateComputed(c) {
     activeSub = prevSub;
     c.flags &= ~Running;
     purgeDeps(c);
-    if (oldValue !== newValue) {
+    if (valuesDiffer(c, oldValue, newValue)) {
       c.value = newValue;
+      if (isDev5) updateComputedDevtools(c, newValue);
       return true;
     }
     return false;
@@ -1044,7 +1255,7 @@ function runEffect(e) {
       }
     }
     ++cycle;
-    effectRunDevtools(e);
+    if (isDev5) effectRunDevtools(e);
     e.depsTail = void 0;
     e.flags = WatchingRunning;
     const prevSub = activeSub;
@@ -1088,7 +1299,7 @@ function runEffect(e) {
     }
     if (isDirty) {
       ++cycle;
-      effectRunDevtools(e);
+      if (isDev5) effectRunDevtools(e);
       e.depsTail = void 0;
       e.flags = WatchingRunning;
       const prevSub = activeSub;
@@ -1137,10 +1348,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;
     }
@@ -1161,10 +1383,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;
     }
@@ -1174,26 +1407,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 (isDev5) 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 (isDev5) updateSignalDevtools(this, next);
       const subs = this.subs;
       if (subs !== void 0) {
         propagate(subs);
@@ -1220,7 +1458,7 @@ function signalOper(value) {
   }
   return this.currentValue;
 }
-function computed(getter) {
+function computed(getter, options2) {
   const c = {
     value: void 0,
     subs: void 0,
@@ -1228,13 +1466,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 (isDev5) 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)) {
@@ -1255,6 +1501,7 @@ function computedOper() {
     const prevSub = setActiveSub(this);
     try {
       this.value = this.getter(void 0);
+      if (isDev5) updateComputedDevtools(this, this.value);
     } finally {
       setActiveSub(prevSub);
       this.flags &= ~Running;
@@ -1277,12 +1524,12 @@ function effect(fn) {
   if (root) {
     e.root = root;
   }
-  registerEffectDevtools(e);
+  if (isDev5) registerEffectDevtools(e);
   const prevSub = activeSub;
   if (prevSub !== void 0) link(e, prevSub, 0);
   activeSub = e;
   try {
-    effectRunDevtools(e);
+    if (isDev5) effectRunDevtools(e);
     fn();
   } finally {
     activeSub = prevSub;
@@ -1307,12 +1554,12 @@ function effectWithCleanup(fn, cleanupRunner, root) {
   if (resolvedRoot) {
     e.root = resolvedRoot;
   }
-  registerEffectDevtools(e);
+  if (isDev5) registerEffectDevtools(e);
   const prevSub = activeSub;
   if (prevSub !== void 0) link(e, prevSub, 0);
   activeSub = e;
   try {
-    effectRunDevtools(e);
+    if (isDev5) effectRunDevtools(e);
     fn();
   } finally {
     activeSub = prevSub;
@@ -1372,6 +1619,16 @@ function setActiveSub(sub) {
   activeSub = sub;
   return prev;
 }
+function __resetReactiveState() {
+  highPriorityQueue.length = 0;
+  lowPriorityQueue.length = 0;
+  batchDepth = 0;
+  activeSub = void 0;
+  flushScheduled = false;
+  isInTransition = false;
+  inCleanup = false;
+  cycle = 0;
+}
 function untrack(fn) {
   const prev = activeSub;
   activeSub = void 0;
@@ -1401,17 +1658,28 @@ function setTransitionContext(value) {
 var registerSignalDevtools = () => void 0;
 var updateSignalDevtools = () => {
 };
+var registerComputedDevtools = () => void 0;
+var updateComputedDevtools = () => {
+};
 var registerEffectDevtools = () => void 0;
 var effectRunDevtools = () => {
 };
-if (isDev4) {
-  let devtoolsSignalId = 0;
-  let devtoolsEffectId = 0;
-  registerSignalDevtools = (value, node) => {
+var trackDependencyDevtools = () => {
+};
+var untrackDependencyDevtools = () => {
+};
+if (isDev5) {
+  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;
   };
@@ -1421,11 +1689,32 @@ if (isDev4) {
     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;
   };
@@ -1435,6 +1724,20 @@ if (isDev4) {
     const id = node.__id;
     if (id) hook.effectRun(id);
   };
+  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);
+  };
+  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);
+  };
 }
 function createSelector(source, equalityFn = (a, b) => a === b) {
   let current = source();
@@ -1463,78 +1766,9 @@ function createSelector(source, equalityFn = (a, b) => a === b) {
   };
 }
 
-// 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/memo.ts
+function createMemo(fn, options2) {
+  return computed(fn, options2);
 }
 
 // src/jsx.ts
@@ -1730,13 +1964,22 @@ function untrack2(fn) {
 }
 
 // src/binding.ts
-var isDev5 = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev6 = typeof __DEV__ !== "undefined" ? __DEV__ : 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 unwrap(value) {
   return isReactive(value) ? value() : value;
 }
@@ -1903,7 +2146,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 = {};
@@ -2290,7 +2533,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();
@@ -2305,7 +2548,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();
@@ -2467,9 +2710,9 @@ function assignProp(node, prop2, value, prev, isSVG, skipRef, props) {
   }
   const isCE = node.nodeName.includes("-") || "is" in props;
   if (!isSVG) {
-    const propAlias = isDev5 ? getPropAlias(prop2, node.tagName) : void 0;
-    const isProperty = isDev5 ? Properties.has(prop2) : prop2 in node;
-    const isChildProp = isDev5 ? ChildProperties.has(prop2) : prop2 === "innerHTML" || prop2 === "textContent" || prop2 === "innerText" || prop2 === "children";
+    const propAlias = isDev6 ? getPropAlias(prop2, node.tagName) : void 0;
+    const isProperty = isDev6 ? Properties.has(prop2) : prop2 in node;
+    const isChildProp = isDev6 ? ChildProperties.has(prop2) : prop2 === "innerHTML" || prop2 === "textContent" || prop2 === "innerText" || prop2 === "children";
     if (propAlias || isProperty || isChildProp || isCE) {
       const propName = propAlias || prop2;
       if (isCE && !isProperty && !isChildProp && !propAlias) {
@@ -2666,79 +2909,8 @@ function createPortal(container, render2, createElementFn) {
   };
 }
 
-// src/memo.ts
-function createMemo(fn) {
-  return computed(fn);
-}
-
-// src/hooks.ts
-var isDev6 = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
-var ctxStack = [];
-function assertRenderContext(ctx, hookName) {
-  if (!ctx.rendering) {
-    const message = isDev6 ? `${hookName} can only be used during render execution` : "FICT:E_HOOK_RENDER";
-    throw new Error(message);
-  }
-}
-function __fictUseContext() {
-  if (ctxStack.length === 0) {
-    const ctx2 = { slots: [], cursor: 0, rendering: true };
-    ctxStack.push(ctx2);
-    return ctx2;
-  }
-  const ctx = ctxStack[ctxStack.length - 1];
-  ctx.cursor = 0;
-  ctx.rendering = true;
-  return ctx;
-}
-function __fictPushContext() {
-  const ctx = { slots: [], cursor: 0 };
-  ctxStack.push(ctx);
-  return ctx;
-}
-function __fictPopContext() {
-  ctxStack.pop();
-}
-function __fictResetContext() {
-  ctxStack.length = 0;
-}
-function __fictUseSignal(ctx, initial, slot) {
-  assertRenderContext(ctx, "__fictUseSignal");
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = signal(initial);
-  }
-  return ctx.slots[index];
-}
-function __fictUseMemo(ctx, fn, slot) {
-  assertRenderContext(ctx, "__fictUseMemo");
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createMemo(fn);
-  }
-  return ctx.slots[index];
-}
-function __fictUseEffect(ctx, fn, slot) {
-  assertRenderContext(ctx, "__fictUseEffect");
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createEffect(fn);
-  }
-}
-function __fictRender(ctx, fn) {
-  ctxStack.push(ctx);
-  ctx.cursor = 0;
-  ctx.rendering = true;
-  try {
-    return fn();
-  } finally {
-    ctx.rendering = false;
-    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();
@@ -2748,7 +2920,7 @@ function __fictProp(getter) {
     if (Object.isExtensible(getter)) {
       try {
         ;
-        getter[PROP_GETTER_MARKER] = true;
+        getter[PROP_GETTER_MARKER2] = true;
       } catch {
       }
     }
@@ -2758,7 +2930,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") {
@@ -2882,6 +3054,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;
@@ -2902,7 +3081,8 @@ function prop(getter, options2) {
 // src/dom.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
-var isDev7 = true ? false : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var isDev7 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
+var nextComponentId = 1;
 function render(view, container) {
   const root = createRootContext();
   const prev = pushRoot(root);
@@ -2995,9 +3175,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)) {
@@ -3029,15 +3227,48 @@ function createElementWithContext(node, namespace) {
 function template(html, isImportNode, isSVG, isMathML) {
   let node = null;
   const create = () => {
-    const t = isMathML ? document.createElementNS(MATHML_NS, "template") : document.createElement("template");
-    t.innerHTML = html;
+    const t = document.createElement("template");
     if (isSVG) {
-      return t.content.firstChild.firstChild;
+      t.innerHTML = `<svg>${html}</svg>`;
+      const wrapper = t.content.firstChild;
+      if (isDev7 && wrapper.childNodes.length !== 1) {
+        console.warn(
+          `[fict] template() received multi-root SVG content (${wrapper.childNodes.length} nodes). Returning a DocumentFragment. This may indicate a compiler bug or invalid JSX structure.`
+        );
+      }
+      if (wrapper.childNodes.length === 1) {
+        return wrapper.firstChild;
+      }
+      const fragment = document.createDocumentFragment();
+      fragment.append(...Array.from(wrapper.childNodes));
+      return fragment;
     }
     if (isMathML) {
-      return t.firstChild;
+      t.innerHTML = `<math>${html}</math>`;
+      const wrapper = t.content.firstChild;
+      if (isDev7 && wrapper.childNodes.length !== 1) {
+        console.warn(
+          `[fict] template() received multi-root MathML content (${wrapper.childNodes.length} nodes). Returning a DocumentFragment. This may indicate a compiler bug or invalid JSX structure.`
+        );
+      }
+      if (wrapper.childNodes.length === 1) {
+        return wrapper.firstChild;
+      }
+      const fragment = document.createDocumentFragment();
+      fragment.append(...Array.from(wrapper.childNodes));
+      return fragment;
     }
-    return t.content.firstChild;
+    t.innerHTML = html;
+    const content = t.content;
+    if (isDev7 && content.childNodes.length !== 1) {
+      console.warn(
+        `[fict] template() received multi-root content (${content.childNodes.length} nodes). Returning a DocumentFragment. This may indicate a compiler bug or invalid JSX structure.`
+      );
+    }
+    if (content.childNodes.length === 1) {
+      return content.firstChild;
+    }
+    return content;
   };
   const fn = isImportNode ? () => untrack2(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
@@ -3341,11 +3572,21 @@ export {
   registerErrorHandler,
   registerSuspenseHandler,
   handleError,
+  createMemo,
+  __fictUseContext,
+  __fictPushContext,
+  __fictPopContext,
+  __fictResetContext,
+  __fictUseSignal,
+  __fictUseMemo,
+  __fictUseEffect,
+  __fictRender,
   flush,
   signal,
   effectScope,
   batch,
   setActiveSub,
+  __resetReactiveState,
   untrack,
   createSelector,
   createEffect,
@@ -3384,22 +3625,14 @@ export {
   createConditional,
   createShow,
   createPortal,
-  createMemo,
-  __fictUseContext,
-  __fictPushContext,
-  __fictPopContext,
-  __fictResetContext,
-  __fictUseSignal,
-  __fictUseMemo,
-  __fictUseEffect,
-  __fictRender,
   __fictProp,
   createPropsProxy,
   __fictPropsRest,
   mergeProps,
+  keyed,
   prop,
   render,
   createElement,
   template
 };
-//# sourceMappingURL=chunk-YVDWXY44.js.map
+//# sourceMappingURL=chunk-SO6X7G5S.js.map