@plitzi/sdk-shared 0.36.0 → 0.36.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @plitzi/sdk-shared
 
+## 0.36.2
+
+### Patch Changes
+
+- v0.36.2
+
+## 0.36.1
+
+### Patch Changes
+
+- v0.36.1
+
 ## 0.36.0
 
 ### Minor Changes

package/dist/authoring/builder.d.ts

@@ -1,6 +1,13 @@
 import { ParamSpec } from './paramSpec';
 import { InteractionCallback, InteractionCallbackContext, InteractionCallbackParam, InteractionCallbackPreviews, InteractionCallbackType } from '../types';
-export declare const toBuilderParams: (spec: ParamSpec) => Record<string, InteractionCallbackParam>;
+/**
+ * Converted once per declaration and shared.
+ *
+ * Declarations are module constants, and every element builds its own `setState` / `toggleState` from the same two
+ * on every mount — so converting here each time, a regex per param, was a measurable share of mounting a page.
+ * Callers spread what they change, which is why the shared object is read-only.
+ */
+export declare const toBuilderParams: (spec: ParamSpec) => Readonly<Record<string, InteractionCallbackParam>>;
 /** What a declared action carries, whichever kind of action it is. */
 export interface BuiltinActionSpec {
     title: string;

package/dist/authoring/builder.mjs

@@ -18,14 +18,17 @@ var e = {
 	...r.when ? { when: r.when } : {},
 	...r.canBind === void 0 ? {} : { canBind: r.canBind },
 	...r.elementType === void 0 ? {} : { elementType: r.elementType }
-}), r = (e) => Object.fromEntries(Object.entries(e).map(([e, t]) => [e, n(e, t)])), i = (e, t, n, i = {}) => ({
+}), r = /* @__PURE__ */ new WeakMap(), i = (e) => {
+	let t = r.get(e);
+	return t || (t = Object.fromEntries(Object.entries(e).map(([e, t]) => [e, n(e, t)])), r.set(e, t)), t;
+}, a = (e, t, n, r = {}) => ({
 	action: e,
 	title: t.title,
 	type: t.type ?? "globalCallback",
 	callback: n,
 	preview: t.preview ?? {},
-	params: r(t.params),
-	...i
-}), a = (e, t, n = {}) => Object.fromEntries(Object.keys(e).map((r) => [r, i(r, e[r], t[r], n[r] ?? {})]));
+	params: i(t.params),
+	...r
+}), o = (e, t, n = {}) => Object.fromEntries(Object.keys(e).map((r) => [r, a(r, e[r], t[r], n[r] ?? {})]));
 //#endregion
-export { r as toBuilderParams, i as toInteractionCallback, a as toInteractionCallbacks };
+export { i as toBuilderParams, a as toInteractionCallback, o as toInteractionCallbacks };

package/dist/dataSource/hooks/useRegisterSource.mjs

