@plitzi/sdk-elements 0.36.1 → 0.37.0

package/dist/elements/basic/Button/Button.mjs

@@ -1,28 +1,27 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import t from "../../../Element/hooks/useElement.mjs";
-import { RootElement as n } from "../../../Element/RootElement.mjs";
-import { useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsxs as a } from "react/jsx-runtime";
-import o from "clsx";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var s = ({ ref: e, className: s = "", children: c, contentPlacement: l = "after", content: u = "Button", subType: d = "button", disabled: f = !1, ariaExpanded: p, ariaPressed: m }) => {
-	let { definition: { label: h } } = t(), { settings: { previewMode: g } } = i(), _ = r(() => typeof u == "string" ? u : h, [u, h]);
-	return /* @__PURE__ */ a(n, {
+var a = ({ ref: e, className: a = "", children: o, contentPlacement: s = "after", content: c = "Button", subType: l = "button", disabled: u = !1, ariaExpanded: d, ariaPressed: f, title: p }) => {
+	let { settings: { previewMode: m } } = n();
+	return /* @__PURE__ */ r(t, {
 		ref: e,
 		tag: "button",
-		type: g ? d : "button",
-		className: o("plitzi-component__button", s, { "container--empty--skip": !g && !c && u }),
-		disabled: f,
-		"aria-label": _,
-		"aria-expanded": p,
-		"aria-pressed": m,
+		type: m ? l : "button",
+		className: i("plitzi-component__button", a, { "container--empty--skip": !m && !o && c }),
+		disabled: u,
+		"aria-label": c || void 0,
+		title: p || void 0,
+		"aria-expanded": d,
+		"aria-pressed": f,
 		children: [
-			l === "before" && u,
-			c,
-			l === "after" && u
+			s === "before" && c,
+			o,
+			s === "after" && c
 		]
 	});
-}, c = e(s);
+}, o = e(a);
 //#endregion
-export { s as Button, c as default };
+export { a as Button, o as default };

package/dist/elements/basic/Button/Settings.d.ts

@@ -3,7 +3,8 @@ type SettingsProps = {
     contentPlacement?: 'before' | 'after' | 'elements';
     subType?: 'button' | 'reset' | 'submit';
     disabled?: boolean;
+    title?: string;
     onUpdate?: (key: string, value: string | number | boolean) => void;
 };
-declare const Settings: ({ content, contentPlacement, subType, disabled, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ content, contentPlacement, subType, disabled, title, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

package/dist/elements/basic/Button/Settings.mjs

@@ -4,21 +4,28 @@ import r from "@plitzi/plitzi-ui/Checkbox";
 import i from "@plitzi/plitzi-ui/Input";
 import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Button/Settings.tsx
-var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, onUpdate: u }) => {
-	let d = e((e) => u?.("content", e), [u]), f = e((e) => u?.("contentPlacement", e), [u]), p = e((e) => u?.("subType", e), [u]), m = e((e) => u?.("disabled", e.target.checked), [u]);
+var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, title: u = "", onUpdate: d }) => {
+	let f = e((e) => d?.("content", e), [d]), p = e((e) => d?.("contentPlacement", e), [d]), m = e((e) => d?.("subType", e), [d]), h = e((e) => d?.("title", e), [d]), g = e((e) => d?.("disabled", e.target.checked), [d]);
 	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ t(i, {
 				value: o,
 				label: "Content",
-				onChange: d,
+				onChange: f,
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				value: u,
+				label: "Tooltip",
+				placeholder: "What the button does, for an icon-only one",
+				onChange: h,
 				size: "xs"
 			}),
 			/* @__PURE__ */ n(a, {
 				value: s,
 				label: "Mode",
-				onChange: f,
+				onChange: p,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ t("option", {
@@ -38,7 +45,7 @@ var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "b
 			/* @__PURE__ */ n(a, {
 				value: c,
 				label: "Button Type",
-				onChange: p,
+				onChange: m,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ t("option", {
@@ -58,7 +65,7 @@ var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "b
 			/* @__PURE__ */ t(r, {
 				checked: l,
 				label: "Is Disabled",
-				onChange: m,
+				onChange: g,
 				size: "xs"
 			})
 		]

package/dist/elements/basic/Button/declaration.d.ts

@@ -119,6 +119,7 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
     subType?: "button" | "submit" | "reset" | undefined;

package/dist/elements/basic/Button/index.d.ts

@@ -118,6 +118,7 @@ declare const Button: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
     subType?: "button" | "submit" | "reset" | undefined;

package/dist/elements/declarations/index.d.ts

@@ -319,6 +319,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
         subType?: "button" | "submit" | "reset" | undefined;
@@ -376,7 +377,7 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
     }>>;
     readonly Custom: {
         readonly type: "custom";
@@ -429,13 +430,7 @@ export declare const elementDeclarations: {
             };
             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;
-    }>>;
+    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<import('../advanced/Custom/declaration').CustomAttributes>;
     readonly DialogContainer: {
         readonly type: "dialogContainer";
         readonly sourceType: "dialogContainer";
@@ -1595,7 +1590,9 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        layout?: string | undefined;
         subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;
+        layoutContainer?: string | undefined;
     }>>;
     readonly Link: {
         readonly type: "link";
@@ -2667,8 +2664,8 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        referenceId: string;
         referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
+        referenceId: string;
         referenceContainer: string;
     }>>;
     readonly RichText: {

package/dist/elements/form/FormControl/declaration.d.ts

@@ -3,6 +3,8 @@ 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 FormControlAttributes = AuthorableAttributes<FormControlProps, 'value' | 'error' | 'handleChange' | 'handleValidate'> & {
     defaultValue?: string;
+    /** Read by `withFieldValue`, not by the component: shows the control in its error state while editing. */
+    previewError?: boolean;
 };
 declare const declaration: {
     readonly type: "formControl";

package/dist/elements/internal/LayoutContainer/LayoutContainer.d.ts

@@ -1,6 +1,12 @@
 import { ReactNode, RefObject } from 'react';
 export type LayoutContainerProps = {
     ref?: RefObject<HTMLElement>;
+    /**
+     * The layout this one is shown inside, and the container in it that takes this one — the same pair a page names.
+     * Read by the page that renders the chain (`useLayoutChain`), not here.
+     */
+    layout?: string;
+    layoutContainer?: string;
     className?: string;
     children?: ReactNode;
     subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';

package/dist/elements/internal/LayoutContainer/LayoutContainer.mjs

@@ -7,41 +7,49 @@ import { throttle as o } from "@plitzi/plitzi-ui/helpers";
 import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";
 //#region src/elements/internal/LayoutContainer/LayoutContainer.tsx
-var l = ({ ref: e, className: l = "", children: u, subType: d = "div" }) => {
-	let { plitziElementLayout: f } = t(), { settings: { previewMode: p } } = a(), m = r((e, t) => {
-		if (!e || !t) return;
-		let n = t.getBoundingClientRect(), r = n.top - 0, i = n.left - 0, a = i + n.width + 0, o = r + n.height + 0, s = `
+var l = ".plitzi-component__layout-container", u = ".plitzi-component--layout-body", d = (e) => [...e.querySelectorAll(u)].find((e) => !e.querySelector(u)) ?? null, f = ({ ref: e, className: u = "", children: f, subType: p = "div" }) => {
+	let { plitziElementLayout: m } = t(), { settings: { previewMode: h } } = a(), g = r((e, t) => {
+		if (!e) return;
+		if (!t) {
+			e.style.removeProperty("--child-clip");
+			return;
+		}
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = e.offsetWidth > 0 ? n.width / e.offsetWidth : 1, a = (r.top - n.top) / i, o = (r.left - n.left) / i, s = o + r.width / i, c = a + r.height / i, l = `
       polygon(
         evenodd,
         /* outer rect */
         0 0, 100% 0, 100% 100%, 0% 100%, 0 0,
         /* inner rect */ 
-        ${i}px ${r}px, ${a}px ${r}px, ${a}px ${o}px, ${i}px ${o}px, ${i}px ${r}px
+        ${o}px ${a}px, ${s}px ${a}px, ${s}px ${c}px, ${o}px ${c}px, ${o}px ${a}px
       )`;
-		e.style.setProperty("--child-clip", s);
+		e.style.setProperty("--child-clip", l);
 	}, []);
 	return i(() => {
-		if (!f || !e?.current || p) return;
-		let t = o(() => {
-			let t = e.current, n = t.querySelector(".plitzi-component--layout-body");
-			m(t, n);
-		}, 150), n = new ResizeObserver(t);
-		n.observe(e.current);
-		let r = e.current.querySelector(".plitzi-component--layout-body");
-		return r && n.observe(r), () => {
-			t.cancel(), n.disconnect();
+		let t = e?.current;
+		if (!m || !t || h || t.parentElement?.closest(l)) return;
+		let n = null, r = o(() => {
+			let e = d(t);
+			e !== n && (n && i.unobserve(n), e && i.observe(e), n = e), g(t, e);
+		}, 50), i = new ResizeObserver(r);
+		i.observe(t);
+		let a = new MutationObserver(r);
+		return a.observe(t, {
+			childList: !0,
+			subtree: !0
+		}), t.addEventListener("scroll", r, !0), r(), () => {
+			r.cancel(), i.disconnect(), a.disconnect(), t.removeEventListener("scroll", r, !0);
 		};
 	}, [
-		f,
-		p,
+		m,
+		h,
 		e,
-		m
+		g
 	]), /* @__PURE__ */ s(n, {
 		ref: e,
-		tag: d,
-		className: c("plitzi-component__layout-container", l),
-		children: u
+		tag: p,
+		className: c("plitzi-component__layout-container", u),
+		children: f
 	});
-}, u = e(l);
+}, p = e(f);
 //#endregion
-export { l as LayoutContainer, u as default };
+export { f as LayoutContainer, p as default };

package/dist/elements/internal/LayoutContainer/Settings.d.ts

@@ -1,7 +1,10 @@
 type SettingsProps = {
+    id?: string;
+    layout?: string;
+    layoutContainer?: string;
     subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
     folder?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, folder, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ id, layout, layoutContainer, subType, folder, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;

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

@@ -1,73 +1,87 @@
-import { useCallback as e, useMemo as t } from "react";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@plitzi/plitzi-ui/Select";
-import o from "@plitzi/plitzi-ui/Select2";
+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 { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/Select";
+import s from "@plitzi/plitzi-ui/Select2";
 //#region src/elements/internal/LayoutContainer/Settings.tsx
-var s = ({ subType: s = "div", folder: c = "", onUpdate: l }) => {
-	let [u] = n("schema.pageFolders"), d = e((e) => l?.("subType", e), [l]), f = e((e) => l?.("folder", e?.value ?? ""), [l]), p = t(() => [{
+var c = ({ id: c, layout: l = "", layoutContainer: u = "", subType: d = "div", folder: f = "", onUpdate: p }) => {
+	let [m] = r("schema.pageFolders"), h = t((e) => p?.("subType", e), [p]), g = t((e) => p?.("folder", e?.value ?? ""), [p]), _ = n(() => [{
 		value: "",
 		label: "None"
-	}, ...u.map(({ id: e, name: t }) => ({
+	}, ...m.map(({ id: e, name: t }) => ({
 		value: e,
 		label: t
-	}))], [u]);
-	return /* @__PURE__ */ i("div", {
+	}))], [m]);
+	return /* @__PURE__ */ a("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: [/* @__PURE__ */ i(a, {
-			value: s,
-			label: "Container Tag",
-			onChange: d,
-			children: [
-				/* @__PURE__ */ r("option", {
-					value: "div",
-					children: "Div"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "header",
-					children: "Header"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "footer",
-					children: "Footer"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "nav",
-					children: "Nav"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "main",
-					children: "Main"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "section",
-					children: "Section"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "article",
-					children: "Article"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "aside",
-					children: "Aside"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "address",
-					children: "Address"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "figure",
-					children: "Figure"
-				})
-			]
-		}), /* @__PURE__ */ r(o, {
-			label: "Folder",
-			value: c,
-			options: p,
-			placeholder: "None",
-			onChange: f
-		})]
+		children: [
+			/* @__PURE__ */ a(o, {
+				value: d,
+				label: "Container Tag",
+				onChange: h,
+				children: [
+					/* @__PURE__ */ i("option", {
+						value: "div",
+						children: "Div"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "header",
+						children: "Header"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "footer",
+						children: "Footer"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "nav",
+						children: "Nav"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "main",
+						children: "Main"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "section",
+						children: "Section"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "article",
+						children: "Article"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "aside",
+						children: "Aside"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "address",
+						children: "Address"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "figure",
+						children: "Figure"
+					})
+				]
+			}),
+			/* @__PURE__ */ i(s, {
+				label: "Folder",
+				value: f,
+				options: _,
+				placeholder: "None",
+				onChange: g
+			}),
+			/* @__PURE__ */ i(e, {
+				layout: l,
+				layoutContainer: u,
+				ownLayoutId: c,
+				onUpdate: p
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "text-xs text-gray-500 dark:text-zinc-400",
+				children: "A layout can sit inside another one: pages using this layout are shown inside it, and it inside the one picked here — the outer shell stays mounted while moving between pages that share it."
+			})
+		]
 	});
 };
 //#endregion
-export { s as default };
+export { c as default };

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

@@ -52,6 +52,8 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    layout?: string | undefined;
     subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;
+    layoutContainer?: string | undefined;
 }>>;
 export default declaration;

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

@@ -51,6 +51,8 @@ declare const LayoutContainer: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    layout?: string | undefined;
     subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;
+    layoutContainer?: string | undefined;
 }>>;
 export default LayoutContainer;

package/dist/elements/internal/LayoutPicker/LayoutPicker.d.ts

@@ -0,0 +1,10 @@
+export type LayoutPickerProps = {
+    layout?: string;
+    layoutContainer?: string;
+    /** The layout being edited, when it is one: it cannot sit in itself, nor in a shell that already sits in it. */
+    ownLayoutId?: string;
+    onUpdate?: (key: string, value: string) => void;
+};
+/** Which shell something is rendered inside, and the container in that shell its content goes into. */
+declare const LayoutPicker: ({ layout, layoutContainer, ownLayoutId, onUpdate }: LayoutPickerProps) => import("react").JSX.Element;
+export default LayoutPicker;

package/dist/elements/internal/LayoutPicker/LayoutPicker.mjs

@@ -0,0 +1,35 @@
+import { useCallback as e, useMemo as t } from "react";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
+import { get as r } from "@plitzi/plitzi-ui/helpers";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { resolveLayoutChain as s } from "@plitzi/sdk-shared/schema/layoutChain";
+import c from "@plitzi/plitzi-ui/Select";
+//#region src/elements/internal/LayoutPicker/LayoutPicker.tsx
+var l = ({ layout: l = "", layoutContainer: u = "", ownLayoutId: d, onUpdate: f }) => {
+	let [p] = n("schema.flat"), m = t(() => Object.values(p).filter((e) => r(e, "definition.type", "") === "layoutContainer" && (!d || !s((e) => p[e], e.id, "").some((e) => e.layout === d))), [p, d]), h = t(() => l ? Object.values(p).filter((e) => r(e, "definition.type", "") === "container" && r(e, "definition.rootId", "") === l) : [], [p, l]), g = e((e) => {
+		f?.("layout", e), f?.("layoutContainer", "");
+	}, [f]), _ = e((e) => f?.("layoutContainer", e), [f]);
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(c, {
+		value: l,
+		placeholder: "None",
+		label: "Layout",
+		onChange: g,
+		size: "xs",
+		children: m.map(({ id: e, definition: { label: t } }) => /* @__PURE__ */ a("option", {
+			value: e,
+			children: t
+		}, e))
+	}), l && /* @__PURE__ */ a(c, {
+		value: u,
+		placeholder: "None",
+		label: "Layout Container Body",
+		onChange: _,
+		size: "xs",
+		children: h.map(({ id: e, definition: { label: t } }) => /* @__PURE__ */ a("option", {
+			value: e,
+			children: t
+		}, e))
+	})] });
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,3 @@
+import { default as LayoutPicker } from './LayoutPicker';
+export * from './LayoutPicker';
+export default LayoutPicker;

package/dist/elements/internal/LayoutPicker/index.mjs

@@ -0,0 +1,5 @@
+import e from "./LayoutPicker.mjs";
+//#region src/elements/internal/LayoutPicker/index.ts
+var t = e;
+//#endregion
+export { t as default };