@plitzi/sdk-style 0.33.1 → 0.34.0

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

@@ -1,37 +1,37 @@
 import e from "../StyleInspectorContext.mjs";
-import { get as t, pick as n } from "@plitzi/plitzi-ui/helpers";
-import { use as r, useMemo as i } from "react";
+import { use as t, useMemo as n } from "react";
+import { get as r, pick as i } from "@plitzi/plitzi-ui/helpers";
 import { baseDefaultValue as a } from "@plitzi/sdk-shared";
 import { VARIABLE_REGEX as o } from "@plitzi/sdk-shared/schema/schemaConstants";
 //#region src/components/StyleInspector/hooks/useInspectorValues.ts
 var s = ({ keys: s, skipContext: c = !1, context: l = {}, asValue: u = !1, defaultValues: d, strictMode: f = !1, replaceTokens: p = !1 }) => {
 	let { inheritData: m, bindingData: h, variables: g, getValues: _ } = {};
-	c ? {inheritData: m, bindingData: h, variables: g, getValues: _} = l : {inheritData: m, bindingData: h, variables: g, getValues: _} = r(e);
-	let v = _(), y = i(() => !!s && !u && Object.keys(m).filter((e) => s.includes(e) || s.length === 0).length > 0, [
+	c ? {inheritData: m, bindingData: h, variables: g, getValues: _} = l : {inheritData: m, bindingData: h, variables: g, getValues: _} = t(e);
+	let v = _(), y = n(() => !!s && !u && Object.keys(m).filter((e) => s.includes(e) || s.length === 0).length > 0, [
 		s,
 		m,
 		u
-	]), b = i(() => !!s && !u && Object.keys(h).filter((e) => s.includes(e) || s.length === 0).length > 0, [
+	]), b = n(() => !!s && !u && Object.keys(h).filter((e) => s.includes(e) || s.length === 0).length > 0, [
 		s,
 		h,
 		u
-	]), x = i(() => !!s && !u && Object.keys(n(v, s)).filter((e) => typeof v[e] == "string" && o.test(v[e])).length > 0, [
+	]), x = n(() => !!s && !u && Object.keys(i(v, s)).filter((e) => typeof v[e] == "string" && o.test(v[e])).length > 0, [
 		s,
 		v,
 		u
-	]), S = i(() => s ? s.length > 0 ? !u && Object.keys(n(v, s)).length > 0 : !u && Object.keys(v).length > 0 : !1, [
+	]), S = n(() => s ? s.length > 0 ? !u && Object.keys(i(v, s)).length > 0 : !u && Object.keys(v).length > 0 : !1, [
 		s,
 		u,
 		v
-	]), C = i(() => {
+	]), C = n(() => {
 		let e = {};
 		if (!s) return e;
-		let n = new RegExp(o, "g");
-		return s.forEach((r) => {
+		let t = new RegExp(o, "g");
+		return s.forEach((n) => {
 			let i;
-			i = f ? t(v, r, t(d ?? {}, r)) : t(v, r, t(h, r, t(m, `${r}.0.value`, t(d ?? {}, r, a[r])))), p && typeof i == "string" && o.test(i) && [...i.matchAll(n)].forEach((e) => {
-				i = i.replace(e[0], t(g, e[1] ? e[1] : e[2], e[0]));
-			}), e[r] = i;
+			i = f ? r(v, n, r(d ?? {}, n)) : r(v, n, r(h, n, r(m, `${n}.0.value`, r(d ?? {}, n, a[n])))), p && typeof i == "string" && o.test(i) && [...i.matchAll(t)].forEach((e) => {
+				i = i.replace(e[0], r(g, e[1] ? e[1] : e[2], e[0]));
+			}), e[n] = i;
 		}), e;
 	}, [
 		s,

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

@@ -1,17 +1,17 @@
-import { get as e, set as t } from "@plitzi/plitzi-ui/helpers";
-import { useMemo as n } from "react";
-import { emptyObject as r } from "@plitzi/sdk-shared/helpers/utils";
-import { useCommonStore as i } from "@plitzi/sdk-shared/store";
+import { useMemo as e } from "react";
+import { useCommonStore as t } from "@plitzi/sdk-shared/store";
+import { emptyObject as n } from "@plitzi/sdk-shared/helpers/utils";
+import { get as r, set as i } from "@plitzi/plitzi-ui/helpers";
 //#region src/components/StyleInspector/hooks/useStyleBinding.ts
 var a = ({ element: a }) => {
-	let [o = r] = i("runtime.sources");
-	return n(() => {
-		let n = {};
-		if (!a) return n;
-		let { definition: { bindings: r } } = a;
-		return r?.style && r.style.forEach((r) => {
-			e(o, r.source) === void 0 || !r.enabled || t(n, r.to, e(o, r.source));
-		}), n;
+	let [o = n] = t("runtime.sources");
+	return e(() => {
+		let e = {};
+		if (!a) return e;
+		let { definition: { bindings: t } } = a;
+		return t?.style && t.style.forEach((t) => {
+			r(o, t.source) !== void 0 && t.enabled && i(e, t.to, r(o, t.source));
+		}), e;
 	}, [o, a]);
 };
 //#endregion

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

@@ -1,10 +1,10 @@
 import e from "../../../helpers/calculateInheriting.mjs";
 import { use as t, useMemo as n } from "react";
-import r from "@plitzi/sdk-shared/elements/ComponentContext";
-import { useBuilderStore as i } from "@plitzi/sdk-shared/store";
+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]] = i(["schema.flat", "style.platform"]), { componentDefinitions: m } = t(r);
+	let [[f, p]] = r(["schema.flat", "style.platform"]), { componentDefinitions: m } = 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, {

package/dist/components/StyleManager/ManagerSelector.mjs

@@ -1,19 +1,19 @@
 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 { jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "@plitzi/plitzi-ui/Modal";
+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/sdk-shared/elements/ComponentContext";
-import { get as f, isEmpty as p, set as m } from "@plitzi/plitzi-ui/helpers/lodash/index.js";
-import h from "@plitzi/plitzi-ui/hooks/useDisclosure";
-import g from "@plitzi/plitzi-ui/Input";
-import { produce as _ } from "immer";
+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(d), A = a(() => C.filter((e) => !!e.componentType).map((e) => e.componentType), [C]), j = a(() => {
+	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 p(w) || (e = C.filter((e) => e.name.toLowerCase().includes(w.toLowerCase()))), e.sort((e, t) => {
+		return m(w) || (e = C.filter((e) => e.name.toLowerCase().includes(w.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;
 		});
@@ -33,16 +33,16 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 				});
 			}
 		}
-	}, [O, n]), [P, F, I, L] = h({
+	}, [O, n]), [P, F, I, L] = g({
 		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(f(e, "definition.styleSelectors", {})).find((e) => (t.includes(":") && (t = f(t.split(":"), "0", t)), e && t && e.split(" ").includes(t))) : [], []), B = i((e, t, r) => {
+	}, [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) => _(e, (t) => {
+		let i = new Set(r), a = y.filter((e) => r.some((t) => z(e, t))).map((e) => s(e, (t) => {
 			Object.keys(e.definition.styleSelectors).forEach((e) => {
-				i.has(f(t, `definition.styleSelectors.${e}`, "")) && m(t, `definition.styleSelectors.${e}`, "");
+				i.has(p(t, `definition.styleSelectors.${e}`, "")) && h(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);
@@ -52,7 +52,7 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 		z,
 		y,
 		S
-	]), [V, H, U, W, , G] = h({
+	]), [V, H, U, W, , G] = g({
 		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) => ({
@@ -63,52 +63,52 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 		y,
 		z
 	]), Q = i(() => void W(void 0, !1), [W]), $ = i(() => void W(void 0, !0), [W]);
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("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__ */ c(u, {
+			/* @__PURE__ */ l(u, {
 				intent: "primary",
 				size: "sm",
 				className: "w-full",
 				iconPlacement: "before",
 				onClick: I,
-				children: [/* @__PURE__ */ s(u.Icon, {
+				children: [/* @__PURE__ */ c(u.Icon, {
 					icon: "fas fa-tint",
 					size: "md",
 					className: "text-base"
 				}), "New Selector"]
 			}),
-			/* @__PURE__ */ s(g, {
+			/* @__PURE__ */ c(_, {
 				placeholder: "Search Selector",
 				value: w,
 				onChange: M,
 				size: "xs"
 			}),
-			E.length > 0 && /* @__PURE__ */ c("div", {
+			E.length > 0 && /* @__PURE__ */ l("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__ */ c("span", {
+				children: [/* @__PURE__ */ l("span", {
 					className: "text-xs text-zinc-600 dark:text-zinc-300",
 					children: [E.length, " selected"]
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "flex gap-1",
-					children: [/* @__PURE__ */ s(u, {
+					children: [/* @__PURE__ */ c(u, {
 						size: "xs",
 						onClick: J,
 						children: "Clear"
-					}), /* @__PURE__ */ c(u, {
+					}), /* @__PURE__ */ l(u, {
 						intent: "danger",
 						size: "xs",
 						iconPlacement: "before",
 						onClick: Y,
-						children: [/* @__PURE__ */ s(u.Icon, { icon: "fas fa-trash" }), "Delete"]
+						children: [/* @__PURE__ */ c(u.Icon, { icon: "fas fa-trash" }), "Delete"]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ c("div", {
 				className: "flex grow basis-0 flex-col overflow-y-auto",
 				children: j.map((t) => {
 					let { name: n, type: r } = t;
-					return /* @__PURE__ */ s(e, {
+					return /* @__PURE__ */ c(e, {
 						id: n,
 						active: n === x,
 						checked: E.includes(n),
@@ -121,36 +121,36 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 					}, n);
 				})
 			}),
-			/* @__PURE__ */ c(l, {
+			/* @__PURE__ */ l(d, {
 				id: P,
 				open: F,
 				onClose: L,
 				size: "sm",
-				children: [/* @__PURE__ */ s(l.Header, { children: /* @__PURE__ */ s("h4", { children: "Add Selector" }) }), /* @__PURE__ */ s(l.Body, { children: /* @__PURE__ */ s(t, {
+				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
 				}) })]
 			}),
-			/* @__PURE__ */ c(l, {
+			/* @__PURE__ */ l(d, {
 				id: V,
 				open: H,
 				onClose: W,
 				children: [
-					/* @__PURE__ */ s(l.Header, { children: /* @__PURE__ */ s("h4", { children: "Remove Selector" }) }),
-					/* @__PURE__ */ c(l.Body, { children: [X > 1 && /* @__PURE__ */ c("h4", { children: [
+					/* @__PURE__ */ c(d.Header, { children: /* @__PURE__ */ c("h4", { children: "Remove Selector" }) }),
+					/* @__PURE__ */ l(d.Body, { children: [X > 1 && /* @__PURE__ */ l("h4", { children: [
 						"Do you want to remove these ",
 						X,
 						" items ?"
-					] }), X <= 1 && /* @__PURE__ */ s("h4", { children: "Do you want to remove this item ?" })] }),
-					/* @__PURE__ */ c(l.Footer, {
+					] }), X <= 1 && /* @__PURE__ */ c("h4", { children: "Do you want to remove this item ?" })] }),
+					/* @__PURE__ */ l(d.Footer, {
 						justify: "end",
-						children: [/* @__PURE__ */ s(u, {
+						children: [/* @__PURE__ */ c(u, {
 							onClick: Q,
 							size: "sm",
 							children: "Cancel"
-						}), /* @__PURE__ */ s(u, {
+						}), /* @__PURE__ */ c(u, {
 							onClick: $,
 							size: "sm",
 							children: "Submit"

package/dist/components/StyleManager/StyleManager.mjs

@@ -1,31 +1,31 @@
 import e from "./ManagerSelector.mjs";
 import t from "../StyleInspector/index.mjs";
-import { get as n } from "@plitzi/plitzi-ui/helpers";
-import { use as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "@plitzi/sdk-shared/elements/ComponentContext";
-import { useBuilderStore as l } from "@plitzi/sdk-shared/store";
+import { use as n, useMemo as r, useState as i } from "react";
+import { useBuilderStore as a } from "@plitzi/sdk-shared/store";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@plitzi/sdk-shared/elements/ComponentContext";
 //#region src/components/StyleManager/StyleManager.tsx
 var u = () => {
-	let { componentDefinitions: u } = r(c), [d, f] = a(void 0), [[p, m]] = l(["schema.flat", "displayMode"]), [h] = l(`style.platform.${m}`), g = i(() => Object.values(p), [p]), _ = i(() => d?.type === "element" ? Object.keys(n(u.current, `${d.componentType}.definition.styleSelectors`, {})) : ["base"], [u, d]), v = i(() => d?.type === "element" ? Object.keys(n(u.current, `${d.componentType}.defaultStyle.subTypes`, {})) : [], [u, d]), y = i(() => {
+	let { componentDefinitions: u } = n(l), [d, f] = i(void 0), [[p, m]] = a(["schema.flat", "displayMode"]), [h] = a(`style.platform.${m}`), g = r(() => Object.values(p), [p]), _ = r(() => d?.type === "element" ? Object.keys(o(u.current, `${d.componentType}.definition.styleSelectors`, {})) : ["base"], [u, d]), v = r(() => d?.type === "element" ? Object.keys(o(u.current, `${d.componentType}.defaultStyle.subTypes`, {})) : [], [u, d]), y = r(() => {
 		if (d) return d.type === "element" && _.length > 1 ? _.reduce((e, t) => ({
 			...e,
 			[t]: d.componentType
 		}), {}) : { base: d.name };
 	}, [d, _]);
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ s("div", {
 		className: "flex h-full grow flex-col overflow-auto",
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: "flex grow overflow-auto",
-			children: [/* @__PURE__ */ o(e, {
+			children: [/* @__PURE__ */ s(e, {
 				displayMode: m,
 				selectors: h,
 				flatList: g,
 				selected: d?.name,
 				onSelect: f
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: "flex grow basis-0 flex-col overflow-auto",
-				children: [d && /* @__PURE__ */ o(t, {
+				children: [d && /* @__PURE__ */ s(t, {
 					mode: "manager",
 					displayMode: m,
 					selectors: h,
@@ -35,7 +35,7 @@ var u = () => {
 					allowStyleSelector: d.type === "element",
 					componentType: d.componentType,
 					value: d.name
-				}), !d && /* @__PURE__ */ o("div", {
+				}), !d && /* @__PURE__ */ s("div", {
 					className: "m-3 rounded-sm border-2 border-dashed border-gray-300 p-3 text-center text-zinc-500 select-none dark:border-zinc-600 dark:text-zinc-400",
 					children: "No selector or element selected. Click on one to select it."
 				})]

package/dist/components/StyleManager/StyleSelectorTag.mjs

@@ -1,51 +1,51 @@
 import e from "../Selector/SelectorItem/index.mjs";
-import t from "clsx";
-import { memo as n, useCallback as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@plitzi/plitzi-ui/Button";
+import { memo as t, useCallback as n } from "react";
+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 = n(({ id: n, label: c = "Selector", active: l = !1, checked: u = !1, elementsCount: d = 0, type: f = "class", onSelect: p, onDelete: m, onToggleCheck: h }) => {
-	let g = r(() => p?.(n), [n, p]), _ = r((e) => {
-		e.stopPropagation(), n && m?.(n);
-	}, [n, m]), v = r(() => h?.(n), [n, h]), y = r((e) => e.stopPropagation(), []);
-	return /* @__PURE__ */ a("div", {
-		className: t("group flex cursor-pointer items-center justify-between gap-2 border-t border-gray-300 p-1 dark:border-zinc-700", {
+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(), []);
+	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,
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ i("div", {
 			className: "flex min-w-0 items-center gap-2",
-			children: [/* @__PURE__ */ i("div", {
+			children: [/* @__PURE__ */ r("div", {
 				className: "flex items-center",
-				children: /* @__PURE__ */ i(s, {
+				children: /* @__PURE__ */ r(s, {
 					size: "xs",
 					checked: u,
 					onChange: v,
 					onClick: y
 				})
-			}), /* @__PURE__ */ i(e, {
+			}), /* @__PURE__ */ r(e, {
 				editable: !1,
 				selector: c,
 				type: f,
 				active: !0,
 				readOnly: !0
 			})]
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ i("div", {
 			className: "flex",
-			children: [/* @__PURE__ */ i("div", {
-				className: t("mr-1", {
+			children: [/* @__PURE__ */ r("div", {
+				className: o("mr-1", {
 					flex: l,
 					"hidden group-hover:flex": !l
 				}),
-				children: /* @__PURE__ */ i(o, {
+				children: /* @__PURE__ */ r(a, {
 					intent: "danger",
 					size: "xs",
 					onClick: _,
-					children: /* @__PURE__ */ i(o.Icon, { icon: "fas fa-trash" })
+					children: /* @__PURE__ */ r(a.Icon, { icon: "fas fa-trash" })
 				})
-			}), d > 0 && /* @__PURE__ */ i("div", {
+			}), 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.mjs

@@ -96,7 +96,7 @@ var r = (e, t) => {
 			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 e of l) (!_.includes(e.name) || c) && y.tree.push({
 					name: e.name,
 					displayMode: t,
 					attributes: e.attributes,
@@ -118,7 +118,7 @@ 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({
+		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({
 			key: e.name,
 			value: r[t],
 			displayMode: e.displayMode

package/dist/helpers/generateStyleSelector.mjs

@@ -1,7 +1,7 @@
 import e from "./processSelector.mjs";
 //#region src/helpers/generateStyleSelector.ts
 var t = (t = "", n = "class", r = {}, i) => {
-	if (!(!t || typeof r != "object")) return {
+	if (t && typeof r == "object") return {
 		name: t,
 		type: n,
 		attributes: r,

package/dist/helpers/processSelectorAttributes.mjs

@@ -32,7 +32,7 @@ var e = (e, t, n = !1) => n ? t : `${e}:${t};`, t = (e) => {
 	let c = {
 		variables: {},
 		value: ""
-	}, l = a.replaceAll(";", "").match(/[a-z-]+\((?:[^()]+|\([^()]*\))*\)|[^\s]+/gi);
+	}, l = a.replace(/\s*;\s*$/, "").match(/[a-z-]+\((?:[^()]+|\([^()]*\))*\)|[^\s]+/gi);
 	if (!o && l && l.length > 1) return l.forEach((n) => {
 		let r = i(e, t, n, !0, s);
 		c.variables = {

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { default as useSpaceFonts } from './useSpaceFonts';
+export { useSpaceFonts };

package/dist/hooks/index.mjs

@@ -0,0 +1,2 @@
+import e from "./useSpaceFonts.mjs";
+export { e as useSpaceFonts };

package/dist/hooks/useSpaceFonts.d.ts

@@ -0,0 +1,10 @@
+import { SpaceFont } from '@plitzi/sdk-shared';
+/**
+ * What this space can name: the families it declared, over the system stacks that are always available.
+ *
+ * Read from the store rather than passed down, because the picker is four components below whoever holds the style
+ * document — the prop that was meant to carry them existed for years and no call site ever filled it, so every
+ * space was offered the same hard-coded eighteen names whatever it had actually installed.
+ */
+declare const useSpaceFonts: () => SpaceFont[];
+export default useSpaceFonts;

package/dist/hooks/useSpaceFonts.mjs

@@ -0,0 +1,10 @@
+import { useMemo as e } from "react";
+import { useCommonStore as t } from "@plitzi/sdk-shared/store";
+import { availableFonts as n } from "@plitzi/sdk-shared/style";
+//#region src/hooks/useSpaceFonts.ts
+var r = [], i = () => {
+	let [i = r] = t("style.fonts");
+	return e(() => n(i), [i]);
+};
+//#endregion
+export { i as default };

package/dist/index.mjs

@@ -1,16 +1,16 @@
-import e, { processSelectors as t } from "./helpers/processSelector.mjs";
-import n from "./StyleMap/index.mjs";
-import { generateCache as r, makeSelector as i, selectorToString as a } from "./StyleHelper.mjs";
-import o from "./helpers/calculateInheriting.mjs";
-import s from "./helpers/generateStyleSelector.mjs";
-import c from "./helpers/processCssTokens.mjs";
-import { cssToSelectors as l, getReadOnlyRangesFromContent as u } from "./helpers/formatCssFromSelector.mjs";
-import { helpers_exports as d } from "./helpers/index.mjs";
-import f from "./components/StyleInspector/index.mjs";
-import { components_exports as p } from "./components/index.mjs";
-import m from "./StyleContext.mjs";
-import h, { StyleActions as g } from "./StyleReducer.mjs";
-import _ from "./BuilderStyleContextProvider.mjs";
-import v from "./SdkStyleContextProvider.mjs";
-import y from "./StyleAdvanceEditor.mjs";
-export { _ as BuilderStyleContextProvider, v as SdkStyleContextProvider, g as StyleActions, y as StyleAdvanceEditor, m as StyleContext, f as StyleInspector, n as StyleMap, h as StyleReducer, o as calculateInheriting, p as components, l as cssToSelectors, r as generateCache, s as generateStyleSelector, u as getReadOnlyRangesFromContent, d as helpers, i as makeSelector, c as processCssTokens, e as processSelector, t as processSelectors, a as selectorToString };
+import e from "./StyleContext.mjs";
+import { generateCache as t, makeSelector as n, selectorToString as r } from "./StyleHelper.mjs";
+import i, { processSelectors as a } from "./helpers/processSelector.mjs";
+import o from "./StyleMap/index.mjs";
+import s, { StyleActions as c } from "./StyleReducer.mjs";
+import l from "./BuilderStyleContextProvider.mjs";
+import u from "./SdkStyleContextProvider.mjs";
+import d from "./StyleAdvanceEditor.mjs";
+import f from "./helpers/calculateInheriting.mjs";
+import p from "./helpers/generateStyleSelector.mjs";
+import m from "./helpers/processCssTokens.mjs";
+import { cssToSelectors as h, getReadOnlyRangesFromContent as g } from "./helpers/formatCssFromSelector.mjs";
+import { helpers_exports as _ } from "./helpers/index.mjs";
+import v from "./components/StyleInspector/index.mjs";
+import { components_exports as y } from "./components/index.mjs";
+export { l as BuilderStyleContextProvider, u as SdkStyleContextProvider, c as StyleActions, d as StyleAdvanceEditor, e as StyleContext, v as StyleInspector, o as StyleMap, s as StyleReducer, f as calculateInheriting, y as components, h as cssToSelectors, t as generateCache, p as generateStyleSelector, g as getReadOnlyRangesFromContent, _ as helpers, n as makeSelector, m as processCssTokens, i as processSelector, a as processSelectors, r as selectorToString };

package/dist/models/SelectorForm/SelectorForm.mjs

@@ -1,7 +1,7 @@
 import { useCallback as e, useMemo as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import i from "@plitzi/plitzi-ui/Button";
-import { capitalize as a } from "@plitzi/plitzi-ui/helpers/lodash/index.js";
+import { capitalize as a } from "@plitzi/plitzi-ui/helpers/lodash";
 import o, { useForm as s, useFormWatch as c } from "@plitzi/plitzi-ui/Form";
 import { z as l } from "zod";
 //#region src/models/SelectorForm/SelectorForm.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-style",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -414,6 +414,10 @@
       "types": "./dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadowItem.d.ts",
       "import": "./dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadowItem.mjs"
     },
+    "./components/StyleInspector/categories/Effects/BoxShadow/helpers": {
+      "types": "./dist/components/StyleInspector/categories/Effects/BoxShadow/helpers.d.ts",
+      "import": "./dist/components/StyleInspector/categories/Effects/BoxShadow/helpers.mjs"
+    },
     "./components/StyleInspector/categories/Effects/BoxShadow/index": {
       "types": "./dist/components/StyleInspector/categories/Effects/BoxShadow/index.d.ts",
       "import": "./dist/components/StyleInspector/categories/Effects/BoxShadow/index.mjs"
@@ -831,6 +835,7 @@
       "import": "./dist/helpers/calculateInheriting.mjs"
     },
     "./helpers/formatCssFromSelector": {
+      "types": "./dist/helpers/formatCssFromSelector.d.ts",
       "import": "./dist/helpers/formatCssFromSelector.mjs"
     },
     "./helpers/generateStyleSelector": {
@@ -861,6 +866,18 @@
       "types": "./dist/helpers/processSelectorVariables.d.ts",
       "import": "./dist/helpers/processSelectorVariables.mjs"
     },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs"
+    },
+    "./hooks/index": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs"
+    },
+    "./hooks/useSpaceFonts": {
+      "types": "./dist/hooks/useSpaceFonts.d.ts",
+      "import": "./dist/hooks/useSpaceFonts.mjs"
+    },
     "./index": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
@@ -891,19 +908,19 @@
     "build:prod": "vite build && node ../sdk-shared/scripts/generate-exports.mjs"
   },
   "dependencies": {
-    "@plitzi/plitzi-ui": "^1.6.19",
-    "@plitzi/sdk-plugins": "0.33.1",
-    "@plitzi/sdk-shared": "0.33.1",
-    "@plitzi/sdk-variables": "0.33.1",
+    "@plitzi/plitzi-ui": "^1.6.21",
+    "@plitzi/sdk-plugins": "0.34.0",
+    "@plitzi/sdk-shared": "0.34.0",
+    "@plitzi/sdk-variables": "0.34.0",
     "clsx": "^2.1.1",
-    "immer": "^11.1.16",
+    "immer": "^11.1.18",
     "prop-types": "^15.8.1",
-    "zod": "^4.4.3"
+    "zod": "^4.6.4"
   },
   "devDependencies": {
     "eslint": "^9.39.5",
     "typescript": "^6.0.3",
-    "vite": "^8.2.1",
-    "vitest": "^4.1.10"
+    "vite": "^8.3.0",
+    "vitest": "^5.0.0"
   }
 }