@plitzi/sdk-elements 0.37.8 → 0.37.10

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

@@ -3,61 +3,62 @@ import t from "../../../Element/hooks/useElement.mjs";
 import ee from "../../../Element/hooks/useRscData.mjs";
 import { RootElement as te } from "../../../Element/RootElement.mjs";
 import n from "./declaration.mjs";
-import { isEmptyAnswer as r } from "./helpers/isEmptyAnswer.mjs";
-import ne from "./helpers/providerOutcome.mjs";
-import { queryInputOf as i } from "./helpers/queryInput.mjs";
-import re from "./hooks/useApi.mjs";
-import ie from "./hooks/useAutoRefresh.mjs";
-import ae from "./hooks/useProviderPagination.mjs";
-import oe from "./hooks/useProviderWrite.mjs";
-import se from "../../../dataSource/pathFields.mjs";
-import { use as ce, useCallback as a, useEffect as le, useMemo as o, useRef as ue } from "react";
-import de from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as s } from "@plitzi/sdk-shared/store";
-import { StoreProvider as fe } from "@plitzi/nexus/react";
+import { isEmptyAnswer as ne } from "./helpers/isEmptyAnswer.mjs";
+import { childrenWhile as re } from "./helpers/loadingSlot.mjs";
+import ie from "./helpers/providerOutcome.mjs";
+import { queryInputOf as ae } from "./helpers/queryInput.mjs";
+import r from "./hooks/useApi.mjs";
+import i from "./hooks/useAutoRefresh.mjs";
+import oe from "./hooks/useProviderPagination.mjs";
+import se from "./hooks/useProviderWrite.mjs";
+import ce from "../../../dataSource/pathFields.mjs";
+import { use as le, useCallback as a, useEffect as ue, useMemo as o, useRef as de } from "react";
+import fe from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as pe } from "@plitzi/sdk-shared/store";
+import { StoreProvider as s } from "@plitzi/nexus/react";
 import { emptyObject as c } from "@plitzi/sdk-shared/helpers/utils";
 import { jsx as l } from "react/jsx-runtime";
-import { currentRscLocation as pe } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
-import me from "clsx";
-import he from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import ge from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-import { QueryBuilderEvaluator as _e } from "@plitzi/plitzi-ui/QueryBuilder";
+import { currentRscLocation as me } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
+import he from "clsx";
+import ge from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import _e from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import { QueryBuilderEvaluator as ve } from "@plitzi/plitzi-ui/QueryBuilder";
 //#region src/elements/provider/ApiContainer/ApiContainer.tsx
