@plitzi/sdk-dev-tools 0.35.9 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @plitzi/sdk-dev-tools
 
+## 0.36.0
+
+### Minor Changes
+
+- - **An `apiContainer` can keep its browser requests in a query cache, the way react-query does.** Moving between
+    sections or pages used to ask the API again every time a provider was shown: a provider in a hidden section is
+    mounted but disabled, so showing it fired a fresh request, and a page navigation remounted it and did the same.
+    With the new `cache: true` an answer is kept for `staleTime` seconds (30 by default) and shared by every cached
+    provider asking the same thing — same method, URL, credentials and headers, the token included, so two visitors
+    never share one. Past its time the answer is still drawn at once and a fresh one is fetched behind it; an answer
+    nobody shows is forgotten after `gcTime` seconds (300 by default). A refused request (`4xx`/`5xx`) is shown but
+    never kept. **The cache is off unless an element asks for it**: an uncached provider behaves as before, asking on
+    every mount and sharing nothing.
+
+    The cache is `@plitzi/sdk-shared/queries` (`queryCache`, `useQuery`, `invalidateQueries`,
+    `invalidateQueriesForWrite`), a nexus store written with the per-path `ttl` of `@plitzi/nexus` 1.2.0, which every
+    consumer now requires. It reacts to the store's own freshness events, so anything that expires a query's path
+    makes the providers on screen ask again.
+
+    An answer stops counting as current before its time when the element's `performQuery` runs (it always asks
+    again), when a flow runs the new global `invalidateQueries` step (source `queries`: `elements`, api container ids
+    — a container's requests are tagged with its own id — and/or a `url` prefix), and after a write. Both write steps
+    gained `invalidateQueries` / `invalidateElements`: a `webHook` sent with anything but `GET`/`HEAD` refreshes the
+    requests to its own site by default, a completed `runServerAction` refreshes all of them by default, and either
+    can name containers instead or refresh nothing. A `writeRecord` refreshes all. Providers on screen ask again at
+    once; the rest when they are next shown. A sign-in, sign-out or change of account drops everything held. Server-driven
+    providers and RSC are untouched.
+
+  - **A `webHook` that reads can be cached** (`cache`, `staleTime`), in the same cache and under the same key as an api
+    container asking the same thing. Its declaration now lives beside it (`utility/webHookSpec`) and the authoring
+    catalog gathers it instead of keeping a copy. A `HEAD` is no longer sent with a body, which `fetch` refused.
+
+  - **Step params can pick several elements.** A new param type, `elementIds` (with an `elementType` filter), is drawn
+    in the flow editor as a picker: the matching elements of the space to add, and the picked ones as chips to remove —
+    an id no element answers to any more is kept and flagged. The value is a list of ids, so nobody types a
+    comma-separated list; `invalidateQueries.elements` and the write steps' `invalidateElements` use it, and the MCP
+    catalog says which element type each such param takes.
+
+  - The dev-tools' Store tab lists the paths a store holds with a TTL — how long ago each was written, what is left
+    of it, and a button to expire one or all of them. The query cache appears there as "Queries".
+
+  - `useApi` no longer takes `params`: nothing passed them, and a GET cannot carry a body anyway. A mock now answers
+    synchronously, without a loading frame, and a provider whose URL has not resolved asks for nothing.
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.36.0
+  - @plitzi/sdk-schema@0.36.0
+  - @plitzi/sdk-shared@0.36.0
+  - @plitzi/sdk-style@0.36.0
+
+## 0.35.10
+
+### Patch Changes
+
+- **Breaking:** the space setting that lets a published site open the dev tools is now `settings.debugMode`, and
+  `settings.devTools` is gone.
+
+  It was always the same decision the SDK and the page server call `debugMode` — whether the dev-tools panel is
+  authorized — and having a third name for it invited confusing it with `devMode`, which is a different thing: it turns a
+  deployment into a development server (the unminified bundles, request timings, and the full action trace with every
+  step's results). A space can authorize debugging for its own site; it can never make its server a development one.
+
+  A space that stored `settings.devTools` needs it moved to `settings.debugMode`; nothing reads the old key.
+
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.35.10
+  - @plitzi/sdk-schema@0.35.10
+  - @plitzi/sdk-shared@0.35.10
+  - @plitzi/sdk-style@0.35.10
+
 ## 0.35.9
 
 ### Patch Changes

package/dist/DevToolsContainer.mjs

@@ -2,58 +2,59 @@ import { useIsSelectedInstance as e } from "./instanceRegistry.mjs";
 import t from "./components/DevToolsOverlay/index.mjs";
 import n from "./DevToolsContextProvider.mjs";
 import r from "./useHydrated.mjs";
-import i from "./useRegisterRootStore.mjs";
-import a from "@plitzi/plitzi-ui/ContainerShadow";
-import o from "@plitzi/plitzi-ui/hooks/useStorage";
-import s from "clsx";
-import { useCallback as c, useRef as l, useState as u } from "react";
-import { DevStoreScopeContext as d } from "@plitzi/nexus/react";
-import f from "@plitzi/sdk-shared/theme/useTheme";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import i from "./useRegisterQueriesStore.mjs";
+import a from "./useRegisterRootStore.mjs";
+import o from "@plitzi/plitzi-ui/ContainerShadow";
+import s from "@plitzi/plitzi-ui/hooks/useStorage";
+import c from "clsx";
+import { useCallback as l, useRef as u, useState as d } from "react";
+import { DevStoreScopeContext as f } from "@plitzi/nexus/react";
+import p from "@plitzi/sdk-shared/theme/useTheme";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/DevToolsContainer.tsx
-var h = "horizontal", g = 0, _ = ({ children: _, className: v, innerClassName: y, enabled: b = !1, instanceId: x, renderMode: S = "default", devToolsStyle: C = "", devToolsStyleLink: w = "" }) => {
-	let { resolvedTheme: T } = f(), [E, D] = o("plitzi-sdk.dev-tools.orientation", h), [O, k] = o("plitzi-sdk.dev-tools.collapsed", !0), [A, j] = o("plitzi-sdk.dev-tools.tab", "logs"), [M, N] = u(), P = l(void 0);
-	P.current ||= `sdk-instance-${++g}`;
-	let F = x || P.current, I = r(), L = I ? E : h, R = e(F, b);
-	i(b);
-	let z = c((e) => D(e), [D]), B = c((e) => {
-		e && j("logs"), N(e), k(!1);
-	}, [k, j]), V = c(() => k(!0), [k]), H = c((e) => {
-		N(void 0), j(e);
-	}, [j]);
-	return b ? /* @__PURE__ */ m("div", {
-		className: s("relative flex grow overflow-auto", {
-			"flex-col": L === "horizontal",
-			"h-screen": L === "vertical"
-		}, v),
-		children: [/* @__PURE__ */ p(d, {
-			value: F,
-			children: /* @__PURE__ */ p("div", {
-				className: s("grow basis-0 flex-col overflow-auto", y),
-				children: _
+var g = "horizontal", _ = 0, v = ({ children: v, className: y, innerClassName: b, enabled: x = !1, instanceId: S, renderMode: C = "default", devToolsStyle: w = "", devToolsStyleLink: T = "" }) => {
+	let { resolvedTheme: E } = p(), [D, O] = s("plitzi-sdk.dev-tools.orientation", g), [k, A] = s("plitzi-sdk.dev-tools.collapsed", !0), [j, M] = s("plitzi-sdk.dev-tools.tab", "logs"), [N, P] = d(), F = u(void 0);
+	F.current ||= `sdk-instance-${++_}`;
+	let I = S || F.current, L = r(), R = L ? D : g, z = e(I, x);
+	a(x), i(z, I);
+	let B = l((e) => O(e), [O]), V = l((e) => {
+		e && M("logs"), P(e), A(!1);
+	}, [A, M]), H = l(() => A(!0), [A]), U = l((e) => {
+		P(void 0), M(e);
+	}, [M]);
+	return x ? /* @__PURE__ */ h("div", {
+		className: c("relative flex grow overflow-auto", {
+			"flex-col": R === "horizontal",
+			"h-screen": R === "vertical"
+		}, y),
+		children: [/* @__PURE__ */ m(f, {
+			value: I,
+			children: /* @__PURE__ */ m("div", {
+				className: c("grow basis-0 flex-col overflow-auto", b),
+				children: v
 			})
-		}), R && I && /* @__PURE__ */ m(n, { children: [S === "default" && /* @__PURE__ */ p(t, {
-			className: s({ dark: T === "dark" }),
-			collapsed: O,
-			orientation: L,
-			tabSelected: A,
-			logTypeFilter: M,
-			onOpen: B,
-			onCollapse: V,
-			onTabSelect: H,
-			onChangeOrientation: z
-		}), S === "shadow" && /* @__PURE__ */ m(a, { children: [w && /* @__PURE__ */ p(a.Link, { href: w }), /* @__PURE__ */ m(a.Content, { children: [/* @__PURE__ */ p("style", { dangerouslySetInnerHTML: { __html: C } }), /* @__PURE__ */ p(t, {
-			className: s({ dark: T === "dark" }),
-			collapsed: O,
-			orientation: L,
-			tabSelected: A,
-			logTypeFilter: M,
-			onOpen: B,
-			onCollapse: V,
-			onTabSelect: H,
-			onChangeOrientation: z
+		}), z && L && /* @__PURE__ */ h(n, { children: [C === "default" && /* @__PURE__ */ m(t, {
+			className: c({ dark: E === "dark" }),
+			collapsed: k,
+			orientation: R,
+			tabSelected: j,
+			logTypeFilter: N,
+			onOpen: V,
+			onCollapse: H,
+			onTabSelect: U,
+			onChangeOrientation: B
+		}), C === "shadow" && /* @__PURE__ */ h(o, { children: [T && /* @__PURE__ */ m(o.Link, { href: T }), /* @__PURE__ */ h(o.Content, { children: [/* @__PURE__ */ m("style", { dangerouslySetInnerHTML: { __html: w } }), /* @__PURE__ */ m(t, {
+			className: c({ dark: E === "dark" }),
+			collapsed: k,
+			orientation: R,
+			tabSelected: j,
+			logTypeFilter: N,
+			onOpen: V,
+			onCollapse: H,
+			onTabSelect: U,
+			onChangeOrientation: B
 		})] })] })] })]
-	}) : _;
+	}) : v;
 };
 //#endregion
-export { _ as default };
+export { v as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.mjs

@@ -1,59 +1,64 @@
-import e from "./helpers/mapFunctionValues.mjs";
-import t from "./helpers/renderFunctionValue.mjs";
-import { useSelectedStore as n } from "../../../../scope/useScope.mjs";
-import r from "../../../../scope/useStoreState.mjs";
-import i from "@plitzi/plitzi-ui/hooks/useStorage";
-import a from "clsx";
-import { use as o, useCallback as s, useMemo as c } from "react";
-import l from "@plitzi/sdk-shared/theme/useTheme";
-import u from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "@uiw/react-json-view";
-import * as m from "@uiw/react-json-view/vscode";
-import { emptyObject as h } from "@plitzi/sdk-shared/helpers/utils";
+import e from "./components/FreshnessPanel/index.mjs";
+import t from "./helpers/mapFunctionValues.mjs";
+import n from "./helpers/renderFunctionValue.mjs";
+import { useSelectedStore as r } from "../../../../scope/useScope.mjs";
+import i from "../../../../scope/useStoreState.mjs";
+import a from "@plitzi/plitzi-ui/hooks/useStorage";
+import o from "clsx";
+import { use as s, useCallback as c, useMemo as l } from "react";
+import u from "@plitzi/sdk-shared/theme/useTheme";
+import d from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@uiw/react-json-view";
+import * as h from "@uiw/react-json-view/vscode";
+import { emptyObject as g } from "@plitzi/sdk-shared/helpers/utils";
 //#region src/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.tsx
-var g = {
-	...m.vscodeTheme,
+var _ = {
+	...h.vscodeTheme,
 	width: "100%",
 	height: "100%",
 	overflow: "auto",
 	padding: "8px",
 	fontSize: "14px"
-}, _ = (e) => a("cursor-pointer rounded px-2 py-0.5 font-medium transition-colors", e ? "bg-violet-500/15 text-violet-600 dark:text-violet-300" : "text-zinc-500 hover:bg-zinc-200/70 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-100"), v = ({ elementSelected: a }) => {
-	let { resolvedTheme: m } = l(), { getData: v } = o(u), y = n(), [b, x] = i("plitzi-sdk.dev-tools.store.view", "own"), S = r(a ? void 0 : y, b === "merged"), C = s(() => x("own"), [x]), w = s(() => x("merged"), [x]), T = a ? v?.(`getElementDataSource-${a}`) : S, E = c(() => e(T), [T]);
-	return /* @__PURE__ */ f("div", {
+}, v = (e) => o("cursor-pointer rounded px-2 py-0.5 font-medium transition-colors", e ? "bg-violet-500/15 text-violet-600 dark:text-violet-300" : "text-zinc-500 hover:bg-zinc-200/70 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-100"), y = ({ elementSelected: o }) => {
+	let { resolvedTheme: h } = u(), { getData: y } = s(d), b = r(), [x, S] = a("plitzi-sdk.dev-tools.store.view", "own"), C = i(o ? void 0 : b, x === "merged"), w = c(() => S("own"), [S]), T = c(() => S("merged"), [S]), E = o ? y?.(`getElementDataSource-${o}`) : C, D = l(() => t(E), [E]);
+	return /* @__PURE__ */ p("div", {
 		className: "flex h-full w-full flex-col",
-		children: [!a && /* @__PURE__ */ f("div", {
-			className: "flex shrink-0 items-center gap-1 border-b border-zinc-200 px-2 py-1 text-[11px] dark:border-zinc-800",
-			children: [
-				/* @__PURE__ */ d("span", {
-					className: "mr-1 text-zinc-400 dark:text-zinc-500",
-					children: "View"
-				}),
-				/* @__PURE__ */ d("button", {
-					className: _(b === "own"),
-					onClick: C,
-					title: "Only this scope's own layer",
-					children: "Own"
-				}),
-				/* @__PURE__ */ d("button", {
-					className: _(b === "merged"),
-					onClick: w,
-					title: "Own layer merged over the parent scope chain",
-					children: "Merged"
-				})
-			]
-		}), /* @__PURE__ */ d(p, {
-			value: E ?? h,
-			style: m === "dark" ? g : void 0,
-			enableClipboard: !1,
-			indentWidth: 15,
-			collapsed: 2,
-			displayObjectSize: !1,
-			displayDataTypes: !1,
-			children: /* @__PURE__ */ d(p.String, { render: t })
-		})]
+		children: [
+			!o && /* @__PURE__ */ p("div", {
+				className: "flex shrink-0 items-center gap-1 border-b border-zinc-200 px-2 py-1 text-[11px] dark:border-zinc-800",
+				children: [
+					/* @__PURE__ */ f("span", {
+						className: "mr-1 text-zinc-400 dark:text-zinc-500",
+						children: "View"
+					}),
+					/* @__PURE__ */ f("button", {
+						className: v(x === "own"),
+						onClick: w,
+						title: "Only this scope's own layer",
+						children: "Own"
+					}),
+					/* @__PURE__ */ f("button", {
+						className: v(x === "merged"),
+						onClick: T,
+						title: "Own layer merged over the parent scope chain",
+						children: "Merged"
+					})
+				]
+			}),
+			!o && /* @__PURE__ */ f(e, { store: b }),
+			/* @__PURE__ */ f(m, {
+				value: D ?? g,
+				style: h === "dark" ? _ : void 0,
+				enableClipboard: !1,
+				indentWidth: 15,
+				collapsed: 2,
+				displayObjectSize: !1,
+				displayDataTypes: !1,
+				children: /* @__PURE__ */ f(m.String, { render: n })
+			})
+		]
 	});
 };
 //#endregion
-export { v as default };
+export { y as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/FreshnessPanel.d.ts

@@ -0,0 +1,11 @@
+import { DevStore } from '@plitzi/nexus';
+export type FreshnessPanelProps = {
+    store: DevStore | undefined;
+};
+/**
+ * The paths of the selected store that were written with a TTL: how old each one is, how long it has left, and a
+ * way to expire it — which is how a developer checks that whatever depends on it refreshes. Absent for a store that
+ * holds none, so it costs nothing to look at the others.
+ */
+declare const FreshnessPanel: ({ store }: FreshnessPanelProps) => import("react").JSX.Element | null;
+export default FreshnessPanel;

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/FreshnessPanel.mjs

@@ -0,0 +1,49 @@
+import e from "./components/FreshnessRow/index.mjs";
+import { toRows as t } from "./helpers.mjs";
+import n from "../../../../../../scope/useFreshnessRecords.mjs";
+import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/FreshnessPanel.tsx
+var l = ({ store: l }) => {
+	let u = n(l), d = Object.keys(u).length, [f, p] = o(() => Date.now());
+	i(() => l?.watchFreshness(() => p(Date.now())), [l]), i(() => {
+		if (d === 0) return;
+		let e = setInterval(() => p(Date.now()), 1e3);
+		return () => clearInterval(e);
+	}, [d]);
+	let m = a(() => t(u, f), [u, f]), h = r((e) => {
+		l?.expire(e);
+	}, [l]), g = r(() => {
+		l?.expire();
+	}, [l]);
+	return d === 0 ? null : /* @__PURE__ */ c("div", {
+		className: "shrink-0 border-b border-zinc-200 text-[11px] dark:border-zinc-800",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex items-center gap-2 px-2 py-1",
+			children: [
+				/* @__PURE__ */ s("span", {
+					className: "font-medium text-zinc-600 dark:text-zinc-300",
+					children: "TTL"
+				}),
+				/* @__PURE__ */ s("span", {
+					className: "text-zinc-400 tabular-nums dark:text-zinc-500",
+					children: d
+				}),
+				/* @__PURE__ */ s("button", {
+					className: "ml-auto cursor-pointer rounded px-1.5 text-violet-600 hover:bg-violet-500/15 dark:text-violet-300",
+					onClick: g,
+					title: "Mark every path stale now",
+					children: "Expire all"
+				})
+			]
+		}), /* @__PURE__ */ s("ul", {
+			className: "max-h-40 overflow-auto pb-1",
+			children: m.map((t) => /* @__PURE__ */ s(e, {
+				row: t,
+				onExpire: h
+			}, t.path))
+		})]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/FreshnessRow.d.ts

@@ -0,0 +1,7 @@
+import { FreshnessRowModel } from '../../helpers';
+export type FreshnessRowProps = {
+    row: FreshnessRowModel;
+    onExpire: (path: string) => void;
+};
+declare const FreshnessRow: ({ row, onExpire }: FreshnessRowProps) => import("react").JSX.Element;
+export default FreshnessRow;

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/FreshnessRow.mjs

@@ -0,0 +1,43 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/FreshnessRow.tsx
+var i = ({ row: i, onExpire: a }) => {
+	let o = t(() => a(i.path), [a, i.path]);
+	return /* @__PURE__ */ r("li", {
+		className: "flex items-center gap-2 px-2 py-0.5",
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: e("h-1.5 w-1.5 shrink-0 rounded-full", i.isStale ? "bg-zinc-400" : "bg-emerald-500"),
+				title: i.isStale ? "Stale" : "Current"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "min-w-0 grow truncate font-mono text-zinc-700 dark:text-zinc-200",
+				title: i.path,
+				children: i.path
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "shrink-0 text-zinc-400 tabular-nums dark:text-zinc-500",
+				title: "Written",
+				children: i.age
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "shrink-0 text-zinc-400 tabular-nums dark:text-zinc-500",
+				title: "TTL",
+				children: ["ttl ", i.ttl]
+			}),
+			/* @__PURE__ */ n("span", {
+				className: e("w-20 shrink-0 text-right tabular-nums", i.isStale ? "text-zinc-400 dark:text-zinc-500" : "text-emerald-600 dark:text-emerald-400"),
+				children: i.status
+			}),
+			/* @__PURE__ */ n("button", {
+				className: "shrink-0 cursor-pointer rounded px-1.5 text-violet-600 hover:bg-violet-500/15 dark:text-violet-300",
+				onClick: o,
+				title: "Mark stale now — anything listening refreshes it",
+				children: "Expire"
+			})
+		]
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FreshnessRow } from './FreshnessRow';
+export * from './FreshnessRow';
+export default FreshnessRow;

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.mjs

@@ -0,0 +1,5 @@
+import e from "./FreshnessRow.mjs";
+//#region src/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/helpers.d.ts

@@ -0,0 +1,14 @@
+import { PathFreshness } from '@plitzi/nexus';
+export type FreshnessRowModel = {
+    path: string;
+    isStale: boolean;
+    /** How long ago it was written, e.g. `12s ago`. */
+    age: string;
+    /** `18s left` while current, `stale` once it is not. */
+    status: string;
+    /** The TTL it was written with, or what was left of it when an `expire` cut it short. */
+    ttl: string;
+};
+export declare const formatDuration: (ms: number) => string;
+/** One row per record, stale ones last so what is still being served is what the panel shows first. */
+export declare const toRows: (records: Readonly<Record<string, PathFreshness>>, now: number) => FreshnessRowModel[];

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/helpers.mjs

@@ -0,0 +1,18 @@
+//#region src/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/helpers.ts
+var e = (e) => {
+	let t = Math.max(0, Math.round(e / 1e3));
+	if (t < 60) return `${t}s`;
+	let n = Math.floor(t / 60);
+	return n < 60 ? `${n}m ${t % 60}s` : `${Math.floor(n / 60)}h ${n % 60}m`;
+}, t = (t, n) => Object.entries(t).map(([t, { updatedAt: r, expiresAt: i }]) => {
+	let a = n >= i, o = Number.isFinite(i), s = "no expiry";
+	return a ? s = "stale" : o && (s = `${e(i - n)} left`), {
+		path: t,
+		isStale: a,
+		age: `${e(n - r)} ago`,
+		status: s,
+		ttl: o ? e(i - r) : "∞"
+	};
+}).sort((e, t) => Number(e.isStale) - Number(t.isStale) || e.path.localeCompare(t.path));
+//#endregion
+export { e as formatDuration, t as toRows };

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FreshnessPanel } from './FreshnessPanel';
+export * from './FreshnessPanel';
+export default FreshnessPanel;

package/dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.mjs

@@ -0,0 +1,5 @@
+import e from "./FreshnessPanel.mjs";
+//#region src/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/scope/useFreshnessRecords.d.ts

@@ -0,0 +1,3 @@
+import { DevStore, PathFreshness } from '@plitzi/nexus';
+declare const useFreshnessRecords: (store: DevStore | undefined) => Readonly<Record<string, PathFreshness>>;
+export default useFreshnessRecords;

package/dist/scope/useFreshnessRecords.mjs

@@ -0,0 +1,8 @@
+import { useCallback as e, useSyncExternalStore as t } from "react";
+//#region src/scope/useFreshnessRecords.ts
+var n = {}, r = () => () => {}, i = (i) => {
+	let a = e((e) => i ? i.watchFreshness(e) : r(), [i]), o = e(() => i ? i.getFreshnessRecords() : n, [i]);
+	return t(a, o, o);
+};
+//#endregion
+export { i as default };

package/dist/useRegisterQueriesStore.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Puts the page's cached browser requests in the dev store registry, as "Queries".
+ *
+ * The cache is a store of its own, created by no provider, so nexus never registers it. It is tagged with the
+ * instance showing the panel: the panel reads an untagged store as the app root and opens it by default. One page
+ * has one cache, so only the selected instance registers it — a second registration of the same store would drop
+ * both when either unmounts.
+ */
+declare const useRegisterQueriesStore: (enabled: boolean, instanceId: string) => void;
+export default useRegisterQueriesStore;

package/dist/useRegisterQueriesStore.mjs

@@ -0,0 +1,11 @@
+import { useEffect as e } from "react";
+import { registerDevStore as t } from "@plitzi/nexus";
+import { queryCache as n } from "@plitzi/sdk-shared/queries";
+//#region src/useRegisterQueriesStore.ts
+var r = (r, i) => {
+	e(() => {
+		if (r) return t(n.store, i, "Queries");
+	}, [r, i]);
+};
+//#endregion
+export { r as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.35.9",
+  "version": "0.36.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -478,6 +478,34 @@
       "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.mjs"
     },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/FreshnessPanel": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/FreshnessPanel.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/FreshnessPanel.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/FreshnessRow": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/FreshnessRow.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/FreshnessRow.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/components/FreshnessRow/index.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/helpers": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/helpers.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/helpers.mjs"
+    },
+    "./components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index": {
+      "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/components/FreshnessPanel/index.mjs"
+    },
     "./components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues": {
       "types": "./dist/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.mjs"
@@ -726,6 +754,10 @@
       "types": "./dist/scope/useDevStores.d.ts",
       "import": "./dist/scope/useDevStores.mjs"
     },
+    "./scope/useFreshnessRecords": {
+      "types": "./dist/scope/useFreshnessRecords.d.ts",
+      "import": "./dist/scope/useFreshnessRecords.mjs"
+    },
     "./scope/useScope": {
       "types": "./dist/scope/useScope.d.ts",
       "import": "./dist/scope/useScope.mjs"
@@ -738,6 +770,10 @@
       "types": "./dist/useHydrated.d.ts",
       "import": "./dist/useHydrated.mjs"
     },
+    "./useRegisterQueriesStore": {
+      "types": "./dist/useRegisterQueriesStore.d.ts",
+      "import": "./dist/useRegisterQueriesStore.mjs"
+    },
     "./useRegisterRootStore": {
       "types": "./dist/useRegisterRootStore.d.ts",
       "import": "./dist/useRegisterRootStore.mjs"
@@ -769,12 +805,12 @@
     "react-dom": "^19"
   },
   "dependencies": {
-    "@plitzi/nexus": "^1.1.4",
+    "@plitzi/nexus": "^1.2.0",
     "@plitzi/plitzi-ui": "^1.6.21",
-    "@plitzi/sdk-navigation": "0.35.9",
-    "@plitzi/sdk-schema": "0.35.9",
-    "@plitzi/sdk-shared": "0.35.9",
-    "@plitzi/sdk-style": "0.35.9",
+    "@plitzi/sdk-navigation": "0.36.0",
+    "@plitzi/sdk-schema": "0.36.0",
+    "@plitzi/sdk-shared": "0.36.0",
+    "@plitzi/sdk-style": "0.36.0",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }