@tanstack/router-devtools-core 1.167.0 → 1.167.2

package/dist/{BaseTanStackRouterDevtoolsPanel-BlI6Kawa.cjs → BaseTanStackRouterDevtoolsPanel-CKR5l6C5.cjs}

@@ -22,8 +22,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 const require_context = require("./context-DZa5WwQ_.cjs");
 let clsx = require("clsx");
-let tiny_invariant = require("tiny-invariant");
-tiny_invariant = __toESM(tiny_invariant);
 let _tanstack_router_core = require("@tanstack/router-core");
 let goober = require("goober");
 goober = __toESM(goober);
@@ -942,16 +940,90 @@ function useIsMounted() {
 	});
 	return isMounted;
 }
+var SERVER_COMPONENT_STREAM = Symbol.for("tanstack.rsc.stream");
+var RENDERABLE_RSC = Symbol.for("tanstack.rsc.renderable");
+var RSC_SLOT_USAGES = Symbol.for("tanstack.rsc.slotUsages");
+function trimTrailingUndefined(arr) {
+	let end = arr.length;
+	while (end > 0 && arr[end - 1] === void 0) end--;
+	if (end === 0) return arr;
+	return end === arr.length ? arr : arr.slice(0, end);
+}
+/**
+* Checks if a value is any kind of server component
+*/
+var isServerComponent = (value) => {
+	return (typeof value === "object" || typeof value === "function") && value !== null && SERVER_COMPONENT_STREAM in value;
+};
+/**
+* Gets the type of server component.
+* - RENDERABLE_RSC === true → renderable (from renderServerComponent)
+* - RENDERABLE_RSC === false or not present → composite (from createCompositeComponent)
+*/
+var getServerComponentType = (value) => {
+	if (!isServerComponent(value)) return null;
+	const v = value;
+	if (RENDERABLE_RSC in v && v[RENDERABLE_RSC] === true) return "renderableValue";
+	return "compositeSource";
+};
+/**
+* Gets the slot names from a composite server component (dev only)
+*/
+var getServerComponentSlots = (value) => {
+	if (!isServerComponent(value)) return [];
+	const v = value;
+	const out = [];
+	if (RSC_SLOT_USAGES in v) {
+		const usages = v[RSC_SLOT_USAGES];
+		if (Array.isArray(usages)) for (const evt of usages) {
+			const name = evt?.slot;
+			if (typeof name === "string" && !out.includes(name)) out.push(name);
+		}
+	}
+	return out;
+};
+var getServerComponentSlotUsages = (value) => {
+	if (!isServerComponent(value)) return [];
+	const v = value;
+	if (!(RSC_SLOT_USAGES in v)) return [];
+	const usages = v[RSC_SLOT_USAGES];
+	if (!Array.isArray(usages)) return [];
+	return usages.filter((d) => {
+		return d && typeof d === "object" && typeof d.slot === "string" && (d.args === void 0 || Array.isArray(d.args));
+	});
+};
+var getServerComponentSlotUsageSummary = (value) => {
+	const usages = getServerComponentSlotUsages(value);
+	const out = {};
+	for (const evt of usages) {
+		const args = trimTrailingUndefined(evt.args ?? []);
+		const prev = out[evt.slot] ?? (out[evt.slot] = {
+			count: 0,
+			invocations: []
+		});
+		prev.count++;
+		prev.invocations.push(args);
+	}
+	return out;
+};
 /**
 * Displays a string regardless the type of the data
 * @param {unknown} value Value to be stringified
 */
 var displayValue = (value) => {
+	if (value === "React element") return "React element";
+	const componentType = getServerComponentType(value);
+	if (componentType === "compositeSource") {
+		const slots = getServerComponentSlots(value);
+		if (slots.length > 0) return `RSC composite source (${slots.length} ${slots.length === 1 ? "slot" : "slots"})`;
+		return "RSC composite source";
+	}
+	if (componentType === "renderableValue") return "RSC renderable value";
 	const name = Object.getOwnPropertyNames(Object(value));
 	const newValue = typeof value === "bigint" ? `${value.toString()}n` : value;
 	try {
 		return JSON.stringify(newValue, name);
-	} catch (e) {
+	} catch {
 		return `unable to stringify`;
 	}
 };
@@ -972,8 +1044,8 @@ function multiSortBy(arr, accessors = [(d) => d]) {
 }
 //#endregion
 //#region src/Explorer.tsx
