@plitzi/sdk-elements 0.37.1 → 0.37.3

package/dist/elements/media/FontAwesome/Settings.mjs

@@ -4,13 +4,13 @@ import o from "clsx";
 import s from "@plitzi/plitzi-ui/Input";
 import c from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/FontAwesome/Settings.tsx
-var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }) => {
-	let [p, m] = r({}), [h, g] = r(""), [_, v] = r(!1), [y, b] = r(""), x = e((e) => () => f?.("icon", e), [f]), S = n(() => Object.keys(p).map((e) => {
-		let { styles: t, label: n } = p[e];
-		if (!n.toLowerCase().includes(y.toLowerCase())) return [];
+var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", label: f = "", onUpdate: p }) => {
+	let [m, h] = r({}), [g, _] = r(""), [v, y] = r(!1), [b, x] = r(""), S = e((e) => () => p?.("icon", e), [p]), C = n(() => Object.keys(m).map((e) => {
+		let { styles: t, label: n } = m[e];
+		if (!n.toLowerCase().includes(b.toLowerCase())) return [];
 		let r = [];
 		return t.forEach((t) => {
-			if (h !== "" && t !== h) return;
+			if (g !== "" && t !== g) return;
 			let a = "fa";
 			switch (t) {
 				case "brands":
@@ -24,34 +24,41 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 			let s = `${a} fa-${e}`;
 			r.push(/* @__PURE__ */ i("div", {
 				className: o("flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-1 hover:bg-blue-200 hover:text-white", { "bg-[#339af0] text-white": s === l }),
-				onClick: x(s),
+				onClick: S(s),
 				title: `${n} - [${e}]`,
 				children: /* @__PURE__ */ i("i", { className: s }, `${e}_${a}`)
 			}, s));
 		}), r;
 	}), [
 		l,
-		p,
-		y,
-		h,
-		x
-	]), C = async () => {
-		v(!0);
+		m,
+		b,
+		g,
+		S
+	]), w = async () => {
+		y(!0);
 		let e = await fetch("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/metadata/icons.json");
-		m(await e.json()), v(!1);
+		h(await e.json()), y(!1);
 	};
 	t(() => {
-		C();
+		w();
 	}, []);
-	let w = e((e) => b(e), []), T = e((e) => (t) => f?.(e, t), [f]), E = e((e) => g(e), []);
+	let T = e((e) => x(e), []), E = e((e) => (t) => p?.(e, t), [p]), D = e((e) => _(e), []);
 	return /* @__PURE__ */ a("div", {
 		className: "flex grow basis-0 flex-col gap-4 py-2",
 		children: [
+			/* @__PURE__ */ i(s, {
+				value: f,
+				label: "Meaning",
+				placeholder: "Only for an icon that says something alone",
+				onChange: E("label"),
+				size: "xs"
+			}),
 			/* @__PURE__ */ a(c, {
-				value: h,
+				value: g,
 				placeholder: "All",
 				label: "Icon Type",
-				onChange: E,
+				onChange: D,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ i("option", {
@@ -72,7 +79,7 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 				label: "Icon Animation",
 				value: d,
 				placeholder: "None",
-				onChange: T("iconAnimation"),
+				onChange: E("iconAnimation"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ i("option", {
@@ -108,7 +115,7 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 			/* @__PURE__ */ a(c, {
 				value: u,
 				label: "Icon Size",
-				onChange: T("size"),
+				onChange: E("size"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ i("option", {
@@ -130,16 +137,16 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 				]
 			}),
 			/* @__PURE__ */ i(s, {
-				value: y,
+				value: b,
 				placeholder: "Search Icon...",
-				onChange: w,
+				onChange: T,
 				size: "xs"
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex grow basis-0 flex-col overflow-auto py-2",
 				children: /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap items-center justify-center gap-1",
-					children: [_ && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !_ && S]
+					children: [v && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !v && C]
 				})
 			})
 		]

package/dist/elements/media/FontAwesome/declaration.d.ts

@@ -56,6 +56,7 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     size?: string | undefined;
+    label?: string | undefined;
     icon?: string | undefined;
     iconAnimation?: string | undefined;
 }>>;

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

@@ -1,5 +1,5 @@
 declare const FontAwesome: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./FontAwesome').FontAwesomeProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./FontAwesome').FontAwesomeProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "fontAwesome";
@@ -55,6 +55,7 @@ declare const FontAwesome: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     size?: string | undefined;
+    label?: string | undefined;
     icon?: string | undefined;
     iconAnimation?: string | undefined;
 }>>;

package/dist/elements/media/Image/Image.d.ts

@@ -3,13 +3,24 @@ export type ImageProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
     src?: string;
+    /**
+     * What the picture shows, in words — read by screen readers and browser agents in its place, and shown when it
+     * cannot load. Say what it is for on this page, not what file it is: "Maya presenting the roadmap", not "photo".
+     */
     alt?: string;
+    /**
+     * A picture that adds nothing the words around it do not already say — a texture, an ornament, a photo beside a
+     * caption that describes it. It is left out of what assistive technology reads (`alt=""`), whatever `alt` says,
+     * and the linter stops asking for a description.
+     */
+    decorative?: boolean;
     fetchPriority?: 'high' | 'low' | 'auto';
-    loadMode?: 'eager' | 'lazy';
+    /** `auto` leaves the choice to the browser — what the builder offers first. */
+    loadMode?: 'auto' | 'eager' | 'lazy';
 };
-declare const Image: ({ ref, className, src: srcProp, alt, fetchPriority, loadMode }: ImageProps) => import("react").JSX.Element;
+declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode }: ImageProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/media/Image/Image.mjs

@@ -1,37 +1,37 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { getFallbackSVGBase64 as n } from "./ImageHelper.mjs";
-import { useCallback as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as a } from "react/jsx-runtime";
-import o from "clsx";
+import { useCallback as r, useState as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as o } from "react/jsx-runtime";
+import s from "clsx";
 //#region src/elements/media/Image/Image.tsx
-var s = n(), c = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", l = ({ ref: e, className: n = "", src: l, alt: u = "", fetchPriority: d = "auto", loadMode: f }) => {
-	let { settings: { previewMode: p } } = i(), m = l || c, h = r((e) => {
-		e.currentTarget.onerror = null, e.currentTarget.src = s;
-	}, []);
-	return p ? /* @__PURE__ */ a(t, {
+var c = n(), l = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", u = ({ ref: e, className: n = "", src: u, alt: d = "", decorative: f = !1, fetchPriority: p = "auto", loadMode: m }) => {
+	let { settings: { previewMode: h } } = a(), g = u || l, _ = f ? "" : d, [v, y] = i(void 0), b = v === g, x = r(() => y(g), [g]), S = b ? c : g, C = b ? { "data-plitzi-failed": g } : {}, w = m === "auto" ? void 0 : m;
+	return h ? /* @__PURE__ */ o(t, {
 		tag: "img",
 		draggable: !1,
 		ref: e,
-		className: o("plitzi-component__image", n),
-		src: m,
-		alt: u,
-		loading: f,
-		fetchPriority: d,
-		onError: h
-	}) : /* @__PURE__ */ a(t, {
+		className: s("plitzi-component__image", n),
+		src: S,
+		alt: _,
+		loading: w,
+		fetchPriority: p,
+		onError: b ? void 0 : x,
+		...C
+	}) : /* @__PURE__ */ o(t, {
 		ref: e,
-		className: o("plitzi-component__image image--edit-mode", n),
-		children: /* @__PURE__ */ a("img", {
+		className: s("plitzi-component__image image--edit-mode", n),
+		children: /* @__PURE__ */ o("img", {
 			draggable: !1,
-			src: m,
-			alt: u,
-			loading: f,
-			fetchPriority: d,
-			onError: h
+			src: S,
+			alt: _,
+			loading: w,
+			fetchPriority: p,
+			onError: b ? void 0 : x,
+			...C
 		})
 	});
-}, u = e(l);
+}, d = e(u);
 //#endregion
-export { l as Image, u as default };
+export { u as Image, d as default };

package/dist/elements/media/Image/Settings.d.ts

@@ -1,9 +1,11 @@
 type SettingsProps = {
     src?: string;
+    alt?: string;
+    decorative?: boolean;
     fetchPriority?: 'high' | 'low' | 'auto';
     loadMode?: 'auto' | 'lazy' | 'eager';
     variables?: Record<string, string>;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ src, variables, fetchPriority, loadMode, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ src, alt, decorative, variables, fetchPriority, loadMode, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/media/Image/Settings.mjs

@@ -1,37 +1,51 @@
 import { useCallback as e, useMemo as t } from "react";
 import { processTwig as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@plitzi/plitzi-ui/Input";
-import o from "@plitzi/plitzi-ui/Select";
+import a from "@plitzi/plitzi-ui/Checkbox";
+import o from "@plitzi/plitzi-ui/Input";
+import s from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/Image/Settings.tsx
-var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "auto", onUpdate: d }) => {
-	let f = t(() => n(s, c, !0), [c, s]), p = e((e) => (t) => d?.(e, t), [d]);
+var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPriority: f = "auto", loadMode: p = "auto", onUpdate: m }) => {
+	let h = t(() => n(c, d, !0), [d, c]), g = e((e) => (t) => m?.(e, t), [m]), _ = e((e) => m?.("decorative", e.target.checked), [m]);
 	return /* @__PURE__ */ i("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r(a, {
-					value: s,
+				children: [/* @__PURE__ */ r(o, {
+					value: c,
 					label: "Url",
-					onChange: p("src"),
+					onChange: g("src"),
 					size: "xs"
-				}), f && /* @__PURE__ */ i("div", {
+				}), h && /* @__PURE__ */ i("div", {
 					className: "relative mt-2 flex items-center justify-center rounded-sm border border-gray-300 p-2",
 					children: [/* @__PURE__ */ r("div", {
 						className: "absolute top-2 left-2 rounded-tl rounded-br border border-gray-300 bg-white p-1 text-xs",
 						children: "Preview"
 					}), /* @__PURE__ */ r("img", {
-						src: f,
+						src: h,
 						alt: "",
 						className: "h-full w-full rounded-sm"
 					})]
 				})]
 			}),
-			/* @__PURE__ */ i(o, {
+			!u && /* @__PURE__ */ r(o, {
 				value: l,
+				label: "Alt Text",
+				placeholder: "What the picture shows, for who cannot see it",
+				onChange: g("alt"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ r(a, {
+				checked: u,
+				label: "Decorative (nothing to describe)",
+				onChange: _,
+				size: "xs"
+			}),
+			/* @__PURE__ */ i(s, {
+				value: f,
 				label: "Fetch Priority",
-				onChange: p("fetchPriority"),
+				onChange: g("fetchPriority"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ r("option", {
@@ -48,10 +62,10 @@ var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "
 					})
 				]
 			}),
-			/* @__PURE__ */ i(o, {
-				value: u,
+			/* @__PURE__ */ i(s, {
+				value: p,
 				label: "Load Mode",
-				onChange: p("loadMode"),
+				onChange: g("loadMode"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ r("option", {
@@ -72,4 +86,4 @@ var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "
 	});
 };
 //#endregion
-export { s as default };
+export { c as default };

package/dist/elements/media/Image/declaration.d.ts

@@ -4,10 +4,15 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type ImageAttributes = AuthorableAttributes<ImageProps>;
 declare const declaration: {
     readonly type: "image";
+    readonly attributeValues: {
+        readonly fetchPriority: readonly string[];
+        readonly loadMode: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
             readonly alt: "";
+            readonly decorative: false;
             readonly fetchPriority: "auto";
             readonly loadMode: "auto";
         };
@@ -60,6 +65,7 @@ declare const declaration: {
     fetchPriority?: "high" | "low" | "auto" | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    loadMode?: "eager" | "lazy" | undefined;
+    decorative?: boolean | undefined;
+    loadMode?: "auto" | "eager" | "lazy" | undefined;
 }>>;
 export default declaration;

package/dist/elements/media/Image/declaration.mjs

@@ -1,11 +1,24 @@
-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/media/Image/declaration.ts
-var t = e()({
+var n = e()({
 	type: "image",
+	attributeValues: {
+		fetchPriority: t()([
+			"high",
+			"low",
+			"auto"
+		]),
+		loadMode: t()([
+			"auto",
+			"eager",
+			"lazy"
+		])
+	},
 	content: {
 		attributes: {
 			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
 			alt: "",
+			decorative: !1,
 			fetchPriority: "auto",
 			loadMode: "auto"
 		},
@@ -48,4 +61,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -1,12 +1,17 @@
 declare const Image: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Image').ImageProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Image').ImageProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "image";
+    readonly attributeValues: {
+        readonly fetchPriority: readonly string[];
+        readonly loadMode: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
             readonly alt: "";
+            readonly decorative: false;
             readonly fetchPriority: "auto";
             readonly loadMode: "auto";
         };
@@ -59,6 +64,7 @@ declare const Image: {
     fetchPriority?: "high" | "low" | "auto" | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    loadMode?: "eager" | "lazy" | undefined;
+    decorative?: boolean | undefined;
+    loadMode?: "auto" | "eager" | "lazy" | undefined;
 }>>;
 export default Image;

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

@@ -6,5 +6,5 @@ type SettingsProps = {
     muted?: boolean;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ src, autoPlay, playsInline, loop, muted, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ src, autoPlay, playsInline, loop, muted, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -8,9 +8,9 @@ export type VideoProps = {
     muted?: boolean;
     className?: string;
 };
-declare const Video: ({ ref, src, autoPlay, playsInline, loop, muted, className }: VideoProps) => import("react").JSX.Element;
+declare const Video: ({ ref, src, autoPlay, playsInline, loop, muted, className }: VideoProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<VideoProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<VideoProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -1,5 +1,5 @@
 declare const Video: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Video').VideoProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Video').VideoProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "video";

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

@@ -60,10 +60,19 @@ export type ApiContainerProps = {
     staleTime?: number | string;
     /** With `cache`: seconds an answer nobody renders is kept, so coming back within it paints at once. */
     gcTime?: number | string;
+    /**
+     * Asks again on its own every this many seconds — for a page showing something that keeps moving: a queue, a
+     * feed, a status board. Off (`0`) by default.
+     *
+     * The same refresh `performQuery` runs, for either runtime: a browser request is re-sent, a server provider
+     * asks the server for its own slice again. Skipped while the tab is hidden and never stacked on one still in
+     * flight. A text field in the builder, hence the string.
+     */
+    refreshSeconds?: number | string;
 };
-declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, cache, staleTime, gcTime }: ApiContainerProps) => import("react").JSX.Element;
+declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, cache, staleTime, gcTime, refreshSeconds }: ApiContainerProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;