@plitzi/sdk-elements 0.35.10 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @plitzi/sdk-elements
 
+## 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-auth@0.36.0
+  - @plitzi/sdk-dev-tools@0.36.0
+  - @plitzi/sdk-event-bridge@0.36.0
+  - @plitzi/sdk-interactions@0.36.0
+  - @plitzi/sdk-navigation@0.36.0
+  - @plitzi/sdk-schema@0.36.0
+  - @plitzi/sdk-shared@0.36.0
+
 ## 0.35.10
 
 ### Patch Changes

package/dist/elements/declarations/index.d.ts

@@ -53,6 +53,9 @@ export declare const elementDeclarations: {
                 readonly pagination: "none";
                 readonly pageParam: "page";
                 readonly renderWhileLoading: false;
+                readonly cache: false;
+                readonly staleTime: 30;
+                readonly gcTime: 300;
             };
             readonly definition: {
                 readonly label: "Api Container";

package/dist/elements/provider/ApiContainer/ApiContainer.d.ts

@@ -48,8 +48,20 @@ export type ApiContainerProps = {
     pageParam?: string;
     /** Renders children while the first client-side request is still in flight, so a loading state can be bound. */
     renderWhileLoading?: boolean;
+    /**
+     * Keep a browser request's answer in the page's query cache, shared with every provider asking the same thing.
+     * Off by default: an author opts in knowing the page may show an answer up to `staleTime` old.
+     */
+    cache?: boolean;
+    /**
+     * With `cache`: seconds an answer is served without asking again. A stale answer is still shown while the new one
+     * is fetched; `0` asks on every mount. A text field in the builder, hence the string.
+     */
+    staleTime?: number | string;
+    /** With `cache`: seconds an answer nobody renders is kept, so coming back within it paints at once. */
+    gcTime?: number | string;
 };
-declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading }: ApiContainerProps) => import("react").JSX.Element;
+declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, cache, staleTime, gcTime }: ApiContainerProps) => import("react").JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import("react").JSX.Element;
     displayName: string;

package/dist/elements/provider/ApiContainer/ApiContainer.mjs

@@ -7,94 +7,98 @@ import te from "./hooks/useApi.mjs";
 import ne from "./hooks/useProviderPagination.mjs";
 import re from "./hooks/useProviderWrite.mjs";
 import { use as ie, useCallback as i, useEffect as ae, useMemo as a } from "react";
-import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as oe } from "@plitzi/sdk-shared/store";
-import { StoreProvider as se } from "@plitzi/nexus/react";
-import { emptyObject as s, getPathsFromObeject as ce } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as c } from "react/jsx-runtime";
-import { currentRscLocation as le } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
+import oe from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as se } from "@plitzi/sdk-shared/store";
+import { StoreProvider as ce } from "@plitzi/nexus/react";
+import { emptyObject as o, getPathsFromObeject as le } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as s } from "react/jsx-runtime";
+import { currentRscLocation as c } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
 import l from "clsx";
 import u from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
 import d from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 import { QueryBuilderEvaluator as ue } from "@plitzi/plitzi-ui/QueryBuilder";
 //#region src/elements/provider/ApiContainer/ApiContainer.tsx
