diff --git a/examples/spring-dialog/dialog.tsx b/examples/spring-dialog/dialog.tsx
index 7652cd55..7baa56cf 100644
--- a/examples/spring-dialog/dialog.tsx
+++ b/examples/spring-dialog/dialog.tsx
@@ -55,8 +55,8 @@ const Dialog = component<DialogProps>(({ isOpen, width = '600px', height = '300p
       {transition(({ spring }) => (
         <Animated spring={spring} fn={styleFn(false, scope)}>
           <Window $width={width} $height={height}>
-            <CloseButton onClick={onRequestClose} />
             {slot}
+            <CloseButton onClick={onRequestClose} /> {/*should be last for tab focus*/}
           </Window>
         </Animated>
       ))}
@@ -104,8 +104,8 @@ type CloseButtonProps = {
 
 const CloseButton = component<CloseButtonProps>(({ onClick }) => {
   return (
-    <Button onClick={onClick}>
-      <svg width='24' height='24' viewBox='0 0 50 50'>
+    <Button onClick={onClick} aria-label='Close'>
+      <svg aria-hidden='true' width='24' height='24' viewBox='0 0 50 50'>
         <path d='M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z' />
       </svg>
     </Button>
diff --git a/packages/core/README.md b/packages/core/README.md
index 5c314f3b..5afd338d 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -136,10 +136,6 @@ createRoot(document.getElementById('root')).render(content);
 
 ## JSX
 JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
-You can use it:
-
-### via `jsx-runtime`
-
 In your `tsconfig.json`, you must add these rows:
 
 ```json
@@ -152,28 +148,6 @@ In your `tsconfig.json`, you must add these rows:
 ```
 The necessary functions will be automatically imported into your code.
 
-If for some reason you don't want to use auto-imports, then you should use a different approach.
-
-### via `h`
-
-This is the function you need to enable JSX support. In your `tsconfig.json`:
-
-```json
-{
-  "compilerOptions": {
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment"
-  }
-}
-```
-
-In this case, you will always have to import the `h` function and the `Fragment` component yourself.
-
-```tsx
-import { h, Fragment } from '@dark-engine/core';
-```
-
 ```tsx
 const content = (
   <>
diff --git a/packages/core/src/atom/atom.ts b/packages/core/src/atom/atom.ts
index 3cafca83..30e396b1 100644
--- a/packages/core/src/atom/atom.ts
+++ b/packages/core/src/atom/atom.ts
@@ -11,14 +11,14 @@ import { type Hook } from '../fiber';
 import { batch } from '../batch';
 
 class Atom<T = unknown> {
-  private value: T;
-  private connections1: Map<Hook, Tuple<T>>;
-  private connections2: Map<T, Tuple<T>>;
-  private subjects: Set<ReadableAtom>;
-  private emitter: EventEmitter<'data', EmitterValue<T>>;
-
-  constructor(value: T) {
-    this.value = value;
+  private v: T; // value
+  private c1: Map<Hook, Tuple<T>>; // connnections 1
+  private c2: Map<T, Tuple<T>>; // connections 2
+  private s: Set<ReadableAtom>; // subjects
+  private e: EventEmitter<'data', EmitterValue<T>>;
+
+  constructor(x: T) {
+    this.v = x;
   }
 
   val(fn?: ShouldUpdate<T>, key?: T) {
@@ -30,92 +30,84 @@ class Atom<T = unknown> {
       }
     }
 
-    return this.value;
+    return this.v;
   }
 
   get() {
-    return this.value;
+    return this.v;
   }
 
   on(fn: SubscriberWithValue<EmitterValue<T>>) {
-    !this.emitter && (this.emitter = new EventEmitter());
-
-    return this.emitter.on('data', fn);
+    !this.e && (this.e = new EventEmitter());
+    return this.e.on('data', fn);
   }
 
   kill() {
-    if (this.connections1) {
-      for (const [hook, [_, __, ___, key]] of this.connections1) {
-        this.off(hook, key);
-      }
+    if (this.c1) {
+      for (const [hook, [_, __, ___, key]] of this.c1) this.off(hook, key);
     }
 
-    if (this.connections2) {
-      for (const [key, [_, hook]] of this.connections2) {
-        this.off(hook, key);
-      }
+    if (this.c2) {
+      for (const [key, [_, hook]] of this.c2) this.off(hook, key);
     }
 
-    this.connections1 = null;
-    this.connections2 = null;
-    this.emitter = null;
-    this.subjects = null;
+    this.c1 = null;
+    this.c2 = null;
+    this.e = null;
+    this.s = null;
   }
 
   toString() {
-    return String(this.value);
+    return String(this.v);
   }
 
   toJSON() {
-    return this.value;
+    return this.v;
   }
 
   valueOf() {
-    return this.value;
+    return this.v;
   }
 
   __connect(fn: ShouldUpdate<T>, key: T) {
     const rootId = getRootId();
-    const fiber = $$scope().getCursorFiber();
+    const fiber = $$scope().getCursor();
     const { hook } = fiber;
-    const disconnect = () => this.off(hook, key);
 
     !hook.atoms && (hook.atoms = new Map());
-    hook.atoms.set(this, disconnect);
+    hook.atoms.set(this, this.off.bind(this, hook, key));
     fiber.markHost(ATOM_HOST_MASK);
 
     if (detectIsEmpty(key)) {
-      !this.connections1 && (this.connections1 = new Map());
-      this.connections1.set(hook, [rootId, hook, fn, key]);
+      !this.c1 && (this.c1 = new Map());
+      this.c1.set(hook, [rootId, hook, fn, key]);
     } else {
-      !this.connections2 && (this.connections2 = new Map());
-      this.connections2.set(key, [rootId, hook, fn, key]);
+      !this.c2 && (this.c2 = new Map());
+      this.c2.set(key, [rootId, hook, fn, key]);
     }
-
-    return disconnect;
   }
 
   __addSubject(atom$: ReadableAtom) {
-    !this.subjects && (this.subjects = new Set());
-    this.subjects.add(atom$);
+    !this.s && (this.s = new Set());
+    this.s.add(atom$);
   }
 
   __removeSubject(atom$: ReadableAtom) {
-    return this.subjects && this.subjects.delete(atom$);
+    return this.s && this.s.delete(atom$);
   }
 
   __getSize() {
-    const size1 = this.connections1 ? this.connections1.size : 0;
-    const size2 = this.connections2 ? this.connections2.size : 0;
-    const size3 = this.subjects ? this.subjects.size : 0;
-    const size4 = this.emitter ? this.emitter.__getSize() : 0;
+    const size1 = this.c1 ? this.c1.size : 0;
+    const size2 = this.c2 ? this.c2.size : 0;
+    const size3 = this.s ? this.s.size : 0;
+    const size4 = this.e ? this.e.__getSize() : 0;
 
     return size1 + size2 + size3 + size4;
   }
 
   protected setValue(value: T | ((prevValue: T) => T)) {
-    const prev = this.value;
-    const next = detectIsFunction(value) ? value(this.value) : value;
+    const prev = this.v;
+    const next = detectIsFunction(value) ? value(this.v) : value;
     const data: EmitterValue<T> = { prev, next };
     const make = (tuple: Tuple<T>, prev: T, next: T) => {
       const [rootId, hook, shouldUpdate, key] = tuple;
@@ -128,8 +120,8 @@ class Atom<T = unknown> {
           const tools = createTools({
             next,
             get: () => prev,
-            set: () => (this.value = next),
-            reset: () => (this.value = prev),
+            set: () => (this.v = next),
+            reset: () => (this.v = prev),
           });
 
           update(tools);
@@ -139,29 +131,27 @@ class Atom<T = unknown> {
       }
     };
 
-    this.value = next;
+    this.v = next;
 
-    if (this.connections1) {
-      for (const [_, tuple] of this.connections1) {
-        make(tuple, prev, next);
-      }
+    if (this.c1) {
+      for (const [_, tuple] of this.c1) make(tuple, prev, next);
     }
 
-    if (this.connections2) {
-      if (this.connections2.has(next)) {
-        make(this.connections2.get(next), prev, next);
-        this.connections2.has(prev) && make(this.connections2.get(prev), prev, next);
+    if (this.c2) {
+      if (this.c2.has(next)) {
+        make(this.c2.get(next), prev, next);
+        this.c2.has(prev) && make(this.c2.get(prev), prev, next);
       }
     }
 
-    this.emitter && this.emitter.emit('data', data);
-    this.subjects && this.subjects.forEach(x => x.__notify());
+    this.e && this.e.emit('data', data);
+    this.s && this.s.forEach(x => x.__notify());
   }
 
   private off(hook: Hook, key: T) {
     hook.atoms.delete(this);
-    this.connections1 && this.connections1.delete(hook);
-    this.connections2 && this.connections2.delete(key);
+    this.c1 && this.c1.delete(hook);
+    this.c2 && this.c2.delete(key);
   }
 }
 
diff --git a/packages/core/src/batch/batch.ts b/packages/core/src/batch/batch.ts
index 94dc1855..c5e163b2 100644
--- a/packages/core/src/batch/batch.ts
+++ b/packages/core/src/batch/batch.ts
@@ -5,15 +5,15 @@ import { $$scope } from '../scope';
 function batch(callback: () => void) {
   const $scope = $$scope();
 
-  $scope.setIsBatchZone(true);
+  $scope.setIsBatch(true);
   callback();
-  $scope.setIsBatchZone(false);
+  $scope.setIsBatch(false);
 }
 
 function addBatch(hook: Hook, callback: Callback, change: Callback) {
   const $scope = $$scope();
 
-  if ($scope.getIsTransitionZone()) {
+  if ($scope.getIsTransition()) {
     callback();
   } else {
     const batch = hook.getBatch() || { timer: null, changes: [] };
diff --git a/packages/core/src/element/element.ts b/packages/core/src/element/element.ts
deleted file mode 100644
index 9fa632e0..00000000
--- a/packages/core/src/element/element.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { type TagVirtualNodeFactory, type ViewOptions, View } from '../view';
-import { type ComponentFactory, type Component } from '../component';
-import { detectIsString, detectIsFunction } from '../utils';
-
-function createElement(
-  element: string | ComponentFactory,
-  props: object,
-  ...slot: Array<any>
-): TagVirtualNodeFactory | Component | null {
-  if (detectIsString(element)) {
-    const options = (props || {}) as ViewOptions;
-
-    options.as = element;
-    options.slot = slot;
-
-    return View(options);
-  }
-
-  if (detectIsFunction(element)) {
-    const options = (props || {}) as { slot: unknown };
-
-    options.slot = slot.length === 1 ? slot[0] : slot;
-
-    return element(options);
-  }
-
-  return null;
-}
-
-export { createElement, createElement as h };
diff --git a/packages/core/src/element/index.ts b/packages/core/src/element/index.ts
deleted file mode 100644
index ef9f88ec..00000000
--- a/packages/core/src/element/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './element';
diff --git a/packages/core/src/fiber/fiber.ts b/packages/core/src/fiber/fiber.ts
index 706bf7e3..369df986 100644
--- a/packages/core/src/fiber/fiber.ts
+++ b/packages/core/src/fiber/fiber.ts
@@ -74,11 +74,11 @@ class Fiber<N = NativeElement> {
 
 class Hook<T = unknown> {
   idx = 0;
-  values: Array<T> = [];
+  values: Array<T> = null;
   owner: Fiber = null;
-  atoms: Map<Atom, Callback> = null;
   mask = 0;
   box?: Box = null;
+  atoms?: Map<Atom, Callback> = null;
 
   __getMask(mask: number) {
     return Boolean(this.mask & mask);
@@ -128,7 +128,7 @@ class Hook<T = unknown> {
     return this.box?.providers;
   }
 
-  setProviders(x: Map<Context, ContextProvider>) {
+  setProviders(x: Box['providers']) {
     this.__box();
     this.box.providers = x;
   }
@@ -137,7 +137,7 @@ class Hook<T = unknown> {
     return this.box?.batch;
   }
 
-  setBatch(x: Batch) {
+  setBatch(x: Box['batch']) {
     this.__box();
     this.box.batch = x;
   }
@@ -146,7 +146,7 @@ class Hook<T = unknown> {
     return detectIsFunction(this.box?.catch);
   }
 
-  setCatch(x: Catch) {
+  setCatch(x: Box['catch']) {
     this.__box();
     this.box.catch = x;
   }
@@ -207,7 +207,7 @@ function getHook(alt: Fiber, prevInst: Instance, nextInst: Instance): Hook | nul
 type Box = {
   providers?: Map<Context, ContextProvider>;
   batch?: Batch;
-  catch?: Catch;
+  catch?: (error: Error) => void;
   pendings?: number;
 };
 
@@ -216,8 +216,6 @@ type Batch = {
   changes: Array<Callback>;
 };
 
-type Catch = (error: Error) => void;
-
 export type NativeElement = unknown;
 export type HookValue<T = any> = { deps: Array<any>; value: T };
 
diff --git a/packages/core/src/fragment/fragment.spec.tsx b/packages/core/src/fragment/fragment.spec.tsx
index e5aae8ef..b7161e79 100644
--- a/packages/core/src/fragment/fragment.spec.tsx
+++ b/packages/core/src/fragment/fragment.spec.tsx
@@ -1,4 +1,4 @@
-import { createBrowserEnv, dom } from '@test-utils';
+import { createBrowserEnv } from '@test-utils';
 
 import { component } from '../component';
 import { Fragment } from './fragment';
@@ -11,11 +11,6 @@ beforeEach(() => {
 
 describe('@core/fragment', () => {
   test('can render children correctly', () => {
-    const content = () => dom`
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    `;
     const App = component(() => {
       return (
         <Fragment>
@@ -27,6 +22,6 @@ describe('@core/fragment', () => {
     });
 
     render(<App />);
-    expect(host.innerHTML).toBe(content());
+    expect(host.innerHTML).toMatchInlineSnapshot(`"<div>1</div><div>2</div><div>3</div>"`);
   });
 });
diff --git a/packages/core/src/fragment/fragment.ts b/packages/core/src/fragment/fragment.ts
index 472695c8..ba6c9b1f 100644
--- a/packages/core/src/fragment/fragment.ts
+++ b/packages/core/src/fragment/fragment.ts
@@ -1,12 +1,15 @@
-import { component, detectIsComponent } from '../component';
 import type { KeyProps, SlotProps } from '../shared';
+import { component, detectIsComponent } from '../component';
 
 type FragmentProps = Required<SlotProps> & KeyProps;
 
 const $$fragment = Symbol('fragment');
 
-const Fragment = component<FragmentProps>(({ slot }) => slot || null, { token: $$fragment, displayName: 'Fragment' });
+const Fragment = component<FragmentProps>(({ slot }) => slot || null, {
+  token: $$fragment,
+  displayName: 'Fragment',
+});
 
-const detectIsFragment = (instance: unknown) => detectIsComponent(instance) && instance.token === $$fragment;
+const detectIsFragment = (x: unknown) => detectIsComponent(x) && x.token === $$fragment;
 
 export { Fragment, detectIsFragment };
diff --git a/packages/core/src/guard/guard.ts b/packages/core/src/guard/guard.ts
index 2d31853b..a3902482 100644
--- a/packages/core/src/guard/guard.ts
+++ b/packages/core/src/guard/guard.ts
@@ -1,5 +1,6 @@
 import { type DarkElement } from '../shared';
 import { component } from '../component';
+import { falseFn } from '../utils';
 import { memo } from '../memo';
 
 type GuardProps = {
@@ -8,7 +9,7 @@ type GuardProps = {
 
 const Guard = memo(
   component<GuardProps>(({ slot }) => slot, { displayName: 'Guard' }),
-  () => false,
+  falseFn,
 );
 
 export { Guard };
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3d27b8a5..ab9ef6ec 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -2,7 +2,6 @@
 export * from './component';
 export * from './view';
 export { createContext, useContext } from './context';
-export { h } from './element';
 export * from './fiber';
 export * from './workloop';
 export * from './atom';
diff --git a/packages/core/src/internal/internal.ts b/packages/core/src/internal/internal.ts
index 9ccdc5c4..bf2e7c85 100644
--- a/packages/core/src/internal/internal.ts
+++ b/packages/core/src/internal/internal.ts
@@ -4,7 +4,7 @@ import { useMemo } from '../use-memo';
 import { $$scope } from '../scope';
 
 function useCursor() {
-  return $$scope().getCursorFiber();
+  return $$scope().getCursor();
 }
 
 function useSSR() {
diff --git a/packages/core/src/jsx-runtime.ts b/packages/core/src/jsx-runtime.ts
index 5858df37..d890200f 100644
--- a/packages/core/src/jsx-runtime.ts
+++ b/packages/core/src/jsx-runtime.ts
@@ -19,7 +19,7 @@ function jsx(
   }
 
   if (detectIsString(element)) {
-    const options = ($props || {}) as ViewOptions;
+    const options = $props as ViewOptions;
 
     options.as = element;
     options.slot = slot;
@@ -28,7 +28,7 @@ function jsx(
   }
 
   if (detectIsFunction(element)) {
-    const options = ($props || {}) as { slot: unknown };
+    const options = $props as { slot: unknown };
 
     options.slot = slot.length === 1 ? slot[0] : slot;
 
diff --git a/packages/core/src/lazy/lazy.ts b/packages/core/src/lazy/lazy.ts
index 369598e6..019720f1 100644
--- a/packages/core/src/lazy/lazy.ts
+++ b/packages/core/src/lazy/lazy.ts
@@ -2,7 +2,6 @@ import { detectIsUndefined, detectIsFunction, illegal, throwThis } from '../util
 import { type ComponentFactory, component } from '../component';
 import { useMemo } from '../use-memo';
 
-const $$lazy = Symbol('lazy');
 const factories = new Map<Loader, ComponentFactory>();
 
 function lazy<P extends object>(loader: Loader<P>, done?: () => void) {
@@ -23,7 +22,7 @@ function lazy<P extends object>(loader: Loader<P>, done?: () => void) {
 
       return factory ? factory(props) : null;
     },
-    { token: $$lazy, displayName: 'Lazy' },
+    { displayName: 'Lazy' },
   );
 }
 
diff --git a/packages/core/src/platform/platform.ts b/packages/core/src/platform/platform.ts
index 2ffaaa99..2dcb4504 100644
--- a/packages/core/src/platform/platform.ts
+++ b/packages/core/src/platform/platform.ts
@@ -30,7 +30,7 @@ const platform: Platform = {
 
 const detectIsServer = () => !platform.detectIsDynamic();
 
-const detectIsHydration = () => $$scope().getIsHydrateZone();
+const detectIsHydration = () => $$scope().getIsHydration();
 
 const detectIsSSR = () => detectIsServer() || detectIsHydration();
 
diff --git a/packages/core/src/reconciler/index.ts b/packages/core/src/reconciler/index.ts
new file mode 100644
index 00000000..1659dc4d
--- /dev/null
+++ b/packages/core/src/reconciler/index.ts
@@ -0,0 +1 @@
+export * from './reconciler';
diff --git a/packages/core/src/reconciler/reconciler.ts b/packages/core/src/reconciler/reconciler.ts
new file mode 100644
index 00000000..1fbdea3c
--- /dev/null
+++ b/packages/core/src/reconciler/reconciler.ts
@@ -0,0 +1,190 @@
+import { detectIsEmpty, createIndexKey, logError, formatErrorMsg } from '../utils';
+import { type ElementKey as Key, type Instance } from '../shared';
+import { tryOptStaticSlot, tryOptMemoSlot } from '../walk';
+import { Flag, FLUSH_MASK } from '../constants';
+import { type Fiber } from '../fiber';
+import { type Scope } from '../scope';
+import {
+  type CanHaveChildren,
+  detectAreSameInstanceTypes,
+  hasChildrenProp,
+  hasElementFlag,
+  getElementKey,
+} from '../view';
+
+class Reconciler {
+  private store: Record<number, Store>;
+
+  constructor(store: Reconciler['store'] = {}) {
+    this.store = store;
+  }
+
+  get(id: number) {
+    return this.store[id];
+  }
+
+  reset() {
+    this.store = {};
+  }
+
+  fork() {
+    return new Reconciler({ ...this.store });
+  }
+
+  reconcile(fiber: Fiber, alt: Fiber, $scope: Scope) {
+    const { id, inst } = fiber;
+    const areSameTypes = detectAreSameInstanceTypes(alt.inst, inst);
+    const nextChildren = (inst as CanHaveChildren).children;
+
+    if (!areSameTypes) {
+      $scope.addDeletion(alt);
+    } else if (hasChildrenProp(alt.inst) && nextChildren && alt.cc !== 0) {
+      const hasSameCount = alt.cc === nextChildren.length;
+      const check = hasElementFlag(inst, Flag.SKIP_SCAN_OPT) ? !hasSameCount : true;
+
+      if (check) {
+        const { prevKeys, nextKeys, prevKeysMap, nextKeysMap, keyedFibersMap } = extractKeys(alt.child, nextChildren);
+        const flush = nextKeys.length === 0;
+        let size = Math.max(prevKeys.length, nextKeys.length);
+        let p = 0;
+        let n = 0;
+
+        this.createStore(id, keyedFibersMap);
+
+        for (let i = 0; i < size; i++) {
+          const nextKey = nextKeys[i - n] ?? null;
+          const prevKey = prevKeys[i - p] ?? null;
+          const prevKeyFiber = keyedFibersMap[prevKey] || null;
+
+          if (nextKey !== prevKey) {
+            if (nextKey !== null && !prevKeysMap[nextKey]) {
+              if (prevKey !== null && !nextKeysMap[prevKey]) {
+                this.replace(id, nextKey);
+                $scope.addDeletion(prevKeyFiber);
+              } else {
+                this.insert(id, nextKey);
+                p++;
+                size++;
+              }
+            } else if (!nextKeysMap[prevKey]) {
+              this.remove(id, prevKey);
+              $scope.addDeletion(prevKeyFiber);
+              flush && (prevKeyFiber.mask |= FLUSH_MASK);
+              n++;
+              size++;
+            } else if (nextKeysMap[prevKey] && nextKeysMap[nextKey]) {
+              this.move(id, nextKey);
+            }
+          } else if (nextKey !== null) {
+            this.stable(id, nextKey);
+          }
+        }
+
+        hasElementFlag(inst, Flag.STATIC_SLOT_OPT) && tryOptStaticSlot(fiber, alt, $scope);
+        hasElementFlag(inst, Flag.MEMO_SLOT_OPT) && tryOptMemoSlot(fiber, alt, $scope);
+      }
+    }
+  }
+
+  private createStore(id: number, map: Record<Key, Fiber>) {
+    this.store[id] = {
+      map,
+      replace: null,
+      insert: null,
+      remove: null,
+      move: null,
+      stable: null,
+    };
+  }
+
+  private replace(id: number, nextKey: Key) {
+    !this.store[id].replace && (this.store[id].replace = {});
+    this.store[id].replace[nextKey] = true;
+  }
+
+  private insert(id: number, nextKey: Key) {
+    !this.store[id].insert && (this.store[id].insert = {});
+    this.store[id].insert[nextKey] = true;
+  }
+
+  private remove(id: number, prevKey: Key) {
+    !this.store[id].remove && (this.store[id].remove = {});
+    this.store[id].remove[prevKey] = true;
+  }
+
+  private move(id: number, nextKey: Key) {
+    !this.store[id].move && (this.store[id].move = {});
+    this.store[id].move[nextKey] = true;
+  }
+
+  private stable(id: number, nextKey: Key) {
+    !this.store[id].stable && (this.store[id].stable = {});
+    this.store[id].stable[nextKey] = true;
+  }
+}
+
+function extractKeys(alt: Fiber, children: Array<Instance>) {
+  let nextFiber = alt;
+  let idx = 0;
+  const prevKeys: Array<Key> = [];
+  const nextKeys: Array<Key> = [];
+  const prevKeysMap: Record<Key, boolean> = {};
+  const nextKeysMap: Record<Key, boolean> = {};
+  const keyedFibersMap: Record<Key, Fiber> = {};
+  const usedKeysMap: Record<Key, boolean> = {};
+
+  while (nextFiber || idx < children.length) {
+    if (nextFiber) {
+      const key = getElementKey(nextFiber.inst);
+      const prevKey = detectIsEmpty(key) ? createIndexKey(idx) : key;
+
+      if (!prevKeysMap[prevKey]) {
+        prevKeysMap[prevKey] = true; // !
+        prevKeys.push(prevKey);
+      }
+
+      keyedFibersMap[prevKey] = nextFiber;
+    }
+
+    if (idx < children.length) {
+      const inst = children[idx];
+      const key = getElementKey(inst);
+      const nextKey = detectIsEmpty(key) ? createIndexKey(idx) : key;
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (usedKeysMap[nextKey]) {
+          logError(formatErrorMsg(`The key of node [${nextKey}] already has been used!`), [inst]);
+        }
+      }
+
+      if (!nextKeysMap[nextKey]) {
+        nextKeysMap[nextKey] = true; // !
+        nextKeys.push(nextKey);
+      }
+
+      usedKeysMap[nextKey] = true;
+    }
+
+    nextFiber = nextFiber ? nextFiber.next : null;
+    idx++;
+  }
+
+  return {
+    prevKeys,
+    nextKeys,
+    prevKeysMap,
+    nextKeysMap,
+    keyedFibersMap,
+  };
+}
+
+type Store = {
+  map: Record<Key, Fiber>;
+  replace: Record<Key, true>;
+  insert: Record<Key, true>;
+  remove: Record<Key, true>;
+  move: Record<Key, true>;
+  stable: Record<Key, true>;
+};
+
+export { Reconciler };
diff --git a/packages/core/src/ref/ref.ts b/packages/core/src/ref/ref.ts
index 4fa07174..0b4aed51 100644
--- a/packages/core/src/ref/ref.ts
+++ b/packages/core/src/ref/ref.ts
@@ -6,9 +6,7 @@ function detectIsMutableRef(ref: unknown): ref is MutableRef {
   const mutableRef = ref as MutableRef;
 
   for (const key in mutableRef) {
-    if (key === 'current' && mutableRef.hasOwnProperty(key)) {
-      return true;
-    }
+    if (key === 'current' && mutableRef.hasOwnProperty(key)) return true;
   }
 
   return false;
@@ -23,14 +21,10 @@ function applyRef<T>(ref: Ref<T>, current: T) {
 }
 
 function useRef<T>(initialValue: T = null): MutableRef<T> {
-  const ref = useMemo(() => ({ current: initialValue }), []) as MutableRef<T>;
-
-  return ref;
+  return useMemo(() => ({ current: initialValue }), []) as MutableRef<T>;
 }
 
-export type MutableRef<T = unknown> = {
-  current: T;
-};
+export type MutableRef<T = unknown> = { current: T };
 
 export type FunctionRef<T = unknown> = (ref: T) => void;
 
diff --git a/packages/core/src/scheduler/scheduler.ts b/packages/core/src/scheduler/scheduler.ts
index 11c28dd1..1831aaaf 100644
--- a/packages/core/src/scheduler/scheduler.ts
+++ b/packages/core/src/scheduler/scheduler.ts
@@ -1,11 +1,13 @@
 import { HOOK_DELIMETER, YIELD_INTERVAL, TaskPriority } from '../constants';
 import { getTime, detectIsPromise, detectIsFunction } from '../utils';
-import { type WorkLoop, workLoop, detectIsBusy } from '../workloop';
+import { workLoop, detectIsBusy } from '../workloop';
 import { type Callback } from '../shared';
 import { EventEmitter } from '../emitter';
 import { platform } from '../platform';
 import { type Fiber } from '../fiber';
 
+type Loop = typeof workLoop;
+
 class MessageChannel extends EventEmitter<PortEvent> {
   port1: MessagePort = null;
   port2: MessagePort = null;
@@ -50,7 +52,7 @@ class Scheduler {
   };
   private deadline = 0;
   private task: Task = null;
-  private scheduledCallback: WorkLoop = null;
+  private scheduledCallback: Loop = null;
   private isMessageLoopRunning = false;
   private channel: MessageChannel = null;
   private port: MessagePort = null;
@@ -161,7 +163,7 @@ class Scheduler {
     }
   }
 
-  private requestCallbackAsync(callback: WorkLoop) {
+  private requestCallbackAsync(callback: Loop) {
     this.scheduledCallback = callback;
 
     if (!this.isMessageLoopRunning) {
@@ -170,7 +172,7 @@ class Scheduler {
     }
   }
 
-  private requestCallback(callback: WorkLoop) {
+  private requestCallback(callback: Loop) {
     const something = callback(false);
 
     if (detectIsPromise(something)) {
diff --git a/packages/core/src/scope/scope.ts b/packages/core/src/scope/scope.ts
index de33d58f..f085a902 100644
--- a/packages/core/src/scope/scope.ts
+++ b/packages/core/src/scope/scope.ts
@@ -1,110 +1,42 @@
-import type { Callback, ElementKey, AppResources, AppResource } from '../shared';
+import type { Callback, AppResources, AppResource } from '../shared';
 import { platform, detectIsServer } from '../platform';
-import { EventEmitter } from '../emitter';
 import { type Fiber, Awaiter } from '../fiber';
+import { Reconciler } from '../reconciler';
+import { EventEmitter } from '../emitter';
 
 class Scope {
   private root: Fiber = null;
   private wip: Fiber = null;
   private cursor: Fiber = null;
   private unit: Fiber = null;
-  private mountDeep = true;
-  private mountLevel = 0;
-  private mountNav: Record<number, number> = {};
+  private mDeep = true;
+  private mLevel = 0;
+  private mNav: Record<number, number> = {};
   private events = new Map<string, WeakMap<object, Function>>();
-  private unsubs = new Set<Callback>();
-  private actions: Actions = {};
+  private offs = new Set<Callback>();
+  private reconciler = new Reconciler();
   private candidates = new Set<Fiber>();
   private deletions = new Set<Fiber>();
   private cancels: Array<Callback> = [];
-  private asyncEffects = new Set<Callback>();
-  private layoutEffects = new Set<Callback>();
-  private insertionEffects = new Set<Callback>();
-  private resourceId = 0;
+  private effects1 = new Set<Callback>(); // async effects
+  private effects2 = new Set<Callback>(); // layout effects
+  private effects3 = new Set<Callback>(); // insertion effects
+  private resId = 0;
   private resources: AppResources = new Map();
-  private awaiter: Awaiter = new Awaiter();
+  private awaiter = new Awaiter();
   private onTransitionEnd: Callback = null;
-  private isLayoutEffectsZone = false;
-  private isInsertionEffectsZone = false;
-  private isUpdateZone = false;
-  private isBatchZone = false;
-  private isHydrateZone = false;
-  private isStreamZone = false;
-  private isTransitionZone = false;
-  private isEventZone = false;
+  private isEffect3 = false;
+  private isUpdate = false;
+  private isBatch = false;
+  private isHydration = false;
+  private isStream = false;
+  private isTransition = false;
+  private isEvent = false;
   private isHot = false;
   private isDynamic = platform.detectIsDynamic();
   private isServer = detectIsServer();
   private emitter = new EventEmitter();
 
-  private resetActions() {
-    this.actions = {};
-  }
-
-  getActionsById(id: number) {
-    return this.actions[id];
-  }
-
-  addActionMap(id: number, map: Record<ElementKey, Fiber>) {
-    this.actions[id] = {
-      map,
-      replace: null,
-      insert: null,
-      remove: null,
-      move: null,
-      stable: null,
-    };
-  }
-
-  addReplaceAction(id: number, nextKey: ElementKey) {
-    !this.actions[id].replace && (this.actions[id].replace = {});
-    this.actions[id].replace[nextKey] = true;
-  }
-
-  addInsertAction(id: number, nextKey: ElementKey) {
-    !this.actions[id].insert && (this.actions[id].insert = {});
-    this.actions[id].insert[nextKey] = true;
-  }
-
-  addRemoveAction(id: number, prevKey: ElementKey) {
-    !this.actions[id].remove && (this.actions[id].remove = {});
-    this.actions[id].remove[prevKey] = true;
-  }
-
-  addMoveAction(id: number, nextKey: ElementKey) {
-    !this.actions[id].move && (this.actions[id].move = {});
-    this.actions[id].move[nextKey] = true;
-  }
-
-  addStableAction(id: number, nextKey: ElementKey) {
-    !this.actions[id].stable && (this.actions[id].stable = {});
-    this.actions[id].stable[nextKey] = true;
-  }
-
-  fork() {
-    const scope = new Scope();
-
-    scope.root = null;
-    scope.wip = null;
-    scope.cursor = null;
-    scope.unit = this.unit;
-    scope.mountDeep = this.mountDeep;
-    scope.mountLevel = this.mountLevel;
-    scope.mountNav = { ...this.mountNav };
-    scope.events = this.events;
-    scope.unsubs = this.unsubs;
-    scope.actions = { ...this.actions };
-    scope.candidates = new Set([...this.candidates]);
-    scope.deletions = new Set([...this.deletions]);
-    scope.asyncEffects = new Set([...this.asyncEffects]);
-    scope.layoutEffects = new Set([...this.layoutEffects]);
-    scope.isUpdateZone = this.isUpdateZone;
-    scope.emitter = this.emitter;
-    scope.awaiter = this.awaiter;
-
-    return scope;
-  }
-
   getRoot() {
     return this.root;
   }
@@ -114,87 +46,87 @@ class Scope {
   }
 
   keepRoot() {
-    !this.isUpdateZone && this.setRoot(this.wip);
+    !this.isUpdate && this.setRoot(this.wip);
   }
 
-  getWorkInProgress() {
+  getWip() {
     return this.wip;
   }
 
-  setWorkInProgress(fiber: Fiber) {
+  setWip(fiber: Fiber) {
     this.wip = fiber;
   }
 
-  getNextUnitOfWork() {
+  getNextUnit() {
     return this.unit;
   }
 
-  setNextUnitOfWork(fiber: Fiber) {
+  setNextUnit(fiber: Fiber) {
     this.unit = fiber;
   }
 
-  getCursorFiber() {
+  getCursor() {
     return this.cursor;
   }
 
-  setCursorFiber(fiber: Fiber) {
+  setCursor(fiber: Fiber) {
     this.cursor = fiber;
   }
 
   navToChild() {
-    this.mountLevel = this.mountLevel + 1;
-    this.mountNav[this.mountLevel] = 0;
+    this.mLevel = this.mLevel + 1;
+    this.mNav[this.mLevel] = 0;
   }
 
   navToSibling() {
-    this.mountNav[this.mountLevel] = this.mountNav[this.mountLevel] + 1;
+    this.mNav[this.mLevel] = this.mNav[this.mLevel] + 1;
   }
 
   navToParent() {
-    this.mountLevel = this.mountLevel - 1;
+    this.mLevel = this.mLevel - 1;
   }
 
   navToPrev() {
-    const idx = this.getMountIndex();
+    const idx = this.getMountIdx();
 
     if (idx === 0) {
       this.navToParent();
       this.setMountDeep(true);
     } else {
-      this.mountNav[this.mountLevel] = this.mountNav[this.mountLevel] - 1;
+      this.mNav[this.mLevel] = this.mNav[this.mLevel] - 1;
       this.setMountDeep(false);
     }
   }
 
-  getMountIndex() {
-    return this.mountNav[this.mountLevel];
+  getMountIdx() {
+    return this.mNav[this.mLevel];
   }
 
   getMountDeep() {
-    return this.mountDeep;
+    return this.mDeep;
   }
 
   setMountDeep(value: boolean) {
-    this.mountDeep = value;
+    this.mDeep = value;
   }
 
   resetMount() {
-    this.mountLevel = 0;
-    this.mountNav = {};
-    this.mountDeep = true;
+    this.mLevel = 0;
+    this.mNav = {};
+    this.mDeep = true;
   }
 
   getEvents() {
     return this.events;
   }
 
-  addEventUnsubscriber(fn: Callback) {
-    this.unsubs.add(fn);
+  addOff(fn: Callback) {
+    this.offs.add(fn);
   }
 
-  unsubscribeEvents() {
-    this.unsubs.forEach(x => x());
-    this.unsubs = new Set();
+  off() {
+    this.offs.forEach(x => x());
+    this.offs = new Set();
   }
 
   getCandidates() {
@@ -232,48 +164,46 @@ class Scope {
     this.deletions = new Set();
   }
 
-  addAsyncEffect(fn: Callback) {
-    this.asyncEffects.add(fn);
+  addEffect1(fn: Callback) {
+    this.effects1.add(fn);
   }
 
-  resetAsyncEffects() {
-    this.asyncEffects = new Set();
+  resetEffects1() {
+    this.effects1 = new Set();
   }
 
-  runAsyncEffects() {
+  runEffects1() {
     if (!this.isDynamic) return;
-    const effects = this.asyncEffects;
+    const effects = this.effects1;
     effects.size > 0 && setTimeout(() => effects.forEach(fn => fn()));
   }
 
-  addLayoutEffect(fn: Callback) {
-    this.layoutEffects.add(fn);
+  addEffect2(fn: Callback) {
+    this.effects2.add(fn);
   }
 
-  resetLayoutEffects() {
-    this.layoutEffects = new Set();
+  resetEffects2() {
+    this.effects2 = new Set();
   }
 
-  runLayoutEffects() {
+  runEffects2() {
     if (!this.isDynamic) return;
-    this.setIsLayoutEffectsZone(true);
-    this.layoutEffects.forEach(fn => fn());
-    this.setIsLayoutEffectsZone(false);
+    this.effects2.forEach(fn => fn());
   }
 
-  addInsertionEffect(fn: Callback) {
-    this.insertionEffects.add(fn);
+  addEffect3(fn: Callback) {
+    this.effects3.add(fn);
   }
 
-  resetInsertionEffects() {
-    this.insertionEffects = new Set();
+  resetEffects3() {
+    this.effects3 = new Set();
   }
 
-  runInsertionEffects() {
+  runEffects3() {
     if (!this.isDynamic) return;
-    this.setIsInsertionEffectsZone(true);
-    this.insertionEffects.forEach(fn => fn());
-    this.setIsInsertionEffectsZone(false);
+    this.setIsEffect3(true);
+    this.effects3.forEach(fn => fn());
+    this.setIsEffect3(false);
   }
 
   addCancel(fn: Callback) {
@@ -281,77 +211,67 @@ class Scope {
   }
 
   applyCancels() {
-    for (let i = this.cancels.length - 1; i >= 0; i--) {
-      this.cancels[i]();
-    }
+    for (let i = this.cancels.length - 1; i >= 0; i--) this.cancels[i]();
   }
 
   resetCancels() {
     this.cancels = [];
   }
 
-  getIsLayoutEffectsZone() {
-    return this.isLayoutEffectsZone;
-  }
-
-  setIsLayoutEffectsZone(value: boolean) {
-    this.isLayoutEffectsZone = value;
+  getIsEffect3() {
+    return this.isEffect3;
   }
 
-  getIsInsertionEffectsZone() {
-    return this.isInsertionEffectsZone;
+  setIsEffect3(value: boolean) {
+    this.isEffect3 = value;
   }
 
-  setIsInsertionEffectsZone(value: boolean) {
-    this.isInsertionEffectsZone = value;
+  getIsUpdate() {
+    return this.isUpdate;
   }
 
-  getIsUpdateZone() {
-    return this.isUpdateZone;
+  setIsUpdate(value: boolean) {
+    this.isUpdate = value;
   }
 
-  setIsUpdateZone(value: boolean) {
-    this.isUpdateZone = value;
+  getIsBatch() {
+    return this.isBatch;
   }
 
-  getIsBatchZone() {
-    return this.isBatchZone;
+  setIsBatch(value: boolean) {
+    this.isBatch = value;
   }
 
-  setIsBatchZone(value: boolean) {
-    this.isBatchZone = value;
+  getIsHydration() {
+    return this.isHydration;
   }
 
-  getIsHydrateZone() {
-    return this.isHydrateZone;
+  setIsHydration(value: boolean) {
+    this.isHydration = value;
   }
 
-  setIsHydrateZone(value: boolean) {
-    this.isHydrateZone = value;
+  getIsStream() {
+    return this.isStream;
   }
 
-  getIsStreamZone() {
-    return this.isStreamZone;
+  setIsStream(value: boolean) {
+    this.isStream = value;
   }
 
-  setIsStreamZone(value: boolean) {
-    this.isStreamZone = value;
+  getIsTransition() {
+    return this.isTransition;
   }
 
-  getIsTransitionZone() {
-    return this.isTransitionZone;
+  setIsTransition(value: boolean) {
+    this.isTransition = value;
   }
 
-  setIsTransitionZone(value: boolean) {
-    this.isTransitionZone = value;
+  getIsEvent() {
+    return this.isEvent;
   }
 
-  getIsEventZone() {
-    return this.isEventZone;
-  }
-
-  setIsEventZone(value: boolean) {
-    this.isEventZone = value;
+  setIsEvent(value: boolean) {
+    this.isEvent = value;
   }
 
   getIsHot() {
@@ -372,19 +292,19 @@ class Scope {
 
   cleanup() {
     this.keepRoot(); // !
-    this.setWorkInProgress(null);
-    this.setNextUnitOfWork(null);
-    this.setCursorFiber(null);
+    this.setWip(null);
+    this.setNextUnit(null);
+    this.setCursor(null);
     this.resetMount();
     this.resetCandidates();
     this.resetDeletions();
     this.resetCancels();
-    this.resetInsertionEffects();
-    this.resetLayoutEffects();
-    this.resetAsyncEffects();
-    this.setIsHydrateZone(false);
-    this.setIsUpdateZone(false);
-    this.resetActions();
+    this.resetEffects3();
+    this.resetEffects2();
+    this.resetEffects1();
+    this.setIsHydration(false);
+    this.setIsUpdate(false);
+    this.reconciler.reset();
   }
 
   getEmitter() {
@@ -404,15 +324,15 @@ class Scope {
   }
 
   getResourceId() {
-    return this.resourceId;
+    return this.resId;
   }
 
   setResourceId(id: number) {
-    this.resourceId = id;
+    this.resId = id;
   }
 
   getNextResourceId() {
-    return ++this.resourceId;
+    return ++this.resId;
   }
 
   getAwaiter() {
@@ -421,23 +341,40 @@ class Scope {
 
   runAfterCommit() {
     this.resources = new Map();
-    this.isServer && (this.resourceId = 0);
+    this.isServer && (this.resId = 0);
   }
-}
 
-type Actions = Record<
-  number,
-  {
-    map: Record<ElementKey, Fiber>;
-    replace: Record<ElementKey, true>;
-    insert: Record<ElementKey, true>;
-    remove: Record<ElementKey, true>;
-    move: Record<ElementKey, true>;
-    stable: Record<ElementKey, true>;
+  getReconciler() {
+    return this.reconciler;
   }
->;
+
+  fork() {
+    const scope = new Scope();
+
+    scope.root = null;
+    scope.wip = null;
+    scope.cursor = null;
+    scope.unit = this.unit;
+    scope.mDeep = this.mDeep;
+    scope.mLevel = this.mLevel;
+    scope.mNav = { ...this.mNav };
+    scope.events = this.events;
+    scope.offs = this.offs;
+    scope.reconciler = this.reconciler.fork();
+    scope.candidates = new Set([...this.candidates]);
+    scope.deletions = new Set([...this.deletions]);
+    scope.effects1 = new Set([...this.effects1]);
+    scope.effects2 = new Set([...this.effects2]);
+    scope.isUpdate = this.isUpdate;
+    scope.emitter = this.emitter;
+    scope.awaiter = this.awaiter;
+
+    return scope;
+  }
+}
 
 let rootId: number = null;
+
 const scopes = new Map<number, Scope>();
 
 const getRootId = () => rootId;
@@ -449,9 +386,7 @@ const setRootId = (id: number) => {
 
 const removeScope = (id: number) => scopes.delete(id);
 
-const replaceScope = (scope: Scope, id: number = rootId) => {
-  Object.assign(scopes.get(id), scope);
-};
+const replaceScope = (scope: Scope, id: number = rootId) => Object.assign(scopes.get(id), scope);
 
 const $$scope = (id: number = rootId) => scopes.get(id);
 
diff --git a/packages/core/src/start-transition/start-transition.ts b/packages/core/src/start-transition/start-transition.ts
index 6917b6ea..0f99a200 100644
--- a/packages/core/src/start-transition/start-transition.ts
+++ b/packages/core/src/start-transition/start-transition.ts
@@ -6,9 +6,9 @@ import { $$scope } from '../scope';
 function startTransition(callback: Callback) {
   const $scope = $$scope();
 
-  $scope.setIsTransitionZone(true);
+  $scope.setIsTransition(true);
   callback();
-  $scope.setIsTransitionZone(false);
+  $scope.setIsTransition(false);
 }
 
 function useTransition(): [boolean, typeof startTransition] {
diff --git a/packages/core/src/unmount/unmount.ts b/packages/core/src/unmount/unmount.ts
index 75ca365b..59bc19a5 100644
--- a/packages/core/src/unmount/unmount.ts
+++ b/packages/core/src/unmount/unmount.ts
@@ -21,22 +21,19 @@ function unmountFiber(fiber: Fiber) {
 }
 
 function onWalk(fiber: Fiber, skip: Callback) {
-  const { hook } = fiber;
-
   if (!(fiber.mask & mask)) return skip();
-  if (hook?.values.length > 0) {
-    const $hook = hook as Hook<HookValue<UseEffectValue>>;
-
-    fiber.mask & INSERTION_EFFECT_HOST_MASK && dropInsertionEffects($hook);
-    fiber.mask & LAYOUT_EFFECT_HOST_MASK && dropLayoutEffects($hook);
-    fiber.mask & ASYNC_EFFECT_HOST_MASK && dropEffects($hook);
+  const hook = fiber.hook as Hook<HookValue<UseEffectValue>>;
+  const values = hook?.values;
+  const atoms = hook?.atoms;
+
+  if (values && values.length > 0) {
+    fiber.mask & INSERTION_EFFECT_HOST_MASK && dropInsertionEffects(hook);
+    fiber.mask & LAYOUT_EFFECT_HOST_MASK && dropLayoutEffects(hook);
+    fiber.mask & ASYNC_EFFECT_HOST_MASK && dropEffects(hook);
   }
 
-  if (hook?.atoms) {
-    for (const [_, cleanup] of hook.atoms) {
-      cleanup();
-    }
-
+  if (atoms) {
+    for (const [_, cleanup] of atoms) cleanup();
     hook.atoms = null;
   }
 }
@@ -46,7 +43,7 @@ function unmountRoot(rootId: number, onCompleted: () => void) {
   const $scope = $$scope(rootId);
 
   unmountFiber($scope.getRoot());
-  $scope.unsubscribeEvents();
+  $scope.off();
   removeScope(rootId);
   onCompleted();
 }
diff --git a/packages/core/src/use-callback/use-callback.ts b/packages/core/src/use-callback/use-callback.ts
index 8dec5914..1bfd09a7 100644
--- a/packages/core/src/use-callback/use-callback.ts
+++ b/packages/core/src/use-callback/use-callback.ts
@@ -1,9 +1,7 @@
 import { useMemo } from '../use-memo';
 
 function useCallback<T = Function>(callback: T, deps: Array<any>): T {
-  const value = useMemo(() => callback, deps);
-
-  return value;
+  return useMemo(() => callback, deps);
 }
 
 export { useCallback };
diff --git a/packages/core/src/use-effect/use-effect.ts b/packages/core/src/use-effect/use-effect.ts
index ffb594c7..3067d788 100644
--- a/packages/core/src/use-effect/use-effect.ts
+++ b/packages/core/src/use-effect/use-effect.ts
@@ -30,9 +30,9 @@ function createEffect(token: Symbol, type: EffectType) {
         }
       };
 
-      isInsertionEffect && $scope.addInsertionEffect(runEffect);
-      isLayoutEffect && $scope.addLayoutEffect(runEffect);
-      isAsyncEffect && $scope.addAsyncEffect(runEffect);
+      isInsertionEffect && $scope.addEffect3(runEffect);
+      isLayoutEffect && $scope.addEffect2(runEffect);
+      isAsyncEffect && $scope.addEffect1(runEffect);
 
       detectIsFunction(scope.cleanup) && scope.cleanup();
 
diff --git a/packages/core/src/use-event/use-event.ts b/packages/core/src/use-event/use-event.ts
index be703fee..8fc29474 100644
--- a/packages/core/src/use-event/use-event.ts
+++ b/packages/core/src/use-event/use-event.ts
@@ -1,15 +1,12 @@
-import { useMemo } from '../use-memo';
 import { useCallback } from '../use-callback';
+import { useMemo } from '../use-memo';
 
 function useEvent<T extends (...args: Array<any>) => any>(fn: T) {
   const scope = useMemo(() => ({ fn }), []);
+  const callback = useCallback((...args: Array<any>) => scope.fn(...args), []);
 
   scope.fn = fn;
 
-  const callback = useCallback((...args: Array<any>) => {
-    return scope.fn(...args);
-  }, []);
-
   return callback as unknown as T;
 }
 
diff --git a/packages/core/src/use-id/use-id.ts b/packages/core/src/use-id/use-id.ts
index af35ed58..cf0b1c06 100644
--- a/packages/core/src/use-id/use-id.ts
+++ b/packages/core/src/use-id/use-id.ts
@@ -2,9 +2,7 @@ import { useMemo } from '../use-memo';
 import { getRootId } from '../scope';
 
 function useId() {
-  const id = useMemo(() => getNextId(getRootId()), []);
-
-  return id;
+  return useMemo(() => getNextId(getRootId()), []);
 }
 
 let nextId = 1000000;
diff --git a/packages/core/src/use-memo/use-memo.ts b/packages/core/src/use-memo/use-memo.ts
index 4517c77f..4bb3957c 100644
--- a/packages/core/src/use-memo/use-memo.ts
+++ b/packages/core/src/use-memo/use-memo.ts
@@ -24,6 +24,7 @@ function detectIsElement<T>(value: T) {
 function useMemo<T>(getValue: () => T, deps: Array<any>): T {
   const cursor = useCursor();
   const { hook } = cursor;
+  !hook.values && (hook.values = []); // !
   const { idx, values } = hook as Hook<HookValue<T>>;
   const state =
     values[idx] ||
diff --git a/packages/core/src/use-state/use-state.ts b/packages/core/src/use-state/use-state.ts
index 4353ca6c..c4b70df0 100644
--- a/packages/core/src/use-state/use-state.ts
+++ b/packages/core/src/use-state/use-state.ts
@@ -17,7 +17,7 @@ type CreateToolsOptions<T> = {
 function createTools<T>(options: CreateToolsOptions<T>) {
   const { get, set, reset, next, shouldUpdate: $shouldUpdate = trueFn } = options;
   const $scope = $$scope();
-  const isBatch = $scope.getIsBatchZone();
+  const isBatch = $scope.getIsBatch();
   const tools = (): Tools => {
     const prevValue = get();
     const newValue = detectIsFunction(next) ? next(prevValue) : next;
diff --git a/packages/core/src/walk/walk.ts b/packages/core/src/walk/walk.ts
index c598fac0..117fbd0b 100644
--- a/packages/core/src/walk/walk.ts
+++ b/packages/core/src/walk/walk.ts
@@ -106,14 +106,14 @@ function createHookLoc(rootId: number, idx: number, hook: Hook) {
 
 function detectIsStableMemoTree(fiber: Fiber, $scope: Scope) {
   if (!hasChildrenProp(fiber.inst)) return;
-  const actions = $scope.getActionsById(fiber.id);
+  const store = $scope.getReconciler().get(fiber.id);
   const children = fiber.inst.children;
 
   for (let i = 0; i < children.length; i++) {
     const inst = children[i];
     const key = getElementKey(inst);
     if (key === null) return false;
-    const alt = actions.map[key];
+    const alt = store.map[key];
     if (!alt) return false;
     const pc = alt.inst as Component;
     const nc = inst as Component;
@@ -127,13 +127,13 @@ function detectIsStableMemoTree(fiber: Fiber, $scope: Scope) {
 }
 
 function tryOptStaticSlot(fiber: Fiber, alt: Fiber, $scope: Scope) {
-  const actions = $scope.getActionsById(fiber.id);
+  const store = $scope.getReconciler().get(fiber.id);
   const inst = fiber.inst as Component | TagVirtualNode;
 
   alt.element && (fiber.element = alt.element); //!
 
   for (let i = 0; i < inst.children.length; i++) {
-    buildChildNode(inst.children, fiber, actions.map, i, fiber.eidx);
+    buildChildNode(inst.children, fiber, store.map, i, fiber.eidx);
   }
 
   fiber.cc = inst.children.length;
@@ -141,11 +141,11 @@ function tryOptStaticSlot(fiber: Fiber, alt: Fiber, $scope: Scope) {
 }
 
 function tryOptMemoSlot(fiber: Fiber, alt: Fiber, $scope: Scope) {
-  const actions = $scope.getActionsById(fiber.id);
-  const hasMove = Boolean(actions.move);
-  const hasRemove = Boolean(actions.remove);
-  const hasInsert = Boolean(actions.insert);
-  const hasReplace = Boolean(actions.replace);
+  const store = $scope.getReconciler().get(fiber.id);
+  const hasMove = Boolean(store.move);
+  const hasRemove = Boolean(store.remove);
+  const hasInsert = Boolean(store.insert);
+  const hasReplace = Boolean(store.replace);
   const canOptimize = ((hasMove && !hasRemove) || (hasRemove && !hasMove)) && !hasInsert && !hasReplace;
 
   if (!canOptimize || !detectIsStableMemoTree(fiber, $scope)) return;
@@ -155,10 +155,10 @@ function tryOptMemoSlot(fiber: Fiber, alt: Fiber, $scope: Scope) {
 }
 
 function tryOptMov(fiber: Fiber, alt: Fiber, $scope: Scope) {
-  const actions = $scope.getActionsById(fiber.id);
+  const store = $scope.getReconciler().get(fiber.id);
 
   buildChildNodes(fiber, alt, $scope, (fiber, key) => {
-    if (!actions.move[key]) return;
+    if (!store.move[key]) return;
     fiber.alt = new Fiber().mutate(fiber);
     fiber.tag = UPDATE_EFFECT_TAG;
     fiber.mask |= MOVE_MASK;
@@ -167,7 +167,7 @@ function tryOptMov(fiber: Fiber, alt: Fiber, $scope: Scope) {
 }
 
 function buildChildNodes(fiber: Fiber, alt: Fiber, $scope: Scope, onNode?: (fiber: Fiber, key: ElementKey) => void) {
-  const actions = $scope.getActionsById(fiber.id);
+  const store = $scope.getReconciler().get(fiber.id);
   const inst = fiber.inst as Component | TagVirtualNode;
   const children = inst.children;
 
@@ -175,9 +175,9 @@ function buildChildNodes(fiber: Fiber, alt: Fiber, $scope: Scope, onNode?: (fibe
 
   for (let i = 0; i < children.length; i++) {
     const key = getKey(children[i], i);
-    const $fiber = actions.map[key];
+    const $fiber = store.map[key];
 
-    buildChildNode(children, fiber, actions.map, i, fiber.eidx);
+    buildChildNode(children, fiber, store.map, i, fiber.eidx);
     onNode && onNode($fiber, key);
   }
 
diff --git a/packages/core/src/workloop/workloop.ts b/packages/core/src/workloop/workloop.ts
index 663e9c64..b06d43b6 100644
--- a/packages/core/src/workloop/workloop.ts
+++ b/packages/core/src/workloop/workloop.ts
@@ -9,67 +9,51 @@ import {
   ASYNC_EFFECT_HOST_MASK,
   ATOM_HOST_MASK,
   MOVE_MASK,
-  FLUSH_MASK,
-  Flag,
   TaskPriority,
 } from '../constants';
 import {
   logError,
-  detectIsEmpty,
   detectIsFalsy,
   detectIsArray,
   detectIsFunction,
   detectIsTextBased,
   detectIsPromise,
-  formatErrorMsg,
   createIndexKey,
   trueFn,
 } from '../utils';
 import { type Scope, getRootId, setRootId, $$scope, replaceScope } from '../scope';
 import { type Component, detectIsComponent } from '../component';
-import { type ElementKey, type Instance, type Callback } from '../shared';
+import { type Instance, type Callback } from '../shared';
 import { Fiber, getHook, Hook } from '../fiber';
 import {
   type CanHaveChildren,
   Text,
-  detectIsVirtualNode,
-  detectIsVirtualNodeFactory,
   getElementKey,
-  hasElementFlag,
   createReplacer,
-  detectAreSameInstanceTypes,
   hasChildrenProp,
+  detectIsVirtualNode,
+  detectIsVirtualNodeFactory,
+  detectAreSameInstanceTypes,
 } from '../view';
 import { detectIsMemo } from '../memo';
-import {
-  walk,
-  getFiberWithElement,
-  detectIsFiberAlive,
-  resolveSuspense,
-  notifyParents,
-  tryOptStaticSlot,
-  tryOptMemoSlot,
-  createHookLoc,
-} from '../walk';
+import { walk, getFiberWithElement, detectIsFiberAlive, resolveSuspense, notifyParents, createHookLoc } from '../walk';
 import { type ScheduleCallbackOptions, type OnRestore, type OnRestoreOptions, scheduler } from '../scheduler';
 import { Fragment, detectIsFragment } from '../fragment';
 import { startTransition } from '../start-transition';
 import { unmountFiber } from '../unmount';
 import { addBatch } from '../batch';
 
-export type WorkLoop = (isAsync: boolean) => boolean | Promise<unknown> | null;
-
-function workLoop(isAsync: boolean): boolean | Promise<unknown> | null {
+function workLoop(isAsync: boolean): boolean | Promise<unknown> {
   const $scope = $$scope();
-  const wipFiber = $scope.getWorkInProgress();
-  let unit = $scope.getNextUnitOfWork();
+  const wipFiber = $scope.getWip();
+  let unit = $scope.getNextUnit();
   let shouldYield = false;
 
   try {
     while (unit && !shouldYield) {
       unit = performUnitOfWork(unit, $scope);
       shouldYield = isAsync && scheduler.shouldYield();
-      $scope.setNextUnitOfWork(unit);
+      $scope.setNextUnit(unit);
 
       if (shouldYield && scheduler.detectIsTransition() && scheduler.hasPrimaryTask()) {
         fork($scope);
@@ -103,9 +87,9 @@ function workLoop(isAsync: boolean): boolean | Promise<unknown> | null {
 }
 
 function performUnitOfWork(fiber: Fiber, $scope: Scope): Fiber | null {
-  const wipFiber = $scope.getWorkInProgress();
+  const wipFiber = $scope.getWip();
   const isDeepWalking = $scope.getMountDeep();
-  const isStream = $scope.getIsStreamZone();
+  const isStream = $scope.getIsStream();
   const emitter = $scope.getEmitter();
   const children = (fiber.inst as CanHaveChildren).children;
   const hasChildren = isDeepWalking && children && children.length > 0;
@@ -160,7 +144,7 @@ function mountSibling(left: Fiber, $scope: Scope) {
   $scope.navToSibling();
   const $hook = left.next ? left.next.hook || null : null; // from previous fiber after throwing promise
   const $inst = left.parent.inst;
-  const idx = $scope.getMountIndex();
+  const idx = $scope.getMountIdx();
   const children = ($inst as CanHaveChildren).children;
   const inst = setupInstance(children, idx);
   const hasSibling = Boolean(inst);
@@ -207,7 +191,7 @@ function share(fiber: Fiber, prev: Fiber, inst: Instance, $scope: Scope) {
   const { alt } = fiber;
   const shouldMount = alt && detectIsMemo(inst) ? shouldUpdate(fiber, inst, $scope) : true;
 
-  $scope.setCursorFiber(fiber);
+  $scope.setCursor(fiber);
   fiber.inst = inst;
 
   if (alt && alt.mask & MOVE_MASK) {
@@ -219,7 +203,7 @@ function share(fiber: Fiber, prev: Fiber, inst: Instance, $scope: Scope) {
 
   if (shouldMount) {
     fiber.inst = mount(fiber, prev, $scope);
-    alt && reconcile(fiber, alt, $scope);
+    alt && $scope.getReconciler().reconcile(fiber, alt, $scope);
     setup(fiber, alt);
   } else if (fiber.mask & MOVE_MASK) {
     fiber.tag = UPDATE_EFFECT_TAG;
@@ -243,83 +227,28 @@ function getAlternate(fiber: Fiber, inst: Instance, idx: number, $scope: Scope)
   if (!fiber.hook?.getIsWip() && parent.tag === CREATE_EFFECT_TAG) return null; // !
   const parentId = isChild ? fiber.id : fiber.parent.id;
   const key = getElementKey(inst);
-  const actions = $scope.getActionsById(parentId);
+  const store = $scope.getReconciler().get(parentId);
   let alt: Fiber = null;
 
-  if (key !== null && actions) {
-    const isMove = actions.move && Boolean(actions.move[key]);
-    const isStable = actions.stable && Boolean(actions.stable[key]);
+  if (key !== null && store) {
+    const isMove = store.move && Boolean(store.move[key]);
+    const isStable = store.stable && Boolean(store.stable[key]);
 
     if (isMove || isStable) {
-      alt = actions.map[key];
+      alt = store.map[key];
       isMove && (alt.mask |= MOVE_MASK);
     }
   } else {
     if (fiber.alt) {
       alt = isChild ? fiber.alt.child : fiber.alt.next;
     } else {
-      alt = actions ? actions.map[createIndexKey(idx)] || null : null;
+      alt = store ? store.map[createIndexKey(idx)] || null : null;
     }
   }
 
   return alt;
 }
 
-function reconcile(fiber: Fiber, alt: Fiber, $scope: Scope) {
-  const { id, inst } = fiber;
-  const areSameTypes = detectAreSameInstanceTypes(alt.inst, inst);
-  const nextChildren = (inst as CanHaveChildren).children;
-
-  if (!areSameTypes) {
-    $scope.addDeletion(alt);
-  } else if (hasChildrenProp(alt.inst) && nextChildren && alt.cc !== 0) {
-    const hasSameCount = alt.cc === nextChildren.length;
-    const check = hasElementFlag(inst, Flag.SKIP_SCAN_OPT) ? !hasSameCount : true;
-
-    if (check) {
-      const { prevKeys, nextKeys, prevKeysMap, nextKeysMap, keyedFibersMap } = extractKeys(alt.child, nextChildren);
-      const flush = nextKeys.length === 0;
-      let size = Math.max(prevKeys.length, nextKeys.length);
-      let p = 0;
-      let n = 0;
-
-      $scope.addActionMap(id, keyedFibersMap);
-
-      for (let i = 0; i < size; i++) {
-        const nextKey = nextKeys[i - n] ?? null;
-        const prevKey = prevKeys[i - p] ?? null;
-        const prevKeyFiber = keyedFibersMap[prevKey] || null;
-
-        if (nextKey !== prevKey) {
-          if (nextKey !== null && !prevKeysMap[nextKey]) {
-            if (prevKey !== null && !nextKeysMap[prevKey]) {
-              $scope.addReplaceAction(id, nextKey);
-              $scope.addDeletion(prevKeyFiber);
-            } else {
-              $scope.addInsertAction(id, nextKey);
-              p++;
-              size++;
-            }
-          } else if (!nextKeysMap[prevKey]) {
-            $scope.addRemoveAction(id, prevKey);
-            $scope.addDeletion(prevKeyFiber);
-            flush && (prevKeyFiber.mask |= FLUSH_MASK);
-            n++;
-            size++;
-          } else if (nextKeysMap[prevKey] && nextKeysMap[nextKey]) {
-            $scope.addMoveAction(id, nextKey);
-          }
-        } else if (nextKey !== null) {
-          $scope.addStableAction(id, nextKey);
-        }
-      }
-
-      hasElementFlag(inst, Flag.STATIC_SLOT_OPT) && tryOptStaticSlot(fiber, alt, $scope);
-      hasElementFlag(inst, Flag.MEMO_SLOT_OPT) && tryOptMemoSlot(fiber, alt, $scope);
-    }
-  }
-}
-
 function setup(fiber: Fiber, alt: Fiber) {
   const inst = fiber.inst;
   let isUpdate = false;
@@ -436,7 +365,7 @@ const createResetClosure = (fiber: Fiber, prev: Fiber, $scope: Scope) => () => {
     fiber.hook.owner = null;
     fiber.hook.idx = 0;
     $scope.navToPrev();
-    $scope.setNextUnitOfWork(prev);
+    $scope.setNextUnit(prev);
     Fiber.setNextId(prev.id);
   } else {
     fiber.id = Fiber.incrementId();
@@ -444,61 +373,6 @@ const createResetClosure = (fiber: Fiber, prev: Fiber, $scope: Scope) => () => {
   }
 };
 
-function extractKeys(alt: Fiber, children: Array<Instance>) {
-  let nextFiber = alt;
-  let idx = 0;
-  const prevKeys: Array<ElementKey> = [];
-  const nextKeys: Array<ElementKey> = [];
-  const prevKeysMap: Record<ElementKey, boolean> = {};
-  const nextKeysMap: Record<ElementKey, boolean> = {};
-  const keyedFibersMap: Record<ElementKey, Fiber> = {};
-  const usedKeysMap: Record<ElementKey, boolean> = {};
-
-  while (nextFiber || idx < children.length) {
-    if (nextFiber) {
-      const key = getElementKey(nextFiber.inst);
-      const prevKey = detectIsEmpty(key) ? createIndexKey(idx) : key;
-
-      if (!prevKeysMap[prevKey]) {
-        prevKeysMap[prevKey] = true; // !
-        prevKeys.push(prevKey);
-      }
-
-      keyedFibersMap[prevKey] = nextFiber;
-    }
-
-    if (idx < children.length) {
-      const inst = children[idx];
-      const key = getElementKey(inst);
-      const nextKey = detectIsEmpty(key) ? createIndexKey(idx) : key;
-
-      if (process.env.NODE_ENV !== 'production') {
-        if (usedKeysMap[nextKey]) {
-          logError(formatErrorMsg(`The key of node [${nextKey}] already has been used!`), [inst]);
-        }
-      }
-
-      if (!nextKeysMap[nextKey]) {
-        nextKeysMap[nextKey] = true; // !
-        nextKeys.push(nextKey);
-      }
-
-      usedKeysMap[nextKey] = true;
-    }
-
-    nextFiber = nextFiber ? nextFiber.next : null;
-    idx++;
-  }
-
-  return {
-    prevKeys,
-    nextKeys,
-    prevKeysMap,
-    nextKeysMap,
-    keyedFibersMap,
-  };
-}
-
 function supportConditional(inst: Instance) {
   return detectIsFalsy(inst) ? createReplacer() : inst;
 }
@@ -509,10 +383,10 @@ function commit($scope: Scope) {
   }
 
   const rootId = getRootId();
-  const wip = $scope.getWorkInProgress();
+  const wip = $scope.getWip();
   const deletions = $scope.getDeletions();
   const candidates = $scope.getCandidates();
-  const isUpdateZone = $scope.getIsUpdateZone();
+  const isUpdate = $scope.getIsUpdate();
   const awaiter = $scope.getAwaiter();
   const unmounts: Array<Fiber> = [];
   const isTransition = scheduler.detectIsTransition();
@@ -528,8 +402,8 @@ function commit($scope: Scope) {
     platform.commit(fiber);
   }
 
-  isUpdateZone && sync(wip);
-  $scope.runInsertionEffects();
+  isUpdate && sync(wip);
+  $scope.runEffects3();
 
   for (const fiber of candidates) {
     const item = fiber.inst as CanHaveChildren;
@@ -543,8 +417,8 @@ function commit($scope: Scope) {
   wip.hook?.setIsWip(false);
   inst.children = null;
   platform.finishCommit(); // !
-  $scope.runLayoutEffects();
-  $scope.runAsyncEffects();
+  $scope.runEffects2();
+  $scope.runEffects1();
   awaiter.resolve(onResolve(rootId, isTransition));
   unmounts.length > 0 && platform.raf(onUnmount(unmounts));
   cleanup($scope);
@@ -586,7 +460,7 @@ const onWalkInSync = (diff: number, fiber: Fiber, scope: { isRight: boolean }) =
 
 function fork($scope: Scope) {
   const $fork = $scope.fork();
-  const wip = $scope.getWorkInProgress();
+  const wip = $scope.getWip();
   const onRestore = createOnRestore($fork, wip.child);
   const { alt } = wip;
 
@@ -599,7 +473,7 @@ function fork($scope: Scope) {
   wip.hook.idx = 0;
   wip.hook.owner = wip;
 
-  $scope.runInsertionEffects(); // !
+  $scope.runEffects3(); // !
   $scope.applyCancels();
   cleanup($scope, true);
   scheduler.retain(onRestore);
@@ -619,7 +493,7 @@ const createOnRestore = ($fork: Scope, child: Fiber) => (options: OnRestoreOptio
   child.parent = wip;
 
   $fork.setRoot($scope.getRoot());
-  $fork.setWorkInProgress(wip);
+  $fork.setWip(wip);
   replaceScope($fork);
 };
 
@@ -660,12 +534,12 @@ function createCallback(options: CreateCallbackOptions) {
     hook.idx = 0; // !
     hook.owner = fiber;
 
-    $scope.setIsUpdateZone(true);
+    $scope.setIsUpdate(true);
     $scope.resetMount();
-    $scope.setWorkInProgress(fiber);
-    $scope.setCursorFiber(fiber);
+    $scope.setWip(fiber);
+    $scope.setCursor(fiber);
     fiber.inst = mount(fiber, null, $scope);
-    $scope.setNextUnitOfWork(fiber);
+    $scope.setNextUnit(fiber);
   };
 
   return callback;
@@ -675,11 +549,11 @@ function createUpdate(rootId: number, hook: Hook) {
   const { idx } = hook;
   const update = (tools?: () => Tools) => {
     const $scope = $$scope();
-    if ($scope.getIsInsertionEffectsZone()) return;
+    if ($scope.getIsEffect3()) return;
     const hasTools = detectIsFunction(tools);
-    const isTransition = $scope.getIsTransitionZone();
-    const isBatch = $scope.getIsBatchZone();
-    const isEvent = $scope.getIsEventZone();
+    const isTransition = $scope.getIsTransition();
+    const isBatch = $scope.getIsBatch();
+    const isEvent = $scope.getIsEvent();
     const priority = isTransition ? TaskPriority.LOW : isEvent ? TaskPriority.HIGH : TaskPriority.NORMAL; // !
     const forceAsync = isTransition;
     const onTransitionEnd = isTransition ? $scope.getOnTransitionEnd() : null;
@@ -724,6 +598,6 @@ const $tools = (): Tools => ({
   resetValue: null,
 });
 
-const detectIsBusy = () => Boolean($$scope()?.getWorkInProgress());
+const detectIsBusy = () => Boolean($$scope()?.getWip());
 
-export { Fiber, workLoop, createUpdate, detectIsBusy };
+export { workLoop, createUpdate, detectIsBusy };
diff --git a/packages/platform-browser/src/events/events.ts b/packages/platform-browser/src/events/events.ts
index 6ab25488..c34b913c 100644
--- a/packages/platform-browser/src/events/events.ts
+++ b/packages/platform-browser/src/events/events.ts
@@ -49,9 +49,9 @@ function delegateEvent(target: Element, eventName: string, handler: EventHandler
       if (detectIsFunction(handler)) {
         $event = new SyntheticEvent({ sourceEvent: event, target });
 
-        $scope.setIsEventZone(true);
+        $scope.setIsEvent(true);
         handler($event);
-        $scope.setIsEventZone(false);
+        $scope.setIsEvent(false);
       }
 
       if (target.parentElement) {
@@ -67,7 +67,7 @@ function delegateEvent(target: Element, eventName: string, handler: EventHandler
 
     eventsMap.set(eventName, new WeakMap([[target, $handler]]));
     document.addEventListener(eventName, rootHandler, true);
-    $scope.addEventUnsubscriber(() => document.removeEventListener(eventName, rootHandler, true));
+    $scope.addOff(() => document.removeEventListener(eventName, rootHandler, true));
   } else {
     handlersMap.set(target, $handler);
   }
diff --git a/packages/platform-browser/src/render/render.ts b/packages/platform-browser/src/render/render.ts
index cf1853af..3307f4b1 100644
--- a/packages/platform-browser/src/render/render.ts
+++ b/packages/platform-browser/src/render/render.ts
@@ -64,7 +64,7 @@ function render(element: DarkElement, container: TagNativeElement, hydrate?: Cal
   const $scope = $$scope(rootId);
 
   // insertion effect can't schedule renders
-  if ($scope?.getIsInsertionEffectsZone()) return;
+  if ($scope?.getIsEffect3()) return;
 
   const callback = () => {
     setRootId(rootId); // !
@@ -79,9 +79,9 @@ function render(element: DarkElement, container: TagNativeElement, hydrate?: Cal
     });
 
     $scope.resetMount();
-    $scope.setWorkInProgress(fiber);
-    $scope.setIsHydrateZone(isHydration);
-    $scope.setNextUnitOfWork(fiber);
+    $scope.setWip(fiber);
+    $scope.setIsHydration(isHydration);
+    $scope.setNextUnit(fiber);
     isHydration && hydrate();
   };
 
diff --git a/packages/platform-desktop/src/events/events.ts b/packages/platform-desktop/src/events/events.ts
index 94339a3b..f7f2f460 100644
--- a/packages/platform-desktop/src/events/events.ts
+++ b/packages/platform-desktop/src/events/events.ts
@@ -16,9 +16,9 @@ function createSyntheticEventHandler(eventName: string, handler: Function) {
   const $scope = $$scope();
 
   return (value: NativeRawPointer<'QEvent'>) => {
-    $scope.setIsEventZone(true);
+    $scope.setIsEvent(true);
     handler(new SyntheticEvent({ type: eventName, value }));
-    $scope.setIsEventZone(false);
+    $scope.setIsEvent(false);
   };
 }
 
diff --git a/packages/platform-desktop/src/render/render.ts b/packages/platform-desktop/src/render/render.ts
index 9ecd7b23..f4f9123e 100644
--- a/packages/platform-desktop/src/render/render.ts
+++ b/packages/platform-desktop/src/render/render.ts
@@ -50,8 +50,8 @@ function render(element: DarkElement) {
     });
 
     $scope.resetMount();
-    $scope.setWorkInProgress(fiber);
-    $scope.setNextUnitOfWork(fiber);
+    $scope.setWip(fiber);
+    $scope.setNextUnit(fiber);
   };
 
   scheduler.schedule(callback, { priority: TaskPriority.NORMAL });
diff --git a/packages/platform-native/src/events/events.ts b/packages/platform-native/src/events/events.ts
index a007b763..a82873d7 100644
--- a/packages/platform-native/src/events/events.ts
+++ b/packages/platform-native/src/events/events.ts
@@ -19,9 +19,9 @@ function createSyntheticEventHandler(handler: Function) {
   const $scope = $$scope();
 
   return (sourceEvent: EventData) => {
-    $scope.setIsEventZone(true);
+    $scope.setIsEvent(true);
     handler(new SyntheticEvent({ sourceEvent, target: sourceEvent.object }));
-    $scope.setIsEventZone(false);
+    $scope.setIsEvent(false);
   };
 }
 
diff --git a/packages/platform-native/src/render/render.ts b/packages/platform-native/src/render/render.ts
index 244e7891..f4aaa726 100644
--- a/packages/platform-native/src/render/render.ts
+++ b/packages/platform-native/src/render/render.ts
@@ -65,8 +65,8 @@ function render(options: RenderOptions): NSElement {
     const emitter = $scope.getEmitter();
 
     $scope.resetMount();
-    $scope.setWorkInProgress(fiber);
-    $scope.setNextUnitOfWork(fiber);
+    $scope.setWip(fiber);
+    $scope.setNextUnit(fiber);
 
     emitter.on('finish', () => {
       emitter.kill();
diff --git a/packages/platform-server/src/render/render.ts b/packages/platform-server/src/render/render.ts
index 0eae45c0..d49df99c 100644
--- a/packages/platform-server/src/render/render.ts
+++ b/packages/platform-server/src/render/render.ts
@@ -64,10 +64,10 @@ function scheduleRender(options: ScheduleRenderOptions) {
     });
     const emitter = $scope.getEmitter();
 
-    $scope.setIsStreamZone(true);
+    $scope.setIsStream(true);
     $scope.resetMount();
-    $scope.setWorkInProgress(fiber);
-    $scope.setNextUnitOfWork(fiber);
+    $scope.setWip(fiber);
+    $scope.setNextUnit(fiber);
 
     onStart();
     emitter.on('finish', () => {
diff --git a/packages/styled/src/global/global.spec.tsx b/packages/styled/src/global/global.spec.tsx
index 7658447e..a3fcacca 100644
--- a/packages/styled/src/global/global.spec.tsx
+++ b/packages/styled/src/global/global.spec.tsx
@@ -5,16 +5,13 @@ import { setupGlobal, createGlobalStyle } from '../global';
 import { css } from '../styled';
 
 let { host, render } = createBrowserEnv();
+const { head } = document;
 
 beforeEach(() => {
   ({ host, render } = createBrowserEnv());
   setupGlobal();
 });
 
-afterEach(() => {
-  document.head.innerHTML = '';
-});
-
 describe('@styled/global', () => {
   test('can create global styles correctly', () => {
     const GlobalStyle = createGlobalStyle`
@@ -39,7 +36,7 @@ describe('@styled/global', () => {
     render(<App />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style('*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;}'),
     );
   });
@@ -67,7 +64,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle $backgroundColor='white' />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:white;}',
       ),
@@ -76,7 +73,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle $backgroundColor='black' />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:black;}',
       ),
@@ -85,7 +82,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle $backgroundColor='white' />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:white;}',
       ),
@@ -117,7 +114,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle $backgroundColor='white' />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:white;}',
       ),
