@plitzi/sdk-elements 0.37.2 → 0.37.4

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

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

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

@@ -12,6 +12,12 @@ export type ApiContainerAttributes = AuthorableAttributes<ApiContainerProps> & {
 };
 declare const declaration: {
     readonly type: "apiContainer";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+        readonly method: readonly string[];
+        readonly credentials: readonly string[];
+        readonly pagination: readonly string[];
+    };
     readonly sourceType: "apiContainer";
     readonly triggers: {
         readonly onApiError: {
@@ -45,7 +51,14 @@ declare const declaration: {
             readonly title: "Perform Query";
             readonly type: "callback";
             readonly preview: {};
-            readonly params: {};
+            readonly params: {
+                readonly input: {
+                    readonly label: "Input (server providers)";
+                    readonly type: "codemirror-json";
+                    readonly defaultValue: "{}";
+                    readonly description: string;
+                };
+            };
         };
         readonly loadMore: {
             readonly action: "loadMore";

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

@@ -1,7 +1,39 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/provider/ApiContainer/declaration.ts
-var t = e()({
+var n = e()({
 	type: "apiContainer",
+	attributeValues: {
+		subType: t()([
+			"",
+			"div",
+			"header",
+			"footer",
+			"nav",
+			"main",
+			"section",
+			"article",
+			"aside",
+			"address",
+			"figure"
+		]),
+		method: t()([
+			"get",
+			"post",
+			"put",
+			"delete",
+			"patch"
+		]),
+		credentials: t()([
+			"include",
+			"omit",
+			"same-origin"
+		]),
+		pagination: t()([
+			"none",
+			"url",
+			"append"
+		])
+	},
 	sourceType: "apiContainer",
 	triggers: {
 		onApiError: {
@@ -35,7 +67,12 @@ var t = e()({
 			title: "Perform Query",
 			type: "callback",
 			preview: {},
-			params: {}
+			params: { input: {
+				label: "Input (server providers)",
+				type: "codemirror-json",
+				defaultValue: "{}",
+				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."
+			} }
 		},
 		loadMore: {
 			action: "loadMore",
@@ -131,4 +168,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -0,0 +1,16 @@
+type ProviderSlice = {
+    records?: unknown[];
+    record?: unknown;
+    data?: unknown;
+};
+/**
+ * Whether a provider has nothing to show, for each shape of answer it can hold.
+ *
+ * A connector list publishes `records`, a detail provider `record`, and a plain `query` the body it received under
+ * `data`. Only the first two used to be asked, so a `query` — whose slice has no `records` at all — reported empty
+ * whatever it held, and an empty state bound to `isEmpty` showed over a full page.
+ *
+ * `records` is the list after pagination has accumulated it, which is why it is passed in rather than read here.
+ */
+export declare const isEmptyAnswer: (slice: ProviderSlice, records: unknown[], singleRecord: boolean) => boolean;
+export {};

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

@@ -0,0 +1,4 @@
+//#region src/elements/provider/ApiContainer/helpers/isEmptyAnswer.ts
+var e = (e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || typeof e == "object" && !Array.isArray(e) && Object.keys(e).length === 0, t = (t, n, r) => r ? t.record === void 0 : Array.isArray(t.records) ? n.length === 0 : e(t.data);
+//#endregion
+export { t as isEmptyAnswer };

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

@@ -0,0 +1,5 @@
+/**
+ * A query's `input`, as the server reads a page's query params: flat, each value a string. An object as authored, or
+ * its JSON text as the editor keeps it; anything else is no input at all.
+ */
+export declare const queryInputOf: (input: unknown) => Record<string, string> | undefined;

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

@@ -0,0 +1,12 @@
+//#region src/elements/provider/ApiContainer/helpers/queryInput.ts
+var e = (e) => {
+	let t = e;
+	if (typeof t == "string") try {
+		t = JSON.parse(t || "{}");
+	} catch {
+		return;
+	}
+	if (typeof t == "object" && t && !Array.isArray(t)) return Object.fromEntries(Object.entries(t).flatMap(([e, t]) => typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? [[e, String(t)]] : []));
+};
+//#endregion
+export { e as queryInputOf };

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

@@ -3,6 +3,12 @@ declare const ApiContainer: {
     displayName: string;
 } & {
     readonly type: "apiContainer";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+        readonly method: readonly string[];
+        readonly credentials: readonly string[];
+        readonly pagination: readonly string[];
+    };
     readonly sourceType: "apiContainer";
     readonly triggers: {
         readonly onApiError: {
@@ -36,7 +42,14 @@ declare const ApiContainer: {
             readonly title: "Perform Query";
             readonly type: "callback";
             readonly preview: {};
-            readonly params: {};
+            readonly params: {
+                readonly input: {
+                    readonly label: "Input (server providers)";
+                    readonly type: "codemirror-json";
+                    readonly defaultValue: "{}";
+                    readonly description: string;
+                };
+            };
         };
         readonly loadMore: {
             readonly action: "loadMore";

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

@@ -0,0 +1,26 @@
+import { ReactNode, RefObject } from 'react';
+export type ChannelProps = {
+    ref?: RefObject<HTMLElement | null>;
+    className?: string;
+    children?: ReactNode;
+    /** The topic, usually a template: `board:{{ id }}`. A channel the space declares must cover it. */
+    topic?: string;
+    /**
+     * What opens a topic of a private (`grant: true`) channel: bound to the `grant` the action that let this visitor in
+     * returned — `{{ data.grant }}`. Empty for any other channel.
+     */
+    grant?: string;
+    /** What this page announces to the members — an object from a binding, or JSON text typed in the builder. */
+    presence?: unknown;
+    /** How many of the latest messages its source holds. */
+    keep?: number | string;
+    /** Empty renders no element of its own, as a provider does; a tag gives it one to style. */
+    subType?: '' | 'div' | 'section' | 'aside' | 'main';
+};
+declare const Channel: ({ ref, className, children, topic, grant, presence, keep, subType }: ChannelProps) => import('react').JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ChannelProps>): import('react').JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Channel };

package/dist/elements/provider/Channel/Channel.mjs

@@ -0,0 +1,92 @@
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../dataSource/pathFields.mjs";
+import i from "./declaration.mjs";
+import a from "../../../realtime/useChannel.mjs";
+import { use as o, useCallback as s, useMemo as c, useState as l } from "react";
+import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as d } from "@plitzi/nexus/react";
+import { emptyObject as f } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as p } from "react/jsx-runtime";
+import m from "clsx";
+import h from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import g from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import { JOIN_TYPE as _, LEAVE_TYPE as v, PRESENCE_TYPE as y } from "@plitzi/sdk-shared/realtime";
+//#region src/elements/provider/Channel/Channel.tsx
+var b = (e) => {
+	if (typeof e != "string") return e;
+	try {
+		return JSON.parse(e);
+	} catch {
+		return e;
+	}
+}, x = /* @__PURE__ */ new Set([
+	y,
+	_,
+	v
+]), S = ({ ref: e, className: _, children: v, topic: y = "", grant: S = "", presence: C, keep: w = 20, subType: T = "" }) => {
+	let { id: E, definition: { label: D = "Channel" } } = t(), { settings: { previewMode: O }, contexts: { InteractionsContext: k } } = u(), { interactionsManager: A } = o(k), j = Math.max(0, Number(w) || 0), [M, N] = l([]), P = s((e) => {
+		x.has(e.type) || (j > 0 && N((t) => [...t, e].slice(-j)), A.interactionTrigger(E, "onMessage", { ...e }));
+	}, [
+		E,
+		A,
+		j
+	]), F = s(({ from: e, user: t, state: n }) => void A.interactionTrigger(E, "onJoin", {
+		from: e,
+		user: t ?? "",
+		state: n
+	}), [E, A]), I = s(({ from: e, user: t, state: n }) => void A.interactionTrigger(E, "onLeave", {
+		from: e,
+		user: t ?? "",
+		state: n
+	}), [E, A]), L = a(O && y ? y : void 0, {
+		grant: S || void 0,
+		presence: C === void 0 || C === "" ? void 0 : b(C),
+		onMessage: P,
+		onJoin: F,
+		onLeave: I
+	}), R = c(() => ({
+		publish: {
+			...i.callbacks.publish,
+			callback: ({ type: e, data: t }) => typeof e == "string" && e ? L.publish(e, b(t)) : Promise.resolve(!1)
+		},
+		setPresence: {
+			...i.callbacks.setPresence,
+			callback: ({ data: e }) => L.setPresence(b(e))
+		}
+	}), [L]), z = h(i.sourceType, E), B = c(() => ({
+		connected: L.connected,
+		me: L.me ?? "",
+		members: L.members,
+		messages: M,
+		last: M.at(-1) ?? null
+	}), [
+		L.connected,
+		L.me,
+		L.members,
+		M
+	]), V = s(() => r(B), [B]);
+	g({
+		id: E,
+		source: z,
+		name: D || `Channel - ${E}`,
+		fields: V
+	});
+	let H = c(() => z ? { runtime: { sources: { [z]: B } } } : f, [B, z]);
+	return /* @__PURE__ */ p(n, {
+		ref: e,
+		tag: T,
+		className: m("plitzi-component__channel", _),
+		interactionTriggers: i.triggers,
+		interactionCallbacks: R,
+		children: /* @__PURE__ */ p(d, {
+			inherit: "live",
+			name: `Channel:${E}`,
+			value: H,
+			children: v
+		})
+	});
+}, C = e(S);
+//#endregion
+export { S as Channel, C as default };

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

@@ -0,0 +1,9 @@
+type SettingsProps = {
+    topic?: string;
+    grant?: string;
+    keep?: number | string;
+    presence?: unknown;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ topic, grant, keep, presence, onUpdate }: SettingsProps) => import('react').JSX.Element;
+export default Settings;