@plitzi/sdk-style 0.36.1 → 0.37.0

package/dist/components/StyleInspector/categories/Others/Others.mjs

@@ -5,12 +5,13 @@ import r from "../../components/CategoryContainer/index.mjs";
 import i from "./OthersForm.mjs";
 import a from "./OthersInteraction.mjs";
 import o from "./OthersOutline.mjs";
-import s from "./OthersSvg.mjs";
-import c from "./OthersTable.mjs";
-import { memo as l, use as u, useCallback as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import s from "./OthersScrollbar.mjs";
+import c from "./OthersSvg.mjs";
+import l from "./OthersTable.mjs";
+import { memo as u, use as d, useCallback as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Others/Others.tsx
-var m = [
+var h = [
 	"pointer-events",
 	"user-select",
 	"touch-action",
@@ -21,6 +22,8 @@ var m = [
 	"accent-color",
 	"caret-color",
 	"color-scheme",
+	"scrollbar-width",
+	"scrollbar-color",
 	"outline-width",
 	"outline-style",
 	"outline-color",
@@ -31,7 +34,7 @@ var m = [
 	"fill",
 	"stroke",
 	"stroke-width"
-], h = [
+], g = [
 	"touch-action",
 	"resize",
 	"appearance",
@@ -40,64 +43,71 @@ var m = [
 	"accent-color",
 	"caret-color",
 	"color-scheme",
+	"scrollbar-width",
+	"scrollbar-color",
 	"border-collapse",
 	"border-spacing",
 	"table-layout",
 	"fill",
 	"stroke",
 	"stroke-width"
-], g = l(({ replaceTokens: l = !1, isCollapsed: g = !0, onCollapse: _ }) => {
-	let { setValue: v } = u(e), { "pointer-events": y, "user-select": b, "touch-action": x, resize: S, appearance: C, "scroll-behavior": w, "overscroll-behavior": T, "accent-color": E, "caret-color": D, "color-scheme": O, "outline-width": k, "outline-style": A, "outline-color": j, "outline-offset": M, "border-collapse": N, "border-spacing": P, "table-layout": F, fill: I, stroke: L, "stroke-width": R } = t({
-		keys: m,
+], _ = u(({ replaceTokens: u = !1, isCollapsed: _ = !0, onCollapse: v }) => {
+	let { setValue: y } = d(e), { "pointer-events": b, "user-select": x, "touch-action": S, resize: C, appearance: w, "scroll-behavior": T, "overscroll-behavior": E, "accent-color": D, "caret-color": O, "color-scheme": k, "scrollbar-width": A, "scrollbar-color": j, "outline-width": M, "outline-style": N, "outline-color": P, "outline-offset": F, "border-collapse": I, "border-spacing": L, "table-layout": R, fill: z, stroke: B, "stroke-width": V } = t({
+		keys: h,
 		asValue: !0,
-		replaceTokens: l
-	}), z = d((e) => _?.("others", e), [_]), B = d((e) => (t) => v(e, t), [v]);
-	return /* @__PURE__ */ p(r, {
+		replaceTokens: u
+	}), H = f((e) => v?.("others", e), [v]), U = f((e) => (t) => y(e, t), [y]);
+	return /* @__PURE__ */ m(r, {
 		title: "Others",
-		dotKeys: m,
-		advancedKeys: h,
-		isCollapsed: g,
-		onCollapse: z,
+		dotKeys: h,
+		advancedKeys: g,
+		isCollapsed: _,
+		onCollapse: H,
 		children: [
-			/* @__PURE__ */ f(a, {
-				pointerEvents: y,
-				userSelect: b,
-				touchAction: x,
-				resize: S,
-				appearance: C,
-				scrollBehavior: w,
-				overscrollBehavior: T,
-				onChange: B
+			/* @__PURE__ */ p(a, {
+				pointerEvents: b,
+				userSelect: x,
+				touchAction: S,
+				resize: C,
+				appearance: w,
+				scrollBehavior: T,
+				overscrollBehavior: E,
+				onChange: U
 			}),
-			/* @__PURE__ */ f(o, {
-				outlineWidth: k,
-				outlineStyle: A,
-				outlineColor: j,
-				outlineOffset: M,
-				onChange: B
+			/* @__PURE__ */ p(o, {
+				outlineWidth: M,
+				outlineStyle: N,
+				outlineColor: P,
+				outlineOffset: F,
+				onChange: U
 			}),
-			/* @__PURE__ */ p(n, { children: [
-				/* @__PURE__ */ f(i, {
-					accentColor: E,
-					caretColor: D,
-					colorScheme: O,
-					onChange: B
+			/* @__PURE__ */ m(n, { children: [
+				/* @__PURE__ */ p(s, {
+					scrollbarWidth: A,
+					scrollbarColor: j,
+					onChange: U
 				}),
-				/* @__PURE__ */ f(c, {
-					borderCollapse: N,
-					borderSpacing: P,
-					tableLayout: F,
-					onChange: B
+				/* @__PURE__ */ p(i, {
+					accentColor: D,
+					caretColor: O,
+					colorScheme: k,
+					onChange: U
 				}),
-				/* @__PURE__ */ f(s, {
-					fill: I,
-					stroke: L,
-					strokeWidth: R,
-					onChange: B
+				/* @__PURE__ */ p(l, {
+					borderCollapse: I,
+					borderSpacing: L,
+					tableLayout: R,
+					onChange: U
+				}),
+				/* @__PURE__ */ p(c, {
+					fill: z,
+					stroke: B,
+					strokeWidth: V,
+					onChange: U
 				})
 			] })
 		]
 	});
 });
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/components/StyleInspector/categories/Others/OthersScrollbar.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersScrollbarProps = {
+    scrollbarWidth?: StyleValue;
+    scrollbarColor?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+/** How a scrolling element's scrollbar looks: thin or hidden, and the thumb and track colours — in that order. */
+declare const OthersScrollbar: ({ scrollbarWidth, scrollbarColor, onChange }: OthersScrollbarProps) => import("react").JSX.Element;
+export default OthersScrollbar;

package/dist/components/StyleInspector/categories/Others/OthersScrollbar.mjs

@@ -0,0 +1,36 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/OthersScrollbar.tsx
+var i = ({ scrollbarWidth: i, scrollbarColor: a, onChange: o }) => /* @__PURE__ */ r(t, {
+	label: "",
+	children: [/* @__PURE__ */ r(e, {
+		keys: ["scrollbar-width"],
+		label: "Scrollbar",
+		value: i,
+		onChange: o?.("scrollbar-width"),
+		type: "select",
+		children: [
+			/* @__PURE__ */ n("option", {
+				value: "auto",
+				children: "Auto"
+			}),
+			/* @__PURE__ */ n("option", {
+				value: "thin",
+				children: "Thin"
+			}),
+			/* @__PURE__ */ n("option", {
+				value: "none",
+				children: "Hidden"
+			})
+		]
+	}), /* @__PURE__ */ n(e, {
+		keys: ["scrollbar-color"],
+		label: "Thumb / Track",
+		value: a,
+		onChange: o?.("scrollbar-color"),
+		type: "input"
+	})]
+});
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/categories/Typography/Typography.mjs

@@ -4,10 +4,11 @@ import n from "../../components/CategoryOption/index.mjs";
 import r from "../../components/CategorySection/index.mjs";
 import i from "../../components/CategoryAdvanced/index.mjs";
 import a from "../../components/CategoryContainer/index.mjs";
-import o from "./TypographyAlign.mjs";
-import s from "./TypographyBreaking.mjs";
-import c from "./TypographyClamp.mjs";
-import { weights as l } from "./TypographyConstants.mjs";
+import ee from "./TypographyAlign.mjs";
+import o from "./TypographyBreaking.mjs";
+import s from "./TypographyClamp.mjs";
+import { weights as c } from "./TypographyConstants.mjs";
+import l from "./TypographyFigures.mjs";
 import u from "../../../../hooks/useSpaceFonts.mjs";
 import d from "./TypographyFont.mjs";
 import f from "./TypographyStyle.mjs";
@@ -17,57 +18,35 @@ import { memo as h, use as g, useCallback as _ } from "react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { primaryFamily as b } from "@plitzi/sdk-shared/style";
 //#region src/components/StyleInspector/categories/Typography/Typography.tsx
-var x = [
-	"font-family",
-	"font-weight",
-	"font-size",
-	"line-height",
-	"color",
-	"text-align",
-	"font-style",
-	"text-decoration",
+var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.text-align.font-style.text-decoration.text-decoration-thickness.text-underline-offset.letter-spacing.word-spacing.text-indent.text-transform.direction.text-shadow.white-space.text-wrap.word-break.overflow-wrap.hyphens.vertical-align.text-overflow.line-clamp.font-variant-numeric.font-feature-settings.-webkit-text-fill-color".split("."), S = [
 	"text-decoration-thickness",
 	"text-underline-offset",
-	"letter-spacing",
-	"word-spacing",
-	"text-indent",
-	"text-transform",
-	"direction",
-	"text-shadow",
-	"white-space",
-	"text-wrap",
 	"word-break",
 	"overflow-wrap",
 	"hyphens",
 	"vertical-align",
-	"text-overflow",
-	"line-clamp"
-], S = [
-	"text-decoration-thickness",
-	"text-underline-offset",
-	"word-break",
-	"overflow-wrap",
-	"hyphens",
-	"vertical-align",
-	"text-shadow"
+	"text-shadow",
+	"font-variant-numeric",
+	"font-feature-settings",
+	"-webkit-text-fill-color"
 ], C = [
 	"letter-spacing",
 	"word-spacing",
 	"text-indent"
 ], w = h(({ replaceTokens: h = !1, isCollapsed: w = !0, onCollapse: T }) => {
-	let E = u(), { setValue: D } = g(e), { "font-family": O, "font-weight": k, "font-size": A, "font-style": j, "text-align": M, "text-decoration": N, "text-decoration-thickness": P, "text-underline-offset": F, "text-indent": ee, "text-transform": I, "text-shadow": L, "white-space": R, "text-wrap": z, "word-break": B, "overflow-wrap": V, hyphens: H, "vertical-align": U, "text-overflow": W, "line-clamp": G, "line-height": K, color: q, "letter-spacing": J, "word-spacing": Y, direction: X } = t({
+	let E = u(), { setValue: D } = g(e), { "font-family": O, "font-weight": k, "font-size": A, "font-style": j, "text-align": M, "text-decoration": N, "text-decoration-thickness": P, "text-underline-offset": te, "text-indent": F, "text-transform": I, "text-shadow": L, "white-space": R, "text-wrap": z, "word-break": B, "overflow-wrap": V, hyphens: H, "vertical-align": U, "text-overflow": W, "line-clamp": G, "line-height": K, color: q, "letter-spacing": J, "word-spacing": Y, direction: X, "font-variant-numeric": Z, "font-feature-settings": Q, "-webkit-text-fill-color": ne } = t({
 		keys: x,
 		asValue: !0,
 		replaceTokens: h
-	}), Z = _((e) => T?.("typography", e), [T]), Q = E.find((e) => e.family === b(typeof O == "string" ? O : "")), $ = _((e) => (t) => D(e, t), [D]), te = _((e) => D(void 0, e), [D]);
+	}), re = _((e) => T?.("typography", e), [T]), ie = E.find((e) => e.family === b(typeof O == "string" ? O : "")), $ = _((e) => (t) => D(e, t), [D]), ae = _((e) => D(void 0, e), [D]);
 	return /* @__PURE__ */ y(a, {
 		title: "Typography",
 		dotKeys: x,
 		advancedKeys: S,
 		isCollapsed: w,
-		onCollapse: Z,
+		onCollapse: re,
 		children: [
-			/* @__PURE__ */ v(o, {
+			/* @__PURE__ */ v(ee, {
 				partialValue: M,
 				onChange: $("text-align")
 			}),
@@ -83,10 +62,10 @@ var x = [
 					value: k,
 					onChange: $("font-weight"),
 					type: "select",
-					children: Object.keys(l).map((e) => /* @__PURE__ */ v("option", {
+					children: Object.keys(c).map((e) => /* @__PURE__ */ v("option", {
 						value: e,
-						disabled: !Q?.weights.includes(Number(e)),
-						children: l[Number(e)]
+						disabled: !ie?.weights.includes(Number(e)),
+						children: c[Number(e)]
 					}, e))
 				}), /* @__PURE__ */ v(n, {
 					keys: ["color"],
@@ -116,7 +95,7 @@ var x = [
 				fontStyle: j,
 				textDecoration: N,
 				textDecorationThickness: P,
-				textUnderlineOffset: F,
+				textUnderlineOffset: te,
 				onChange: $
 			}),
 			/* @__PURE__ */ y(r, {
@@ -140,7 +119,7 @@ var x = [
 					/* @__PURE__ */ v(n, {
 						keys: ["text-indent"],
 						label: "Indent",
-						value: ee,
+						value: F,
 						onChange: $("text-indent"),
 						type: "metric"
 					})
@@ -151,7 +130,7 @@ var x = [
 				direction: X,
 				onChange: $
 			}),
-			/* @__PURE__ */ v(s, {
+			/* @__PURE__ */ v(o, {
 				whiteSpace: R,
 				textWrap: z,
 				wordBreak: B,
@@ -190,15 +169,20 @@ var x = [
 							children: "Inherit"
 						})
 					]
-				}), /* @__PURE__ */ v(c, {
+				}), /* @__PURE__ */ v(s, {
 					value: G,
-					onChange: te
+					onChange: ae
 				})]
 			}),
-			/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(p, {
+			/* @__PURE__ */ y(i, { children: [/* @__PURE__ */ v(p, {
 				value: L,
 				onChange: $("text-shadow")
-			}) })
+			}), /* @__PURE__ */ v(l, {
+				fontVariantNumeric: Z,
+				fontFeatureSettings: Q,
+				textFillColor: ne,
+				onChange: $
+			})] })
 		]
 	});
 });

package/dist/components/StyleInspector/categories/Typography/TypographyFigures.d.ts

@@ -0,0 +1,13 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type TypographyFiguresProps = {
+    fontVariantNumeric?: StyleValue;
+    fontFeatureSettings?: StyleValue;
+    textFillColor?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+/**
+ * How figures and glyphs are drawn: numbers that line up in a column, the font's own optional features, and the fill
+ * that text painted with its background (`background-clip: text`) needs made transparent.
+ */
+declare const TypographyFigures: ({ fontVariantNumeric, fontFeatureSettings, textFillColor, onChange }: TypographyFiguresProps) => import("react").JSX.Element;
+export default TypographyFigures;

package/dist/components/StyleInspector/categories/Typography/TypographyFigures.mjs

@@ -0,0 +1,61 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Typography/TypographyFigures.tsx
+var a = ({ fontVariantNumeric: a, fontFeatureSettings: o, textFillColor: s, onChange: c }) => /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i(t, {
+	label: "",
+	children: [/* @__PURE__ */ i(e, {
+		keys: ["font-variant-numeric"],
+		label: "Numbers",
+		value: a,
+		onChange: c?.("font-variant-numeric"),
+		type: "select",
+		children: [
+			/* @__PURE__ */ r("option", {
+				value: "normal",
+				children: "Normal"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "tabular-nums",
+				children: "Tabular"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "proportional-nums",
+				children: "Proportional"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "lining-nums",
+				children: "Lining"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "oldstyle-nums",
+				children: "Old style"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "slashed-zero",
+				children: "Slashed zero"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "tabular-nums slashed-zero",
+				children: "Tabular, slashed zero"
+			})
+		]
+	}), /* @__PURE__ */ r(e, {
+		keys: ["-webkit-text-fill-color"],
+		label: "Text Fill",
+		type: "color",
+		value: s,
+		onChange: c?.("-webkit-text-fill-color")
+	})]
+}), /* @__PURE__ */ r(t, {
+	label: "",
+	children: /* @__PURE__ */ r(e, {
+		keys: ["font-feature-settings"],
+		label: "Font Features",
+		value: o,
+		onChange: c?.("font-feature-settings"),
+		type: "input"
+	})
+})] });
+//#endregion
+export { a as default };

package/dist/components/StyleInspector/components/AncestorRules/AncestorRuleChip.d.ts

@@ -0,0 +1,10 @@
+import { AncestorCondition } from '../../helpers';
+export type AncestorRuleChipProps = {
+    condition: AncestorCondition;
+    active?: boolean;
+    unused?: boolean;
+    onSelect?: (condition: AncestorCondition) => void;
+    onRemove?: (condition: AncestorCondition) => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ condition, active, unused, onSelect, onRemove }: AncestorRuleChipProps) => import("react").JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/AncestorRules/AncestorRuleChip.mjs

@@ -0,0 +1,39 @@
+import { memo as e, useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
+var a = e(({ condition: e, active: a = !1, unused: o = !1, onSelect: s, onRemove: c }) => {
+	let l = t(() => s?.(e), [e, s]), u = t(() => c?.(e), [e, c]), d = o ? `No element this selector dresses sits inside .${e.ancestor}, so this rule never matches` : `Edit the rules for inside .${e.ancestor} (${e.label})`;
+	return /* @__PURE__ */ r("div", {
+		className: i("flex max-w-full items-center overflow-hidden rounded-sm border text-[11px] leading-none", {
+			"border-primary-500 bg-primary-500/15 text-primary-700 dark:text-primary-200": a,
+			"border-amber-500/70 bg-amber-500/10 text-amber-700 dark:text-amber-300": o && !a,
+			"border-gray-300 bg-gray-100 text-zinc-600 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300": !o && !a
+		}),
+		children: [/* @__PURE__ */ r("button", {
+			type: "button",
+			className: "flex min-w-0 items-center gap-1 px-1.5 py-1",
+			title: d,
+			onClick: l,
+			children: [
+				o && /* @__PURE__ */ n("i", { className: "fas fa-triangle-exclamation" }),
+				/* @__PURE__ */ r("span", {
+					className: "truncate",
+					children: [".", e.ancestor]
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "opacity-70",
+					children: ["· ", e.label]
+				})
+			]
+		}), /* @__PURE__ */ n("button", {
+			type: "button",
+			className: "cursor-pointer border-l border-inherit px-1.5 py-1 hover:bg-red-500/15 hover:text-red-600 dark:hover:text-red-400",
+			title: "Remove this rule",
+			"aria-label": `Remove the ${e.label} rule under .${e.ancestor}`,
+			onClick: u,
+			children: /* @__PURE__ */ n("i", { className: "fas fa-xmark" })
+		})]
+	});
+});
+//#endregion
+export { a as default };

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

@@ -0,0 +1,14 @@
+import { AncestorCondition } from '../../helpers';
+import { StyleState } from '@plitzi/sdk-shared';
+export type AncestorRulesProps = {
+    conditions: AncestorCondition[];
+    unused: Set<string>;
+    activeAncestor?: string;
+    activeState?: StyleState;
+    activeVariant?: string;
+    onSelect?: (condition: AncestorCondition) => void;
+    onRemove?: (condition: AncestorCondition) => void;
+    onRemoveUnused?: () => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ conditions, unused, activeAncestor, activeState, activeVariant, onSelect, onRemove, onRemoveUnused }: AncestorRulesProps) => import("react").JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/AncestorRules/AncestorRules.mjs

@@ -0,0 +1,36 @@
+import e from "./AncestorRuleChip.mjs";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+var i = t(({ conditions: t, unused: i, activeAncestor: a, activeState: o, activeVariant: s, onSelect: c, onRemove: l, onRemoveUnused: u }) => /* @__PURE__ */ r("div", {
+	className: "flex flex-col gap-1",
+	children: [/* @__PURE__ */ r("div", {
+		className: "flex items-center justify-between gap-2 text-[11px] text-zinc-500 dark:text-zinc-400",
+		children: [/* @__PURE__ */ r("span", { children: [
+			/* @__PURE__ */ n("i", { className: "fas fa-sitemap mr-1" }),
+			"Ancestor rules (",
+			t.length,
+			")"
+		] }), i.size > 0 && /* @__PURE__ */ r("button", {
+			type: "button",
+			className: "text-amber-700 hover:underline dark:text-amber-300",
+			title: "Remove every rule under an ancestor no element this selector dresses sits inside, at every breakpoint",
+			onClick: u,
+			children: [
+				"Remove unused (",
+				i.size,
+				")"
+			]
+		})]
+	}), /* @__PURE__ */ n("div", {
+		className: "flex flex-wrap gap-1",
+		children: t.map((t) => /* @__PURE__ */ n(e, {
+			condition: t,
+			active: t.ancestor === a && t.state === o && t.variant === s,
+			unused: i.has(t.ancestor),
+			onSelect: c,
+			onRemove: l
+		}, `${t.ancestor}:${t.label}`))
+	})]
+}));
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/components/AncestorRules/index.d.ts

@@ -0,0 +1,3 @@
+import { default as AncestorRules } from './AncestorRules';
+export * from './AncestorRules';
+export default AncestorRules;

package/dist/components/StyleInspector/components/AncestorRules/index.mjs

@@ -0,0 +1,5 @@
+import e from "./AncestorRules.mjs";
+//#region src/components/StyleInspector/components/AncestorRules/index.ts
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,36 @@
+import { Option } from '@plitzi/plitzi-ui/Select2';
+import { DisplayMode, Element, Schema, Style, StyleAncestors, StyleItem, StyleState } from '@plitzi/sdk-shared';
+/** The states a selector can react to, as the state picker offers them — from the one list every layer reads. */
+export declare const STYLE_STATE_OPTIONS: Option[];
+/**
+ * The classes an element's ancestors carry, closest first: what an "ancestor" condition can name. Only the base slot
+ * counts — a slot's class sits on an inner node of that ancestor, not around the element.
+ */
+export declare const ancestorClasses: (flat: Schema["flat"], element?: Element) => string[];
+/** One condition a selector has rules for under an ancestor: inside it always, in a state, a variant or both. */
+export type AncestorCondition = {
+    ancestor: string;
+    state?: StyleState;
+    variant?: string;
+    label: string;
+};
+/** Every condition under every ancestor, in the order they are written in the stylesheet. */
+export declare const ancestorConditions: (ancestors?: StyleAncestors) => AncestorCondition[];
+/**
+ * The ancestor picker's options: the element's ancestor classes, closest first, then any class the selector already
+ * has rules for that is not around this element. The ones with rules say which conditions, so they read at a glance.
+ */
+export declare const ancestorOptions: (candidates: string[], configured?: StyleAncestors) => Option[];
+/**
+ * The ancestors a selector has rules for that no element it dresses sits inside — rules that can never match, left
+ * behind when a class was renamed or the tree changed. Each wearer's ancestors are walked once.
+ */
+export declare const unusedAncestors: (flat: Schema["flat"], item: StyleItem) => Set<string>;
+/** One `styleUpdateSelector` that drops every rule under an ancestor, in one slot at one breakpoint. */
+export type AncestorRemoval = {
+    displayMode: DisplayMode;
+    styleSelector: string;
+    styleAncestor: string;
+};
+/** Where a selector has rules under any of `ancestors`, at every breakpoint and slot: what purging them takes. */
+export declare const ancestorRemovals: (platform: Style["platform"], name: string, ancestors: Set<string>) => AncestorRemoval[];

package/dist/components/StyleInspector/helpers.mjs

@@ -0,0 +1,54 @@
+import { STYLE_STATES as e, STYLE_STATE_LABELS as t, inCascadeOrder as n, isKnownState as r } from "@plitzi/sdk-shared/style/styleStates";
+//#region src/components/StyleInspector/helpers.ts
+var i = e.map((e) => ({
+	label: t[e],
+	value: e
+})), a = (e, t) => {
+	let n = /* @__PURE__ */ new Set(), r = t?.definition.parentId, i = r ? e[r] : void 0;
+	for (; i;) {
+		for (let e of i.definition.styleSelectors.base.split(" ")) e && n.add(e);
+		let t = i.definition.parentId;
+		i = t ? e[t] : void 0;
+	}
+	return [...n];
+}, o = (e) => !!e && Object.keys(e).length > 0, s = (e) => n(e ?? {}).filter(([, e]) => o(e)).map(([e]) => e).filter(r), c = (e = {}) => Object.entries(e).flatMap(([e, { default: t, states: n, variants: r }]) => [
+	...o(t) ? [{
+		ancestor: e,
+		label: "inside"
+	}] : [],
+	...s(n).map((t) => ({
+		ancestor: e,
+		state: t,
+		label: t
+	})),
+	...Object.entries(r ?? {}).flatMap(([t, n]) => [...o(n.default) ? [{
+		ancestor: e,
+		variant: t,
+		label: t
+	}] : [], ...s(n.states).map((n) => ({
+		ancestor: e,
+		variant: t,
+		state: n,
+		label: `${t}:${n}`
+	}))])
+]), l = (e, t = {}) => {
+	let n = c(t);
+	return [.../* @__PURE__ */ new Set([...e, ...Object.keys(t)])].map((e) => {
+		let t = n.filter((t) => t.ancestor === e).map((e) => e.label);
+		return {
+			label: t.length ? `.${e} — ${t.join(", ")}` : `.${e}`,
+			value: e
+		};
+	});
+}, u = (e, t) => Object.values(e).filter((e) => t.type === "element" ? e.definition.type === (t.componentType ?? t.name) : Object.values(e.definition.styleSelectors).some((e) => e.split(" ").includes(t.name))), d = (e, t) => {
+	let n = new Set(Object.values(t.attributes).flatMap((e) => Object.keys(e.ancestors ?? {})));
+	if (!n.size) return n;
+	for (let r of u(e, t)) if (a(e, r).forEach((e) => n.delete(e)), !n.size) break;
+	return n;
+}, f = (e, t, n) => Object.keys(e).flatMap((r) => Object.entries(e[r][t]?.attributes ?? {}).flatMap(([e, t]) => Object.keys(t.ancestors ?? {}).filter((e) => n.has(e)).map((t) => ({
+	displayMode: r,
+	styleSelector: e,
+	styleAncestor: t
+}))));
+//#endregion
+export { i as STYLE_STATE_OPTIONS, a as ancestorClasses, c as ancestorConditions, l as ancestorOptions, f as ancestorRemovals, d as unusedAncestors };

package/dist/components/StyleInspector/hooks/useStyleInherit.d.ts

@@ -7,6 +7,7 @@ export type UseStyleInheritProps = {
     styleSelector?: string;
     styleState?: StyleState;
     styleVariant?: string;
+    styleAncestor?: string;
 };
-declare const useStyleInherit: ({ element, componentType, componentSubType, selector, styleSelector, styleState, styleVariant }: UseStyleInheritProps) => import('../../..').InheritData;
+declare const useStyleInherit: ({ element, componentType, componentSubType, selector, styleSelector, styleState, styleVariant, styleAncestor }: UseStyleInheritProps) => import('../../..').InheritData;
 export default useStyleInherit;