@plitzi/sdk-dev-tools 0.36.1 → 0.36.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @plitzi/sdk-dev-tools
 
+## 0.36.2
+
+### Patch Changes
+
+- v0.36.2
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.36.2
+  - @plitzi/sdk-schema@0.36.2
+  - @plitzi/sdk-shared@0.36.2
+  - @plitzi/sdk-style@0.36.2
+
 ## 0.36.1
 
 ### Patch Changes

package/dist/DevToolsContainer.mjs

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

package/dist/DevToolsRoot.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type DevToolsRootProps = {
+    children: ReactNode;
+};
+/**
+ * Renders the panel in a React root of its own, inside a node the page's root leaves alone.
+ *
+ * In the page's root, every render of the panel was a commit of the page: the tracing tab recorded the panel profiling
+ * itself, a log arriving re-rendered through the app's scheduler, and what a tab switch cost read higher with the
+ * panel open than without it. In its own root the panel's work is its own.
+ *
+ * The node stays where the panel always sat — the flex sibling of the space, which is how it docks and what the
+ * collapsed badge positions itself against — so only the React tree moves, not the layout. What the panel reads from
+ * the page's providers is carried over: the root store, plitzi-ui's theme, the theme scope, and the two plugin
+ * registries.
+ */
+declare const DevToolsRoot: ({ children }: DevToolsRootProps) => import("react").JSX.Element;
+export default DevToolsRoot;

package/dist/DevToolsRoot.mjs

@@ -0,0 +1,43 @@
+import { use as e, useContext as t, useLayoutEffect as n, useRef as r } from "react";
+import { StoreContext as i } from "@plitzi/nexus/react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@plitzi/sdk-plugins/PluginsContext";
+import s from "@plitzi/sdk-shared/elements/ComponentContext";
+import { ThemeContext as c } from "@plitzi/plitzi-ui/Provider";
+import { createRoot as l } from "react-dom/client";
+import u from "@plitzi/sdk-shared/theme/ThemeScope";
+//#region src/DevToolsRoot.tsx
+var d = { display: "contents" }, f = ({ children: f }) => {
+	let p = r(null), m = r(void 0), h = r(void 0), g = t(i), _ = e(u), v = e(o), y = e(s), b = e(c);
+	return n(() => {
+		let e = p.current;
+		if (e) return clearTimeout(h.current), m.current ??= l(e), () => {
+			let e = m.current;
+			h.current = setTimeout(() => {
+				e?.unmount(), m.current === e && (m.current = void 0);
+			}, 0);
+		};
+	}, []), n(() => {
+		m.current?.render(/* @__PURE__ */ a(i, {
+			value: g,
+			children: /* @__PURE__ */ a(c, {
+				value: b,
+				children: /* @__PURE__ */ a(u, {
+					value: _,
+					children: /* @__PURE__ */ a(o, {
+						value: v,
+						children: /* @__PURE__ */ a(s, {
+							value: y,
+							children: f
+						})
+					})
+				})
+			})
+		}));
+	}), /* @__PURE__ */ a("div", {
+		ref: p,
+		style: d
+	});
+};
+//#endregion
+export { f as default };

package/dist/components/DevToolsPanel/DevToolsBody.mjs

@@ -1,42 +1,44 @@
 import e from "./tabs/ActionsViewer/index.mjs";
