@plitzi/sdk-elements 0.38.10 → 0.38.12

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

@@ -10,44 +10,21 @@ var t = e()({
 		},
 		definition: {
 			label: "Embed",
-			type: "embed",
-			description: "Another page inside this one — a map, a video player, a form — in a frame.",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			description: "Another page inside this one — a map, a video player, a form — in a frame."
 		},
 		market: {
 			category: "media",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-window-maximize"
 		},
-		defaultStyle: {
-			name: "Embed",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "block",
-				width: "100%",
-				"aspect-ratio": "16 / 9",
-				"border-top-width": "0px",
-				"border-right-width": "0px",
-				"border-bottom-width": "0px",
-				"border-left-width": "0px"
-			} } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: {
+			display: "block",
+			width: "100%",
+			"aspect-ratio": "16 / 9",
+			"border-top-width": "0px",
+			"border-right-width": "0px",
+			"border-bottom-width": "0px",
+			"border-left-width": "0px"
+		} } } }
 	}
 });
 //#endregion

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

@@ -11,37 +11,13 @@ declare const Embed: {
         };
         readonly definition: {
             readonly label: "Embed";
-            readonly type: "embed";
             readonly description: "Another page inside this one — a map, a video player, a form — in a frame.";
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         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-window-maximize";
         };
         readonly defaultStyle: {
-            readonly name: "Embed";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -56,8 +32,9 @@ declare const Embed: {
                 };
             };
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     title?: string | undefined;
     referrerPolicy?: "no-referrer" | "origin" | "strict-origin-when-cross-origin" | "no-referrer-when-downgrade" | undefined;

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

