@plitzi/sdk-elements 0.38.10 → 0.38.12

package/dist/elements/internal/Page/Settings.mjs

@@ -1,210 +1,211 @@
-import e from "../LayoutPicker/index.mjs";
-import { useCallback as t, useMemo as n } from "react";
-import { useCommonStore as r } from "@plitzi/sdk-shared/store";
-import { get as i, pick as a } from "@plitzi/plitzi-ui/helpers";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { getPageFullPath as l } from "@plitzi/sdk-navigation/NavigationHelper";
-import u from "@plitzi/plitzi-ui/Alert";
-import d from "@plitzi/plitzi-ui/Checkbox";
-import f from "@plitzi/plitzi-ui/Input";
-import p from "@plitzi/plitzi-ui/TextArea";
-import m from "@plitzi/plitzi-ui/Select";
-import h from "@plitzi/plitzi-ui/Select2";
+import e from "../../useSettingsUpdate.mjs";
+import t from "../LayoutPicker/index.mjs";
+import { useCallback as n, useMemo as r } from "react";
+import { useCommonStore as i } from "@plitzi/sdk-shared/store";
+import { get as a, pick as o } from "@plitzi/plitzi-ui/helpers";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { getPageFullPath as u } from "@plitzi/sdk-navigation/NavigationHelper";
+import d from "@plitzi/plitzi-ui/Alert";
+import f from "@plitzi/plitzi-ui/Checkbox";
+import p from "@plitzi/plitzi-ui/Input";
+import m from "@plitzi/plitzi-ui/TextArea";
+import h from "@plitzi/plitzi-ui/Select";
+import g from "@plitzi/plitzi-ui/Select2";
 //#region src/elements/internal/Page/Settings.tsx