-var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "get", accessToken: g = "", when: _ = s, headers: v = s, mockData: y = "{}", subType: de = "", credentials: fe = "same-origin", singleRecord: b = !1, pagination: pe = "none", pageParam: me = "page", renderWhileLoading: x = !1 }) => {
-	let { id: S, visible: C, definition: { label: w = "Api Container", runtime: he, items: ge } } = t(), T = he === "server", { loaded: E, stale: D, location: O, elementData: k, refresh: A } = n(), j = u(ee.sourceType, S), { settings: { previewMode: M }, contexts: { InteractionsContext: N } } = o(), { interactionsManager: P } = ie(N), [[F, I, L]] = oe([
+var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "get", accessToken: g = "", when: _ = o, headers: v = o, mockData: y = "{}", subType: de = "", credentials: fe = "same-origin", singleRecord: b = !1, pagination: x = "none", pageParam: S = "page", renderWhileLoading: pe = !1, cache: me = !1, staleTime: he = 30, gcTime: ge = 300 }) => {
+	let { id: C, visible: w, definition: { label: T = "Api Container", runtime: _e, items: ve } } = t(), E = _e === "server", { loaded: D, stale: O, location: k, elementData: A, refresh: j } = n(), M = u(ee.sourceType, C), { settings: { previewMode: N }, contexts: { InteractionsContext: P } } = oe(), { interactionsManager: F } = ie(P), [[I, L, ye]] = se([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.navigate"
-	]), _e = a(() => g ? {
+	]), be = a(() => g ? {
 		...v,
 		Authorization: `Bearer ${g}`
-	} : v, [v, g]), ve = a(() => T || !C ? !1 : !!(M && m && (_ === s || ue(_, {
-		...F,
-		...I
-	})) || !M && (m || y && y !== "{}" && y !== s)), [
-		T,
-		C,
-		M,
+	} : v, [v, g]), xe = a(() => E || !w ? !1 : !!(N && m && (_ === o || ue(_, {
+		...I,
+		...L
+	})) || !N && (m || y && y !== "{}" && y !== o)), [
+		E,
+		w,
+		N,
 		m,
 		_,
-		F,
 		I,
+		L,
 		y
-	]), { isLoading: ye, isFetching: be, data: R, refetch: z, isSuccess: B, isError: V } = te({
+	]), Se = a(() => [C], [C]), { isLoading: Ce, isFetching: we, data: R, refetch: z, isSuccess: B, isError: V } = te({
 		url: m,
 		method: h,
 		credentials: fe,
-		mock: M ? void 0 : y,
-		customHeaders: _e,
-		enabled: ve
-	}), H = T && !!O && O !== le(), U = T && E && !H && k === null, W = a(() => {
-		if (!T) return R ?? s;
-		if (k) return k;
-		if (E) return s;
+		mock: N ? void 0 : y,
+		customHeaders: be,
+		enabled: xe,
+		cache: me,
+		staleTime: he,
+		gcTime: ge,
+		tags: Se
+	}), H = E && !!k && k !== c(), U = E && D && !H && A === null, W = a(() => {
+		if (!E) return R ?? o;
+		if (A) return A;
+		if (D) return o;
 		if (typeof y != "string") return y;
 		try {
 			return JSON.parse(y || "{}");
 		} catch {
-			return s;
+			return o;
 		}
 	}, [
-		T,
-		R,
-		k,
 		E,
+		R,
+		A,
+		D,
 		y
-	]), G = T ? H : be, xe = T ? H : ye, K = i(async () => {
-		if (!T) {
+	]), G = E ? H : we, Te = E ? H : Ce, K = i(async () => {
+		if (!E) {
 			z();
 			return;
 		}
-		await A([S]);
+		await j([C]);
 	}, [
-		T,
+		E,
 		z,
-		A,
-		S
-	]), q = W, Se = a(() => Array.isArray(q.records) ? q.records : [], [q.records]), { records: J, isLoadingMore: Y, goToPage: X, loadMore: Z } = ne({
-		elementId: S,
-		mode: pe,
-		pageParam: me,
-		records: Se,
+		j,
+		C
+	]), q = W, Ee = a(() => Array.isArray(q.records) ? q.records : [], [q.records]), { records: J, isLoadingMore: Y, goToPage: X, loadMore: Z } = ne({
+		elementId: C,
+		mode: x,
+		pageParam: S,
+		records: Ee,
 		page: q.pageInfo?.page ?? 1,
-		refresh: A,
-		navigate: L
+		refresh: j,
+		navigate: ye
 	});
 	ae(() => {
-		!G && S && (B ? P.interactionTrigger(S, "onApiSuccess", {
+		!G && C && (B ? F.interactionTrigger(C, "onApiSuccess", {
 			url: m,
 			method: h,
 			...W
-		}) : V && P.interactionTrigger(S, "onApiError", {
+		}) : V && F.interactionTrigger(C, "onApiError", {
 			url: m,
 			method: h,
 			...W
 		}));
 	}, [
 		W,
-		S,
-		P,
+		C,
+		F,
 		V,
 		G,
 		B,
@@ -103,12 +107,12 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 	]);
 	let Q = a(() => ({
 		...W,
-		...Array.isArray(q.records) ? { records: J } : s,
+		...Array.isArray(q.records) ? { records: J } : o,
 		isLoading: G || Y,
 		isEmpty: b ? q.record === void 0 : J.length === 0,
 		hasError: U,
 		errorMessage: U ? "The data provider could not be reached" : "",
-		isStale: T && D
+		isStale: E && O
 	}), [
 		W,
 		q.records,
@@ -118,9 +122,9 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 		Y,
 		b,
 		U,
-		T,
-		D
-	]), Ce = i(() => ce(Q).reduce((e, t) => {
+		E,
+		O
+	]), De = i(() => le(Q).reduce((e, t) => {
 		let n = t.split(".");
 		return n.length > 1 ? [...e, {
 			path: t,
@@ -131,20 +135,20 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 		}];
 	}, []), [Q]);
 	d({
-		id: S,
-		source: j,
-		name: w || `API - ${S}`,
-		fields: Ce
+		id: C,
+		source: M,
+		name: T || `API - ${C}`,
+		fields: De
 	});
 	let { writeRecord: $ } = re({
-		elementId: S,
-		enabled: T,
+		elementId: C,
+		enabled: E,
 		onDone: K
-	}), we = a(() => {
+	}), Oe = a(() => {
 		let e = {
 			performQuery: {
 				action: "performQuery",
-				title: `Perform Query ${w}`,
+				title: `Perform Query ${T}`,
 				type: "callback",
 				callback: K,
 				preview: {},
@@ -152,7 +156,7 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 			},
 			loadMore: {
 				action: "loadMore",
-				title: `Load More ${w}`,
+				title: `Load More ${T}`,
 				type: "callback",
 				callback: Z,
 				preview: {},
@@ -160,7 +164,7 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 			},
 			goToPage: {
 				action: "goToPage",
-				title: `Go To Page ${w}`,
+				title: `Go To Page ${T}`,
 				type: "callback",
 				callback: ({ page: e }) => X(Number(e) || 1),
 				preview: {},
@@ -171,9 +175,9 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 				} }
 			}
 		};
-		return T && (e.writeRecord = {
+		return E && (e.writeRecord = {
 			action: "writeRecord",
-			title: `Write Record ${w}`,
+			title: `Write Record ${T}`,
 			type: "callback",
 			callback: $,
 			preview: { action: "create" },
@@ -191,13 +195,13 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 			}
 		}), e;
 	}, [
-		w,
+		T,
 		K,
 		Z,
 		X,
-		T,
+		E,
 		$
-	]), Te = a(() => ({
+	]), ke = a(() => ({
 		onApiError: {
 			action: "onApiError",
 			title: "On Api Error",
@@ -222,17 +226,17 @@ var f = ({ ref: e, className: f = "", children: p, query: m = "", method: h = "g
 				data: ""
 			}
 		}
-	}), []), Ee = a(() => j ? { runtime: { sources: { [j]: Q } } } : s, [Q, j]);
-	return /* @__PURE__ */ c(r, {
+	}), []), Ae = a(() => M ? { runtime: { sources: { [M]: Q } } } : o, [Q, M]);
+	return /* @__PURE__ */ s(r, {
 		ref: e,
-		tag: !M && !ge?.length ? "div" : de,
+		tag: !N && !ve?.length ? "div" : de,
 		className: l("plitzi-component__api-container", f),
-		interactionTriggers: Te,
-		interactionCallbacks: we,
-		children: (!xe || x) && /* @__PURE__ */ c(se, {
+		interactionTriggers: ke,
+		interactionCallbacks: Oe,
+		children: (!Te || pe) && /* @__PURE__ */ s(ce, {
 			inherit: "live",
-			name: `Api:${S}`,
-			value: Ee,
+			name: `Api:${C}`,
+			value: Ae,
 			children: p
 		})
 	});

package/dist/elements/provider/ApiContainer/Settings.d.ts

@@ -21,7 +21,10 @@ type SettingsProps = {
     pagination?: 'none' | 'url' | 'append';
     pageParam?: string;
     renderWhileLoading?: boolean;
+    cache?: boolean;
+    staleTime?: number | string;
+    gcTime?: number | string;
     onUpdate?: (key: string, value: string | boolean | number | object, isDefinition?: boolean) => void;
 };
-declare const Settings: ({ query, method, accessToken, headers, when, subType, mockData, credentials, runtime, connector, action, endpoint, resource, limit, singleRecord, filters, pagination, pageParam, renderWhileLoading, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ query, method, accessToken, headers, when, subType, mockData, credentials, runtime, connector, action, endpoint, resource, limit, singleRecord, filters, pagination, pageParam, renderWhileLoading, cache, staleTime, gcTime, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/provider/ApiContainer/Settings.mjs

@@ -1,10 +1,10 @@
 import e from "./components/FiltersInput/index.mjs";
-import { useCallback as t, useMemo as n, useState as ee } from "react";
-import { useBuilderStore as r, useCommonStore as te, useSdkStore as i } from "@plitzi/sdk-shared/store";
-import { get as a } from "@plitzi/plitzi-ui/helpers";
-import { emptyObject as ne } from "@plitzi/sdk-shared/helpers/utils";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "@plitzi/sdk-shared/theme/useTheme";
+import { useCallback as t, useMemo as n, useState as r } from "react";
+import { useBuilderStore as i, useCommonStore as a, useSdkStore as o } from "@plitzi/sdk-shared/store";
+import { get as ee } from "@plitzi/plitzi-ui/helpers";
+import { emptyObject as te } from "@plitzi/sdk-shared/helpers/utils";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import ne from "@plitzi/sdk-shared/theme/useTheme";
 import u from "@plitzi/plitzi-ui/QueryBuilder";
 import d from "@plitzi/plitzi-ui/CodeMirror";
 import f from "@plitzi/plitzi-ui/Input";
@@ -12,309 +12,335 @@ import p from "@plitzi/plitzi-ui/Select";
 import re from "@plitzi/plitzi-ui/KVInput";
 import m from "@plitzi/plitzi-ui/Switch";
 //#region src/elements/provider/ApiContainer/Settings.tsx
-var h = [], g = ({ query: g = "", method: _ = "get", accessToken: v = "", headers: y = ne, when: b, subType: x = "", mockData: S = "{}", credentials: C = "same-origin", runtime: w = "client", connector: T = "", action: E = "", endpoint: D = "", resource: ie = "", limit: ae = "10", singleRecord: O = !1, filters: k = h, pagination: A = "none", pageParam: j = "page", renderWhileLoading: M = !1, onUpdate: N }) => {
-	let { resolvedTheme: P } = l(), [F] = r("pageDefinitions"), [I] = r("connectors"), [L] = te("actions.catalog"), [R] = r("hasServerRendering"), [z, B] = ee(!1), V = w === "server", H = V ? E && !T ? "action" : "connector" : "client", [[U, W, G]] = i([
+var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", headers: v = te, when: y, subType: b = "", mockData: x = "{}", credentials: S = "same-origin", runtime: C = "client", connector: w = "", action: T = "", endpoint: E = "", resource: D = "", limit: ae = "10", singleRecord: O = !1, filters: k = h, pagination: A = "none", pageParam: j = "page", renderWhileLoading: M = !1, cache: N = !1, staleTime: P = 30, gcTime: F = 300, onUpdate: I }) => {
+	let { resolvedTheme: L } = ne(), [R] = i("pageDefinitions"), [z] = i("connectors"), [B] = a("actions.catalog"), [V] = i("hasServerRendering"), [H, U] = r(!1), W = C === "server", G = W ? T && !w ? "action" : "connector" : "client", [[K, q, J]] = o([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.currentPageId"
-	]), K = t((e) => (t) => N?.(e, t), [N]), q = t((e) => N?.("query", e), [N]), J = t((e) => N?.("when", e), [N]), oe = t((e) => N?.("subType", e), [N]), se = t((e) => N?.("mockData", e), [N]), ce = t((e) => B(e.target.checked), []), le = t((e, t) => N?.("headers", t), [N]), ue = t((e) => {
+	]), Y = t((e) => (t) => I?.(e, t), [I]), oe = t((e) => I?.("query", e), [I]), se = t((e) => I?.("when", e), [I]), ce = t((e) => I?.("subType", e), [I]), le = t((e) => I?.("mockData", e), [I]), ue = t((e) => U(e.target.checked), []), de = t((e, t) => I?.("headers", t), [I]), fe = t((e) => {
 		if (e === "client") {
-			N?.("runtime", "client", !0);
+			I?.("runtime", "client", !0);
 			return;
 		}
-		N?.("runtime", "server", !0), N?.(e === "action" ? "connector" : "action", "");
-	}, [N]), Y = t((e) => N?.("singleRecord", e.target.checked), [N]), de = t((e) => N?.("renderWhileLoading", e.target.checked), [N]), fe = t((e) => N?.("filters", e), [N]), X = n(() => Object.values(I), [I]), Z = n(() => X.find((e) => e.identifier === T)?.manifest, [X, T]), pe = n(() => Object.keys(Z?.operators ?? {}), [Z]), Q = n(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = n(() => [...a(F, `${G}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [F, G]), me = n(() => [
-		...Object.keys(U),
-		...Object.keys(W),
+		I?.("runtime", "server", !0), I?.(e === "action" ? "connector" : "action", "");
+	}, [I]), pe = t((e) => I?.("singleRecord", e.target.checked), [I]), me = t((e) => I?.("renderWhileLoading", e.target.checked), [I]), he = t((e) => I?.("cache", e.target.checked), [I]), ge = t((e) => I?.("filters", e), [I]), X = n(() => Object.values(z), [z]), Z = n(() => X.find((e) => e.identifier === w)?.manifest, [X, w]), _e = n(() => Object.keys(Z?.operators ?? {}), [Z]), Q = n(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = n(() => [...ee(R, `${J}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [R, J]), ve = n(() => [
+		...Object.keys(K),
+		...Object.keys(q),
 		...$
 	].map((e) => ({
 		type: "token",
 		value: e
 	})), [
-		U,
-		W,
+		K,
+		q,
 		$
 	]);
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: "flex grow flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ c(p, {
-				value: H,
+			/* @__PURE__ */ l(p, {
+				value: G,
 				label: "Data Source",
-				onChange: ue,
+				onChange: fe,
 				size: "xs",
 				children: [
-					/* @__PURE__ */ s("option", {
+					/* @__PURE__ */ c("option", {
 						value: "client",
 						children: "Browser request"
 					}),
-					/* @__PURE__ */ s("option", {
+					/* @__PURE__ */ c("option", {
 						value: "connector",
 						children: "Connector (server-side)"
 					}),
-					/* @__PURE__ */ s("option", {
+					/* @__PURE__ */ c("option", {
 						value: "action",
 						children: "Server action (server-side)"
 					})
 				]
 			}),
-			/* @__PURE__ */ c("span", {
+			/* @__PURE__ */ l("span", {
 				className: "text-xs text-gray-500 dark:text-zinc-400",
 				children: [
-					H === "connector" && "The server calls the API and hands the page its records. The endpoint and the credential never reach the browser, and the content is in the HTML search engines see.",
-					H === "action" && "A flow runs on the server and hands the page whatever its output step returns — for the read a connector cannot express: two calls joined, a computed field, a shape that depends on who is looking. It is fed this page’s route and query params.",
-					H === "client" && "The browser calls the URL directly. Anything it needs to authenticate with is visible to the visitor, and the content is not in the initial HTML."
+					G === "connector" && "The server calls the API and hands the page its records. The endpoint and the credential never reach the browser, and the content is in the HTML search engines see.",
+					G === "action" && "A flow runs on the server and hands the page whatever its output step returns — for the read a connector cannot express: two calls joined, a computed field, a shape that depends on who is looking. It is fed this page’s route and query params.",
+					G === "client" && "The browser calls the URL directly. Anything it needs to authenticate with is visible to the visitor, and the content is not in the initial HTML."
 				]
 			}),
-			H === "action" && /* @__PURE__ */ c(o, { children: [L?.length === 0 && /* @__PURE__ */ s("div", {
+			G === "action" && /* @__PURE__ */ l(s, { children: [B?.length === 0 && /* @__PURE__ */ c("div", {
 				className: "rounded-sm border border-gray-300 p-2 text-xs text-gray-500 dark:border-zinc-600 dark:text-zinc-400",
 				children: "No actions yet. Add one in the Actions panel and give it a “While a page renders” trigger — that is the way in this element uses."
-			}), /* @__PURE__ */ c(p, {
-				value: E,
+			}), /* @__PURE__ */ l(p, {
+				value: T,
 				label: "Action",
-				onChange: K("action"),
+				onChange: Y("action"),
 				size: "xs",
-				children: [/* @__PURE__ */ s("option", {
+				children: [/* @__PURE__ */ c("option", {
 					value: "",
 					children: "Select an action…"
-				}), (L ?? []).map((e) => /* @__PURE__ */ s("option", {
+				}), (B ?? []).map((e) => /* @__PURE__ */ c("option", {
 					value: e.identifier,
 					children: e.name
 				}, e.identifier))]
 			})] }),
-			V && !R && /* @__PURE__ */ s("div", {
+			W && !V && /* @__PURE__ */ c("div", {
 				className: "rounded-sm border border-yellow-300 bg-yellow-50 p-2 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200",
 				children: "This space has no server-rendered deployment. It resolves here in the builder, but a published page would have no server to resolve it — publish with a Plitzi SSR credential, or read the API from the browser instead."
 			}),
-			H === "connector" && /* @__PURE__ */ c(o, { children: [
-				X.length === 0 && /* @__PURE__ */ s("div", {
+			G === "connector" && /* @__PURE__ */ l(s, { children: [
+				X.length === 0 && /* @__PURE__ */ c("div", {
 					className: "rounded-sm border border-gray-300 p-2 text-xs text-gray-500 dark:border-zinc-600 dark:text-zinc-400",
 					children: "No connectors yet. Add one in the Connectors panel — it holds the API endpoints, and the credential stays on the server."
 				}),
-				/* @__PURE__ */ c(p, {
-					value: T,
+				/* @__PURE__ */ l(p, {
+					value: w,
 					label: "Connector",
-					onChange: K("connector"),
+					onChange: Y("connector"),
 					size: "xs",
-					children: [/* @__PURE__ */ s("option", {
+					children: [/* @__PURE__ */ c("option", {
 						value: "",
 						children: "Select a connector…"
-					}), X.map((e) => /* @__PURE__ */ s("option", {
+					}), X.map((e) => /* @__PURE__ */ c("option", {
 						value: e.identifier,
 						children: e.name
 					}, e.identifier))]
 				}),
-				Q.length > 1 && /* @__PURE__ */ s(p, {
-					value: D,
+				Q.length > 1 && /* @__PURE__ */ c(p, {
+					value: E,
 					label: "Endpoint",
-					onChange: K("endpoint"),
+					onChange: Y("endpoint"),
 					size: "xs",
-					children: Q.map((e) => /* @__PURE__ */ s("option", {
+					children: Q.map((e) => /* @__PURE__ */ c("option", {
 						value: e,
 						children: e
 					}, e))
 				}),
-				/* @__PURE__ */ s(f, {
-					value: ie,
+				/* @__PURE__ */ c(f, {
+					value: D,
 					label: "Resource",
 					placeholder: "posts",
 					title: "The collection read through the connector — what {{resource}} becomes in the endpoint path.",
-					onChange: K("resource"),
+					onChange: Y("resource"),
 					size: "xs"
 				}),
-				/* @__PURE__ */ s(e, {
+				/* @__PURE__ */ c(e, {
 					value: k,
-					operators: pe,
-					onChange: fe
+					operators: _e,
+					onChange: ge
 				}),
-				/* @__PURE__ */ s(m, {
+				/* @__PURE__ */ c(m, {
 					checked: O,
 					size: "sm",
 					label: "Single record (detail page)",
-					onChange: Y
+					onChange: pe
 				}),
-				!O && /* @__PURE__ */ c(o, { children: [
-					/* @__PURE__ */ s(f, {
+				!O && /* @__PURE__ */ l(s, { children: [
+					/* @__PURE__ */ c(f, {
 						value: ae,
 						label: "Records per page",
-						onChange: K("limit"),
+						onChange: Y("limit"),
 						size: "xs"
 					}),
-					/* @__PURE__ */ c(p, {
+					/* @__PURE__ */ l(p, {
 						value: A,
 						label: "Pagination",
-						onChange: K("pagination"),
+						onChange: Y("pagination"),
 						size: "xs",
 						children: [
-							/* @__PURE__ */ s("option", {
+							/* @__PURE__ */ c("option", {
 								value: "none",
 								children: "None"
 							}),
-							/* @__PURE__ */ s("option", {
+							/* @__PURE__ */ c("option", {
 								value: "url",
 								children: "URL (indexable)"
 							}),
-							/* @__PURE__ */ s("option", {
+							/* @__PURE__ */ c("option", {
 								value: "append",
 								children: "Load more"
 							})
 						]
 					}),
-					A !== "none" && /* @__PURE__ */ s(f, {
+					A !== "none" && /* @__PURE__ */ c(f, {
 						value: j,
 						label: "Page parameter",
 						title: "Query-string key this list pages on. Give each list its own so they page independently.",
-						onChange: K("pageParam"),
+						onChange: Y("pageParam"),
 						size: "xs"
 					})
 				] })
 			] }),
-			!V && /* @__PURE__ */ c(o, { children: [
-				/* @__PURE__ */ c("div", {
+			!W && /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ l("div", {
 					className: "flex flex-col",
-					children: [/* @__PURE__ */ s("label", { children: "Query" }), /* @__PURE__ */ s(d, {
+					children: [/* @__PURE__ */ c("label", { children: "Query" }), /* @__PURE__ */ c(d, {
 						className: "font-rubik min-h-6.5 basis-auto rounded-sm border border-gray-300 px-1 text-xs",
 						value: g,
-						theme: P,
+						theme: L,
 						mode: "text",
-						autoComplete: me,
+						autoComplete: ve,
 						lineWrapping: !0,
 						multiline: !1,
-						onChange: q
+						onChange: oe
 					})]
 				}),
-				/* @__PURE__ */ c(p, {
+				/* @__PURE__ */ l(p, {
 					value: _,
 					label: "Method",
-					onChange: K("method"),
+					onChange: Y("method"),
 					size: "xs",
-					children: [/* @__PURE__ */ s("option", {
+					children: [/* @__PURE__ */ c("option", {
 						value: "get",
 						children: "Get"
-					}), /* @__PURE__ */ s("option", {
+					}), /* @__PURE__ */ c("option", {
 						value: "post",
 						children: "Post"
 					})]
 				}),
-				/* @__PURE__ */ s(f, {
-					value: v,
+				/* @__PURE__ */ c(f, {
+					value: ie,
 					label: "Access Token",
 					title: "Bind this to the signed-in visitor's token. A value typed here is saved in the page and served to\n              every visitor — put anything secret behind a connector instead.",
-					onChange: K("accessToken"),
+					onChange: Y("accessToken"),
 					size: "xs"
 				}),
-				/* @__PURE__ */ c(p, {
-					value: C,
+				/* @__PURE__ */ l(p, {
+					value: S,
 					label: "Include Credentials",
-					onChange: K("credentials"),
+					onChange: Y("credentials"),
 					size: "xs",
 					children: [
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "include",
 							children: "Include"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "omit",
 							children: "Omit"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "same-origin",
 							children: "Same Origin"
 						})
 					]
 				}),
-				/* @__PURE__ */ s(m, {
+				/* @__PURE__ */ c(m, {
+					checked: N,
+					size: "sm",
+					label: "Cache responses",
+					onChange: he
+				}),
+				N && /* @__PURE__ */ l(s, { children: [
+					/* @__PURE__ */ c(f, {
+						value: String(P),
+						label: "Fresh for (s)",
+						title: "How long an answer is reused without asking again — here and by every provider requesting the\n                  same thing. Past it, the answer stays on screen while a fresh one is fetched. 0 asks on every mount.",
+						onChange: Y("staleTime"),
+						size: "xs"
+					}),
+					/* @__PURE__ */ c(f, {
+						value: String(F),
+						label: "Keep unused for (s)",
+						title: "How long an answer nobody is showing is kept, so coming back to it within that time paints at once.",
+						onChange: Y("gcTime"),
+						size: "xs"
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "rounded-sm border border-gray-300 p-2 text-xs text-gray-500 dark:border-zinc-600 dark:text-zinc-400",
+						children: "A completed server action refreshes every cached request, in case it changed what they read. On its step, “Refresh cached requests” can name only the containers it affects, or none for an action that only reads. A webhook step can do the same."
+					})
+				] }),
+				/* @__PURE__ */ c(m, {
 					checked: M,
 					size: "sm",
 					label: "Render children while loading",
-					onChange: de
+					onChange: me
 				})
 			] }),
-			/* @__PURE__ */ s(m, {
-				checked: z,
+			/* @__PURE__ */ c(m, {
+				checked: H,
 				size: "sm",
 				label: "Advanced Settings",
-				onChange: ce
+				onChange: ue
 			}),
-			z && /* @__PURE__ */ c(o, { children: [
-				/* @__PURE__ */ s(re, {
-					value: Object.entries(y),
+			H && /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c(re, {
+					value: Object.entries(v),
 					label: "Headers",
-					onChange: le,
+					onChange: de,
 					size: "xs"
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l("div", {
 					className: "flex flex-col",
-					children: [/* @__PURE__ */ s("label", { children: "When to perform query request" }), /* @__PURE__ */ s(u, {
+					children: [/* @__PURE__ */ c("label", { children: "When to perform query request" }), /* @__PURE__ */ c(u, {
 						direction: "vertical",
 						className: "w-full",
 						size: "xs",
-						query: b,
-						onChange: J,
+						query: y,
+						onChange: se,
 						showBranches: !0
 					})]
 				}),
-				/* @__PURE__ */ c(p, {
-					value: x,
+				/* @__PURE__ */ l(p, {
+					value: b,
 					label: "Container Tag",
-					onChange: oe,
+					onChange: ce,
 					size: "xs",
 					children: [
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "",
 							children: "None"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "div",
 							children: "Div"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "header",
 							children: "Header"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "footer",
 							children: "Footer"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "nav",
 							children: "Nav"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "main",
 							children: "Main"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "section",
 							children: "Section"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "article",
 							children: "Article"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "aside",
 							children: "Aside"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "address",
 							children: "Address"
 						}),
-						/* @__PURE__ */ s("option", {
+						/* @__PURE__ */ c("option", {
 							value: "figure",
 							children: "Figure"
 						})
 					]
 				}),
-				/* @__PURE__ */ s("div", { className: "my-2 h-px w-full border border-gray-300 bg-gray-300" }),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ c("div", { className: "my-2 h-px w-full border border-gray-300 bg-gray-300" }),
+				/* @__PURE__ */ l("div", {
 					className: "flex min-h-50 grow flex-col",
-					children: [/* @__PURE__ */ s("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ s(d, {
-						value: S,
-						theme: P,
+					children: [/* @__PURE__ */ c("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ c(d, {
+						value: x,
+						theme: L,
 						mode: "json",
 						lineWrapping: !0,
-						onChange: se
+						onChange: le
 					})]
 				})
 			] })

package/dist/elements/provider/ApiContainer/declaration.d.ts

@@ -29,6 +29,9 @@ declare const declaration: {
             readonly pagination: "none";
             readonly pageParam: "page";
             readonly renderWhileLoading: false;
+            readonly cache: false;
+            readonly staleTime: 30;
+            readonly gcTime: 300;
         };
         readonly definition: {
             readonly label: "Api Container";

package/dist/elements/provider/ApiContainer/declaration.mjs

@@ -18,12 +18,15 @@ var t = e()({
 			filters: [],
 			pagination: "none",
 			pageParam: "page",
-			renderWhileLoading: !1
+			renderWhileLoading: !1,
+			cache: !1,
+			staleTime: 30,
+			gcTime: 300
 		},
 		definition: {
 			label: "Api Container",
 			type: "apiContainer",
-			description: "Fetches data from a backend HTTP API (its `query`/`method`/`credentials`) and exposes the response as a data source ITS DESCENDANTS bind to (source `apiContainer_<id>.data`; only elements inside it can consume it). This is how you get backend data into the frontend. Its `mockData` prop is builder-only sample data — the published runtime fetches the real `query`, so always set a real query for production.",
+			description: "Fetches data from a backend HTTP API (its `query`/`method`/`credentials`) and exposes the response as a data source ITS DESCENDANTS bind to (source `apiContainer_<id>.data`; only elements inside it can consume it). This is how you get backend data into the frontend. Its `mockData` prop is builder-only sample data — the published runtime fetches the real `query`, so always set a real query for production. With `cache: true` a browser request is kept for `staleTime` seconds (default 30) and shared with every provider asking the same thing; it is off unless set. A flow refreshes it with `performQuery` or the global `invalidateQueries` step.",
 			items: [],
 			bindings: {},
 			styleSelectors: { base: "" },

package/dist/elements/provider/ApiContainer/hooks/useApi.d.ts

@@ -1,13 +1,31 @@
+export type ApiResponse = {
+    status: number;
+    data: unknown;
+};
 export type UseApiProps = {
     url?: string;
     method?: 'get' | 'post' | 'put' | 'delete' | 'patch';
+    /** Answers instead of the network — what the builder renders with while the page is being edited. */
     mock?: Record<string, unknown> | string;
-    params?: Record<string, string | Blob>;
     customHeaders?: Record<string, string>;
     enabled?: boolean;
     credentials?: RequestCredentials;
+    /**
+     * Keep answers in the page's query cache and share them with every provider asking the same thing. Off, each
+     * provider asks for itself on every mount and forgets the answer when it unmounts — the behaviour a page gets
+     * unless its author opted in.
+     */
+    cache?: boolean;
+    /** With `cache`: how long an answer is served without asking again, in seconds. `0` asks on every mount. */
+    staleTime?: number | string;
+    /** With `cache`: how long an answer nobody renders is kept, in seconds. */
+    gcTime?: number | string;
+    /** What an invalidation can name this request by — an api container gives its own id. */
+    tags?: readonly string[];
 };
-declare const useApi: ({ url, method, mock, params, customHeaders, enabled, credentials }: UseApiProps) => {
+export declare const DEFAULT_STALE_TIME = 30;
+export declare const DEFAULT_GC_TIME = 300;
+declare const useApi: ({ url, method, mock, customHeaders, enabled, credentials, cache, staleTime, gcTime, tags }: UseApiProps) => {
     /**
      * Nothing has been answered yet, so there is nothing truthful to render.
      *
@@ -19,12 +37,9 @@ declare const useApi: ({ url, method, mock, params, customHeaders, enabled, cred
     isLoading: boolean;
     /** A request is in flight, first or not. What a spinner binds to. */
     isFetching: boolean;
-    data: {
-        status: number;
-        data: unknown;
-    } | undefined;
+    data: ApiResponse | undefined;
     refetch: () => void;
-    isSuccess: boolean | undefined;
-    isError: boolean | undefined;
+    isSuccess: boolean;
+    isError: boolean;
 };
 export default useApi;

package/dist/elements/provider/ApiContainer/hooks/useApi.mjs

@@ -1,15 +1,17 @@
-import { useCallback as e, useEffect as t, useState as n } from "react";
+import { useCallback as e, useId as t, useMemo as n } from "react";
 import { emptyObject as r } from "@plitzi/sdk-shared/helpers/utils";
 import { authFailureFromResponse as i, reportAuthFailure as a } from "@plitzi/sdk-shared/auth";
+import { requestKey as o, useQuery as s } from "@plitzi/sdk-shared/queries";
 //#region src/elements/provider/ApiContainer/hooks/useApi.ts
-var o = async ({ url: e = "", method: t = "get", credentials: n = "same-origin", params: o = r, customHeaders: s = r, mock: c = r } = {}) => {
-	if (c && c !== "{}" && c !== r) try {
-		return typeof c == "string" ? {
-			status: 200,
-			data: JSON.parse(c)
-		} : {
+var c = 30, l = 300, u = (e) => !!e && e !== "{}" && e !== r, d = (e) => {
+	if (typeof e != "string") return {
+		status: 200,
+		data: e
+	};
+	try {
+		return {
 			status: 200,
-			data: c
+			data: JSON.parse(e)
 		};
 	} catch (e) {
 		return {
@@ -17,32 +19,21 @@ var o = async ({ url: e = "", method: t = "get", credentials: n = "same-origin",
 			data: e.message
 		};
 	}
-	let l = new Headers();
-	if (l.append("Content-Type", "application/json"), Object.keys(s).length > 0 && Object.keys(s).forEach((e) => {
-		l.append(e, s[e]);
-	}), !e) return {
+}, f = async (e, t, n, r) => {
+	if (!e) return {
 		status: 400,
 		data: "URL is required"
 	};
-	Object.values(o).forEach((e) => {
-		if (e instanceof Blob && l.get("Content-Type") !== "multipart/form-data") {
-			l.set("Content-Type", "multipart/form-data");
-			return;
-		}
-	});
-	let u = new FormData();
-	Object.entries(o).forEach(([e, t]) => {
-		u.append(e, t);
-	});
-	let d = {
+	let o = new Headers(r);
+	o.has("Content-Type") || o.set("Content-Type", "application/json");
+	let s = {
 		method: t,
 		credentials: n,
-		headers: l,
-		body: u
+		headers: o
 	};
-	l.get("Content-Type") === "application/json" && (d.body = JSON.stringify(o)), t === "get" && delete d.body;
+	t !== "get" && (s.body = "{}");
 	try {
-		let t = await fetch(e, d), n = await t.json(), r = i(t.status, n);
+		let t = await fetch(e, s), n = await t.json(), r = i(t.status, n);
 		return r && a({
 			reason: r,
 			url: e
@@ -56,44 +47,52 @@ var o = async ({ url: e = "", method: t = "get", credentials: n = "same-origin",
 			data: e.message
 		};
 	}
-}, s = ({ url: i = "", method: a = "get", mock: s = r, params: c = r, customHeaders: l = r, enabled: u = !0, credentials: d = "same-origin" }) => {
-	let [f, p] = n(u), [m, h] = n(), g = e(() => {
-		u && (p(!0), o({
-			url: i,
+}, p = (e) => e.status < 400, m = (e, t) => {
+	let n = typeof e == "number" ? e : Number(e);
+	return (Number.isFinite(n) && n >= 0 ? n : t) * 1e3;
+}, h = ({ url: i = "", method: a = "get", mock: c, customHeaders: l = r, enabled: h = !0, credentials: g = "same-origin", cache: _ = !1, staleTime: v = 30, gcTime: y = 300, tags: b }) => {
+	let x = u(c), S = t(), C = n(() => {
+		if (x || !i) return;
+		let e = o({
 			method: a,
-			credentials: d,
-			mock: s,
-			customHeaders: l,
-			params: c
-		}).then((e) => h(e)).catch((e) => h({
-			status: 500,
-			data: e.message
-		})).finally(() => p(!1)));
+			url: i,
+			credentials: g,
+			headers: l
+		});
+		return _ ? e : `${e}#${S}`;
 	}, [
-		u,
+		x,
 		i,
 		a,
-		d,
-		s,
+		g,
 		l,
-		c
-	]);
-	return t(() => {
-		g();
-	}, [
-		u,
-		c,
-		s,
+		_,
+		S
+	]), w = e(() => f(i, a, g, l), [
 		i,
-		g
-	]), {
-		isLoading: f && m === void 0,
-		isFetching: f,
-		data: m,
-		refetch: g,
-		isSuccess: !f && m && m.status < 400,
-		isError: !f && m && m.status >= 400
+		a,
+		g,
+		l
+	]), T = s({
+		key: C,
+		meta: {
+			url: i,
+			tags: b
+		},
+		fetcher: w,
+		enabled: h,
+		staleTime: _ ? m(v, 30) : 0,
+		gcTime: _ ? m(y, 300) : 0,
+		isCacheable: p
+	}), E = n(() => x ? d(c) : void 0, [x, c]), D = h && E ? E : T.data, O = !E && T.isFetching;
+	return {
+		isLoading: O && D === void 0,
+		isFetching: O,
+		data: D,
+		refetch: T.refetch,
+		isSuccess: !O && !!D && D.status < 400,
+		isError: !O && !!D && D.status >= 400
 	};
 };
 //#endregion
-export { s as default };
+export { l as DEFAULT_GC_TIME, c as DEFAULT_STALE_TIME, h as default };

package/dist/elements/provider/ApiContainer/hooks/useProviderWrite.mjs

@@ -1,34 +1,35 @@
 import { useCallback as e } from "react";
 import { authFailureFromResponse as t, reportAuthFailure as n } from "@plitzi/sdk-shared/auth";
+import { invalidateQueries as r } from "@plitzi/sdk-shared/queries";
 //#region src/elements/provider/ApiContainer/hooks/useProviderWrite.ts
-var r = ({ elementId: r, enabled: i, actionPath: a = "/_action", onDone: o }) => ({ writeRecord: e(async (e = {}) => {
-	let { action: s, recordId: c, ...l } = e;
-	if (!i || typeof s != "string" || !s) return;
-	let u = await fetch(a, {
+var i = ({ elementId: i, enabled: a, actionPath: o = "/_action", onDone: s }) => ({ writeRecord: e(async (e = {}) => {
+	let { action: c, recordId: l, ...u } = e;
+	if (!a || typeof c != "string" || !c) return;
+	let d = await fetch(o, {
 		method: "POST",
 		headers: { "Content-Type": "application/json" },
 		credentials: "same-origin",
 		body: JSON.stringify({
-			elementId: r,
-			action: s,
-			recordId: c,
-			values: l
+			elementId: i,
+			action: c,
+			recordId: l,
+			values: u
 		})
 	});
-	if (!u.ok) {
-		let e = t(u.status, await u.json().catch(() => void 0));
+	if (!d.ok) {
+		let e = t(d.status, await d.json().catch(() => void 0));
 		throw e && n({
 			reason: e,
-			url: a
-		}), Error(`Write failed with status ${u.status}`);
+			url: o
+		}), Error(`Write failed with status ${d.status}`);
 	}
-	let d = await u.json();
-	return await o?.(), d.record;
+	let f = await d.json();
+	return r(), await s?.(), f.record;
 }, [
-	a,
-	r,
+	o,
 	i,
-	o
+	a,
+	s
 ]) });
 //#endregion
-export { r as default };
+export { i as default };

package/dist/elements/provider/ApiContainer/index.d.ts

@@ -20,6 +20,9 @@ declare const ApiContainer: {
             readonly pagination: "none";
             readonly pageParam: "page";
             readonly renderWhileLoading: false;
+            readonly cache: false;
+            readonly staleTime: 30;
+            readonly gcTime: 300;
         };
         readonly definition: {
             readonly label: "Api Container";

package/dist/index.d.ts

@@ -3145,6 +3145,9 @@ export declare const defaultElements: {
                 readonly pagination: "none";
                 readonly pageParam: "page";
                 readonly renderWhileLoading: false;
+                readonly cache: false;
+                readonly staleTime: 30;
+                readonly gcTime: 300;
             };
             readonly definition: {
                 readonly label: "Api Container";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-elements",
-  "version": "0.35.10",
+  "version": "0.36.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -984,15 +984,15 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@plitzi/nexus": "^1.1.4",
+    "@plitzi/nexus": "^1.2.0",
     "@plitzi/plitzi-ui": "^1.6.21",
-    "@plitzi/sdk-auth": "0.35.10",
-    "@plitzi/sdk-dev-tools": "0.35.10",
-    "@plitzi/sdk-event-bridge": "0.35.10",
-    "@plitzi/sdk-interactions": "0.35.10",
-    "@plitzi/sdk-navigation": "0.35.10",
-    "@plitzi/sdk-schema": "0.35.10",
-    "@plitzi/sdk-shared": "0.35.10",
+    "@plitzi/sdk-auth": "0.36.0",
+    "@plitzi/sdk-dev-tools": "0.36.0",
+    "@plitzi/sdk-event-bridge": "0.36.0",
+    "@plitzi/sdk-interactions": "0.36.0",
+    "@plitzi/sdk-navigation": "0.36.0",
+    "@plitzi/sdk-schema": "0.36.0",
+    "@plitzi/sdk-shared": "0.36.0",
     "clsx": "^2.1.1",
     "immer": "^11.1.18"
   },