@plitzi/sdk-elements 0.37.1 → 0.37.3

package/dist/Component/ComponentProvider.d.ts

@@ -5,5 +5,5 @@ export type ComponentProviderProps = {
     localCustomComponents?: Record<string, ComponentPluginWithHOC>;
     children?: ReactNode;
 };
-declare const ComponentProvider: ({ localComponents, localCustomComponents, children }: ComponentProviderProps) => import("react").JSX.Element;
+declare const ComponentProvider: ({ localComponents, localCustomComponents, children }: ComponentProviderProps) => import('react').JSX.Element;
 export default ComponentProvider;

package/dist/Component/ComponentProvider.mjs

@@ -10,10 +10,10 @@ var d = ({ localComponents: d, localCustomComponents: f, children: p }) => {
 		...n(r),
 		...n(d),
 		...t(f)
-	}), [d, f]), h = o({}), g = o({
+	}), [d, f]), h = o({}), g = a(() => ({ current: {
 		...h.current,
 		...m
-	}), _ = i((t = [], n = !1) => {
+	} }), [m]), _ = i((t = [], n = !1) => {
 		if (typeof t == "string" && !n) return g.current[t];
 		if (typeof t == "string" && n) {
 			let n = g.current[t];
@@ -30,7 +30,7 @@ var d = ({ localComponents: d, localCustomComponents: f, children: p }) => {
 				...c(e(i), [t])
 			} : r[t] = i);
 		}), r;
