@rectify-dev/core 2.0.3 → 2.3.0

package/dist/index.js

@@ -189,6 +189,48 @@ var listenToNativeEvent = /* @__PURE__ */ __name((domEventName, target) => {
 // ../rectify-dom-binding/src/clients/RectifyDomProperties.ts
 var isEvent = /* @__PURE__ */ __name((k) => k.startsWith("on"), "isEvent");
 var isProperty = /* @__PURE__ */ __name((k) => k !== "children" && k !== "ref" && !isEvent(k), "isProperty");
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_CAMEL_ATTRS = /* @__PURE__ */ new Set([
+  "viewBox",
+  "preserveAspectRatio",
+  "gradientTransform",
+  "gradientUnits",
+  "patternTransform",
+  "patternUnits",
+  "patternContentUnits",
+  "clipPathUnits",
+  "markerUnits",
+  "markerWidth",
+  "markerHeight",
+  "refX",
+  "refY",
+  "textLength",
+  "startOffset",
+  "baseFrequency",
+  "numOctaves",
+  "stdDeviation",
+  "filterUnits",
+  "primitiveUnits",
+  "tableValues",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "targetX",
+  "targetY",
+  "xChannelSelector",
+  "yChannelSelector",
+  "diffuseConstant",
+  "surfaceScale",
+  "specularConstant",
+  "specularExponent",
+  "limitingConeAngle",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "repeatX",
+  "repeatY"
+]);
+var camelToKebab = /* @__PURE__ */ __name((s) => s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()), "camelToKebab");
+var svgAttrName = /* @__PURE__ */ __name((k) => SVG_CAMEL_ATTRS.has(k) ? k : camelToKebab(k), "svgAttrName");
 var unitlessProperties = /* @__PURE__ */ new Set([
   "zIndex",
   "opacity",
@@ -211,14 +253,16 @@ function convertStyleObjectToString(styleObj) {
 __name(convertStyleObjectToString, "convertStyleObjectToString");
 var applyPropsToDom = /* @__PURE__ */ __name((node, prevProps = {}, nextProps = {}) => {
   const element = node;
+  const isSvg = element.namespaceURI === SVG_NS;
   const eventNode = getEventHandlerListeners(element) || /* @__PURE__ */ new Map();
   for (const k in prevProps) {
     if (isEvent(k) && !(k in nextProps)) {
       eventNode.delete(k);
     }
     if (isProperty(k) && !(k in nextProps)) {
+      const attrName = isSvg ? svgAttrName(k) : k;
       element[k] = "";
-      element.removeAttribute(k);
+      element.removeAttribute(attrName);
     }
   }
   for (const k in nextProps) {
@@ -228,13 +272,22 @@ var applyPropsToDom = /* @__PURE__ */ __name((node, prevProps = {}, nextProps =
         eventNode.set(k, nextProps[k]);
       }
     } else if (k === "style") {
-      element.setAttribute("style", convertStyleObjectToString(nextProps[k]));
+      if (typeof nextProps[k] === "string") {
+        element.setAttribute("style", nextProps[k]);
+      } else {
+        element.setAttribute("style", convertStyleObjectToString(nextProps[k]));
+      }
     } else {
       const v = nextProps[k];
-      if (k === "className") element.setAttribute("class", v ?? "");
-      else if (v === false || v === null || v === void 0)
-        element.removeAttribute(k);
-      else element.setAttribute(k, String(v));
+      if (k === "className") {
+        element.setAttribute("class", v ?? "");
+      } else if (v === false || v === null || v === void 0) {
+        const attrName = isSvg ? svgAttrName(k) : k;
+        element.removeAttribute(attrName);
+      } else {
+        const attrName = isSvg ? svgAttrName(k) : k;
+        element.setAttribute(attrName, String(v));
+      }
     }
   }
   setEventHandlerListeners(element, eventNode);
@@ -246,6 +299,7 @@ var PlacementFlag = 1 << 0;
 var UpdateFlag = 1 << 1;
 var DeletionFlag = 1 << 2;
 var MoveFlag = 1 << 3;
+var RefFlag = 1 << 4;
 
 // ../rectify-reconciler/src/RectifyFiberLanes.ts
 var NoLanes = 0;
@@ -257,12 +311,15 @@ var IdleLane = 16;
 
 // ../rectify-reconciler/src/RectifyFiberWorkTags.ts
 var FunctionComponent = /* @__PURE__ */ Symbol.for("rectify.function_component");
+var ClassComponent = /* @__PURE__ */ Symbol.for("rectify.class_component");
 var HostComponent = /* @__PURE__ */ Symbol.for("rectify.host_component");
 var HostText = /* @__PURE__ */ Symbol.for("rectify.host_text");
 var HostRoot = /* @__PURE__ */ Symbol.for("rectify.host_root");
 var FragmentComponent = /* @__PURE__ */ Symbol.for("rectify.fragment_component");
 var ContextProvider = /* @__PURE__ */ Symbol.for("rectify.context_provider");
 var MemoComponent = /* @__PURE__ */ Symbol.for("rectify.memo_component");
+var LazyComponent = /* @__PURE__ */ Symbol.for("rectify.lazy_component");
+var SuspenseComponent = /* @__PURE__ */ Symbol.for("rectify.suspense_component");
 var addFlagToFiber = /* @__PURE__ */ __name((fiber, flag) => {
   if (hasFlagOnFiber(fiber, flag)) return;
   fiber.flags |= flag;
@@ -284,6 +341,15 @@ var getFiberTagFromElement = /* @__PURE__ */ __name((element) => {
       if (isFunction(element.type) && element.type?._isMemo === true) {
         return MemoComponent;
       }
+      if (element.type?._isSuspense === true) {
+        return SuspenseComponent;
+      }
+      if (element.type?._isLazy === true) {
+        return LazyComponent;
+      }
+      if (element.type?._isClassComponent === true) {
+        return ClassComponent;
+      }
       return isFunction(element.type) ? FunctionComponent : HostComponent;
     case RECTIFY_TEXT_TYPE:
       return HostText;
@@ -293,12 +359,53 @@ var getFiberTagFromElement = /* @__PURE__ */ __name((element) => {
       return null;
   }
 }, "getFiberTagFromElement");
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "clipPath",
+  "mask",
+  "pattern",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "marker",
+  "image",
+  "text",
+  "tspan",
+  "textPath",
+  "foreignObject",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "feBlend",
+  "feColorMatrix",
+  "feComposite",
+  "feGaussianBlur",
+  "feOffset",
+  "feMerge",
+  "feMergeNode",
+  "feTurbulence",
+  "feFlood"
+]);
+var SVG_NS2 = "http://www.w3.org/2000/svg";
 var createDomElementFromFiber = /* @__PURE__ */ __name((fiber) => {
   switch (fiber.workTag) {
     case HostText:
       return document.createTextNode(fiber.pendingProps);
-    default:
-      return document.createElement(fiber.type);
+    default: {
+      const tag = fiber.type;
+      return SVG_TAGS.has(tag) ? document.createElementNS(SVG_NS2, tag) : document.createElement(tag);
+    }
   }
 }, "createDomElementFromFiber");
 var getParentDom = /* @__PURE__ */ __name((fiber) => {
@@ -328,8 +435,10 @@ __name(findFirstHostNode, "findFirstHostNode");
 function getHostSibling(fiber) {
   let sibling = fiber.sibling;
   while (sibling) {
-    const node = findFirstHostNode(sibling);
-    if (node) return node;
+    if (!(sibling.flags & PlacementFlag)) {
+      const node = findFirstHostNode(sibling);
+      if (node) return node;
+    }
     sibling = sibling.sibling;
   }
   return null;
@@ -360,13 +469,15 @@ var createFiber = /* @__PURE__ */ __name((workTag, pendingProps, key = null) =>
     sibling: null,
     return: null,
     stateNode: null,
+    classInstance: null,
     deletions: null,
     alternate: null,
     lanes: NoLanes,
     childLanes: NoLanes,
     subtreeFlags: NoFlags,
     flags: NoFlags,
-    memoizedState: null
+    memoizedState: null,
+    refCleanup: null
   };
 }, "createFiber");
 var createHostRootFiber = /* @__PURE__ */ __name((containerDom) => {
@@ -393,6 +504,8 @@ var createWorkInProgress = /* @__PURE__ */ __name((current, pendingProps) => {
   }
   wip.memoizedProps = current.memoizedProps;
   wip.memoizedState = current.memoizedState;
+  wip.classInstance = current.classInstance;
+  wip.refCleanup = current.refCleanup;
   wip.return = current.return;
   wip.child = current.child;
   wip.sibling = current.sibling;
@@ -418,6 +531,88 @@ var getScheduledFiberRoot = /* @__PURE__ */ __name(() => {
   return instance.fiberRoot;
 }, "getScheduledFiberRoot");
 
+// ../rectify-reconciler/src/RectifyFiberScheduler.ts
+var FRAME_BUDGET_MS = 5;
+var frameStart = 0;
+var shouldYield = /* @__PURE__ */ __name(() => performance.now() - frameStart > FRAME_BUDGET_MS, "shouldYield");
+var doWork = null;
+var setWorkCallback = /* @__PURE__ */ __name((cb) => {
+  doWork = cb;
+}, "setWorkCallback");
+var resumeCursor = null;
+var setResumeCursor = /* @__PURE__ */ __name((fiber) => {
+  resumeCursor = fiber;
+}, "setResumeCursor");
+var getResumeCursor = /* @__PURE__ */ __name(() => resumeCursor, "getResumeCursor");
+var clearResumeCursor = /* @__PURE__ */ __name(() => {
+  resumeCursor = null;
+}, "clearResumeCursor");
+var pendingLanes = NoLanes;
+var scheduleRenderLane = /* @__PURE__ */ __name((lane) => {
+  pendingLanes |= lane;
+  if (lane & (SyncLane | InputLane)) {
+    scheduleMicrotask();
+  } else if (lane & DefaultLane) {
+    scheduleMessageTask();
+  } else if (lane & TransitionLane) {
+    scheduleTimeout();
+  } else if (lane & IdleLane) {
+    scheduleIdle();
+  }
+}, "scheduleRenderLane");
+var flush = /* @__PURE__ */ __name((mask) => {
+  const lanes = pendingLanes & mask;
+  if (!lanes) return;
+  pendingLanes &= ~lanes;
+  frameStart = performance.now();
+  doWork?.(lanes);
+}, "flush");
+var MICROTASK_MASK = SyncLane | InputLane;
+var microtaskScheduled = false;
+var scheduleMicrotask = /* @__PURE__ */ __name(() => {
+  if (microtaskScheduled) return;
+  microtaskScheduled = true;
+  queueMicrotask(() => {
+    microtaskScheduled = false;
+    flush(MICROTASK_MASK);
+  });
+}, "scheduleMicrotask");
+var DEFAULT_MASK = DefaultLane;
+var mc = new MessageChannel();
+var mcScheduled = false;
+mc.port1.onmessage = () => {
+  mcScheduled = false;
+  flush(DEFAULT_MASK);
+};
+var scheduleMessageTask = /* @__PURE__ */ __name(() => {
+  if (mcScheduled) return;
+  mcScheduled = true;
+  mc.port2.postMessage(null);
+}, "scheduleMessageTask");
+var TRANSITION_MASK = TransitionLane;
+var timeoutHandle = null;
+var scheduleTimeout = /* @__PURE__ */ __name(() => {
+  if (timeoutHandle !== null) return;
+  timeoutHandle = setTimeout(() => {
+    timeoutHandle = null;
+    flush(TRANSITION_MASK);
+  }, 0);
+}, "scheduleTimeout");
+var IDLE_MASK = IdleLane;
+var idleHandle = null;
+var scheduleIdle = /* @__PURE__ */ __name(() => {
+  if (idleHandle !== null) return;
+  const run = /* @__PURE__ */ __name(() => {
+    idleHandle = null;
+    flush(IDLE_MASK);
+  }, "run");
+  if (typeof requestIdleCallback !== "undefined") {
+    idleHandle = requestIdleCallback(run, { timeout: 300 });
+  } else {
+    idleHandle = setTimeout(run, 300);
+  }
+}, "scheduleIdle");
+
 // ../rectify-hook/src/RectifyHookRenderingFiber.ts
 var instance2 = {
   fiberRendering: null,
@@ -463,10 +658,10 @@ var prepareToUseHooks = /* @__PURE__ */ __name((wip) => {
 var finishUsingHooks = /* @__PURE__ */ __name(() => {
   setFiberRendering(null);
 }, "finishUsingHooks");
-var withHooks = /* @__PURE__ */ __name((wip, Component) => {
+var withHooks = /* @__PURE__ */ __name((wip, Component2) => {
   const NewComponent = /* @__PURE__ */ __name((props) => {
     prepareToUseHooks(wip);
-    const result = Component(props);
+    const result = Component2(props);
     finishUsingHooks();
     return result;
   }, "NewComponent");
@@ -481,23 +676,14 @@ function useState(initialState) {
   }
   const hookIndex = getHookIndex();
   nextHookIndex();
-  let state = fiber.memoizedState;
-  let prevHook = null;
-  for (let i = 0; i < hookIndex; i++) {
-    prevHook = state;
-    state = state?.next ?? null;
-  }
+  let { hook: state, prevHook } = getHookSlot(fiber, hookIndex);
   if (!state) {
     state = {
       memoizedState: getInitialState(initialState),
       queue: null,
       next: null
     };
-    if (prevHook) {
-      prevHook.next = state;
-    } else {
-      fiber.memoizedState = state;
-    }
+    attachHook(fiber, state, prevHook);
   }
   let update = state.queue;
   while (update) {
@@ -522,6 +708,42 @@ function useState(initialState) {
 }
 __name(useState, "useState");
 var RectifyHookUseState_default = useState;
+function useReducer(reducer, initialArg, init) {
+  const fiber = getFiberRendering();
+  if (!fiber) {
+    throw new Error("useReducer must be used within a function component.");
+  }
+  const hookIndex = getHookIndex();
+  nextHookIndex();
+  let { hook, prevHook } = getHookSlot(fiber, hookIndex);
+  if (!hook) {
+    const initialState = isFunction(init) ? init(initialArg) : initialArg;
+    hook = { memoizedState: initialState, queue: null, next: null };
+    attachHook(fiber, hook, prevHook);
+  }
+  let update = hook.queue;
+  while (update) {
+    hook.memoizedState = reducer(hook.memoizedState, update.action);
+    update = update.next;
+  }
+  hook.queue = null;
+  const dispatch = /* @__PURE__ */ __name((action) => {
+    const update2 = { action, next: null };
+    if (!hook.queue) {
+      hook.queue = update2;
+    } else {
+      let last = hook.queue;
+      while (last.next) {
+        last = last.next;
+      }
+      last.next = update2;
+    }
+    scheduleRerender(fiber);
+  }, "dispatch");
+  return [hook.memoizedState, dispatch];
+}
+__name(useReducer, "useReducer");
+var RectifyHookUseReducer_default = useReducer;
 
 // ../rectify-hook/src/RectifyHookDeps.ts
 var depsChanged = /* @__PURE__ */ __name((prev, next) => {
@@ -632,20 +854,11 @@ function useRef(initialValue) {
   }
   const hookIndex = getHookIndex();
   nextHookIndex();
-  let hook = fiber.memoizedState;
-  let prevHook = null;
-  for (let i = 0; i < hookIndex; i++) {
-    prevHook = hook;
-    hook = hook?.next ?? null;
-  }
+  const { hook, prevHook } = getHookSlot(fiber, hookIndex);
   if (!hook) {
     const ref = { current: initialValue };
     const newHook = { memoizedState: ref, queue: null, next: null };
-    if (prevHook) {
-      prevHook.next = newHook;
-    } else {
-      fiber.memoizedState = newHook;
-    }
+    attachHook(fiber, newHook, prevHook);
     return ref;
   }
   return hook.memoizedState;
@@ -661,20 +874,10 @@ function useMemo(factory, deps) {
   }
   const hookIndex = getHookIndex();
   nextHookIndex();
-  let hook = fiber.memoizedState;
-  let prevHook = null;
-  for (let i = 0; i < hookIndex; i++) {
-    prevHook = hook;
-    hook = hook?.next ?? null;
-  }
+  const { hook, prevHook } = getHookSlot(fiber, hookIndex);
   if (!hook) {
     const state = { value: factory(), deps };
-    const newHook = { memoizedState: state, queue: null, next: null };
-    if (prevHook) {
-      prevHook.next = newHook;
-    } else {
-      fiber.memoizedState = newHook;
-    }
+    attachHook(fiber, { memoizedState: state, queue: null, next: null }, prevHook);
     return state.value;
   }
   const prev = hook.memoizedState;
@@ -761,6 +964,30 @@ function clearContextSubscriptions(fiber) {
 }
 __name(clearContextSubscriptions, "clearContextSubscriptions");
 
+// ../rectify-hook/src/RectifyHookUseId.ts
+var _idCounter = 0;
+var generateId = /* @__PURE__ */ __name(() => `_r${(_idCounter++).toString(36)}_`, "generateId");
+var useId = /* @__PURE__ */ __name(() => {
+  const fiber = getFiberRendering();
+  if (!fiber) {
+    throw new Error("useId must be used within a function component.");
+  }
+  const hookIndex = getHookIndex();
+  nextHookIndex();
+  const { hook, prevHook } = getHookSlot(fiber, hookIndex);
+  if (!hook) {
+    const newHook = {
+      memoizedState: generateId(),
+      queue: null,
+      next: null
+    };
+    attachHook(fiber, newHook, prevHook);
+    return newHook.memoizedState;
+  }
+  return hook.memoizedState;
+}, "useId");
+var RectifyHookUseId_default = useId;
+
 // ../rectify-reconciler/src/RectifyFiberRenderPriority.ts
 var currentEventPriority = DefaultLane;
 var setCurrentEventPriority = /* @__PURE__ */ __name((lane) => {
@@ -775,156 +1002,228 @@ var setCurrentRenderingLanes = /* @__PURE__ */ __name((lanes) => {
   currentRenderingLanes = lanes;
 }, "setCurrentRenderingLanes");
 var getCurrentLanePriority = /* @__PURE__ */ __name(() => currentRenderingLanes, "getCurrentLanePriority");
-
-// ../rectify-reconciler/src/RectifyFiberScheduler.ts
-var FRAME_BUDGET_MS = 5;
-var frameStart = 0;
-var shouldYield = /* @__PURE__ */ __name(() => performance.now() - frameStart > FRAME_BUDGET_MS, "shouldYield");
-var doWork = null;
-var setWorkCallback = /* @__PURE__ */ __name((cb) => {
-  doWork = cb;
-}, "setWorkCallback");
-var resumeCursor = null;
-var setResumeCursor = /* @__PURE__ */ __name((fiber) => {
-  resumeCursor = fiber;
-}, "setResumeCursor");
-var getResumeCursor = /* @__PURE__ */ __name(() => resumeCursor, "getResumeCursor");
-var clearResumeCursor = /* @__PURE__ */ __name(() => {
-  resumeCursor = null;
-}, "clearResumeCursor");
-var pendingLanes = NoLanes;
-var scheduleRenderLane = /* @__PURE__ */ __name((lane) => {
-  pendingLanes |= lane;
-  if (lane & (SyncLane | InputLane)) {
-    scheduleMicrotask();
-  } else if (lane & DefaultLane) {
-    scheduleMessageTask();
-  } else if (lane & TransitionLane) {
-    scheduleTimeout();
-  } else if (lane & IdleLane) {
-    scheduleIdle();
-  }
-}, "scheduleRenderLane");
-var flush = /* @__PURE__ */ __name((mask) => {
-  const lanes = pendingLanes & mask;
-  if (!lanes) return;
-  pendingLanes &= ~lanes;
-  frameStart = performance.now();
-  doWork?.(lanes);
-}, "flush");
-var MICROTASK_MASK = SyncLane | InputLane;
-var microtaskScheduled = false;
-var scheduleMicrotask = /* @__PURE__ */ __name(() => {
-  if (microtaskScheduled) return;
-  microtaskScheduled = true;
-  queueMicrotask(() => {
-    microtaskScheduled = false;
-    flush(MICROTASK_MASK);
-  });
-}, "scheduleMicrotask");
-var DEFAULT_MASK = DefaultLane;
-var mc = new MessageChannel();
-var mcScheduled = false;
-mc.port1.onmessage = () => {
-  mcScheduled = false;
-  flush(DEFAULT_MASK);
-};
-var scheduleMessageTask = /* @__PURE__ */ __name(() => {
-  if (mcScheduled) return;
-  mcScheduled = true;
-  mc.port2.postMessage(null);
-}, "scheduleMessageTask");
-var TRANSITION_MASK = TransitionLane;
-var timeoutHandle = null;
-var scheduleTimeout = /* @__PURE__ */ __name(() => {
-  if (timeoutHandle !== null) return;
-  timeoutHandle = setTimeout(() => {
-    timeoutHandle = null;
-    flush(TRANSITION_MASK);
-  }, 0);
-}, "scheduleTimeout");
-var IDLE_MASK = IdleLane;
-var idleHandle = null;
-var scheduleIdle = /* @__PURE__ */ __name(() => {
-  if (idleHandle !== null) return;
-  const run = /* @__PURE__ */ __name(() => {
-    idleHandle = null;
-    flush(IDLE_MASK);
-  }, "run");
-  if (typeof requestIdleCallback !== "undefined") {
-    idleHandle = requestIdleCallback(run, { timeout: 300 });
-  } else {
-    idleHandle = setTimeout(run, 300);
-  }
-}, "scheduleIdle");
-
-// ../rectify-reconciler/src/RectifyFiberWorkLoop.ts
-var swapCurrentForWip = /* @__PURE__ */ __name((current, wip) => {
-  const parent = wip.return;
-  if (!parent) return;
-  if (parent.child === current) {
-    parent.child = wip;
-    return;
-  }
-  let prevSibling = parent.child;
-  while (prevSibling && prevSibling.sibling !== current) {
-    prevSibling = prevSibling.sibling;
+var reuseOrCreate = /* @__PURE__ */ __name((oldFiber, element, wip) => {
+  const newFiber = createWorkInProgress(oldFiber, element.props);
+  if (hasPropsChanged(oldFiber.memoizedProps, element.props)) {
+    addFlagToFiber(newFiber, UpdateFlag);
   }
-  if (prevSibling) prevSibling.sibling = wip;
-}, "swapCurrentForWip");
-var workLoop = /* @__PURE__ */ __name((wipRoot) => {
-  let workInProgress = wipRoot;
-  while (workInProgress) {
-    const next = beginWork(workInProgress);
-    if (next) {
-      workInProgress = next;
-    } else {
-      workInProgress = completeUnitOfWork(workInProgress, wipRoot);
-    }
+  if ((oldFiber.memoizedProps?.ref ?? null) !== (element.props?.ref ?? null)) {
+    addFlagToFiber(newFiber, RefFlag);
   }
-}, "workLoop");
-var workLoopConcurrent = /* @__PURE__ */ __name((wipRoot) => {
-  let workInProgress = getResumeCursor() ?? wipRoot;
-  clearResumeCursor();
-  while (workInProgress && !shouldYield()) {
-    const next = beginWork(workInProgress);
-    if (next) {
-      workInProgress = next;
+  newFiber.return = wip;
+  return newFiber;
+}, "reuseOrCreate");
+var createAndPlace = /* @__PURE__ */ __name((element, wip) => {
+  const newFiber = createFiberFromRectifyElement(element);
+  newFiber.type = element.type;
+  addFlagToFiber(newFiber, PlacementFlag);
+  newFiber.return = wip;
+  return newFiber;
+}, "createAndPlace");
+var appendFiber = /* @__PURE__ */ __name((fiber, prev, index, wip) => {
+  fiber.index = index;
+  if (!prev) wip.child = fiber;
+  else prev.sibling = fiber;
+  return fiber;
+}, "appendFiber");
+var buildOldFiberStructures = /* @__PURE__ */ __name((firstRemaining) => {
+  const keyedMap = /* @__PURE__ */ new Map();
+  const unkeyedByType = /* @__PURE__ */ new Map();
+  let fiber = firstRemaining;
+  while (fiber) {
+    if (fiber.key !== null && fiber.key !== void 0) {
+      keyedMap.set(fiber.key, fiber);
     } else {
-      workInProgress = completeUnitOfWork(workInProgress, wipRoot);
+      const pool = unkeyedByType.get(fiber.type);
+      if (pool) pool.push(fiber);
+      else unkeyedByType.set(fiber.type, [fiber]);
     }
+    fiber = fiber.sibling;
   }
-  if (workInProgress !== null) {
-    setResumeCursor(workInProgress);
-    return false;
+  return { keyedMap, unkeyedByType };
+}, "buildOldFiberStructures");
+var reconcileSequential = /* @__PURE__ */ __name((state, firstOldFiber) => {
+  let oldFiber = firstOldFiber;
+  for (let i = 0; i < state.newElements.length; i++) {
+    const element = state.newElements[i];
+    const { key: elementKey = null, type: elementType } = element;
+    if (!oldFiber) return { stoppedAt: i, oldFiber: null };
+    if (oldFiber.key !== elementKey) return { stoppedAt: i, oldFiber };
+    if (oldFiber.type === elementType) {
+      state.prev = appendFiber(
+        reuseOrCreate(oldFiber, element, state.wip),
+        state.prev,
+        state.index++,
+        state.wip
+      );
+    } else if (elementKey !== null) {
+      addFlagToFiber(oldFiber, DeletionFlag);
+      state.deletions.push(oldFiber);
+      state.prev = appendFiber(
+        createAndPlace(element, state.wip),
+        state.prev,
+        state.index++,
+        state.wip
+      );
+    } else {
+      return { stoppedAt: i, oldFiber };
+    }
+    oldFiber = oldFiber.sibling;
   }
-  return true;
-}, "workLoopConcurrent");
-var workLoopOnFiberLanes = /* @__PURE__ */ __name((wipRoot, renderLanes) => {
-  if (wipRoot.lanes & renderLanes) {
-    const wip = createWorkInProgress(wipRoot, wipRoot.pendingProps);
-    swapCurrentForWip(wipRoot, wip);
-    const isSync = !!(renderLanes & (SyncLane | InputLane));
-    let completed;
-    if (isSync) {
-      workLoop(wip);
-      completed = true;
+  return { stoppedAt: state.newElements.length, oldFiber };
+}, "reconcileSequential");
+var reconcileKeyed = /* @__PURE__ */ __name((state, startAt, remainingOldFiber) => {
+  const { keyedMap, unkeyedByType } = buildOldFiberStructures(remainingOldFiber);
+  let lastPlacedIndex = 0;
+  for (let i = startAt; i < state.newElements.length; i++) {
+    const element = state.newElements[i];
+    const { key: elementKey = null, type: elementType } = element;
+    let matched = null;
+    if (elementKey !== null) {
+      const candidate = keyedMap.get(elementKey) ?? null;
+      if (candidate && candidate.type === elementType) {
+        keyedMap.delete(elementKey);
+        matched = candidate;
+      }
     } else {
-      completed = workLoopConcurrent(wip);
+      const pool = unkeyedByType.get(elementType);
+      if (pool?.length) matched = pool.shift();
+    }
+    if (matched) {
+      const newFiber = reuseOrCreate(matched, element, state.wip);
+      if (matched.index < lastPlacedIndex) {
+        addFlagToFiber(newFiber, MoveFlag);
+      } else {
+        lastPlacedIndex = matched.index;
+      }
+      state.prev = appendFiber(newFiber, state.prev, state.index++, state.wip);
+    } else {
+      state.prev = appendFiber(
+        createAndPlace(element, state.wip),
+        state.prev,
+        state.index++,
+        state.wip
+      );
     }
-    if (completed) bubbleFlagsToRoot(wip);
-    return completed;
   }
-  if (wipRoot.childLanes & renderLanes) {
-    let child = wipRoot.child;
-    while (child) {
-      const done = workLoopOnFiberLanes(child, renderLanes);
-      if (!done) return false;
-      child = child.sibling;
+  for (const orphan of keyedMap.values()) {
+    addFlagToFiber(orphan, DeletionFlag);
+    state.deletions.push(orphan);
+  }
+  for (const pool of unkeyedByType.values()) {
+    for (const orphan of pool) {
+      addFlagToFiber(orphan, DeletionFlag);
+      state.deletions.push(orphan);
     }
   }
-  return true;
-}, "workLoopOnFiberLanes");
+}, "reconcileKeyed");
+var toChildArray = /* @__PURE__ */ __name((children) => {
+  if (children == null || typeof children === "boolean") return [];
+  if (isArray(children)) return children;
+  return [children];
+}, "toChildArray");
+var reconcileChildren = /* @__PURE__ */ __name((wip, children) => {
+  const newElements = toChildArray(children).map(createElementFromRectifyNode).filter(isValidRectifyElement);
+  const state = {
+    wip,
+    newElements,
+    deletions: [],
+    prev: null,
+    index: 0
+  };
+  const firstOldFiber = wip.alternate?.child ?? null;
+  const { stoppedAt, oldFiber } = reconcileSequential(state, firstOldFiber);
+  if (stoppedAt < newElements.length) {
+    reconcileKeyed(state, stoppedAt, oldFiber);
+  } else {
+    let leftover = oldFiber;
+    while (leftover) {
+      addFlagToFiber(leftover, DeletionFlag);
+      state.deletions.push(leftover);
+      leftover = leftover.sibling;
+    }
+  }
+  if (state.prev) state.prev.sibling = null;
+  if (state.deletions.length) wip.deletions = state.deletions;
+}, "reconcileChildren");
+
+// ../rectify-reconciler/src/RectifyFiberConcurrentUpdate.ts
+var instance3 = {
+  head: null,
+  tail: null
+};
+var enqueueUpdate = /* @__PURE__ */ __name((update) => {
+  update.next = null;
+  if (instance3.tail === null) {
+    instance3.head = update;
+    instance3.tail = update;
+    return;
+  }
+  instance3.tail.next = update;
+  instance3.tail = update;
+}, "enqueueUpdate");
+var dequeueUpdate = /* @__PURE__ */ __name(() => {
+  const first = instance3.head;
+  if (first === null) {
+    return null;
+  }
+  instance3.head = first.next;
+  if (instance3.head === null) {
+    instance3.tail = null;
+  }
+  first.next = null;
+  return first;
+}, "dequeueUpdate");
+var hasUpdate = /* @__PURE__ */ __name(() => instance3.head !== null, "hasUpdate");
+
+// ../rectify-reconciler/src/RectifyFiberSuspense.ts
+var suspendedBoundaries = /* @__PURE__ */ new WeakSet();
+var stableFiber = /* @__PURE__ */ __name((fiber) => fiber.alternate ?? fiber, "stableFiber");
+var isSuspendedBoundary = /* @__PURE__ */ __name((fiber) => suspendedBoundaries.has(stableFiber(fiber)), "isSuspendedBoundary");
+var findNearestSuspenseBoundary = /* @__PURE__ */ __name((fiber) => {
+  let current = fiber.return;
+  while (current) {
+    if (current.workTag === SuspenseComponent) return current;
+    current = current.return;
+  }
+  return null;
+}, "findNearestSuspenseBoundary");
+var handleSuspendedWork = /* @__PURE__ */ __name((boundary, thenable) => {
+  const stable = stableFiber(boundary);
+  if (suspendedBoundaries.has(stable)) return;
+  suspendedBoundaries.add(stable);
+  boundary.child = null;
+  boundary.deletions = null;
+  thenable.then(
+    () => {
+      suspendedBoundaries.delete(stable);
+      enqueueUpdate({ lanes: DefaultLane, fiber: stable, next: null });
+      scheduleRenderLane(DefaultLane);
+    },
+    () => {
+      suspendedBoundaries.delete(stable);
+    }
+  );
+}, "handleSuspendedWork");
+var isThenable = /* @__PURE__ */ __name((value) => value !== null && typeof value === "object" && typeof value.then === "function", "isThenable");
+
+// ../rectify-reconciler/src/RectifyFiberBeginWork.ts
+var hasNoPendingWork = /* @__PURE__ */ __name((wip) => !(wip.lanes & getCurrentLanePriority()), "hasNoPendingWork");
+var isUpdate = /* @__PURE__ */ __name((wip) => wip.alternate !== null, "isUpdate");
+var flushStateQueue = /* @__PURE__ */ __name((currentState, props, queue) => {
+  let state = currentState;
+  for (const update of queue) {
+    const partial = typeof update === "function" ? update(state, props) : update;
+    state = { ...state, ...partial };
+  }
+  return state;
+}, "flushStateQueue");
+var renderFunctionComponent = /* @__PURE__ */ __name((wip, Component2) => {
+  const ComponentWithHooks = withHooks(wip, Component2);
+  const children = ComponentWithHooks(wip.pendingProps);
+  reconcileChildren(wip, children);
+}, "renderFunctionComponent");
+var getProviderContext = /* @__PURE__ */ __name((wip) => wip.type._context, "getProviderContext");
 var cloneChildFibers = /* @__PURE__ */ __name((wip) => {
   const currentChild = wip.alternate?.child ?? null;
   if (!currentChild) {
@@ -947,14 +1246,6 @@ var cloneChildFibers = /* @__PURE__ */ __name((wip) => {
   if (prevNewChild) prevNewChild.sibling = null;
   return wip.child;
 }, "cloneChildFibers");
-var hasNoPendingWork = /* @__PURE__ */ __name((wip) => !(wip.lanes & getCurrentLanePriority()), "hasNoPendingWork");
-var isUpdate = /* @__PURE__ */ __name((wip) => wip.alternate !== null, "isUpdate");
-var renderFunctionComponent = /* @__PURE__ */ __name((wip, Component) => {
-  const ComponentWithHooks = withHooks(wip, Component);
-  const children = ComponentWithHooks(wip.pendingProps);
-  reconcileChildren(wip, children);
-}, "renderFunctionComponent");
-var getProviderContext = /* @__PURE__ */ __name((wip) => wip.type._context, "getProviderContext");
 var beginWork = /* @__PURE__ */ __name((wip) => {
   switch (wip.workTag) {
     case MemoComponent: {
@@ -969,12 +1260,12 @@ var beginWork = /* @__PURE__ */ __name((wip) => {
       break;
     }
     case FunctionComponent: {
-      const Component = wip.type;
-      if (!isFunction(Component)) break;
+      const Component2 = wip.type;
+      if (!isFunction(Component2)) break;
       if (isUpdate(wip) && hasNoPendingWork(wip) && shallowEqual(wip.memoizedProps, wip.pendingProps)) {
         return cloneChildFibers(wip);
       }
-      renderFunctionComponent(wip, Component);
+      renderFunctionComponent(wip, Component2);
       break;
     }
     case FragmentComponent:
@@ -997,33 +1288,80 @@ var beginWork = /* @__PURE__ */ __name((wip) => {
       }
       break;
     }
-  }
-  return wip.child;
-}, "beginWork");
-var completeUnitOfWork = /* @__PURE__ */ __name((unit, stopAt) => {
-  let completed = unit;
-  while (completed) {
-    bubbleProperties(completed);
-    if (completed === stopAt) {
-      return null;
+    case SuspenseComponent: {
+      const children = isSuspendedBoundary(wip) ? wip.pendingProps?.fallback : wip.pendingProps?.children;
+      reconcileChildren(wip, children);
+      break;
     }
-    if (completed.sibling) {
-      return completed.sibling;
+    case ClassComponent: {
+      const Ctor = wip.type;
+      const isMount = !wip.classInstance;
+      if (isMount) {
+        const instance4 = new Ctor(wip.pendingProps);
+        instance4._fiber = wip;
+        wip.classInstance = instance4;
+        if (instance4._pendingStateQueue?.length) {
+          instance4.state = flushStateQueue(
+            instance4.state,
+            instance4.props,
+            instance4._pendingStateQueue
+          );
+          instance4._pendingStateQueue = [];
+        }
+      } else {
+        const instance4 = wip.classInstance;
+        if (hasNoPendingWork(wip) && !instance4._pendingStateQueue?.length && shallowEqual(instance4.props, wip.pendingProps)) {
+          return cloneChildFibers(wip);
+        }
+        instance4._prevProps = instance4.props;
+        instance4._prevState = { ...instance4.state };
+        if (instance4._pendingStateQueue?.length) {
+          instance4.state = flushStateQueue(
+            instance4.state,
+            wip.pendingProps,
+            instance4._pendingStateQueue
+          );
+          instance4._pendingStateQueue = [];
+        }
+        instance4.props = wip.pendingProps;
+        instance4._fiber = wip;
+        if (isUpdate(wip) && typeof instance4.shouldComponentUpdate === "function" && !instance4.shouldComponentUpdate(wip.pendingProps, instance4.state)) {
+          return cloneChildFibers(wip);
+        }
+      }
+      const children = wip.classInstance.render();
+      reconcileChildren(wip, children);
+      break;
+    }
+    case LazyComponent: {
+      const lazy2 = wip.type;
+      if (lazy2._status === "resolved") {
+        renderFunctionComponent(wip, lazy2._result);
+        break;
+      }
+      if (lazy2._status === "rejected") {
+        throw lazy2._result;
+      }
+      if (lazy2._status === "uninitialized") {
+        lazy2._status = "pending";
+        lazy2._promise = lazy2._factory().then(
+          (module) => {
+            lazy2._status = "resolved";
+            lazy2._result = module?.default ?? module;
+          },
+          (error) => {
+            lazy2._status = "rejected";
+            lazy2._result = error;
+          }
+        );
+      }
+      throw lazy2._promise;
     }
-    completed = completed.return;
-  }
-  return null;
-}, "completeUnitOfWork");
-var bubbleFlagsToRoot = /* @__PURE__ */ __name((wip) => {
-  let current = wip;
-  let parent = current.return;
-  while (parent) {
-    parent.subtreeFlags |= current.flags | current.subtreeFlags;
-    parent.childLanes |= current.lanes | current.childLanes;
-    current = parent;
-    parent = parent.return;
   }
-}, "bubbleFlagsToRoot");
+  return wip.child;
+}, "beginWork");
+
+// ../rectify-reconciler/src/RectifyFiberCompleteWork.ts
 var bubbleProperties = /* @__PURE__ */ __name((wip) => {
   wip.lanes &= ~getCurrentLanePriority();
   let subtreeFlags = NoFlags;
@@ -1038,164 +1376,151 @@ var bubbleProperties = /* @__PURE__ */ __name((wip) => {
   wip.subtreeFlags = subtreeFlags;
   wip.childLanes = childLanes;
 }, "bubbleProperties");
-var reuseOrCreate = /* @__PURE__ */ __name((oldFiber, element, wip) => {
-  const newFiber = createWorkInProgress(oldFiber, element.props);
-  if (hasPropsChanged(oldFiber.memoizedProps, element.props)) {
-    addFlagToFiber(newFiber, UpdateFlag);
+var bubbleFlagsToRoot = /* @__PURE__ */ __name((wip) => {
+  let current = wip;
+  let parent = current.return;
+  while (parent) {
+    parent.subtreeFlags |= current.flags | current.subtreeFlags;
+    parent.childLanes |= current.lanes | current.childLanes;
+    current = parent;
+    parent = parent.return;
   }
-  newFiber.return = wip;
-  return newFiber;
-}, "reuseOrCreate");
-var createAndPlace = /* @__PURE__ */ __name((element, wip) => {
-  const newFiber = createFiberFromRectifyElement(element);
-  newFiber.type = element.type;
-  addFlagToFiber(newFiber, PlacementFlag);
-  newFiber.return = wip;
-  return newFiber;
-}, "createAndPlace");
-var appendFiber = /* @__PURE__ */ __name((fiber, prev, index, wip) => {
-  fiber.index = index;
-  if (!prev) wip.child = fiber;
-  else prev.sibling = fiber;
-  return fiber;
-}, "appendFiber");
-var buildOldFiberMap = /* @__PURE__ */ __name((firstRemaining, startIndex) => {
-  const map = /* @__PURE__ */ new Map();
-  let fiber = firstRemaining;
-  let i = startIndex;
-  while (fiber) {
-    map.set(fiber.key ?? i, fiber);
-    fiber = fiber.sibling;
-    i++;
+}, "bubbleFlagsToRoot");
+var completeUnitOfWork = /* @__PURE__ */ __name((unit, stopAt) => {
+  let completed = unit;
+  while (completed) {
+    bubbleProperties(completed);
+    if (completed === stopAt) return null;
+    if (completed.sibling) return completed.sibling;
+    completed = completed.return;
   }
-  return map;
-}, "buildOldFiberMap");
-var reconcileSequential = /* @__PURE__ */ __name((state, firstOldFiber) => {
-  let oldFiber = firstOldFiber;
-  let i = 0;
-  for (; i < state.newElements.length; i++) {
-    const element = state.newElements[i];
-    const { key: elementKey = null, type: elementType } = element;
-    if (!oldFiber) break;
-    if (oldFiber.key !== elementKey) break;
-    if (oldFiber.type === elementType) {
-      state.prev = appendFiber(reuseOrCreate(oldFiber, element, state.wip), state.prev, state.index++, state.wip);
-    } else {
-      addFlagToFiber(oldFiber, DeletionFlag);
-      state.deletions.push(oldFiber);
-      state.prev = appendFiber(createAndPlace(element, state.wip), state.prev, state.index++, state.wip);
-    }
-    oldFiber = oldFiber.sibling;
+  return null;
+}, "completeUnitOfWork");
+
+// ../rectify-reconciler/src/RectifyFiberWorkLoop.ts
+var swapCurrentForWip = /* @__PURE__ */ __name((current, wip) => {
+  const parent = wip.return;
+  if (!parent) return;
+  if (parent.child === current) {
+    parent.child = wip;
+    return;
   }
-  return { stoppedAt: i, oldFiber };
-}, "reconcileSequential");
-var reconcileKeyed = /* @__PURE__ */ __name((state, startAt, remainingOldFiber) => {
-  const oldFiberMap = buildOldFiberMap(remainingOldFiber, startAt);
-  let lastPlacedIndex = 0;
-  for (let i = startAt; i < state.newElements.length; i++) {
-    const element = state.newElements[i];
-    const { key: elementKey = null, type: elementType } = element;
-    const mapKey = elementKey ?? i;
-    const matched = oldFiberMap.get(mapKey) ?? null;
-    if (matched && matched.type === elementType) {
-      oldFiberMap.delete(mapKey);
-      const newFiber = reuseOrCreate(matched, element, state.wip);
-      if (matched.index < lastPlacedIndex) {
-        addFlagToFiber(newFiber, MoveFlag);
-      } else {
-        lastPlacedIndex = matched.index;
-      }
-      state.prev = appendFiber(newFiber, state.prev, state.index++, state.wip);
-    } else {
-      state.prev = appendFiber(createAndPlace(element, state.wip), state.prev, state.index++, state.wip);
-    }
+  let prevSibling = parent.child;
+  while (prevSibling && prevSibling.sibling !== current) {
+    prevSibling = prevSibling.sibling;
   }
-  for (const orphan of oldFiberMap.values()) {
-    addFlagToFiber(orphan, DeletionFlag);
-    state.deletions.push(orphan);
+  if (prevSibling) prevSibling.sibling = wip;
+}, "swapCurrentForWip");
+var workLoop = /* @__PURE__ */ __name((wipRoot) => {
+  let workInProgress = wipRoot;
+  while (workInProgress) {
+    try {
+      const next = beginWork(workInProgress);
+      workInProgress = next ?? completeUnitOfWork(workInProgress, wipRoot);
+    } catch (thrown) {
+      if (isThenable(thrown) && workInProgress) {
+        const boundary = findNearestSuspenseBoundary(workInProgress);
+        if (boundary) {
+          handleSuspendedWork(boundary, thrown);
+          workInProgress = boundary;
+          continue;
+        }
+      }
+      throw thrown;
+    }
   }
-}, "reconcileKeyed");
-var toChildArray = /* @__PURE__ */ __name((children) => {
-  if (children == null || typeof children === "boolean") return [];
-  if (isArray(children)) return children;
-  return [children];
-}, "toChildArray");
-var reconcileChildren = /* @__PURE__ */ __name((wip, children) => {
-  const newElements = toChildArray(children).map(createElementFromRectifyNode).filter(isValidRectifyElement);
-  const state = { wip, newElements, deletions: [], prev: null, index: 0 };
-  const firstOldFiber = wip.alternate?.child ?? null;
-  const { stoppedAt, oldFiber } = reconcileSequential(state, firstOldFiber);
-  if (stoppedAt < newElements.length) {
-    reconcileKeyed(state, stoppedAt, oldFiber);
-  } else {
-    let leftover = oldFiber;
-    while (leftover) {
-      addFlagToFiber(leftover, DeletionFlag);
-      state.deletions.push(leftover);
-      leftover = leftover.sibling;
+}, "workLoop");
+var workLoopConcurrent = /* @__PURE__ */ __name((wipRoot) => {
+  let workInProgress = getResumeCursor() ?? wipRoot;
+  clearResumeCursor();
+  while (workInProgress && !shouldYield()) {
+    try {
+      const next = beginWork(workInProgress);
+      workInProgress = next ?? completeUnitOfWork(workInProgress, wipRoot);
+    } catch (thrown) {
+      if (isThenable(thrown) && workInProgress) {
+        const boundary = findNearestSuspenseBoundary(workInProgress);
+        if (boundary) {
+          handleSuspendedWork(boundary, thrown);
+          workInProgress = boundary;
+          continue;
+        }
+      }
+      throw thrown;
     }
   }
-  if (state.prev) state.prev.sibling = null;
-  if (state.deletions.length) wip.deletions = state.deletions;
-}, "reconcileChildren");
-
-// ../rectify-reconciler/src/RectifyFiberCommitWork.ts
-var MutationMask = PlacementFlag | UpdateFlag | MoveFlag;
-var commitWork = /* @__PURE__ */ __name((finishedWork) => {
-  if (finishedWork.deletions?.length) {
-    finishedWork.deletions.forEach(removeHostTree);
-    finishedWork.deletions = null;
+  if (workInProgress !== null) {
+    setResumeCursor(workInProgress);
+    return false;
   }
-  if (finishedWork.flags & MutationMask) {
-    commitMutation(finishedWork);
-    syncMemoizedProps(finishedWork);
+  return true;
+}, "workLoopConcurrent");
+var workLoopOnFiberLanes = /* @__PURE__ */ __name((wipRoot, renderLanes) => {
+  if (wipRoot.lanes & renderLanes) {
+    const wip = createWorkInProgress(wipRoot, wipRoot.pendingProps);
+    swapCurrentForWip(wipRoot, wip);
+    const isSync = !!(renderLanes & (SyncLane | InputLane));
+    const completed = isSync ? (workLoop(wip), true) : workLoopConcurrent(wip);
+    if (completed) bubbleFlagsToRoot(wip);
+    return completed;
   }
-  if (finishedWork.subtreeFlags & MutationMask) {
-    let child = finishedWork.child;
+  if (wipRoot.childLanes & renderLanes) {
+    let child = wipRoot.child;
     while (child) {
-      commitWork(child);
+      if (!workLoopOnFiberLanes(child, renderLanes)) return false;
       child = child.sibling;
     }
   }
-  finishedWork.flags = NoFlags;
-  finishedWork.subtreeFlags = NoFlags;
-}, "commitWork");
-var syncMemoizedProps = /* @__PURE__ */ __name((wip) => {
-  wip.memoizedProps = wip.pendingProps;
-}, "syncMemoizedProps");
+  return true;
+}, "workLoopOnFiberLanes");
 var attachRef = /* @__PURE__ */ __name((wip) => {
   const ref = wip.pendingProps?.ref;
-  if (ref && typeof ref === "object" && "current" in ref) {
+  if (!ref) return;
+  if (isFunction(ref)) {
+    const cleanup = ref(wip.stateNode);
+    wip.refCleanup = isFunction(cleanup) ? cleanup : null;
+  } else if (typeof ref === "object" && "current" in ref) {
     ref.current = wip.stateNode;
   }
 }, "attachRef");
 var detachRef = /* @__PURE__ */ __name((fiber) => {
+  if (fiber.refCleanup) {
+    fiber.refCleanup();
+    fiber.refCleanup = null;
+    return;
+  }
   const ref = fiber.memoizedProps?.ref;
-  if (ref && typeof ref === "object" && "current" in ref) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(null);
+  } else if (typeof ref === "object" && "current" in ref) {
     ref.current = null;
   }
 }, "detachRef");
+
+// ../rectify-reconciler/src/RectifyFiberCommitPlacement.ts
 var insertIntoParent = /* @__PURE__ */ __name((wip, node) => {
   const parentDom = getParentDom(wip);
-  const before = getHostSibling(wip) ?? (wip.return ? getHostSibling(wip.return) : null);
-  if (before) parentDom.insertBefore(node, before);
-  else parentDom.appendChild(node);
+  let cursor = wip;
+  while (cursor) {
+    const before = getHostSibling(cursor);
+    if (before) {
+      parentDom.insertBefore(node, before);
+      return;
+    }
+    const parent = cursor.return;
+    if (!parent || parent.workTag === HostComponent || parent.workTag === HostRoot) break;
+    cursor = parent;
+  }
+  parentDom.appendChild(node);
 }, "insertIntoParent");
 var placeNode = /* @__PURE__ */ __name((wip, node) => {
   insertIntoParent(wip, node);
   precacheFiberNode(wip, node);
   attachRef(wip);
 }, "placeNode");
-var commitMutation = /* @__PURE__ */ __name((childFiber) => {
-  switch (childFiber.workTag) {
-    case HostComponent:
-      commitMutationHostComponent(childFiber);
-      break;
-    case HostText:
-      commitMutationHostText(childFiber);
-      break;
-  }
-}, "commitMutation");
+
+// ../rectify-reconciler/src/RectifyFiberCommitMutation.ts
 var commitMutationHostComponent = /* @__PURE__ */ __name((wip) => {
   if (!wip.stateNode) {
     const node = createDomElementFromFiber(wip);
@@ -1215,9 +1540,13 @@ var commitMutationHostComponent = /* @__PURE__ */ __name((wip) => {
   if (hasFlagOnFiber(wip, UpdateFlag)) {
     applyPropsToDom(wip.stateNode, wip.memoizedProps, wip.pendingProps);
     precacheFiberNode(wip, wip.stateNode);
-    attachRef(wip);
     removeFlagFromFiber(wip, UpdateFlag);
   }
+  if (hasFlagOnFiber(wip, RefFlag)) {
+    detachRef(wip);
+    attachRef(wip);
+    removeFlagFromFiber(wip, RefFlag);
+  }
 }, "commitMutationHostComponent");
 var commitMutationHostText = /* @__PURE__ */ __name((wip) => {
   if (!wip.stateNode) {
@@ -1242,7 +1571,22 @@ var commitMutationHostText = /* @__PURE__ */ __name((wip) => {
     removeFlagFromFiber(wip, UpdateFlag);
   }
 }, "commitMutationHostText");
+var commitMutation = /* @__PURE__ */ __name((fiber) => {
+  switch (fiber.workTag) {
+    case HostComponent:
+      commitMutationHostComponent(fiber);
+      break;
+    case HostText:
+      commitMutationHostText(fiber);
+      break;
+  }
+}, "commitMutation");
+
+// ../rectify-reconciler/src/RectifyFiberCommitRemoval.ts
 var removeHostTree = /* @__PURE__ */ __name((fiber) => {
+  if (fiber.workTag === ClassComponent) {
+    fiber.classInstance?.componentWillUnmount?.();
+  }
   if (fiber.memoizedState) {
     runEffectCleanups(fiber);
   }
@@ -1258,96 +1602,48 @@ var removeHostTree = /* @__PURE__ */ __name((fiber) => {
   }
 }, "removeHostTree");
 
-// ../rectify-reconciler/src/RectifyFiberConcurrentUpdate.ts
-var instance3 = {
-  head: null,
-  tail: null
-};
-var enqueueUpdate = /* @__PURE__ */ __name((update) => {
-  update.next = null;
-  if (instance3.tail === null) {
-    instance3.head = update;
-    instance3.tail = update;
-    return;
-  }
-  instance3.tail.next = update;
-  instance3.tail = update;
-}, "enqueueUpdate");
-var dequeueUpdate = /* @__PURE__ */ __name(() => {
-  const first = instance3.head;
-  if (first === null) {
-    return null;
-  }
-  instance3.head = first.next;
-  if (instance3.head === null) {
-    instance3.tail = null;
+// ../rectify-reconciler/src/RectifyFiberCommitWork.ts
+var MutationMask = PlacementFlag | UpdateFlag | MoveFlag | RefFlag;
+var commitWork = /* @__PURE__ */ __name((finishedWork) => {
+  if (finishedWork.deletions?.length) {
+    finishedWork.deletions.forEach(removeHostTree);
+    finishedWork.deletions = null;
   }
-  first.next = null;
-  return first;
-}, "dequeueUpdate");
-var hasUpdate = /* @__PURE__ */ __name(() => instance3.head !== null, "hasUpdate");
-
-// ../rectify-reconciler/src/RectifyFiberReconciler.ts
-injectEventPriorityCallbacks(
-  setCurrentEventPriority,
-  resetCurrentEventPriority
-);
-var isFlushingLayoutEffects = false;
-var performWork = /* @__PURE__ */ __name((lanes) => {
-  const fiberRoot = getScheduledFiberRoot();
-  if (!fiberRoot) return;
-  if (!getResumeCursor()) flushPendingUpdates();
-  setCurrentRenderingLanes(lanes);
-  const completed = workLoopOnFiberLanes(fiberRoot.root, lanes);
-  if (!completed) {
-    scheduleRenderLane(lanes);
-    return;
+  if (finishedWork.flags & MutationMask) {
+    commitMutation(finishedWork);
+    finishedWork.memoizedProps = finishedWork.pendingProps;
   }
-  clearResumeCursor();
-  commitWork(fiberRoot.root);
-  markContainerAsRoot(fiberRoot.root, fiberRoot.containerDom);
-  flushLayoutPhase(fiberRoot);
-  schedulePassiveEffects();
-}, "performWork");
-setWorkCallback(performWork);
-var onScheduleRerender = /* @__PURE__ */ __name((fiber) => {
-  const lane = isFlushingLayoutEffects ? SyncLane : requestUpdateLane();
-  enqueueUpdate({ lanes: lane, fiber, next: null });
-  if (!isFlushingLayoutEffects) {
-    scheduleRenderLane(lane);
+  if (finishedWork.subtreeFlags & MutationMask) {
+    let child = finishedWork.child;
+    while (child) {
+      commitWork(child);
+      child = child.sibling;
+    }
   }
-}, "onScheduleRerender");
-var onMarkFiberDirty = /* @__PURE__ */ __name((fiber) => {
-  const lane = getCurrentLanePriority();
-  fiber.lanes |= lane;
-  const wip = fiber.alternate;
-  if (!wip) return;
-  wip.lanes |= lane;
-  let parent = wip.return;
-  while (parent) {
-    if ((parent.childLanes & lane) === lane) break;
-    parent.childLanes |= lane;
-    parent = parent.return;
+  if (finishedWork.workTag === ClassComponent && finishedWork.classInstance) {
+    const instance4 = finishedWork.classInstance;
+    const isMount = finishedWork.alternate === null;
+    if (isMount) {
+      instance4.componentDidMount?.();
+    } else if (instance4._prevState !== void 0) {
+      instance4.componentDidUpdate?.(
+        instance4._prevProps,
+        instance4._prevState
+      );
+      instance4._prevProps = void 0;
+      instance4._prevState = void 0;
+    }
   }
-}, "onMarkFiberDirty");
-setScheduleRerender(onScheduleRerender);
-setMarkFiberDirty(onMarkFiberDirty);
-var createContainer = /* @__PURE__ */ __name((container) => {
-  return createHostRootFiber(container);
-}, "createContainer");
-var updateContainer = /* @__PURE__ */ __name((children, fiberRoot) => {
-  fiberRoot.children = children;
-  setScheduledFiberRoot(fiberRoot);
-  const wipRoot = createWorkInProgress(fiberRoot.root, { children });
-  setCurrentRenderingLanes(SyncLane);
-  workLoop(wipRoot);
-  commitWork(wipRoot);
-  fiberRoot.root = wipRoot;
-  markContainerAsRoot(wipRoot, fiberRoot.containerDom);
-  setScheduledFiberRoot(fiberRoot);
-  flushLayoutPhase(fiberRoot);
-  schedulePassiveEffects();
-}, "updateContainer");
+  finishedWork.flags = NoFlags;
+  finishedWork.subtreeFlags = NoFlags;
+}, "commitWork");
+
+// ../rectify-reconciler/src/RectifyFiberFlushPhase.ts
+var _isFlushingLayoutEffects = false;
+var getIsFlushingLayoutEffects = /* @__PURE__ */ __name(() => _isFlushingLayoutEffects, "getIsFlushingLayoutEffects");
+var setIsFlushingLayoutEffects = /* @__PURE__ */ __name((value) => {
+  _isFlushingLayoutEffects = value;
+}, "setIsFlushingLayoutEffects");
 var passiveChannel = new MessageChannel();
 var schedulePassiveEffects = /* @__PURE__ */ __name(() => {
   passiveChannel.port1.onmessage = () => {
@@ -1358,10 +1654,10 @@ var schedulePassiveEffects = /* @__PURE__ */ __name(() => {
 }, "schedulePassiveEffects");
 var flushLayoutPhase = /* @__PURE__ */ __name((fiberRoot) => {
   while (true) {
-    isFlushingLayoutEffects = true;
+    setIsFlushingLayoutEffects(true);
     flushLayoutEffectCleanups();
     flushLayoutEffects();
-    isFlushingLayoutEffects = false;
+    setIsFlushingLayoutEffects(false);
     if (!hasUpdate()) break;
     flushPendingUpdates();
     setCurrentRenderingLanes(SyncLane);
@@ -1392,6 +1688,71 @@ var propagateLaneToAncestors = /* @__PURE__ */ __name((updateQueue) => {
   }
 }, "propagateLaneToAncestors");
 
+// ../rectify-reconciler/src/RectifyFiberHookBridge.ts
+var onScheduleRerender = /* @__PURE__ */ __name((fiber) => {
+  const lane = getIsFlushingLayoutEffects() ? SyncLane : requestUpdateLane();
+  enqueueUpdate({ lanes: lane, fiber, next: null });
+  if (!getIsFlushingLayoutEffects()) {
+    scheduleRenderLane(lane);
+  }
+}, "onScheduleRerender");
+var onMarkFiberDirty = /* @__PURE__ */ __name((fiber) => {
+  const lane = getCurrentLanePriority();
+  fiber.lanes |= lane;
+  const wip = fiber.alternate;
+  if (!wip) return;
+  wip.lanes |= lane;
+  let parent = wip.return;
+  while (parent) {
+    if ((parent.childLanes & lane) === lane) break;
+    parent.childLanes |= lane;
+    parent = parent.return;
+  }
+}, "onMarkFiberDirty");
+setScheduleRerender(onScheduleRerender);
+setMarkFiberDirty(onMarkFiberDirty);
+
+// ../rectify-reconciler/src/RectifyFiberBootstrap.ts
+injectEventPriorityCallbacks(
+  setCurrentEventPriority,
+  resetCurrentEventPriority
+);
+var performWork = /* @__PURE__ */ __name((lanes) => {
+  const fiberRoot = getScheduledFiberRoot();
+  if (!fiberRoot) return;
+  if (!getResumeCursor()) flushPendingUpdates();
+  setCurrentRenderingLanes(lanes);
+  const completed = workLoopOnFiberLanes(fiberRoot.root, lanes);
+  if (!completed) {
+    scheduleRenderLane(lanes);
+    return;
+  }
+  clearResumeCursor();
+  commitWork(fiberRoot.root);
+  markContainerAsRoot(fiberRoot.root, fiberRoot.containerDom);
+  flushLayoutPhase(fiberRoot);
+  schedulePassiveEffects();
+}, "performWork");
+setWorkCallback(performWork);
+
+// ../rectify-reconciler/src/RectifyFiberReconciler.ts
+var createContainer = /* @__PURE__ */ __name((container) => {
+  return createHostRootFiber(container);
+}, "createContainer");
+var updateContainer = /* @__PURE__ */ __name((children, fiberRoot) => {
+  fiberRoot.children = children;
+  setScheduledFiberRoot(fiberRoot);
+  const wipRoot = createWorkInProgress(fiberRoot.root, { children });
+  setCurrentRenderingLanes(SyncLane);
+  workLoop(wipRoot);
+  commitWork(wipRoot);
+  fiberRoot.root = wipRoot;
+  markContainerAsRoot(wipRoot, fiberRoot.containerDom);
+  setScheduledFiberRoot(fiberRoot);
+  flushLayoutPhase(fiberRoot);
+  schedulePassiveEffects();
+}, "updateContainer");
+
 // ../rectify-dom/src/RectifyDomRoot.ts
 var createRoot = /* @__PURE__ */ __name((container) => {
   const hostRoot = createContainer(container);
@@ -1408,15 +1769,80 @@ var createRoot = /* @__PURE__ */ __name((container) => {
 }, "createRoot");
 
 // src/RectifyMemo.ts
-function memo(Component, compare) {
+function memo(Component2, compare) {
   const wrapper = /* @__PURE__ */ __name(((_props) => null), "wrapper");
   wrapper._isMemo = true;
-  wrapper._render = Component;
+  wrapper._render = Component2;
   wrapper._compare = compare ?? null;
   return wrapper;
 }
 __name(memo, "memo");
 
-export { SyntheticEvent_default as SyntheticEvent, createContext, createRoot, memo, RectifyHookUseCallback_default as useCallback, useContext, RectifyHookUseEffect_default as useEffect, RectifyHookUseLayoutEffect_default as useLayoutEffect, RectifyHookUseMemo_default as useMemo, RectifyHookUseRef_default as useRef, RectifyHookUseState_default as useState };
+// src/RectifyLazy.ts
+var lazy = /* @__PURE__ */ __name((factory) => {
+  const stub = /* @__PURE__ */ __name((() => null), "stub");
+  return Object.assign(stub, {
+    _isLazy: true,
+    _status: "uninitialized",
+    _result: null,
+    _promise: null,
+    _factory: factory
+  });
+}, "lazy");
+
+// src/RectifySuspense.ts
+var Suspense = /* @__PURE__ */ __name((_props) => null, "Suspense");
+Suspense._isSuspense = true;
+
+// src/RectifyComponent.ts
+var _Component = class _Component {
+  constructor(props) {
+    this.state = {};
+    /**
+     * @internal Set by the reconciler when the instance is created so
+     * `setState` can enqueue a re-render on the correct fiber.
+     */
+    this._fiber = null;
+    /**
+     * @internal Snapshots taken by the reconciler in beginWork before each
+     * update render so that `componentDidUpdate` receives the correct prev values.
+     * Cleared after `componentDidUpdate` is called.
+     */
+    this._prevProps = void 0;
+    this._prevState = void 0;
+    /**
+     * @internal Queue of pending setState updates, flushed by the reconciler
+     * during beginWork so that prevState snapshots can be taken first.
+     */
+    this._pendingStateQueue = [];
+    this.props = props;
+  }
+  // ---------------------------------------------------------------------------
+  // Core API
+  // ---------------------------------------------------------------------------
+  /**
+   * Merges `partialState` into the current state and schedules a re-render.
+   * Accepts either a plain partial state object or an updater function.
+   */
+  setState(partialState) {
+    this._pendingStateQueue.push(partialState);
+    if (this._fiber) {
+      scheduleRerender(this._fiber);
+    }
+  }
+  /**
+   * Must be implemented by every class component.
+   * Returns the subtree to render.
+   */
+  render() {
+    return null;
+  }
+};
+__name(_Component, "Component");
+/** Marks this as a class component for the reconciler. */
+_Component._isClassComponent = true;
+var Component = _Component;
+
+export { Component, Suspense, SyntheticEvent_default as SyntheticEvent, createContext, createRoot, lazy, memo, RectifyHookUseCallback_default as useCallback, useContext, RectifyHookUseEffect_default as useEffect, RectifyHookUseId_default as useId, RectifyHookUseLayoutEffect_default as useLayoutEffect, RectifyHookUseMemo_default as useMemo, RectifyHookUseReducer_default as useReducer, RectifyHookUseRef_default as useRef, RectifyHookUseState_default as useState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map