@plitzi/sdk-style 0.36.2 → 0.37.0

package/dist/components/Selector/Selector.mjs

@@ -1,106 +1,110 @@
-import { selectorFormatter as e } from "./SelectorHelper.mjs";
-import t from "./SelectorItem/index.mjs";
-import n from "./SelectorSuggestions/index.mjs";
-import r from "../StyleManager/index.mjs";
-import { memo as i, useCallback as a, useMemo as o, useRef as s, useState as c } from "react";
-import { get as l, omit as u, pick as d } from "@plitzi/plitzi-ui/helpers";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import m from "@plitzi/plitzi-ui/Button";
-import h, { useFloating as g } from "@plitzi/plitzi-ui/ContainerFloating";
-import _ from "clsx";
-import { usePopup as v } from "@plitzi/plitzi-ui/Popup";
-var y = i(({ className: i = "", value: y = "", selectors: b, selector: x, componentType: S, disabled: C = !1, onChange: w, onSelectorSelected: T, onAdd: E, onRemove: D }) => {
-	let O = s(null), [k, A] = c(""), [j, M, , N, P] = g({ disabled: C }), { existsPopup: F, addPopup: I } = v("floating"), L = o(() => Object.values(b ?? {}).find((e) => e.type === "element" && e.componentType === S), [S, b]), R = o(() => Object.values(d(b ?? {}, y.split(" "))).map((e) => d(e, ["name", "type"])), [b, y]), z = o(() => Object.values(u(b ?? {}, y.split(" "))), [b, y]), B = a((e) => {
-		M(e.target.value.length > 0), A(e.target.value);
-	}, [M]), V = a(() => {
-		O.current?.focus(), M(k.length > 0);
+import { inStylesheetOrder as e, overriddenProperties as t, overrideNote as n, selectorFormatter as r } from "./SelectorHelper.mjs";
+import i from "./SelectorItem/index.mjs";
+import a from "./SelectorSuggestions/index.mjs";
+import o from "../StyleManager/index.mjs";
+import { memo as s, useCallback as c, useMemo as l, useRef as u, useState as d } from "react";
+import { get as f, omit as p, pick as m } from "@plitzi/plitzi-ui/helpers";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "@plitzi/plitzi-ui/Button";
+import v, { useFloating as y } from "@plitzi/plitzi-ui/ContainerFloating";
+import b from "clsx";
+import { usePopup as x } from "@plitzi/plitzi-ui/Popup";
+//#region src/components/Selector/Selector.tsx
+var S = "Classes apply left to right, in the order the stylesheet lists them: where two set the same property, the one further right wins.", C = s(({ className: s = "", value: C = "", selectors: w, selector: T, componentType: E, disabled: D = !1, onChange: O, onSelectorSelected: k, onAdd: A, onRemove: j }) => {
+	let M = u(null), [N, P] = d(""), [F, I, , L, R] = y({ disabled: D }), { existsPopup: z, addPopup: B } = x("floating"), V = l(() => Object.values(w ?? {}).find((e) => e.type === "element" && e.componentType === E), [E, w]), H = l(() => Object.values(m(w ?? {}, C.split(" "))).map((e) => m(e, ["name", "type"])), [w, C]), U = l(() => e(H.map((e, t) => ({
+		...e,
+		position: t
+	})), Object.keys(w ?? {})), [H, w]), W = l(() => t(U.map(({ name: e }) => e), w ?? {}), [U, w]), G = l(() => n(T?.name.replace(/:.*/, ""), W), [T, W]), K = l(() => Object.values(p(w ?? {}, C.split(" "))), [w, C]), q = c((e) => {
+		I(e.target.value.length > 0), P(e.target.value);
+	}, [I]), J = c(() => {
+		M.current?.focus(), I(N.length > 0);
 	}, [
-		O,
-		k,
-		M
-	]), H = a((e) => T?.(e), [T]), U = a((e) => (t, n = !0) => {
-		let r = [...R.filter((t, n) => n !== e), t].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
-		E?.(t, !1), w?.(r), n && T?.(t);
+		M,
+		N,
+		I
+	]), Y = c((e) => k?.(e), [k]), X = c((e) => (t, n = !0) => {
+		let r = [...H.filter((t, n) => n !== e), t].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
+		A?.(t, !1), O?.(r), n && k?.(t);
 	}, [
-		R,
-		E,
-		w,
-		T
-	]), W = a((e) => (t, n) => {
+		H,
+		A,
+		O,
+		k
+	]), Z = c((e) => (t, n) => {
 		switch (t) {
 			case "remove":
 			case "delete": {
-				let n = R.filter((t, n) => n !== e), r = n.reduce((e, t) => `${e} ${t.name}`, "").trim();
-				x && R[e].name === x.name && T?.(l(n, "0")), w?.(r), t === "delete" && D?.(R[e]);
+				let n = H.filter((t, n) => n !== e), r = n.reduce((e, t) => `${e} ${t.name}`, "").trim();
+				T && H[e].name === T.name && k?.(f(n, "0")), O?.(r), t === "delete" && j?.(H[e]);
 				break;
 			}
 			case "duplicate": {
 				if (!n) break;
-				let t = [...R, n].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
-				E?.(n, !0, l(R, `${e}`)), w?.(t);
+				let t = [...H, n].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
+				A?.(n, !0, f(H, `${e}`)), O?.(t);
 				break;
 			}
 		}
 	}, [
-		R,
-		x,
-		w,
+		H,
 		T,
-		E,
-		D
-	]), G = a((t) => {
-		switch (t.key) {
+		O,
+		k,
+		A,
+		j
+	]), Q = c((e) => {
+		switch (e.key) {
 			case "Enter": {
-				let { value: n } = t.target;
-				if (n !== "" && !R.find((e) => e.name === n)) {
-					A("");
-					let r = {
-						name: e(n),
+				let { value: t } = e.target;
+				if (t !== "" && !H.find((e) => e.name === t)) {
+					P("");
+					let n = {
+						name: r(t),
 						type: "class"
-					}, i = [...R, r].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
-					E?.(r, !1), w?.(i), M(!1), t.target.blur(), T?.(r);
+					}, i = [...H, n].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
+					A?.(n, !1), O?.(i), I(!1), e.target.blur(), k?.(n);
 				}
 				setTimeout(() => {
-					O.current?.focus();
+					M.current?.focus();
 				}, 0);
 				break;
 			}
 			case "ArrowUp":
-				M(!1);
+				I(!1);
 				break;
 			case "ArrowDown":
-				M(!0);
+				I(!0);
 				break;
-			case "Escape": t.stopPropagation(), A(""), t.target.blur();
+			case "Escape": e.stopPropagation(), P(""), e.target.blur();
 		}
 	}, [
-		R,
-		E,
-		w,
-		T,
-		M
-	]), K = a((e) => {
-		setTimeout(() => A(""), 0), M(!1);
-		let t = [...R, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
-		w?.(t), T?.(e);
+		H,
+		A,
+		O,
+		k,
+		I
+	]), $ = c((e) => {
+		setTimeout(() => P(""), 0), I(!1);
+		let t = [...H, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
+		O?.(t), k?.(e);
 	}, [
-		R,
-		w,
-		T,
-		M
-	]), q = a((e) => {
-		setTimeout(() => A(""), 0), M(!1);
-		let t = [...R, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
-		w?.(t), E?.(e, !1), T?.(e);
+		H,
+		O,
+		k,
+		I
+	]), ee = c((e) => {
+		setTimeout(() => P(""), 0), I(!1);
+		let t = [...H, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
+		O?.(t), A?.(e, !1), k?.(e);
 	}, [
-		R,
-		w,
-		E,
-		T,
-		M
-	]), J = a((e) => {
-		e.preventDefault(), e.stopPropagation(), F("styleManager") || I("styleManager", /* @__PURE__ */ f(r, {}), {
-			icon: /* @__PURE__ */ f("i", { className: "fas fa-swatchbook text-base" }),
+		H,
+		O,
+		A,
+		k,
+		I
+	]), te = c((e) => {
+		e.preventDefault(), e.stopPropagation(), z("styleManager") || B("styleManager", /* @__PURE__ */ h(o, {}), {
+			icon: /* @__PURE__ */ h("i", { className: "fas fa-swatchbook text-base" }),
 			title: "Style Manager",
 			resizeHandles: ["se"],
 			allowLeftSide: !0,
@@ -108,60 +112,80 @@ var y = i(({ className: i = "", value: y = "", selectors: b, selector: x, compon
 			placement: "floating",
 			width: 600
 		});
-	}, [I, F]), Y = o(() => ({ width: P?.width }), [P]), X = L ? [L, ...R] : R;
-	return /* @__PURE__ */ p(h, {
-		ref: N,
-		className: "w-full",
-		open: j,
-		children: [/* @__PURE__ */ f(h.Trigger, {
+	}, [B, z]), ne = l(() => ({ width: R?.width }), [R]);
+	return /* @__PURE__ */ g("div", {
+		className: "flex w-full min-w-0 flex-col gap-1",
+		children: [/* @__PURE__ */ g(v, {
+			ref: L,
 			className: "w-full",
-			children: /* @__PURE__ */ p("div", {
-				className: _("bg-grayviolet-200 relative flex flex-wrap gap-1 rounded-sm p-1 dark:bg-zinc-800", i, {
-					"pointer-events-none cursor-not-allowed bg-gray-100 dark:bg-zinc-900": C,
-					"cursor-pointer": !C
-				}),
-				onClick: V,
-				onKeyDown: G,
-				children: [
-					/* @__PURE__ */ f(m, {
-						intent: "secondary",
-						size: "custom",
-						onClick: J,
-						className: "h-7 w-7 rounded-sm bg-white dark:bg-zinc-700 dark:text-zinc-200",
-						title: "Style Manager",
-						children: /* @__PURE__ */ f(m.Icon, { icon: "fas fa-swatchbook" })
+			open: F,
+			children: [/* @__PURE__ */ h(v.Trigger, {
+				className: "w-full",
+				children: /* @__PURE__ */ g("div", {
+					className: b("bg-grayviolet-200 relative flex flex-wrap gap-1 rounded-sm p-1 dark:bg-zinc-800", s, {
+						"pointer-events-none cursor-not-allowed bg-gray-100 dark:bg-zinc-900": D,
+						"cursor-pointer": !D
 					}),
-					X.map((e, n) => /* @__PURE__ */ f(t, {
-						selector: e.name,
-						type: e.type,
-						editable: e.type !== "element",
-						active: e.name === x?.name.replace(/:.*/, ""),
-						onAction: W(L ? n - 1 : n),
-						onClick: H,
-						onChange: U(L ? n - 1 : n)
-					}, `${n}_${e.name}`)),
-					/* @__PURE__ */ f("input", {
-						ref: O,
-						className: "flex min-h-0 w-0 border-none bg-transparent px-1 py-0 text-xs text-inherit outline-hidden focus:min-w-[50px] focus:grow focus:ring-transparent",
-						autoComplete: "off",
-						autoCorrect: "off",
-						autoCapitalize: "off",
-						spellCheck: "false",
-						value: k,
-						onChange: B
-					})
-				]
-			})
-		}), /* @__PURE__ */ f(h.Content, {
-			style: Y,
-			children: /* @__PURE__ */ f(n, {
-				selector: k,
-				selectors: z,
-				onSelect: K,
-				onCreate: q
-			})
+					onClick: J,
+					onKeyDown: Q,
+					children: [
+						/* @__PURE__ */ h(_, {
+							intent: "secondary",
+							size: "custom",
+							onClick: te,
+							className: "h-7 w-7 rounded-sm bg-white dark:bg-zinc-700 dark:text-zinc-200",
+							title: "Style Manager",
+							children: /* @__PURE__ */ h(_.Icon, { icon: "fas fa-swatchbook" })
+						}),
+						V && /* @__PURE__ */ h(i, {
+							selector: V.name,
+							type: V.type,
+							editable: !1,
+							active: V.name === T?.name.replace(/:.*/, ""),
+							onClick: Y
+						}),
+						U.map(({ position: e, ...t }) => /* @__PURE__ */ h(i, {
+							selector: t.name,
+							type: t.type,
+							editable: t.type !== "element",
+							active: t.name === T?.name.replace(/:.*/, ""),
+							onAction: Z(e),
+							onClick: Y,
+							onChange: X(e)
+						}, `${e}_${t.name}`)),
+						/* @__PURE__ */ h("input", {
+							ref: M,
+							className: "flex min-h-0 w-0 border-none bg-transparent px-1 py-0 text-xs text-inherit outline-hidden focus:min-w-[50px] focus:grow focus:ring-transparent",
+							autoComplete: "off",
+							autoCorrect: "off",
+							autoCapitalize: "off",
+							spellCheck: "false",
+							value: N,
+							onChange: q
+						})
+					]
+				})
+			}), /* @__PURE__ */ h(v.Content, {
+				style: ne,
+				children: /* @__PURE__ */ h(a, {
+					selector: N,
+					selectors: K,
+					onSelect: $,
+					onCreate: ee
+				})
+			})]
+		}), U.length > 1 && /* @__PURE__ */ g("div", {
+			className: "flex min-w-0 items-center gap-1.5 px-1 text-[11px] text-gray-500 dark:text-zinc-400",
+			title: G ?? S,
+			children: [/* @__PURE__ */ h("i", {
+				className: "fas fa-circle-info shrink-0",
+				title: S
+			}), /* @__PURE__ */ h("span", {
+				className: "truncate",
+				children: G ?? "Left to right: the class further right wins where they overlap"
+			})]
 		})]
 	});
 });
 //#endregion
-export { y as default };
+export { C as default };

package/dist/components/Selector/SelectorHelper.d.ts

@@ -1 +1,26 @@
+import { StyleItem } from '@plitzi/sdk-shared';
 export declare const selectorFormatter: (selector: string) => string;
+/**
+ * The classes of one element in the order the stylesheet lists them, which is the order they win in: where two set the
+ * same property, the later one applies. The order they are written on the element decides nothing, so it is not the
+ * order they are shown in. A class the stylesheet does not hold keeps its place after the rest.
+ */
+export declare const inStylesheetOrder: <T extends {
+    name: string;
+}>(tags: T[], stylesheet: string[]) => T[];
+export type Overridden = {
+    by: string;
+    properties: string[];
+};
+/**
+ * For each class of an element, what a class after it in the stylesheet sets again — the rules it loses wherever both
+ * apply. `ordered` is the element's classes in stylesheet order; a class nothing overrides is left out.
+ */
+export declare const overriddenProperties: (ordered: string[], selectors: Record<string, StyleItem>) => Record<string, Overridden[]>;
+/**
+ * A list of properties as a person reads it: the four sides of one box property as that property, so a lost padding
+ * reads `padding` rather than four lines of it. What is left of a side set that is not whole stays as written.
+ */
+export declare const summarizeProperties: (properties: string[]) => string[];
+/** What the class being edited loses to the classes after it, as one line — or nothing, when it loses nothing. */
+export declare const overrideNote: (name: string | undefined, overridden: Record<string, Overridden[]>) => string | undefined;

package/dist/components/Selector/SelectorHelper.mjs

@@ -1,4 +1,45 @@
 //#region src/components/Selector/SelectorHelper.ts
-var e = (e) => (e.match(/^[0-9]/) && (e = `_${e}`), e.replace(" ", "-").replace(/[^a-zA-Z0-9_-]+/, ""));
+var e = (e) => (e.match(/^[0-9]/) && (e = `_${e}`), e.replace(" ", "-").replace(/[^a-zA-Z0-9_-]+/, "")), t = (e, t) => {
+	let n = (e) => {
+		let n = t.indexOf(e);
+		return n === -1 ? t.length : n;
+	};
+	return [...e].sort((e, t) => n(e.name) - n(t.name));
+}, n = (e) => {
+	let t = e?.attributes.base;
+	return t ? [...Object.keys(t.default ?? {}), ...Object.entries(t.states ?? {}).flatMap(([e, t]) => Object.keys(t).map((t) => `${e}: ${t}`))] : [];
+}, r = (e, t) => {
+	let r = {};
+	return e.forEach((i, a) => {
+		let o = new Set(n(t[i])), s = e.slice(a + 1).flatMap((e) => {
+			let r = n(t[e]).filter((e) => o.has(e));
+			return r.length > 0 ? [{
+				by: e,
+				properties: r
+			}] : [];
+		});
+		s.length > 0 && (r[i] = s);
+	}), r;
+}, i = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], a = (e) => {
+	let t = new Set(e), n = [];
+	for (let r of e) {
+		if (!t.has(r)) continue;
+		let e = /^(.*?)-(top|right|bottom|left)(-[a-z]+)?$/.exec(r), a = e?.at(3) ?? "", o = e ? i.map((t) => `${e[1]}-${t}${a}`) : [];
+		if (e && o.every((e) => t.has(e))) {
+			o.forEach((e) => t.delete(e)), n.push(`${e[1]}${a}`);
+			continue;
+		}
+		t.delete(r), n.push(r);
+	}
+	return n;
+}, o = (e, t) => {
+	let n = e ? t[e] : void 0;
+	if (n) return n.map(({ by: e, properties: t }) => `${a(t).join(", ")} overridden by ${e}`).join(" · ");
+};
 //#endregion
-export { e as selectorFormatter };
+export { t as inStylesheetOrder, r as overriddenProperties, o as overrideNote, e as selectorFormatter, a as summarizeProperties };

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

@@ -6,10 +6,11 @@ export type InspectorProps = {
     selector?: StyleItem;
     styleState?: StyleState;
     styleVariant?: string;
+    styleAncestor?: string;
     styleSelector?: string;
     element?: Element;
     displayMode: DisplayMode;
     mode?: 'element' | 'manager';
 };
-declare const Inspector: ({ selectors, componentType, componentSubType, selector, styleState, styleVariant, styleSelector, element, displayMode, mode }: InspectorProps) => import("react").JSX.Element;
+declare const Inspector: ({ selectors, componentType, componentSubType, selector, styleState, styleVariant, styleAncestor, styleSelector, element, displayMode, mode }: InspectorProps) => import("react").JSX.Element;
 export default Inspector;