-import t from "./tabs/ElementsViewer/index.mjs";
-import n from "./tabs/HistoryViewer/index.mjs";
-import r from "./tabs/Logs/index.mjs";
-import i from "./tabs/PluginsViewer/PluginsViewer.mjs";
-import a from "./tabs/StoreViewer/index.mjs";
-import o from "./tabs/TracingViewer/TracingViewer.mjs";
-import s from "./tabs/VariablesViewer/index.mjs";
-import c from "clsx";
-import { use as l } from "react";
-import u from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import t from "./tabs/CacheViewer/index.mjs";
+import n from "./tabs/ElementsViewer/index.mjs";
+import r from "./tabs/HistoryViewer/index.mjs";
+import i from "./tabs/Logs/index.mjs";
+import a from "./tabs/PluginsViewer/PluginsViewer.mjs";
+import o from "./tabs/StoreViewer/index.mjs";
+import s from "./tabs/TracingViewer/TracingViewer.mjs";
+import c from "./tabs/VariablesViewer/index.mjs";
+import l from "clsx";
+import { use as u } from "react";
+import d from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/DevToolsBody.tsx
-var p = ({ className: p, tabSelected: m, orientation: h, logTypeFilter: g, elementSelected: _, onSelectElement: v }) => {
-	let { logs: y, clearLogs: b } = l(u);
-	return /* @__PURE__ */ d("div", {
-		className: c("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", p),
-		children: /* @__PURE__ */ f("div", {
+var m = ({ className: m, tabSelected: h, orientation: g, logTypeFilter: _, elementSelected: v, onSelectElement: y }) => {
+	let { logs: b, clearLogs: x } = u(d);
+	return /* @__PURE__ */ f("div", {
+		className: l("flex h-full w-full grow overflow-auto bg-white dark:bg-zinc-900", m),
+		children: /* @__PURE__ */ p("div", {
 			className: "flex w-full flex-col",
 			children: [
-				m === "logs" && /* @__PURE__ */ d(r, {
-					items: y,
-					orientation: h,
-					logTypeFilter: g,
-					onClear: b
+				h === "logs" && /* @__PURE__ */ f(i, {
+					items: b,
+					orientation: g,
+					logTypeFilter: _,
+					onClear: x
 				}),
-				m === "store" && /* @__PURE__ */ d(a, { elementSelected: _ }),
-				m === "history" && /* @__PURE__ */ d(n, {}),
-				m === "variables" && /* @__PURE__ */ d(s, {}),
-				m === "elements" && /* @__PURE__ */ d(t, {
-					elementSelected: _,
-					onSelectElement: v
+				h === "store" && /* @__PURE__ */ f(o, { elementSelected: v }),
+				h === "cache" && /* @__PURE__ */ f(t, {}),
+				h === "history" && /* @__PURE__ */ f(r, {}),
+				h === "variables" && /* @__PURE__ */ f(c, {}),
+				h === "elements" && /* @__PURE__ */ f(n, {
+					elementSelected: v,
+					onSelectElement: y
 				}),
-				m === "plugins" && /* @__PURE__ */ d(i, {}),
-				m === "tracing" && /* @__PURE__ */ d(o, {}),
-				m === "actions" && /* @__PURE__ */ d(e, {})
+				h === "plugins" && /* @__PURE__ */ f(a, {}),
+				h === "tracing" && /* @__PURE__ */ f(s, {}),
+				h === "actions" && /* @__PURE__ */ f(e, {})
 			]
 		})
 	});
 };
 //#endregion
-export { p as default };
+export { m as default };

package/dist/components/DevToolsPanel/DevToolsHeader.mjs

@@ -16,6 +16,11 @@ var s = [
 		label: "Store",
 		icon: "fa-solid fa-database"
 	},
+	{
+		id: "cache",
+		label: "Cache",
+		icon: "fa-solid fa-hourglass-half"
+	},
 	{
 		id: "history",
 		label: "History",

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunDetail/RunDetail.mjs

@@ -1,6 +1,6 @@
-import { MODE_LABEL as e, failedStep as t, formatMs as n, formatTime as r, isLive as i, runDuration as a, statusTone as o, traceResultOf as s } from "../../helpers.mjs";
-import c from "../FlowTimeline/index.mjs";
-import l from "../PayloadView/index.mjs";
+import e from "../../../../../PayloadView/index.mjs";
+import { MODE_LABEL as t, failedStep as n, formatMs as r, formatTime as i, isLive as a, runDuration as o, statusTone as s, traceResultOf as c } from "../../helpers.mjs";
+import l from "../FlowTimeline/index.mjs";
 import u from "clsx";
 import { useMemo as d } from "react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -12,7 +12,7 @@ var h = {
 	warning: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
 	custom: "bg-zinc-500/15 text-zinc-500 dark:text-zinc-400"
 }, g = "This page was sent what the flow DID, not what each step read or answered. Open the action in the builder, or run the deployment in dev mode, to inspect a step.", _ = "The server did not send the steps for this run: the action is behind a session, or this page is not authorized to debug it.", v = "The flow is still running. Its steps arrive with the answer.", y = ({ run: y, selectedStepId: b, onSelectStep: x }) => {
-	let S = t(y.steps), C = a(y), w = d(() => b === void 0 ? void 0 : s(y.trace, b), [y.trace, b]);
+	let S = n(y.steps), C = o(y), w = d(() => b === void 0 ? void 0 : c(y.trace, b), [y.trace, b]);
 	return /* @__PURE__ */ m(f, { children: [
 		/* @__PURE__ */ m("div", {
 			className: "flex items-center gap-1.5",
@@ -20,7 +20,7 @@ var h = {
 				className: "truncate text-xs font-medium text-zinc-700 dark:text-zinc-100",
 				children: y.actionId || "(no action named)"
 			}), /* @__PURE__ */ p("span", {
-				className: u("shrink-0 rounded px-1 py-0.5 text-[9px]", h[o(y.status)]),
+				className: u("shrink-0 rounded px-1 py-0.5 text-[9px]", h[s(y.status)]),
 				children: y.reason ?? y.status
 			})]
 		}),
@@ -40,9 +40,9 @@ var h = {
 		}),
 		y.steps === void 0 && /* @__PURE__ */ p("span", {
 			className: "text-zinc-400 italic dark:text-zinc-500",
-			children: i(y) ? v : _
+			children: a(y) ? v : _
 		}),
-		y.steps !== void 0 && /* @__PURE__ */ p(c, {
+		y.steps !== void 0 && /* @__PURE__ */ p(l, {
 			steps: y.steps,
 			selectedStepId: b,
 			onSelectStep: x
@@ -53,7 +53,7 @@ var h = {
 		}),
 		w !== void 0 && /* @__PURE__ */ p("div", {
 			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
-			children: /* @__PURE__ */ p(l, { value: w })
+			children: /* @__PURE__ */ p(e, { value: w })
 		}),
 		/* @__PURE__ */ p("div", {
 			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
@@ -66,7 +66,7 @@ var h = {
 				children: "Mode"
 			}), /* @__PURE__ */ p("span", {
 				className: "text-zinc-700 dark:text-zinc-200",
-				children: e[y.mode]
+				children: t[y.mode]
 			})]
 		}),
 		/* @__PURE__ */ m("div", {
@@ -76,7 +76,7 @@ var h = {
 				children: "Started"
 			}), /* @__PURE__ */ p("span", {
 				className: "text-zinc-700 tabular-nums dark:text-zinc-200",
-				children: r(y.startedAt)
+				children: i(y.startedAt)
 			})]
 		}),
 		/* @__PURE__ */ m("div", {
@@ -86,7 +86,7 @@ var h = {
 				children: "Took"
 			}), /* @__PURE__ */ p("span", {
 				className: "text-zinc-700 tabular-nums dark:text-zinc-200",
-				children: C === void 0 ? "still running" : n(C)
+				children: C === void 0 ? "still running" : r(C)
 			})]
 		}),
 		y.elementId !== void 0 && /* @__PURE__ */ m("div", {
@@ -114,14 +114,14 @@ var h = {
 			children: "Input"
 		}), /* @__PURE__ */ p("div", {
 			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
-			children: /* @__PURE__ */ p(l, { value: y.input })
+			children: /* @__PURE__ */ p(e, { value: y.input })
 		})] }),
 		y.output !== void 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
 			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
 			children: "Output"
 		}), /* @__PURE__ */ p("div", {
 			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
-			children: /* @__PURE__ */ p(l, { value: y.output })
+			children: /* @__PURE__ */ p(e, { value: y.output })
 		})] }),
 		y.progress.length > 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
 			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