@@ -126,7 +123,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle $backgroundColor='black' />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:black;}',
       ),
@@ -135,7 +132,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle $backgroundColor='white' />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:white;}',
       ),
@@ -162,7 +159,7 @@ describe('@styled/global', () => {
     render(<GlobalStyle />);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(
+    expect(head.innerHTML).toBe(
       style(
         '*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:white;}',
       ),
@@ -171,6 +168,42 @@ describe('@styled/global', () => {
     render(null);
 
     expect(host.innerHTML).toBe(replacer);
-    expect(document.head.innerHTML).toBe(style(''));
+    expect(head.innerHTML).toBe(style(''));
+  });
+
+  test('can nest a media query into the nested rule', () => {
+    // https://github.com/atellmer/dark/issues/72
+    const GlobalStyle = createGlobalStyle`
+      *,
+      *::after,
+      *::before {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: Arial;
+        background-color: white;
+      }
+
+      a {
+        color: blue;
+
+        @media (max-width: 800px) {
+          color: red;
+        }
+      }
+    `;
+
+    render(<GlobalStyle />);
+
+    expect(head.innerHTML).toMatchInlineSnapshot(
+      `"<style dark-styled="g">*,*::after,*::before{box-sizing:border-box;}html,body{margin:0;padding:0;}body{font-family:Arial;background-color:white;}a{color:blue;}@media (max-width: 800px){a{color:red;}</style>"`,
+    );
   });
 });
diff --git a/packages/styled/src/parse/parse.spec.ts b/packages/styled/src/parse/parse.spec.ts
index 7f8739bc..7901e9be 100644
--- a/packages/styled/src/parse/parse.spec.ts
+++ b/packages/styled/src/parse/parse.spec.ts
@@ -11,190 +11,284 @@ import { FUNCTION_MARK } from '../constants';
 import { parse } from './parse';
 
 describe('@styled/parse', () => {
-  test('throws errors with illegal nesting #1', () => {
-    const make = () => {
-      parse(`
-        color: green;
-
-        & span {
-          color: purple;
-
+  describe('throws errors with illegal nesting', () => {
+    test('case #1', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
           & span {
-            color: red;
+            color: purple;
+  
+            & span {
+              color: red;
+            }
           }
-        }
-    `);
-    };
+      `);
+      };
 
-    expect(make).toThrowError();
-  });
-
-  test('throws errors with illegal nesting #2', () => {
-    const make = () => {
-      parse(`
-        color: green;
-
-        & span {
-          color: purple;
+      expect(make).toThrowError();
+    });
 
+    test('case #2', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
           @media(max-width: 600px) {
-            color: red;
+            color: purple;
+  
+            @media(max-width: 400px) {
+              color: red;
+            }
           }
-        }
-    `);
-    };
-
-    expect(make).toThrowError();
-  });
+      `);
+      };
 
-  test('throws errors with illegal nesting #3', () => {
-    const make = () => {
-      parse(`
-        color: green;
-
-        & span {
-          color: purple;
+      expect(make).toThrowError();
+    });
 
+    test('case #3', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
           @container(max-width: 600px) {
-            color: red;
+            color: purple;
+  
+            @container(max-width: 400px) {
+              color: red;
+            }
           }
-        }
-    `);
-    };
-
-    expect(make).toThrowError();
-  });
-
-  test('throws errors with illegal nesting #4', () => {
-    const make = () => {
-      parse(`
-        color: green;
+      `);
+      };
 
-        @media(max-width: 600px) {
-          color: purple;
+      expect(make).toThrowError();
+    });
 
-          @media(max-width: 400px) {
-            color: red;
+    test('case #4', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          @media(max-width: 600px) {
+            color: purple;
+  
+            @container(max-width: 400px) {
+              color: red;
+            }
           }
-        }
-    `);
-    };
+      `);
+      };
 
-    expect(make).toThrowError();
-  });
+      expect(make).toThrowError();
+    });
 
