@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/media/Video/index.d.ts

@@ -2,59 +2,65 @@ declare const Video: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Video').VideoProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            src: string;
-            autoPlay: boolean;
-            playsInline: boolean;
-            loop: boolean;
-            muted: boolean;
+    readonly type: "video";
+    readonly content: {
+        readonly attributes: {
+            readonly src: "";
+            readonly autoPlay: false;
+            readonly playsInline: false;
+            readonly loop: false;
+            readonly muted: true;
         };
-        definition: {
-            label: string;
-            type: string;
-            description: string;
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Video";
+            readonly type: "video";
+            readonly description: "Embeds a video from a URL.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-video";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        display: string;
-                        width: string;
-                        height: string;
+        readonly defaultStyle: {
+            readonly name: "Video";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "block";
+                        readonly width: "400px";
+                        readonly height: "250px";
                     };
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    src?: string | undefined;
+    autoPlay?: boolean | undefined;
+    loop?: boolean | undefined;
+    muted?: boolean | undefined;
+    playsInline?: boolean | undefined;
+}>>;
 export default Video;

package/dist/elements/media/Video/index.mjs

@@ -1,52 +1,6 @@
-import e from "./Video.mjs";
+import e from "./declaration.mjs";
+import t from "./Video.mjs";
 //#region src/elements/media/Video/index.ts
-var t = Object.assign(e, {
-	type: "video",
-	content: {
-		attributes: {
-			src: "",
-			autoPlay: !1,
-			playsInline: !1,
-			loop: !1,
-			muted: !0
-		},
-		definition: {
-			label: "Video",
-			type: "video",
-			description: "Use an URL to display a video.",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "media",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-video"
-		},
-		defaultStyle: {
-			name: "Video",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "block",
-				width: "400px",
-				height: "250px"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -14,10 +14,19 @@ export type ApiContainerProps = {
     when?: RuleGroup;
     headers?: Record<string, string>;
     mockData?: Record<string, unknown> | string;
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | '';
     credentials?: RequestCredentials;
     /** Identifier of the server-side connector that feeds this provider. Only meaningful with `runtime: 'server'`. */
     connector?: string;
+    /**
+     * Identifier of the server ACTION that feeds this provider instead of a connector, for the read a manifest
+     * cannot express — two calls joined, a computed field, a shape that depends on who is looking.
+     *
+     * An element names one producer: the server resolves a connector when the element declares one and looks at
+     * this only otherwise, so the panel clears whichever the author did not pick. The action is fed this page's
+     * route and query params, and answers whatever its output step returns.
+     */
+    action?: string;
     /** Which of the connector's read endpoints to execute. Defaults to `list`. */
     endpoint?: string;
     /** Content type / collection read through the connector. */

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

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

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

@@ -7,11 +7,12 @@ type SettingsProps = {
     accessToken?: string;
     headers?: object;
     when?: RuleGroup;
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | '';
     mockData?: string;
     credentials?: RequestCredentials;
     runtime?: ElementRuntime;
     connector?: string;
+    action?: string;
     endpoint?: string;
     resource?: string;
     limit?: string;
@@ -22,5 +23,5 @@ type SettingsProps = {
     renderWhileLoading?: boolean;
     onUpdate?: (key: string, value: string | boolean | number | object, isDefinition?: boolean) => void;
 };
-declare const Settings: ({ query, method, accessToken, headers, when, subType, mockData, credentials, runtime, connector, endpoint, resource, limit, singleRecord, filters, pagination, pageParam, renderWhileLoading, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ query, method, accessToken, headers, when, subType, mockData, credentials, runtime, connector, action, endpoint, resource, limit, singleRecord, filters, pagination, pageParam, renderWhileLoading, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;