@@ -132,7 +132,7 @@ var h = {
 			]
 		}), /* @__PURE__ */ p("div", {
 			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
-			children: /* @__PURE__ */ p(l, { value: y.progress })
+			children: /* @__PURE__ */ p(e, { value: y.progress })
 		})] })
 	] });
 };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/helpers.d.ts

@@ -5,7 +5,6 @@ export type RunFilter = 'all' | 'live' | 'failed';
 export type StatusTone = 'danger' | 'warning' | 'success' | 'info' | 'custom';
 /** Still happening: no end time, and the step that started it still holds the handle. */
 export declare const isLive: (run: ActionRunEntry) => boolean;
-export declare const hasFailed: (run: ActionRunEntry) => boolean;
 export declare const runDuration: (run: ActionRunEntry) => number | undefined;
 export declare const formatMs: (ms: number) => string;
 export declare const formatTime: (value: number) => string;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/helpers.mjs

@@ -62,4 +62,4 @@ var e = (e) => e.endedAt === void 0, t = (e) => e.status === "failed" || e.statu
 	return typeof n == "string" ? n : void 0;
 }, y = (e, t) => e?.find((e) => v(e) === t)?.result;
 //#endregion
-export { f as MODE_ICON, d as MODE_LABEL, u as STEP_BAR, l as STEP_ICON, m as failedStep, g as filterRuns, r as formatMs, i as formatTime, t as hasFailed, e as isLive, h as matchesQuery, n as runDuration, o as statusTone, _ as stepBars, p as stepCount, c as stepTone, y as traceResultOf };
+export { f as MODE_ICON, d as MODE_LABEL, u as STEP_BAR, l as STEP_ICON, m as failedStep, g as filterRuns, r as formatMs, i as formatTime, e as isLive, h as matchesQuery, n as runDuration, o as statusTone, _ as stepBars, p as stepCount, c as stepTone, y as traceResultOf };

