@plitzi/sdk-style 0.38.6 → 0.38.8

package/dist/components/StyleInspector/StyleInspector.mjs

@@ -1,118 +1,135 @@
-import { STYLE_STATE_OPTIONS as e, ancestorClasses as t, ancestorConditions as n, ancestorOptions as r, ancestorRemovals as i, unusedAncestors as a } from "./helpers.mjs";
-import o from "../Selector/index.mjs";
-import ee from "./components/AncestorRules/index.mjs";
-import te from "./Inspector.mjs";
-import { use as ne, useCallback as s, useEffect as re, useMemo as c, useState as l } from "react";
-import { useBuilderStore as ie, useBuilderStoreSync as u } from "@plitzi/sdk-shared/store";
-import { get as d, pick as f, set as p } from "@plitzi/plitzi-ui/helpers";
-import { produce as m } from "immer";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { clsx as ae } from "clsx";
-import oe from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
-import _ from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
-import v from "@plitzi/plitzi-ui/Select";
-import y from "@plitzi/plitzi-ui/Select2";
+import { STYLE_STATE_OPTIONS as e, ancestorClasses as t, ancestorConditions as n, ancestorOptions as r, ancestorRemovals as i, conditionOptions as ee, pseudoOptions as a, unusedAncestors as te } from "./helpers.mjs";
+import ne from "../Selector/index.mjs";
+import re from "./components/AncestorRules/index.mjs";
+import ie from "./Inspector.mjs";
+import { use as ae, useCallback as o, useEffect as oe, useMemo as s, useState as c } from "react";
+import { useBuilderStore as se, useBuilderStoreSync as l } from "@plitzi/sdk-shared/store";
+import { get as u, pick as ce, set as le } from "@plitzi/plitzi-ui/helpers";
+import { produce as ue } from "immer";
+import { canonicalCondition as de } from "@plitzi/sdk-shared/style/styleConditions";
+import { isParentAncestor as fe } from "@plitzi/sdk-shared/style/styleStates";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { clsx as pe } from "clsx";
+import me from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import p from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+import m from "@plitzi/plitzi-ui/Select";
+import h from "@plitzi/plitzi-ui/Select2";
 //#region src/components/StyleInspector/StyleInspector.tsx
