@plitzi/sdk-elements 0.38.4 → 0.38.6

package/dist/elements/form/FormControl/declaration.mjs

@@ -101,7 +101,7 @@ var n = {
 		definition: {
 			label: "Form Control",
 			type: "formControl",
-			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input.",
+			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes.",
 			bindings: {},
 			styleSelectors: {
 				base: "",
@@ -126,7 +126,8 @@ var n = {
 			verified: !0,
 			license: "MIT",
 			website: "https://plitzi.com",
-			backgroundColor: "#4422ee"
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-i-cursor"
 		},
 		defaultStyle: {
 			name: "Form Control",

package/dist/elements/internal/LayoutContainer/LayoutContainer.mjs

@@ -1,55 +1,63 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
-import { useCallback as r, useEffect as i } from "react";
-import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { throttle as o } from "@plitzi/plitzi-ui/helpers";
-import { jsx as s } from "react/jsx-runtime";
-import c from "clsx";
+import { boxOf as r, maskFrameOf as i } from "./mask.mjs";
+import { useCallback as a, useEffect as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { throttle as c } from "@plitzi/plitzi-ui/helpers";
+import { jsx as l } from "react/jsx-runtime";
+import u from "clsx";
 //#region src/elements/internal/LayoutContainer/LayoutContainer.tsx
-var l = ".plitzi-component__layout-container", u = ".plitzi-component--layout-body", d = (e) => [...e.querySelectorAll(u)].find((e) => !e.querySelector(u)) ?? null, f = ({ ref: e, className: u = "", children: f, subType: p = "div" }) => {
-	let { plitziElementLayout: m } = t(), { settings: { previewMode: h } } = a(), g = r((e, t) => {
+var d = ".plitzi-component__layout-container", f = ".plitzi-component--layout-body", p = (e) => [...e.querySelectorAll(f)].find((e) => !e.querySelector(f)) ?? null, m = ({ ref: e, className: f = "", children: m, subType: h = "div" }) => {
+	let { plitziElementLayout: g } = t(), { settings: { previewMode: _ } } = s(), v = a((e, t) => {
 		if (!e) return;
 		if (!t) {
 			e.style.removeProperty("--child-clip");
 			return;
 		}
-		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = e.offsetWidth > 0 ? n.width / e.offsetWidth : 1, a = (r.top - n.top) / i, o = (r.left - n.left) / i, s = o + r.width / i, c = a + r.height / i, l = `
+		let n = r(t);
+		if (!n) {
+			e.style.removeProperty("--child-clip");
+			return;
+		}
+		let a = i(e), o = a.getBoundingClientRect(), s = a.offsetWidth > 0 ? o.width / a.offsetWidth : 1, c = (n.top - o.top) / s - a.clientTop, l = (n.left - o.left) / s - a.clientLeft, u = l + n.width / s, d = c + n.height / s, f = `
       polygon(
         evenodd,
         /* outer rect */
         0 0, 100% 0, 100% 100%, 0% 100%, 0 0,
         /* inner rect */ 
-        ${o}px ${a}px, ${s}px ${a}px, ${s}px ${c}px, ${o}px ${c}px, ${o}px ${a}px
+        ${l}px ${c}px, ${u}px ${c}px, ${u}px ${d}px, ${l}px ${d}px, ${l}px ${c}px
       )`;
-		e.style.setProperty("--child-clip", l);
+		e.style.setProperty("--child-clip", f);
 	}, []);
-	return i(() => {
+	return o(() => {
 		let t = e?.current;
-		if (!m || !t || h || t.parentElement?.closest(l)) return;
-		let n = null, r = o(() => {
-			let e = d(t);
-			e !== n && (n && i.unobserve(n), e && i.observe(e), n = e), g(t, e);
-		}, 50), i = new ResizeObserver(r);
-		i.observe(t);
-		let a = new MutationObserver(r);
-		return a.observe(t, {
+		if (!g || !t || _ || t.parentElement?.closest(d)) return;
+		let n = null, r = c(() => {
+			let e = p(t);
+			e !== n && (n && a.unobserve(n), e && a.observe(e), n = e), v(t, e);
+		}, 50), a = new ResizeObserver(r);
+		a.observe(t);
+		let o = i(t);
+		o !== t && a.observe(o);
+		let s = new MutationObserver(r);
+		return s.observe(t, {
 			childList: !0,
 			subtree: !0
 		}), t.addEventListener("scroll", r, !0), r(), () => {
-			r.cancel(), i.disconnect(), a.disconnect(), t.removeEventListener("scroll", r, !0);
+			r.cancel(), a.disconnect(), s.disconnect(), t.removeEventListener("scroll", r, !0);
 		};
 	}, [
-		m,
-		h,
+		g,
+		_,
 		e,
-		g
-	]), /* @__PURE__ */ s(n, {
+		v
+	]), /* @__PURE__ */ l(n, {
 		ref: e,
-		tag: p,
-		className: c("plitzi-component__layout-container", u),
-		children: f
+		tag: h,
+		className: u("plitzi-component__layout-container", f),
+		children: m
 	});
-}, p = e(f);
+}, h = e(m);
 //#endregion
-export { f as LayoutContainer, p as default };
+export { m as LayoutContainer, h as default };

package/dist/elements/internal/LayoutContainer/mask.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The box an element draws on screen: its own — or, for one with `display: contents`, which draws none, the box around
+ * what it holds. A shell or a slot that only marks where something goes is written that way, and measured as itself it
+ * is a rect of zeros: the hole closes and the whole page is dimmed.
+ */
+export declare const boxOf: (element: Element) => DOMRect | undefined;
+/**
+ * The box the mask is drawn in. The mask is the layout's `::before`, placed over its containing block: the layout's own
+ * box — or, when the layout draws none, the nearest ancestor that positions what it holds.
+ */
+export declare const maskFrameOf: (layout: HTMLElement) => HTMLElement;

package/dist/elements/internal/LayoutContainer/mask.mjs

@@ -0,0 +1,14 @@
+//#region src/elements/internal/LayoutContainer/mask.ts
+var e = (e) => getComputedStyle(e).display === "contents", t = (n) => {
+	if (!e(n)) return n.getBoundingClientRect();
+	let r = [...n.children].map(t).filter((e) => e !== void 0 && (e.width > 0 || e.height > 0));
+	if (r.length === 0) return;
+	let i = Math.min(...r.map((e) => e.left)), a = Math.min(...r.map((e) => e.top));
+	return new DOMRect(i, a, Math.max(...r.map((e) => e.right)) - i, Math.max(...r.map((e) => e.bottom)) - a);
+}, n = (t) => {
+	if (!e(t)) return t;
+	for (let e = t.parentElement; e; e = e.parentElement) if (getComputedStyle(e).position !== "static") return e;
+	return t.ownerDocument.documentElement;
+};
+//#endregion
+export { t as boxOf, n as maskFrameOf };

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

@@ -27,6 +27,14 @@ export type ApiContainerProps = {
      * route and query params, and answers whatever its output step returns.
      */
     action?: string;
+    /**
+     * What a server provider asks its action with, on top of the page's own route and query params — a search, a filter.
+     *
+     * Saved, it is what the page server resolves the first paint with. Bound — to a state the visitor changes — every
+     * change asks again with the new value, the way a bound `query` does for a browser provider; `reloadApi` with an
+     * input asks once.
+     */
+    input?: Record<string, unknown> | string;
     /** Which of the connector's read endpoints to execute. Defaults to `list`. */
     endpoint?: string;
     /** Content type / collection read through the connector. */
@@ -75,7 +83,7 @@ export type ApiContainerProps = {
      */
     refreshSeconds?: number | string;
 };
-declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds, connector, action }: ApiContainerProps) => import('react').JSX.Element;
+declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds, connector, action, input }: 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

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

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

@@ -1,15 +1,7 @@
 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>;
-};
+export type ApiContainerAttributes = AuthorableAttributes<ApiContainerProps>;
 declare const declaration: {
     readonly type: "apiContainer";
     readonly attributeValues: {
@@ -60,6 +52,13 @@ declare const declaration: {
                 };
             };
         };
+        readonly cancelQuery: {
+            readonly action: "cancelQuery";
+            readonly title: "Cancel Query";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {};
+        };
         readonly loadMore: {
             readonly action: "loadMore";
             readonly title: "Load More";
@@ -164,5 +163,34 @@ declare const declaration: {
         };
         readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<ApiContainerAttributes>;
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    when?: import('@plitzi/sdk-shared').RuleGroup | undefined;
+    action?: string | undefined;
+    cache?: boolean | undefined;
+    endpoint?: string | undefined;
+    input?: (Record<string, unknown> | string) | undefined;
+    method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
+    resource?: string | undefined;
+    headers?: Record<string, string> | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
+    query?: string | undefined;
+    accessToken?: string | undefined;
+    mockData?: (Record<string, unknown> | string) | undefined;
+    credentials?: RequestCredentials | undefined;
+    connector?: string | undefined;
+    limit?: string | undefined;
+    singleRecord?: boolean | undefined;
+    filters?: {
+        field: string;
+        operator: string;
+        value: string;
+    }[] | undefined;
+    pagination?: import('./hooks/useProviderPagination').ProviderPagination | undefined;
+    pageParam?: string | undefined;
+    renderWhileLoading?: boolean | undefined;
+    loadingSlot?: string | undefined;
+    staleTime?: number | string | undefined;
+    gcTime?: number | string | undefined;
+    refreshSeconds?: number | string | undefined;
+}>>;
 export default declaration;

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

@@ -74,6 +74,13 @@ var n = e()({
 				description: "Values handed to a server-driven provider with its request, beside the page’s own route and query params — a search, a filter. Kept for the pages it loads after (`loadMore`, `goToPage`) until the next query."
 			} }
 		},
+		cancelQuery: {
+			action: "cancelQuery",
+			title: "Cancel Query",
+			type: "callback",
+			preview: {},
+			params: {}
+		},
 		loadMore: {
 			action: "loadMore",
 			title: "Load More",

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

@@ -39,6 +39,8 @@ declare const useApi: ({ url, method, mock, customHeaders, enabled, credentials,
     isFetching: boolean;
     data: ApiResponse | undefined;
     refetch: () => void;
+    /** Stops the request in flight; the last answer stays on screen. */
+    cancel: () => void;
     /**
      * Whether THIS question has been answered — not whether an answer is on screen.
      *

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

@@ -94,6 +94,7 @@ var l = 30, u = 300, d = (e) => !!e && e !== "{}" && e !== i, f = (e) => {
 		isFetching: A,
 		data: k,
 		refetch: D.refetch,
+		cancel: D.cancel,
 		isSuccess: !w && !A && !!k && k.status < 400,
 		isError: !w && !A && !!k && k.status >= 400
 	};

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

@@ -0,0 +1,20 @@
+export type UseInputRefreshProps = {
+    /** A server provider whose payload has arrived: there is a question to ask again. */
+    enabled: boolean;
+    /** The input as it resolves now — bound to state, it changes as the visitor does. */
+    input: unknown;
+    /** The input the element was saved with: what the page server resolved the first paint with. */
+    savedInput: unknown;
+    performQuery: (options: {
+        input?: unknown;
+    }) => Promise<void>;
+};
+/**
+ * A bound `input` asks again when what it says changes.
+ *
+ * The first paint was resolved by the page server with the input the element was SAVED with — bindings to the
+ * visitor's state are not the server's to read — so that is what the first value is compared against: a binding that
+ * already says something else (a state kept from the last visit) asks at once.
+ */
+declare const useInputRefresh: ({ enabled, input, savedInput, performQuery }: UseInputRefreshProps) => void;
+export default useInputRefresh;

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

@@ -0,0 +1,16 @@
+import { queryInputOf as e } from "../helpers/queryInput.mjs";
+import { useEffect as t, useRef as n } from "react";
+//#region src/elements/provider/ApiContainer/hooks/useInputRefresh.ts
+var r = ({ enabled: r, input: i, savedInput: a, performQuery: o }) => {
+	let s = JSON.stringify(e(i) ?? {}), c = n(JSON.stringify(e(a) ?? {}));
+	t(() => {
+		r && s !== c.current && (c.current = s, o({ input: i }));
+	}, [
+		r,
+		s,
+		i,
+		o
+	]);
+};
+//#endregion
+export { r as default };