@plitzi/sdk-elements 0.38.11 → 0.38.12

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.mjs

@@ -1,19 +1,19 @@
 import e from "../../../../../Element/ReplicaProvider.mjs";
-import { useId as t, useMemo as n } from "react";
-import { StoreProvider as r } from "@plitzi/nexus/react";
-import { emptyObject as i } from "@plitzi/sdk-shared/helpers/utils";
+import t from "../../../../../dataSource/sourceStore.mjs";
+import { useId as n, useMemo as r } from "react";
+import { StoreProvider as i } from "@plitzi/nexus/react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "clsx";
 //#region src/elements/structure/List/modes/ListControlled/ListControlledItem.tsx
 var c = ({ children: c, className: l = "", isTemplate: u = !1, index: d = 0, record: f, source: p = "" }) => {
-	let m = t(), h = n(() => p ? { runtime: { sources: { [p]: {
+	let m = n(), h = r(() => t(p, {
 		item: f,
 		index: d
-	} } } } : i, [
+	}), [
 		p,
 		f,
 		d
-	]), g = /* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(r, {
+	]), g = /* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(i, {
 		inherit: "live",
 		name: `Row:${p}`,
 		segment: m,

package/dist/elements/structure/ModalContainer/ModalContainer.mjs

@@ -1,129 +1,35 @@
 import e from "./declaration.mjs";
 import t from "../../../Element/hocs/withElement.mjs";
-import n from "../../../Element/hooks/useElement.mjs";
-import { RootElement as r } from "../../../Element/RootElement.mjs";
-import i from "../../../dataSource/pathFields.mjs";
-import a from "./useModalDialog.mjs";
-import { metadataFromText as o } from "./metadataFromText.mjs";
-import { use as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import p from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { StoreProvider as m } from "@plitzi/nexus/react";
-import { emptyObject as h } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import v from "clsx";
-import y from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import b from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import n from "../Overlay/OverlayShell.mjs";
+import r from "../Overlay/useOverlay.mjs";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/elements/structure/ModalContainer/ModalContainer.tsx
-var x = ({ ref: t, className: x = "", children: S, title: C = "Modal Header", autoHideAfterClick: w = !0 }) => {
-	let { id: T, rootId: E, visible: D, definition: { styleSelectors: O, label: k = "Modal" }, elementState: A, setElementState: j } = n(), M = y(e.sourceType, T), { settings: { previewMode: N }, contexts: { InteractionsContext: P } } = p(), { interactionsManager: F } = s(P), [I, L] = f({}), R = d(null), z = `${E}_${T}_title`, B = c((e) => {
-		let { metadata: t } = e;
-		L(t && typeof t == "object" ? t : typeof t == "string" ? o(t) : typeof t == "boolean" || typeof t == "number" ? { content: t } : {}), j((e) => ({
-			...e,
-			visibility: !0
-		}));
-	}, [j, L]), V = c(() => {
-		F.interactionTrigger(T, "onModalClose", { metadata: I }), L({}), j((e) => ({
-			...e,
-			visibility: !1
-		}));
-	}, [
-		F,
-		j,
-		L,
-		I,
-		T
-	]), H = c(() => {
-		w && (F.interactionTrigger(T, "onModalClose", { metadata: I }), L({}), j((e) => ({
-			...e,
-			visibility: !1
-		})));
-	}, [
-		F,
-		w,
-		j,
-		L,
-		I,
-		T
-	]), U = u(() => ({
-		openModal: {
-			...e.callbacks.openModal,
-			title: `Open ${k}`,
-			callback: B
+var a = ({ ref: t, className: a = "", children: o, title: s = "Modal Header", autoHideAfterClick: c = !0 }) => {
+	let l = r({
+		name: "Modal",
+		sourceType: e.sourceType,
+		callbacks: {
+			open: e.callbacks.openModal,
+			close: e.callbacks.closeModal
 		},
-		closeModal: {
-			...e.callbacks.closeModal,
-			title: `Close ${k}`,
-			callback: V
-		}
-	}), [
-		V,
-		B,
-		k
-	]);
-	a({
-		panelRef: R,
-		open: !!N && D,
-		onClose: V
-	}), l(() => {
-		A.visibility !== !1 && F.interactionTrigger(T, "onModalOpen", { metadata: I });
-	}, [
-		T,
-		F,
-		I,
-		A.visibility
-	]);
-	let W = c(() => i(I), [I]);
-	b({
-		id: T,
-		source: M,
-		name: k || `Modal - ${T}`,
-		fields: W
+		events: {
+			open: "onModalOpen",
+			close: "onModalClose"
+		},
+		autoHideAfterClick: c
 	});
-	let G = u(() => M ? { runtime: { sources: { [M]: I } } } : h, [M, I]);
-	return /* @__PURE__ */ _(r, {
+	return /* @__PURE__ */ i(n, {
 		ref: t,
-		className: v("plitzi-component__modal-container", x),
-		interactionTriggers: e.triggers,
-		interactionCallbacks: U,
-		children: [/* @__PURE__ */ g("div", {
-			className: v("modal-container__background", O.backgroundContainer),
-			"aria-hidden": "true",
-			onClick: H
-		}), /* @__PURE__ */ _("div", {
-			ref: R,
-			className: v("modal-container__root", O.rootContainer),
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-labelledby": z,
-			tabIndex: -1,
-			children: [/* @__PURE__ */ _("div", {
-				className: v("modal-container__header", O.headerContainer),
-				children: [/* @__PURE__ */ g("div", {
-					id: z,
-					className: v("modal-container__header__title", O.headerTitle),
-					children: C || "Modal Header"
-				}), /* @__PURE__ */ g("button", {
-					type: "button",
-					className: v("modal-container__close", O.headerCloseButton),
-					"aria-label": "Close",
-					title: "Close",
-					onClick: V,
-					children: /* @__PURE__ */ g("i", {
-						className: "fa-solid fa-xmark",
-						"aria-hidden": "true"
-					})
-				})]
-			}), /* @__PURE__ */ g("div", {
-				className: v("modal-container__body", O.bodyContainer),
-				children: /* @__PURE__ */ g(m, {
-					inherit: "live",
-					name: `Modal:${T}`,
-					value: G,
-					children: S
-				})
-			})]
-		})]
+		className: a,
+		block: "modal-container",
+		role: "dialog",
+		storeName: "Modal",
+		title: s || "Modal Header",
+		overlay: l,
+		triggers: e.triggers,
+		onDismiss: l.close,
+		children: o
 	});
-}, S = t(x);
+}, o = t(a);
 //#endregion
-export { x as ModalContainer, S as default };
+export { a as ModalContainer, o as default };

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

@@ -1,24 +1,25 @@
-import { useCallback as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Checkbox";
-import i from "@plitzi/plitzi-ui/Input";
+import e from "../../useSettingsUpdate.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Checkbox";
+import a from "@plitzi/plitzi-ui/Input";
 //#region src/elements/structure/ModalContainer/Settings.tsx
-var a = ({ title: a = "Modal Header", autoHideAfterClick: o = !0, onUpdate: s }) => {
-	let c = e((e) => (t) => s?.(e, t), [s]), l = e((e) => s?.("autoHideAfterClick", e.target.checked), [s]);
-	return /* @__PURE__ */ n("div", {
+var o = ({ title: o = "Modal Header", autoHideAfterClick: s = !0, onUpdate: c }) => {
+	let l = e(c), u = t((e) => c?.("autoHideAfterClick", e.target.checked), [c]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: [/* @__PURE__ */ t(i, {
+		children: [/* @__PURE__ */ n(a, {
 			label: "Title",
-			value: a,
-			onChange: c("title"),
+			value: o,
+			onChange: l.text("title"),
 			size: "xs"
-		}), /* @__PURE__ */ t(r, {
+		}), /* @__PURE__ */ n(i, {
 			label: "Hide after click background",
-			checked: o,
-			onChange: l,
+			checked: s,
+			onChange: u,
 			size: "xs"
 		})]
 	});
 };
 //#endregion
-export { a as default };
+export { o as default };

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

@@ -2,7 +2,7 @@ import { ModalContainerProps } from './ModalContainer';
 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 ModalContainerAttributes = AuthorableAttributes<ModalContainerProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "modalContainer";
     readonly sourceType: "modalContainer";
     readonly triggers: {
@@ -58,10 +58,8 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Modal Container";
-            readonly type: "modalContainer";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             /**
              * A modal nobody opens is the commonest hidden subtree on a page, and before this it was built, bound and
              * subscribed on every render of the page it sat in. `lazy` rather than `visible` so what a visitor typed into
@@ -69,7 +67,6 @@ declare const declaration: {
              */
             readonly loadStrategy: "lazy";
             readonly styleSelectors: {
-                readonly base: "";
                 readonly backgroundContainer: "";
                 readonly rootContainer: "";
                 readonly headerContainer: "";
@@ -77,31 +74,12 @@ declare const declaration: {
                 readonly headerCloseButton: "";
                 readonly bodyContainer: "";
             };
-            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-regular fa-clone";
         };
         readonly defaultStyle: {
-            readonly name: "Modal Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -206,10 +184,9 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["container"];
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     title?: string | undefined;
     autoHideAfterClick?: boolean | undefined;
 }>>;

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

@@ -48,43 +48,23 @@ var t = e()({
 		},
 		definition: {
 			label: "Modal Container",
-			type: "modalContainer",
 			description: "A modal overlay container opened and closed through interactions; use for dialogs over the page. The element itself is fixed over the whole viewport, and holds two layers side by side — neither inside the other: `backgroundContainer`, the dim layer, `rgb(0 0 0 / 50%)` (its `background-color` is the whole dim), and `rootContainer`, the dialog, centred by `top: 50%`, `left: 50%` and `transform: translate3d(-50%, -50%, 0)` — to sit it near the top, set `top` and `transform: translateX(-50%)`; flex alignment on the dim layer moves nothing. Inside the dialog, top to bottom: `headerContainer` (with `headerTitle` and `headerCloseButton`) and `bodyContainer`.",
 			items: [],
-			bindings: {},
 			loadStrategy: "lazy",
 			styleSelectors: {
-				base: "",
 				backgroundContainer: "",
 				rootContainer: "",
 				headerContainer: "",
 				headerTitle: "",
 				headerCloseButton: "",
 				bodyContainer: ""
-			},
-			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-regular fa-clone"
 		},
 		defaultStyle: {
-			name: "Modal Container",
-			displayMode: "desktop",
 			style: {
 				base: { default: {
 					position: "fixed",
@@ -174,8 +154,7 @@ var t = e()({
 				} }
 			},
 			subTypes: {}
-		},
-		settings: {}
+		}
 	},
 	initialItems: ["container"]
 });

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

@@ -57,13 +57,10 @@ declare const ModalContainer: {
         };
         readonly definition: {
             readonly label: "Modal Container";
-            readonly type: "modalContainer";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             readonly loadStrategy: "lazy";
             readonly styleSelectors: {
-                readonly base: "";
                 readonly backgroundContainer: "";
                 readonly rootContainer: "";
                 readonly headerContainer: "";
@@ -71,31 +68,12 @@ declare const ModalContainer: {
                 readonly headerCloseButton: "";
                 readonly bodyContainer: "";
             };
-            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-regular fa-clone";
         };
         readonly defaultStyle: {
-            readonly name: "Modal Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {
@@ -200,9 +178,10 @@ declare const ModalContainer: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
     readonly initialItems: readonly ["container"];
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     title?: string | undefined;
     autoHideAfterClick?: boolean | undefined;

package/dist/elements/structure/Overlay/OverlayShell.d.ts

@@ -0,0 +1,24 @@
+import { Overlay } from './useOverlay';
+import { InteractionCallback } from '@plitzi/sdk-shared';
+import { ReactNode, RefObject } from 'react';
+export type OverlayShellProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    /** Its class names' stem: `modal-container` gives `plitzi-component__modal-container`, `modal-container__root`… */
+    block: string;
+    /** `alertdialog` for one that asks for an answer: a screen reader reads it out as it opens. */
+    role: 'dialog' | 'alertdialog';
+    /** What its store is called in the dev tools: `Modal:<id>`. */
+    storeName: string;
+    title: string;
+    overlay: Overlay;
+    triggers: Record<string, InteractionCallback>;
+    /** What the close button and Escape do. */
+    onDismiss: () => void;
+    children?: ReactNode;
+    /** Below the body: a dialog's answers. */
+    footer?: ReactNode;
+};
+/** A modal's and a dialog's markup: the backdrop, the panel the keyboard is kept in, its header and its body. */
+declare const OverlayShell: ({ ref, className, block, role, storeName, title, overlay, triggers, onDismiss, children, footer }: OverlayShellProps) => import('react').JSX.Element;
+export default OverlayShell;

package/dist/elements/structure/Overlay/OverlayShell.mjs

@@ -0,0 +1,64 @@
+import { RootElement as e } from "../../../Element/RootElement.mjs";
+import t from "./useModalDialog.mjs";
+import { useRef as n } from "react";
+import { StoreProvider as r } from "@plitzi/nexus/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/elements/structure/Overlay/OverlayShell.tsx
+var s = ({ ref: s, className: c = "", block: l, role: u, storeName: d, title: f, overlay: p, triggers: m, onDismiss: h, children: g, footer: _ }) => {
+	let { id: v, titleId: y, styleSelectors: b, open: x, interactionCallbacks: S, storeValue: C, closeFromBackdrop: w } = p, T = n(null);
+	return t({
+		panelRef: T,
+		open: x,
+		onClose: h
+	}), /* @__PURE__ */ a(e, {
+		ref: s,
+		className: o(`plitzi-component__${l}`, c),
+		interactionTriggers: m,
+		interactionCallbacks: S,
+		children: [/* @__PURE__ */ i("div", {
+			className: o(`${l}__background`, b.backgroundContainer),
+			"aria-hidden": "true",
+			onClick: w
+		}), /* @__PURE__ */ a("div", {
+			ref: T,
+			className: o(`${l}__root`, b.rootContainer),
+			role: u,
+			"aria-modal": "true",
+			"aria-labelledby": y,
+			tabIndex: -1,
+			children: [
+				/* @__PURE__ */ a("div", {
+					className: o(`${l}__header`, b.headerContainer),
+					children: [/* @__PURE__ */ i("div", {
+						id: y,
+						className: o(`${l}__header__title`, b.headerTitle),
+						children: f
+					}), /* @__PURE__ */ i("button", {
+						type: "button",
+						className: o(`${l}__close`, b.headerCloseButton),
+						"aria-label": "Close",
+						title: "Close",
+						onClick: h,
+						children: /* @__PURE__ */ i("i", {
+							className: "fa-solid fa-xmark",
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: o(`${l}__body`, b.bodyContainer),
+					children: /* @__PURE__ */ i(r, {
+						inherit: "live",
+						name: `${d}:${v}`,
+						value: C,
+						children: g
+					})
+				}),
+				_
+			]
+		})]
+	});
+};
+//#endregion
+export { s as default };

package/dist/elements/structure/Overlay/metadataOf.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What `openModal('modal', …)` — or `openDialog` — hands the container, as its data: an object is its fields, a JSON
+ * object in text is too, and anything else is `content`.
+ *
+ * Numeric ids are the common case, and `'42'` parses as JSON too — as the number. Set as the container's data whole, it
+ * had no `content` and every binding inside read nothing.
+ */
+export declare const metadataOf: (metadata: unknown) => Record<string, unknown>;

package/dist/elements/structure/{ModalContainer/metadataFromText.mjs → Overlay/metadataOf.mjs}

@@ -1,6 +1,9 @@
 import { isRecord as e } from "@plitzi/sdk-shared/helpers/isRecord";
-//#region src/elements/structure/ModalContainer/metadataFromText.ts
+//#region src/elements/structure/Overlay/metadataOf.ts
 var t = (t) => {
+	if (e(t)) return t;
+	if (t == null) return {};
+	if (typeof t != "string") return { content: t };
 	try {
 		let n = JSON.parse(t);
 		if (e(n)) return n;
@@ -8,4 +11,4 @@ var t = (t) => {
 	return { content: t };
 };
 //#endregion
-export { t as metadataFromText };
+export { t as metadataOf };

package/dist/elements/structure/{ModalContainer → Overlay}/useModalDialog.mjs

@@ -1,5 +1,5 @@
 import { useEffect as e, useEffectEvent as t } from "react";
-//#region src/elements/structure/ModalContainer/useModalDialog.ts
+//#region src/elements/structure/Overlay/useModalDialog.ts
 var n = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", r = (e) => [...e.querySelectorAll(n)].filter((e) => typeof e.checkVisibility != "function" || e.checkVisibility()), i = ({ panelRef: n, open: i, onClose: a }) => {
 	let o = t(a);
 	e(() => {

package/dist/elements/structure/Overlay/useOverlay.d.ts

@@ -0,0 +1,40 @@
+import { InteractionCallback } from '@plitzi/sdk-shared';
+export type UseOverlayProps = {
+    /** What it is called where it has no label of its own: `Modal`, `Dialog`. */
+    name: string;
+    sourceType: string;
+    /** The callbacks it answers — `openModal` and `closeModal` — as its declaration has them. */
+    callbacks: {
+        open: InteractionCallback;
+        close: InteractionCallback;
+    };
+    /** The events it fires as it opens and closes — `onModalOpen`, `onModalClose`. */
+    events: {
+        open: string;
+        close: string;
+    };
+    /** Whether a click on the backdrop closes it. */
+    autoHideAfterClick: boolean;
+};
+/**
+ * What a modal and a dialog share: the data they were opened with, published to what is inside them as their source;
+ * the callbacks that open and close them; and the events they fire as they do.
+ */
+declare const useOverlay: ({ name, sourceType, callbacks, events, autoHideAfterClick }: UseOverlayProps) => {
+    id: string;
+    titleId: string;
+    styleSelectors: {
+        [selector: string]: string;
+        base: string;
+    };
+    /** Shown, and on a rendered page — never in the builder, where it is something being edited. */
+    open: boolean;
+    interactionCallbacks: Record<string, InteractionCallback>;
+    storeValue: {};
+    trigger: (event: string) => Promise<unknown[]> | undefined;
+    hide: () => void;
+    close: () => void;
+    closeFromBackdrop: () => void;
+};
+export type Overlay = ReturnType<typeof useOverlay>;
+export default useOverlay;

package/dist/elements/structure/Overlay/useOverlay.mjs

@@ -0,0 +1,83 @@
+import e from "../../../Element/hooks/useElement.mjs";
+import t from "../../../dataSource/pathFields.mjs";
+import n from "../../../dataSource/sourceStore.mjs";
+import { metadataOf as r } from "./metadataOf.mjs";
+import { use as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitzi";
+import u from "@plitzi/sdk-interactions/InteractionsContext";
+import d from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import f from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+//#region src/elements/structure/Overlay/useOverlay.ts
+var p = ({ name: p, sourceType: m, callbacks: h, events: g, autoHideAfterClick: _ }) => {
+	let { id: v, rootId: y, visible: b, definition: { styleSelectors: x, label: S = p }, elementState: C, setElementState: w } = e(), T = d(m, v), { settings: { previewMode: E } } = l(), { interactionsManager: D } = i(u), [O, k] = c({}), A = a((e) => D.interactionTrigger(v, e, { metadata: O }), [
+		v,
+		D,
+		O
+	]), j = a(() => {
+		k({}), w((e) => ({
+			...e,
+			visibility: !1
+		}));
+	}, [w]), M = a((e) => {
+		k(r(e.metadata)), w((e) => ({
+			...e,
+			visibility: !0
+		}));
+	}, [w]), N = a(() => {
+		A(g.close), j();
+	}, [
+		g.close,
+		j,
+		A
+	]), P = a(() => {
+		_ && N();
+	}, [_, N]), F = s(() => ({
+		[h.open.action]: {
+			...h.open,
+			title: `Open ${S}`,
+			callback: M
+		},
+		[h.close.action]: {
+			...h.close,
+			title: `Close ${S}`,
+			callback: N
+		}
+	}), [
+		h.close,
+		h.open,
+		N,
+		S,
+		M
+	]);
+	o(() => {
+		C.visibility !== !1 && D.interactionTrigger(v, g.open, { metadata: O });
+	}, [
+		v,
+		D,
+		O,
+		C.visibility,
+		g.open
+	]);
+	let I = a(() => t(O), [O]);
+	f({
+		id: v,
+		source: T,
+		name: S || `${p} - ${v}`,
+		fields: I
+	});
+	let L = s(() => n(T, O), [T, O]);
+	return {
+		id: v,
+		titleId: `${y}_${v}_title`,
+		styleSelectors: x,
+		open: !!E && b,
+		interactionCallbacks: F,
+		storeValue: L,
+		trigger: A,
+		hide: j,
+		close: N,
+		closeFromBackdrop: P
+	};
+};
+//#endregion
+export { p as default };