package/dist/components/DevToolsPanel/tabs/CacheViewer/CacheViewer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Everything this page is keeping, and for how much longer.
+ *
+ * Its own tab rather than a strip above the state tree, because the two answer different questions. The tree is the
+ * shape of one store; this is "what is cached right now" across every store of the instance — and the store holding a
+ * TTL is rarely the one being looked at, since a provider's answers live in the query cache and not in its own scope.
+ *
+ * Everything a row says is on screen: no tooltips, a bar for what is left of the life it was given, and the value it
+ * holds one click away, so checking a cache never means going somewhere else to look at it.
+ */
+declare const CacheViewer: () => import("react").JSX.Element;
+export default CacheViewer;

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

@@ -0,0 +1,91 @@
+import e from "./components/CacheRow/index.mjs";
+import t, { forgetQueryPath as n } from "../../../../freshness/describeQueryPath.mjs";
+import r from "../../../../freshness/useFreshnessByStore.mjs";
+import i from "../../../../freshness/useSecondsClock.mjs";
+import { toRows as a } from "../../../../freshness/rows.mjs";
+import { rootKeysOf as o, storeLabel as s } from "../../../../scope/helpers.mjs";
+import { useInstanceStores as c } from "../../../../scope/useScope.mjs";
+import l from "clsx";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/CacheViewer/CacheViewer.tsx
+var h = () => {
+	let h = c(), g = r(h), _ = d(() => g.reduce((e, t) => e + Object.keys(t.records).length, 0), [g]), v = i(_ > 0), y = d(() => o(h), [h]), b = u((e) => s(e.entry, y), [y]), x = d(() => a(g, b, v, t), [
+		g,
+		b,
+		v
+	]), [S, C] = f(""), [w, T] = f(!1), [E, D] = f(void 0), O = d(() => {
+		let e = S.trim().toLowerCase();
+		return x.filter((t) => w && !t.isStale ? !1 : !e || t.label.toLowerCase().includes(e) || t.storeLabel.toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e)));
+	}, [
+		x,
+		S,
+		w
+	]), k = d(() => {
+		let e = O.find((e) => e.key === E);
+		if (e) return g.find((t) => t.entry.uid === e.uid)?.entry.store.getPath(e.path);
+	}, [
+		O,
+		E,
+		g
+	]), A = u((e) => D((t) => t === e ? void 0 : e), []), j = u(() => T((e) => !e), []), M = u((e, t) => {
+		g.find((t) => t.entry.uid === e)?.entry.store.expire(t);
+	}, [g]), N = u((e, t) => {
+		let r = g.find((t) => t.entry.uid === e)?.entry;
+		r && !n(r.store, t) && r.store.setState(t, void 0, { unmount: !0 });
+	}, [g]), P = u(() => g.forEach((e) => e.entry.store.expire()), [g]);
+	return /* @__PURE__ */ m("div", {
+		className: "flex h-full w-full flex-col text-[11px]",
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex shrink-0 items-center gap-2 border-b border-zinc-200 px-2 py-1 dark:border-zinc-800",
+			children: [
+				/* @__PURE__ */ p("span", {
+					className: "font-medium text-zinc-600 dark:text-zinc-300",
+					children: "Cached"
+				}),
+				/* @__PURE__ */ p("span", {
+					className: "text-zinc-500 tabular-nums dark:text-zinc-400",
+					children: _
+				}),
+				/* @__PURE__ */ p("input", {
+					className: "min-w-0 grow rounded border border-zinc-200 bg-white px-1.5 py-0.5 text-zinc-700 outline-none placeholder:text-zinc-400 focus:border-violet-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500",
+					value: S,
+					placeholder: "Filter by URL, store or tag",
+					onChange: (e) => C(e.target.value)
+				}),
+				/* @__PURE__ */ p("button", {
+					className: l("shrink-0 cursor-pointer rounded px-1.5 py-0.5 font-medium transition-colors", w ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"),
+					onClick: j,
+					children: "Stale only"
+				}),
+				/* @__PURE__ */ p("button", {
+					className: "shrink-0 cursor-pointer rounded px-1.5 py-0.5 text-violet-600 hover:bg-violet-500/15 dark:text-violet-400",
+					onClick: P,
+					children: "Expire all"
+				})
+			]
+		}), O.length === 0 ? /* @__PURE__ */ m("div", {
+			className: "flex grow flex-col items-center justify-center gap-2 px-6 text-center text-zinc-500 dark:text-zinc-400",
+			children: [
+				/* @__PURE__ */ p("i", { className: "fa-solid fa-database text-3xl opacity-20" }),
+				/* @__PURE__ */ p("span", { children: _ === 0 ? "Nothing on this page is cached" : "Nothing matches the filter" }),
+				_ === 0 && /* @__PURE__ */ p("span", {
+					className: "max-w-80 text-[10px]",
+					children: "A path appears here once something writes it with a time to live — a provider does that when its author turns its cache on."
+				})
+			]
+		}) : /* @__PURE__ */ p("ul", {
+			className: "grow overflow-auto",
+			children: O.map((t) => /* @__PURE__ */ p(e, {
+				row: t,
+				isOpen: t.key === E,
+				value: t.key === E ? k : void 0,
+				onToggle: A,
+				onExpire: M,
+				onForget: N
+			}, t.key))
+		})]
+	});
+};
+//#endregion
+export { h as default };

