@plitzi/sdk-style 0.38.10 → 0.38.11

package/dist/components/StyleInspector/StyleInspector.mjs

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