-  test('throws errors with illegal nesting #5', () => {
-    const make = () => {
-      parse(`
-        color: green;
+    test('case #5', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          @container(max-width: 600px) {
+            color: purple;
+  
+            @media(max-width: 400px) {
+              color: red;
+            }
+          }
+      `);
+      };
 
-        @container(max-width: 600px) {
-          color: purple;
+      expect(make).toThrowError();
+    });
 
-          @container(max-width: 400px) {
-            color: red;
+    test('case #6', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          @media(max-width: 600px) {
+            color: purple;
+  
+            @keyframes slidein {
+              from {
+                color: red;
+              }
+  
+              to {
+                color: yellow;
+              }
+            }
           }
-        }
-    `);
-    };
+      `);
+      };
 
-    expect(make).toThrowError();
-  });
+      expect(make).toThrowError();
+    });
 
-  test('throws errors with illegal nesting #6', () => {
-    const make = () => {
-      parse(`
-        color: green;
+    test('case #7', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          @container(max-width: 600px) {
+            color: purple;
+  
+            @keyframes slidein {
+              from {
+                color: red;
+              }
+  
+              to {
+                color: yellow;
+              }
+            }
+          }
+      `);
+      };
 
-        @media(max-width: 600px) {
-          color: purple;
+      expect(make).toThrowError();
+    });
 
+    test('case #8', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
           @keyframes slidein {
             from {
               color: red;
             }
-
+  
             to {
               color: yellow;
             }
+  
+            @keyframes slidein {
+              from {
+                color: red;
+              }
+    
+              to {
+                color: yellow;
+              }
+            }
           }
-        }
-    `);
-    };
+      `);
+      };
 
