@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/advanced/Custom/Settings.mjs

@@ -1,91 +1,82 @@
-import { use as e, useCallback as t, useEffect as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as e, useEffect as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/sdk-shared/theme/useTheme";
 import s from "@plitzi/plitzi-ui/CodeMirror";
-import { ThemeContext as c } from "@plitzi/sdk-shared/theme/ThemeProvider";
-import l from "@plitzi/plitzi-ui/Alert";
-import u from "@plitzi/plitzi-ui/Checkbox";
-import d from "@plitzi/plitzi-ui/Input";
-import f from "@plitzi/plitzi-ui/TextArea";
+import c from "@plitzi/plitzi-ui/Alert";
+import l from "@plitzi/plitzi-ui/Checkbox";
+import u from "@plitzi/plitzi-ui/Input";
+import d from "@plitzi/plitzi-ui/TextArea";
 //#region src/elements/advanced/Custom/Settings.tsx
-var p = ({ renderType: p = "", settings: m = "{}", isPlugin: h = !1, assets: g = "", scriptUrl: _ = "", pluginScope: v = "", onUpdate: y }) => {
-	let { theme: b } = e(c), [x, S] = r(!0), C = t((e) => (t) => y?.(e, t), [y]), w = t((e) => {
+var f = ({ renderType: f = "", settings: p = "{}", isPlugin: m = !1, assets: h = "", scriptUrl: g = "", onUpdate: _ }) => {
+	let { resolvedTheme: v } = o(), [y, b] = n(!0), x = e((e) => (t) => _?.(e, t), [_]), S = e((e) => {
 		e ||= "{}";
 		try {
-			y?.("settings", e), JSON.stringify(JSON.parse(e)), S(!0);
+			_?.("settings", e), JSON.stringify(JSON.parse(e)), b(!0);
 		} catch {
-			S(!1);
+			b(!1);
 		}
-	}, [y]), T = t((e) => y?.("isPlugin", e.target.checked), [y]);
-	return n(() => {
-		if (!y || !m) {
-			y?.("settings", "{}"), S(!0);
+	}, [_]), C = e((e) => _?.("isPlugin", e.target.checked), [_]);
+	return t(() => {
+		if (!_ || !p) {
+			_?.("settings", "{}"), b(!0);
 			return;
 		}
 		try {
-			let e = JSON.stringify(JSON.parse(m), null, 2);
-			e !== m && y("settings", e), S(!0);
+			let e = JSON.stringify(JSON.parse(p), null, 2);
+			e !== p && _("settings", e), b(!0);
 		} catch {
-			S(!1);
+			b(!1);
 		}
-	}, [y]), /* @__PURE__ */ o("div", {
+	}, [_]), /* @__PURE__ */ a("div", {
 		className: "flex flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ a(d, {
-				value: p,
+			/* @__PURE__ */ i(u, {
+				value: f,
 				label: "Render Type",
-				onChange: C("renderType"),
+				onChange: x("renderType"),
 				size: "xs"
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ a("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ a("label", { children: "Settings" }), /* @__PURE__ */ a(s, {
+				children: [/* @__PURE__ */ i("label", { children: "Settings" }), /* @__PURE__ */ i(s, {
 					className: "min-h-62.5",
-					value: m,
-					theme: b === "dark" ? "dark" : "light",
+					value: p,
+					theme: v,
 					mode: "json",
 					size: "xs",
 					lineWrapping: !0,
-					onChange: w
+					onChange: S
 				})]
 			}),
-			!x && /* @__PURE__ */ a(l, {
+			!y && /* @__PURE__ */ i(c, {
 				className: "mt-1",
 				solid: !1,
 				intent: "warning",
 				size: "xs",
-				children: /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ i("div", {
 					className: "flex h-full w-full items-center",
 					children: "This json is invalid"
 				})
 			}),
-			/* @__PURE__ */ a(u, {
-				checked: h,
-				onChange: T,
+			/* @__PURE__ */ i(l, {
+				checked: m,
+				onChange: C,
 				label: "Is Plugin",
 				size: "xs"
 			}),
-			h && /* @__PURE__ */ o(i, { children: [
-				/* @__PURE__ */ a(d, {
-					value: v,
-					label: "Plugin Scope",
-					onChange: C("pluginScope"),
-					size: "xs"
-				}),
-				/* @__PURE__ */ a(d, {
-					value: _,
-					label: "Plugin Script Url",
-					onChange: C("scriptUrl"),
-					size: "xs"
-				}),
-				/* @__PURE__ */ a(f, {
-					value: g,
-					label: "Plugin Assets (Styles)",
-					onChange: C("assets"),
-					size: "xs"
-				})
-			] })
+			m && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(u, {
+				value: g,
+				label: "Plugin Script Url",
+				onChange: x("scriptUrl"),
+				size: "xs"
+			}), /* @__PURE__ */ i(d, {
+				value: h,
+				label: "Plugin Assets (Styles)",
+				onChange: x("assets"),
+				size: "xs"
+			})] })
 		]
 	});
 };
 //#endregion
-export { p as default };
+export { f as default };

package/dist/elements/advanced/Custom/declaration.d.ts

@@ -0,0 +1,63 @@
+import { CustomProps } from './Custom';
+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 CustomAttributes = AuthorableAttributes<CustomProps>;
+declare const declaration: {
+    readonly type: "custom";
+    readonly content: {
+        readonly attributes: {
+            readonly renderType: "";
+            readonly settings: "{}";
+            readonly isPlugin: false;
+            readonly assets: "";
+            readonly scriptUrl: "";
+        };
+        readonly definition: {
+            readonly label: "Custom";
+            readonly type: "custom";
+            readonly description: "A custom element slot whose behaviour is supplied by a host/plugin component.";
+            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 canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "advanced";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-paintbrush";
+        };
+        readonly defaultStyle: {
+            readonly name: "Custom Element";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    settings?: string | undefined;
+    assets?: string | undefined;
+    renderType?: string | undefined;
+    isPlugin?: boolean | undefined;
+    scriptUrl?: string | undefined;
+}>>;
+export default declaration;

package/dist/elements/advanced/Custom/declaration.mjs

@@ -0,0 +1,48 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/advanced/Custom/declaration.ts
+var t = e()({
+	type: "custom",
+	content: {
+		attributes: {
+			renderType: "",
+			settings: "{}",
+			isPlugin: !1,
+			assets: "",
+			scriptUrl: ""
+		},
+		definition: {
+			label: "Custom",
+			type: "custom",
+			description: "A custom element slot whose behaviour is supplied by a host/plugin component.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "advanced",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-paintbrush"
+		},
+		defaultStyle: {
+			name: "Custom Element",
+			displayMode: "desktop",
+			style: { base: { default: {} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/advanced/Custom/index.d.ts

@@ -2,59 +2,61 @@ declare const Custom: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Custom').CustomProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            renderType: string;
-            settings: string;
-            isPlugin: boolean;
-            pluginScope: string;
-            assets: string;
-            scriptUrl: string;
+    readonly type: "custom";
+    readonly content: {
+        readonly attributes: {
+            readonly renderType: "";
+            readonly settings: "{}";
+            readonly isPlugin: false;
+            readonly assets: "";
+            readonly scriptUrl: "";
         };
-        definition: {
-            label: string;
-            type: string;
-            description: string;
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Custom";
+            readonly type: "custom";
+            readonly description: "A custom element slot whose behaviour is supplied by a host/plugin component.";
+            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: "advanced";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-paintbrush";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        'min-width': string;
-                        'min-height': string;
-                    };
+        readonly defaultStyle: {
+            readonly name: "Custom Element";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    settings?: string | undefined;
+    assets?: string | undefined;
+    renderType?: string | undefined;
+    isPlugin?: boolean | undefined;
+    scriptUrl?: string | undefined;
+}>>;
 export default Custom;

package/dist/elements/advanced/Custom/index.mjs

@@ -1,52 +1,6 @@
 import e from "./Custom.mjs";
+import t from "./declaration.mjs";
 //#region src/elements/advanced/Custom/index.ts
-var t = Object.assign(e, {
-	type: "custom",
-	content: {
-		attributes: {
-			renderType: "",
-			settings: "{}",
-			isPlugin: !1,
-			pluginScope: "",
-			assets: "",
-			scriptUrl: ""
-		},
-		definition: {
-			label: "Custom",
-			type: "custom",
-			description: "",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "advanced",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-paintbrush"
-		},
-		defaultStyle: {
-			name: "Custom Element",
-			displayMode: "desktop",
-			style: { base: { default: {
-				"min-width": "50px",
-				"min-height": "50px"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(e, t);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/advanced/NodeHtml/NodeHtml.mjs

@@ -1,19 +1,19 @@
-import { RootElement as e } from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { useMemo as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 import i from "clsx";
 import a from "@plitzi/plitzi-ui/hooks/useValueMemo";
 //#region src/elements/advanced/NodeHtml/NodeHtml.tsx
-var o = ({ ref: t, className: o = "", subType: s = "span", children: c, ...l }) => {
+var o = ({ ref: e, className: o = "", subType: s = "span", children: c, ...l }) => {
 	let u = a(l), d = n(() => Object.fromEntries(Object.entries(u).map(([e, t]) => [e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), t])), [u]);
-	return /* @__PURE__ */ r(e, {
-		ref: t,
+	return /* @__PURE__ */ r(t, {
+		ref: e,
 		tag: s,
 		className: i(`plitzi-component__node-html plitzi-component__node-html-${s}`, o),
 		...d,
 		children: c
 	});
-}, s = t(o);
+}, s = e(o);
 //#endregion
 export { o as NodeHtml, s as default };