@@ -15,7 +15,7 @@ var i = ({ id: i = "", source: a, name: o, fields: s = [] }) => {
 			}
 		}), () => l(`sources.${u}`, void 0, { unmount: !0 });
 	}, [u, a]), t(() => {
-		a && l(`sources.${u}.meta.fields`, s);
+		a && l(`sources.${u}.meta.fields`, s, { raw: !0 });
 	}, [
 		s,
 		a,

package/dist/hooks/index.d.ts

@@ -1,6 +1,7 @@
 import { default as useFontHead } from './useFontHead';
 import { default as useNetwork } from './useNetwork';
 import { default as usePlitziServiceContext } from './usePlitziServiceContext';
+import { default as useStableValue } from './useStableValue';
 export * from './useNetwork';
 export * from './usePlitziServiceContext';
-export { useFontHead, useNetwork, usePlitziServiceContext };
+export { useFontHead, useNetwork, usePlitziServiceContext, useStableValue };

package/dist/hooks/index.mjs

@@ -1,4 +1,5 @@
 import e from "./useFontHead.mjs";
 import t from "./useNetwork.mjs";
 import n, { PlitziServiceContext as r, PlitziServiceProvider as i } from "./usePlitziServiceContext.mjs";
-export { r as PlitziServiceContext, i as PlitziServiceProvider, e as useFontHead, t as useNetwork, n as usePlitziServiceContext };
+import a from "./useStableValue.mjs";
+export { r as PlitziServiceContext, i as PlitziServiceProvider, e as useFontHead, t as useNetwork, n as usePlitziServiceContext, a as useStableValue };

package/dist/hooks/useStableValue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The previous value, as long as the new one has the same content.
+ *
+ * For values rebuilt on every render that are then published — written to a store, handed down as a prop, compared by
+ * reference by whoever reads them. A route's params come back as a new `{}` on every navigation; published as they
+ * come, every element subscribed to them rendered again for a value that had not changed.
+ *
+ * The ref is written during render, and only ever to a value equal in content to what the render was given, so a
+ * render React throws away leaves nothing observable behind.
+ */
+declare const useStableValue: <T>(value: T) => T;
+export default useStableValue;

package/dist/hooks/useStableValue.mjs

@@ -0,0 +1,9 @@
+import { useRef as e } from "react";
+import t from "@plitzi/plitzi-ui/utils/deepEqual";
+//#region src/hooks/useStableValue.ts
+var n = (n) => {
+	let r = e(n);
+	return r.current !== n && !t(r.current, n) && (r.current = n), r.current;
+};
+//#endregion
+export { n as default };

package/dist/index.mjs

@@ -32,33 +32,35 @@ import oe from "./elements/ComponentContext.mjs";
 import se from "./hooks/useFontHead.mjs";
 import ce from "./hooks/useNetwork.mjs";
 import le, { PlitziServiceContext as ue, PlitziServiceProvider as de } from "./hooks/usePlitziServiceContext.mjs";
-import { StyleVariableCategory as fe } from "./types/StyleTypes.mjs";
-import pe, { EMPTY_STYLE_SCHEMA as me, StyleBindingsAllowed as he, baseDefaultValue as ge, inheritableAttributesBase as _e } from "./style/styleConstants.mjs";
-import { fontLinkAssets as ve } from "./style/fontAssets.mjs";
-import { SYSTEM_FONTS as ye, availableFonts as be, familiesInCss as xe, fontFamilyStack as Se, fontUrlResolver as Ce, fontsToHead as we, googleCss2Url as Te, googleTextSubsetUrl as Ee, isSafeFontUrl as De, primaryFamily as Oe } from "./style/fonts.mjs";
-import { FontValidationError as ke, parseSpaceFont as Ae } from "./style/fontValidation.mjs";
-import { fallbackForFamily as je, fontsFromCss as Me } from "./style/fontsFromCss.mjs";
-import Ne from "./schema/SchemaContext.mjs";
-import { EMPTY_SCHEMA as Pe, VARIABLE_REGEX as Fe } from "./schema/schemaConstants.mjs";
-import { collectServerElements as Ie, hasServerElements as Le } from "./schema/serverElements.mjs";
-import Re from "./network/NetworkContext.mjs";
-import ze from "./network/NetworkInternalContext.mjs";
-import { SpaceEvents as Be, spaceEventSchemas as Ve, validateSpaceEvent as He } from "./network/spaceEvents.mjs";
-import Ue from "./network/graphql/builder/Mutations/index.mjs";
-import We from "./network/graphql/builder/Queries/index.mjs";
-import Ge from "./network/graphql/builder/Subscriptions/index.mjs";
-import Ke from "./network/graphql/sdk/Mutations/index.mjs";
-import qe from "./network/graphql/sdk/Queries/index.mjs";
-import Je from "./segments/SegmentsContext.mjs";
-import Ye, { RTEvent as Xe, RTEventCloseCode as Ze, getInstance as Qe, isRTEvent as $e, setInstance as et } from "./websockets/RTCodec.mjs";
-import { THEME_CLASSES as tt, THEME_COOKIE_NAME as nt, applyThemeClass as rt, isTheme as it, readThemeCookie as at, themeFromCookies as ot, writeThemeCookie as st } from "./theme/themeCookie.mjs";
-import ct, { createThemeState as lt, createThemeStore as ut, resolveScheme as dt, setAreaTheme as ft, setMachineScheme as pt, setThemeMode as mt, themeFor as ht } from "./theme/themeStore.mjs";
-import { useThemeStore as gt } from "./theme/ThemeScope.mjs";
-import _t from "./theme/ThemeProvider.mjs";
-import vt, { SPACE_THEME_AREA as yt } from "./theme/useTheme.mjs";
-import bt from "./server/actions/useActionsSync.mjs";
-import xt, { currentRscLocation as St, rscDataPath as Ct } from "./server/rsc/refreshRsc.mjs";
-import wt from "./server/rsc/useRscRefresh.mjs";
-import Tt from "./server/rsc/useRscSync.mjs";
-import { runtimeStatePersist as Et } from "./state/runtimeStatePersist.mjs";
-export { d as BODYLESS_METHODS, l as BuilderContext, Ue as BuilderMutations, We as BuilderQueries, f as CONNECTOR_HTTP_METHODS, oe as ComponentContext, p as DEFAULT_READ_ENDPOINT, ee as DevToolsContext, m as EMPTY_RESPONSE_METHODS, Pe as EMPTY_SCHEMA, me as EMPTY_STYLE_SCHEMA, ke as FontValidationError, Re as NetworkContext, ze as NetworkInternalContext, I as ParamsFromURL, re as PlitziConsole, ue as PlitziServiceContext, de as PlitziServiceProvider, h as READ_ENDPOINT_NAMES, Ye as RTCodec, Xe as RTEvent, Ze as RTEventCloseCode, yt as SPACE_THEME_AREA, ye as SYSTEM_FONTS, Ne as SchemaContext, Ke as SdkMutations, qe as SdkQueries, Je as SegmentsContext, Ge as SpaceEventSubscription, Be as SpaceEvents, he as StyleBindingsAllowed, fe as StyleVariableCategory, tt as THEME_CLASSES, nt as THEME_COOKIE_NAME, _t as ThemeProvider, Fe as VARIABLE_REGEX, g as WRITE_ENDPOINT_NAMES, rt as applyThemeClass, e as authFailureFromResponse, be as availableFonts, ge as baseDefaultValue, Ie as collectServerElements, y as connectorPresets, _ as connectorTokens, u as contexts, i as createAuthFailureLink, ie as createStoreDevToolsLogger, K as createStripTypenameLink, lt as createThemeState, ut as createThemeStore, St as currentRscLocation, te as debugCookieName, L as delay, G as disableReactDevTools, b as emptyManifest, R as emptyObject, F as evaluateRuleGroup, je as fallbackForFamily, xe as familiesInCss, S as fetchManifest, a as filters, Se as fontFamilyStack, ve as fontLinkAssets, Ce as fontUrlResolver, Me as fontsFromCss, we as fontsToHead, T as formatDate, E as formatDateUTC, D as formatFromNow, O as formatUTCToLocal, C as generateFacade, X as getBindingsDetails, v as getConnectorTokens, z as getDisplayName, k as getDurationMs, Qe as getInstance, B as getKeyDecoded, V as getPathsFromObeject, Z as getSourceName, Te as googleCss2Url, Ee as googleTextSubsetUrl, Le as hasServerElements, s as hasValidToken, H as hexToRGB, _e as inheritableAttributesBase, A as isDate, U as isInViewport, ne as isInteractionFlow, $e as isRTEvent, De as isSafeFontUrl, it as isTheme, P as isUserEdit, j as isValidFormat, W as makeId, t as onAuthFailure, ae as pConsole, M as parseDate, Ae as parseSpaceFont, Oe as primaryFamily, o as processTwig, at as readThemeCookie, xt as refreshRsc, n as reportAuthFailure, dt as resolveScheme, $ as resolveVariables, Ct as rscDataPath, Et as runtimeStatePersist, r as sameRegistrableDomain, ft as setAreaTheme, et as setInstance, pt as setMachineScheme, mt as setThemeMode, Ve as spaceEventSchemas, q as stripTypenameDeep, pe as styleConstants, w as syntaxHighlight, c as templateRootNames, ht as themeFor, ot as themeFromCookies, ct as themeStore, N as toUnixSeconds, bt as useActionsSync, se as useFontHead, ce as useNetwork, le as usePlitziServiceContext, Q as useRegisterSource, wt as useRscRefresh, Tt as useRscSync, vt as useTheme, gt as useThemeStore, J as utility, Y as utilityOptions, x as validateConnectorManifest, He as validateSpaceEvent, st as writeThemeCookie };
+import fe from "./hooks/useStableValue.mjs";
+import { StyleVariableCategory as pe } from "./types/StyleTypes.mjs";
+import me, { EMPTY_STYLE_SCHEMA as he, StyleBindingsAllowed as ge, baseDefaultValue as _e, inheritableAttributesBase as ve } from "./style/styleConstants.mjs";
+import { fontLinkAssets as ye } from "./style/fontAssets.mjs";
+import { SYSTEM_FONTS as be, availableFonts as xe, familiesInCss as Se, fontFamilyStack as Ce, fontUrlResolver as we, fontsToHead as Te, googleCss2Url as Ee, googleTextSubsetUrl as De, isSafeFontUrl as Oe, primaryFamily as ke } from "./style/fonts.mjs";
+import { FontValidationError as Ae, parseSpaceFont as je } from "./style/fontValidation.mjs";
+import { fallbackForFamily as Me, fontsFromCss as Ne } from "./style/fontsFromCss.mjs";
+import Pe from "./schema/SchemaContext.mjs";
+import { EMPTY_SCHEMA as Fe, VARIABLE_REGEX as Ie } from "./schema/schemaConstants.mjs";
+import { findLayoutCycle as Le, resolveLayoutChain as Re } from "./schema/layoutChain.mjs";
+import { collectServerElements as ze, hasServerElements as Be } from "./schema/serverElements.mjs";
+import Ve from "./network/NetworkContext.mjs";
+import He from "./network/NetworkInternalContext.mjs";
+import { SpaceEvents as Ue, spaceEventSchemas as We, validateSpaceEvent as Ge } from "./network/spaceEvents.mjs";
+import Ke from "./network/graphql/builder/Mutations/index.mjs";
+import qe from "./network/graphql/builder/Queries/index.mjs";
+import Je from "./network/graphql/builder/Subscriptions/index.mjs";
+import Ye from "./network/graphql/sdk/Mutations/index.mjs";
+import Xe from "./network/graphql/sdk/Queries/index.mjs";
+import Ze from "./segments/SegmentsContext.mjs";
+import Qe, { RTEvent as $e, RTEventCloseCode as et, getInstance as tt, isRTEvent as nt, setInstance as rt } from "./websockets/RTCodec.mjs";
+import { THEME_CLASSES as it, THEME_COOKIE_NAME as at, applyThemeClass as ot, isTheme as st, readThemeCookie as ct, themeFromCookies as lt, writeThemeCookie as ut } from "./theme/themeCookie.mjs";
+import dt, { createThemeState as ft, createThemeStore as pt, resolveScheme as mt, setAreaTheme as ht, setMachineScheme as gt, setThemeMode as _t, themeFor as vt } from "./theme/themeStore.mjs";
+import { useThemeStore as yt } from "./theme/ThemeScope.mjs";
+import bt from "./theme/ThemeProvider.mjs";
+import xt, { SPACE_THEME_AREA as St } from "./theme/useTheme.mjs";
+import Ct from "./server/actions/useActionsSync.mjs";
+import wt, { currentRscLocation as Tt, rscDataPath as Et } from "./server/rsc/refreshRsc.mjs";
+import Dt from "./server/rsc/useRscRefresh.mjs";
+import Ot from "./server/rsc/useRscSync.mjs";
+import { runtimeStatePersist as kt } from "./state/runtimeStatePersist.mjs";
+export { d as BODYLESS_METHODS, l as BuilderContext, Ke as BuilderMutations, qe as BuilderQueries, f as CONNECTOR_HTTP_METHODS, oe as ComponentContext, p as DEFAULT_READ_ENDPOINT, ee as DevToolsContext, m as EMPTY_RESPONSE_METHODS, Fe as EMPTY_SCHEMA, he as EMPTY_STYLE_SCHEMA, Ae as FontValidationError, Ve as NetworkContext, He as NetworkInternalContext, I as ParamsFromURL, re as PlitziConsole, ue as PlitziServiceContext, de as PlitziServiceProvider, h as READ_ENDPOINT_NAMES, Qe as RTCodec, $e as RTEvent, et as RTEventCloseCode, St as SPACE_THEME_AREA, be as SYSTEM_FONTS, Pe as SchemaContext, Ye as SdkMutations, Xe as SdkQueries, Ze as SegmentsContext, Je as SpaceEventSubscription, Ue as SpaceEvents, ge as StyleBindingsAllowed, pe as StyleVariableCategory, it as THEME_CLASSES, at as THEME_COOKIE_NAME, bt as ThemeProvider, Ie as VARIABLE_REGEX, g as WRITE_ENDPOINT_NAMES, ot as applyThemeClass, e as authFailureFromResponse, xe as availableFonts, _e as baseDefaultValue, ze as collectServerElements, y as connectorPresets, _ as connectorTokens, u as contexts, i as createAuthFailureLink, ie as createStoreDevToolsLogger, K as createStripTypenameLink, ft as createThemeState, pt as createThemeStore, Tt as currentRscLocation, te as debugCookieName, L as delay, G as disableReactDevTools, b as emptyManifest, R as emptyObject, F as evaluateRuleGroup, Me as fallbackForFamily, Se as familiesInCss, S as fetchManifest, a as filters, Le as findLayoutCycle, Ce as fontFamilyStack, ye as fontLinkAssets, we as fontUrlResolver, Ne as fontsFromCss, Te as fontsToHead, T as formatDate, E as formatDateUTC, D as formatFromNow, O as formatUTCToLocal, C as generateFacade, X as getBindingsDetails, v as getConnectorTokens, z as getDisplayName, k as getDurationMs, tt as getInstance, B as getKeyDecoded, V as getPathsFromObeject, Z as getSourceName, Ee as googleCss2Url, De as googleTextSubsetUrl, Be as hasServerElements, s as hasValidToken, H as hexToRGB, ve as inheritableAttributesBase, A as isDate, U as isInViewport, ne as isInteractionFlow, nt as isRTEvent, Oe as isSafeFontUrl, st as isTheme, P as isUserEdit, j as isValidFormat, W as makeId, t as onAuthFailure, ae as pConsole, M as parseDate, je as parseSpaceFont, ke as primaryFamily, o as processTwig, ct as readThemeCookie, wt as refreshRsc, n as reportAuthFailure, Re as resolveLayoutChain, mt as resolveScheme, $ as resolveVariables, Et as rscDataPath, kt as runtimeStatePersist, r as sameRegistrableDomain, ht as setAreaTheme, rt as setInstance, gt as setMachineScheme, _t as setThemeMode, We as spaceEventSchemas, q as stripTypenameDeep, me as styleConstants, w as syntaxHighlight, c as templateRootNames, vt as themeFor, lt as themeFromCookies, dt as themeStore, N as toUnixSeconds, Ct as useActionsSync, se as useFontHead, ce as useNetwork, le as usePlitziServiceContext, Q as useRegisterSource, Dt as useRscRefresh, Ot as useRscSync, fe as useStableValue, xt as useTheme, yt as useThemeStore, J as utility, Y as utilityOptions, x as validateConnectorManifest, Ge as validateSpaceEvent, ut as writeThemeCookie };

package/dist/navigation/routes.mjs

@@ -28,7 +28,7 @@ function a(e, t, n, a = !1) {
 	let l = [i(t.reduce((e, t) => ({
 		...e,
 		[t.id]: t
-	}), {}), s), o || n].filter(Boolean).join("/");
+	}), {}), s), o].filter(Boolean).join("/");
 	return a ? `/${l}` : {
 		[`/${l}`]: n,
 		[`/${n}`]: n

package/dist/queries/queryCache.d.ts

@@ -24,12 +24,22 @@ export type QueriesState = {
 };
 export type QueryObserverOptions<T> = {
     meta: QueryMeta;
-    fetcher: () => Promise<T>;
+    /** Given the signal of the request it is making, so an answer nobody can still read is not waited for. */
+    fetcher: (signal: AbortSignal) => Promise<T>;
     /** How long an answer counts as current, in milliseconds. `0` asks again on every mount. */
     staleTime: number;
     /** An answer this rejects is shown but never trusted: the next observer to mount asks again. */
     isCacheable?: (data: T) => boolean;
 };
+/**
+ * What is keeping a query, for the devtools: a query nobody renders is not a leak, it is the grace period doing its
+ * job — but that is only obvious if the panel can say so, and offer to end it.
+ */
+export type QueryUsage = {
+    observers: number;
+    holds: number;
+    collectAt?: number;
+};
 /**
  * One path segment per key.
  *
@@ -65,6 +75,17 @@ export declare class QueryCache {
     getEntry(key: string): QueryEntry | undefined;
     /** Whether `key` has been answered in this session — every answer is written with a TTL, even a distrusted one. */
     hasAnswer(key: string): boolean;
+    /** Who is keeping `key` alive, and when it would be forgotten if nobody else asked for it. */
+    usage(key: string): QueryUsage | undefined;
+    /**
+     * Forgets `key` now: the answer, the grace period and the request still out for it.
+     *
+     * The grace period is what keeps an answer around for somebody coming back, and there is no reason to wait it out
+     * when a reader knows they will not — a devtools panel clearing what a page stopped using, a flow dropping what a
+     * sign-out made meaningless. A query something still renders is left alone: dropping what is on screen leaves it
+     * with nothing and nothing to ask again, since the observer that would ask is already attached.
+     */
+    remove(key: string): boolean;
     /**
      * Keeps `key` from being collected for as long as the returned function is not called, and for `gcTime` after.
      * The latest reader's `gcTime` is the one kept.
@@ -93,8 +114,24 @@ export declare class QueryCache {
      *
      * Invalidating would not do: a stale query still SHOWS what it holds until the new answer lands, and what it holds
      * belongs to the previous visitor. The epoch makes a request still in flight from before land nowhere.
+     *
+     * `refetch` is what becomes of the queries still on screen. As somebody else, they are asked again, so the page in
+     * front of the new person is theirs. As NOBODY it is a sign-out, and there is no one to ask on behalf of: asking
+     * anyway was one refusal per provider still mounted, each reported as a failed session, for a page already on its
+     * way to the guest view.
+     */
+    reset({ refetch }?: {
+        refetch?: boolean;
+    }): Promise<void>;
+    /**
+     * Holding nothing and asking for nothing — the state a query is left in when the answers are forgotten and nobody
+     * asks again.
+     *
+     * Without it the entry is simply gone, and a reader takes that for "about to be asked": it renders as loading for
+     * as long as it stays mounted, because the observer that would ask is already attached and nothing re-runs it.
+     * Written with no life at all, so the next mount asks.
      */
-    reset(): Promise<void>;
+    private markUnasked;
     /**
      * Expiring the path is the invalidation: {@link onExpired} does the rest, for this call and for anybody else who
      * expires a query's path — the dev-tools' "Expire" included. A query that has never answered has no record to

package/dist/queries/queryCache.mjs

@@ -25,6 +25,18 @@ var t = 3e5, n = (e) => {
 	hasAnswer(e) {
 		return this.getEntry(e) !== void 0 && this.store.getFreshness(r(e)) !== void 0;
 	}
+	usage(e) {
+		let t = this.runtimes.get(n(e));
+		return t && {
+			observers: t.observers.size,
+			holds: t.holds,
+			collectAt: t.collectAt
+		};
+	}
+	remove(e) {
+		let t = this.runtimes.get(n(e));
+		return !t || t.observers.size > 0 || t.holds > 0 ? !1 : (this.cancelGc(t), this.collect(t), !0);
+	}
 	hold(e, n = t) {
 		let r = this.ensure(e);
 		return r.gcTime = n, r.holds++, this.cancelGc(r), () => {
@@ -69,12 +81,23 @@ var t = 3e5, n = (e) => {
 			}) || t.push(this.invalidateOne(n));
 		}), Promise.all(t).then(() => void 0);
 	}
-	reset() {
-		this.epochValue++, this.runtimes.forEach((e) => {
-			e.version++, e.inFlight = void 0;
-		}), this.store.setState("entries", {});
-		let e = [];
-		return this.runtimes.forEach((t) => e.push(this.fetchActive(t))), Promise.all(e).then(() => void 0);
+	reset({ refetch: e = !0 } = {}) {
+		if (this.epochValue++, this.runtimes.forEach((e) => {
+			e.version++, e.inFlight = void 0, e.controller?.abort(), e.controller = void 0;
+		}), this.store.setState("entries", {}), !e) return this.runtimes.forEach((e) => this.markUnasked(e)), Promise.resolve();
+		let t = [];
+		return this.runtimes.forEach((e) => t.push(this.fetchActive(e))), Promise.all(t).then(() => void 0);
+	}
+	markUnasked(e) {
+		let t = e.observers.values().next();
+		if (t.done) return;
+		let n = {
+			key: e.key,
+			url: t.value.meta.url,
+			tags: [...e.tags],
+			isFetching: !1
+		};
+		this.store.setState(r(e.key), n, { ttl: 0 });
 	}
 	invalidateOne(e) {
 		return this.store.expire(r(e.key)).length === 0 && e.version++, this.fetchActive(e);
@@ -100,7 +123,7 @@ var t = 3e5, n = (e) => {
 		});
 		let c = this.epochValue, l = e.version, u = (r) => {
 			if (c !== this.epochValue || this.runtimes.get(n(i)) !== e) return Promise.resolve();
-			e.inFlight = void 0;
+			e.inFlight = void 0, e.controller = void 0;
 			let u = l !== e.version;
 			if ("error" in r) {
 				let e = this.getEntry(i);
@@ -123,8 +146,8 @@ var t = 3e5, n = (e) => {
 				}, { ttl: n ? this.ttlOf(e, t) : 0 });
 			}
 			return u ? this.fetchActive(e) : Promise.resolve();
-		};
-		return e.inFlight = t.fetcher().then((e) => u({ data: e }), (e) => u({ error: e })), e.inFlight;
+		}, d = new AbortController();
+		return e.controller = d, e.inFlight = t.fetcher(d.signal).then((e) => u({ data: e }), (e) => u({ error: e })), e.inFlight;
 	}
 	ttlOf(e, t) {
 		let n = e.observers.size > 0 ? Infinity : t.staleTime;
@@ -146,7 +169,7 @@ var t = 3e5, n = (e) => {
 		}), i;
 	}
 	cancelGc(e) {
-		clearTimeout(e.gcTimer), e.gcTimer = void 0;
+		clearTimeout(e.gcTimer), e.gcTimer = void 0, e.collectAt = void 0;
 	}
 	scheduleGc(e) {
 		if (!(e.holds > 0 || e.observers.size > 0)) {
@@ -154,12 +177,12 @@ var t = 3e5, n = (e) => {
 				this.collect(e);
 				return;
 			}
-			e.gcTimer = setTimeout(() => this.collect(e), e.gcTime);
+			e.collectAt = Date.now() + e.gcTime, e.gcTimer = setTimeout(() => this.collect(e), e.gcTime);
 		}
 	}
 	collect(e) {
 		let t = n(e.key);
-		this.runtimes.get(t) === e && e.holds === 0 && e.observers.size === 0 && (this.runtimes.delete(t), this.store.setState(r(e.key), void 0, { unmount: !0 }));
+		this.runtimes.get(t) === e && e.holds === 0 && e.observers.size === 0 && (this.runtimes.delete(t), e.controller?.abort(), this.store.setState(r(e.key), void 0, { unmount: !0 }));
 	}
 }, a = new i();
 //#endregion

package/dist/queries/useQuery.d.ts

@@ -3,7 +3,7 @@ export type UseQueryOptions<T> = {
     /** What identifies the answer. Without one the hook is inert: it reads, holds and asks for nothing. */
     key: string | undefined;
     meta: QueryMeta;
-    fetcher: () => Promise<T>;
+    fetcher: (signal: AbortSignal) => Promise<T>;
     enabled?: boolean;
     /** How long an answer counts as current, in milliseconds. */
     staleTime: number;

package/dist/queries/useQuery.mjs

@@ -18,7 +18,7 @@ var { useStore: s } = o(), c = ({ key: o, meta: c, fetcher: l, enabled: u = !0,
 				tags: x ? x.split("\0") : []
 			},
 			staleTime: d,
-			fetcher: () => v.current(),
+			fetcher: (e) => v.current(e),
 			isCacheable: (e) => y.current?.(e) ?? !0
 		});
 	}, [

package/dist/schema/index.d.ts

@@ -1,5 +1,6 @@
 import { default as SchemaContext } from './SchemaContext';
 export * from './schemaConstants';
 export * from './SchemaContext';
+export * from './layoutChain';
 export * from './serverElements';
 export { SchemaContext };

package/dist/schema/index.mjs

@@ -1,4 +1,5 @@
 import e from "./SchemaContext.mjs";
 import { EMPTY_SCHEMA as t, VARIABLE_REGEX as n } from "./schemaConstants.mjs";
-import { collectServerElements as r, hasServerElements as i } from "./serverElements.mjs";
-export { t as EMPTY_SCHEMA, e as SchemaContext, n as VARIABLE_REGEX, r as collectServerElements, i as hasServerElements };
+import { findLayoutCycle as r, resolveLayoutChain as i } from "./layoutChain.mjs";
+import { collectServerElements as a, hasServerElements as o } from "./serverElements.mjs";
+export { t as EMPTY_SCHEMA, e as SchemaContext, n as VARIABLE_REGEX, a as collectServerElements, r as findLayoutCycle, o as hasServerElements, i as resolveLayoutChain };

package/dist/schema/layoutChain.d.ts

@@ -0,0 +1,17 @@
+import { Element } from '../types';
+/** One shell a page is rendered inside: the layoutContainer element, and the container in it that takes the body. */
+export type LayoutLink = {
+    layout: string;
+    slot: string;
+};
+/**
+ * The shells around a page, innermost first.
+ *
+ * A page names ONE shell (`layout`) and the container in it its body goes into (`layoutContainer`). That shell may
+ * name one of its own the same way — analytics pages share a header and tabs, and that header sits inside the
+ * platform's sidebar shell — so the chain is followed until a shell names none. A shell the document does not hold, or
+ * one already in the chain, ends it: a cycle is a mistake in the document, and rendering it would never finish.
+ */
+export declare const resolveLayoutChain: (getElement: (id: string) => Element | undefined, layout: string, layoutContainer: string) => LayoutLink[];
+/** The layouts a chain passes through that close it on itself, if any: `layout` → … → `layout`. */
+export declare const findLayoutCycle: (getElement: (id: string) => Element | undefined, layout: string) => string[];

package/dist/schema/layoutChain.mjs

@@ -0,0 +1,25 @@
+//#region src/schema/layoutChain.ts
+var e = (e, t) => {
+	let n = e?.attributes[t];
+	return typeof n == "string" ? n : "";
+}, t = (t, n, r) => {
+	let i = [], a = /* @__PURE__ */ new Set(), o = n, s = r;
+	for (; o && !a.has(o) && i.length < 16;) {
+		let n = t(o);
+		if (n?.definition.type !== "layoutContainer") break;
+		a.add(o), i.push({
+			layout: o,
+			slot: s || o
+		}), o = e(n, "layout"), s = e(n, "layoutContainer");
+	}
+	return i;
+}, n = (t, n) => {
+	let r = [], i = n;
+	for (; i && r.length <= 16;) {
+		if (r.includes(i)) return [...r.slice(r.indexOf(i)), i];
+		r.push(i), i = e(t(i), "layout");
+	}
+	return [];
+};
+//#endregion
+export { n as findLayoutCycle, t as resolveLayoutChain };

package/dist/store/tracing/tracingCollector.d.ts

@@ -3,6 +3,8 @@ import { ProfilerOnRenderCallback } from 'react';
 declare const tracingCollector: {
     onRender: ProfilerOnRenderCallback;
     linkParent: (id: string, parentId: string | undefined, elementId: string) => void;
+    markMounted: (id: string) => void;
+    markUnmounted: (id: string) => void;
     recordProps: (id: string, changes: PropChange[]) => void;
     recordStoreChange: (change: {
         path: string | undefined;

package/dist/store/tracing/tracingCollector.mjs

@@ -2,33 +2,39 @@ import { previewValue as e } from "./preview.mjs";
 import t from "./tracingStore.mjs";
 import { createRecorder as n } from "@plitzi/nexus";
 //#region src/store/tracing/tracingCollector.ts
-var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), l = !0, u = 0, d = /* @__PURE__ */ new Map(), f = !1, p = !1, m = 0, h = !1, g = !1, _ = typeof requestAnimationFrame == "function" ? (e) => {
+var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), l = !0, u = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), f = 0, p = /* @__PURE__ */ new Map(), m = !1, h = !1, g = 0, _ = !1, v = !1, y = typeof requestAnimationFrame == "function" ? (e) => {
 	requestAnimationFrame(e);
 } : (e) => {
 	setTimeout(e, 16);
-}, v = () => {
+}, b = () => {
 	let e = {};
 	for (let [t, n] of c) e[t] = {
 		parentId: o.get(t),
 		baseDuration: n,
-		elementId: s.get(t) ?? t
+		elementId: s.get(t) ?? t,
+		mountedAt: u.get(t),
+		unmountedAt: d.get(t)
 	};
 	return e;
-}, y = () => {
-	l && (l = !1, t.setState("tree", v())), t.setState("hydrated", g), t.setState("commits", i);
-}, b = () => {
-	g || (g = !0, p && t.setState("hydrated", !0));
 }, x = () => {
-	if (h = !1, a.size > 0) {
+	l && (l = !1, t.setState("tree", b())), t.setState("hydrated", v), t.setState("commits", i);
+}, S = () => {
+	v || (v = !0, h && t.setState("hydrated", !0));
+}, C = (e) => {
+	o.delete(e), s.delete(e), c.delete(e), u.delete(e), d.delete(e), l = !0;
+}, w = (e) => {
+	for (let [t, n] of d) n <= e && C(t);
+}, T = () => {
+	if (_ = !1, a.size > 0) {
 		let e = [...a.values()].sort((e, t) => e.timestamp - t.timestamp);
-		a.clear(), i = [...i, ...e], i.length > 200 && (i = i.slice(i.length - 200));
+		a.clear(), i = [...i, ...e], i.length > 200 && (i = i.slice(i.length - 200)), w(i[0].commitId);
 	}
-	p && y();
-}, S = (e, t, n) => {
-	(!o.has(e) || o.get(e) !== t) && (l = !0), o.size >= 2e4 && !o.has(e) && (o.clear(), s.clear(), c.clear(), l = !0), o.set(e, t), s.set(e, n);
-}, C = () => {
-	let t = r.entriesSince(u);
-	u = r.lastSeq();
+	h && x();
+}, E = (e, t, n) => {
+	(!o.has(e) || o.get(e) !== t) && (l = !0), o.size >= 2e4 && !o.has(e) && (o.clear(), s.clear(), c.clear(), u.clear(), d.clear(), l = !0), o.set(e, t), s.set(e, n);
+}, D = () => {
+	let t = r.entriesSince(f);
+	f = r.lastSeq();
 	let n = /* @__PURE__ */ new Map();
 	for (let e of t) {
 		if (e.path === void 0) continue;
@@ -42,46 +48,60 @@ var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__
 		path: t,
 		preview: `${e(n.prev)} → ${e(n.next)}`
 	}));
-}, w = {
-	onRender: (e, n, r, i, u, p) => {
-		f || (f = !0, t.setState("enabled", !0)), c.has(e) || (l = !0), c.set(e, i);
-		let g = d.get(e);
-		d.delete(e);
-		let v = {
+}, O = {
+	onRender: (e, n, r, i, d, f) => {
+		m || (m = !0, t.setState("enabled", !0));
+		let h = !c.has(e);
+		c.set(e, i);
+		let v = p.get(e);
+		p.delete(e);
+		let b = {
 			id: e,
 			elementId: s.get(e) ?? e,
 			parentId: o.get(e),
 			phase: n,
 			actualDuration: r,
 			baseDuration: i,
-			changedProps: g
-		}, y = a.get(p);
-		y ? (y.elements.push(v), y.elementCount += 1, y.duration = Math.max(y.duration, r)) : (m += 1, a.set(p, {
-			commitId: m,
-			timestamp: p,
+			changedProps: v
+		}, x = a.get(f);
+		x ? (x.elements.push(b), x.elementCount += 1, x.duration = Math.max(x.duration, r)) : (g += 1, a.set(f, {
+			commitId: g,
+			timestamp: f,
 			duration: r,
 			elementCount: 1,
-			elements: [v],
-			causes: C()
-		})), h || (h = !0, _(x));
+			elements: [b],
+			causes: D()
+		})), h && (u.set(e, a.get(f)?.commitId ?? g), l = !0), _ || (_ = !0, y(T));
+	},
+	linkParent: E,
+	markMounted: (e) => {
+		d.delete(e) && (l = !0);
+	},
+	markUnmounted: (e) => {
+		if (!c.has(e)) {
+			C(e);
+			return;
+		}
+		d.set(e, g), l = !0, _ || (_ = !0, y(T));
 	},
-	linkParent: S,
 	recordProps: (e, t) => {
-		d.set(e, t);
+		p.set(e, t);
 	},
 	recordStoreChange: (e) => {
 		r.record(e);
 	},
-	setHydrated: b,
+	setHydrated: S,
 	start: () => {
-		p = !0, x(), y();
+		h = !0, T(), x();
 	},
 	stop: () => {
-		p = !1;
+		h = !1;
 	},
 	clear: () => {
-		i = [], a.clear(), u = r.lastSeq(), d.clear(), m = 0, l = !0, y();
+		i = [], a.clear(), f = r.lastSeq(), p.clear(), g = 0;
+		for (let e of [...d.keys()]) C(e);
+		u.clear(), l = !0, x();
 	}
 };
 //#endregion
-export { w as default };
+export { O as default };

package/dist/types/ElementTypes.d.ts

@@ -1,11 +1,14 @@
 import { Asset, PluginManifest, PluginSchema } from './PluginTypes';
 import { Element } from './SchemaTypes';
-import { ReactNode } from 'react';
 export type ElementLayoutType = 'layout' | 'segment' | 'element' | 'reference';
+/**
+ * Which shell an element is rendered inside, and which of its containers is the slot.
+ *
+ * Every element of the shell carries it, so it holds nothing that changes with the page: the body itself reaches the
+ * slot through `LayoutBody` in `@plitzi/sdk-elements`.
+ */
 export type ElementLayout = {
-    bodyChildren: ReactNode;
     containerId: string;
-    referenceId: string;
     rootId: string;
     type: ElementLayoutType;
 };

package/dist/types/StoreTypes.d.ts

@@ -250,6 +250,10 @@ export type TracingTreeNode = {
     baseDuration: number;
     /** Which element this instance is — see `CommitElementRender.id`. */
     elementId: string;
+    /** The first commit it rendered in; absent means it was already there when the timeline started. */
+    mountedAt?: number;
+    /** The commit that removed it, which it is no longer part of; absent while it is on the page. */
+    unmountedAt?: number;
 };
 export type TracingTree = Record<string, TracingTreeNode>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-shared",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "license": "AGPL-3.0",
   "files": [
     "dist",
@@ -444,6 +444,10 @@
       "types": "./dist/hooks/usePlitziServiceContext.d.ts",
       "import": "./dist/hooks/usePlitziServiceContext.mjs"
     },
+    "./hooks/useStableValue": {
+      "types": "./dist/hooks/useStableValue.d.ts",
+      "import": "./dist/hooks/useStableValue.mjs"
+    },
     "./index": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
@@ -984,6 +988,10 @@
       "types": "./dist/schema/index.d.ts",
       "import": "./dist/schema/index.mjs"
     },
+    "./schema/layoutChain": {
+      "types": "./dist/schema/layoutChain.d.ts",
+      "import": "./dist/schema/layoutChain.mjs"
+    },
     "./schema/schemaConstants": {
       "types": "./dist/schema/schemaConstants.d.ts",
       "import": "./dist/schema/schemaConstants.mjs"
@@ -1272,13 +1280,13 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.30.0",
-    "@plitzi/nexus": "^1.2.0",
+    "@plitzi/nexus": "^1.2.2",
     "@plitzi/plitzi-ui": "^1.6.21",
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
     "graphql-tag": "^2.12.7",
     "immer": "^11.1.18",
-    "zod": "^4.6.4"
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "react": "^19",
@@ -1293,34 +1301,34 @@
     "@babel/preset-env": "^8.0.5",
     "@eslint/js": "^10.0.1",
     "@tailwindcss/forms": "^0.5.11",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^5.0.0",
+    "@vitest/coverage-v8": "^5.0.1",
     "babel-minify": "^0.5.2",
     "eslint": "^9.39.5",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-config-turbo": "^2.10.12",
+    "eslint-config-turbo": "^2.10.13",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-cypress": "^7.0.2",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.3.10",
+    "eslint-plugin-jsdoc": "^64.5.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.6",
+    "eslint-plugin-react-refresh": "^0.5.7",
     "eslint-plugin-storybook": "^10.6.0",
     "globals": "^17.12.0",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.0",
     "postcss": "^8.5.28",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.8",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.3",
@@ -1330,7 +1338,7 @@
     "vite": "^8.3.0",
     "vite-plugin-dts": "^5.1.0",
     "vite-plugin-react": "^4.0.1",
-    "vitest": "^5.0.0",
+    "vitest": "^5.0.1",
     "vitest-fetch-mock": "^0.4.5"
   }
 }