-    expect(make).toThrowError();
+      expect(make).toThrowError();
+    });
   });
 
-  test('does not throw errors with legal nesting #1', () => {
-    const make = () => {
-      parse(`
-        color: green;
-
-        & span {
-          color: purple;
-        }
-
-        @media(max-width: 600px) {
-          color: purple;
-        }
-    `);
-    };
+  describe('does not throw errors with legal nesting', () => {
+    test('case #1', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          & span {
+            color: purple;
+          }
+  
+          @media(max-width: 600px) {
+            color: purple;
+          }
+      `);
+      };
 
-    expect(make).not.toThrowError();
-  });
+      expect(make).not.toThrowError();
+    });
 
-  test('does not throw errors with legal nesting #2', () => {
-    const make = () => {
-      parse(`
-        color: green;
+    test('case #2', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          & span {
+            color: purple;
+          }
+  
+          @container(max-width: 600px) {
+            color: purple;
+          }
+      `);
+      };
 
-        & span {
-          color: purple;
-        }
+      expect(make).not.toThrowError();
+    });
 
-        @container(max-width: 600px) {
-          color: purple;
-        }
-    `);
-    };
+    test('case #3', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          @media(max-width: 600px) {
+            color: purple;
+  
+            & span {
+              color: red;
+            }
+          }
+      `);
+      };
 
-    expect(make).not.toThrowError();
-  });
+      expect(make).not.toThrowError();
+    });
 
-  test('does not throw errors with legal nesting #3', () => {
-    const make = () => {
-      parse(`
-        color: green;
+    test('case #4', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
+          @container(max-width: 600px) {
+            color: purple;
+  
+            & span {
+              color: red;
+            }
+          }
+      `);
+      };
 
-        @media(max-width: 600px) {
-          color: purple;
+      expect(make).not.toThrowError();
+    });
 
+    test('case #5', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
           & span {
-            color: red;
+            color: purple;
+  
+            @media(max-width: 600px) {
+              color: red;
+            }
           }
-        }
-    `);
-    };
+      `);
+      };
 
-    expect(make).not.toThrowError();
-  });
-
-  test('does not throw errors with legal nesting #4', () => {
-    const make = () => {
-      parse(`
-        color: green;
-
-        @container(max-width: 600px) {
-          color: purple;
+      expect(make).not.toThrowError();
+    });
 
+    test('case #6', () => {
+      const make = () => {
+        parse(`
+          color: green;
+  
           & span {
-            color: red;
+            color: purple;
+  
+            @container(max-width: 600px) {
+              color: red;
+            }
           }
-        }
-    `);
-    };
+      `);
+      };
 
-    expect(make).not.toThrowError();
+      expect(make).not.toThrowError();
+    });
   });
 
   test('parses a simple valid css correctly', () => {
@@ -836,4 +930,37 @@ describe('@styled/parse', () => {
     expect(overflow.name).toBe('overflow-wrap');
     expect(overflow.value).toBe('break-word');
   });
+
+  test('can nest a media query into the nested rule', () => {
+    // https://github.com/atellmer/dark/issues/72
+    const style = parse(`
+      background-color: pink;
+      color: black;
+
+      & a {
+        color: blue;
+    
+        @media (max-width: 800px) {
+          color: red;
+        }
+      }
+    `);
+    const backgroundColor = style.children[0] as StyleRule;
+    const color = style.children[1] as StyleRule;
+    const nsr = style.children[2] as NestingRule;
+    const linkColor = nsr.children[0] as StyleRule;
+    const mqr = nsr.children[1] as MediaQueryRule;
+
+    expect(backgroundColor.name).toBe('background-color');
+    expect(backgroundColor.value).toBe('pink');
+    expect(color.name).toBe('color');
+    expect(color.value).toBe('black');
+    expect(nsr.value).toBe('& a');
+    expect(nsr.children.length).toBe(2);
+    expect(linkColor.name).toBe('color');
+    expect(linkColor.value).toBe('blue');
+    expect(mqr.value).toBe('@media (max-width: 800px)');
+    expect(mqr.children[0].name).toBe('color');
+    expect(mqr.children[0].value).toBe('red');
+  });
 });
diff --git a/packages/styled/src/parse/parse.ts b/packages/styled/src/parse/parse.ts
index bf86d03f..b811fd43 100644
--- a/packages/styled/src/parse/parse.ts
+++ b/packages/styled/src/parse/parse.ts
@@ -14,7 +14,6 @@ import {
   OPENING_PARENTHESIS_MARK,
   CLOSING_PARENTHESIS_MARK,
   URL_FN_MARK,
-  LIB,
 } from '../constants';
 import {
   type Children,
@@ -27,8 +26,7 @@ import {
   FunctionRule,
   detectIsStyleSheet,
   detectIsStyleRule,
-  detectIsMediaQueryRule,
-  detectIsContainerQueryRule,
+  detectIsQueryRule,
   detectIsKeyframesRule,
   detectIsNestingRule,
   detectIsFunctionRule,
@@ -107,15 +105,13 @@ function parse<P extends object>(css: string) {
             : detectHasKeyframesMark(buffer)
             ? new KeyframesRule()
             : new NestingRule();
-          const canNest =
-            detectIsMediaQueryRule(token) || detectIsContainerQueryRule(token) || detectIsKeyframesRule(token)
-              ? detectIsStyleSheet(parent)
-              : detectIsNestingRule(token)
-              ? detectIsStyleSheet(parent) ||
-                detectIsMediaQueryRule(parent) ||
-                detectIsContainerQueryRule(parent) ||
-                detectIsKeyframesRule(parent)
-              : false;
+          const canNest = detectIsQueryRule(token)
+            ? detectIsStyleSheet(parent) || detectIsNestingRule(parent)
+            : detectIsKeyframesRule(token)
+            ? detectIsStyleSheet(parent)
+            : detectIsNestingRule(token)
+            ? detectIsStyleSheet(parent) || detectIsQueryRule(parent) || detectIsKeyframesRule(parent)
+            : false;
 
           if (!canNest) {
             illegal('Illegal style nesting!');
diff --git a/packages/styled/src/styled/styled.spec.tsx b/packages/styled/src/styled/styled.spec.tsx
index 2c9ed1a7..c654da0f 100644
--- a/packages/styled/src/styled/styled.spec.tsx
+++ b/packages/styled/src/styled/styled.spec.tsx
@@ -341,7 +341,7 @@ describe('@styled/styled', () => {
 
     expect(host.innerHTML).toBe('<div class="dk-cagiea dk-igjghg dk-egbggh"></div>');
     expect(head.innerHTML).toBe(
-      style('.dk-cagiea{}.dk-igjghg{width:100px;height:100px;}.dk-egbggh{background-color:red;border:1px solid red;}'),
+      style('.dk-igjghg{width:100px;height:100px;}.dk-egbggh{background-color:red;border:1px solid red;}'),
     );
 
     render(<Box $color='orange' />);
@@ -349,7 +349,7 @@ describe('@styled/styled', () => {
     expect(host.innerHTML).toBe('<div class="dk-cagiea dk-igjghg dk-biaaih"></div>');
     expect(head.innerHTML).toBe(
       style(
-        '.dk-cagiea{}.dk-igjghg{width:100px;height:100px;}.dk-egbggh{background-color:red;border:1px solid red;}.dk-biaaih{background-color:orange;border:1px solid orange;}',
+        '.dk-igjghg{width:100px;height:100px;}.dk-egbggh{background-color:red;border:1px solid red;}.dk-biaaih{background-color:orange;border:1px solid orange;}',
       ),
     );
   });
@@ -805,7 +805,7 @@ describe('@styled/styled', () => {
       `"<div class="dk-cagiea dk-igjghg dk-bahfjd"></div><div class="dk-cagiea dk-igjghg dk-jbjabb"></div>"`,
     );
     expect(head.querySelector('style').innerHTML).toMatchInlineSnapshot(
-      `".dk-cagiea{}.dk-igjghg{width:100px;height:100px;}.dk-bahfjd{background-color:green;transition:background-color 0.2s ease-in-out;}.dk-bahfjd:hover{background-color:red;}.dk-jbjabb{background-color:yellow;transition:background-color 0.2s ease-in-out;}.dk-jbjabb:hover{background-color:red;}"`,
+      `".dk-igjghg{width:100px;height:100px;}.dk-bahfjd{background-color:green;transition:background-color 0.2s ease-in-out;}.dk-bahfjd:hover{background-color:red;}.dk-jbjabb{background-color:yellow;transition:background-color 0.2s ease-in-out;}.dk-jbjabb:hover{background-color:red;}"`,
     );
   });
 
@@ -852,4 +852,113 @@ describe('@styled/styled', () => {
     );
     expect(body.innerHTML).toMatchInlineSnapshot(`"<div class="dk-baebeb"></div>"`);
   });
+
+  describe('can nest a media query into the nested rule', () => {
+    // https://github.com/atellmer/dark/issues/72
+
+    test('case #1', () => {
+      const Box = styled.div<{ $color: string } & DarkJSX.Elements['div']>`
+        background-color: pink;
+        color: black;
+
+        & a {
+          font-weight: bold;
+          color: ${p => `${p.$color}`};
+
+          @media (max-width: 800px) {
+            color: red;
+          }
+        }
+      `;
+
+      render(
+        <>
+          <Box $color='blue'>
+            <a>blue</a>
+          </Box>
+          <Box $color='green'>
+            <a>green</a>
+          </Box>
+        </>,
+      );
+
+      expect(host.innerHTML).toMatchInlineSnapshot(
+        `"<div class="dk-bjjdjh dk-ggedee"><a>blue</a></div><div class="dk-bjjdjh dk-bjajid"><a>green</a></div>"`,
+      );
+      expect(head.innerHTML).toMatchInlineSnapshot(
+        `"<style dark-styled="c">.dk-bjjdjh{background-color:pink;color:black;}.dk-ggedee a{font-weight:bold;color:blue;}@media (max-width: 800px){.dk-ggedee a{color:red;}}.dk-bjajid a{font-weight:bold;color:green;}@media (max-width: 800px){.dk-bjajid a{color:red;}}</style>"`,
+      );
+    });
+
+    test('case #2', () => {
+      const Box = styled.div<{ $color: string } & DarkJSX.Elements['div']>`
+        background-color: pink;
+        color: black;
+
+        & a {
+          font-weight: bold;
+          color: ${p => `${p.$color}`};
+
+          @media (max-width: 800px) {
+            color: white;
+            background-color: ${p => `${p.$color}`};
+          }
+        }
+      `;
+
+      render(
+        <>
+          <Box $color='blue'>
+            <a>blue</a>
+          </Box>
+          <Box $color='green'>
+            <a>green</a>
+          </Box>
+        </>,
+      );
+
+      expect(host.innerHTML).toMatchInlineSnapshot(
+        `"<div class="dk-bjjdjh dk-idebbd"><a>blue</a></div><div class="dk-bjjdjh dk-cabhgg"><a>green</a></div>"`,
+      );
+      expect(head.innerHTML).toMatchInlineSnapshot(
+        `"<style dark-styled="c">.dk-bjjdjh{background-color:pink;color:black;}.dk-idebbd a{font-weight:bold;color:blue;}@media (max-width: 800px){.dk-idebbd a{color:white;background-color:blue;}}.dk-cabhgg a{font-weight:bold;color:green;}@media (max-width: 800px){.dk-cabhgg a{color:white;background-color:green;}}</style>"`,
+      );
+    });
+
+    test('case #3', () => {
+      const Box = styled.div<{ $color: string } & DarkJSX.Elements['div']>`
+        background-color: pink;
+        color: black;
+
+        ${p => css`
+          & a {
+            font-weight: bold;
+            color: ${p.$color};
+
+            @media (max-width: 800px) {
+              color: white;
+              background-color: ${p.$color};
+            }
+          }
+        `}
+      `;
+      render(
+        <>
+          <Box $color='blue'>
+            <a>blue</a>
+          </Box>
+          <Box $color='green'>
+            <a>green</a>
+          </Box>
+        </>,
+      );
+
+      expect(host.innerHTML).toMatchInlineSnapshot(
+        `"<div class="dk-bjjdjh dk-idebbd"><a>blue</a></div><div class="dk-bjjdjh dk-cabhgg"><a>green</a></div>"`,
+      );
+      expect(head.innerHTML).toMatchInlineSnapshot(
+        `"<style dark-styled="c">.dk-bjjdjh{background-color:pink;color:black;}.dk-idebbd a{font-weight:bold;color:blue;}@media (max-width: 800px){.dk-idebbd a{color:white;background-color:blue;}}.dk-cabhgg a{font-weight:bold;color:green;}@media (max-width: 800px){.dk-cabhgg a{color:white;background-color:green;}}</style>"`,
+      );
+    });
+  });
 });
diff --git a/packages/styled/src/styled/styled.ts b/packages/styled/src/styled/styled.ts
index d3cec9ff..855bc426 100644
--- a/packages/styled/src/styled/styled.ts
+++ b/packages/styled/src/styled/styled.ts
@@ -26,6 +26,8 @@ import {
   INTERLEAVE_COMPONENTS_ATTR_VALUE,
   BLANK_SPACE,
   NULL_MARK,
+  OPENING_CURLY_BRACE_MARK,
+  CLOSING_CURLY_BRACE_MARK,
 } from '../constants';
 import {
   detectIsBrowser,
@@ -210,8 +212,10 @@ function generate<P extends object>(options: GenerateOptions<P>): [string, strin
   if (item) {
     css = item[1];
   } else {
-    css = key.replaceAll(FUNCTION_MARK, className);
-    css = css.replaceAll(`${DOT_MARK}${NULL_MARK}`, `${DOT_MARK}${className}`);
+    css = key
+      .replaceAll(FUNCTION_MARK, className)
+      .replaceAll(EMPTY_STYLES_PATTERN, '')
+      .replaceAll(NULL_CLASS_NAME_PATTERN, `${DOT_MARK}${className}`);
   }
 
   style += css;
@@ -339,6 +343,13 @@ const detectIsStyled = (x: unknown): x is StyledComponentFactory => detectIsFunc
 const filterArgs = <P>(args: Args<unknown>) =>
   args.filter(x => detectIsFunction(x) && !detectIsStyled(x)) as DynamicArgs<P>;
 
+const EMPTY_STYLES_PATTERN = new RegExp(
+  `\\${DOT_MARK}[^\\${OPENING_CURLY_BRACE_MARK}]*\\${OPENING_CURLY_BRACE_MARK}\\${CLOSING_CURLY_BRACE_MARK}`,
+  'g',
+);
+
+const NULL_CLASS_NAME_PATTERN = `${DOT_MARK}${NULL_MARK}`;
+
 type Factory<P extends object> = ComponentFactory<P> | ((props: P) => TagVirtualNodeFactory);
 
 type ClassNameFn = (className: string) => string;
diff --git a/packages/styled/src/tokens/tokens.ts b/packages/styled/src/tokens/tokens.ts
index 62bbac67..2e63a44b 100644
--- a/packages/styled/src/tokens/tokens.ts
+++ b/packages/styled/src/tokens/tokens.ts
@@ -56,33 +56,38 @@ class NestingRule<P extends object = {}> extends Token {
     const className = args[0] as string | null;
     const props = args[1] as P;
     const fns = args[2] as Array<Function>;
-    let styles = `${this.value.replaceAll(SELF_MARK, `${DOT_MARK}${className}`)}${OPENING_CURLY_BRACE_MARK}`;
+    let styles = `${this.value}${OPENING_CURLY_BRACE_MARK}`;
+    let media = '';
     let keyframes = '';
 
     for (const token of this.children) {
-      const [$styles, _, __, ___, $keyframes] = generate({ token, className, props, fns });
+      const [$styles, _, $media, ___, $keyframes] = generate({ token, className, props, fns });
 
       styles += $styles;
+      media += $media;
       keyframes += $keyframes;
     }
 
-    styles += `${CLOSING_CURLY_BRACE_MARK}${keyframes}`;
+    styles += `${CLOSING_CURLY_BRACE_MARK}${media}${keyframes}`;
+    styles = styles.replaceAll(SELF_MARK, `${DOT_MARK}${className}`);
 
     return styles;
   }
 }
 
-class MediaQueryRule<P extends object = {}> extends Token {
-  name = MEDIA_QUERY_MARK;
+class QueryRule<P extends object = {}> extends Token {
   children: Children = [];
 
   override generate(...args: Array<unknown>): string {
     const className = args[0] as string | null;
     const props = args[1] as P;
     const fns = args[2] as Array<Function>;
-    let styles = className
-      ? `${this.value}${OPENING_CURLY_BRACE_MARK}${DOT_MARK}${className}${OPENING_CURLY_BRACE_MARK}`
-      : `${this.value}${OPENING_CURLY_BRACE_MARK}`;
+    const prefix = `${this.value}${OPENING_CURLY_BRACE_MARK}`;
+    let styles = detectIsNestingRule(this.parent)
+      ? `${prefix}${this.parent.value}${OPENING_CURLY_BRACE_MARK}`
+      : className
+      ? `${prefix}${DOT_MARK}${className}${OPENING_CURLY_BRACE_MARK}`
+      : prefix;
     let nesting = '';
 
     for (const token of this.children) {
@@ -102,36 +107,13 @@ class MediaQueryRule<P extends object = {}> extends Token {
   }
 }
 
-class ContainerQueryRule<P extends object = {}> extends Token {
-  name = CONTAINER_QUERY_MARK;
-  children: Children = [];
-
-  override generate(...args: Array<unknown>): string {
-    const className = args[0] as string | null;
-    const props = args[1] as P;
-    const fns = args[2] as Array<Function>;
-    let styles = className
-      ? `${this.value}${OPENING_CURLY_BRACE_MARK}${DOT_MARK}${className}${OPENING_CURLY_BRACE_MARK}`
-      : `${this.value}${OPENING_CURLY_BRACE_MARK}`;
-    let nesting = '';
-
-    for (const token of this.children) {
-      const [$styles, $nesting] = generate({ token, className, props, fns });
-
-      styles += $styles;
-      nesting += $nesting;
-    }
-
-    if (className) {
-      styles += `${CLOSING_CURLY_BRACE_MARK}${nesting}${CLOSING_CURLY_BRACE_MARK}`;
-    } else {
-      styles += `${nesting}${CLOSING_CURLY_BRACE_MARK}`;
-    }
-
-    return styles;
-  }
+class MediaQueryRule<P extends object = {}> extends QueryRule<P> {
+  name = MEDIA_QUERY_MARK;
 }
 
+class ContainerQueryRule<P extends object = {}> extends QueryRule<P> {
+  name = CONTAINER_QUERY_MARK;
+}
 class KeyframesRule<P extends object = {}> extends Token {
   name = KEYFRAMES_MARK;
   children: Children = [];
@@ -305,6 +287,8 @@ const detectIsToken = (x: unknown): x is Token => x instanceof Token;
 
 const detectIsStyleRule = (x: unknown): x is StyleRule => x instanceof StyleRule;
 
+const detectIsQueryRule = (x: unknown): x is QueryRule => x instanceof QueryRule;
+
 const detectIsMediaQueryRule = (x: unknown): x is MediaQueryRule => x instanceof MediaQueryRule;
 
 const detectIsContainerQueryRule = (x: unknown): x is ContainerQueryRule => x instanceof ContainerQueryRule;
@@ -329,6 +313,7 @@ export {
   FunctionRule,
   detectIsStyleSheet,
   detectIsStyleRule,
+  detectIsQueryRule,
   detectIsMediaQueryRule,
   detectIsContainerQueryRule,
   detectIsKeyframesRule,