package/dist/components/DevToolsPanel/tabs/CacheViewer/components/CacheRow/CacheRow.d.ts

@@ -0,0 +1,16 @@
+import { FreshnessRowModel } from '../../../../../../freshness';
+export type CacheRowProps = {
+    row: FreshnessRowModel;
+    /** Open rows show what the path holds, so a reader never has to go and find it in the state tree. */
+    isOpen: boolean;
+    value: unknown;
+    onToggle: (key: string) => void;
+    onExpire: (uid: string, path: string) => void;
+    onForget: (uid: string, path: string) => void;
+};
+/**
+ * One cached path, said in full and on screen: which store it is in, what it stands for, how long it has left and how
+ * much of its life that is. Nothing here is a tooltip — the whole point of the tab is that a glance answers it.
+ */
+declare const CacheRow: ({ row, isOpen, value, onToggle, onExpire, onForget }: CacheRowProps) => import("react").JSX.Element;
+export default CacheRow;

package/dist/components/DevToolsPanel/tabs/CacheViewer/components/CacheRow/CacheRow.mjs

@@ -0,0 +1,87 @@
+import e from "../../../../../PayloadView/index.mjs";
+import t from "clsx";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/CacheViewer/components/CacheRow/CacheRow.tsx
+var a = ({ row: a, isOpen: o, value: s, onToggle: c, onExpire: l, onForget: u }) => {
+	let d = n(() => c(a.key), [c, a.key]), f = n(() => l(a.uid, a.path), [
+		l,
+		a.uid,
+		a.path
+	]), p = n(() => u(a.uid, a.path), [
+		u,
+		a.uid,
+		a.path
+	]);
+	return /* @__PURE__ */ i("li", {
+		className: "border-b border-zinc-100 last:border-0 dark:border-zinc-800",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex items-center gap-2 px-2 py-1.5",
+				children: [
+					/* @__PURE__ */ i("button", {
+						className: "flex min-w-0 grow cursor-pointer items-center gap-2 text-left",
+						onClick: d,
+						"aria-expanded": o,
+						children: [
+							/* @__PURE__ */ r("i", { className: t("fa-solid w-2 shrink-0 text-[9px] text-zinc-400 dark:text-zinc-500", o ? "fa-chevron-down" : "fa-chevron-right") }),
+							/* @__PURE__ */ r("span", {
+								className: "shrink-0 rounded-sm bg-zinc-100 px-1 text-[9px] text-zinc-500 uppercase dark:bg-zinc-800 dark:text-zinc-400",
+								children: a.storeLabel
+							}),
+							/* @__PURE__ */ r("span", {
+								className: "min-w-0 grow truncate font-mono text-[11px] text-zinc-700 dark:text-zinc-100",
+								children: a.label
+							}),
+							a.tags.map((e) => /* @__PURE__ */ r("span", {
+								className: "shrink-0 rounded bg-violet-500/15 px-1.5 text-[10px] text-violet-600 dark:text-violet-400",
+								children: e
+							}, e))
+						]
+					}),
+					/* @__PURE__ */ r("span", {
+						className: t("w-24 shrink-0 rounded px-1.5 py-0.5 text-center text-[11px] font-medium tabular-nums", a.isStale ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"),
+						children: a.status
+					}),
+					a.inUse === !1 ? /* @__PURE__ */ r("button", {
+						className: "w-14 shrink-0 cursor-pointer rounded px-1.5 text-[11px] text-violet-600 hover:bg-violet-500/15 dark:text-violet-400",
+						onClick: p,
+						children: "Forget"
+					}) : /* @__PURE__ */ r("button", {
+						className: "w-14 shrink-0 cursor-pointer rounded px-1.5 text-[11px] text-violet-600 hover:bg-violet-500/15 dark:text-violet-400",
+						onClick: f,
+						children: "Expire"
+					})
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex items-center gap-2 px-2 pb-1.5 pl-6",
+				children: [/* @__PURE__ */ r("span", {
+					className: "h-1 min-w-0 grow overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800",
+					children: /* @__PURE__ */ r("span", {
+						className: t("block h-full rounded-full", a.isStale ? "bg-amber-500/60" : "bg-emerald-500/80"),
+						style: { width: `${Math.round(a.progress * 100)}%` }
+					})
+				}), /* @__PURE__ */ i("span", {
+					className: "shrink-0 text-[10px] text-zinc-500 tabular-nums dark:text-zinc-400",
+					children: [
+						"written ",
+						a.age,
+						" · ttl ",
+						a.ttl,
+						a.inUse === !1 && ` · nothing renders it${a.kept ? ` · ${a.kept}` : ""}`
+					]
+				})]
+			}),
+			o && /* @__PURE__ */ i("div", {
+				className: "max-h-56 overflow-auto border-t border-zinc-100 bg-zinc-50 px-2 py-1 dark:border-zinc-800 dark:bg-zinc-800/40",
+				children: [/* @__PURE__ */ r("div", {
+					className: "pb-1 font-mono text-[10px] text-zinc-500 dark:text-zinc-400",
+					children: a.path
+				}), /* @__PURE__ */ r(e, { value: s })]
+			})
+		]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/CacheViewer/components/CacheRow/index.d.ts

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

package/dist/components/DevToolsPanel/tabs/CacheViewer/components/CacheRow/index.mjs

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

package/dist/components/DevToolsPanel/tabs/CacheViewer/index.d.ts

@@ -0,0 +1,2 @@
+import { default as CacheViewer } from './CacheViewer';
+export default CacheViewer;

package/dist/components/DevToolsPanel/tabs/CacheViewer/index.mjs

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