@plitzi/sdk-style 0.32.25 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @plitzi/sdk-style
 
+## 0.33.0
+
+### Minor Changes
+
+- v0.33.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.33.0
+  - @plitzi/sdk-shared@0.33.0
+  - @plitzi/sdk-variables@0.33.0
+
 ## 0.32.25
 
 ### Patch Changes

package/dist/BuilderStyleContextProvider.mjs

@@ -1,27 +1,26 @@
 import { makeSelector as e } from "./StyleHelper.mjs";
 import t from "./StyleContext.mjs";
 import n, { StyleActions as r } from "./StyleReducer.mjs";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
-import { use as a, useCallback as o, useEffect as s, useMemo as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
-import { useCommonStoreSync as u } from "@plitzi/sdk-shared/store";
-import d from "@plitzi/plitzi-ui/hooks/useReducerWithMiddleware";
-import f from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
-import p from "@plitzi/sdk-shared/network/NetworkContext";
-import { EMPTY_STYLE_SCHEMA as m } from "@plitzi/sdk-shared/style/styleConstants";
+import { use as i, useCallback as a, useEffect as o, useMemo as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { useCommonStoreSync as l } from "@plitzi/sdk-shared/store";
+import u from "@plitzi/plitzi-ui/hooks/useReducerWithMiddleware";
+import d from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
+import f from "@plitzi/sdk-shared/network/NetworkContext";
+import { EMPTY_STYLE_SCHEMA as p } from "@plitzi/sdk-shared/style/styleConstants";
 //#region src/BuilderStyleContextProvider.tsx
-var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v = [] }) => {
-	let { subscriptionManager: y } = a(p), b = c(() => v.map((e) => ({
+var m = ({ children: m, style: h, includeSubscriptions: g = !0, middlewares: _ = [] }) => {
+	let { subscriptionManager: v } = i(f), y = s(() => _.map((e) => ({
 		middleware: e,
 		filterCallback: (e) => !e.fromSubscriptions
-	})), [v]), [x, S] = d(n, g ?? m, b);
-	u("style", x);
-	let C = o((e, t = !1) => S({
+	})), [_]), [b, x] = u(n, h ?? p, y);
+	l("style", b);
+	let S = a((e, t = !1) => x({
 		type: r.STYLE_UPDATE,
 		style: e,
 		fromSubscriptions: t
-	}), [S]), w = o((t, n, i, a, o, s, c = !1) => {
-		n ||= e(i), S({
+	}), [x]), C = a((t, n, i, a, o, s, c = !1) => {
+		n ||= e(i), x({
 			type: r.STYLE_ADD_SELECTOR,
 			displayMode: t,
 			selector: n,
@@ -31,7 +30,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			params: s,
 			fromSubscriptions: c
 		});
-	}, [S]), T = o((e, t, n, i, a, o = !1) => S({
+	}, [x]), w = a((e, t, n, i, a, o = !1) => x({
 		type: r.STYLE_UPDATE_SELECTOR,
 		displayMode: e,
 		selector: t,
@@ -39,18 +38,18 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		value: i,
 		params: a,
 		fromSubscriptions: o
-	}), [S]), E = o((e, t, n = !1) => S({
+	}), [x]), T = a((e, t, n = !1) => x({
 		type: r.STYLE_REMOVE_SELECTOR,
 		displayMode: e,
 		selector: t,
 		fromSubscriptions: n
-	}), [S]), D = o((e, t, n = !1) => S({
+	}), [x]), E = a((e, t, n = !1) => x({
 		type: r.STYLE_REMOVE_SELECTORS,
 		displayMode: e,
 		selectors: t,
 		fromSubscriptions: n
-	}), [S]), O = o((e, t, n, i, a, o = !1) => {
-		S({
+	}), [x]), D = a((e, t, n, i, a, o = !1) => {
+		x({
 			type: r.STYLE_ADD_SELECTOR_VARIABLE,
 			displayMode: e,
 			selector: t,
@@ -59,8 +58,8 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [S]), k = o((e, t, n, i, a, o = !1) => {
-		S({
+	}, [x]), O = a((e, t, n, i, a, o = !1) => {
+		x({
 			type: r.STYLE_UPDATE_SELECTOR_VARIABLE,
 			displayMode: e,
 			selector: t,
@@ -69,8 +68,8 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [S]), A = o((e, t, n, i, a = !1) => {
-		S({
+	}, [x]), k = a((e, t, n, i, a = !1) => {
+		x({
 			type: r.STYLE_REMOVE_SELECTOR_VARIABLE,
 			displayMode: e,
 			selector: t,
@@ -78,101 +77,54 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			name: i,
 			fromSubscriptions: a
 		});
-	}, [S]), j = o((e, t, n, i = !1) => S({
+	}, [x]), A = a((e, t, n, i = !1) => x({
 		type: r.STYLE_ADD_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [S]), M = o((e, t, n, i = !1) => S({
+	}), [x]), j = a((e, t, n, i = !1) => x({
 		type: r.STYLE_UPDATE_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [S]), N = o((e, t, n = !1) => S({
+	}), [x]), M = a((e, t, n = !1) => x({
 		type: r.STYLE_REMOVE_VARIABLE,
 		category: e,
 		name: t,
 		fromSubscriptions: n
-	}), [S]), P = o((e, t = !1) => S({
+	}), [x]), N = a((e, t = !1) => x({
 		type: r.STYLE_ADD_TEMPLATE,
 		platform: e,
 		fromSubscriptions: t
-	}), [S]), F = o((e, t, n = !1) => {
-		S({
+	}), [x]), P = a((e, t, n = !1) => {
+		x({
 			type: r.STYLE_UPDATE_SETTINGS,
 			path: e,
 			value: t,
 			fromSubscriptions: n
 		});
-	}, [S]);
-	s(() => (_ && (y.subscribe("StyleUpdated", {}, (e) => {
-		if (!e.data || e.error) return;
-		let t = i(e, "data.StyleUpdated", {});
-		C(t, !0);
-	}), y.subscribe("StyleAddSelector", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selector: n, type: r, path: a, style: o, params: s } = i(e, "data.StyleAddSelector", {});
-		w(t, n, r, a, o, s, !0);
-	}), y.subscribe("StyleUpdateSelector", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selector: n, path: r, style: a, params: o } = i(e, "data.StyleUpdateSelector", {});
-		T(t, n, r, a, o, !0);
-	}), y.subscribe("StyleRemoveSelector", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selector: n } = i(e, "data.StyleRemoveSelector", {});
-		E(t, n, !0);
-	}), y.subscribe("StyleRemoveSelectors", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selectors: n } = i(e, "data.StyleRemoveSelectors", {});
-		D(t, n, !0);
-	}), y.subscribe("StyleAddSelectorVariable", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selector: n, category: r, name: a, value: o } = i(e, "data.StyleAddSelectorVariable", {});
-		O(t, n, r, a, o, !0);
-	}), y.subscribe("StyleUpdateSelectorVariable", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selector: n, category: r, name: a, value: o } = i(e, "data.StyleUpdateSelectorVariable", {});
-		k(t, n, r, a, o, !0);
-	}), y.subscribe("StyleRemoveSelectorVariable", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { displayMode: t, selector: n, category: r, name: a } = i(e, "data.StyleRemoveSelectorVariable", {});
-		A(t, n, r, a, !0);
-	}), y.subscribe("StyleAddVariable", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { category: t, name: n, value: r } = i(e, "data.StyleAddVariable", {});
-		j(t, n, r, !0);
-	}), y.subscribe("StyleUpdateVariable", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { category: t, name: n, value: r } = i(e, "data.StyleUpdateVariable", {});
-		M(t, n, r, !0);
-	}), y.subscribe("StyleRemoveVariable", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { category: t, name: n } = i(e, "data.StyleRemoveVariable", {});
-		N(t, n, !0);
-	}), y.subscribe("StyleUpdateSettings", {}, (e) => {
-		if (!e.data || e.error) return;
-		let { path: t, value: n } = i(e, "data.StyleUpdateSettings", {});
-		F(t, n, !0);
-	})), () => {
-		_ && y.unsubscribe([
-			"StyleUpdated",
-			"StyleAddSelector",
-			"StyleUpdateSelector",
-			"StyleRemoveSelector",
-			"StyleRemoveSelectors",
-			"StyleAddSelectorVariable",
-			"StyleUpdateSelectorVariable",
-			"StyleRemoveSelectorVariable",
-			"StyleAddVariable",
-			"StyleUpdateVariable",
-			"StyleRemoveVariable",
-			"StyleUpdateSettings"
-		]);
-	}), [
-		y,
-		_,
+	}, [x]);
+	o(() => {
+		if (g) return v.subscribe("STYLE_UPDATED", (e) => S(e, !0)), v.subscribe("STYLE_ADD_SELECTOR", ({ displayMode: e, selector: t, type: n, path: r, style: i, params: a }) => C(e, t, n, r, i, a, !0)), v.subscribe("STYLE_UPDATE_SELECTOR", ({ displayMode: e, selector: t, path: n, style: r, params: i }) => w(e, t, n, r, i, !0)), v.subscribe("STYLE_REMOVE_SELECTOR", ({ displayMode: e, selector: t }) => T(e, t, !0)), v.subscribe("STYLE_REMOVE_SELECTORS", ({ displayMode: e, selectors: t }) => E(e, t, !0)), v.subscribe("STYLE_ADD_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r, value: i }) => D(e, t, n, r, i, !0)), v.subscribe("STYLE_UPDATE_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r, value: i }) => O(e, t, n, r, i, !0)), v.subscribe("STYLE_REMOVE_SELECTOR_VARIABLE", ({ displayMode: e, selector: t, category: n, name: r }) => k(e, t, n, r, !0)), v.subscribe("STYLE_ADD_VARIABLE", ({ category: e, name: t, value: n }) => A(e, t, n, !0)), v.subscribe("STYLE_UPDATE_VARIABLE", ({ category: e, name: t, value: n }) => j(e, t, n, !0)), v.subscribe("STYLE_REMOVE_VARIABLE", ({ category: e, name: t }) => M(e, t, !0)), v.subscribe("STYLE_UPDATE_SETTINGS", ({ path: e, value: t }) => P(e, t, !0)), () => v.unsubscribe([
+			"STYLE_UPDATED",
+			"STYLE_ADD_SELECTOR",
+			"STYLE_UPDATE_SELECTOR",
+			"STYLE_REMOVE_SELECTOR",
+			"STYLE_REMOVE_SELECTORS",
+			"STYLE_ADD_SELECTOR_VARIABLE",
+			"STYLE_UPDATE_SELECTOR_VARIABLE",
+			"STYLE_REMOVE_SELECTOR_VARIABLE",
+			"STYLE_ADD_VARIABLE",
+			"STYLE_UPDATE_VARIABLE",
+			"STYLE_REMOVE_VARIABLE",
+			"STYLE_UPDATE_SETTINGS"
+		], !0);
+	}, [
+		v,
+		g,
+		S,
 		C,
 		w,
 		T,
@@ -183,24 +135,24 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		A,
 		j,
 		M,
-		N,
-		F
+		P
 	]);
-	let I = c(() => ({
-		styleUpdate: C,
-		styleAddSelector: w,
-		styleUpdateSelector: T,
-		styleRemoveSelector: E,
-		styleRemoveSelectors: D,
-		styleAddSelectorVariable: O,
-		styleUpdateSelectorVariable: k,
-		styleRemoveSelectorVariable: A,
-		styleAddVariable: j,
-		styleUpdateVariable: M,
-		styleRemoveVariable: N,
-		styleAddTemplate: P,
-		styleUpdateSettings: F
+	let F = s(() => ({
+		styleUpdate: S,
+		styleAddSelector: C,
+		styleUpdateSelector: w,
+		styleRemoveSelector: T,
+		styleRemoveSelectors: E,
+		styleAddSelectorVariable: D,
+		styleUpdateSelectorVariable: O,
+		styleRemoveSelectorVariable: k,
+		styleAddVariable: A,
+		styleUpdateVariable: j,
+		styleRemoveVariable: M,
+		styleAddTemplate: N,
+		styleUpdateSettings: P
 	}), [
+		S,
 		C,
 		w,
 		T,
@@ -212,13 +164,12 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		j,
 		M,
 		N,
-		P,
-		F
+		P
 	]);
-	return f("main", I), /* @__PURE__ */ l(t, {
-		value: I,
-		children: h
+	return d("main", F), /* @__PURE__ */ c(t, {
+		value: F,
+		children: m
 	});
 };
 //#endregion
-export { h as default };
+export { m as default };

package/dist/StyleReducer.d.ts

@@ -19,7 +19,7 @@ export type StyleReducerActionsBase = {
 };
 export type StyleReducerActions = StyleReducerActionsBase & ({
     type: 'STYLE_UPDATE';
-    style: Style;
+    style: Partial<Style>;
 } | {
     type: 'STYLE_ADD_SELECTOR';
     displayMode: DisplayMode;

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

@@ -59,13 +59,18 @@ var a = ({ outlineWidth: a, outlineStyle: o, outlineColor: s, outlineOffset: c,
 	label: "",
 	children: [/* @__PURE__ */ r(e, {
 		keys: ["outline-width"],
-		label: "Width",
+		label: "Outline Width",
 		value: a,
 		onChange: l?.("outline-width"),
-		type: "metric"
+		type: "metric",
+		allowedWords: [
+			"thin",
+			"medium",
+			"thick"
+		]
 	}), /* @__PURE__ */ r(e, {
 		keys: ["outline-offset"],
-		label: "Offset",
+		label: "Outline Offset",
 		value: c,
 		onChange: l?.("outline-offset"),
 		type: "metric"

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

@@ -16,21 +16,30 @@ var l = ({ textTransform: l, direction: u, onChange: d }) => {
 		},
 		{
 			value: "uppercase",
-			icon: /* @__PURE__ */ i("span", { children: "AA" }),
+			icon: /* @__PURE__ */ i("span", {
+				className: "text-xs",
+				children: "AA"
+			}),
 			size: "custom",
 			description: "All Caps",
 			active: l === "uppercase"
 		},
 		{
 			value: "capitalize",
-			icon: /* @__PURE__ */ i("span", { children: "Aa" }),
+			icon: /* @__PURE__ */ i("span", {
+				className: "text-xs",
+				children: "Aa"
+			}),
 			size: "custom",
 			description: "Capitalize Every Word",
 			active: l === "capitalize"
 		},
 		{
 			value: "lowercase",
-			icon: /* @__PURE__ */ i("span", { children: "aa" }),
+			icon: /* @__PURE__ */ i("span", {
+				className: "text-xs",
+				children: "aa"
+			}),
 			size: "custom",
 			description: "Lower Case",
 			active: l === "lowercase"

package/dist/components/StyleManager/ManagerSelector.mjs

@@ -18,18 +18,20 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 			return n === r ? e.name.localeCompare(t.name) : r - n;
 		});
 	}, [C, w]), M = i((e) => T(e), [T]), N = i((e, t) => {
-		if (t) if (t.mode === "default") {
-			let { name: e } = t;
-			O("styleAddSelector", n, 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, {
-				styleSelector: void 0,
-				componentType: e
-			});
+		if (t) {
+			if (t.mode === "default") {
+				let { name: e } = t;
+				O("styleAddSelector", n, 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, {
+					styleSelector: void 0,
+					componentType: e
+				});
+			}
 		}
 	}, [O, n]), [P, F, I, L] = h({
 		id: "add-selector",

package/dist/helpers/processSelector.mjs

@@ -4,10 +4,12 @@ import n from "./processSelectorVariables.mjs";
 //#region src/helpers/processSelector.ts
 var r = 2, i = (e = r) => " ".repeat(e), a = (e, t, n) => `${n || !t.length ? e : `${e}\n`}${t.join(n ? "" : "\n")}`, o = (e, t, n = !0, a = r) => {
 	let o = [], s = i(a), c = i(a + r);
-	for (let r of ["light", "dark"]) if (t[r].length) if (n) o.push(`@media(prefers-color-scheme:${r}){${e}{${t[r].join("")}}}`);
-	else {
-		let n = t[r].map((e) => `${c}${e}`).join("\n").replaceAll(":", ": ");
-		o.push(`\n@media(prefers-color-scheme: ${r}) {\n${s}${e} {\n${n}\n${s}}\n}`);
+	for (let r of ["light", "dark"]) if (t[r].length) {
+		if (n) o.push(`@media(prefers-color-scheme:${r}){${e}{${t[r].join("")}}}`);
+		else {
+			let n = t[r].map((e) => `${c}${e}`).join("\n").replaceAll(":", ": ");
+			o.push(`\n@media(prefers-color-scheme: ${r}) {\n${s}${e} {\n${n}\n${s}}\n}`);
+		}
 	}
 	return o;
 }, s = (e, t, n, a, o = !0, s = r) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-style",
-  "version": "0.32.25",
+  "version": "0.33.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -891,19 +891,19 @@
     "build:prod": "vite build && node ../sdk-shared/scripts/generate-exports.mjs"
   },
   "dependencies": {
-    "@plitzi/plitzi-ui": "^1.6.18",
-    "@plitzi/sdk-plugins": "0.32.25",
-    "@plitzi/sdk-shared": "0.32.25",
-    "@plitzi/sdk-variables": "0.32.25",
+    "@plitzi/plitzi-ui": "^1.6.19",
+    "@plitzi/sdk-plugins": "0.33.0",
+    "@plitzi/sdk-shared": "0.33.0",
+    "@plitzi/sdk-variables": "0.33.0",
     "clsx": "^2.1.1",
-    "immer": "^11.1.15",
+    "immer": "^11.1.16",
     "prop-types": "^15.8.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "eslint": "^9.39.5",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0",
+    "vite": "^8.2.1",
     "vitest": "^4.1.10"
   }
 }