@plitzi/sdk-style 0.38.9 → 0.38.11

package/dist/components/StyleInspector/Inspector.mjs

@@ -1,9 +1,12 @@
 import { makeSelector as e } from "../../StyleHelper.mjs";
-import t from "./categories/Background/index.mjs";
-import n from "./categories/Border/index.mjs";
-import r from "./categories/Display/index.mjs";
-import i from "./categories/DisplayFlexChild/index.mjs";
-import a from "./categories/Effects/index.mjs";
+import { CATEGORY_IDS as t, CATEGORY_KEYS as n } from "./categoryKeys.mjs";
+import r from "./InspectorSearchContext.mjs";
+import { categoryMatches as i, normalizeQuery as ee } from "./search.mjs";
+import a from "./categories/Background/index.mjs";
+import te from "./categories/Border/index.mjs";
+import ne from "./categories/Display/index.mjs";
+import re from "./categories/DisplayFlexChild/index.mjs";
+import ie from "./categories/Effects/index.mjs";
 import o from "./categories/List/index.mjs";
 import s from "./categories/ListItem/index.mjs";
 import c from "./categories/Others/index.mjs";
@@ -13,187 +16,198 @@ import d from "./categories/Size/index.mjs";
 import f from "./categories/Spacing/index.mjs";
 import p from "./categories/Typography/index.mjs";
 import m from "./categories/Variables/index.mjs";
-import h from "./hooks/useStyleInherit.mjs";
-import g from "./StyleInspectorProvider.mjs";
-import { use as _, useCallback as v, useMemo as y } from "react";
+import h from "./components/InspectorFooter/index.mjs";
+import g from "./components/InspectorSearch/index.mjs";
+import ae from "./hooks/useStyleInherit.mjs";
+import oe from "./StyleInspectorProvider.mjs";
+import { use as se, useCallback as _, useMemo as v, useState as y } from "react";
 import { get as b, set as x } from "@plitzi/plitzi-ui/helpers";
-import { produce as S } from "immer";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import T from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
-import E from "@plitzi/plitzi-ui/hooks/useStorage";
-import D from "@plitzi/plitzi-ui/Switch";
+import { produce as ce } from "immer";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import w from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import T from "@plitzi/plitzi-ui/hooks/useStorage";
 //#region src/components/StyleInspector/Inspector.tsx
