@plitzi/sdk-elements 0.33.2 → 0.34.1

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

@@ -1,283 +1,320 @@
 import e from "./components/FiltersInput/index.mjs";
-import { use as t, useCallback as n, useMemo as r, useState as i } from "react";
-import { useBuilderStore as a, useSdkStore as o } from "@plitzi/sdk-shared/store";
-import { get as s } from "@plitzi/plitzi-ui/helpers";
-import { emptyObject as ee } from "@plitzi/sdk-shared/helpers/utils";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@plitzi/plitzi-ui/QueryBuilder";
-import f from "@plitzi/plitzi-ui/CodeMirror";
-import { ThemeContext as te } from "@plitzi/sdk-shared/theme/ThemeProvider";
-import p from "@plitzi/plitzi-ui/Input";
-import m from "@plitzi/plitzi-ui/Select";
-import h from "@plitzi/plitzi-ui/KVInput";
-import g from "@plitzi/plitzi-ui/Switch";
+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 u from "@plitzi/plitzi-ui/QueryBuilder";
+import d from "@plitzi/plitzi-ui/CodeMirror";
+import f from "@plitzi/plitzi-ui/Input";
+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 _ = [], v = ({ query: v = "", method: y = "get", accessToken: b = "", headers: x = ee, when: S, subType: C = "div", mockData: ne = "{}", credentials: w = "same-origin", runtime: T = "client", connector: E = "", endpoint: re = "", resource: ie = "", limit: D = "10", singleRecord: O = !1, filters: k = _, pagination: A = "none", pageParam: j = "page", renderWhileLoading: M = !1, onUpdate: N }) => {
-	let { theme: P } = t(te), [F] = a("pageDefinitions"), [I] = a("connectors"), [L] = a("hasServerRendering"), [R, z] = i(!1), B = T === "server", [[V, H, U]] = o([
+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([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.currentPageId"
-	]), W = n((e) => (t) => N?.(e, t), [N]), G = n((e) => N?.("query", e), [N]), K = n((e) => N?.("when", e), [N]), q = n((e) => N?.("mockData", e), [N]), J = n((e) => z(e.target.checked), []), Y = n((e, t) => N?.("headers", t), [N]), ae = n((e) => N?.("runtime", e, !0), [N]), oe = n((e) => N?.("singleRecord", e.target.checked), [N]), se = n((e) => N?.("renderWhileLoading", e.target.checked), [N]), ce = n((e) => N?.("filters", e), [N]), X = r(() => Object.values(I), [I]), Z = r(() => X.find((e) => e.identifier === E)?.manifest, [X, E]), le = r(() => Object.keys(Z?.operators ?? {}), [Z]), Q = r(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = r(() => [...s(F, `${U}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [F, U]), ue = r(() => [
-		...Object.keys(V),
-		...Object.keys(H),
+	]), 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) => {
+		if (e === "client") {
+			N?.("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),
 		...$
 	].map((e) => ({
 		type: "token",
 		value: e
 	})), [
-		V,
-		H,
+		U,
+		W,
 		$
 	]);
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "flex grow flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ u(m, {
-				value: T,
+			/* @__PURE__ */ c(p, {
+				value: H,
 				label: "Data Source",
-				onChange: ae,
+				onChange: ue,
 				size: "xs",
-				children: [/* @__PURE__ */ l("option", {
-					value: "client",
-					children: "Browser request"
-				}), /* @__PURE__ */ l("option", {
-					value: "server",
-					children: "Connector (server-side)"
-				})]
+				children: [
+					/* @__PURE__ */ s("option", {
+						value: "client",
+						children: "Browser request"
+					}),
+					/* @__PURE__ */ s("option", {
+						value: "connector",
+						children: "Connector (server-side)"
+					}),
+					/* @__PURE__ */ s("option", {
+						value: "action",
+						children: "Server action (server-side)"
+					})
+				]
 			}),
-			/* @__PURE__ */ l("span", {
+			/* @__PURE__ */ c("span", {
 				className: "text-xs text-gray-500 dark:text-zinc-400",
-				children: B ? "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." : "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."
+				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."
+				]
 			}),
-			B && /* @__PURE__ */ u(c, { children: [
-				!L && /* @__PURE__ */ l("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. Connectors resolve here in the builder, but a published page would have no server to resolve them — publish with a Plitzi SSR credential, or read the API from the browser instead."
-				}),
-				X.length === 0 && /* @__PURE__ */ l("div", {
+			H === "action" && /* @__PURE__ */ c(o, { children: [L?.length === 0 && /* @__PURE__ */ s("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,
+				label: "Action",
+				onChange: K("action"),
+				size: "xs",
+				children: [/* @__PURE__ */ s("option", {
+					value: "",
+					children: "Select an action…"
+				}), (L ?? []).map((e) => /* @__PURE__ */ s("option", {
+					value: e.identifier,
+					children: e.name
+				}, e.identifier))]
+			})] }),
+			V && !R && /* @__PURE__ */ s("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", {
 					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__ */ u(m, {
-					value: E,
+				/* @__PURE__ */ c(p, {
+					value: T,
 					label: "Connector",
-					onChange: W("connector"),
+					onChange: K("connector"),
 					size: "xs",
-					children: [/* @__PURE__ */ l("option", {
+					children: [/* @__PURE__ */ s("option", {
 						value: "",
 						children: "Select a connector…"
-					}), X.map((e) => /* @__PURE__ */ l("option", {
+					}), X.map((e) => /* @__PURE__ */ s("option", {
 						value: e.identifier,
 						children: e.name
 					}, e.identifier))]
 				}),
-				Q.length > 1 && /* @__PURE__ */ l(m, {
-					value: re,
+				Q.length > 1 && /* @__PURE__ */ s(p, {
+					value: D,
 					label: "Endpoint",
-					onChange: W("endpoint"),
+					onChange: K("endpoint"),
 					size: "xs",
-					children: Q.map((e) => /* @__PURE__ */ l("option", {
+					children: Q.map((e) => /* @__PURE__ */ s("option", {
 						value: e,
 						children: e
 					}, e))
 				}),
-				/* @__PURE__ */ l(p, {
+				/* @__PURE__ */ s(f, {
 					value: ie,
 					label: "Resource",
 					placeholder: "posts",
 					title: "The collection read through the connector — what {{resource}} becomes in the endpoint path.",
-					onChange: W("resource"),
+					onChange: K("resource"),
 					size: "xs"
 				}),
-				/* @__PURE__ */ l(e, {
+				/* @__PURE__ */ s(e, {
 					value: k,
-					operators: le,
-					onChange: ce
+					operators: pe,
+					onChange: fe
 				}),
-				/* @__PURE__ */ l(g, {
+				/* @__PURE__ */ s(m, {
 					checked: O,
 					size: "sm",
 					label: "Single record (detail page)",
-					onChange: oe
+					onChange: Y
 				}),
-				!O && /* @__PURE__ */ u(c, { children: [
-					/* @__PURE__ */ l(p, {
-						value: D,
+				!O && /* @__PURE__ */ c(o, { children: [
+					/* @__PURE__ */ s(f, {
+						value: ae,
 						label: "Records per page",
-						onChange: W("limit"),
+						onChange: K("limit"),
 						size: "xs"
 					}),
-					/* @__PURE__ */ u(m, {
+					/* @__PURE__ */ c(p, {
 						value: A,
 						label: "Pagination",
-						onChange: W("pagination"),
+						onChange: K("pagination"),
 						size: "xs",
 						children: [
-							/* @__PURE__ */ l("option", {
+							/* @__PURE__ */ s("option", {
 								value: "none",
 								children: "None"
 							}),
-							/* @__PURE__ */ l("option", {
+							/* @__PURE__ */ s("option", {
 								value: "url",
 								children: "URL (indexable)"
 							}),
-							/* @__PURE__ */ l("option", {
+							/* @__PURE__ */ s("option", {
 								value: "append",
 								children: "Load more"
 							})
 						]
 					}),
-					A !== "none" && /* @__PURE__ */ l(p, {
+					A !== "none" && /* @__PURE__ */ s(f, {
 						value: j,
 						label: "Page parameter",
 						title: "Query-string key this list pages on. Give each list its own so they page independently.",
-						onChange: W("pageParam"),
+						onChange: K("pageParam"),
 						size: "xs"
 					})
 				] })
 			] }),
-			!B && /* @__PURE__ */ u(c, { children: [
-				/* @__PURE__ */ u("div", {
+			!V && /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ c("div", {
 					className: "flex flex-col",
-					children: [/* @__PURE__ */ l("label", { children: "Query" }), /* @__PURE__ */ l(f, {
+					children: [/* @__PURE__ */ s("label", { children: "Query" }), /* @__PURE__ */ s(d, {
 						className: "font-rubik min-h-6.5 basis-auto rounded-sm border border-gray-300 px-1 text-xs",
-						value: v,
-						theme: P === "dark" ? "dark" : "light",
+						value: g,
+						theme: P,
 						mode: "text",
-						autoComplete: ue,
+						autoComplete: me,
 						lineWrapping: !0,
 						multiline: !1,
-						onChange: G
+						onChange: q
 					})]
 				}),
-				/* @__PURE__ */ u(m, {
-					value: y,
+				/* @__PURE__ */ c(p, {
+					value: _,
 					label: "Method",
-					onChange: W("method"),
+					onChange: K("method"),
 					size: "xs",
-					children: [/* @__PURE__ */ l("option", {
+					children: [/* @__PURE__ */ s("option", {
 						value: "get",
 						children: "Get"
-					}), /* @__PURE__ */ l("option", {
+					}), /* @__PURE__ */ s("option", {
 						value: "post",
 						children: "Post"
 					})]
 				}),
-				/* @__PURE__ */ l(p, {
-					value: b,
+				/* @__PURE__ */ s(f, {
+					value: v,
 					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: W("accessToken"),
+					onChange: K("accessToken"),
 					size: "xs"
 				}),
-				/* @__PURE__ */ u(m, {
-					value: w,
+				/* @__PURE__ */ c(p, {
+					value: C,
 					label: "Include Credentials",
-					onChange: W("credentials"),
+					onChange: K("credentials"),
 					size: "xs",
 					children: [
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "include",
 							children: "Include"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "omit",
 							children: "Omit"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "same-origin",
 							children: "Same Origin"
 						})
 					]
 				}),
-				/* @__PURE__ */ l(g, {
+				/* @__PURE__ */ s(m, {
 					checked: M,
 					size: "sm",
 					label: "Render children while loading",
-					onChange: se
+					onChange: de
 				})
 			] }),
-			/* @__PURE__ */ l(g, {
-				checked: R,
+			/* @__PURE__ */ s(m, {
+				checked: z,
 				size: "sm",
 				label: "Advanced Settings",
-				onChange: J
+				onChange: ce
 			}),
-			R && /* @__PURE__ */ u(c, { children: [
-				/* @__PURE__ */ l(h, {
-					value: Object.entries(x),
+			z && /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ s(re, {
+					value: Object.entries(y),
 					label: "Headers",
-					onChange: Y,
+					onChange: le,
 					size: "xs"
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ c("div", {
 					className: "flex flex-col",
-					children: [/* @__PURE__ */ l("label", { children: "When to perform query request" }), /* @__PURE__ */ l(d, {
+					children: [/* @__PURE__ */ s("label", { children: "When to perform query request" }), /* @__PURE__ */ s(u, {
 						direction: "vertical",
 						className: "w-full",
 						size: "xs",
-						query: S,
-						onChange: K,
+						query: b,
+						onChange: J,
 						showBranches: !0
 					})]
 				}),
-				/* @__PURE__ */ u(m, {
-					value: C,
+				/* @__PURE__ */ c(p, {
+					value: x,
 					label: "Container Tag",
-					onChange: W("subType"),
+					onChange: oe,
 					size: "xs",
 					children: [
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
+							value: "",
+							children: "None"
+						}),
+						/* @__PURE__ */ s("option", {
 							value: "div",
 							children: "Div"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "header",
 							children: "Header"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "footer",
 							children: "Footer"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "nav",
 							children: "Nav"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "main",
 							children: "Main"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "section",
 							children: "Section"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "article",
 							children: "Article"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "aside",
 							children: "Aside"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "address",
 							children: "Address"
 						}),
-						/* @__PURE__ */ l("option", {
+						/* @__PURE__ */ s("option", {
 							value: "figure",
 							children: "Figure"
 						})
 					]
 				}),
-				/* @__PURE__ */ l("div", { className: "my-2 h-px w-full border border-gray-300 bg-gray-300" }),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ s("div", { className: "my-2 h-px w-full border border-gray-300 bg-gray-300" }),
+				/* @__PURE__ */ c("div", {
 					className: "flex min-h-50 grow flex-col",
-					children: [/* @__PURE__ */ l("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ l(f, {
-						value: ne,
-						theme: P === "dark" ? "dark" : "light",
+					children: [/* @__PURE__ */ s("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ s(d, {
+						value: S,
+						theme: P,
 						mode: "json",
 						lineWrapping: !0,
-						onChange: q
+						onChange: se
 					})]
 				})
 			] })
@@ -285,4 +322,4 @@ var _ = [], v = ({ query: v = "", method: y = "get", accessToken: b = "", header
 	});
 };
 //#endregion
-export { v as default };
+export { g as default };

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

@@ -0,0 +1,77 @@
+import { ApiContainerProps } from './ApiContainer';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type ApiContainerAttributes = AuthorableAttributes<ApiContainerProps> & {
+    /**
+     * What this element asks of the action it names, on top of the page's own route and query params.
+     *
+     * Not a component prop, and it never will be: the action runs on the server, so this is read there and the
+     * element only ever sees what came back.
+     */
+    input?: Record<string, unknown>;
+};
+declare const declaration: {
+    readonly type: "apiContainer";
+    readonly sourceType: "apiContainer";
+    readonly content: {
+        readonly attributes: {
+            readonly query: "";
+            readonly method: "get";
+            readonly accessToken: "";
+            readonly mockData: "{}";
+            readonly subType: "";
+            readonly credentials: "same-origin";
+            readonly connector: "";
+            readonly resource: "";
+            readonly limit: "10";
+            readonly singleRecord: false;
+            readonly filters: readonly [];
+            readonly pagination: "none";
+            readonly pageParam: "page";
+            readonly renderWhileLoading: false;
+        };
+        readonly definition: {
+            readonly label: "Api Container";
+            readonly type: "apiContainer";
+            readonly description: string;
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "provider";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-server";
+        };
+        readonly defaultStyle: {
+            readonly name: "Api Container";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<ApiContainerAttributes>;
+export default declaration;

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

@@ -0,0 +1,60 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/provider/ApiContainer/declaration.ts
+var t = e()({
+	type: "apiContainer",
+	sourceType: "apiContainer",
+	content: {
+		attributes: {
+			query: "",
+			method: "get",
+			accessToken: "",
+			mockData: "{}",
+			subType: "",
+			credentials: "same-origin",
+			connector: "",
+			resource: "",
+			limit: "10",
+			singleRecord: !1,
+			filters: [],
+			pagination: "none",
+			pageParam: "page",
+			renderWhileLoading: !1
+		},
+		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.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "provider",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-server"
+		},
+		defaultStyle: {
+			name: "Api Container",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

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

@@ -8,7 +8,17 @@ export type UseApiProps = {
     credentials?: RequestCredentials;
 };
 declare const useApi: ({ url, method, mock, params, customHeaders, enabled, credentials }: UseApiProps) => {
+    /**
+     * Nothing has been answered yet, so there is nothing truthful to render.
+     *
+     * Distinct from `isFetching` on purpose: a REFETCH already has an answer on screen and it stays valid until
+     * the next one lands. Conflating the two makes every refresh unmount whatever the provider is feeding — the
+     * page collapses to nothing, the browser clamps the scroll to the top, and the content reappears a frame
+     * later. That reads as a flicker and a lost scroll position, which is not what "reload this list" means.
+     */
     isLoading: boolean;
+    /** A request is in flight, first or not. What a spinner binds to. */
+    isFetching: boolean;
     data: {
         status: number;
         data: unknown;