@@ -1,11 +1,11 @@
-import e from "../../../components/IconPicker/IconPicker.mjs";
-import { useCallback as t } from "react";
+import e from "../../useSettingsUpdate.mjs";
+import t from "../../../components/IconPicker/IconPicker.mjs";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/FontAwesome/Settings.tsx
 var o = ({ icon: o = "", size: s = "fa-1x", iconAnimation: c = "", label: l = "", onUpdate: u }) => {
-	let d = t((e) => (t) => u?.(e, t), [u]);
+	let d = e(u);
 	return /* @__PURE__ */ r("div", {
 		className: "flex grow basis-0 flex-col gap-4 py-2",
 		children: [
@@ -13,14 +13,14 @@ var o = ({ icon: o = "", size: s = "fa-1x", iconAnimation: c = "", label: l = ""
 				value: l,
 				label: "Meaning",
 				placeholder: "Only for an icon that says something alone",
-				onChange: d("label"),
+				onChange: d.text("label"),
 				size: "xs"
 			}),
 			/* @__PURE__ */ r(a, {
 				label: "Icon Animation",
 				value: c,
 				placeholder: "None",
-				onChange: d("iconAnimation"),
+				onChange: d.text("iconAnimation"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ n("option", {
@@ -56,7 +56,7 @@ var o = ({ icon: o = "", size: s = "fa-1x", iconAnimation: c = "", label: l = ""
 			/* @__PURE__ */ r(a, {
 				value: s,
 				label: "Icon Size",
-				onChange: d("size"),
+				onChange: d.text("size"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ n("option", {
@@ -77,9 +77,9 @@ var o = ({ icon: o = "", size: s = "fa-1x", iconAnimation: c = "", label: l = ""
 					})
 				]
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: o,
-				onChange: d("icon")
+				onChange: d.text("icon")
 			})
 		]
 	});

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

@@ -2,7 +2,7 @@ import { FontAwesomeProps } from './FontAwesome';
 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 FontAwesomeAttributes = AuthorableAttributes<FontAwesomeProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "fontAwesome";
     readonly content: {
         readonly attributes: {
@@ -12,37 +12,13 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Font Awesome";
-            readonly type: "fontAwesome";
             readonly description: "Renders a Font Awesome icon by its icon name.";
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         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-font-awesome";
         };
         readonly defaultStyle: {
-            readonly name: "Font Awesome";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -52,9 +28,8 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     size?: string | undefined;
     label?: string | undefined;
     icon?: string | undefined;

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

@@ -10,39 +10,16 @@ var t = e()({
 		},
 		definition: {
 			label: "Font Awesome",
-			type: "fontAwesome",
-			description: "Renders a Font Awesome icon by its icon name.",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			description: "Renders a Font Awesome icon by its icon name."
 		},
 		market: {
 			category: "media",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-font-awesome"
 		},
-		defaultStyle: {
-			name: "Font Awesome",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "inline-block",
-				"font-size": "16px"
-			} } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: {
+			display: "inline-block",
+			"font-size": "16px"
+		} } } }
 	}
 });
 //#endregion

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

@@ -11,37 +11,13 @@ declare const FontAwesome: {
         };
         readonly definition: {
             readonly label: "Font Awesome";
-            readonly type: "fontAwesome";
             readonly description: "Renders a Font Awesome icon by its icon name.";
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         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-font-awesome";
         };
         readonly defaultStyle: {
-            readonly name: "Font Awesome";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -51,8 +27,9 @@ declare const FontAwesome: {
                 };
             };
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     size?: string | undefined;
     label?: string | undefined;

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

@@ -2,7 +2,7 @@ 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, useState as i } from "react";
-import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import a from "@plitzi/sdk-shared/hooks/usePlitzi";
 import { useCommonStore as o } from "@plitzi/sdk-shared/store";
 import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";

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

@@ -1,107 +1,108 @@
-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/Checkbox";
-import o from "@plitzi/plitzi-ui/Input";
-import s from "@plitzi/plitzi-ui/Select";
+import e from "../../useSettingsUpdate.mjs";
+import { useCallback as t, useMemo as n } from "react";
+import { processTwig as r } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/Checkbox";
+import s from "@plitzi/plitzi-ui/Input";
+import c from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/Image/Settings.tsx
-var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPriority: f = "auto", loadMode: p = "auto", sizes: m = "100vw", width: h, height: g, onUpdate: _ }) => {
-	let v = t(() => n(c, d, !0), [d, c]), y = e((e) => (t) => _?.(e, t), [_]), b = e((e) => (t) => _?.(e, Math.max(0, Math.round(Number(t) || 0))), [_]), x = e((e) => _?.("decorative", e.target.checked), [_]);
-	return /* @__PURE__ */ i("div", {
+var l = ({ src: l = "", alt: u = "", decorative: d = !1, variables: f, fetchPriority: p = "auto", loadMode: m = "auto", sizes: h = "100vw", width: g, height: _, onUpdate: v }) => {
+	let y = n(() => r(l, f, !0), [f, l]), b = e(v), x = t((e) => (t) => v?.(e, Math.max(0, Math.round(Number(t) || 0))), [v]), S = t((e) => v?.("decorative", e.target.checked), [v]);
+	return /* @__PURE__ */ a("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ a("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r(o, {
-					value: c,
+				children: [/* @__PURE__ */ i(s, {
+					value: l,
 					label: "Url",
-					onChange: y("src"),
+					onChange: b.text("src"),
 					size: "xs"
-				}), v && /* @__PURE__ */ i("div", {
+				}), y && /* @__PURE__ */ a("div", {
 					className: "relative mt-2 flex items-center justify-center rounded-sm border border-gray-300 p-2",
-					children: [/* @__PURE__ */ r("div", {
+					children: [/* @__PURE__ */ i("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: v,
+					}), /* @__PURE__ */ i("img", {
+						src: y,
 						alt: "",
 						className: "h-full w-full rounded-sm"
 					})]
 				})]
 			}),
-			!u && /* @__PURE__ */ r(o, {
-				value: l,
+			!d && /* @__PURE__ */ i(s, {
+				value: u,
 				label: "Alt Text",
 				placeholder: "What the picture shows, for who cannot see it",
-				onChange: y("alt"),
+				onChange: b.text("alt"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ r(a, {
-				checked: u,
+			/* @__PURE__ */ i(o, {
+				checked: d,
 				label: "Decorative (nothing to describe)",
-				onChange: x,
+				onChange: S,
 				size: "xs"
 			}),
-			/* @__PURE__ */ i(s, {
-				value: f,
+			/* @__PURE__ */ a(c, {
+				value: p,
 				label: "Fetch Priority",
-				onChange: y("fetchPriority"),
+				onChange: b.text("fetchPriority"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ r("option", {
+					/* @__PURE__ */ i("option", {
 						value: "auto",
 						children: "Auto"
 					}),
-					/* @__PURE__ */ r("option", {
+					/* @__PURE__ */ i("option", {
 						value: "high",
 						children: "Hight"
 					}),
-					/* @__PURE__ */ r("option", {
+					/* @__PURE__ */ i("option", {
 						value: "low",
 						children: "Low"
 					})
 				]
 			}),
-			/* @__PURE__ */ i(s, {
-				value: p,
+			/* @__PURE__ */ a(c, {
+				value: m,
 				label: "Load Mode",
-				onChange: y("loadMode"),
+				onChange: b.text("loadMode"),
 				size: "xs",
 				children: [
-					/* @__PURE__ */ r("option", {
+					/* @__PURE__ */ i("option", {
 						value: "auto",
 						children: "Auto"
 					}),
-					/* @__PURE__ */ r("option", {
+					/* @__PURE__ */ i("option", {
 						value: "lazy",
 						children: "Lazy"
 					}),
-					/* @__PURE__ */ r("option", {
+					/* @__PURE__ */ i("option", {
 						value: "eager",
 						children: "Eager"
 					})
 				]
 			}),
-			/* @__PURE__ */ r(o, {
-				value: m,
+			/* @__PURE__ */ i(s, {
+				value: h,
 				label: "Sizes",
 				placeholder: "(max-width: 48rem) 100vw, 360px",
-				onChange: y("sizes"),
+				onChange: b.text("sizes"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ a("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ r(o, {
+				children: [/* @__PURE__ */ i(s, {
 					type: "number",
-					value: h ? String(h) : "",
+					value: g ? String(g) : "",
 					label: "Width (px)",
-					onChange: b("width"),
+					onChange: x("width"),
 					size: "xs"
-				}), /* @__PURE__ */ r(o, {
+				}), /* @__PURE__ */ i(s, {
 					type: "number",
-					value: g ? String(g) : "",
+					value: _ ? String(_) : "",
 					label: "Height (px)",
-					onChange: b("height"),
+					onChange: x("height"),
 					size: "xs"
 				})]
 			})
@@ -109,4 +110,4 @@ var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPrio
 	});
 };
 //#endregion
-export { c as default };
+export { l as default };

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

@@ -2,7 +2,7 @@ import { ImageProps } from './Image';
 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 ImageAttributes = AuthorableAttributes<ImageProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "image";
     readonly attributeValues: {
         readonly fetchPriority: readonly string[];
@@ -18,37 +18,13 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Image";
-            readonly type: "image";
             readonly description: string;
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         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-image";
         };
         readonly defaultStyle: {
-            readonly name: "Image";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -60,9 +36,8 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     resize?: boolean | undefined;
     height?: number | undefined;
     width?: number | undefined;

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

@@ -24,41 +24,18 @@ var n = e()({
 		},
 		definition: {
 			label: "Image",
-			type: "image",
-			description: "Displays an image from a URL. It starts 140px wide and as tall as the picture is for that width (`height: auto`, never wider than where it sits): a class that sets only a `width` or an `aspect-ratio` is obeyed, and `object-fit` decides how the picture fills a box that sets both.",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			description: "Displays an image from a URL. It starts 140px wide and as tall as the picture is for that width (`height: auto`, never wider than where it sits): a class that sets only a `width` or an `aspect-ratio` is obeyed, and `object-fit` decides how the picture fills a box that sets both."
 		},
 		market: {
 			category: "media",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-image"
 		},
-		defaultStyle: {
-			name: "Image",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "block",
-				width: "140px",
-				height: "auto",
-				"max-width": "100%"
-			} } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: {
+			display: "block",
+			width: "140px",
+			height: "auto",
+			"max-width": "100%"
+		} } } }
 	}
 });
 //#endregion

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

@@ -17,37 +17,13 @@ declare const Image: {
         };
         readonly definition: {
             readonly label: "Image";
-            readonly type: "image";
             readonly description: string;
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
-        };
-        readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         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-image";
         };
         readonly defaultStyle: {
-            readonly name: "Image";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -59,8 +35,9 @@ declare const Image: {
                 };
             };
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     resize?: boolean | undefined;
     height?: number | undefined;

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

@@ -1,22 +1,22 @@
 import e from "../../../components/ElementAdvancedEditor.mjs";
-import { useCallback as t } from "react";
+import t from "../../useSettingsUpdate.mjs";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import i from "@plitzi/plitzi-ui/Input";
 //#region src/elements/media/Svg/Settings.tsx
 var a = ({ content: a = "", label: o = "", onUpdate: s }) => {
-	let c = t((e) => (t) => s?.(e, t), [s]);
+	let c = t(s);
 	return /* @__PURE__ */ r("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [/* @__PURE__ */ n(i, {
 			value: o,
 			label: "Label",
 			placeholder: "What it means — empty for decoration",
-			onChange: c("label")
+			onChange: c.text("label")
 		}), /* @__PURE__ */ n(e, {
 			className: "grow",
 			value: a,
 			mode: "html",
-			onChange: c("content")
+			onChange: c.text("content")
 		})]
 	});
 };