-var _tmpl$$3 = /* @__PURE__ */ require_context.template(`<span><svg xmlns=http://www.w3.org/2000/svg width=12 height=12 fill=none viewBox="0 0 24 24"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 18l6-6-6-6">`), _tmpl$2$1 = /* @__PURE__ */ require_context.template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ require_context.template(`<button><span> `), _tmpl$4$1 = /* @__PURE__ */ require_context.template(`<div><div><button> [<!> ... <!>]`), _tmpl$5$1 = /* @__PURE__ */ require_context.template(`<button><span></span> 🔄 `), _tmpl$6$1 = /* @__PURE__ */ require_context.template(`<span>:`), _tmpl$7$1 = /* @__PURE__ */ require_context.template(`<span>`);
-var Expander = ({ expanded, style = {} }) => {
+var _tmpl$$3 = /* @__PURE__ */ require_context.template(`<span><svg xmlns=http://www.w3.org/2000/svg width=12 height=12 fill=none viewBox="0 0 24 24"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 18l6-6-6-6">`), _tmpl$2$1 = /* @__PURE__ */ require_context.template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ require_context.template(`<button><span>:</span><span>`), _tmpl$4$1 = /* @__PURE__ */ require_context.template(`<div><span>slots</span><div>`), _tmpl$5$1 = /* @__PURE__ */ require_context.template(`<span>:`), _tmpl$6$1 = /* @__PURE__ */ require_context.template(`<span>`), _tmpl$7$1 = /* @__PURE__ */ require_context.template(`<button><span> `), _tmpl$8$1 = /* @__PURE__ */ require_context.template(`<div><div><button> [<!> ... <!>]`), _tmpl$9$1 = /* @__PURE__ */ require_context.template(`<button><span></span> 🔄 `);
+var Expander = ({ expanded, style: _style = {} }) => {
 	const styles = useStyles();
 	return (() => {
 		var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild;
@@ -1011,6 +1083,11 @@ function chunkArray(array, size) {
 function isIterable(x) {
 	return Symbol.iterator in x;
 }
+function isPlainObject(value) {
+	if (!value || typeof value !== "object") return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
 function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ...rest }) {
 	const [expanded, setExpanded] = require_context.createSignal(Boolean(defaultExpanded));
 	const toggleExpanded = () => setExpanded((old) => !old);
@@ -1025,7 +1102,16 @@ function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ..
 				defaultExpanded: subDefaultExpanded
 			};
 		};
-		if (Array.isArray(value())) entries = value().map((d, i) => makeProperty({
+		if (Array.isArray(value()) && value().length === 2 && value()[0] === "React element" && isPlainObject(value()[1])) {
+			const v = value();
+			entries = [makeProperty({
+				label: "0",
+				value: v[0]
+			}), ...Object.entries(v[1]).map(([key, val]) => makeProperty({
+				label: key,
+				value: val
+			}))];
+		} else if (Array.isArray(value())) entries = value().map((d, i) => makeProperty({
 			label: i.toString(),
 			value: d
 		}));
@@ -1050,94 +1136,151 @@ function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ..
 		value,
 		filterSubEntries
 	}, rest, entry));
+	const serverComponentType = require_context.createMemo(() => getServerComponentType(value()));
+	const serverComponentSlots = require_context.createMemo(() => getServerComponentSlots(value()));
+	const serverComponentSlotUsageSummary = require_context.createMemo(() => getServerComponentSlotUsageSummary(value()));
+	const isCompositeWithSlots = require_context.createMemo(() => serverComponentType() === "compositeSource" && serverComponentSlots().length > 0);
 	return (() => {
 		var _el$3 = _tmpl$2$1();
 		require_context.insert(_el$3, (() => {
-			var _c$ = require_context.memo(() => !!subEntryPages().length);
-			return () => _c$() ? [(() => {
-				var _el$4 = _tmpl$3$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
+			var _c$ = require_context.memo(() => serverComponentType() !== null);
+			return () => _c$() ? require_context.memo(() => !!isCompositeWithSlots())() ? [(() => {
+				var _el$4 = _tmpl$3$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling;
 				_el$4.$$click = () => toggleExpanded();
 				require_context.insert(_el$4, require_context.createComponent(Expander, { get expanded() {
 					return expanded() ?? false;
 				} }), _el$5);
-				require_context.insert(_el$4, () => rest.label, _el$5);
-				require_context.insert(_el$5, () => String(type).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$6);
-				require_context.insert(_el$5, () => subEntries().length, _el$6);
-				require_context.insert(_el$5, () => subEntries().length > 1 ? `items` : `item`, null);
+				require_context.insert(_el$5, () => rest.label, _el$6);
+				require_context.insert(_el$7, () => displayValue(value()));
 				require_context.createRenderEffect((_p$) => {
-					var _v$3 = styles().expandButton, _v$4 = styles().info;
+					var _v$3 = styles().expandButton, _v$4 = styles().compositeComponent;
 					_v$3 !== _p$.e && require_context.className(_el$4, _p$.e = _v$3);
-					_v$4 !== _p$.t && require_context.className(_el$5, _p$.t = _v$4);
+					_v$4 !== _p$.t && require_context.className(_el$7, _p$.t = _v$4);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
 				return _el$4;
+			})(), require_context.memo(() => require_context.memo(() => !!(expanded() ?? false))() ? (() => {
+				var _el$8 = _tmpl$4$1(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
+				require_context.insert(_el$0, () => serverComponentSlots().map((name) => {
+					const usage = serverComponentSlotUsageSummary()[name];
+					if (!usage) return null;
+					return require_context.createComponent(Explorer, {
+						label: `${name}:`,
+						value: () => usage.invocations.map((args) => args.length === 1 ? args[0] : args)
+					});
+				}));
+				require_context.createRenderEffect((_p$) => {
+					var _v$5 = styles().rscMetaRow, _v$6 = styles().rscMetaLabel, _v$7 = styles().subEntries;
+					_v$5 !== _p$.e && require_context.className(_el$8, _p$.e = _v$5);
+					_v$6 !== _p$.t && require_context.className(_el$9, _p$.t = _v$6);
+					_v$7 !== _p$.a && require_context.className(_el$0, _p$.a = _v$7);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$8;
+			})() : null)] : [
+				(() => {
+					var _el$1 = _tmpl$5$1(), _el$10 = _el$1.firstChild;
+					require_context.insert(_el$1, () => rest.label, _el$10);
+					return _el$1;
+				})(),
+				" ",
+				(() => {
+					var _el$11 = _tmpl$6$1();
+					require_context.insert(_el$11, () => displayValue(value()));
+					require_context.createRenderEffect(() => require_context.className(_el$11, serverComponentType() === "compositeSource" ? styles().compositeComponent : styles().renderableComponent));
+					return _el$11;
+				})()
+			] : require_context.memo(() => !!subEntryPages().length)() ? [(() => {
+				var _el$12 = _tmpl$7$1(), _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild;
+				_el$12.$$click = () => toggleExpanded();
+				require_context.insert(_el$12, require_context.createComponent(Expander, { get expanded() {
+					return expanded() ?? false;
+				} }), _el$13);
+				require_context.insert(_el$12, () => rest.label, _el$13);
+				require_context.insert(_el$13, () => String(type).toLowerCase() === "iterable" ? "(Iterable) " : "", _el$14);
+				require_context.insert(_el$13, () => subEntries().length, _el$14);
+				require_context.insert(_el$13, () => subEntries().length > 1 ? `items` : `item`, null);
+				require_context.createRenderEffect((_p$) => {
+					var _v$8 = styles().expandButton, _v$9 = styles().info;
+					_v$8 !== _p$.e && require_context.className(_el$12, _p$.e = _v$8);
+					_v$9 !== _p$.t && require_context.className(_el$13, _p$.t = _v$9);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$12;
 			})(), require_context.memo(() => require_context.memo(() => !!(expanded() ?? false))() ? require_context.memo(() => subEntryPages().length === 1)() ? (() => {
-				var _el$7 = _tmpl$2$1();
-				require_context.insert(_el$7, () => subEntries().map((entry, index) => handleEntry(entry)));
-				require_context.createRenderEffect(() => require_context.className(_el$7, styles().subEntries));
-				return _el$7;
+				var _el$15 = _tmpl$2$1();
+				require_context.insert(_el$15, () => subEntries().map((entry, index) => handleEntry(entry)));
+				require_context.createRenderEffect(() => require_context.className(_el$15, styles().subEntries));
+				return _el$15;
 			})() : (() => {
-				var _el$8 = _tmpl$2$1();
-				require_context.insert(_el$8, () => subEntryPages().map((entries, index) => {
+				var _el$16 = _tmpl$2$1();
+				require_context.insert(_el$16, () => subEntryPages().map((entries, index) => {
 					return (() => {
-						var _el$9 = _tmpl$4$1(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$15 = _el$10.nextSibling, _el$16 = _el$15.nextSibling.nextSibling;
-						_el$16.nextSibling;
-						_el$1.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
-						require_context.insert(_el$1, require_context.createComponent(Expander, { get expanded() {
+						var _el$17 = _tmpl$8$1(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$25 = _el$20.nextSibling, _el$26 = _el$25.nextSibling.nextSibling;
+						_el$26.nextSibling;
+						_el$19.$$click = () => setExpandedPages((old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]);
+						require_context.insert(_el$19, require_context.createComponent(Expander, { get expanded() {
 							return expandedPages().includes(index);
-						} }), _el$10);
-						require_context.insert(_el$1, index * pageSize, _el$15);
-						require_context.insert(_el$1, index * pageSize + pageSize - 1, _el$16);
-						require_context.insert(_el$0, (() => {
+						} }), _el$20);
+						require_context.insert(_el$19, index * pageSize, _el$25);
+						require_context.insert(_el$19, index * pageSize + pageSize - 1, _el$26);
+						require_context.insert(_el$18, (() => {
 							var _c$2 = require_context.memo(() => !!expandedPages().includes(index));
 							return () => _c$2() ? (() => {
-								var _el$17 = _tmpl$2$1();
-								require_context.insert(_el$17, () => entries.map((entry) => handleEntry(entry)));
-								require_context.createRenderEffect(() => require_context.className(_el$17, styles().subEntries));
-								return _el$17;
+								var _el$27 = _tmpl$2$1();
+								require_context.insert(_el$27, () => entries.map((entry) => handleEntry(entry)));
+								require_context.createRenderEffect(() => require_context.className(_el$27, styles().subEntries));
+								return _el$27;
 							})() : null;
 						})(), null);
 						require_context.createRenderEffect((_p$) => {
-							var _v$5 = styles().entry, _v$6 = (0, clsx.clsx)(styles().labelButton, "labelButton");
-							_v$5 !== _p$.e && require_context.className(_el$0, _p$.e = _v$5);
-							_v$6 !== _p$.t && require_context.className(_el$1, _p$.t = _v$6);
+							var _v$0 = styles().entry, _v$1 = (0, clsx.clsx)(styles().labelButton, "labelButton");
+							_v$0 !== _p$.e && require_context.className(_el$18, _p$.e = _v$0);
+							_v$1 !== _p$.t && require_context.className(_el$19, _p$.t = _v$1);
 							return _p$;
 						}, {
 							e: void 0,
 							t: void 0
 						});
-						return _el$9;
+						return _el$17;
 					})();
 				}));
-				require_context.createRenderEffect(() => require_context.className(_el$8, styles().subEntries));
-				return _el$8;
+				require_context.createRenderEffect(() => require_context.className(_el$16, styles().subEntries));
+				return _el$16;
 			})() : null)] : require_context.memo(() => type() === "function")() ? require_context.createComponent(Explorer, {
 				get label() {
 					return (() => {
-						var _el$18 = _tmpl$5$1(), _el$19 = _el$18.firstChild;
-						_el$18.$$click = refreshValueSnapshot;
-						require_context.insert(_el$19, () => rest.label);
-						require_context.createRenderEffect(() => require_context.className(_el$18, styles().refreshValueBtn));
-						return _el$18;
+						var _el$28 = _tmpl$9$1(), _el$29 = _el$28.firstChild;
+						_el$28.$$click = refreshValueSnapshot;
+						require_context.insert(_el$29, () => rest.label);
+						require_context.createRenderEffect(() => require_context.className(_el$28, styles().refreshValueBtn));
+						return _el$28;
 					})();
 				},
 				value: valueSnapshot,
 				defaultExpanded: {}
 			}) : [
 				(() => {
-					var _el$20 = _tmpl$6$1(), _el$21 = _el$20.firstChild;
-					require_context.insert(_el$20, () => rest.label, _el$21);
-					return _el$20;
+					var _el$30 = _tmpl$5$1(), _el$31 = _el$30.firstChild;
+					require_context.insert(_el$30, () => rest.label, _el$31);
+					return _el$30;
 				})(),
 				" ",
 				(() => {
-					var _el$22 = _tmpl$7$1();
-					require_context.insert(_el$22, () => displayValue(value()));
-					require_context.createRenderEffect(() => require_context.className(_el$22, styles().value));
-					return _el$22;
+					var _el$32 = _tmpl$6$1();
+					require_context.insert(_el$32, () => displayValue(value()));
+					require_context.createRenderEffect(() => require_context.className(_el$32, styles().value));
+					return _el$32;
 				})()
 			];
 		})());
@@ -1146,7 +1289,7 @@ function Explorer({ value, defaultExpanded, pageSize = 100, filterSubEntries, ..
 	})();
 }
 var stylesFactory = (shadowDOMTarget) => {
-	const { colors, font, size, alpha, shadow, border } = tokens;
+	const { colors, font, size, border } = tokens;
 	const { fontFamily, lineHeight, size: fontSize } = font;
 	const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css;
 	return {
@@ -1199,6 +1342,67 @@ var stylesFactory = (shadowDOMTarget) => {
     `,
 		value: css`
       color: ${colors.purple[400]};
+    `,
+		compositeComponent: css`
+      display: inline-flex;
+      align-items: center;
+      padding: 1px ${size[1]};
+      border-radius: ${border.radius.full};
+      border: 1px solid ${colors.darkGray[500]};
+      background: ${colors.darkGray[700]};
+      color: ${colors.cyan[300]};
+      font-style: normal;
+      font-weight: ${font.weight.medium};
+    `,
+		renderableComponent: css`
+      display: inline-flex;
+      align-items: center;
+      padding: 1px ${size[1]};
+      border-radius: ${border.radius.full};
+      border: 1px solid ${colors.darkGray[500]};
+      background: ${colors.darkGray[700]};
+      color: ${colors.teal[300]};
+      font-style: normal;
+      font-weight: ${font.weight.medium};
+    `,
+		rscMetaRow: css`
+      display: flex;
+      gap: ${size[1]};
+      align-items: flex-start;
+      margin-left: calc(${size[3]} + ${size[1]});
+      margin-top: ${size[.5]};
+      flex-wrap: wrap;
+    `,
+		rscMetaLabel: css`
+      color: ${colors.gray[500]};
+      font-size: ${fontSize["2xs"]};
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      padding-top: 2px;
+    `,
+		rscChipRow: css`
+      display: flex;
+      gap: ${size[1]};
+      flex-wrap: wrap;
+    `,
+		rscChip: css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${size[.5]};
+      padding: 1px ${size[1]};
+      border-radius: ${border.radius.full};
+      border: 1px solid ${colors.darkGray[500]};
+      background: ${colors.darkGray[800]};
+      color: ${colors.gray[200]};
+      font-size: ${fontSize["2xs"]};
+      line-height: ${lineHeight.xs};
+    `,
+		rscChipName: css`
+      color: ${colors.gray[100]};
+    `,
+		rscChipMeta: css`
+      color: ${colors.gray[400]};
+      font-size: ${fontSize["2xs"]};
     `,
 		subEntries: css`
       margin-left: ${size[2]};
@@ -1437,7 +1641,6 @@ var BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel({
 	const { onCloseClick } = require_context.useDevtoolsOnClose();
 	const styles = useStyles$1();
 	const { className: className$2, style, ...otherPanelProps } = panelProps;
-	(0, tiny_invariant.default)(router, "No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.");
 	const [currentTab, setCurrentTab] = useLocalStorage("tanstackRouterDevtoolsActiveTab", "routes");
 	const [activeId, setActiveId] = useLocalStorage("tanstackRouterDevtoolsActiveRouteId", "");
 	const [history, setHistory] = require_context.createSignal([]);
@@ -1451,23 +1654,23 @@ var BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel({
 		cachedMatches = _cachedMatches;
 		require_context.createEffect(() => {
 			const pendingMatchesStore = router().stores.pendingMatchesSnapshot;
-			setPendingMatches(pendingMatchesStore.state);
+			setPendingMatches(pendingMatchesStore.get());
 			const subscription = pendingMatchesStore.subscribe(() => {
-				setPendingMatches(pendingMatchesStore.state);
+				setPendingMatches(pendingMatchesStore.get());
 			});
 			require_context.onCleanup(() => subscription.unsubscribe());
 		});
 		require_context.createEffect(() => {
 			const cachedMatchesStore = router().stores.cachedMatchesSnapshot;
-			setCachedMatches(cachedMatchesStore.state);
+			setCachedMatches(cachedMatchesStore.get());
 			const subscription = cachedMatchesStore.subscribe(() => {
-				setCachedMatches(cachedMatchesStore.state);
+				setCachedMatches(cachedMatchesStore.get());
 			});
 			require_context.onCleanup(() => subscription.unsubscribe());
 		});
 	} else {
-		pendingMatches = () => router().stores.pendingMatchesSnapshot.state;
-		cachedMatches = () => router().stores.cachedMatchesSnapshot.state;
+		pendingMatches = () => router().stores.pendingMatchesSnapshot.get();
+		cachedMatches = () => router().stores.cachedMatchesSnapshot.get();
 	}
 	require_context.createEffect(() => {
 		const matches = routerState().matches;
@@ -1995,4 +2198,4 @@ exports.useIsMounted = useIsMounted;
 exports.useLocalStorage = useLocalStorage;
 exports.useStyles = useStyles$1;
 
-//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel-BlI6Kawa.cjs.map
+//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel-CKR5l6C5.cjs.map