@plitzi/sdk-elements 0.37.8 → 0.37.10

package/dist/dataSource/GlobalSources.mjs

@@ -1,15 +1,17 @@
-import { use as e, useCallback as t, useMemo as n, useRef as r } from "react";
-import { useCommonStore as i, useCommonStoreSync as a, useRenderSettings as o } from "@plitzi/sdk-shared/store";
-import { get as s } from "@plitzi/plitzi-ui/helpers";
-import { getPathsFromObeject as c } from "@plitzi/sdk-shared/helpers/utils";
-import { evaluateComputed as l, resolveVariables as u } from "@plitzi/sdk-shared/dataSource";
-import d, { SPACE_THEME_AREA as f } from "@plitzi/sdk-shared/theme/useTheme";
+import { use as e, useCallback as t, useEffect as n, useMemo as r, useRef as i } from "react";
+import { useCommonStore as a, useCommonStoreSync as o, useRenderSettings as s } from "@plitzi/sdk-shared/store";
+import { get as ee } from "@plitzi/plitzi-ui/helpers";
+import { flagValues as c, undeclaredFlagOverrides as l } from "@plitzi/sdk-shared/flags";
+import { getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
+import { evaluateComputed as d, resolveVariables as te } from "@plitzi/sdk-shared/dataSource";
+import ne, { SPACE_THEME_AREA as f } from "@plitzi/sdk-shared/theme/useTheme";
 import p from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 import m from "@plitzi/sdk-auth/AuthContext";
-import h from "@plitzi/sdk-shared/hooks/useStableValue";
+import h from "@plitzi/sdk-shared/flags/useFlagResolution";
+import g from "@plitzi/sdk-shared/hooks/useStableValue";
 //#region src/dataSource/GlobalSources.tsx
-var g = ({ children: g }) => {
-	let { environment: _ } = o(), [[v, y, b, x, S, C, w]] = i([
+var _ = ({ children: _ }) => {
+	let { environment: v } = s(), [[y, b, x, S, C, w, T]] = a([
 		"schema.variables",
 		"navigation.routeParams",
 		"navigation.queryParams",
@@ -17,46 +19,46 @@ var g = ({ children: g }) => {
 		"navigation.origin",
 		"navigation.href",
 		"navigation.currentPageId"
-	]), T = h(n(() => u(v, {
-		routeParams: y,
-		queryParams: b,
-		hostname: x,
-		environment: _
+	]), E = g(r(() => te(y, {
+		routeParams: b,
+		queryParams: x,
+		hostname: S,
+		environment: v
 	}), [
-		_,
+		v,
+		S,
 		x,
 		b,
-		y,
-		v
-	])), E = t(() => c(T).map((e) => ({
+		y
+	])), re = t(() => u(E).map((e) => ({
 		path: e,
 		name: `variables.${e}`
-	})), [T]);
+	})), [E]);
 	p({
 		id: "global",
 		source: "variables",
 		name: "Variables",
-		fields: E
-	}), a("runtime.sources.variables", T);
-	let [D = {}] = i("pageDefinitions"), O = n(() => Object.values(D).map((e) => ({
+		fields: re
+	}), o("runtime.sources.variables", E);
+	let [D = {}] = a("pageDefinitions"), O = r(() => Object.values(D).map((e) => ({
 		value: e.id,
-		label: s(e, "attributes.name", e.id)
-	})), [D]), k = n(() => ({
-		routeParams: y,
-		queryParams: b,
-		origin: S,
-		href: C,
-		currentPageId: w
+		label: ee(e, "attributes.name", e.id)
+	})), [D]), k = r(() => ({
+		routeParams: b,
+		queryParams: x,
+		origin: C,
+		href: w,
+		currentPageId: T
 	}), [
-		y,
 		b,
-		S,
+		x,
 		C,
-		w
+		w,
+		T
 	]), A = t(() => {
-		let e = c({
-			routeParams: y,
-			queryParams: b
+		let e = u({
+			routeParams: b,
+			queryParams: x
 		}).map((e) => ({
 			path: e,
 			name: `navigation.${e}`
@@ -82,8 +84,8 @@ var g = ({ children: g }) => {
 			r
 		];
 	}, [
-		y,
 		b,
+		x,
 		O
 	]);
 	p({
@@ -91,94 +93,111 @@ var g = ({ children: g }) => {
 		source: "navigation",
 		name: "Navigation",
 		fields: A
-	}), a("runtime.sources.navigation", k);
-	let { user: j, authenticated: M, state: N } = e(m), [P = "basic"] = i("schema.settings.userProvider"), F = n(() => P === "" ? {} : {
-		isAuthenticated: M,
-		...N === void 0 ? {} : { status: N },
-		accessToken: j?.accessToken ?? "",
+	}), o("runtime.sources.navigation", k);
+	let j = e(m), { user: M, authenticated: N, state: P } = j, [F = "basic"] = a("schema.settings.userProvider"), I = r(() => F === "" ? {} : {
+		isAuthenticated: N,
+		...P === void 0 ? {} : { status: P },
+		accessToken: M?.accessToken ?? "",
 		details: {
 			username: "",
 			email: "",
 			roles: "",
 			permissions: "",
 			verified: "",
-			...j?.details ?? {}
+			...M?.details ?? {}
 		}
 	}, [
-		P,
-		j,
+		F,
 		M,
-		N
-	]), I = t(() => c(F).map((e) => ({
+		N,
+		P
+	]), L = t(() => u(I).map((e) => ({
 		path: e,
 		name: `user.${e}`
-	})), [F]);
+	})), [I]);
 	p({
 		id: "global",
 		source: "auth",
 		name: "Auth State",
-		fields: I
-	}), a("runtime.sources.auth", F);
-	let [L] = i("runtime.state"), R = t(() => c(L).map((e) => ({
+		fields: L
+	}), o("runtime.sources.auth", I);
+	let R = h(j), z = r(() => c(R), [R]), B = t(() => Object.keys(z).map((e) => ({
+		path: e,
+		name: `flags.${e}`,
+		inputType: "checkbox"
+	})), [z]);
+	p({
+		id: "global",
+		source: "flags",
+		name: "Feature Flags",
+		fields: B
+	}), o("runtime.sources.flags", z), o("flags.resolved", R);
+	let [V, H] = a(["schema.flags", "flags.overrides"])[0], U = g(l(V, H ?? {}));
+	n(() => {
+		U.forEach(({ layer: e, name: t }) => console.warn(`[plitzi] The ${e} sets the feature flag "${t}", which this space does not declare: the override is ignored. Declare the flag in the space, or remove the override.`));
+	}, [U]);
+	let [W] = a("runtime.state"), G = t(() => u(W).map((e) => ({
 		path: e,
 		name: `state.${e}`
-	})), [L]);
+	})), [W]);
 	p({
 		id: "global",
 		source: "state",
 		name: "State",
-		fields: R
-	}), a("runtime.sources.state", L);
-	let [z] = i("runtime.host"), B = t(() => c(z).map((e) => ({
+		fields: G
+	}), o("runtime.sources.state", W);
+	let [K] = a("runtime.host"), q = t(() => u(K).map((e) => ({
 		path: e,
 		name: `host.${e}`
-	})), [z]);
+	})), [K]);
 	p({
 		id: "global",
 		source: "host",
 		name: "Host",
-		fields: B
-	}), a("runtime.sources.host", z);
-	let { theme: V, resolvedTheme: H } = d(f), U = n(() => ({
-		mode: V,
-		resolved: H
-	}), [V, H]), W = t(() => c(U).map((e) => ({
+		fields: q
+	}), o("runtime.sources.host", K);
+	let { theme: J, resolvedTheme: Y } = ne(f), X = r(() => ({
+		mode: J,
+		resolved: Y
+	}), [J, Y]), ie = t(() => u(X).map((e) => ({
 		path: e,
 		name: `theme.${e}`
-	})), [U]);
+	})), [X]);
 	p({
 		id: "global",
 		source: "theme",
 		name: "Theme",
-		fields: W
-	}), a("runtime.sources.theme", U);
-	let [G] = i("schema.settings.computed"), K = r(void 0), q = n(() => l(G ?? {}, {
-		variables: T,
+		fields: ie
+	}), o("runtime.sources.theme", X);
+	let [Z] = a("schema.settings.computed"), Q = i(void 0), $ = r(() => d(Z ?? {}, {
+		variables: E,
 		navigation: k,
-		auth: F,
-		state: L ?? {},
-		host: z ?? {},
-		theme: U
-	}, K.current), [
-		G,
-		T,
+		auth: I,
+		state: W ?? {},
+		host: K ?? {},
+		theme: X,
+		flags: z
+	}, Q.current), [
+		Z,
+		E,
 		k,
-		F,
-		L,
-		z,
-		U
+		I,
+		W,
+		K,
+		X,
+		z
 	]);
-	K.current = q;
-	let J = t(() => c(q).map((e) => ({
+	Q.current = $;
+	let ae = t(() => u($).map((e) => ({
 		path: e,
 		name: `computed.${e}`
-	})), [q]);
+	})), [$]);
 	return p({
 		id: "global",
 		source: "computed",
 		name: "Computed",
-		fields: J
-	}), a("runtime.sources.computed", q), g;
+		fields: ae
+	}), o("runtime.sources.computed", $), _;
 };
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/dataSource/useFlag.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether one of the space's feature flags is on, for a plugin — the `flags` source an element reads as
+ * `{{ flags.<name> }}`, read without a binding.
+ *
+ * It follows every layer that decides a flag, a tester forcing it included, and renders again when it changes. A
+ * flag the space does not declare is off: a plugin cannot invent one, only ask about the ones the space has.
+ */
+declare const useFlag: (name: string) => boolean;
+export default useFlag;

package/dist/dataSource/useFlag.mjs

@@ -0,0 +1,8 @@
+import { useCommonStore as e } from "@plitzi/sdk-shared/store";
+//#region src/dataSource/useFlag.ts
+var t = (t) => {
+	let [n] = e(`runtime.sources.flags.${t}`);
+	return n === !0;
+};
+//#endregion
+export { t as default };

package/dist/elements/advanced/BlockHtml/declaration.d.ts

@@ -25,7 +25,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/advanced/BlockHtml/declaration.mjs

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

package/dist/elements/advanced/BlockHtml/index.d.ts

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

package/dist/elements/advanced/BlockJsx/Settings.mjs

@@ -36,8 +36,9 @@ var m = ({ content: m = "", props: h = "{}", onUpdate: g }) => {
 			className: "flex flex-col py-2",
 			children: [
 				x && /* @__PURE__ */ o(f, {
-					className: "mb-4 text-white",
+					className: "mb-4",
 					intent: "error",
+					size: "sm",
 					children: /* @__PURE__ */ s("div", {
 						className: "flex flex-col text-xs",
 						children: [/* @__PURE__ */ o("div", {

package/dist/elements/advanced/BlockJsx/declaration.d.ts

@@ -31,7 +31,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/advanced/BlockJsx/declaration.mjs

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

package/dist/elements/advanced/BlockJsx/index.d.ts

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

package/dist/elements/advanced/Custom/declaration.d.ts

@@ -33,7 +33,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/advanced/Custom/declaration.mjs

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

package/dist/elements/advanced/Custom/index.d.ts

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

package/dist/elements/advanced/NodeHtml/declaration.d.ts

@@ -33,7 +33,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 [];
         };
@@ -76,6 +76,8 @@ declare const declaration: {
     slot?: string | undefined | undefined;
     title?: string | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
+    hidden?: boolean | undefined | undefined;
+    onScroll?: import('react').UIEventHandler<"span"> | undefined;
     onLoad?: import('react').ReactEventHandler<"span"> | undefined;
     onClick?: import('react').MouseEventHandler<"span"> | undefined;
     onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
@@ -284,7 +286,6 @@ declare const declaration: {
     onGotPointerCaptureCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onLostPointerCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onLostPointerCaptureCapture?: import('react').PointerEventHandler<"span"> | undefined;
-    onScroll?: import('react').UIEventHandler<"span"> | undefined;
     onScrollCapture?: import('react').UIEventHandler<"span"> | undefined;
     onScrollEnd?: import('react').UIEventHandler<"span"> | undefined;
     onScrollEndCapture?: import('react').UIEventHandler<"span"> | undefined;
@@ -316,7 +317,6 @@ declare const declaration: {
     dir?: string | undefined | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;

package/dist/elements/advanced/NodeHtml/declaration.mjs

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

package/dist/elements/advanced/NodeHtml/index.d.ts

@@ -25,7 +25,7 @@ declare const NodeHtml: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -68,6 +68,8 @@ declare const NodeHtml: {
     slot?: string | undefined | undefined;
     title?: string | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
+    hidden?: boolean | undefined | undefined;
+    onScroll?: import('react').UIEventHandler<"span"> | undefined;
     onLoad?: import('react').ReactEventHandler<"span"> | undefined;
     onClick?: import('react').MouseEventHandler<"span"> | undefined;
     onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
@@ -276,7 +278,6 @@ declare const NodeHtml: {
     onGotPointerCaptureCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onLostPointerCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onLostPointerCaptureCapture?: import('react').PointerEventHandler<"span"> | undefined;
-    onScroll?: import('react').UIEventHandler<"span"> | undefined;
     onScrollCapture?: import('react').UIEventHandler<"span"> | undefined;
     onScrollEnd?: import('react').UIEventHandler<"span"> | undefined;
     onScrollEndCapture?: import('react').UIEventHandler<"span"> | undefined;
@@ -308,7 +309,6 @@ declare const NodeHtml: {
     dir?: string | undefined | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;

package/dist/elements/advanced/Reference/PropField.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProp } from '@plitzi/sdk-shared';
+export type PropFieldProps = {
+    name: string;
+    prop: ComponentProp;
+    value: unknown;
+    onUpdate?: (key: string, value: string | number | boolean | object) => void;
+};
+/**
+ * One prop of an instance, with the control its declared type asks for. A text box takes a template as readily as a
+ * value — `{{ item.name }}` — which is how an instance hands in what is around it.
+ */
+declare const PropField: (props: PropFieldProps) => import('react').JSX.Element;
+export default PropField;

package/dist/elements/advanced/Reference/PropField.mjs

@@ -0,0 +1,65 @@
+import { useCallback as e, useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/TextArea";
+import o from "@plitzi/plitzi-ui/Select2";
+//#region src/elements/advanced/Reference/PropField.tsx
+var s = (e, t) => `${t.label ?? e}${t.required ? " *" : ""}`, c = (e) => e == null ? "" : typeof e == "string" ? e : JSON.stringify(e), l = (e) => {
+	try {
+		let t = JSON.parse(e);
+		return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || typeof t == "object" && t ? t : e;
+	} catch {
+		return e;
+	}
+}, u = ({ name: t, prop: i, value: a, onUpdate: o }) => {
+	let c = e((e) => o?.(t, e.target.checked), [t, o]);
+	return /* @__PURE__ */ n(r, {
+		checked: a === !0,
+		onChange: c,
+		label: s(t, i),
+		size: "xs"
+	});
+}, d = ({ name: r, prop: i, value: a, onUpdate: l }) => {
+	let u = t(() => (i.options ?? []).map((e) => ({
+		value: e,
+		label: i.optionLabels?.[e] ?? e
+	})), [i.options, i.optionLabels]), d = e((e) => l?.(r, e?.value ?? ""), [r, l]);
+	return /* @__PURE__ */ n(o, {
+		value: c(a),
+		label: s(r, i),
+		onChange: d,
+		placeholder: "None",
+		options: u
+	});
+}, f = ({ name: t, prop: r, value: i, onUpdate: o }) => {
+	let u = e((e) => o?.(t, l(e)), [t, o]);
+	return /* @__PURE__ */ n(a, {
+		value: c(i),
+		label: s(t, r),
+		onChange: u,
+		size: "xs"
+	});
+}, p = ({ name: t, prop: r, value: o, onUpdate: l }) => {
+	let u = e((e) => l?.(t, r.type === "number" && e.trim() !== "" && !Number.isNaN(Number(e)) ? Number(e) : e), [
+		t,
+		l,
+		r.type
+	]);
+	return r.type === "textarea" ? /* @__PURE__ */ n(a, {
+		value: c(o),
+		label: s(t, r),
+		onChange: u,
+		size: "xs"
+	}) : /* @__PURE__ */ n(i, {
+		value: c(o),
+		label: s(t, r),
+		onChange: u,
+		size: "xs"
+	});
+}, m = (e) => {
+	let { prop: t } = e;
+	return t.type === "boolean" ? /* @__PURE__ */ n(u, { ...e }) : t.type === "select" ? /* @__PURE__ */ n(d, { ...e }) : t.type === "json" ? /* @__PURE__ */ n(f, { ...e }) : /* @__PURE__ */ n(p, { ...e });
+};
+//#endregion
+export { m as default };

package/dist/elements/advanced/Reference/Reference.d.ts

@@ -1,14 +1,13 @@
-import { ElementLayoutType } from '@plitzi/sdk-shared';
-import { ReactNode, RefObject } from 'react';
+import { RefObject } from 'react';
 export type ReferenceProps = {
     ref: RefObject<HTMLElement>;
-    children: ReactNode;
     className: string;
-    referenceType: ElementLayoutType;
+    /** `element` renders another element of the space; `component` places one of the space's components. */
+    referenceType: 'element' | 'component';
+    /** The element's id, or the component's. */
     referenceId: string;
-    referenceContainer: string;
 };
-declare const Reference: ({ ref, children, className, referenceType, referenceId, referenceContainer }: ReferenceProps) => import('react').JSX.Element;
+declare const Reference: ({ ref, className, referenceType, referenceId }: ReferenceProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ReferenceProps>): import('react').JSX.Element;
     displayName: string;