-var g = ({ id: g = "", seoEnabled: _ = !1, enabled: v = !0, name: y = "", folder: b = "", seoPageTitle: x = "Title", seoPageDescription: S = "Description", slug: C = "", layout: w = "", layoutContainer: T = "", accessLevel: E = "", unauthorizedBehaviour: D = "", unauthorizedPageRedirect: O = "", onUpdate: k }) => {
-	let [[A, j, M]] = r([
+var _ = ({ id: _ = "", seoEnabled: v = !1, enabled: y = !0, name: b = "", folder: x = "", seoPageTitle: S = "Title", seoPageDescription: C = "Description", slug: w = "", layout: T = "", layoutContainer: E = "", accessLevel: D = "", unauthorizedBehaviour: O = "", unauthorizedPageRedirect: k = "", onUpdate: A }) => {
+	let [[j, M, N]] = i([
 		"schema.flat",
 		"schema.pages",
 		"schema.pageFolders"
-	]), N = n(() => Object.values(a(A, j.filter((e) => e !== g))), [
-		A,
-		g,
-		j
-	]), P = t((e) => (t) => k?.(e, t), [k]), F = t((e) => {
-		k?.("name", e);
-		let t = y.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9]+)/gi, "");
-		(!C || C === t) && k?.("slug", e.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9-]+)/gi, ""));
+	]), P = r(() => Object.values(o(j, M.filter((e) => e !== _))), [
+		j,
+		_,
+		M
+	]), F = e(A), I = n((e) => {
+		A?.("name", e);
+		let t = b.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9]+)/gi, "");
+		(!w || w === t) && A?.("slug", e.replaceAll(" ", "-").toLowerCase().replaceAll(/([^a-z0-9-]+)/gi, ""));
 	}, [
-		k,
-		C,
-		y
-	]), I = t((e) => {
+		A,
+		w,
+		b
+	]), L = n((e) => {
 		if (/^[a-zA-Z0-9:*/_-]+$/gim.test(e) || !e) {
 			let t = e.replaceAll("//", "/");
-			k?.("slug", t);
+			A?.("slug", t);
 		}
-	}, [k]), L = t((e) => {
-		k?.("accessLevel", e), k?.("unauthorizedBehaviour", ""), k?.("unauthorizedPageRedirect", "");
-	}, [k]), R = t((e) => k?.("seoEnabled", e.target.checked), [k]), z = t((e) => k?.("enabled", e.target.checked), [k]), B = t((e) => k?.("folder", e?.value ?? ""), [k]), V = n(() => [{
+	}, [A]), R = n((e) => {
+		A?.("accessLevel", e), A?.("unauthorizedBehaviour", ""), A?.("unauthorizedPageRedirect", "");
+	}, [A]), z = n((e) => A?.("seoEnabled", e.target.checked), [A]), B = n((e) => A?.("enabled", e.target.checked), [A]), V = n((e) => A?.("folder", e?.value ?? ""), [A]), H = r(() => [{
 		value: "",
 		label: "None"
-	}, ...M.map(({ id: e, name: t }) => ({
+	}, ...N.map(({ id: e, name: t }) => ({
 		value: e,
 		label: t
-	}))], [M]), H = n(() => l(A, M, g, !0), [
-		A,
-		M,
-		g
+	}))], [N]), U = r(() => u(j, N, _, !0), [
+		j,
+		N,
+		_
 	]);
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [
-			!v && /* @__PURE__ */ s(u, {
+			!y && /* @__PURE__ */ c(d, {
 				intent: "info",
 				size: "xs",
 				solid: !1,
-				children: /* @__PURE__ */ s("span", {
+				children: /* @__PURE__ */ c("span", {
 					className: "text-xs",
 					children: "When this option is disable, this page wont be accesible"
 				})
 			}),
-			/* @__PURE__ */ s(d, {
+			/* @__PURE__ */ c(f, {
 				label: " Page Enabled",
-				checked: v,
-				onChange: z,
+				checked: y,
+				onChange: B,
 				size: "xs"
 			}),
-			/* @__PURE__ */ s(f, {
-				value: y,
+			/* @__PURE__ */ c(p, {
+				value: b,
 				label: "Page Name",
-				onChange: F,
+				onChange: I,
 				size: "xs"
 			}),
-			/* @__PURE__ */ s(u, {
+			/* @__PURE__ */ c(d, {
 				intent: "info",
 				size: "xs",
 				solid: !1,
-				children: /* @__PURE__ */ s("span", {
+				children: /* @__PURE__ */ c("span", {
 					className: "text-xs",
 					children: "Slug is a combination of letters, numbers and _ - : / *"
 				})
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ s(f, {
-					value: C,
-					onChange: I,
+				children: [/* @__PURE__ */ c(p, {
+					value: w,
+					onChange: L,
 					label: "Slug / Path",
 					className: { inputContainer: "rounded-none rounded-tl rounded-tr" },
 					size: "xs"
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "truncate rounded-b border-x border-b border-gray-200 px-1 py-0.5 text-xs",
-					title: H,
-					children: ["Full Path: ", /* @__PURE__ */ s("span", {
+					title: U,
+					children: ["Full Path: ", /* @__PURE__ */ c("span", {
 						className: "font-bold",
-						children: H
+						children: U
 					})]
 				})]
 			}),
-			/* @__PURE__ */ s(h, {
+			/* @__PURE__ */ c(g, {
 				label: "Folder",
-				value: b,
-				options: V,
+				value: x,
+				options: H,
 				placeholder: "None",
-				onChange: B,
+				onChange: V,
 				size: "xs"
 			}),
-			/* @__PURE__ */ s(e, {
-				layout: w,
-				layoutContainer: T,
-				onUpdate: k
+			/* @__PURE__ */ c(t, {
+				layout: T,
+				layoutContainer: E,
+				onUpdate: A
 			}),
-			/* @__PURE__ */ c(m, {
-				value: E,
+			/* @__PURE__ */ l(h, {
+				value: D,
 				label: "Restrict Access",
-				onChange: L,
+				onChange: R,
 				placeholder: "None",
 				size: "xs",
-				children: [/* @__PURE__ */ s("option", {
+				children: [/* @__PURE__ */ c("option", {
 					value: "public",
 					children: "Public"
-				}), /* @__PURE__ */ s("option", {
+				}), /* @__PURE__ */ c("option", {
 					value: "authenticated",
 					children: "Authenticated"
 				})]
 			}),
-			E === "" && /* @__PURE__ */ s(u, {
+			D === "" && /* @__PURE__ */ c(d, {
 				intent: "info",
 				solid: !1,
 				size: "xs",
-				children: /* @__PURE__ */ s("span", {
+				children: /* @__PURE__ */ c("span", {
 					className: "text-xs",
 					children: "Anyone on the internet can access this page"
 				})
 			}),
-			E === "public" && /* @__PURE__ */ s(u, {
+			D === "public" && /* @__PURE__ */ c(d, {
 				intent: "info",
 				solid: !1,
 				size: "xs",
-				children: /* @__PURE__ */ s("span", {
+				children: /* @__PURE__ */ c("span", {
 					className: "text-xs",
 					children: "Only Guest can access this page"
 				})
 			}),
-			E !== "" && /* @__PURE__ */ s(m, {
+			D !== "" && /* @__PURE__ */ c(h, {
 				label: "Unauthorized Behaviour",
-				value: D,
-				onChange: P("unauthorizedBehaviour"),
+				value: O,
+				onChange: F.text("unauthorizedBehaviour"),
 				placeholder: "None",
 				size: "xs",
-				children: /* @__PURE__ */ s("option", {
+				children: /* @__PURE__ */ c("option", {
 					value: "redirect",
 					children: "Redirect"
 				})
 			}),
-			D === "redirect" && /* @__PURE__ */ s(m, {
-				value: O,
+			O === "redirect" && /* @__PURE__ */ c(h, {
+				value: k,
 				label: "Redirect Page",
-				onChange: P("unauthorizedPageRedirect"),
+				onChange: F.text("unauthorizedPageRedirect"),
 				placeholder: "None",
 				size: "xs",
-				children: N.map((e) => /* @__PURE__ */ s("option", {
+				children: P.map((e) => /* @__PURE__ */ c("option", {
 					value: e.id,
-					children: i(e, "attributes.name")
+					children: a(e, "attributes.name")
 				}, e.id))
 			}),
-			/* @__PURE__ */ s(d, {
+			/* @__PURE__ */ c(f, {
 				label: " SEO Enabled",
-				checked: _,
-				onChange: R,
+				checked: v,
+				onChange: z,
 				size: "xs"
 			}),
-			_ && /* @__PURE__ */ c(o, { children: [
-				/* @__PURE__ */ s(f, {
-					value: x,
+			v && /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c(p, {
+					value: S,
 					label: "SEO Title",
-					onChange: P("seoPageTitle"),
+					onChange: F.text("seoPageTitle"),
 					size: "xs"
 				}),
-				/* @__PURE__ */ s(p, {
+				/* @__PURE__ */ c(m, {
 					label: "SEO Description",
-					value: S,
-					onChange: P("seoPageDescription"),
+					value: C,
+					onChange: F.text("seoPageDescription"),
 					rows: 3,
 					size: "xs"
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l("div", {
 					className: "flex flex-col",
 					children: [
-						/* @__PURE__ */ s("p", {
+						/* @__PURE__ */ c("p", {
 							className: "mb-4 text-xs",
 							children: "Specify this page's title and description. You can see how they'll look in search engine results pages (SERPs) in the preview below."
 						}),
-						/* @__PURE__ */ s("label", { children: "Search Result Preview" }),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ c("label", { children: "Search Result Preview" }),
+						/* @__PURE__ */ l("div", {
 							className: "rounded border border-gray-300 px-2 py-1",
 							children: [
-								/* @__PURE__ */ s("div", {
+								/* @__PURE__ */ c("div", {
 									className: "mb-1 pt-1 text-xl text-[#1a0dab]",
-									children: /* @__PURE__ */ s("label", { children: x })
+									children: /* @__PURE__ */ c("label", { children: S })
 								}),
-								/* @__PURE__ */ s("div", {
+								/* @__PURE__ */ c("div", {
 									className: "text-sm text-[#006621]",
-									children: /* @__PURE__ */ s("span", { children: "www.url.com" })
+									children: /* @__PURE__ */ c("span", { children: "www.url.com" })
 								}),
-								/* @__PURE__ */ s("div", {
+								/* @__PURE__ */ c("div", {
 									className: "settings-seo__description mb-1 pt-1 text-sm",
-									children: `${S.slice(0, 160)}...`
+									children: `${C.slice(0, 160)}...`
 								})
 							]
 						})
@@ -215,4 +216,4 @@ var g = ({ id: g = "", seoEnabled: _ = !1, enabled: v = !0, name: y = "", folder
 	});
 };
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/elements/internal/Page/declaration.d.ts

@@ -2,7 +2,7 @@ import { PageProps } from './Page';
 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 PageAttributes = AuthorableAttributes<PageProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "page";
     readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
     readonly triggers: {
@@ -32,38 +32,19 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Page";
-            readonly type: "page";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
             readonly canDelete: false;
-            readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "internal";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fas fa-file";
         };
         readonly defaultStyle: {
-            readonly name: "Page";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -81,9 +62,8 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     layout?: string | undefined;
     notFound?: string | undefined;
     layoutContainer?: string | undefined;

package/dist/elements/internal/Page/declaration.mjs

@@ -32,48 +32,30 @@ var t = e()({
 		},
 		definition: {
 			label: "Page",
-			type: "page",
 			description: "The root of a routable screen. Managed through the page ops (upsertPage/deletePage), not added as a child element.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
+			items: []
 		},
 		builder: {
 			canDelete: !1,
-			canSelect: !0,
 			canDragDrop: !1,
-			canMove: !1,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			canMove: !1
 		},
 		market: {
 			category: "internal",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fas fa-file"
 		},
-		defaultStyle: {
-			name: "Page",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "flex",
-				"flex-direction": "column",
-				"min-height": "100%",
-				"min-width": "100%",
-				"font-family": "Arial",
-				color: "light-dark(#333, oklch(0.92 0.004 286.32))",
-				"font-size": "14px",
-				"font-weight": 400,
-				"line-height": "16px",
-				"text-align": "left"
-			} } }
-		},
-		settings: {}
+		defaultStyle: { style: { base: { default: {
+			display: "flex",
+			"flex-direction": "column",
+			"min-height": "100%",
+			"min-width": "100%",
+			"font-family": "Arial",
+			color: "light-dark(#333, oklch(0.92 0.004 286.32))",
+			"font-size": "14px",
+			"font-weight": 400,
+			"line-height": "16px",
+			"text-align": "left"
+		} } } }
 	}
 });
 //#endregion

package/dist/elements/internal/Page/index.d.ts

@@ -31,38 +31,19 @@ declare const Page: {
         };
         readonly definition: {
             readonly label: "Page";
-            readonly type: "page";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
             readonly canDelete: false;
-            readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "internal";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fas fa-file";
         };
         readonly defaultStyle: {
-            readonly name: "Page";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -80,8 +61,9 @@ declare const Page: {
                 };
             };
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     layout?: string | undefined;
     notFound?: string | undefined;

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

@@ -1,7 +1,7 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { embeddableSrc as n } from "./embeddableSrc.mjs";
-import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import r from "@plitzi/sdk-shared/hooks/usePlitzi";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import o from "clsx";
 //#region src/elements/media/Embed/Embed.tsx

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

@@ -1,10 +1,10 @@
-import { useCallback as e } from "react";
+import e from "../../useSettingsUpdate.mjs";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import r from "@plitzi/plitzi-ui/Input";
 import i from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/Embed/Settings.tsx
 var a = ({ src: a = "", title: o = "", loading: s = "lazy", allow: c = "", sandbox: l = "", onUpdate: u }) => {
-	let d = e((e) => (t) => u?.(e, t), [u]);
+	let d = e(u);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
@@ -12,18 +12,18 @@ var a = ({ src: a = "", title: o = "", loading: s = "lazy", allow: c = "", sandb
 				value: a,
 				label: "Url",
 				placeholder: "https://…",
-				onChange: d("src")
+				onChange: d.text("src")
 			}),
 			/* @__PURE__ */ t(r, {
 				value: o,
 				label: "Title",
 				placeholder: "What the frame shows",
-				onChange: d("title")
+				onChange: d.text("title")
 			}),
 			/* @__PURE__ */ n(i, {
 				label: "Loading",
 				value: s,
-				onChange: d("loading"),
+				onChange: d.text("loading"),
 				children: [/* @__PURE__ */ t("option", {
 					value: "lazy",
 					children: "When it is about to be seen"
@@ -36,13 +36,13 @@ var a = ({ src: a = "", title: o = "", loading: s = "lazy", allow: c = "", sandb
 				value: c,
 				label: "Allow",
 				placeholder: "fullscreen; clipboard-write",
-				onChange: d("allow")
+				onChange: d.text("allow")
 			}),
 			/* @__PURE__ */ t(r, {
 				value: l,
 				label: "Sandbox",
 				placeholder: "allow-scripts allow-same-origin",
-				onChange: d("sandbox")
+				onChange: d.text("sandbox")
 			})
 		]
 	});

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

@@ -2,7 +2,7 @@ import { EmbedProps } from './Embed';
 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 EmbedAttributes = AuthorableAttributes<EmbedProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "embed";
     readonly content: {
         readonly attributes: {
@@ -12,37 +12,13 @@ declare const declaration: {
         };
         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: {
@@ -57,9 +33,8 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     title?: string | undefined;
     referrerPolicy?: "no-referrer" | "origin" | "strict-origin-when-cross-origin" | "no-referrer-when-downgrade" | undefined;
     src?: string | undefined;