-var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleAncestor: P, stylePseudo: F, styleCondition: I, styleSelector: L = "base", element: R, displayMode: z, mode: B = "element" }) => {
-	let { builderHandler: V } = _(T), [H, U] = E(`builder-state.styleInspector.${B}.collapsedCache`, {}), [W, G] = E(`builder-state.styleInspector.${B}.showAllOptions`, !1), [K, q] = E(`builder-state.styleInspector.${B}.replaceTokens`, !1), J = h({
-		element: R,
-		componentType: k,
-		componentSubType: A,
-		selector: j?.name,
-		styleSelector: L,
-		styleState: M,
-		styleVariant: N,
-		styleAncestor: P,
-		stylePseudo: F,
-		styleCondition: I
-	}), Y = v((e, t) => U((n) => ({
+var E = ({ selectors: E, componentType: D, componentSubType: le, selector: O, styleState: k, styleVariant: A, styleAncestor: j, stylePseudo: M, styleCondition: N, styleSelector: P = "base", element: F, displayMode: I, mode: L = "element" }) => {
+	let { builderHandler: R } = se(w), [z, B] = T(`builder-state.styleInspector.${L}.collapsedCache`, {}), [V, H] = T(`builder-state.styleInspector.${L}.showAllOptions`, !1), [U, W] = T(`builder-state.styleInspector.${L}.replaceTokens`, !1), [G, ue] = y(""), K = ee(G), q = ae({
+		element: F,
+		componentType: D,
+		componentSubType: le,
+		selector: O?.name,
+		styleSelector: P,
+		styleState: k,
+		styleVariant: A,
+		styleAncestor: j,
+		stylePseudo: M,
+		styleCondition: N
+	}), J = _((e, t) => B((n) => ({
 		...n,
 		[e]: t
-	})), [U]), X = v((e) => G(e.target.checked), [G]), Z = v((e) => q(e.target.checked), [q]), Q = v((t, n) => {
-		if (j) {
-			V("styleUpdateSelector", z, j.name, t, n, {
-				componentType: j.type === "element" ? k : void 0,
-				styleSelector: L,
-				styleState: M,
-				styleVariant: N,
-				styleAncestor: P,
-				stylePseudo: F,
-				styleCondition: I
+	})), [B]), de = _(() => B(Object.fromEntries(t.map((e) => [e, !0]))), [B]), fe = _((e) => H(e.target.checked), [H]), pe = _((e) => W(e.target.checked), [W]), me = _((t, n) => {
+		if (O) {
+			R("styleUpdateSelector", I, O.name, t, n, {
+				componentType: O.type === "element" ? D : void 0,
+				styleSelector: P,
+				styleState: k,
+				styleVariant: A,
+				styleAncestor: j,
+				stylePseudo: M,
+				styleCondition: N
 			});
 			return;
 		}
-		if (!k) return;
-		let r = e(k, L);
-		if (V("styleAddSelector", z, r, "class", t, n, {
-			styleSelector: L,
-			styleState: M,
-			styleVariant: N,
-			styleAncestor: P,
-			stylePseudo: F,
-			styleCondition: I
-		}), !R) return;
-		let i = b(R, `definition.styleSelectors.${L}`);
-		V("schemaUpdateElement", S(R, (e) => {
-			i ? x(e, `definition.styleSelectors.${L}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${L}`, r);
+		if (!D) return;
+		let r = e(D, P);
+		if (R("styleAddSelector", I, r, "class", t, n, {
+			styleSelector: P,
+			styleState: k,
+			styleVariant: A,
+			styleAncestor: j,
+			stylePseudo: M,
+			styleCondition: N
+		}), !F) return;
+		let i = b(F, `definition.styleSelectors.${P}`);
+		R("schemaUpdateElement", ce(F, (e) => {
+			i ? x(e, `definition.styleSelectors.${P}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${P}`, r);
 		}));
 	}, [
-		V,
-		k,
-		z,
 		R,
+		D,
+		I,
+		F,
+		O,
+		P,
+		k,
+		A,
 		j,
-		L,
 		M,
-		N,
-		P,
-		F,
-		I
-	]), $ = y(() => {
-		let e = R?.definition.type;
-		return W || B === "manager" || e === "list" || e === "listItem";
+		N
+	]), Y = v(() => {
+		let e = F?.definition.type;
+		return V || L === "manager" || e === "list" || e === "listItem";
 	}, [
-		R?.definition.type,
-		B,
-		W
-	]), ee = y(() => W || B === "manager" || b(J, "parentStyle.display", "block") === "flex", [
-		J,
-		B,
-		W
-	]), te = y(() => b(J, "parentStyle.flex-direction", "row") === "column", [J]);
-	return /* @__PURE__ */ C(g, {
-		componentType: k,
-		displayMode: z,
-		styleSelector: L,
-		styleState: M,
-		styleVariant: N,
-		styleAncestor: P,
-		stylePseudo: F,
-		styleCondition: I,
-		selector: j,
-		element: R,
-		inheritData: J,
-		onChange: Q,
-		children: /* @__PURE__ */ w("div", {
-			className: "flex grow flex-col justify-between",
-			children: [/* @__PURE__ */ w("div", {
-				className: "flex grow flex-col",
-				children: [
-					$ && /* @__PURE__ */ C(o, {
-						replaceTokens: K,
-						isCollapsed: H.list ?? !0,
-						onCollapse: Y
-					}),
-					$ && /* @__PURE__ */ C(s, {
-						replaceTokens: K,
-						isCollapsed: H.listItem ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(r, {
-						replaceTokens: K,
-						isCollapsed: H.display ?? !0,
-						onCollapse: Y
-					}),
-					ee && /* @__PURE__ */ C(i, {
-						replaceTokens: K,
-						isCollapsed: H.displayFlexChild ?? !0,
-						isFlexVertical: te,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(f, {
-						replaceTokens: K,
-						isCollapsed: H.spacing ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(d, {
-						replaceTokens: K,
-						isCollapsed: H.size ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(l, {
-						replaceTokens: K,
-						isCollapsed: H.position ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(p, {
-						replaceTokens: K,
-						isCollapsed: H.typography ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(t, {
-						replaceTokens: K,
-						isCollapsed: H.background ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(n, {
-						replaceTokens: K,
-						isCollapsed: H.border ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(a, {
-						replaceTokens: K,
-						isCollapsed: H.effects ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(c, {
-						replaceTokens: K,
-						isCollapsed: H.others ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(m, {
-						isCollapsed: H.variables ?? !0,
-						onCollapse: Y
-					}),
-					/* @__PURE__ */ C(u, {
-						isCollapsed: H.rawStyle ?? !0,
-						selectors: O,
-						onCollapse: Y
-					})
-				]
-			}), /* @__PURE__ */ w("div", {
-				className: "flex items-center justify-end gap-4 border-t border-gray-200 px-2 py-1 dark:border-zinc-700",
-				children: [/* @__PURE__ */ C(D, {
-					size: "xs",
-					label: "Replace Tokens",
-					checked: K,
-					onChange: Z
-				}), B === "element" && /* @__PURE__ */ C(D, {
-					size: "xs",
-					label: "Show All Options",
-					checked: W,
-					onChange: X
+		F?.definition.type,
+		L,
+		V
+	]), X = v(() => V || L === "manager" || b(q, "parentStyle.display", "block") === "flex", [
+		q,
+		L,
+		V
+	]), he = v(() => b(q, "parentStyle.flex-direction", "row") === "column", [q]), Z = _((e) => e === "list" || e === "listItem" ? Y : e !== "displayFlexChild" || X, [X, Y]), Q = _((e) => Z(e) && i(n[e], K), [Z, K]), $ = _((e) => !K && (z[e] ?? !0), [z, K]), ge = !!K && !t.some(Q);
+	return /* @__PURE__ */ S(oe, {
+		componentType: D,
+		displayMode: I,
+		styleSelector: P,
+		styleState: k,
+		styleVariant: A,
+		styleAncestor: j,
+		stylePseudo: M,
+		styleCondition: N,
+		selector: O,
+		element: F,
+		inheritData: q,
+		onChange: me,
+		children: /* @__PURE__ */ S(r, {
+			value: K,
+			children: /* @__PURE__ */ C("div", {
+				className: "flex grow flex-col justify-between",
+				children: [/* @__PURE__ */ C("div", {
+					className: "flex grow flex-col",
+					children: [
+						/* @__PURE__ */ S(g, {
+							value: G,
+							onChange: ue
+						}),
+						ge && /* @__PURE__ */ C("p", {
+							className: "m-0 px-3 py-4 text-xs text-zinc-500 dark:text-zinc-400",
+							children: [
+								"No property here matches “",
+								G.trim(),
+								"”.",
+								!V && L === "element" && " “All options” includes the categories this element does not use."
+							]
+						}),
+						Q("list") && /* @__PURE__ */ S(o, {
+							replaceTokens: U,
+							isCollapsed: $("list"),
+							onCollapse: J
+						}),
+						Q("listItem") && /* @__PURE__ */ S(s, {
+							replaceTokens: U,
+							isCollapsed: $("listItem"),
+							onCollapse: J
+						}),
+						Q("display") && /* @__PURE__ */ S(ne, {
+							replaceTokens: U,
+							isCollapsed: $("display"),
+							onCollapse: J
+						}),
+						Q("displayFlexChild") && /* @__PURE__ */ S(re, {
+							replaceTokens: U,
+							isCollapsed: $("displayFlexChild"),
+							isFlexVertical: he,
+							onCollapse: J
+						}),
+						Q("spacing") && /* @__PURE__ */ S(f, {
+							replaceTokens: U,
+							isCollapsed: $("spacing"),
+							onCollapse: J
+						}),
+						Q("size") && /* @__PURE__ */ S(d, {
+							replaceTokens: U,
+							isCollapsed: $("size"),
+							onCollapse: J
+						}),
+						Q("position") && /* @__PURE__ */ S(l, {
+							replaceTokens: U,
+							isCollapsed: $("position"),
+							onCollapse: J
+						}),
+						Q("typography") && /* @__PURE__ */ S(p, {
+							replaceTokens: U,
+							isCollapsed: $("typography"),
+							onCollapse: J
+						}),
+						Q("background") && /* @__PURE__ */ S(a, {
+							replaceTokens: U,
+							isCollapsed: $("background"),
+							onCollapse: J
+						}),
+						Q("border") && /* @__PURE__ */ S(te, {
+							replaceTokens: U,
+							isCollapsed: $("border"),
+							onCollapse: J
+						}),
+						Q("effects") && /* @__PURE__ */ S(ie, {
+							replaceTokens: U,
+							isCollapsed: $("effects"),
+							onCollapse: J
+						}),
+						Q("others") && /* @__PURE__ */ S(c, {
+							replaceTokens: U,
+							isCollapsed: $("others"),
+							onCollapse: J
+						}),
+						Q("variables") && /* @__PURE__ */ S(m, {
+							isCollapsed: $("variables"),
+							onCollapse: J
+						}),
+						Q("rawStyle") && /* @__PURE__ */ S(u, {
+							isCollapsed: $("rawStyle"),
+							selectors: E,
+							onCollapse: J
+						})
+					]
+				}), /* @__PURE__ */ S(h, {
+					replaceTokens: U,
+					showAllOptions: V,
+					canShowAllOptions: L === "element",
+					onCollapseAll: de,
+					onChangeReplaceTokens: pe,
+					onChangeShowAllOptions: fe
 				})]
-			})]
+			})
 		})
 	});
 };
 //#endregion
-export { O as default };
+export { E as default };

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

@@ -0,0 +1,3 @@
+/** What the inspector's search holds, normalized (`search.ts`) — empty while nobody is searching. */
+declare const InspectorSearchContext: import('react').Context<string>;
+export default InspectorSearchContext;

package/dist/components/StyleInspector/InspectorSearchContext.mjs

@@ -0,0 +1,6 @@
+import { createContext as e } from "react";
+//#region src/components/StyleInspector/InspectorSearchContext.ts
+var t = e("");
+t.displayName = "InspectorSearchContext";
+//#endregion
+export { t as default };