@plitzi/sdk-style 0.36.1 → 0.37.0

package/dist/components/StyleInspector/hooks/useStyleInherit.mjs

@@ -3,15 +3,16 @@ import { use as t, useMemo as n } from "react";
 import { useBuilderStore as r } from "@plitzi/sdk-shared/store";
 import i from "@plitzi/sdk-shared/elements/ComponentContext";
 //#region src/components/StyleInspector/hooks/useStyleInherit.ts
-var a = ({ element: a, componentType: o, componentSubType: s, selector: c, styleSelector: l = "base", styleState: u, styleVariant: d }) => {
-	let [[f, p]] = r(["schema.flat", "style.platform"]), { componentDefinitions: m } = t(i);
+var a = ({ element: a, componentType: o, componentSubType: s, selector: c, styleSelector: l = "base", styleState: u, styleVariant: d, styleAncestor: f }) => {
+	let [[p, m]] = r(["schema.flat", "style.platform"]), { componentDefinitions: h } = t(i);
 	return n(() => {
 		let t = [], n = [], r = (a?.definition.styleSelectors[l] ?? "").split(" ");
-		return c && r.length > 1 && t.push(c), e(a, o, f, p, m.current, {
+		return c && r.length > 1 && t.push(c), e(a, o, p, m, h.current, {
 			componentSubType: s,
 			styleSelector: l,
 			styleState: u,
 			styleVariant: d,
+			styleAncestor: f,
 			includeSelf: r.length > 1,
 			skipSelectors: t,
 			addSelectors: n
@@ -21,12 +22,13 @@ var a = ({ element: a, componentType: o, componentSubType: s, selector: c, style
 		l,
 		c,
 		o,
-		f,
 		p,
 		m,
+		h,
 		s,
 		u,
-		d
+		d,
+		f
 	]);
 };
 //#endregion

package/dist/components/StyleManager/ManagerSelector.d.ts

@@ -1,11 +1,12 @@
-import { DisplayMode, Element, StyleItem } from '@plitzi/sdk-shared';
+import { DisplayMode, Element, Schema, StyleItem } from '@plitzi/sdk-shared';
 import { Dispatch, SetStateAction } from 'react';
 export type ManagerSelectorProps = {
     displayMode: DisplayMode;
+    flat: Schema['flat'];
     flatList: Element[];
     selected?: string;
     onSelect?: Dispatch<SetStateAction<StyleItem | undefined>>;
     selectors?: Record<string, StyleItem>;
 };
-declare const _default: import('react').MemoExoticComponent<({ displayMode, flatList, selectors, selected, onSelect }: ManagerSelectorProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ displayMode, flat, flatList, selectors, selected, onSelect }: ManagerSelectorProps) => import("react").JSX.Element>;
 export default _default;

package/dist/components/StyleManager/ManagerSelector.mjs

@@ -1,157 +1,185 @@
 import e from "./StyleSelectorTag.mjs";
 import t from "../../models/SelectorForm/index.mjs";
-import { memo as n, use as r, useCallback as i, useMemo as a, useState as o } from "react";
-import { produce as s } from "immer";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "@plitzi/plitzi-ui/Button";
-import d from "@plitzi/plitzi-ui/Modal";
-import f from "@plitzi/sdk-shared/elements/ComponentContext";
-import { get as p, isEmpty as m, set as h } from "@plitzi/plitzi-ui/helpers/lodash";
-import g from "@plitzi/plitzi-ui/hooks/useDisclosure";
-import _ from "@plitzi/plitzi-ui/Input";
-import v from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
-var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S }) => {
-	let C = a(() => Object.values(b ?? {}), [b]), [w, T] = o(""), [E, D] = o([]), { builderHandler: O } = r(v), { components: k } = r(f), A = a(() => C.filter((e) => !!e.componentType).map((e) => e.componentType), [C]), j = a(() => {
-		let e = C;
-		return m(w) || (e = C.filter((e) => e.name.toLowerCase().includes(w.toLowerCase()))), e.sort((e, t) => {
+import { ancestorRemovals as n, unusedAncestors as r } from "../StyleInspector/helpers.mjs";
+import { memo as i, use as a, useCallback as o, useMemo as s, useState as c } from "react";
+import { useBuilderStore as l } from "@plitzi/sdk-shared/store";
+import { produce as ee } from "immer";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@plitzi/plitzi-ui/Button";
+import p from "@plitzi/plitzi-ui/Modal";
+import m from "@plitzi/sdk-shared/elements/ComponentContext";
+import { get as h, isEmpty as g, set as _ } from "@plitzi/plitzi-ui/helpers/lodash";
+import v from "@plitzi/plitzi-ui/hooks/useDisclosure";
+import y from "@plitzi/plitzi-ui/Input";
+import b from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+var x = i(({ displayMode: i, flat: x, flatList: S, selectors: C, selected: w, onSelect: T }) => {
+	let E = s(() => Object.values(C ?? {}), [C]), [D, O] = c(""), [k, A] = c([]), { builderHandler: j } = a(b), [M] = l("style.platform"), { components: te } = a(m), ne = s(() => E.filter((e) => !!e.componentType).map((e) => e.componentType), [E]), N = s(() => {
+		let e = E;
+		return g(D) || (e = E.filter((e) => e.name.toLowerCase().includes(D.toLowerCase()))), e.sort((e, t) => {
 			let n = Number(e.type === "element"), r = Number(t.type === "element");
 			return n === r ? e.name.localeCompare(t.name) : r - n;
 		});
-	}, [C, w]), M = i((e) => T(e), [T]), N = i((e, t) => {
+	}, [E, D]), P = o((e) => O(e), [O]), F = o((e, t) => {
 		if (t) {
 			if (t.mode === "default") {
 				let { name: e } = t;
-				O("styleAddSelector", n, e, "class", void 0, void 0, {
+				j("styleAddSelector", i, e, "class", void 0, void 0, {
 					styleSelector: void 0,
 					componentType: void 0
 				});
 			} else {
 				let { componentType: e } = t;
-				O("styleAddSelector", n, e, "element", void 0, void 0, {
+				j("styleAddSelector", i, e, "element", void 0, void 0, {
 					styleSelector: void 0,
 					componentType: e
 				});
 			}
 		}
-	}, [O, n]), [P, F, I, L] = g({
+	}, [j, i]), [I, L, R, z] = v({
 		id: "add-selector",
-		onClose: N
-	}), R = i((e) => {
-		S?.((t) => t?.name === e ? void 0 : C.find((t) => t.name === e));
-	}, [S, C]), z = i((e, t) => t ? Object.values(p(e, "definition.styleSelectors", {})).find((e) => (t.includes(":") && (t = p(t.split(":"), "0", t)), e && t && e.split(" ").includes(t))) : [], []), B = i((e, t, r) => {
-		if (!t || !r || r.length === 0) return;
-		let i = new Set(r), a = y.filter((e) => r.some((t) => z(e, t))).map((e) => s(e, (t) => {
+		onClose: F
+	}), B = o((e) => {
+		T?.((t) => t?.name === e ? void 0 : E.find((t) => t.name === e));
+	}, [T, E]), V = o((e, t) => t ? Object.values(h(e, "definition.styleSelectors", {})).find((e) => (t.includes(":") && (t = h(t.split(":"), "0", t)), e && t && e.split(" ").includes(t))) : [], []), H = o((e, t, n) => {
+		if (!t || !n || n.length === 0) return;
+		let r = new Set(n), a = S.filter((e) => n.some((t) => V(e, t))).map((e) => ee(e, (t) => {
 			Object.keys(e.definition.styleSelectors).forEach((e) => {
-				i.has(p(t, `definition.styleSelectors.${e}`, "")) && h(t, `definition.styleSelectors.${e}`, "");
+				r.has(h(t, `definition.styleSelectors.${e}`, "")) && _(t, `definition.styleSelectors.${e}`, "");
 			});
 		}));
-		a.length > 0 && O("schemaUpdateElements", a), O("styleRemoveSelectors", n, r), D((e) => e.filter((e) => !i.has(e))), S?.((e) => e && i.has(e.name) ? void 0 : e);
+		a.length > 0 && j("schemaUpdateElements", a), j("styleRemoveSelectors", i, n), A((e) => e.filter((e) => !r.has(e))), T?.((e) => e && r.has(e.name) ? void 0 : e);
 	}, [
-		O,
-		n,
-		z,
-		y,
-		S
-	]), [V, H, U, W, , G] = g({
+		j,
+		i,
+		V,
+		S,
+		T
+	]), [U, W, G, K, , q] = v({
 		id: "delete-selector",
-		onClose: B
-	}), K = i((e) => U(void 0, [e]), [U]), q = i((e) => D((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), []), J = i(() => D([]), []), Y = i(() => U(void 0, E), [U, E]), X = Array.isArray(G) ? G.length : 0, Z = a(() => j.reduce((e, t) => ({
+		onClose: H
+	}), J = o((e) => G(void 0, [e]), [G]), Y = o((e) => A((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), []), X = o(() => A([]), []), re = o(() => G(void 0, k), [G, k]), Z = Array.isArray(q) ? q.length : 0, ie = s(() => N.reduce((e, t) => ({
 		...e,
-		[t.name]: y.filter((e) => z(e, t.name)).length
+		[t.name]: S.filter((e) => V(e, t.name)).length
 	}), {}), [
+		N,
+		S,
+		V
+	]), Q = s(() => Object.fromEntries(E.map((e) => [e.name, {
+		count: new Set(Object.values(e.attributes).flatMap((e) => Object.keys(e.ancestors ?? {}))).size,
+		unused: r(x, e)
+	}])), [x, E]), $ = s(() => Object.values(Q).reduce((e, { unused: t }) => e + t.size, 0), [Q]), ae = `${$} unused ancestor ${$ === 1 ? "rule" : "rules"}`, oe = o(() => {
+		for (let [e, { unused: t }] of Object.entries(Q)) for (let r of n(M, e, t)) j("styleUpdateSelector", r.displayMode, e, void 0, void 0, {
+			styleSelector: r.styleSelector,
+			styleAncestor: r.styleAncestor,
+			componentType: M[r.displayMode][e].componentType
+		});
+	}, [
+		Q,
 		j,
-		y,
-		z
-	]), Q = i(() => void W(void 0, !1), [W]), $ = i(() => void W(void 0, !0), [W]);
-	return /* @__PURE__ */ l("div", {
+		M
+	]), se = o(() => void K(void 0, !1), [K]), ce = o(() => void K(void 0, !0), [K]);
+	return /* @__PURE__ */ d("div", {
 		className: "flex max-w-[350px] grow basis-0 flex-col gap-2 overflow-auto border-r border-gray-300 pt-2 pr-2 dark:border-zinc-700",
 		children: [
-			/* @__PURE__ */ l(u, {
+			/* @__PURE__ */ d(f, {
 				intent: "primary",
 				size: "sm",
 				className: "w-full",
 				iconPlacement: "before",
-				onClick: I,
-				children: [/* @__PURE__ */ c(u.Icon, {
+				onClick: R,
+				children: [/* @__PURE__ */ u(f.Icon, {
 					icon: "fas fa-tint",
 					size: "md",
 					className: "text-base"
 				}), "New Selector"]
 			}),
-			/* @__PURE__ */ c(_, {
+			/* @__PURE__ */ u(y, {
 				placeholder: "Search Selector",
-				value: w,
-				onChange: M,
+				value: D,
+				onChange: P,
 				size: "xs"
 			}),
-			E.length > 0 && /* @__PURE__ */ l("div", {
+			$ > 0 && /* @__PURE__ */ d("div", {
+				className: "flex items-center justify-between gap-2 rounded-sm bg-amber-500/10 px-2 py-1",
+				children: [/* @__PURE__ */ d("span", {
+					className: "text-xs text-amber-700 dark:text-amber-300",
+					children: [/* @__PURE__ */ u("i", { className: "fas fa-triangle-exclamation mr-1" }), ae]
+				}), /* @__PURE__ */ u(f, {
+					size: "xs",
+					onClick: oe,
+					children: "Clean up"
+				})]
+			}),
+			k.length > 0 && /* @__PURE__ */ d("div", {
 				className: "bg-secondary-50 dark:bg-secondary-900/30 flex items-center justify-between gap-2 rounded-sm px-2 py-1",
-				children: [/* @__PURE__ */ l("span", {
+				children: [/* @__PURE__ */ d("span", {
 					className: "text-xs text-zinc-600 dark:text-zinc-300",
-					children: [E.length, " selected"]
-				}), /* @__PURE__ */ l("div", {
+					children: [k.length, " selected"]
+				}), /* @__PURE__ */ d("div", {
 					className: "flex gap-1",
-					children: [/* @__PURE__ */ c(u, {
+					children: [/* @__PURE__ */ u(f, {
 						size: "xs",
-						onClick: J,
+						onClick: X,
 						children: "Clear"
-					}), /* @__PURE__ */ l(u, {
+					}), /* @__PURE__ */ d(f, {
 						intent: "danger",
 						size: "xs",
 						iconPlacement: "before",
-						onClick: Y,
-						children: [/* @__PURE__ */ c(u.Icon, { icon: "fas fa-trash" }), "Delete"]
+						onClick: re,
+						children: [/* @__PURE__ */ u(f.Icon, { icon: "fas fa-trash" }), "Delete"]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex grow basis-0 flex-col overflow-y-auto",
-				children: j.map((t) => {
+				children: N.map((t) => {
 					let { name: n, type: r } = t;
-					return /* @__PURE__ */ c(e, {
+					return /* @__PURE__ */ u(e, {
 						id: n,
-						active: n === x,
-						checked: E.includes(n),
+						active: n === w,
+						checked: k.includes(n),
 						label: n,
 						type: r,
-						elementsCount: Z[n],
-						onSelect: R,
-						onDelete: K,
-						onToggleCheck: q
+						elementsCount: ie[n],
+						ancestorsCount: Q[n].count,
+						unusedAncestorsCount: Q[n].unused.size,
+						onSelect: B,
+						onDelete: J,
+						onToggleCheck: Y
 					}, n);
 				})
 			}),
-			/* @__PURE__ */ l(d, {
-				id: P,
-				open: F,
-				onClose: L,
+			/* @__PURE__ */ d(p, {
+				id: I,
+				open: L,
+				onClose: z,
 				size: "sm",
-				children: [/* @__PURE__ */ c(d.Header, { children: /* @__PURE__ */ c("h4", { children: "Add Selector" }) }), /* @__PURE__ */ c(d.Body, { children: /* @__PURE__ */ c(t, {
-					componentsNotAvailables: A,
-					components: k.current,
-					onSubmit: L,
-					onClose: L
+				children: [/* @__PURE__ */ u(p.Header, { children: /* @__PURE__ */ u("h4", { children: "Add Selector" }) }), /* @__PURE__ */ u(p.Body, { children: /* @__PURE__ */ u(t, {
+					componentsNotAvailables: ne,
+					components: te.current,
+					onSubmit: z,
+					onClose: z
 				}) })]
 			}),
-			/* @__PURE__ */ l(d, {
-				id: V,
-				open: H,
-				onClose: W,
+			/* @__PURE__ */ d(p, {
+				id: U,
+				open: W,
+				onClose: K,
 				children: [
-					/* @__PURE__ */ c(d.Header, { children: /* @__PURE__ */ c("h4", { children: "Remove Selector" }) }),
-					/* @__PURE__ */ l(d.Body, { children: [X > 1 && /* @__PURE__ */ l("h4", { children: [
+					/* @__PURE__ */ u(p.Header, { children: /* @__PURE__ */ u("h4", { children: "Remove Selector" }) }),
+					/* @__PURE__ */ d(p.Body, { children: [Z > 1 && /* @__PURE__ */ d("h4", { children: [
 						"Do you want to remove these ",
-						X,
+						Z,
 						" items ?"
-					] }), X <= 1 && /* @__PURE__ */ c("h4", { children: "Do you want to remove this item ?" })] }),
-					/* @__PURE__ */ l(d.Footer, {
+					] }), Z <= 1 && /* @__PURE__ */ u("h4", { children: "Do you want to remove this item ?" })] }),
+					/* @__PURE__ */ d(p.Footer, {
 						justify: "end",
-						children: [/* @__PURE__ */ c(u, {
-							onClick: Q,
+						children: [/* @__PURE__ */ u(f, {
+							onClick: se,
 							size: "sm",
 							children: "Cancel"
-						}), /* @__PURE__ */ c(u, {
-							onClick: $,
+						}), /* @__PURE__ */ u(f, {
+							onClick: ce,
 							size: "sm",
 							children: "Submit"
 						})]
@@ -162,4 +190,4 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 	});
 });
 //#endregion
-export { y as default };
+export { x as default };

package/dist/components/StyleManager/StyleManager.mjs

@@ -20,6 +20,7 @@ var u = () => {
 			children: [/* @__PURE__ */ s(e, {
 				displayMode: m,
 				selectors: h,
+				flat: p,
 				flatList: g,
 				selected: d?.name,
 				onSelect: f

package/dist/components/StyleManager/StyleSelectorTag.d.ts

@@ -5,10 +5,13 @@ export type StyleSelectorTagProps = {
     active?: boolean;
     checked?: boolean;
     elementsCount?: number;
+    /** Ancestors this selector has rules under, and how many of them no element it dresses sits inside. */
+    ancestorsCount?: number;
+    unusedAncestorsCount?: number;
     type?: TagType;
     onSelect?: (id: string) => void;
     onDelete?: (id: string) => void;
     onToggleCheck?: (id: string) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ id, label, active, checked, elementsCount, type, onSelect, onDelete, onToggleCheck }: StyleSelectorTagProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ id, label, active, checked, elementsCount, ancestorsCount, unusedAncestorsCount, type, onSelect, onDelete, onToggleCheck }: StyleSelectorTagProps) => import("react").JSX.Element>;
 export default _default;

package/dist/components/StyleManager/StyleSelectorTag.mjs

@@ -4,17 +4,17 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a from "@plitzi/plitzi-ui/Button";
 import o from "clsx";
 import s from "@plitzi/plitzi-ui/Checkbox";
-var c = t(({ id: t, label: c = "Selector", active: l = !1, checked: u = !1, elementsCount: d = 0, type: f = "class", onSelect: p, onDelete: m, onToggleCheck: h }) => {
-	let g = n(() => p?.(t), [t, p]), _ = n((e) => {
-		e.stopPropagation(), t && m?.(t);
-	}, [t, m]), v = n(() => h?.(t), [t, h]), y = n((e) => e.stopPropagation(), []);
+var c = t(({ id: t, label: c = "Selector", active: l = !1, checked: u = !1, elementsCount: d = 0, ancestorsCount: f = 0, unusedAncestorsCount: p = 0, type: m = "class", onSelect: h, onDelete: g, onToggleCheck: _ }) => {
+	let v = n(() => h?.(t), [t, h]), y = n((e) => {
+		e.stopPropagation(), t && g?.(t);
+	}, [t, g]), b = n(() => _?.(t), [t, _]), x = n((e) => e.stopPropagation(), []), S = p ? `Rules under ${f} ancestor classes, ${p} of them around no element it dresses` : `Rules under ${f} ancestor classes`;
 	return /* @__PURE__ */ i("div", {
 		className: o("group flex cursor-pointer items-center justify-between gap-2 border-t border-gray-300 p-1 dark:border-zinc-700", {
 			"hover:bg-gray-100 dark:hover:bg-zinc-700/60": !l && !u,
 			"bg-gray-200 dark:bg-zinc-700": l,
 			"bg-secondary-50 dark:bg-secondary-900/30": u && !l
 		}),
-		onClick: g,
+		onClick: v,
 		children: [/* @__PURE__ */ i("div", {
 			className: "flex min-w-0 items-center gap-2",
 			children: [/* @__PURE__ */ r("div", {
@@ -22,33 +22,47 @@ var c = t(({ id: t, label: c = "Selector", active: l = !1, checked: u = !1, elem
 				children: /* @__PURE__ */ r(s, {
 					size: "xs",
 					checked: u,
-					onChange: v,
-					onClick: y
+					onChange: b,
+					onClick: x
 				})
 			}), /* @__PURE__ */ r(e, {
 				editable: !1,
 				selector: c,
-				type: f,
+				type: m,
 				active: !0,
 				readOnly: !0
 			})]
 		}), /* @__PURE__ */ i("div", {
-			className: "flex",
-			children: [/* @__PURE__ */ r("div", {
-				className: o("mr-1", {
-					flex: l,
-					"hidden group-hover:flex": !l
+			className: "flex items-center",
+			children: [
+				f > 0 && /* @__PURE__ */ i("div", {
+					className: o("mr-1 flex items-center gap-1 rounded-sm px-1.5 py-1 text-xs", {
+						"bg-amber-500/15 text-amber-700 dark:text-amber-300": p > 0,
+						"bg-gray-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300": p === 0
+					}),
+					title: S,
+					children: [/* @__PURE__ */ r("i", { className: o("fas", {
+						"fa-sitemap": !p,
+						"fa-triangle-exclamation": !!p
+					}) }), f]
 				}),
-				children: /* @__PURE__ */ r(a, {
-					intent: "danger",
-					size: "xs",
-					onClick: _,
-					children: /* @__PURE__ */ r(a.Icon, { icon: "fas fa-trash" })
+				/* @__PURE__ */ r("div", {
+					className: o("mr-1", {
+						flex: l,
+						"hidden group-hover:flex": !l
+					}),
+					children: /* @__PURE__ */ r(a, {
+						intent: "danger",
+						size: "xs",
+						onClick: y,
+						children: /* @__PURE__ */ r(a.Icon, { icon: "fas fa-trash" })
+					})
+				}),
+				d > 0 && /* @__PURE__ */ r("div", {
+					className: "bg-secondary-400 flex items-center justify-center rounded-sm px-1.5 py-1 text-xs text-white",
+					children: d
 				})
-			}), d > 0 && /* @__PURE__ */ r("div", {
-				className: "bg-secondary-400 flex items-center justify-center rounded-sm px-1.5 py-1 text-xs text-white",
-				children: d
-			})]
+			]
 		})]
 	});
 });

package/dist/helpers/calculateInheriting.d.ts

@@ -114,6 +114,7 @@ declare const calculateInheriting: (element: Element | undefined, componentType:
     styleSelector?: string;
     styleState?: StyleState;
     styleVariant?: string;
+    styleAncestor?: string;
     includeSelf?: boolean;
     skipSelectors?: string[];
     addSelectors?: string[];

package/dist/helpers/calculateInheriting.mjs

@@ -38,29 +38,39 @@ var r = (e, t) => {
 		isAncestor: !1,
 		isDefault: !0
 	};
-}, o = (e, t, n, r) => {
-	let i = e[t];
-	if (!i) return {};
-	let a = i.default ?? {}, o = r ? i.variants?.[r]?.default ?? {} : {}, s = n ? i.states?.[n] ?? {} : {}, c = r && n ? i.variants?.[r]?.states?.[n] ?? {} : {};
+}, o = (e, t, n, r, i) => {
+	let a = e[t];
+	if (!a) return {};
+	let o = a.default ?? {};
+	if (i) {
+		let e = a.ancestors?.[i], t = r ? e?.variants?.[r] : void 0, s = n ? (t ?? e)?.states?.[n] : void 0;
+		return {
+			...o,
+			...e?.default,
+			...t?.default,
+			...s
+		};
+	}
+	let s = r ? a.variants?.[r]?.default ?? {} : {}, c = n ? a.states?.[n] ?? {} : {}, l = r && n ? a.variants?.[r]?.states?.[n] ?? {} : {};
 	return {
-		...a,
 		...o,
 		...s,
-		...c
+		...c,
+		...l
 	};
-}, s = (e, t, n, r) => o(e.attributes, t, n, r), c = (e, o, c, l, u = {}, d = {}) => {
-	let { componentSubType: f, styleSelector: p = "base", styleState: m, styleVariant: h, includeSelf: g = !1, skipSelectors: _ = [], addSelectors: v = [] } = d, y = {
+}, s = (e, t, n, r, i) => o(e.attributes, t, n, r, i), c = (e, o, c, l, u = {}, d = {}) => {
+	let { componentSubType: f, styleSelector: p = "base", styleState: m, styleVariant: h, styleAncestor: g, includeSelf: _ = !1, skipSelectors: v = [], addSelectors: y = [] } = d, b = {
 		tree: [],
 		style: {},
 		parentStyle: {}
-	}, b = e ? r(c, e) : [], x = /* @__PURE__ */ new Set();
+	}, x = e ? r(c, e) : [], S = /* @__PURE__ */ new Set();
 	for (let t of Object.keys(l)) {
 		let n = l[t];
 		if (n) {
 			if (!e && !o) {
-				for (let e of v) {
+				for (let e of y) {
 					let r = n[e];
-					r && y.tree.push({
+					r && b.tree.push({
 						name: e,
 						displayMode: t,
 						attributes: r.attributes,
@@ -78,8 +88,8 @@ var r = (e, t) => {
 						parentId: void 0
 					},
 					attributes: {}
-				}, o, n, p, v);
-				for (let n of e) _.includes(n.name) || y.tree.push({
+				}, o, n, p, y);
+				for (let n of e) v.includes(n.name) || b.tree.push({
 					name: n.name,
 					displayMode: t,
 					attributes: n.attributes,
@@ -87,16 +97,16 @@ var r = (e, t) => {
 					isAncestor: !1
 				});
 				let r = a(o, f, p, u);
-				r && y.tree.push({
+				r && b.tree.push({
 					...r,
 					displayMode: t
 				});
 				continue;
 			}
-			for (let r of b) {
-				let s = e?.definition.parentId === r.id, c = r.id !== e?.id, l = i(r, r.definition.type === o ? o : void 0, n, p, v);
-				!g && !c && !m && !h && Object.keys(l).length && (l = l.filter((e) => e.type === "element"));
-				for (let e of l) (!_.includes(e.name) || c) && y.tree.push({
+			for (let r of x) {
+				let s = e?.definition.parentId === r.id, c = r.id !== e?.id, l = i(r, r.definition.type === o ? o : void 0, n, p, y);
+				!_ && !c && !m && !h && Object.keys(l).length && (l = l.filter((e) => e.type === "element"));
+				for (let e of l) (!v.includes(e.name) || c) && b.tree.push({
 					name: e.name,
 					displayMode: t,
 					attributes: e.attributes,
@@ -106,7 +116,7 @@ var r = (e, t) => {
 					isDefault: !1
 				});
 				let d = a(r.definition.type, r.attributes.subType, p, u);
-				d && !x.has(r.definition.type) && (x.add(r.definition.type), y.tree.push({
+				d && !S.has(r.definition.type) && (S.add(r.definition.type), b.tree.push({
 					...d,
 					displayMode: t,
 					isParent: s,
@@ -115,23 +125,23 @@ var r = (e, t) => {
 			}
 		}
 	}
-	let S = {};
-	for (let e of y.tree) {
-		let r = s(e, p, m, h);
-		if (r && Object.keys(r).length && ((e.isAncestor || e.isDefault && e.componentType !== o) && (r = t(r, n)), Object.keys(r).length)) for (let t of Object.keys(r)) S[t] || (S[t] = []), S[t].push({
+	let C = {};
+	for (let e of b.tree) {
+		let r = s(e, p, m, h, g);
+		if (r && Object.keys(r).length && ((e.isAncestor || e.isDefault && e.componentType !== o) && (r = t(r, n)), Object.keys(r).length)) for (let t of Object.keys(r)) C[t] || (C[t] = []), C[t].push({
 			key: e.name,
 			value: r[t],
 			displayMode: e.displayMode
 		});
 	}
-	let C = y.tree.filter((e) => e.isParent).reduce((e, t) => ({
+	let w = b.tree.filter((e) => e.isParent).reduce((e, t) => ({
 		...e,
-		...s(t, p, m, h)
+		...s(t, p, m, h, g)
 	}), {});
 	return {
-		...y,
-		style: S,
-		parentStyle: C
+		...b,
+		style: C,
+		parentStyle: w
 	};
 };
 //#endregion