-var u = ({ ref: e, className: u = "", children: d, query: f = "", method: p = "get", accessToken: m = "", when: h = c, headers: g = c, mockData: _ = "{}", subType: v = "", credentials: ve = "same-origin", singleRecord: y = !1, pagination: ye = "none", pageParam: be = "page", renderWhileLoading: xe = !1, cache: b = !1, staleTime: Se = 30, gcTime: Ce = 300, refreshSeconds: we = 0 }) => {
-	let { id: x, visible: S, definition: { label: C = "Api Container", runtime: Te, items: Ee } } = t(), w = Te === "server", { loaded: T, stale: E, location: D, elementData: O, refresh: k } = ee(), A = he(n.sourceType, x), { settings: { previewMode: j }, contexts: { InteractionsContext: De } } = de(), { interactionsManager: M } = ce(De), [[N, P, Oe]] = s([
+var u = ({ ref: e, className: u = "", children: d, query: f = "", method: p = "get", accessToken: m = "", when: h = c, headers: g = c, mockData: _ = "{}", subType: ye = "", credentials: be = "same-origin", singleRecord: v = !1, pagination: xe = "none", pageParam: Se = "page", renderWhileLoading: Ce = !1, loadingSlot: y = "", cache: we = !1, staleTime: Te = 30, gcTime: Ee = 300, refreshSeconds: De = 0 }) => {
+	let { id: b, visible: x, definition: { label: S = "Api Container", runtime: Oe, items: ke } } = t(), C = Oe === "server", { loaded: w, stale: T, location: E, elementData: D, refresh: O } = ee(), k = ge(n.sourceType, b), { settings: { previewMode: A }, contexts: { InteractionsContext: Ae } } = fe(), { interactionsManager: j } = le(Ae), [[M, N, je]] = pe([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.navigate"
-	]), ke = o(() => m ? {
+	]), Me = o(() => m ? {
 		...g,
 		Authorization: `Bearer ${m}`
-	} : g, [g, m]), F = o(() => w || !S ? !1 : !!(j && f && (h === c || _e(h, {
-		...N,
-		...P
-	})) || !j && (f || _ && _ !== "{}" && _ !== c)), [
-		w,
-		S,
-		j,
+	} : g, [g, m]), P = o(() => C || !x ? !1 : !!(A && f && (h === c || ve(h, {
+		...M,
+		...N
+	})) || !A && (f || _ && _ !== "{}" && _ !== c)), [
+		C,
+		x,
+		A,
 		f,
 		h,
+		M,
 		N,
-		P,
 		_
-	]), Ae = o(() => [x], [x]), { isLoading: je, isFetching: Me, data: I, refetch: L, isSuccess: Ne, isError: Pe } = re({
+	]), Ne = o(() => [b], [b]), { isLoading: Pe, isFetching: Fe, data: F, refetch: I, isSuccess: Ie, isError: Le } = r({
 		url: f,
 		method: p,
-		credentials: ve,
-		mock: j ? void 0 : _,
-		customHeaders: ke,
-		enabled: F,
-		cache: b,
-		staleTime: Se,
-		gcTime: Ce,
-		tags: Ae
-	}), R = w && !!D && D !== pe(), z = w && T && !R && O === null, B = o(() => {
-		if (!w) return I ?? c;
-		if (O) return O;
-		if (T) return c;
+		credentials: be,
+		mock: A ? void 0 : _,
+		customHeaders: Me,
+		enabled: P,
+		cache: we,
+		staleTime: Te,
+		gcTime: Ee,
+		tags: Ne
+	}), L = C && !!E && E !== me(), R = C && w && !L && D === null, z = o(() => {
+		if (!C) return F ?? c;
+		if (D) return D;
+		if (w) return c;
 		if (typeof _ != "string") return _;
 		try {
 			return JSON.parse(_ || "{}");
@@ -65,137 +66,142 @@ var u = ({ ref: e, className: u = "", children: d, query: f = "", method: p = "g
 			return c;
 		}
 	}, [
+		C,
+		F,
+		D,
 		w,
-		I,
-		O,
-		T,
 		_
-	]), V = w ? R : Me, Fe = w ? R : je, H = ue({}), U = a((e, t) => k(e, {
+	]), B = C ? L : Fe, V = C ? L : Pe, H = de({}), U = a((e, t) => O(e, {
 		...H.current,
 		...t
-	}), [k]), W = a(async () => {
-		if (!w) {
-			L();
+	}), [O]), W = a(async () => {
+		if (!C) {
+			I();
 			return;
 		}
-		await U([x]);
+		await U([b]);
 	}, [
-		w,
-		L,
+		C,
+		I,
 		U,
-		x
+		b
 	]), G = a(async ({ input: e } = {}) => {
-		let t = i(e);
+		let t = ae(e);
 		t && (H.current = t), await W();
 	}, [W]);
-	ie({
-		seconds: we,
-		enabled: S && (w ? T && !R : F),
+	i({
+		seconds: De,
+		enabled: x && (C ? w && !L : P),
 		refresh: W
 	});
-	let K = B, Ie = o(() => Array.isArray(K.records) ? K.records : [], [K.records]), { records: q, isLoadingMore: J, goToPage: Y, loadMore: X } = ae({
-		elementId: x,
-		mode: ye,
-		pageParam: be,
-		records: Ie,
+	let K = z, Re = o(() => Array.isArray(K.records) ? K.records : [], [K.records]), { records: q, isLoadingMore: J, goToPage: Y, loadMore: X } = oe({
+		elementId: b,
+		mode: xe,
+		pageParam: Se,
+		records: Re,
 		page: K.pageInfo?.page ?? 1,
 		refresh: U,
-		navigate: Oe
-	}), Z = ne({
-		serverMode: w,
-		isSuccess: Ne,
-		isError: Pe,
-		rscResolved: T,
-		rscPending: R,
-		elementData: O
+		navigate: je
+	}), Z = ie({
+		serverMode: C,
+		isSuccess: Ie,
+		isError: Le,
+		rscResolved: w,
+		rscPending: L,
+		elementData: D
 	});
-	le(() => {
-		!V && x && Z && M.interactionTrigger(x, Z === "success" ? "onApiSuccess" : "onApiError", {
+	ue(() => {
+		!B && b && Z && j.interactionTrigger(b, Z === "success" ? "onApiSuccess" : "onApiError", {
 			url: f,
 			method: p,
-			...B
+			...z
 		});
 	}, [
+		z,
+		b,
+		j,
 		B,
-		x,
-		M,
-		V,
 		p,
 		Z,
 		f
 	]);
 	let Q = o(() => ({
-		...B,
+		...z,
 		...Array.isArray(K.records) ? { records: q } : c,
-		isLoading: V || J,
-		isEmpty: r(K, q, y),
-		hasError: z,
-		errorMessage: z ? "The data provider could not be reached" : "",
-		isStale: w && E
+		isLoading: B || J,
+		isEmpty: ne(K, q, v),
+		hasError: R,
+		errorMessage: R ? "The data provider could not be reached" : "",
+		isStale: C && T
 	}), [
-		B,
+		z,
 		K.records,
 		K.record,
 		q,
-		V,
+		B,
 		J,
-		y,
-		z,
-		w,
-		E
-	]), Le = a(() => se(Q), [Q]);
-	ge({
-		id: x,
-		source: A,
-		name: C || `API - ${x}`,
-		fields: Le
+		v,
+		R,
+		C,
+		T
+	]), ze = a(() => ce(Q), [Q]);
+	_e({
+		id: b,
+		source: k,
+		name: S || `API - ${b}`,
+		fields: ze
 	});
-	let { writeRecord: $ } = oe({
-		elementId: x,
-		enabled: w,
+	let { writeRecord: $ } = se({
+		elementId: b,
+		enabled: C,
 		onDone: W
-	}), Re = o(() => {
+	}), Be = o(() => {
 		let e = {
 			performQuery: {
 				...n.callbacks.performQuery,
-				title: `Perform Query ${C}`,
+				title: `Perform Query ${S}`,
 				callback: G
 			},
 			loadMore: {
 				...n.callbacks.loadMore,
-				title: `Load More ${C}`,
+				title: `Load More ${S}`,
 				callback: X
 			},
 			goToPage: {
 				...n.callbacks.goToPage,
-				title: `Go To Page ${C}`,
+				title: `Go To Page ${S}`,
 				callback: ({ page: e }) => Y(Number(e) || 1)
 			}
 		};
-		return w && (e.writeRecord = {
+		return C && (e.writeRecord = {
 			...n.callbacks.writeRecord,
-			title: `Write Record ${C}`,
+			title: `Write Record ${S}`,
 			callback: $
 		}), e;
 	}, [
-		C,
+		S,
 		G,
 		X,
 		Y,
-		w,
+		C,
 		$
-	]), ze = o(() => A ? { runtime: { sources: { [A]: Q } } } : c, [Q, A]);
+	]), Ve = o(() => y && A ? re(d, y, V) : d, [
+		d,
+		V,
+		y,
+		A
+	]), He = o(() => k ? { runtime: { sources: { [k]: Q } } } : c, [Q, k]);
 	return /* @__PURE__ */ l(te, {
 		ref: e,
-		tag: !j && !Ee?.length ? "div" : v,
-		className: me("plitzi-component__api-container", u),
+		tag: !A && !ke?.length ? "div" : ye,
+		className: he("plitzi-component__api-container", u),
 		interactionTriggers: n.triggers,
-		interactionCallbacks: Re,
-		children: (!Fe || xe) && /* @__PURE__ */ l(fe, {
+		interactionCallbacks: Be,
+		children: (!V || Ce || y) && /* @__PURE__ */ l(s, {
 			inherit: "live",
-			name: `Api:${x}`,
-			value: ze,
-			children: d
+			name: `Api:${b}`,
+			value: He,
+			children: Ve
 		})
 	});
 }, d = e(u);

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

@@ -21,11 +21,12 @@ type SettingsProps = {
     pagination?: 'none' | 'url' | 'append';
     pageParam?: string;
     renderWhileLoading?: boolean;
+    loadingSlot?: string;
     cache?: boolean;
     staleTime?: number | string;
     gcTime?: number | string;
     refreshSeconds?: 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, cache, staleTime, gcTime, refreshSeconds, 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, loadingSlot, cache, staleTime, gcTime, refreshSeconds, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -12,18 +12,18 @@ 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: ie = "", headers: v = ne, when: y, subType: b = "", mockData: x = "{}", credentials: S = "same-origin", runtime: C = "client", connector: w = "", action: T = "", endpoint: ae = "", resource: oe = "", limit: se = "10", singleRecord: E = !1, filters: D = h, pagination: O = "none", pageParam: k = "page", renderWhileLoading: A = !1, cache: j = !1, staleTime: M = 30, gcTime: N = 300, refreshSeconds: P = 0, onUpdate: F }) => {
-	let { resolvedTheme: I } = l(), [L] = r("pageDefinitions"), [R] = r("connectors"), [z] = i("actions.catalog"), [B] = r("hasServerRendering"), [V, H] = ee(!1), U = C === "server", W = U ? T && !w ? "action" : "connector" : "client", [[G, K, q]] = a([
+var h = [], g = ({ query: g = "", method: ie = "get", accessToken: ae = "", headers: _ = ne, when: v, subType: y = "", mockData: b = "{}", credentials: x = "same-origin", runtime: S = "client", connector: C = "", action: w = "", endpoint: oe = "", resource: se = "", limit: ce = "10", singleRecord: T = !1, filters: E = h, pagination: D = "none", pageParam: O = "page", renderWhileLoading: k = !1, loadingSlot: A = "", cache: j = !1, staleTime: M = 30, gcTime: N = 300, refreshSeconds: P = 0, onUpdate: F }) => {
+	let { resolvedTheme: I } = l(), [L] = r("pageDefinitions"), [R] = r("connectors"), [z] = i("actions.catalog"), [B] = r("hasServerRendering"), [V, H] = ee(!1), U = S === "server", W = U ? w && !C ? "action" : "connector" : "client", [[G, K, q]] = a([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.currentPageId"
-	]), J = t((e) => (t) => F?.(e, t), [F]), ce = t((e) => F?.("query", e), [F]), le = t((e) => F?.("when", e), [F]), ue = t((e) => F?.("subType", e), [F]), de = t((e) => F?.("mockData", e), [F]), fe = t((e) => H(e.target.checked), []), pe = t((e, t) => F?.("headers", t), [F]), me = t((e) => {
+	]), J = t((e) => (t) => F?.(e, t), [F]), le = t((e) => F?.("query", e), [F]), ue = t((e) => F?.("when", e), [F]), de = t((e) => F?.("subType", e), [F]), fe = t((e) => F?.("mockData", e), [F]), pe = t((e) => H(e.target.checked), []), me = t((e, t) => F?.("headers", t), [F]), he = t((e) => {
 		if (e === "client") {
 			F?.("runtime", "client", !0);
 			return;
 		}
 		F?.("runtime", "server", !0), F?.(e === "action" ? "connector" : "action", "");
-	}, [F]), he = t((e) => F?.("singleRecord", e.target.checked), [F]), ge = t((e) => F?.("renderWhileLoading", e.target.checked), [F]), _e = t((e) => F?.("cache", e.target.checked), [F]), Y = t((e) => F?.("filters", e), [F]), X = n(() => Object.values(R), [R]), Z = n(() => X.find((e) => e.identifier === w)?.manifest, [X, w]), ve = n(() => Object.keys(Z?.operators ?? {}), [Z]), Q = n(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = n(() => [...te(L, `${q}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [L, q]), ye = n(() => [
+	}, [F]), ge = t((e) => F?.("singleRecord", e.target.checked), [F]), _e = t((e) => F?.("loadingSlot", e), [F]), Y = t((e) => F?.("renderWhileLoading", e.target.checked), [F]), ve = t((e) => F?.("cache", e.target.checked), [F]), ye = t((e) => F?.("filters", e), [F]), X = n(() => Object.values(R), [R]), Z = n(() => X.find((e) => e.identifier === C)?.manifest, [X, C]), be = n(() => Object.keys(Z?.operators ?? {}), [Z]), Q = n(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = n(() => [...te(L, `${q}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [L, q]), xe = n(() => [
 		...Object.keys(G),
 		...Object.keys(K),
 		...$
@@ -41,7 +41,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 			/* @__PURE__ */ c(p, {
 				value: W,
 				label: "Data Source",
-				onChange: me,
+				onChange: he,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ s("option", {
@@ -70,7 +70,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				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: T,
+				value: w,
 				label: "Action",
 				onChange: J("action"),
 				size: "xs",
@@ -92,7 +92,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					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: w,
+					value: C,
 					label: "Connector",
 					onChange: J("connector"),
 					size: "xs",
@@ -105,7 +105,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					}, e.identifier))]
 				}),
 				Q.length > 1 && /* @__PURE__ */ s(p, {
-					value: ae,
+					value: oe,
 					label: "Endpoint",
 					onChange: J("endpoint"),
 					size: "xs",
@@ -115,7 +115,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					}, e))
 				}),
 				/* @__PURE__ */ s(f, {
-					value: oe,
+					value: se,
 					label: "Resource",
 					placeholder: "posts",
 					title: "The collection read through the connector — what {{resource}} becomes in the endpoint path.",
@@ -123,25 +123,25 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					size: "xs"
 				}),
 				/* @__PURE__ */ s(e, {
-					value: D,
-					operators: ve,
-					onChange: Y
+					value: E,
+					operators: be,
+					onChange: ye
 				}),
 				/* @__PURE__ */ s(m, {
-					checked: E,
+					checked: T,
 					size: "sm",
 					label: "Single record (detail page)",
-					onChange: he
+					onChange: ge
 				}),
-				!E && /* @__PURE__ */ c(o, { children: [
+				!T && /* @__PURE__ */ c(o, { children: [
 					/* @__PURE__ */ s(f, {
-						value: se,
+						value: ce,
 						label: "Records per page",
 						onChange: J("limit"),
 						size: "xs"
 					}),
 					/* @__PURE__ */ c(p, {
-						value: O,
+						value: D,
 						label: "Pagination",
 						onChange: J("pagination"),
 						size: "xs",
@@ -160,8 +160,8 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 							})
 						]
 					}),
-					O !== "none" && /* @__PURE__ */ s(f, {
-						value: k,
+					D !== "none" && /* @__PURE__ */ s(f, {
+						value: O,
 						label: "Page parameter",
 						title: "Query-string key this list pages on. Give each list its own so they page independently.",
 						onChange: J("pageParam"),
@@ -173,18 +173,18 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				/* @__PURE__ */ c("div", {
 					className: "flex flex-col",
 					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",
+						className: "min-h-6.5 basis-auto rounded-sm border border-gray-300 px-1 text-xs",
 						value: g,
 						theme: I,
 						mode: "text",
-						autoComplete: ye,
+						autoComplete: xe,
 						lineWrapping: !0,
 						multiline: !1,
-						onChange: ce
+						onChange: le
 					})]
 				}),
 				/* @__PURE__ */ c(p, {
-					value: _,
+					value: ie,
 					label: "Method",
 					onChange: J("method"),
 					size: "xs",
@@ -197,14 +197,14 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					})]
 				}),
 				/* @__PURE__ */ s(f, {
-					value: ie,
+					value: ae,
 					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: J("accessToken"),
 					size: "xs"
 				}),
 				/* @__PURE__ */ c(p, {
-					value: S,
+					value: x,
 					label: "Include Credentials",
 					onChange: J("credentials"),
 					size: "xs",
@@ -227,7 +227,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					checked: j,
 					size: "sm",
 					label: "Cache responses",
-					onChange: _e
+					onChange: ve
 				}),
 				j && /* @__PURE__ */ c(o, { children: [
 					/* @__PURE__ */ s(f, {
@@ -250,10 +250,18 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					})
 				] }),
 				/* @__PURE__ */ s(m, {
-					checked: A,
+					checked: k,
 					size: "sm",
 					label: "Render children while loading",
-					onChange: ge
+					onChange: Y
+				}),
+				/* @__PURE__ */ s(f, {
+					value: A,
+					label: "Loading slot",
+					placeholder: "catalog-skeleton",
+					title: "The id of a child shown instead of the others until the first answer arrives — a skeleton — and gone after it.",
+					size: "xs",
+					onChange: _e
 				})
 			] }),
 			/* @__PURE__ */ s(f, {
@@ -267,13 +275,13 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				checked: V,
 				size: "sm",
 				label: "Advanced Settings",
-				onChange: fe
+				onChange: pe
 			}),
 			V && /* @__PURE__ */ c(o, { children: [
 				/* @__PURE__ */ s(re, {
-					value: Object.entries(v),
+					value: Object.entries(_),
 					label: "Headers",
-					onChange: pe,
+					onChange: me,
 					size: "xs"
 				}),
 				/* @__PURE__ */ c("div", {
@@ -282,15 +290,15 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 						direction: "vertical",
 						className: "w-full",
 						size: "xs",
-						query: y,
-						onChange: le,
+						query: v,
+						onChange: ue,
 						showBranches: !0
 					})]
 				}),
 				/* @__PURE__ */ c(p, {
-					value: b,
+					value: y,
 					label: "Container Tag",
-					onChange: ue,
+					onChange: de,
 					size: "xs",
 					children: [
 						/* @__PURE__ */ s("option", {
@@ -343,11 +351,11 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				/* @__PURE__ */ c("div", {
 					className: "flex min-h-50 grow flex-col",
 					children: [/* @__PURE__ */ s("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ s(d, {
-						value: x,
+						value: b,
 						theme: I,
 						mode: "json",
 						lineWrapping: !0,
-						onChange: de
+						onChange: fe
 					})]
 				})
 			] })

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

@@ -139,7 +139,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -145,7 +145,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/**
+ * The children a provider with a loading slot shows: the slot alone until its first answer, everything but the slot
+ * after. A child is the element of that id by its key — the one every element of the tree is rendered under.
+ */
+export declare const childrenWhile: (children: ReactNode, slot: string, loading: boolean) => ReactNode[];

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

@@ -0,0 +1,8 @@
+import { Children as e, isValidElement as t } from "react";
+//#region src/elements/provider/ApiContainer/helpers/loadingSlot.ts
+var n = (n, r, i) => e.toArray(n).filter((e) => {
+	let n = t(e) && typeof e.key == "string" && e.key.endsWith(`$${r}`);
+	return i ? n : !n;
+});
+//#endregion
+export { n as childrenWhile };

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

@@ -20,28 +20,28 @@ var l = 30, u = 300, d = (e) => !!e && e !== "{}" && e !== i, f = (e) => {
 			data: e.message
 		};
 	}
-}, p = async (e, t, n, r, i) => {
+}, p = async (e, t, n, r, i, s = !1) => {
 	if (!e) return {
 		status: 400,
 		data: "URL is required"
 	};
-	let s = new Headers(r);
-	s.has("Accept") || s.set("Accept", "application/json");
-	let c = {
+	let c = new Headers(r);
+	c.has("Accept") || c.set("Accept", "application/json");
+	let l = {
 		method: t,
 		credentials: n,
-		headers: s,
+		headers: c,
 		signal: i
 	};
-	t !== "get" && (c.body = "{}", s.has("Content-Type") || s.set("Content-Type", "application/json"));
+	t !== "get" && (l.body = "{}", c.has("Content-Type") || c.set("Content-Type", "application/json"));
 	try {
-		let t = await fetch(e, c), n = await t.json(), r = a(t.status, n);
-		return r && o({
-			reason: r,
+		let c = await fetch(e, l), u = await c.json(), d = a(c.status, u);
+		return d && await o({
+			reason: d,
 			url: e
-		}), {
-			status: t.status,
-			data: n
+		}) && !s && !i.aborted ? await p(e, t, n, r, i, !0) : {
+			status: c.status,
+			data: u
 		};
 	} catch (e) {
 		if (i.aborted) throw e;

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

@@ -130,7 +130,7 @@ declare const ApiContainer: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };