@plitzi/sdk-elements 0.37.1 → 0.37.3

package/dist/elements/provider/Channel/declaration.mjs

@@ -0,0 +1,125 @@
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/provider/Channel/declaration.ts
+var n = e()({
+	type: "channel",
+	attributeValues: { subType: t()([
+		"",
+		"div",
+		"section",
+		"aside",
+		"main"
+	]) },
+	sourceType: "channel",
+	triggers: {
+		onMessage: {
+			action: "onMessage",
+			title: "On Message",
+			type: "trigger",
+			params: {},
+			preview: {
+				type: "",
+				data: "",
+				from: "",
+				user: "",
+				at: ""
+			}
+		},
+		onJoin: {
+			action: "onJoin",
+			title: "On Join",
+			type: "trigger",
+			params: {},
+			preview: {
+				from: "",
+				user: "",
+				state: {}
+			}
+		},
+		onLeave: {
+			action: "onLeave",
+			title: "On Leave",
+			type: "trigger",
+			params: {},
+			preview: {
+				from: "",
+				user: "",
+				state: {}
+			}
+		}
+	},
+	callbacks: {
+		publish: {
+			action: "publish",
+			title: "Publish",
+			type: "callback",
+			preview: {},
+			params: {
+				type: {
+					label: "Type",
+					defaultValue: "",
+					type: "text"
+				},
+				data: {
+					label: "Data (JSON or a template)",
+					defaultValue: "",
+					type: "text"
+				}
+			}
+		},
+		setPresence: {
+			action: "setPresence",
+			title: "Set Presence",
+			type: "callback",
+			preview: {},
+			params: { data: {
+				label: "State (JSON or a template)",
+				defaultValue: "",
+				type: "text"
+			} }
+		}
+	},
+	content: {
+		attributes: {
+			topic: "",
+			grant: "",
+			keep: 20,
+			subType: ""
+		},
+		definition: {
+			label: "Channel",
+			type: "channel",
+			description: "A realtime channel: every page on the same `topic` hears what any of them publishes, within milliseconds. The topic must match a channel the space declares in its settings (`channels`), e.g. `board:{{ id }}` under `board:{id}`. A topic of a private channel (`grant: true`) opens only with `grant`, bound to the grant the action that let this visitor in returned (its `realtime.grant` step). ITS DESCENDANTS bind to its source `channel_<id>`: `connected`, `members` (with the state each announced), `messages` (the last `keep`) and `last`. It fires `onMessage`; `onJoin` when somebody who came after this page has announced who they are, and `onLeave` when somebody goes — each with `from`, `user` and the `state` they announced; and answers `publish({ type, data })` and `setPresence({ data })`; `presence` is the state this page announces (a name, a colour). Closed in the builder and anywhere without a server.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "provider",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-tower-broadcast"
+		},
+		defaultStyle: {
+			name: "Channel",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { n as default };

package/dist/elements/provider/Channel/index.d.ts

@@ -0,0 +1,137 @@
+declare const Channel: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Channel').ChannelProps>): import('react').JSX.Element;
+    displayName: string;
+} & {
+    readonly type: "channel";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
+    readonly sourceType: "channel";
+    readonly triggers: {
+        readonly onMessage: {
+            readonly action: "onMessage";
+            readonly title: "On Message";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly type: "";
+                readonly data: "";
+                readonly from: "";
+                readonly user: "";
+                readonly at: "";
+            };
+        };
+        readonly onJoin: {
+            readonly action: "onJoin";
+            readonly title: "On Join";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly from: "";
+                readonly user: "";
+                readonly state: {};
+            };
+        };
+        readonly onLeave: {
+            readonly action: "onLeave";
+            readonly title: "On Leave";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly from: "";
+                readonly user: "";
+                readonly state: {};
+            };
+        };
+    };
+    readonly callbacks: {
+        readonly publish: {
+            readonly action: "publish";
+            readonly title: "Publish";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {
+                readonly type: {
+                    readonly label: "Type";
+                    readonly defaultValue: "";
+                    readonly type: "text";
+                };
+                readonly data: {
+                    readonly label: "Data (JSON or a template)";
+                    readonly defaultValue: "";
+                    readonly type: "text";
+                };
+            };
+        };
+        readonly setPresence: {
+            readonly action: "setPresence";
+            readonly title: "Set Presence";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {
+                readonly data: {
+                    readonly label: "State (JSON or a template)";
+                    readonly defaultValue: "";
+                    readonly type: "text";
+                };
+            };
+        };
+    };
+    readonly content: {
+        readonly attributes: {
+            readonly topic: "";
+            readonly grant: "";
+            readonly keep: 20;
+            readonly subType: "";
+        };
+        readonly definition: {
+            readonly label: "Channel";
+            readonly type: "channel";
+            readonly description: string;
+            readonly items: readonly [];
+            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: "provider";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-tower-broadcast";
+        };
+        readonly defaultStyle: {
+            readonly name: "Channel";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    subType?: "" | "div" | "section" | "aside" | "main" | undefined;
+    topic?: string | undefined;
+    grant?: string | undefined;
+    presence?: unknown;
+    keep?: number | string | undefined;
+}>>;
+export default Channel;

package/dist/elements/provider/Channel/index.mjs

@@ -0,0 +1,6 @@
+import e from "./declaration.mjs";
+import t from "./Channel.mjs";
+//#region src/elements/provider/Channel/index.ts
+var n = Object.assign(t, e);
+//#endregion
+export { n as default };

package/dist/elements/settings.mjs

@@ -21,18 +21,19 @@ import y from "./media/FontAwesome/Settings.mjs";
 import b from "./media/Image/Settings.mjs";
 import x from "./media/Video/Settings.mjs";
 import S from "./provider/ApiContainer/Settings.mjs";
-import C from "./structure/Container/Settings.mjs";
-import w from "./structure/DialogContainer/Settings.mjs";
-import T from "./structure/List/ListItem/Settings.mjs";
-import E from "./structure/List/Settings.mjs";
-import D from "./structure/ModalContainer/Settings.mjs";
-import O from "./structure/Pagination/Settings.mjs";
-import k from "./structure/TabContainer/Settings.mjs";
-import A from "./structure/TabContainer/TabContainerBody/Settings.mjs";
-import j from "./structure/TabContainer/TabContainerHeader/Settings.mjs";
-import M from "./structure/TabContainer/TabContainerItem/Settings.mjs";
+import C from "./provider/Channel/Settings.mjs";
+import w from "./structure/Container/Settings.mjs";
+import T from "./structure/DialogContainer/Settings.mjs";
+import E from "./structure/List/ListItem/Settings.mjs";
+import D from "./structure/List/Settings.mjs";
+import O from "./structure/ModalContainer/Settings.mjs";
+import k from "./structure/Pagination/Settings.mjs";
+import A from "./structure/TabContainer/Settings.mjs";
+import j from "./structure/TabContainer/TabContainerBody/Settings.mjs";
+import M from "./structure/TabContainer/TabContainerHeader/Settings.mjs";
+import N from "./structure/TabContainer/TabContainerItem/Settings.mjs";
 //#region src/elements/settings.ts
-var N = /* @__PURE__ */ e({ defaultElementsSettings: () => P }), P = {
+var P = /* @__PURE__ */ e({ defaultElementsSettings: () => F }), F = {
 	dropdown: c,
 	plitziSdk: a,
 	custom: r,
@@ -40,14 +41,14 @@ var N = /* @__PURE__ */ e({ defaultElementsSettings: () => P }), P = {
 	blockHtml: t,
 	blockJsx: n,
 	page: v,
-	container: C,
+	container: w,
 	layoutContainer: _,
-	dialogContainer: w,
-	modalContainer: D,
-	tabContainer: k,
-	tabContainerBody: A,
-	tabContainerheader: j,
-	tabContainerItem: M,
+	dialogContainer: T,
+	modalContainer: O,
+	tabContainer: A,
+	tabContainerBody: j,
+	tabContainerheader: M,
+	tabContainerItem: N,
 	heading: l,
 	image: b,
 	video: x,
@@ -57,14 +58,15 @@ var N = /* @__PURE__ */ e({ defaultElementsSettings: () => P }), P = {
 	text: m,
 	markdown: d,
 	richText: p,
-	pagination: O,
+	pagination: k,
 	nodeHtml: i,
-	list: E,
-	listItem: T,
+	list: D,
+	listItem: E,
 	link: u,
 	form: h,
 	formControl: g,
-	apiContainer: S
+	apiContainer: S,
+	channel: C
 };
 //#endregion
-export { P as defaultElementsSettings, N as settings_exports };
+export { F as defaultElementsSettings, P as settings_exports };

package/dist/elements/structure/Container/Container.d.ts

@@ -2,12 +2,26 @@ import { ReactNode, RefObject } from 'react';
 export type ContainerProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * The name of the part of the page this is — "Main navigation", "Search results", "Your cart" — for screen readers
+     * and browser agents, which list the page by its landmarks and regions and jump between them.
+     *
+     * Worth setting when a page has two of a kind (two `nav`s), and on a `section` that should be a region of its own. A
+     * named `div` is announced as a group. Tags that take their name from what they hold (`li`, the headings) ignore it.
+     */
+    label?: string;
+    /**
+     * An illustration built out of elements — a mock of a page, a piece of art — left out of what screen readers and
+     * browser agents read (`aria-hidden`), whatever it holds. Whatever it shows has to be reachable some other way: a
+     * control inside it can still be tabbed to, and is then announced as nothing.
+     */
+    decorative?: boolean;
     children?: ReactNode;
 };
-declare const Container: ({ ref, className, subType, children }: ContainerProps) => import("react").JSX.Element;
+declare const Container: ({ ref, className, subType, label, decorative, children }: ContainerProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ContainerProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/Container/Container.mjs

@@ -1,13 +1,22 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import { RootElement as t } from "../../../Element/RootElement.mjs";
-import { jsx as n } from "react/jsx-runtime";
-import r from "clsx";
+import { NAMEABLE_CONTAINER_TAGS as n } from "./declaration.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/structure/Container/Container.tsx
-var i = ({ ref: e, className: i = "", subType: a = "div", children: o }) => /* @__PURE__ */ n(t, {
-	ref: e,
-	tag: a,
-	className: r(`plitzi-component__container plitzi-component__container-${a}`, i),
-	children: o
-}), a = e(i);
+var a = ({ ref: e, className: a = "", subType: o = "div", label: s = "", decorative: c = !1, children: l }) => {
+	let u = !c && s && n.includes(o) ? {
+		"aria-label": s,
+		...o === "div" ? { role: "group" } : {}
+	} : {}, d = c ? { "aria-hidden": !0 } : {};
+	return /* @__PURE__ */ r(t, {
+		ref: e,
+		tag: o,
+		className: i(`plitzi-component__container plitzi-component__container-${o}`, a),
+		...u,
+		...d,
+		children: l
+	});
+}, o = e(a);
 //#endregion
-export { i as Container, a as default };
+export { a as Container, o as default };

package/dist/elements/structure/Container/Settings.d.ts

@@ -1,6 +1,8 @@
 type SettingsProps = {
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    label?: string;
+    decorative?: boolean;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ subType, label, decorative, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/structure/Container/Settings.mjs

@@ -1,76 +1,117 @@
 import { useCallback as e } from "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Select";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
 //#region src/elements/structure/Container/Settings.tsx
-var i = ({ subType: i = "div", onUpdate: a }) => {
-	let o = e((e) => (t) => a?.(e, t), [a]);
-	return /* @__PURE__ */ t("div", {
+var o = ({ subType: o = "div", label: s = "", decorative: c = !1, onUpdate: l }) => {
+	let u = e((e) => (t) => l?.(e, t), [l]), d = e((e) => l?.("decorative", e.target.checked), [l]);
+	return /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: /* @__PURE__ */ n(r, {
-			label: "ContainerTag",
-			value: i,
-			onChange: o("subType"),
-			size: "xs",
-			children: [
-				/* @__PURE__ */ t("option", {
-					value: "div",
-					children: "Div"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "header",
-					children: "Header"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "footer",
-					children: "Footer"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "nav",
-					children: "Nav"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "main",
-					children: "Main"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "section",
-					children: "Section"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "article",
-					children: "Article"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "aside",
-					children: "Aside"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "address",
-					children: "Address"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "figure",
-					children: "Figure"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "dl",
-					children: "DL"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "dt",
-					children: "DT"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "dd",
-					children: "DD"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "li",
-					children: "LI"
-				})
-			]
-		})
+		children: [
+			/* @__PURE__ */ n(a, {
+				label: "ContainerTag",
+				value: o,
+				onChange: u("subType"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "div",
+						children: "Div"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "header",
+						children: "Header"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "footer",
+						children: "Footer"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "nav",
+						children: "Nav"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "main",
+						children: "Main"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "section",
+						children: "Section"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "article",
+						children: "Article"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "aside",
+						children: "Aside"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "address",
+						children: "Address"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "figure",
+						children: "Figure"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "dl",
+						children: "DL"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "dt",
+						children: "DT"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "dd",
+						children: "DD"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "li",
+						children: "LI"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h1",
+						children: "H1 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h2",
+						children: "H2 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h3",
+						children: "H3 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h4",
+						children: "H4 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h5",
+						children: "H5 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "h6",
+						children: "H6 (heading with parts)"
+					})
+				]
+			}),
+			/* @__PURE__ */ t(i, {
+				value: s,
+				label: "Region Name",
+				placeholder: "e.g. Main navigation, Search results",
+				onChange: u("label"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				label: "Decorative (hidden from screen readers)",
+				onChange: d,
+				size: "xs"
+			})
+		]
 	});
 };
 //#endregion
-export { i as default };
+export { o as default };

package/dist/elements/structure/Container/declaration.d.ts

@@ -2,8 +2,17 @@ import { ContainerProps } from './Container';
 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 ContainerAttributes = AuthorableAttributes<ContainerProps>;
+/**
+ * The tags a `label` names: a landmark (`nav`, `main`, `aside`…), a `section` — which a name turns into a region an
+ * assistant can jump to — and a `div`, which is then a named group. The rest either take their name from what they
+ * hold (a heading, a list item) or refuse one outright, so a label on them would be read by nobody.
+ */
+export declare const NAMEABLE_CONTAINER_TAGS: readonly NonNullable<ContainerProps['subType']>[];
 declare const declaration: {
     readonly type: "container";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";
@@ -52,6 +61,8 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
+    label?: string | undefined;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    decorative?: boolean | undefined;
 }>>;
 export default declaration;