-var b = ({ displayMode: b, selectors: x, value: S, element: C, mode: w = "element", componentType: T, styleSelectors: E, styleSelectorsAvailables: D, componentSubTypesAvailables: O, allowStyleSelector: se = !0, allowStyleState: k = !0, allowStyleVariant: A = !0, onChange: j, onRemoveVariant: M }) => {
-	let [ce, N] = l(void 0), [P, F] = l("base"), [I, L] = l(void 0), [R, z] = l(void 0);
-	u("styleSelector", P, { enabled: w === "element" }), u("styleVariant", I, { enabled: w === "element" });
-	let [B, V] = l(void 0);
-	u("styleState", R, { enabled: w === "element" }), u("styleAncestor", B, { enabled: w === "element" });
-	let [[H, U]] = ie(["schema.flat", "style.platform"]), { builderHandler: W } = ne(oe), G = c(() => d(E, P, ""), [E, P]), le = c(() => Object.values(f(x ?? {}, C ? [C.definition.type, ...G.split(" ")] : G.split(" "))), [
-		x,
-		C,
+var g = ({ displayMode: g, selectors: _, value: v, element: y, mode: b = "element", componentType: x, styleSelectors: S, styleSelectorsAvailables: C, componentSubTypesAvailables: w, allowStyleSelector: he = !0, allowStyleState: T = !0, allowStyleVariant: E = !0, onChange: D, onRemoveVariant: O }) => {
+	let [ge, k] = c(void 0), [A, j] = c("base"), [M, N] = c(void 0), [P, F] = c(void 0);
+	l("styleSelector", A, { enabled: b === "element" }), l("styleVariant", M, { enabled: b === "element" });
+	let [I, L] = c(void 0), [R, z] = c(void 0), [B, V] = c(void 0);
+	l("styleState", P, { enabled: b === "element" }), l("styleAncestor", I, { enabled: b === "element" }), l("stylePseudo", R, { enabled: b === "element" }), l("styleCondition", B, { enabled: b === "element" });
+	let [[H, U]] = se(["schema.flat", "style.platform"]), { builderHandler: W } = ae(me), G = s(() => u(S, A, ""), [S, A]), _e = s(() => Object.values(ce(_ ?? {}, y ? [y.definition.type, ...G.split(" ")] : G.split(" "))), [
+		_,
+		y,
 		G
-	]), K = c(() => S ? d(x, S) : void 0, [x, S]), q = K?.attributes[P]?.ancestors, J = c(() => w === "element" ? t(H, C) : Object.values(x ?? {}).filter((e) => e.type === "class" && e.name !== S).map((e) => e.name).sort((e, t) => e.localeCompare(t)), [
-		C,
+	]), K = s(() => v ? u(_, v) : void 0, [_, v]), q = K?.attributes[A]?.ancestors, J = s(() => b === "element" ? t(H, y) : Object.values(_ ?? {}).filter((e) => e.type === "class" && e.name !== v).map((e) => e.name).sort((e, t) => e.localeCompare(t)), [
+		y,
 		H,
-		w,
-		x,
-		S
-	]), Y = c(() => r(J, q), [J, q]), X = c(() => n(q), [q]), Z = c(() => K ? a(H, K) : /* @__PURE__ */ new Set(), [H, K]), ue = c(() => {
+		b,
+		_,
+		v
+	]), Y = s(() => r(J, q), [J, q]), X = s(() => n(q), [q]), Z = s(() => K ? te(H, K) : /* @__PURE__ */ new Set(), [H, K]), ve = s(() => {
 		let e = Object.keys(q ?? {}).length;
 		return e ? `When an ancestor is… (${e} set)` : "When an ancestor is…";
-	}, [q]), de = c(() => {
-		let e = K?.attributes[P], t = B ? [...Object.keys(x?.[B]?.attributes.base.variants ?? {}), ...Object.keys(e?.ancestors?.[B]?.variants ?? {})] : Object.keys(e?.variants ?? {});
+	}, [q]), ye = s(() => {
+		let e = K?.attributes[A], t = I ? [...Object.keys(_?.[I]?.attributes.base.variants ?? {}), ...Object.keys(e?.ancestors?.[I]?.variants ?? {})] : Object.keys(e?.variants ?? {});
 		return [...new Set(t)].map((e) => ({
 			label: e,
 			value: e
 		}));
 	}, [
 		K?.attributes,
-		x,
-		B,
-		P
-	]);
-	re(() => {
-		if (F("base"), w !== "element") return;
-		let e = d(E, "base", "").split(" "), t = e[e.length - 1];
-		j?.(t || ""), z(void 0), V(void 0), N(void 0);
-	}, [j, E]), _(() => {
-		if (w === "element") {
-			if (S !== C?.definition.type) {
-				let e = d(E, P, "").split(" ");
-				j?.(e[e.length - 1]);
+		_,
+		I,
+		A
+	]), Q = s(() => a(K?.attributes[A]), [K?.attributes, A]), be = s(() => ee(K?.attributes[A]), [K?.attributes, A]), xe = !!I && fe(I);
+	oe(() => {
+		if (j("base"), b !== "element") return;
+		let e = u(S, "base", "").split(" "), t = e[e.length - 1];
+		D?.(t || ""), F(void 0), L(void 0), z(void 0), V(void 0), k(void 0);
+	}, [D, S]), p(() => {
+		if (b === "element") {
+			if (v !== y?.definition.type) {
+				let e = u(S, A, "").split(" ");
+				D?.(e[e.length - 1]);
 			}
-			z(void 0), L(void 0), V(void 0), N(void 0);
+			F(void 0), N(void 0), L(void 0), z(void 0), V(void 0), k(void 0);
 		}
-	}, [P]), _(() => {
-		z(void 0), L(void 0), V(void 0), N(void 0);
-	}, [S]);
-	let fe = s((e, t, n) => {
+	}, [A]), p(() => {
+		F(void 0), N(void 0), L(void 0), z(void 0), V(void 0), k(void 0);
+	}, [v]);
+	let Se = o((e, t, n) => {
 		if (t && !n) return;
 		let { name: r, type: i } = e;
-		!t && r !== "" && !x?.[r] ? W("styleAddSelector", b, r, i, void 0, void 0, {
-			styleSelector: P,
-			componentType: i === "element" ? T : void 0
-		}) : t && n && n.name !== r && x?.[n.name] && !x[r] && W("styleAddSelector", b, r, i, void 0, d(x, `${n.name}.attributes.${P}.default`, {}), {
-			styleSelector: P,
-			componentType: i === "element" ? T : void 0
+		!t && r !== "" && !_?.[r] ? W("styleAddSelector", g, r, i, void 0, void 0, {
+			styleSelector: A,
+			componentType: i === "element" ? x : void 0
+		}) : t && n && n.name !== r && _?.[n.name] && !_[r] && W("styleAddSelector", g, r, i, void 0, u(_, `${n.name}.attributes.${A}.default`, {}), {
+			styleSelector: A,
+			componentType: i === "element" ? x : void 0
 		});
 	}, [
 		W,
-		T,
-		b,
 		x,
-		P
-	]), pe = s((e) => {
-		if (!e || S && S === e.name) {
-			j?.(void 0);
+		g,
+		_,
+		A
+	]), Ce = o((e) => {
+		if (!e || v && v === e.name) {
+			D?.(void 0);
 			return;
 		}
-		j?.(e.name);
-	}, [j, S]), me = s((e) => {
-		C && W("schemaUpdateElement", m(C, (t) => {
-			p(t, `definition.styleSelectors.${P}`, e);
+		D?.(e.name);
+	}, [D, v]), we = o((e) => {
+		y && W("schemaUpdateElement", ue(y, (t) => {
+			le(t, `definition.styleSelectors.${A}`, e);
 		}));
 	}, [
-		C,
+		y,
 		W,
-		P
-	]), he = s((e) => {
-		W("styleRemoveSelector", b, e.name);
-	}, [W, b]), ge = s((e) => N(e), []), _e = s((e) => {
-		F(e);
-	}, []), ve = s((e) => z(e?.value), []), ye = s((e) => {
-		V(e?.value), z(void 0), L(void 0);
-	}, []), be = s((e) => {
-		e.value === B && (V(void 0), z(void 0), L(void 0)), K?.attributes[P]?.ancestors?.[e.value] && W("styleUpdateSelector", b, K.name, void 0, void 0, {
-			styleSelector: P,
-			styleAncestor: e.value,
+		A
+	]), Te = o((e) => {
+		W("styleRemoveSelector", g, e.name);
+	}, [W, g]), Ee = o((e) => k(e), []), De = o((e) => {
+		j(e);
+	}, []), Oe = o((e) => F(e?.value), []), ke = o((e) => {
+		L(e?.value), F(void 0), N(void 0), z(void 0), V(void 0);
+	}, []), Ae = o((e) => z(e?.value), []), je = o((e) => {
+		let t = e ? de(e.value) : void 0;
+		(!e || t) && (V(t), t && (N(void 0), L(void 0)));
+	}, []), Me = o((e) => {
+		e.value === B && (V(void 0), F(void 0)), K?.attributes[A]?.conditions?.[e.value] && W("styleUpdateSelector", g, K.name, void 0, void 0, {
+			styleSelector: A,
+			styleCondition: e.value,
 			componentType: K.componentType
 		});
 	}, [
 		W,
-		b,
+		g,
 		K,
 		B,
-		P
-	]), xe = s((e) => {
-		V(e.ancestor), L(e.variant), z(e.state);
-	}, []), Q = s((e) => {
+		A
+	]), Ne = o((e) => {
+		e.value === I && (L(void 0), F(void 0), N(void 0)), K?.attributes[A]?.ancestors?.[e.value] && W("styleUpdateSelector", g, K.name, void 0, void 0, {
+			styleSelector: A,
+			styleAncestor: e.value,
+			componentType: K.componentType
+		});
+	}, [
+		W,
+		g,
+		K,
+		I,
+		A
+	]), Pe = o((e) => {
+		L(e.ancestor), N(e.variant), F(e.state), z(void 0), V(void 0);
+	}, []), Fe = o((e) => {
 		if (!K) return;
 		let { ancestor: t, state: n, variant: r } = e;
-		t === B && n === R && r === I && (z(void 0), L(void 0)), W("styleUpdateSelector", b, K.name, void 0, n || r ? void 0 : {}, {
-			styleSelector: P,
+		t === I && n === P && r === M && (F(void 0), N(void 0)), W("styleUpdateSelector", g, K.name, void 0, n || r ? void 0 : {}, {
+			styleSelector: A,
 			styleAncestor: t,
 			styleState: n,
 			styleVariant: r,
@@ -120,15 +137,15 @@ var b = ({ displayMode: b, selectors: x, value: S, element: C, mode: w = "elemen
 		});
 	}, [
 		W,
-		b,
+		g,
 		K,
-		B,
+		I,
+		A,
 		P,
-		R,
-		I
-	]), Se = s(() => {
+		M
+	]), Ie = o(() => {
 		if (K) {
-			B && Z.has(B) && (V(void 0), z(void 0), L(void 0));
+			I && Z.has(I) && (L(void 0), F(void 0), N(void 0));
 			for (let e of i(U, K.name, Z)) W("styleUpdateSelector", e.displayMode, K.name, void 0, void 0, {
 				styleSelector: e.styleSelector,
 				styleAncestor: e.styleAncestor,
@@ -139,134 +156,165 @@ var b = ({ displayMode: b, selectors: x, value: S, element: C, mode: w = "elemen
 		W,
 		U,
 		K,
-		B,
+		I,
 		Z
-	]), Ce = s((e) => {
-		L(e?.value);
-	}, []), we = s((e) => {
-		M?.(e.value), R && z(void 0), e.value === I && L(void 0), W("styleUpdateSelector", b, K?.name, void 0, void 0, {
-			styleSelector: P,
+	]), Le = o((e) => {
+		N(e?.value), e && V(void 0);
+	}, []), Re = o((e) => {
+		O?.(e.value), P && F(void 0), e.value === M && N(void 0), W("styleUpdateSelector", g, K?.name, void 0, void 0, {
+			styleSelector: A,
 			styleVariant: e.value,
-			styleAncestor: B,
+			styleAncestor: I,
 			componentType: K?.componentType
 		});
 	}, [
 		W,
-		b,
-		M,
+		g,
+		O,
 		K?.componentType,
 		K?.name,
+		A,
 		P,
-		R,
-		I,
-		B
-	]), $ = A || k || !!D?.length || !!O?.length;
-	return /* @__PURE__ */ g("div", {
+		M,
+		I
+	]), $ = E || T || !!C?.length || !!w?.length;
+	return /* @__PURE__ */ f("div", {
 		className: "flex w-full grow flex-col gap-2",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: "flex w-full flex-col gap-2 px-1",
 			children: [
-				w === "element" && /* @__PURE__ */ h(o, {
+				b === "element" && /* @__PURE__ */ d(ne, {
 					className: "min-h-0 w-full",
 					value: G,
-					selectors: x,
+					selectors: _,
 					selector: K,
-					componentType: T,
-					onAdd: fe,
-					onChange: me,
-					onRemove: he,
-					onSelectorSelected: pe
+					componentType: x,
+					onAdd: Se,
+					onChange: we,
+					onRemove: Te,
+					onSelectorSelected: Ce
 				}),
-				$ && /* @__PURE__ */ g("div", {
-					className: ae("flex w-full items-center gap-2", { "mt-2": w === "manager" }),
+				$ && /* @__PURE__ */ f("div", {
+					className: pe("flex w-full items-center gap-2", { "mt-2": b === "manager" }),
 					children: [
-						!!O?.length && /* @__PURE__ */ h(v, {
+						!!w?.length && /* @__PURE__ */ d(m, {
 							className: "grow basis-0",
 							size: "xs",
-							value: ce,
-							onChange: ge,
-							children: O.map((e) => /* @__PURE__ */ h("option", {
+							value: ge,
+							onChange: Ee,
+							children: w.map((e) => /* @__PURE__ */ d("option", {
 								value: e,
 								children: e
 							}, e))
 						}),
-						se && D && D.length > 1 && /* @__PURE__ */ h(v, {
+						he && C && C.length > 1 && /* @__PURE__ */ d(m, {
 							className: "grow basis-0",
 							size: "xs",
-							onChange: _e,
-							value: P,
-							children: D.map((e) => /* @__PURE__ */ h("option", {
+							onChange: De,
+							value: A,
+							children: C.map((e) => /* @__PURE__ */ d("option", {
 								value: e,
 								children: e
 							}, e))
 						}),
-						A && /* @__PURE__ */ h("div", {
+						E && !xe && /* @__PURE__ */ d("div", {
 							className: "grow basis-0",
-							children: /* @__PURE__ */ h(y, {
+							children: /* @__PURE__ */ d(h, {
 								className: "grow basis-0",
-								value: I,
-								options: de,
+								value: M,
+								options: ye,
 								placeholder: "Variant",
 								size: "xs",
 								allowCreateOptions: !0,
 								allowRemoveOptions: !0,
 								clearable: !0,
-								onChange: Ce,
-								onRemove: we
+								onChange: Le,
+								onRemove: Re
 							})
 						}),
-						k && /* @__PURE__ */ h("div", {
+						T && /* @__PURE__ */ d("div", {
 							className: "grow basis-0",
-							children: /* @__PURE__ */ h(y, {
+							children: /* @__PURE__ */ d(h, {
 								className: "grow basis-0",
-								value: R,
+								value: P,
 								options: e,
 								placeholder: "State",
 								size: "xs",
 								clearable: !0,
-								onChange: ve
+								onChange: Oe
 							})
 						})
 					]
 				}),
-				$ && k && !!Y.length && /* @__PURE__ */ h(y, {
+				$ && T && !!Y.length && /* @__PURE__ */ d(h, {
 					className: "w-full",
-					value: B,
+					value: I,
 					options: Y,
-					placeholder: ue,
+					placeholder: ve,
 					size: "xs",
 					clearable: !0,
 					allowRemoveOptions: !0,
-					onChange: ye,
-					onRemove: be
+					onChange: ke,
+					onRemove: Ne
+				}),
+				$ && T && !I && /* @__PURE__ */ f("div", {
+					className: "flex w-full items-center gap-2",
+					children: [/* @__PURE__ */ d("div", {
+						className: "grow basis-0",
+						children: /* @__PURE__ */ d(h, {
+							className: "grow basis-0",
+							value: R,
+							options: Q,
+							placeholder: "Pseudo-element",
+							size: "xs",
+							clearable: !0,
+							onChange: Ae
+						})
+					}), /* @__PURE__ */ d("div", {
+						className: "grow basis-0",
+						children: /* @__PURE__ */ d(h, {
+							className: "grow basis-0",
+							value: B,
+							options: be,
+							placeholder: "Condition",
+							size: "xs",
+							clearable: !0,
+							allowCreateOptions: !0,
+							allowRemoveOptions: !0,
+							onChange: je,
+							onRemove: Me
+						})
+					})]
 				}),
-				k && X.length > 0 && /* @__PURE__ */ h(ee, {
+				T && X.length > 0 && /* @__PURE__ */ d(re, {
 					conditions: X,
 					unused: Z,
-					activeAncestor: B,
-					activeState: R,
-					activeVariant: I,
-					onSelect: xe,
-					onRemove: Q,
-					onRemoveUnused: Se
+					activeAncestor: I,
+					activeState: P,
+					activeVariant: M,
+					onSelect: Pe,
+					onRemove: Fe,
+					onRemoveUnused: Ie
 				})
 			]
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ d("div", {
 			className: "flex grow basis-0 flex-col overflow-auto border-t border-gray-300 dark:border-zinc-700",
-			children: /* @__PURE__ */ h(te, {
-				selectors: le,
-				componentType: T,
+			children: /* @__PURE__ */ d(ie, {
+				selectors: _e,
+				componentType: x,
 				selector: K,
-				styleSelector: P,
-				styleState: R,
-				styleVariant: I,
-				styleAncestor: B,
-				element: C,
-				displayMode: b,
-				mode: w
+				styleSelector: A,
+				styleState: P,
+				styleVariant: M,
+				styleAncestor: I,
+				stylePseudo: R,
+				styleCondition: B,
+				element: y,
+				displayMode: g,
+				mode: b
 			})
 		})]
 	});
 };
 //#endregion
-export { b as default };
+export { g as default };

package/dist/components/StyleInspector/StyleInspectorContext.d.ts

@@ -1,5 +1,5 @@
 import { InheritData } from '../../helpers';
-import { DisplayMode, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue } from '@plitzi/sdk-shared';
+import { DisplayMode, StyleCategory, StyleItem, StyleObject, StylePseudo, StyleState, StyleValue } from '@plitzi/sdk-shared';
 export type SetValues = {
     (path?: undefined, values?: StyleObject): void;
     (path: StyleCategory, values?: StyleValue): void;
@@ -11,6 +11,8 @@ export type StyleInspectorContextValue = {
     styleState?: StyleState;
     styleAncestor?: string;
     styleVariant?: string;
+    stylePseudo?: StylePseudo;
+    styleCondition?: string;
     displayMode: DisplayMode;
     variables: Record<string, unknown>;
     inheritData: InheritData['style'];

package/dist/components/StyleInspector/StyleInspectorProvider.d.ts

@@ -1,5 +1,5 @@
 import { InheritData } from '../../helpers';
-import { DisplayMode, Element, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue } from '@plitzi/sdk-shared';
+import { DisplayMode, Element, StyleCategory, StyleItem, StyleObject, StylePseudo, StyleState, StyleValue } from '@plitzi/sdk-shared';
 import { ReactNode } from 'react';
 export type StyleInspectorProviderProps = {
     children: ReactNode;
@@ -9,10 +9,12 @@ export type StyleInspectorProviderProps = {
     styleState?: StyleState;
     styleVariant?: string;
     styleAncestor?: string;
+    stylePseudo?: StylePseudo;
+    styleCondition?: string;
     element?: Element;
     inheritData: InheritData;
     displayMode: DisplayMode;
     onChange?: (path?: StyleCategory, values?: StyleObject | StyleValue) => void;
 };
-declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, styleAncestor, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import('react').JSX.Element;
+declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, styleAncestor, stylePseudo, styleCondition, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import('react').JSX.Element;
 export default StyleInspectorProvider;