-	}, []), v = i((t = []) => {
+	}, [g]), v = i((t = []) => {
 		let n = {};
 		return Array.isArray(t) || (t = [t]), t.forEach((t) => {
 			t.type && !g.current[t.type] && (n = {
@@ -46,7 +46,7 @@ var d = ({ localComponents: d, localCustomComponents: f, children: p }) => {
 			...h.current,
 			...n
 		}, n);
-	}, [m]), y = i((e) => {
+	}, [g, m]), y = i((e) => {
 		if (!e) return [];
 		Array.isArray(e) || (e = [e]);
 		let t = e;
@@ -57,7 +57,11 @@ var d = ({ localComponents: d, localCustomComponents: f, children: p }) => {
 			...c(h.current, t),
 			...m
 		}, h.current = c(h.current, t), t;
-	}, [_, m]), b = o(Object.keys(g.current).reduce((e, t) => {
+	}, [
+		g,
+		_,
+		m
+	]), b = o(Object.keys(g.current).reduce((e, t) => {
 		let n = s(g.current, t, void 0);
 		return !n || !n.content ? e : {
 			...e,
@@ -83,6 +87,7 @@ var d = ({ localComponents: d, localCustomComponents: f, children: p }) => {
 		unregisterDefinition: S,
 		registerDefinition: x
 	}), [
+		g,
 		v,
 		y,
 		x,

package/dist/Element/JsxManager.d.ts

@@ -7,5 +7,5 @@ export type JsxManagerProps = {
     internalProps: InternalPropsSTG1;
     children: ReactNode;
 };
-declare const _default: import('react').MemoExoticComponent<({ plitziJsxSkipHOC, as: type, internalProps, children, ...plitziJsxProps }: JsxManagerProps) => import("react").JSX.Element | null>;
+declare const _default: import('react').MemoExoticComponent<({ plitziJsxSkipHOC, as: type, internalProps, children, ...plitziJsxProps }: JsxManagerProps) => import('react').JSX.Element | null>;
 export default _default;

package/dist/Element/JsxManager.mjs

@@ -17,6 +17,7 @@ var l = r(({ plitziJsxSkipHOC: r = !0, as: l = "", internalProps: u, children: d
 	return l ? !g && _ ? /* @__PURE__ */ c(e, {
 		internalProps: u,
 		url: _.url,
+		type: l,
 		plitziJsxSkipHOC: r,
 		plitziJsxProps: f
 	}) : (g ||= n, /* @__PURE__ */ c(g, {

package/dist/Element/LayoutBody.d.ts

@@ -15,7 +15,7 @@ export type LayoutBodyProps = {
  * `current` is the body as of the first render, which is what the server renders and what hydration reads. Later
  * bodies are announced after the commit, and the slot renders them before the browser paints.
  */
-declare const LayoutBody: ({ body, children }: LayoutBodyProps) => import("react").JSX.Element;
+declare const LayoutBody: ({ body, children }: LayoutBodyProps) => import('react').JSX.Element;
 /** The body of the nearest shell, for the element that is its slot; nothing, and no subscription, for any other. */
 export declare const useLayoutBody: (isSlot: boolean) => ReactNode;
 export default LayoutBody;

package/dist/Element/PluginManager.d.ts

@@ -4,5 +4,5 @@ export type PluginManagerProps = {
     type: string;
     internalProps: InternalPropsSTG0;
 };
-declare const _default: import('react').MemoExoticComponent<({ plitziElementLayout, type, internalProps }: PluginManagerProps) => import("react").JSX.Element | undefined>;
+declare const _default: import('react').MemoExoticComponent<({ plitziElementLayout, type, internalProps }: PluginManagerProps) => import('react').JSX.Element | undefined>;
 export default _default;

package/dist/Element/PluginRemote.d.ts

@@ -1,10 +1,12 @@
 import { InternalPropsSTG1 } from '@plitzi/sdk-shared';
 export type PluginRemoteProps = {
     url: string;
+    /** The element's type, when it is not the plugin's main one: a plugin's other elements load from the same URL. */
+    type?: string;
     internalProps: InternalPropsSTG1;
     autoRegister?: boolean;
     plitziJsxSkipHOC?: boolean;
     plitziJsxProps?: Record<string, unknown>;
 };
-declare const PluginRemote: ({ url, internalProps, autoRegister, plitziJsxSkipHOC, plitziJsxProps }: PluginRemoteProps) => import("react").JSX.Element | null;
+declare const PluginRemote: ({ url, type, internalProps, autoRegister, plitziJsxSkipHOC, plitziJsxProps }: PluginRemoteProps) => import('react').JSX.Element | null;
 export default PluginRemote;

package/dist/Element/PluginRemote.mjs

@@ -4,15 +4,15 @@ import s from "@plitzi/sdk-shared/elements/ComponentContext";
 import { emptyObject as c } from "@plitzi/sdk-shared/helpers/utils";
 import { jsx as l } from "react/jsx-runtime";
 //#region src/Element/PluginRemote.tsx
-var u = ({ url: u = "", internalProps: d, autoRegister: f = !0, plitziJsxSkipHOC: p = !1, plitziJsxProps: m = c }) => {
-	let { register: h } = r(s), [g, _] = o(!1);
-	i(() => _(!0), []);
-	let v = a(() => n(e(u, h, f, p)), [u]);
-	return g ? p ? /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(v, {
-		internalProps: d,
-		plitziJsxSkipHOC: p,
-		...m
-	}) }) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(v, { internalProps: d }) }) : null;
+var u = ({ url: u = "", type: d, internalProps: f, autoRegister: p = !0, plitziJsxSkipHOC: m = !1, plitziJsxProps: h = c }) => {
+	let { register: g } = r(s), [_, v] = o(!1);
+	i(() => v(!0), []);
+	let y = a(() => n(e(u, g, p, m, d)), [u, d]);
+	return _ ? m ? /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(y, {
+		internalProps: f,
+		plitziJsxSkipHOC: m,
+		...h
+	}) }) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(y, { internalProps: f }) }) : null;
 };
 //#endregion
 export { u as default };

package/dist/Element/ReplicaProvider.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 export type ReplicaProviderProps = {
     children?: ReactNode;
 };
-declare const ReplicaProvider: ({ children }: ReplicaProviderProps) => import("react").JSX.Element;
+declare const ReplicaProvider: ({ children }: ReplicaProviderProps) => import('react').JSX.Element;
 export default ReplicaProvider;

package/dist/Element/helpers/elementConstants.mjs

@@ -19,6 +19,18 @@ var e = {
 			label: "Propagate Event"
 		} }
 	},
+	onPointerDown: {
+		action: "onPointerDown",
+		title: "On Pointer Down",
+		type: "trigger",
+		preview: { propagateEvent: "" },
+		params: { propagateEvent: {
+			canBind: !1,
+			defaultValue: !1,
+			type: "boolean",
+			label: "Propagate Event"
+		} }
+	},
 	onMouseEnter: {
 		action: "onMouseEnter",
 		title: "On Mouse Enter",
@@ -79,6 +91,21 @@ var e = {
 			label: "Propagate Event"
 		} }
 	},
+	onKey: {
+		action: "onKey",
+		title: "On Key",
+		type: "trigger",
+		preview: {
+			key: "",
+			shortcuts: ""
+		},
+		params: { keys: {
+			canBind: !1,
+			defaultValue: "",
+			type: "text",
+			label: "Keys (e.g. f, shift+f, mod+k, escape)"
+		} }
+	},
 	onFlowEnd: {
 		action: "onFlowEnd",
 		title: "On Server Action End",
@@ -116,6 +143,7 @@ var e = {
 	}
 }, t = [
 	"onClick",
+	"onPointerDown",
 	"onHover",
 	"onFocus",
 	"onBlur",

package/dist/Element/helpers/elementUtils.mjs

@@ -8,7 +8,7 @@ var e = async (e) => {
 			URL.createObjectURL(n)
 );
 	} catch (e) {
-		console.log(e);
+		console.error(e);
 		return;
 	}
 };

package/dist/Element/helpers/loadComponent.d.ts

@@ -1,5 +1,10 @@
 import { ComponentContextValue, ComponentPluginWithHOC } from '@plitzi/sdk-shared';
-declare const loadComponent: (url: string, registerCallback: ComponentContextValue["register"], autoRegister?: boolean, plitziJsxSkipHOC?: boolean) => () => Promise<{
+/**
+ * A remote plugin's component, loaded from its module — the one of `type` when the element is not the plugin's main
+ * one. A plugin packs several elements into one module (the main as `default`, the others under `plugins`), and every
+ * element of it is loaded from the same URL: handing each the main component rendered the main element in all of them.
+ */
+declare const loadComponent: (url: string, registerCallback: ComponentContextValue["register"], autoRegister?: boolean, plitziJsxSkipHOC?: boolean, type?: string) => () => Promise<{
     default: ComponentPluginWithHOC;
 }>;
 export default loadComponent;

package/dist/Element/helpers/loadComponent.mjs

@@ -1,7 +1,7 @@
 import { generatePluginModule as e } from "./elementUtils.mjs";
 import { get as t } from "@plitzi/plitzi-ui/helpers";
 //#region src/Element/helpers/loadComponent.ts
-var n = /* @__PURE__ */ new Map(), r = (r, i, a = !0, o = !1) => async () => {
+var n = /* @__PURE__ */ new Map(), r = (r, i, a = !0, o = !1, s) => async () => {
 	if (!n.get(r)) {
 		let t = e(r).finally(() => {
 			n.delete(r);
@@ -11,16 +11,16 @@ var n = /* @__PURE__ */ new Map(), r = (r, i, a = !0, o = !1) => async () => {
 			timestamp: Date.now()
 		});
 	}
-	let s = await n.get(r)?.promise, [{ default: c }, { default: l }, { nestedInject: u }] = await Promise.all([
+	let c = await n.get(r)?.promise, [{ default: l }, { default: u }, { nestedInject: d }] = await Promise.all([
 		import("../hocs/withElement.mjs"),
 		import("../../elements/internal/NotFound/NotFound.mjs"),
 		import("../../Component/ComponentHelper.mjs")
 	]);
-	if (!s) return { default: l };
-	let { type: d, pluginSettings: f } = t(s, "default", {}), { version: p, initialItems: m, plugins: h } = s;
-	if (!d) return { default: l };
-	let g = s.default;
-	return o || (g = c(s.default)), g.version = p, g.origin = "remote", g.type = d, g.initialItems = m, g.pluginSettings = f, g.plugins = u(h, "remote"), a && i(g), { default: g };
+	if (!c) return { default: u };
+	let { type: f, pluginSettings: p } = t(c, "default", {}), { version: m, initialItems: h, plugins: g } = c;
+	if (!f) return { default: u };
+	let _ = c.default;
+	return o || (_ = l(c.default)), _.version = m, _.origin = "remote", _.type = f, _.initialItems = h, _.pluginSettings = p, _.plugins = d(g, "remote"), a && i(_), !s || s === f ? { default: _ } : { default: (o ? g?.[s] : _.plugins[s]) ?? u };
 };
 //#endregion
 export { r as default };

package/dist/Element/helpers/pluginSelector.d.ts

@@ -14,5 +14,5 @@ export declare const getRemoteSettings: ({ type, plugins }: {
 }) => {
     url: string;
 } | undefined;
-declare const pluginSelector: ({ key, plitziElementLayout, type, internalProps: internalPropsProp, components, plugins }: pluginSelectorProps) => import("react").JSX.Element | undefined;
+declare const pluginSelector: ({ key, plitziElementLayout, type, internalProps: internalPropsProp, components, plugins }: pluginSelectorProps) => import('react').JSX.Element | undefined;
 export default pluginSelector;

package/dist/Element/helpers/pluginSelector.mjs

@@ -24,6 +24,7 @@ var r = (e, t) => Object.values(e).find((e) => e.subPlugins.find((e) => e === t)
 	});
 	return f ? /* @__PURE__ */ n(e, {
 		url: f.url,
+		type: a,
 		internalProps: l
 	}, t) : u;
 };

package/dist/Element/hocs/withElement.d.ts

@@ -8,7 +8,7 @@ export type WithElementProps<T> = {
     extraProps?: Record<string, unknown>;
 } & T;
 declare const withElement: <T extends object>(WrappedComponent: FC<T>) => {
-    (props: WithElementProps<T>): import("react").JSX.Element;
+    (props: WithElementProps<T>): import('react').JSX.Element;
     displayName: string;
 };
 export default withElement;

package/dist/Element/hooks/useElementDataSource.mjs

@@ -1,27 +1,34 @@
 import { useMemo as e } from "react";
 import { useCommonStore as t } from "@plitzi/sdk-shared/store";
-import { templateRootNames as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { templatePaths as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
 //#region src/Element/hooks/useElementDataSource.ts
-var r = ({ source: e, transformers: t }) => {
-	let r = [];
-	if (e) {
-		let t = e.indexOf(".");
-		r.push(t > -1 ? e.substring(0, t) : e);
+var r = ({ source: e, transformers: t, when: r }) => {
+	let a = e ? [e] : [];
+	for (let { action: e, params: r } of t ?? []) e === "twigTemplate" && typeof r.template == "string" && r.template && a.push(...n(r.template).filter((e) => e !== "source" && !e.startsWith("source.")));
+	return r && a.push(...i(r)), a;
+}, i = (e) => e.rules.flatMap((e) => "rules" in e ? i(e) : [e.field, ...e.isBinding && typeof e.value == "string" ? [e.value] : []]), a = (e) => {
+	let t = [];
+	for (let n of [...new Set(e)].filter(Boolean).sort((e, t) => e.length - t.length)) t.some((e) => n.startsWith(`${e}.`)) || t.push(n);
+	return t;
+}, o = (e) => typeof e == "object" && !!e && !Array.isArray(e), s = (e, t, n) => {
+	let r = t.split("."), i = e;
+	for (let e of r.slice(0, -1)) {
+		let t = i[e], n = o(t) ? t : {};
+		i[e] = n, i = n;
 	}
-	for (let { action: e, params: i } of t ?? []) e === "twigTemplate" && typeof i.template == "string" && i.template && r.push(...n(i.template));
-	return r;
-}, i = ({ bindings: n, sources: i }) => {
-	let a = e(() => {
+	i[r[r.length - 1]] = n;
+}, c = ({ bindings: n, sources: i }) => {
+	let o = e(() => {
 		let e = new Set(i ?? []);
 		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) for (let n of t) for (let t of r(n)) e.add(t);
-		return e.size > 0 && !e.has("variables") && e.add("variables"), [...e];
-	}, [n, i]), o = e(() => a.map((e) => `runtime.sources.${e}`), [a]), [s] = t(o);
+		return e.size > 0 && e.add("variables"), a(e);
+	}, [n, i]), c = e(() => o.map((e) => `runtime.sources.${e}`), [o]), [l] = t(c);
 	return e(() => {
 		let e = {};
-		return a.forEach((t, n) => {
-			s[n] !== void 0 && (e[t] = s[n]);
+		return o.forEach((t, n) => {
+			l[n] !== void 0 && s(e, t, l[n]);
 		}), e;
-	}, [a, s]);
+	}, [o, l]);
 };
 //#endregion
-export { i as default };
+export { c as default };

package/dist/Element/hooks/useElementInternal.mjs

@@ -8,51 +8,56 @@ import { useMemo as o } from "react";
 import { useCommonStore as s } from "@plitzi/sdk-shared/store";
 import { get as c } from "@plitzi/plitzi-ui/helpers";
 import l from "@plitzi/sdk-shared/dataSource/getBindingsDetails";
-import { hasValidToken as u, processTwig as d } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { hasValidToken as u, processTwig as d, templatePaths as f } from "@plitzi/sdk-shared/helpers/twigWrapper";
 //#region src/Element/hooks/useElementInternal.ts
-var f = (e, n, r = {}, i = {}) => {
-	let o, { attributes: s, definition: f } = e, { rootId: p, plitziElementLayout: m } = n;
-	if (n.attributes && (s = {
-		...s,
-		...n.attributes
-	}), Object.keys(r).length > 0) {
-		let t = l(r, {
-			...e,
-			attributes: s
-		}, o);
-		({attributes: s, definition: f, style: o} = t);
-	}
-	let { queryParams: h = {}, routeParams: g = {}, variables: _ = {}, origin: v = "" } = r, y = {
-		..._,
-		...g,
-		...h,
+var p = (e, t, n) => {
+	let { queryParams: r = {}, routeParams: i = {}, variables: a = {}, origin: o = "", navigation: s, ...c } = n, l = {
+		...a,
+		...i,
+		...r,
+		...c,
 		navigation: {
-			routeParams: g,
-			queryParams: h,
-			origin: v
-		}
-	};
-	if (Object.keys(y).length > 0) {
-		let e = {};
-		for (let t of Object.keys(s)) {
-			let n = s[t];
-			e[t] = typeof n == "string" && u(n) ? d(n, y, !0) : n;
+			...s,
+			routeParams: i,
+			queryParams: r,
+			origin: o
 		}
-		s = e;
+	}, u = { ...e };
+	for (let n of t) u[n] = d(e[n], l, !0);
+	return u;
+}, m = (e) => !!e && Object.values(e).some((e) => Array.isArray(e) && e.length > 0), h = (e, n, r = {}, i = {}) => {
+	let o, { attributes: s, definition: d } = e, { rootId: f, plitziElementLayout: h } = n;
+	n.attributes && (s = {
+		...s,
+		...n.attributes
+	});
+	let g = s;
+	if (Object.keys(r).length > 0) {
+		if (m(d.bindings)) {
+			let t = l(r, {
+				...e,
+				attributes: s
+			}, o);
+			({attributes: s, definition: d, style: o} = t);
+		} else o = {};
 	}
-	return s = {
+	let _ = Object.keys(s).filter((e) => {
+		let t = s[e];
+		return typeof t == "string" && t === g[e] && u(t);
+	});
+	return _.length > 0 && (s = p(s, _, r)), s = {
 		...s,
 		...t(i, ["visibility", "styleSelectors"])
-	}, f = {
-		...f,
+	}, d = {
+		...d,
 		styleSelectors: {
-			...f.styleSelectors,
-			...f.initialState?.styleSelectors,
+			...d.styleSelectors,
+			...d.initialState?.styleSelectors,
 			...i.styleSelectors ?? {}
 		}
-	}, f.styleSelectors = a(f), {
+	}, d.styleSelectors = a(d), {
 		...n,
-		rootId: c(m, "rootId", p),
+		rootId: c(h, "rootId", f),
 		attributes: {
 			...s,
 			...t(n, [
@@ -63,33 +68,36 @@ var f = (e, n, r = {}, i = {}) => {
 				"plitziElementLayout"
 			])
 		},
-		definition: f,
+		definition: d,
 		elementState: {
-			...f.initialState,
+			...d.initialState,
 			...i
 		},
 		style: o
 	};
-}, p = ["variables"], m = (e) => Object.values(e ?? {}).some((e) => typeof e == "string" && u(e)), h = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
-	let { id: h } = l, { state: g, setElementState: _ } = r({
-		id: h,
+}, g = (e) => Object.values(e ?? {}).filter((e) => typeof e == "string" && u(e)), _ = (e) => ["variables", ...new Set(e.flatMap((e) => f(e)))], v = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
+	let { id: f } = l, { state: p, setElementState: m } = r({
+		id: f,
 		bindings: a.definition.bindings,
 		previewMode: u
-	}), v = o(() => m(a.attributes) || m(l.attributes), [a.attributes, l.attributes]), [[y, b, x]] = s([
+	}), v = o(() => {
+		let e = [...g(a.attributes), ...g(l.attributes)];
+		return e.length > 0 ? _(e) : void 0;
+	}, [a.attributes, l.attributes]), [[y, b, x]] = s([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.origin"
-	], { enabled: v }), S = n({
+	], { enabled: v !== void 0 }), S = n({
 		bindings: a.definition.bindings,
-		sources: v ? p : void 0
+		sources: v
 	}), C = o(() => ({
-		...f(a, l, {
+		...h(a, l, {
 			...S,
 			routeParams: y,
 			queryParams: b,
 			origin: x
-		}, g),
-		setElementState: _
+		}, p),
+		setElementState: m
 	}), [
 		a,
 		l,
@@ -97,12 +105,12 @@ var f = (e, n, r = {}, i = {}) => {
 		y,
 		b,
 		x,
-		g,
-		_
+		p,
+		m
 	]);
 	return {
 		internalProps: C,
-		customProps: t(C, [
+		customProps: o(() => t(C, [
 			"id",
 			"rootId",
 			"plitziElementLayout",
@@ -111,9 +119,9 @@ var f = (e, n, r = {}, i = {}) => {
 			"style",
 			"elementState",
 			"setElementState"
-		]),
+		]), [C]),
 		children: i({
-			id: h,
+			id: f,
 			definition: C.definition,
 			plitziElementLayout: C.plitziElementLayout,
 			children: c,
@@ -123,4 +131,4 @@ var f = (e, n, r = {}, i = {}) => {
 	};
 };
 //#endregion
-export { h as default, f as getProps };
+export { v as default, h as getProps };

package/dist/Element/hooks/useInternalClassName.mjs

@@ -1,27 +1,28 @@
 import { isVisible as e } from "../helpers/isVisible.mjs";
 import { useMemo as t } from "react";
 import n from "clsx";
+import { HIDDEN_CLASS as r } from "@plitzi/sdk-shared/style/styleStates";
 //#region src/Element/hooks/useInternalClassName.ts
-var r = ({ id: r, className: i, previewMode: a, baseElementId: o, plitziElementLayout: s, definition: c, elementState: l }) => {
-	let { items: u } = c, d = e(l.visibility);
-	return t(() => n(i, {
-		"plitzi-component--hidden": !d,
-		"plitzi-component": !a && !s,
-		"plitzi-component--layout": !a && !!s,
-		with__container: !a && !!u,
-		"container--empty": !a && !!u && u.length === 0 && !s,
-		"container--base-element": !a && !!u && o === r,
-		"plitzi-component--layout-body": s && r === s.containerId
-	}, c.styleSelectors.base), [
-		i,
-		d,
+var i = ({ id: i, className: a, previewMode: o, baseElementId: s, plitziElementLayout: c, definition: l, elementState: u }) => {
+	let { items: d } = l, f = e(u.visibility);
+	return t(() => n(a, {
+		[r]: !f,
+		"plitzi-component": !o && !c,
+		"plitzi-component--layout": !o && !!c,
+		with__container: !o && !!d,
+		"container--empty": !o && !!d && d.length === 0 && !c,
+		"container--base-element": !o && !!d && s === i,
+		"plitzi-component--layout-body": c && i === c.containerId
+	}, l.styleSelectors.base), [
 		a,
-		s,
-		u,
+		f,
 		o,
-		r,
-		c.styleSelectors.base
+		c,
+		d,
+		s,
+		i,
+		l.styleSelectors.base
 	]);
 };
 //#endregion
-export { r as default };
+export { i as default };

package/dist/Element/hooks/useKeyTriggers.d.ts

@@ -0,0 +1,18 @@
+import { InteractionsManager } from '@plitzi/sdk-interactions';
+import { ElementInteraction } from '@plitzi/sdk-shared';
+export type UseKeyTriggersProps = {
+    id: string;
+    interactions?: Record<string, ElementInteraction>;
+    previewMode: boolean;
+    interactionsManager: InteractionsManager;
+};
+/**
+ * The element's keyboard shortcuts: its `onKey` flows, heard on the window for as long as it is mounted.
+ *
+ * On the window rather than the element, because a shortcut is for the page — nobody focuses a map before pressing
+ * `+`. A press while typing in a field is the field's, unless it holds Ctrl, ⌘ or Alt or is Escape — and even then
+ * the field keeps its own editing (⌘A, ⌘Z, ⌘C/⌘V, moving by word: `isFieldEditing`). A press that
+ * matches is the shortcut's alone: the browser's own use of the key (an arrow scrolling the page) does not happen.
+ */
+declare const useKeyTriggers: ({ id, interactions, previewMode, interactionsManager }: UseKeyTriggersProps) => void;
+export default useKeyTriggers;

package/dist/Element/hooks/useKeyTriggers.mjs

@@ -0,0 +1,36 @@
+import { useEffect as e, useMemo as t } from "react";
+import { KEY_TRIGGER as n, isFieldEditing as r, keyPressCombo as i, parseKeys as a } from "@plitzi/sdk-shared/helpers/keys";
+//#region src/Element/hooks/useKeyTriggers.ts
+var o = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]", s = (e) => e instanceof Element && e.closest(o) !== null, c = () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent), l = ({ id: o, interactions: l, previewMode: u, interactionsManager: d }) => {
+	let f = t(() => [...new Set(Object.values(l ?? {}).flatMap((e) => {
+		let { keys: t } = e.params;
+		return e.type === "trigger" && e.action === n && e.enabled && typeof t == "string" ? [t] : [];
+	}))], [l]);
+	e(() => {
+		if (!u || !f.length) return;
+		let e = c(), t = f.map((t) => ({
+			spec: t,
+			combos: a(t, e).combos
+		})), l = (e) => {
+			if (e.isComposing) return;
+			let a = i(e), c = e.ctrlKey || e.metaKey || e.altKey;
+			if (s(e.target) && (!c && a !== "escape" || r(a))) return;
+			let l = t.filter((e) => e.combos.includes(a)).map((e) => e.spec);
+			if (!l.length) return;
+			e.preventDefault();
+			let u = {
+				key: a,
+				shortcuts: l
+			};
+			d.interactionTrigger(o, n, u);
+		};
+		return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
+	}, [
+		o,
+		d,
+		u,
+		f
+	]);
+};
+//#endregion
+export { l as default };