@kubb/react-fabric 0.0.0 → 0.1.0

package/dist/devtools.cjs

@@ -2,8 +2,8 @@ const require_react$1 = require('./react-Bq0UOw6S.cjs');
 let ws = require("ws");
 ws = require_react$1.__toESM(ws);
 
-//#region ../../node_modules/.pnpm/react-devtools-inline@7.0.0/node_modules/react-devtools-inline/dist/backend.js
-var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node_modules/.pnpm/react-devtools-inline@7.0.0/node_modules/react-devtools-inline/dist/backend.js": ((exports, module) => {
+//#region ../../node_modules/.pnpm/react-devtools-inline@7.0.1/node_modules/react-devtools-inline/dist/backend.js
+var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node_modules/.pnpm/react-devtools-inline@7.0.1/node_modules/react-devtools-inline/dist/backend.js": ((exports, module) => {
 	(() => {
 		var __webpack_modules__ = {
 			3018: ((module$1, __unused_webpack_exports, __webpack_require__$1) => {
@@ -2077,6 +2077,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 				return isReactNativeEnvironment() ? showOverlayNative(elements, agent$1) : showOverlayWeb(elements, componentName, agent$1, hideAfterTimeout);
 			}
 			let iframesListeningTo = /* @__PURE__ */ new Set();
+			let inspectOnlySuspenseNodes = false;
 			function setupHighlighter(bridge$1, agent$1) {
 				bridge$1.addListener("clearHostInstanceHighlight", clearHostInstanceHighlight);
 				bridge$1.addListener("highlightHostInstance", highlightHostInstance);
@@ -2085,7 +2086,8 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 				bridge$1.addListener("shutdown", stopInspectingHost);
 				bridge$1.addListener("startInspectingHost", startInspectingHost);
 				bridge$1.addListener("stopInspectingHost", stopInspectingHost);
-				function startInspectingHost() {
+				function startInspectingHost(onlySuspenseNodes) {
+					inspectOnlySuspenseNodes = onlySuspenseNodes;
 					registerListenersOnWindow(window);
 				}
 				function registerListenersOnWindow(window$1) {
@@ -2268,16 +2270,32 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							}
 						} catch (error) {}
 					}
-					showOverlay([target], null, agent$1, false);
-					selectElementForNode(target);
+					if (inspectOnlySuspenseNodes) {
+						const match = agent$1.getIDForHostInstance(target, inspectOnlySuspenseNodes);
+						if (match !== null) {
+							const renderer = agent$1.rendererInterfaces[match.rendererID];
+							if (renderer == null) {
+								console.warn(`Invalid renderer id "${match.rendererID}" for element "${match.id}"`);
+								return;
+							}
+							highlightHostInstance({
+								displayName: renderer.getDisplayNameForElementID(match.id),
+								hideAfterTimeout: false,
+								id: match.id,
+								openBuiltinElementsPanel: false,
+								rendererID: match.rendererID,
+								scrollIntoView: false
+							});
+						}
+					} else showOverlay([target], null, agent$1, false);
 				}
 				function onPointerUp(event) {
 					event.preventDefault();
 					event.stopPropagation();
 				}
 				const selectElementForNode = (node) => {
-					const id = agent$1.getIDForHostInstance(node);
-					if (id !== null) bridge$1.send("selectElement", id);
+					const match = agent$1.getIDForHostInstance(node, inspectOnlySuspenseNodes);
+					if (match !== null) bridge$1.send("selectElement", match.id);
 				};
 				function getEventTarget(event) {
 					if (event.composed) return event.composedPath()[0];
@@ -2767,7 +2785,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						else renderer.deletePath(type, id, hookID, path);
 					});
 					agent_defineProperty(this, "getBackendVersion", () => {
-						this._bridge.send("backendVersion", "7.0.0-3b2a398106");
+						this._bridge.send("backendVersion", "7.0.1-3cde211b0c");
 					});
 					agent_defineProperty(this, "getBridgeProtocol", () => {
 						this._bridge.send("bridgeProtocol", currentBridgeProtocol);
@@ -3117,19 +3135,23 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					}
 					return renderer.getInstanceAndStyle(id);
 				}
-				getIDForHostInstance(target) {
+				getIDForHostInstance(target, onlySuspenseNodes) {
 					if (isReactNativeEnvironment() || typeof target.nodeType !== "number") {
 						for (const rendererID in this._rendererInterfaces) {
 							const renderer = this._rendererInterfaces[rendererID];
 							try {
-								const match = renderer.getElementIDForHostInstance(target);
-								if (match != null) return match;
+								const id = onlySuspenseNodes ? renderer.getSuspenseNodeIDForHostInstance(target) : renderer.getElementIDForHostInstance(target);
+								if (id !== null) return {
+									id,
+									rendererID: +rendererID
+								};
 							} catch (error) {}
 						}
 						return null;
 					} else {
 						let bestMatch = null;
 						let bestRenderer = null;
+						let bestRendererID = 0;
 						for (const rendererID in this._rendererInterfaces) {
 							const renderer = this._rendererInterfaces[rendererID];
 							const nearestNode = renderer.getNearestMountedDOMNode(target);
@@ -3137,58 +3159,34 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 								if (nearestNode === target) {
 									bestMatch = nearestNode;
 									bestRenderer = renderer;
+									bestRendererID = +rendererID;
 									break;
 								}
 								if (bestMatch === null || bestMatch.contains(nearestNode)) {
 									bestMatch = nearestNode;
 									bestRenderer = renderer;
+									bestRendererID = +rendererID;
 								}
 							}
 						}
 						if (bestRenderer != null && bestMatch != null) try {
-							return bestRenderer.getElementIDForHostInstance(bestMatch);
+							const id = onlySuspenseNodes ? bestRenderer.getSuspenseNodeIDForHostInstance(bestMatch) : bestRenderer.getElementIDForHostInstance(bestMatch);
+							if (id !== null) return {
+								id,
+								rendererID: bestRendererID
+							};
 						} catch (error) {}
 						return null;
 					}
 				}
 				getComponentNameForHostInstance(target) {
-					if (isReactNativeEnvironment() || typeof target.nodeType !== "number") {
-						for (const rendererID in this._rendererInterfaces) {
-							const renderer = this._rendererInterfaces[rendererID];
-							try {
-								const id = renderer.getElementIDForHostInstance(target);
-								if (id) return renderer.getDisplayNameForElementID(id);
-							} catch (error) {}
-						}
-						return null;
-					} else {
-						let bestMatch = null;
-						let bestRenderer = null;
-						for (const rendererID in this._rendererInterfaces) {
-							const renderer = this._rendererInterfaces[rendererID];
-							const nearestNode = renderer.getNearestMountedDOMNode(target);
-							if (nearestNode !== null) {
-								if (nearestNode === target) {
-									bestMatch = nearestNode;
-									bestRenderer = renderer;
-									break;
-								}
-								if (bestMatch === null || bestMatch.contains(nearestNode)) {
-									bestMatch = nearestNode;
-									bestRenderer = renderer;
-								}
-							}
-						}
-						if (bestRenderer != null && bestMatch != null) try {
-							const id = bestRenderer.getElementIDForHostInstance(bestMatch);
-							if (id) return bestRenderer.getDisplayNameForElementID(id);
-						} catch (error) {}
-						return null;
-					}
+					const match = this.getIDForHostInstance(target);
+					if (match !== null) return this._rendererInterfaces[match.rendererID].getDisplayNameForElementID(match.id);
+					return null;
 				}
 				selectNode(target) {
-					const id = this.getIDForHostInstance(target);
-					if (id !== null) this._bridge.send("selectElement", id);
+					const match = this.getIDForHostInstance(target);
+					if (match !== null) this._bridge.send("selectElement", match.id);
 				}
 				registerRendererInterface(rendererID, rendererInterface) {
 					this._rendererInterfaces[rendererID] = rendererInterface;
@@ -3543,6 +3541,9 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					getElementIDForHostInstance() {
 						return null;
 					},
+					getSuspenseNodeIDForHostInstance() {
+						return null;
+					},
 					getInstanceAndStyle() {
 						return {
 							instance: null,
@@ -4840,8 +4841,6 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					"--color-timeline-text-dim-color": "#ccc",
 					"--color-timeline-react-work-border": "#eeeeee",
 					"--color-timebar-background": "#f6f6f6",
-					"--color-timespan-background": "#62bc6a",
-					"--color-timespan-background-errored": "#d57066",
 					"--color-search-match": "yellow",
 					"--color-search-match-current": "#f7923b",
 					"--color-selected-tree-highlight-active": "rgba(0, 136, 250, 0.1)",
@@ -4859,6 +4858,13 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					"--color-warning-background-hover": "#f82042",
 					"--color-warning-text-color": "#ffffff",
 					"--color-warning-text-color-inverted": "#fd4d69",
+					"--color-suspense-default": "#0088fa",
+					"--color-transition-default": "#6a51b2",
+					"--color-suspense-server": "#62bc6a",
+					"--color-transition-server": "#3f7844",
+					"--color-suspense-other": "#f3ce49",
+					"--color-transition-other": "#917b2c",
+					"--color-suspense-errored": "#d57066",
 					"--color-scroll-thumb": "#c2c2c2",
 					"--color-scroll-track": "#fafafa",
 					"--color-tooltip-background": "rgba(0, 0, 0, 0.9)",
@@ -4988,8 +4994,6 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					"--color-timeline-text-dim-color": "#555b66",
 					"--color-timeline-react-work-border": "#3d424a",
 					"--color-timebar-background": "#1d2129",
-					"--color-timespan-background": "#62bc6a",
-					"--color-timespan-background-errored": "#d57066",
 					"--color-search-match": "yellow",
 					"--color-search-match-current": "#f7923b",
 					"--color-selected-tree-highlight-active": "rgba(23, 143, 185, 0.15)",
@@ -5008,6 +5012,13 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					"--color-warning-background-hover": "#da1030",
 					"--color-warning-text-color": "#ffffff",
 					"--color-warning-text-color-inverted": "#ee1638",
+					"--color-suspense-default": "#61dafb",
+					"--color-transition-default": "#6a51b2",
+					"--color-suspense-server": "#62bc6a",
+					"--color-transition-server": "#3f7844",
+					"--color-suspense-other": "#f3ce49",
+					"--color-transition-other": "#917b2c",
+					"--color-suspense-errored": "#d57066",
 					"--color-scroll-thumb": "#afb3b9",
 					"--color-scroll-track": "#313640",
 					"--color-tooltip-background": "rgba(255, 255, 255, 0.95)",
@@ -6419,7 +6430,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					const numUnmountIDs = pendingRealUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);
 					const numUnmountSuspenseIDs = pendingRealUnmountedSuspenseIDs.length;
 					const numSuspenderChanges = pendingSuspenderChanges.size;
-					const operations = new Array(3 + pendingStringTableLength + (numUnmountSuspenseIDs > 0 ? 2 + numUnmountSuspenseIDs : 0) + (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) + pendingOperations.length + (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 2 : 0));
+					const operations = new Array(3 + pendingStringTableLength + (numUnmountSuspenseIDs > 0 ? 2 + numUnmountSuspenseIDs : 0) + (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) + pendingOperations.length + (numSuspenderChanges > 0 ? 2 + numSuspenderChanges * 3 : 0));
 					let i = 0;
 					operations[i++] = rendererID;
 					if (currentRoot === null) operations[i++] = -1;
@@ -6456,6 +6467,9 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							if (suspense === void 0) throw new Error(`Could not send suspender changes for "${fiberIdWithChanges}" since the Fiber no longer exists.`);
 							operations[i++] = fiberIdWithChanges;
 							operations[i++] = suspense.hasUniqueSuspenders ? 1 : 0;
+							const instance = suspense.instance;
+							const isSuspended = (instance.kind === FIBER_INSTANCE || instance.kind === FILTERED_FIBER_INSTANCE) && instance.data.tag === SuspenseComponent && instance.data.memoizedState !== null;
+							operations[i++] = isSuspended ? 1 : 0;
 							operations[i++] = suspense.environments.size;
 							suspense.environments.forEach((count, env) => {
 								operations[i++] = getStringID(env);
@@ -6473,7 +6487,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 				}
 				function measureHostInstance(instance) {
 					if (typeof instance !== "object" || instance === null) return null;
-					if (typeof instance.getClientRects === "function") {
+					if (typeof instance.getClientRects === "function" || instance.nodeType === 3) {
 						const doc = instance.ownerDocument;
 						if (instance === doc.documentElement) return [{
 							x: 0,
@@ -6485,7 +6499,14 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						const win = doc && doc.defaultView;
 						const scrollX = win ? win.scrollX : 0;
 						const scrollY = win ? win.scrollY : 0;
-						const rects = instance.getClientRects();
+						let rects;
+						if (instance.nodeType === 3) {
+							if (typeof doc.createRange !== "function") return null;
+							const range = doc.createRange();
+							if (typeof range.getClientRects !== "function") return null;
+							range.selectNodeContents(instance);
+							rects = range.getClientRects();
+						} else rects = instance.getClientRects();
 						for (let i = 0; i < rects.length; i++) {
 							const rect = rects[i];
 							result.push({
@@ -6656,23 +6677,26 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					const unfilteredParentInstance = unfilteredParent !== null ? unfilteredParent.instance : null;
 					if (unfilteredParentInstance !== null && unfilteredParentInstance.kind === FILTERED_FIBER_INSTANCE) throw new Error("Should not have a filtered instance at this point. This is a bug.");
 					const parentID = unfilteredParentInstance === null ? 0 : unfilteredParentInstance.id;
-					const props = fiberInstance.data.memoizedProps;
-					const nameStringID = getStringID(props === null ? null : props.name || null);
+					const fiber = fiberInstance.data;
+					const props = fiber.memoizedProps;
+					const nameStringID = getStringID(fiber.tag !== SuspenseComponent || props === null ? null : props.name || null);
+					const isSuspended = fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
 					idToSuspenseNodeMap.set(fiberID, suspenseInstance);
 					pushOperation(SUSPENSE_TREE_OPERATION_ADD);
 					pushOperation(fiberID);
 					pushOperation(parentID);
 					pushOperation(nameStringID);
+					pushOperation(isSuspended ? 1 : 0);
 					const rects = suspenseInstance.rects;
 					if (rects === null) pushOperation(-1);
 					else {
 						pushOperation(rects.length);
 						for (let i = 0; i < rects.length; ++i) {
 							const rect = rects[i];
-							pushOperation(Math.round(rect.x));
-							pushOperation(Math.round(rect.y));
-							pushOperation(Math.round(rect.width));
-							pushOperation(Math.round(rect.height));
+							pushOperation(Math.round(rect.x * 1e3));
+							pushOperation(Math.round(rect.y * 1e3));
+							pushOperation(Math.round(rect.width * 1e3));
+							pushOperation(Math.round(rect.height * 1e3));
 						}
 					}
 				}
@@ -6702,10 +6726,10 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						pushOperation(rects.length);
 						for (let i = 0; i < rects.length; ++i) {
 							const rect = rects[i];
-							pushOperation(Math.round(rect.x));
-							pushOperation(Math.round(rect.y));
-							pushOperation(Math.round(rect.width));
-							pushOperation(Math.round(rect.height));
+							pushOperation(Math.round(rect.x * 1e3));
+							pushOperation(Math.round(rect.y * 1e3));
+							pushOperation(Math.round(rect.width * 1e3));
+							pushOperation(Math.round(rect.height * 1e3));
 						}
 					}
 				}
@@ -6743,7 +6767,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					if (reconcilingParent === null || reconcilingParentSuspenseNode === null) throw new Error("It should not be possible to have suspended data outside the root. Even suspending at the first position is still a child of the root.");
 					const parentSuspenseNode = reconcilingParentSuspenseNode;
 					let parentInstance = reconcilingParent;
-					while (parentInstance.kind === FILTERED_FIBER_INSTANCE && parentInstance.parent !== null) parentInstance = parentInstance.parent;
+					while (parentInstance.kind === FILTERED_FIBER_INSTANCE && parentInstance.parent !== null && parentInstance !== parentSuspenseNode.instance) parentInstance = parentInstance.parent;
 					const suspenseNodeSuspendedBy = parentSuspenseNode.suspendedBy;
 					const ioInfo = asyncInfo.awaited;
 					let suspendedBySet = suspenseNodeSuspendedBy.get(ioInfo);
@@ -6908,8 +6932,15 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						default: return false;
 					}
 				}
+				function isSuspendedOffscreen(fiber) {
+					switch (fiber.tag) {
+						case LegacyHiddenComponent:
+						case OffscreenComponent: return fiber.memoizedState !== null && fiber.return !== null && fiber.return.tag === SuspenseComponent;
+						default: return false;
+					}
+				}
 				function unmountRemainingChildren() {
-					if (reconcilingParent !== null && (reconcilingParent.kind === FIBER_INSTANCE || reconcilingParent.kind === FILTERED_FIBER_INSTANCE) && isHiddenOffscreen(reconcilingParent.data) && !isInDisconnectedSubtree) {
+					if (reconcilingParent !== null && (reconcilingParent.kind === FIBER_INSTANCE || reconcilingParent.kind === FILTERED_FIBER_INSTANCE) && isSuspendedOffscreen(reconcilingParent.data) && !isInDisconnectedSubtree) {
 						isInDisconnectedSubtree = true;
 						try {
 							let child = remainingReconcilingChildren;
@@ -6957,15 +6988,17 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 				}
 				function measureUnchangedSuspenseNodesRecursively(suspenseNode) {
 					if (isInDisconnectedSubtree) return;
-					const nextRects = measureInstance(suspenseNode.instance);
-					const prevRects = suspenseNode.rects;
-					if (areEqualRects(prevRects, nextRects)) return;
-					let parent = suspenseNode.instance.parent;
+					const instance = suspenseNode.instance;
+					if ((instance.kind === FIBER_INSTANCE || instance.kind === FILTERED_FIBER_INSTANCE) && instance.data.tag === SuspenseComponent && instance.data.memoizedState !== null) return;
+					let parent = instance.parent;
 					while (parent !== null) {
 						if ((parent.kind === FIBER_INSTANCE || parent.kind === FILTERED_FIBER_INSTANCE) && isHiddenOffscreen(parent.data)) return;
 						if (parent.suspenseNode !== null) break;
 						parent = parent.parent;
 					}
+					const nextRects = measureInstance(suspenseNode.instance);
+					const prevRects = suspenseNode.rects;
+					if (areEqualRects(prevRects, nextRects)) return;
 					for (let child = suspenseNode.firstChild; child !== null; child = child.nextSibling) measureUnchangedSuspenseNodesRecursively(child);
 					suspenseNode.rects = nextRects;
 					recordSuspenseResize(suspenseNode);
@@ -7294,7 +7327,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							aquireHostInstance(nearestInstance, fiber.stateNode);
 							trackDebugInfoFromHostComponent(nearestInstance, fiber);
 						}
-						if (isHiddenOffscreen(fiber)) {
+						if (isSuspendedOffscreen(fiber)) {
 							const stashedDisconnected = isInDisconnectedSubtree;
 							isInDisconnectedSubtree = true;
 							try {
@@ -7302,7 +7335,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							} finally {
 								isInDisconnectedSubtree = stashedDisconnected;
 							}
-						} else if (fiber.tag === SuspenseComponent && OffscreenComponent === -1) {
+						} else if (isHiddenOffscreen(fiber)) {} else if (fiber.tag === SuspenseComponent && OffscreenComponent === -1) {
 							if (newSuspenseNode !== null) trackThrownPromisesFromRetryCache(newSuspenseNode, fiber.stateNode);
 							if (fiber.memoizedState !== null) {
 								const primaryChildFragment = fiber.child;
@@ -7695,8 +7728,14 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						const nextDidTimeOut = isLegacySuspense && nextFiber.memoizedState !== null;
 						const prevWasHidden = isHiddenOffscreen(prevFiber);
 						const nextIsHidden = isHiddenOffscreen(nextFiber);
+						const prevWasSuspended = isSuspendedOffscreen(prevFiber);
+						const nextIsSuspended = isSuspendedOffscreen(nextFiber);
 						if (isLegacySuspense) {
-							if (fiberInstance !== null && fiberInstance.suspenseNode !== null && prevFiber.stateNode === null !== (nextFiber.stateNode === null)) trackThrownPromisesFromRetryCache(fiberInstance.suspenseNode, nextFiber.stateNode);
+							if (fiberInstance !== null && fiberInstance.suspenseNode !== null) {
+								const suspenseNode = fiberInstance.suspenseNode;
+								if (prevFiber.stateNode === null !== (nextFiber.stateNode === null)) trackThrownPromisesFromRetryCache(suspenseNode, nextFiber.stateNode);
+								if (prevFiber.memoizedState === null !== (nextFiber.memoizedState === null)) recordSuspenseSuspenders(suspenseNode);
+							}
 						}
 						if (prevDidTimeout && nextDidTimeOut) {
 							const nextFiberChild = nextFiber.child;
@@ -7722,8 +7761,8 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 								mountChildrenRecursively(nextFallbackChildSet, traceNearestHostComponentUpdate);
 								updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
 							}
-						} else if (nextIsHidden) {
-							if (!prevWasHidden) {
+						} else if (nextIsSuspended) {
+							if (!prevWasSuspended) {
 								if (fiberInstance !== null && !isInDisconnectedSubtree) disconnectChildrenRecursively(remainingReconcilingChildren);
 							}
 							const stashedDisconnected = isInDisconnectedSubtree;
@@ -7733,7 +7772,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							} finally {
 								isInDisconnectedSubtree = stashedDisconnected;
 							}
-						} else if (prevWasHidden && !nextIsHidden) {
+						} else if (prevWasSuspended && !nextIsSuspended) {
 							const stashedDisconnected = isInDisconnectedSubtree;
 							isInDisconnectedSubtree = true;
 							try {
@@ -7747,7 +7786,8 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 								reconnectChildrenRecursively(fiberInstance);
 								updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
 							}
-						} else if (nextFiber.tag === SuspenseComponent && OffscreenComponent !== -1 && fiberInstance !== null && fiberInstance.suspenseNode !== null) {
+						} else if (nextIsHidden) if (prevWasHidden) {} else unmountRemainingChildren();
+						else if (nextFiber.tag === SuspenseComponent && OffscreenComponent !== -1 && fiberInstance !== null && fiberInstance.suspenseNode !== null) {
 							const suspenseNode = fiberInstance.suspenseNode;
 							const prevContentFiber = prevFiber.child;
 							const nextContentFiber = nextFiber.child;
@@ -7756,6 +7796,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							if (previousHydrated && nextHydrated) {
 								if (nextContentFiber === null || prevContentFiber === null) throw new Error("There should always be an Offscreen Fiber child in a hydrated Suspense boundary.");
 								if (prevFiber.stateNode === null !== (nextFiber.stateNode === null)) trackThrownPromisesFromRetryCache(suspenseNode, nextFiber.stateNode);
+								if (prevFiber.memoizedState === null !== (nextFiber.memoizedState === null)) recordSuspenseSuspenders(suspenseNode);
 								shouldMeasureSuspenseNode = false;
 								updateFlags |= updateSuspenseChildrenRecursively(nextContentFiber, prevContentFiber, traceNearestHostComponentUpdate, stashedSuspenseParent, stashedSuspensePrevious, stashedSuspenseRemaining);
 								shouldPopSuspenseNode = false;
@@ -7763,6 +7804,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 							} else if (!previousHydrated && nextHydrated) {
 								if (nextContentFiber === null) throw new Error("There should always be an Offscreen Fiber child in a hydrated Suspense boundary.");
 								trackThrownPromisesFromRetryCache(suspenseNode, nextFiber.stateNode);
+								recordSuspenseSuspenders(suspenseNode);
 								mountSuspenseChildrenRecursively(nextContentFiber, traceNearestHostComponentUpdate, stashedSuspenseParent, stashedSuspensePrevious, stashedSuspenseRemaining);
 								shouldPopSuspenseNode = false;
 							} else if (previousHydrated && !nextHydrated) throw new Error("Encountered a dehydrated Suspense boundary that was previously hydrated.");
@@ -7792,7 +7834,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						}
 						if ((updateFlags & ShouldResetChildren) !== NoUpdate) {
 							if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
-								if (!nextIsHidden && !isInDisconnectedSubtree) recordResetChildren(fiberInstance);
+								if (!nextIsSuspended && !isInDisconnectedSubtree) recordResetChildren(fiberInstance);
 								updateFlags &= ~ShouldResetChildren;
 							}
 						}
@@ -7842,7 +7884,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 				}
 				function disconnectChildrenRecursively(firstChild) {
 					for (let child = firstChild; child !== null; child = child.nextSibling) {
-						if ((child.kind === FIBER_INSTANCE || child.kind === FILTERED_FIBER_INSTANCE) && isHiddenOffscreen(child.data)) {} else disconnectChildrenRecursively(child.firstChild);
+						if ((child.kind === FIBER_INSTANCE || child.kind === FILTERED_FIBER_INSTANCE) && isSuspendedOffscreen(child.data)) {} else disconnectChildrenRecursively(child.firstChild);
 						if (child.kind === FIBER_INSTANCE) recordDisconnect(child);
 						else if (child.kind === VIRTUAL_INSTANCE) recordVirtualDisconnect(child);
 					}
@@ -8021,8 +8063,18 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 				function getDisplayNameForElementID(id) {
 					const devtoolsInstance = idToDevToolsInstanceMap.get(id);
 					if (devtoolsInstance === void 0) return null;
-					if (devtoolsInstance.kind === FIBER_INSTANCE) return getDisplayNameForFiber(devtoolsInstance.data);
-					else return devtoolsInstance.data.name || "";
+					if (devtoolsInstance.kind === FIBER_INSTANCE) {
+						const fiber = devtoolsInstance.data;
+						if (fiber.tag === HostRoot) return "Initial Paint";
+						if (fiber.tag === SuspenseComponent || fiber.tag === ActivityComponent) {
+							const props = fiber.memoizedProps;
+							if (props.name != null) return props.name;
+							const owner = getUnfilteredOwner(fiber);
+							if (owner != null) if (typeof owner.tag === "number") return getDisplayNameForFiber(owner);
+							else return owner.name || "";
+						}
+						return getDisplayNameForFiber(fiber);
+					} else return devtoolsInstance.data.name || "";
 				}
 				function getNearestSuspenseNode(instance) {
 					while (instance.suspenseNode === null) {
@@ -8044,6 +8096,18 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					}
 					return null;
 				}
+				function getSuspenseNodeIDForHostInstance(publicInstance) {
+					const instance = publicInstanceToDevToolsInstanceMap.get(publicInstance);
+					if (instance !== void 0) {
+						let suspenseInstance = instance;
+						while (suspenseInstance.suspenseNode === null || suspenseInstance.kind === FILTERED_FIBER_INSTANCE) {
+							if (suspenseInstance.parent === null) return null;
+							suspenseInstance = suspenseInstance.parent;
+						}
+						return suspenseInstance.id;
+					}
+					return null;
+				}
 				function getElementAttributeByPath(id, path) {
 					if (isMostRecentlyInspectedElement(id)) return utils_getInObject(mostRecentlyInspectedElement, path);
 				}
@@ -8192,7 +8256,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 									}
 								}
 								const newIO = asyncInfo.awaited;
-								if (newIO.name === "RSC stream" && newIO.value != null) {
+								if ((newIO.name === "RSC stream" || newIO.name === "rsc stream") && newIO.value != null) {
 									const streamPromise = newIO.value;
 									const existingEntry = streamEntries.get(streamPromise);
 									if (existingEntry === void 0) streamEntries.set(streamPromise, {
@@ -8228,7 +8292,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						const ioInfo = asyncInfo.awaited;
 						if (foundIOEntries.has(ioInfo)) continue;
 						foundIOEntries.add(ioInfo);
-						if (ioInfo.name === "RSC stream" && ioInfo.value != null) {
+						if ((ioInfo.name === "RSC stream" || ioInfo.name === "rsc stream") && ioInfo.value != null) {
 							const streamPromise = ioInfo.value;
 							const existingEntry = streamEntries.get(streamPromise);
 							if (existingEntry === void 0) streamEntries.set(streamPromise, asyncInfo);
@@ -9375,6 +9439,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					getDisplayNameForElementID,
 					getNearestMountedDOMNode,
 					getElementIDForHostInstance,
+					getSuspenseNodeIDForHostInstance,
 					getInstanceAndStyle,
 					getOwnersList,
 					getPathForElement,
@@ -9625,6 +9690,7 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 						pushOperation(id);
 						pushOperation(parentID);
 						pushOperation(getStringID(null));
+						pushOperation(0);
 						pushOperation(-1);
 					} else {
 						const type = getElementType(internalInstance);
@@ -10114,6 +10180,9 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 					getDisplayNameForElementID,
 					getNearestMountedDOMNode,
 					getElementIDForHostInstance,
+					getSuspenseNodeIDForHostInstance(id) {
+						return null;
+					},
 					getInstanceAndStyle,
 					findHostInstancesForElementID: (id) => {
 						const hostInstance = findHostInstanceForInternalID(id);
@@ -10800,8 +10869,8 @@ var require_backend$1 = /* @__PURE__ */ require_react$1.__commonJS({ "../../node
 }) });
 
 //#endregion
-//#region ../../node_modules/.pnpm/react-devtools-inline@7.0.0/node_modules/react-devtools-inline/backend.js
-var require_backend = /* @__PURE__ */ require_react$1.__commonJS({ "../../node_modules/.pnpm/react-devtools-inline@7.0.0/node_modules/react-devtools-inline/backend.js": ((exports, module) => {
+//#region ../../node_modules/.pnpm/react-devtools-inline@7.0.1/node_modules/react-devtools-inline/backend.js
+var require_backend = /* @__PURE__ */ require_react$1.__commonJS({ "../../node_modules/.pnpm/react-devtools-inline@7.0.1/node_modules/react-devtools-inline/backend.js": ((exports, module) => {
 	module.exports = require_backend$1();
 }) });