@plitzi/sdk-elements 0.37.9 → 0.37.10

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

@@ -0,0 +1,131 @@
+import { CarouselProps } from './Carousel';
+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 CarouselAttributes = AuthorableAttributes<CarouselProps>;
+declare const declaration: {
+    readonly type: "carousel";
+    readonly sourceType: "carousel";
+    readonly triggers: {
+        readonly onChange: {
+            readonly action: "onChange";
+            readonly title: "On Slide Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly index: "0";
+                readonly item: {};
+            };
+        };
+    };
+    readonly callbacks: {
+        readonly next: {
+            readonly action: "next";
+            readonly title: "Next Slide";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly previous: {
+            readonly action: "previous";
+            readonly title: "Previous Slide";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly goTo: {
+            readonly action: "goTo";
+            readonly title: "Go To Slide";
+            readonly type: "callback";
+            readonly params: {
+                readonly index: {
+                    readonly type: "text";
+                    readonly label: "Index (from 0)";
+                    readonly defaultValue: "0";
+                    readonly canBind: true;
+                };
+            };
+            readonly preview: {};
+        };
+        readonly play: {
+            readonly action: "play";
+            readonly title: "Play";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly pause: {
+            readonly action: "pause";
+            readonly title: "Pause";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+    };
+    readonly content: {
+        readonly attributes: {
+            readonly items: readonly [];
+            readonly mode: "slide";
+            readonly autoplay: 0;
+            readonly pauseOnHover: true;
+            readonly loop: true;
+            readonly transition: "slide";
+            readonly speed: 30;
+            readonly label: "";
+        };
+        readonly definition: {
+            readonly label: "Carousel";
+            readonly type: "carousel";
+            readonly description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.";
+            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 canSnippet: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "structure";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-images";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly position: "relative";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly ["carouselTrack"];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    mode?: import('./CarouselContext').CarouselMode | undefined;
+    label?: string | undefined;
+    items?: unknown[] | undefined;
+    speed?: number | undefined;
+    loop?: boolean | undefined;
+    autoplay?: number | undefined;
+    pauseOnHover?: boolean | undefined;
+    transition?: import('./CarouselContext').CarouselTransition | undefined;
+    itemKey?: string | undefined;
+}>>;
+export default declaration;

package/dist/elements/structure/Carousel/declaration.mjs

@@ -0,0 +1,106 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/Carousel/declaration.ts
+var t = e()({
+	type: "carousel",
+	sourceType: "carousel",
+	triggers: { onChange: {
+		action: "onChange",
+		title: "On Slide Change",
+		type: "trigger",
+		params: {},
+		preview: {
+			index: "0",
+			item: {}
+		}
+	} },
+	callbacks: {
+		next: {
+			action: "next",
+			title: "Next Slide",
+			type: "callback",
+			params: {},
+			preview: {}
+		},
+		previous: {
+			action: "previous",
+			title: "Previous Slide",
+			type: "callback",
+			params: {},
+			preview: {}
+		},
+		goTo: {
+			action: "goTo",
+			title: "Go To Slide",
+			type: "callback",
+			params: { index: {
+				type: "text",
+				label: "Index (from 0)",
+				defaultValue: "0",
+				canBind: !0
+			} },
+			preview: {}
+		},
+		play: {
+			action: "play",
+			title: "Play",
+			type: "callback",
+			params: {},
+			preview: {}
+		},
+		pause: {
+			action: "pause",
+			title: "Pause",
+			type: "callback",
+			params: {},
+			preview: {}
+		}
+	},
+	content: {
+		attributes: {
+			items: [],
+			mode: "slide",
+			autoplay: 0,
+			pauseOnHover: !0,
+			loop: !0,
+			transition: "slide",
+			speed: 30,
+			label: ""
+		},
+		definition: {
+			label: "Carousel",
+			type: "carousel",
+			description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-images"
+		},
+		defaultStyle: {
+			name: "Carousel",
+			displayMode: "desktop",
+			style: { base: { default: { position: "relative" } } }
+		},
+		settings: {}
+	},
+	initialItems: ["carouselTrack"]
+});
+//#endregion
+export { t as default };

package/dist/elements/structure/Carousel/index.d.ts

@@ -0,0 +1,184 @@
+declare const Carousel: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Carousel').CarouselProps>): import('react').JSX.Element;
+    displayName: string;
+} & {
+    plugins: {
+        carouselTrack: {
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./CarouselTrack/CarouselTrack').CarouselTrackProps>): import('react').JSX.Element;
+            displayName: string;
+        } & {
+            readonly type: "carouselTrack";
+            readonly ancestorType: "carousel";
+            readonly content: {
+                readonly attributes: {};
+                readonly definition: {
+                    readonly label: "Carousel Track";
+                    readonly type: "carouselTrack";
+                    readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
+                    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 canSnippet: false;
+                    readonly itemsAllowed: readonly [];
+                    readonly itemsNotAllowed: readonly [];
+                };
+                readonly market: {
+                    readonly category: "structure";
+                    readonly owner: "Plitzi";
+                    readonly verified: true;
+                    readonly license: "MIT";
+                    readonly website: "https://plitzi.com";
+                    readonly backgroundColor: "#4422ee";
+                    readonly icon: "fa-solid fa-film";
+                };
+                readonly defaultStyle: {
+                    readonly name: "Carousel Track";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                    };
+                };
+                readonly settings: {};
+            };
+        } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+    };
+    type: "carousel";
+    sourceType: "carousel";
+    triggers: {
+        readonly onChange: {
+            readonly action: "onChange";
+            readonly title: "On Slide Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly index: "0";
+                readonly item: {};
+            };
+        };
+    };
+    callbacks: {
+        readonly next: {
+            readonly action: "next";
+            readonly title: "Next Slide";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly previous: {
+            readonly action: "previous";
+            readonly title: "Previous Slide";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly goTo: {
+            readonly action: "goTo";
+            readonly title: "Go To Slide";
+            readonly type: "callback";
+            readonly params: {
+                readonly index: {
+                    readonly type: "text";
+                    readonly label: "Index (from 0)";
+                    readonly defaultValue: "0";
+                    readonly canBind: true;
+                };
+            };
+            readonly preview: {};
+        };
+        readonly play: {
+            readonly action: "play";
+            readonly title: "Play";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly pause: {
+            readonly action: "pause";
+            readonly title: "Pause";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+    };
+    content: {
+        readonly attributes: {
+            readonly items: readonly [];
+            readonly mode: "slide";
+            readonly autoplay: 0;
+            readonly pauseOnHover: true;
+            readonly loop: true;
+            readonly transition: "slide";
+            readonly speed: 30;
+            readonly label: "";
+        };
+        readonly definition: {
+            readonly label: "Carousel";
+            readonly type: "carousel";
+            readonly description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.";
+            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 canSnippet: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "structure";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-images";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly position: "relative";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+    initialItems: readonly ["carouselTrack"];
+    __attributes: Partial<{
+        mode?: import('./CarouselContext').CarouselMode | undefined;
+        label?: string | undefined;
+        items?: unknown[] | undefined;
+        speed?: number | undefined;
+        loop?: boolean | undefined;
+        autoplay?: number | undefined;
+        pauseOnHover?: boolean | undefined;
+        transition?: import('./CarouselContext').CarouselTransition | undefined;
+        itemKey?: string | undefined;
+    }>;
+};
+export default Carousel;

package/dist/elements/structure/Carousel/index.mjs

@@ -0,0 +1,10 @@
+import e from "./declaration.mjs";
+import t from "./Carousel.mjs";
+import n from "./CarouselTrack/index.mjs";
+//#region src/elements/structure/Carousel/index.ts
+var r = Object.assign(t, {
+	...e,
+	plugins: { carouselTrack: n }
+});
+//#endregion
+export { r as default };

package/dist/elements/structure/Carousel/useAutoplay.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type AutoplayOptions = {
+    /** Milliseconds between moves; 0 is no autoplay. */
+    delay: number;
+    /** Whether it may move at all: playing, in a live page, with more than one slide. */
+    active: boolean;
+    rootRef: RefObject<HTMLElement | null>;
+    pauseOnHover: boolean;
+    /** Changes on every move, so the delay counts again from the slide just shown. */
+    position: number;
+    onTick: () => void;
+};
+/**
+ * Moves a carousel on by itself — and holds still while somebody is reading it: under the pointer (when asked), with
+ * keyboard focus inside it (a click's focus does not count), in a tab nobody is looking at, and always for a visitor who asked for less motion.
+ */
+declare const useAutoplay: ({ delay, active, rootRef, pauseOnHover, position, onTick }: AutoplayOptions) => void;
+export default useAutoplay;

package/dist/elements/structure/Carousel/useAutoplay.mjs

@@ -0,0 +1,34 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+//#region src/elements/structure/Carousel/useAutoplay.ts
+var r = ({ delay: r, active: i, rootRef: a, pauseOnHover: o, position: s, onTick: c }) => {
+	let [l, u] = n(!1), [d, f] = n(!1), p = t(c);
+	e(() => {
+		p.current = c;
+	}, [c]), e(() => {
+		let e = a.current;
+		if (!e || !i) return;
+		let t = () => u(!0), n = () => u(!1), r = (e) => {
+			e.target instanceof Element && e.target.matches(":focus-visible") && f(!0);
+		}, o = (t) => {
+			(!(t.relatedTarget instanceof Node) || !e.contains(t.relatedTarget)) && f(!1);
+		};
+		return e.addEventListener("pointerenter", t), e.addEventListener("pointerleave", n), e.addEventListener("focusin", r), e.addEventListener("focusout", o), () => {
+			e.removeEventListener("pointerenter", t), e.removeEventListener("pointerleave", n), e.removeEventListener("focusin", r), e.removeEventListener("focusout", o);
+		};
+	}, [a, i]);
+	let m = o && l || d;
+	e(() => {
+		if (!i || r <= 0 || m || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let e = window.setInterval(() => {
+			document.visibilityState === "visible" && p.current();
+		}, r);
+		return () => window.clearInterval(e);
+	}, [
+		i,
+		r,
+		m,
+		s
+	]);
+};
+//#endregion
+export { r as default };

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

@@ -2,7 +2,7 @@ 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' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
     /**
      * 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.

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

@@ -1,5 +1,5 @@
 type SettingsProps = {
-    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure' | 'dl' | 'dt' | 'dd' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
     label?: string;
     decorative?: boolean;
     onUpdate?: (key: string, value: string | boolean | number) => void;

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

@@ -94,6 +94,10 @@ var o = ({ subType: o = "div", label: s = "", decorative: c = !1, onUpdate: l })
 					/* @__PURE__ */ t("option", {
 						value: "h6",
 						children: "H6 (heading with parts)"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "span",
+						children: "Span (inline)"
 					})
 				]
 			}),

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

@@ -35,7 +35,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -62,7 +62,7 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     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;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
     decorative?: boolean | undefined;
 }>>;
 export default declaration;

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

@@ -32,7 +32,8 @@ var n = [
 		"h3",
 		"h4",
 		"h5",
-		"h6"
+		"h6",
+		"span"
 	]) },
 	content: {
 		attributes: { subType: "div" },
@@ -50,7 +51,7 @@ var n = [
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -28,7 +28,7 @@ declare const Container: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -55,7 +55,7 @@ declare const Container: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     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;
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | undefined;
     decorative?: boolean | undefined;
 }>>;
 export default Container;

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

@@ -121,7 +121,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/structure/DialogContainer/declaration.mjs

@@ -97,7 +97,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/structure/DialogContainer/index.d.ts

@@ -120,7 +120,7 @@ declare const DialogContainer: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -6,8 +6,13 @@ export type ListProps<T = unknown> = {
     children?: ReactNode;
     items?: T[];
     source?: 'none' | 'controlled';
+    /**
+     * The field of each item that names it — `'slug'`, `'sku'` — so a row stays with its item when the items are
+     * filtered or reordered, and mounts again when its item changes. Left out: the item's `id`, else its position.
+     */
+    itemKey?: string;
 };
-declare const List: ({ ref, className, subType, children, items, source }: ListProps) => import('react').JSX.Element;
+declare const List: ({ ref, className, subType, children, items, source, itemKey }: ListProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ListProps<unknown>>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/structure/List/List.mjs

@@ -3,12 +3,13 @@ import t from "./modes/ListBasic.mjs";
 import n from "./modes/ListControlled/index.mjs";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/elements/structure/List/List.tsx
-var i = ({ ref: e, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none" }) => {
+var i = ({ ref: e, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none", itemKey: l }) => {
 	switch (c) {
 		case "controlled": return /* @__PURE__ */ r(n, {
 			ref: e,
 			className: i,
 			items: s,
+			itemKey: l,
 			children: o
 		});
 		default: return /* @__PURE__ */ r(t, {

package/dist/elements/structure/List/ListItem/declaration.d.ts

@@ -24,7 +24,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["listItem"];
         };

package/dist/elements/structure/List/ListItem/declaration.mjs

@@ -18,7 +18,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: ["listItem"]
 		},

package/dist/elements/structure/List/ListItem/index.d.ts

@@ -23,7 +23,7 @@ declare const ListItem: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["listItem"];
         };