@fictjs/runtime 0.2.2 → 0.3.0

package/dist/{chunk-3U7EBKEU.cjs → chunk-ID3WBWNO.cjs}

@@ -25,7 +25,7 @@ var DelegatedEventNames = [
 ];
 
 // src/constants.ts
-var isDev = true ? false : typeof process === "undefined" || _optionalChain([process, 'access', _2 => _2.env, 'optionalAccess', _3 => _3.NODE_ENV]) !== "production";
+var isDev = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || _optionalChain([process, 'access', _2 => _2.env, 'optionalAccess', _3 => _3.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" || _optionalChain([process, 'access', _4 => _4.env, 'optionalAccess', _5 => _5.NODE_ENV]) !== "production";
+var isDev2 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || _optionalChain([process, 'access', _4 => _4.env, 'optionalAccess', _5 => _5.NODE_ENV]) !== "production";
 var setCycleProtectionOptions = () => {
 };
 var resetCycleProtectionStateForTests = () => {
@@ -400,113 +400,161 @@ var endFlushGuard = () => {
 var enterRootGuard = () => true;
 var exitRootGuard = () => {
 };
-if (isDev2) {
-  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 = exports.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: isDev2,
+  // Backoff warning options
+  enableBackoffWarning: isDev2,
+  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 = exports.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 && isDev2) {
+    const ratio = next / limit;
+    const backoffRatio = _nullishCoalesce(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 = (_nullishCoalesce(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 = (_nullishCoalesce(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();
-    _optionalChain([hook, 'optionalAccess', _6 => _6.cycleDetected, 'optionalCall', _7 => _7(detail ? { reason, detail } : { reason })]);
-    console.warn(`[fict] cycle protection triggered: ${reason}`, _nullishCoalesce(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();
+  _optionalChain([hook, 'optionalAccess', _6 => _6.cycleDetected, 'optionalCall', _7 => _7(detail ? { reason, detail } : { reason })]);
+  console.warn(`[fict] cycle protection triggered: ${reason}`, _nullishCoalesce(detail, () => ( "")));
+};
 
 // src/lifecycle.ts
-var isDev3 = true ? false : typeof process === "undefined" || _optionalChain([process, 'access', _8 => _8.env, 'optionalAccess', _9 => _9.NODE_ENV]) !== "production";
+var isDev3 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || _optionalChain([process, 'access', _8 => _8.env, 'optionalAccess', _9 => _9.NODE_ENV]) !== "production";
 var currentRoot;
 var currentEffectCleanups;
 var globalErrorHandlers = /* @__PURE__ */ new WeakMap();
@@ -552,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) {
@@ -587,8 +641,8 @@ function destroyRoot(root) {
     globalSuspenseHandlers.delete(root);
   }
 }
-function createRoot(fn, options) {
-  const parent = _optionalChain([options, 'optionalAccess', _10 => _10.inherit]) ? currentRoot : void 0;
+function createRoot(fn, options2) {
+  const parent = _optionalChain([options2, 'optionalAccess', _10 => _10.inherit]) ? currentRoot : void 0;
   const root = createRootContext(parent);
   const prev = pushRoot(root);
   let value;
@@ -743,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" || _optionalChain([process, 'access', _11 => _11.env, 'optionalAccess', _12 => _12.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 _optionalChain([ctxStack, 'access', _13 => _13[ctxStack.length - 1], 'optionalAccess', _14 => _14.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 = _nullishCoalesce(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 = _nullishCoalesce(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" || _optionalChain([process, 'access', _11 => _11.env, 'optionalAccess', _12 => _12.NODE_ENV]) !== "production";
+var isDev5 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || _optionalChain([process, 'access', _15 => _15.env, 'optionalAccess', _16 => _16.NODE_ENV]) !== "production";
 var Mutable = 1;
 var Watching = 2;
 var Running = 4;
@@ -789,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;
@@ -804,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) {
@@ -960,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 = [];
@@ -996,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;
   }
@@ -1014,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;
@@ -1037,7 +1255,7 @@ function runEffect(e) {
       }
     }
     ++cycle;
-    effectRunDevtools(e);
+    if (isDev5) effectRunDevtools(e);
     e.depsTail = void 0;
     e.flags = WatchingRunning;
     const prevSub = activeSub;
@@ -1081,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;
@@ -1130,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;
     }
@@ -1154,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;
     }
@@ -1167,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,
+    ..._optionalChain([options2, 'optionalAccess', _17 => _17.equals]) !== void 0 ? { equals: options2.equals } : {},
+    ..._optionalChain([options2, 'optionalAccess', _18 => _18.name]) !== void 0 ? { name: options2.name } : {},
+    ..._optionalChain([options2, 'optionalAccess', _19 => _19.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);
@@ -1213,7 +1458,7 @@ function signalOper(value) {
   }
   return this.currentValue;
 }
-function computed(getter) {
+function computed(getter, options2) {
   const c = {
     value: void 0,
     subs: void 0,
@@ -1221,13 +1466,21 @@ function computed(getter) {
     deps: void 0,
     depsTail: void 0,
     flags: 0,
-    getter
+    getter,
+    __id: void 0,
+    ..._optionalChain([options2, 'optionalAccess', _20 => _20.equals]) !== void 0 ? { equals: options2.equals } : {},
+    ..._optionalChain([options2, 'optionalAccess', _21 => _21.name]) !== void 0 ? { name: options2.name } : {},
+    ..._optionalChain([options2, 'optionalAccess', _22 => _22.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)) {
@@ -1248,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;
@@ -1270,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;
@@ -1300,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;
@@ -1365,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;
@@ -1394,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;
   };
@@ -1414,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;
   };
@@ -1428,6 +1724,20 @@ if (isDev4) {
     const id = node.__id;
     if (id) hook.effectRun(id);
   };
+  trackDependencyDevtools = (dep, sub) => {
+    const hook = getDevtoolsHook();
+    if (!_optionalChain([hook, 'optionalAccess', _23 => _23.trackDependency])) return;
+    const depId = dep.__id;
+    const subId = sub.__id;
+    if (depId && subId) hook.trackDependency(subId, depId);
+  };
+  untrackDependencyDevtools = (dep, sub) => {
+    const hook = getDevtoolsHook();
+    if (!_optionalChain([hook, 'optionalAccess', _24 => _24.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();
@@ -1456,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
@@ -1672,7 +1913,7 @@ function insertNodesBefore(parent, nodes, anchor) {
 }
 function removeNodes(nodes) {
   for (const node of nodes) {
-    _optionalChain([node, 'access', _13 => _13.parentNode, 'optionalAccess', _14 => _14.removeChild, 'call', _15 => _15(node)]);
+    _optionalChain([node, 'access', _25 => _25.parentNode, 'optionalAccess', _26 => _26.removeChild, 'call', _27 => _27(node)]);
   }
 }
 
@@ -1723,13 +1964,22 @@ function untrack2(fn) {
 }
 
 // src/binding.ts
-var isDev5 = true ? false : typeof process === "undefined" || _optionalChain([process, 'access', _16 => _16.env, 'optionalAccess', _17 => _17.NODE_ENV]) !== "production";
+var isDev6 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || _optionalChain([process, 'access', _28 => _28.env, 'optionalAccess', _29 => _29.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;
 }
@@ -1896,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 = {};
@@ -2094,7 +2344,7 @@ function insert(parent, getValue, markerOrCreateElement, createElementFn) {
     }
     clearCurrentNodes();
     if (ownsMarker) {
-      _optionalChain([marker, 'access', _18 => _18.parentNode, 'optionalAccess', _19 => _19.removeChild, 'call', _20 => _20(marker)]);
+      _optionalChain([marker, 'access', _30 => _30.parentNode, 'optionalAccess', _31 => _31.removeChild, 'call', _32 => _32(marker)]);
     }
   };
 }
@@ -2145,7 +2395,7 @@ function createChildBinding(parent, getValue, createElementFn) {
     marker,
     dispose: () => {
       dispose();
-      _optionalChain([marker, 'access', _21 => _21.parentNode, 'optionalAccess', _22 => _22.removeChild, 'call', _23 => _23(marker)]);
+      _optionalChain([marker, 'access', _33 => _33.parentNode, 'optionalAccess', _34 => _34.removeChild, 'call', _35 => _35(marker)]);
     }
   };
 }
@@ -2275,15 +2525,15 @@ function addEventListener(node, name, handler, delegate) {
     node.addEventListener(name, handler);
   }
 }
-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();
@@ -2298,7 +2548,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();
@@ -2310,8 +2560,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;
 }
@@ -2460,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) {
@@ -2577,8 +2827,8 @@ function createConditional(condition, renderTrue, createElementFn, renderFalse)
       }
       removeNodes(currentNodes);
       currentNodes = [];
-      _optionalChain([startMarker, 'access', _24 => _24.parentNode, 'optionalAccess', _25 => _25.removeChild, 'call', _26 => _26(startMarker)]);
-      _optionalChain([endMarker, 'access', _27 => _27.parentNode, 'optionalAccess', _28 => _28.removeChild, 'call', _29 => _29(endMarker)]);
+      _optionalChain([startMarker, 'access', _36 => _36.parentNode, 'optionalAccess', _37 => _37.removeChild, 'call', _38 => _38(startMarker)]);
+      _optionalChain([endMarker, 'access', _39 => _39.parentNode, 'optionalAccess', _40 => _40.removeChild, 'call', _41 => _41(endMarker)]);
     }
   };
 }
@@ -2648,7 +2898,7 @@ function createPortal(container, render2, createElementFn) {
     if (currentNodes.length > 0) {
       removeNodes(currentNodes);
     }
-    _optionalChain([marker, 'access', _30 => _30.parentNode, 'optionalAccess', _31 => _31.removeChild, 'call', _32 => _32(marker)]);
+    _optionalChain([marker, 'access', _42 => _42.parentNode, 'optionalAccess', _43 => _43.removeChild, 'call', _44 => _44(marker)]);
   };
   if (parentRoot) {
     parentRoot.destroyCallbacks.push(portalDispose);
@@ -2659,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" || _optionalChain([process, 'access', _33 => _33.env, 'optionalAccess', _34 => _34.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 = _nullishCoalesce(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 = _nullishCoalesce(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 = _nullishCoalesce(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();
@@ -2741,7 +2920,7 @@ function __fictProp(getter) {
     if (Object.isExtensible(getter)) {
       try {
         ;
-        getter[PROP_GETTER_MARKER] = true;
+        getter[PROP_GETTER_MARKER2] = true;
       } catch (e11) {
       }
     }
@@ -2751,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") {
@@ -2875,12 +3054,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 unwrap2 = _optionalChain([options, 'optionalAccess', _35 => _35.unwrap]) !== false;
+  const unwrap2 = _optionalChain([options2, 'optionalAccess', _45 => _45.unwrap]) !== false;
   return __fictProp(
     createMemo(() => {
       const value = fn();
@@ -2895,7 +3081,8 @@ function prop(getter, options) {
 // 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" || _optionalChain([process, 'access', _36 => _36.env, 'optionalAccess', _37 => _37.NODE_ENV]) !== "production";
+var isDev7 = typeof __DEV__ !== "undefined" ? __DEV__ : typeof process === "undefined" || _optionalChain([process, 'access', _46 => _46.env, 'optionalAccess', _47 => _47.NODE_ENV]) !== "production";
+var nextComponentId = 1;
 function render(view, container) {
   const root = createRootContext();
   const prev = pushRoot(root);
@@ -2988,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 (_optionalChain([hook, 'optionalAccess', _48 => _48.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(() => {
+          _optionalChain([hook, 'access', _49 => _49.componentMount, 'optionalCall', _50 => _50(componentId)]);
+        });
+        onCleanup(() => _optionalChain([hook, 'access', _51 => _51.componentUnmount, 'optionalCall', _52 => _52(componentId)]));
+      }
       return createElementWithContext(rendered, namespace);
     } catch (err) {
       if (handleSuspend(err)) {
@@ -3004,7 +3209,7 @@ function createElementWithContext(node, namespace) {
   }
   if (vnode.type === Fragment) {
     const frag = document.createDocumentFragment();
-    const children = _optionalChain([vnode, 'access', _38 => _38.props, 'optionalAccess', _39 => _39.children]);
+    const children = _optionalChain([vnode, 'access', _53 => _53.props, 'optionalAccess', _54 => _54.children]);
     appendChildren(frag, children, namespace);
     return frag;
   }
@@ -3014,7 +3219,7 @@ function createElementWithContext(node, namespace) {
   applyProps(el, _nullishCoalesce(vnode.props, () => ( {})), resolvedNamespace === "svg");
   appendChildren(
     el,
-    _optionalChain([vnode, 'access', _40 => _40.props, 'optionalAccess', _41 => _41.children]),
+    _optionalChain([vnode, 'access', _55 => _55.props, 'optionalAccess', _56 => _56.children]),
     tagName === "foreignObject" ? null : resolvedNamespace
   );
   return el;
@@ -3022,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;
@@ -3045,7 +3283,7 @@ function appendChildNode(parent, child, namespace) {
   }
   if (isBindingHandle(child)) {
     appendChildNode(parent, child.marker, namespace);
-    _optionalChain([child, 'access', _42 => _42.flush, 'optionalCall', _43 => _43()]);
+    _optionalChain([child, 'access', _57 => _57.flush, 'optionalCall', _58 => _58()]);
     return;
   }
   if (typeof child === "function" && child.length === 0) {
@@ -3394,5 +3632,7 @@ function eventNameFromProp(key) {
 
 
 
-exports.BooleanAttributes = BooleanAttributes; exports.Properties = Properties; exports.ChildProperties = ChildProperties; exports.Aliases = Aliases; exports.getPropAlias = getPropAlias; exports.DelegatedEvents = DelegatedEvents; exports.SVGElements = SVGElements; exports.SVGNamespace = SVGNamespace; exports.UnitlessStyles = UnitlessStyles; exports.getDevtoolsHook = getDevtoolsHook; exports.setCycleProtectionOptions = setCycleProtectionOptions; exports.createRootContext = createRootContext; exports.pushRoot = pushRoot; exports.getCurrentRoot = getCurrentRoot; exports.popRoot = popRoot; exports.onMount = onMount; exports.onDestroy = onDestroy; exports.onCleanup = onCleanup; exports.flushOnMount = flushOnMount; exports.registerRootCleanup = registerRootCleanup; exports.destroyRoot = destroyRoot; exports.createRoot = createRoot; exports.registerErrorHandler = registerErrorHandler; exports.registerSuspenseHandler = registerSuspenseHandler; exports.handleError = handleError; exports.flush = flush; exports.signal = signal; exports.effectScope = effectScope; exports.batch = batch; exports.setActiveSub = setActiveSub; exports.untrack = untrack; exports.createSelector = createSelector; exports.createEffect = createEffect; exports.createRenderEffect = createRenderEffect; exports.Fragment = Fragment; exports.toNodeArray = toNodeArray; exports.insertNodesBefore = insertNodesBefore; exports.removeNodes = removeNodes; exports.startTransition = startTransition; exports.useTransition = useTransition; exports.useDeferredValue = useDeferredValue; exports.batch2 = batch2; exports.untrack2 = untrack2; exports.isReactive = isReactive; exports.unwrap = unwrap; exports.callEventHandler = callEventHandler; exports.createTextBinding = createTextBinding; exports.bindText = bindText; exports.createAttributeBinding = createAttributeBinding; exports.bindAttribute = bindAttribute; exports.bindProperty = bindProperty; exports.createStyleBinding = createStyleBinding; exports.bindStyle = bindStyle; exports.createClassBinding = createClassBinding; exports.bindClass = bindClass; exports.classList = classList; exports.insert = insert; exports.createChildBinding = createChildBinding; exports.delegateEvents = delegateEvents; exports.clearDelegatedEvents = clearDelegatedEvents; exports.addEventListener = addEventListener; exports.bindEvent = bindEvent; exports.bindRef = bindRef; exports.spread = spread; exports.assign = assign; exports.createConditional = createConditional; exports.createShow = createShow; exports.createPortal = createPortal; exports.createMemo = createMemo; exports.__fictUseContext = __fictUseContext; exports.__fictPushContext = __fictPushContext; exports.__fictPopContext = __fictPopContext; exports.__fictResetContext = __fictResetContext; exports.__fictUseSignal = __fictUseSignal; exports.__fictUseMemo = __fictUseMemo; exports.__fictUseEffect = __fictUseEffect; exports.__fictRender = __fictRender; exports.__fictProp = __fictProp; exports.createPropsProxy = createPropsProxy; exports.__fictPropsRest = __fictPropsRest; exports.mergeProps = mergeProps; exports.prop = prop; exports.render = render; exports.createElement = createElement; exports.template = template;
-//# sourceMappingURL=chunk-3U7EBKEU.cjs.map
+
+
+exports.BooleanAttributes = BooleanAttributes; exports.Properties = Properties; exports.ChildProperties = ChildProperties; exports.Aliases = Aliases; exports.getPropAlias = getPropAlias; exports.DelegatedEvents = DelegatedEvents; exports.SVGElements = SVGElements; exports.SVGNamespace = SVGNamespace; exports.UnitlessStyles = UnitlessStyles; exports.getDevtoolsHook = getDevtoolsHook; exports.setCycleProtectionOptions = setCycleProtectionOptions; exports.createRootContext = createRootContext; exports.pushRoot = pushRoot; exports.getCurrentRoot = getCurrentRoot; exports.popRoot = popRoot; exports.onMount = onMount; exports.onDestroy = onDestroy; exports.onCleanup = onCleanup; exports.flushOnMount = flushOnMount; exports.registerRootCleanup = registerRootCleanup; exports.destroyRoot = destroyRoot; exports.createRoot = createRoot; exports.registerErrorHandler = registerErrorHandler; exports.registerSuspenseHandler = registerSuspenseHandler; exports.handleError = handleError; exports.createMemo = createMemo; exports.__fictUseContext = __fictUseContext; exports.__fictPushContext = __fictPushContext; exports.__fictPopContext = __fictPopContext; exports.__fictResetContext = __fictResetContext; exports.__fictUseSignal = __fictUseSignal; exports.__fictUseMemo = __fictUseMemo; exports.__fictUseEffect = __fictUseEffect; exports.__fictRender = __fictRender; exports.flush = flush; exports.signal = signal; exports.effectScope = effectScope; exports.batch = batch; exports.setActiveSub = setActiveSub; exports.__resetReactiveState = __resetReactiveState; exports.untrack = untrack; exports.createSelector = createSelector; exports.createEffect = createEffect; exports.createRenderEffect = createRenderEffect; exports.Fragment = Fragment; exports.toNodeArray = toNodeArray; exports.insertNodesBefore = insertNodesBefore; exports.removeNodes = removeNodes; exports.startTransition = startTransition; exports.useTransition = useTransition; exports.useDeferredValue = useDeferredValue; exports.batch2 = batch2; exports.untrack2 = untrack2; exports.isReactive = isReactive; exports.unwrap = unwrap; exports.callEventHandler = callEventHandler; exports.createTextBinding = createTextBinding; exports.bindText = bindText; exports.createAttributeBinding = createAttributeBinding; exports.bindAttribute = bindAttribute; exports.bindProperty = bindProperty; exports.createStyleBinding = createStyleBinding; exports.bindStyle = bindStyle; exports.createClassBinding = createClassBinding; exports.bindClass = bindClass; exports.classList = classList; exports.insert = insert; exports.createChildBinding = createChildBinding; exports.delegateEvents = delegateEvents; exports.clearDelegatedEvents = clearDelegatedEvents; exports.addEventListener = addEventListener; exports.bindEvent = bindEvent; exports.bindRef = bindRef; exports.spread = spread; exports.assign = assign; exports.createConditional = createConditional; exports.createShow = createShow; exports.createPortal = createPortal; exports.__fictProp = __fictProp; exports.createPropsProxy = createPropsProxy; exports.__fictPropsRest = __fictPropsRest; exports.mergeProps = mergeProps; exports.keyed = keyed; exports.prop = prop; exports.render = render; exports.createElement = createElement; exports.template = template;
+//# sourceMappingURL=chunk-ID3WBWNO.cjs.map