@plitzi/sdk-style 0.32.4 → 0.32.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @plitzi/sdk-style
 
+## 0.32.6
+
+### Patch Changes
+
+- v0.32.6
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.6
+  - @plitzi/sdk-shared@0.32.6
+  - @plitzi/sdk-variables@0.32.6
+
+## 0.32.5
+
+### Patch Changes
+
+- v0.32.4
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.5
+  - @plitzi/sdk-shared@0.32.5
+  - @plitzi/sdk-variables@0.32.5
+
 ## 0.32.4
 
 ### Patch Changes

package/dist/BuilderStyleContextProvider.mjs

@@ -44,7 +44,12 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		displayMode: e,
 		selector: t,
 		fromSubscriptions: n
-	}), [S]), D = o((e, t, n, i, a, o = !1) => {
+	}), [S]), D = o((e, t, n = !1) => S({
+		type: r.STYLE_REMOVE_SELECTORS,
+		displayMode: e,
+		selectors: t,
+		fromSubscriptions: n
+	}), [S]), O = o((e, t, n, i, a, o = !1) => {
 		S({
 			type: r.STYLE_ADD_SELECTOR_VARIABLE,
 			displayMode: e,
@@ -54,7 +59,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [S]), O = o((e, t, n, i, a, o = !1) => {
+	}, [S]), k = o((e, t, n, i, a, o = !1) => {
 		S({
 			type: r.STYLE_UPDATE_SELECTOR_VARIABLE,
 			displayMode: e,
@@ -64,7 +69,7 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			value: a,
 			fromSubscriptions: o
 		});
-	}, [S]), k = o((e, t, n, i, a = !1) => {
+	}, [S]), A = o((e, t, n, i, a = !1) => {
 		S({
 			type: r.STYLE_REMOVE_SELECTOR_VARIABLE,
 			displayMode: e,
@@ -73,28 +78,28 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 			name: i,
 			fromSubscriptions: a
 		});
-	}, [S]), A = o((e, t, n, i = !1) => S({
+	}, [S]), j = o((e, t, n, i = !1) => S({
 		type: r.STYLE_ADD_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [S]), j = o((e, t, n, i = !1) => S({
+	}), [S]), M = o((e, t, n, i = !1) => S({
 		type: r.STYLE_UPDATE_VARIABLE,
 		category: e,
 		name: t,
 		value: n,
 		fromSubscriptions: i
-	}), [S]), M = o((e, t, n = !1) => S({
+	}), [S]), N = o((e, t, n = !1) => S({
 		type: r.STYLE_REMOVE_VARIABLE,
 		category: e,
 		name: t,
 		fromSubscriptions: n
-	}), [S]), N = o((e, t = !1) => S({
+	}), [S]), P = o((e, t = !1) => S({
 		type: r.STYLE_ADD_TEMPLATE,
 		platform: e,
 		fromSubscriptions: t
-	}), [S]), P = o((e, t, n = !1) => {
+	}), [S]), F = o((e, t, n = !1) => {
 		S({
 			type: r.STYLE_UPDATE_SETTINGS,
 			path: e,
@@ -118,40 +123,45 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		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", {});
-		D(t, n, r, a, o, !0);
+		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", {});
-		O(t, n, r, a, o, !0);
+		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", {});
-		k(t, n, r, a, !0);
+		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", {});
-		A(t, n, r, !0);
+		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", {});
-		j(t, n, r, !0);
+		M(t, n, r, !0);
 	}), y.subscribe("StyleRemoveVariable", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { category: t, name: n } = i(e, "data.StyleRemoveVariable", {});
-		M(t, n, !0);
+		N(t, n, !0);
 	}), y.subscribe("StyleUpdateSettings", {}, (e) => {
 		if (!e.data || e.error) return;
 		let { path: t, value: n } = i(e, "data.StyleUpdateSettings", {});
-		P(t, n, !0);
+		F(t, n, !0);
 	})), () => {
 		_ && y.unsubscribe([
 			"StyleUpdated",
 			"StyleAddSelector",
 			"StyleUpdateSelector",
 			"StyleRemoveSelector",
+			"StyleRemoveSelectors",
 			"StyleAddSelectorVariable",
 			"StyleUpdateSelectorVariable",
 			"StyleRemoveSelectorVariable",
@@ -173,21 +183,23 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		A,
 		j,
 		M,
-		P
+		N,
+		F
 	]);
-	let F = c(() => ({
+	let I = c(() => ({
 		styleUpdate: C,
 		styleAddSelector: w,
 		styleUpdateSelector: T,
 		styleRemoveSelector: E,
-		styleAddSelectorVariable: D,
-		styleUpdateSelectorVariable: O,
-		styleRemoveSelectorVariable: k,
-		styleAddVariable: A,
-		styleUpdateVariable: j,
-		styleRemoveVariable: M,
-		styleAddTemplate: N,
-		styleUpdateSettings: P
+		styleRemoveSelectors: D,
+		styleAddSelectorVariable: O,
+		styleUpdateSelectorVariable: k,
+		styleRemoveSelectorVariable: A,
+		styleAddVariable: j,
+		styleUpdateVariable: M,
+		styleRemoveVariable: N,
+		styleAddTemplate: P,
+		styleUpdateSettings: F
 	}), [
 		C,
 		w,
@@ -200,10 +212,11 @@ var h = ({ children: h, style: g, includeSubscriptions: _ = !0, middlewares: v =
 		j,
 		M,
 		N,
-		P
+		P,
+		F
 	]);
-	return f("main", F), /* @__PURE__ */ l(t, {
-		value: F,
+	return f("main", I), /* @__PURE__ */ l(t, {
+		value: I,
 		children: h
 	});
 };

package/dist/StyleReducer.d.ts

@@ -4,6 +4,7 @@ export declare const StyleActions: {
     readonly STYLE_ADD_SELECTOR: "STYLE_ADD_SELECTOR";
     readonly STYLE_UPDATE_SELECTOR: "STYLE_UPDATE_SELECTOR";
     readonly STYLE_REMOVE_SELECTOR: "STYLE_REMOVE_SELECTOR";
+    readonly STYLE_REMOVE_SELECTORS: "STYLE_REMOVE_SELECTORS";
     readonly STYLE_ADD_SELECTOR_VARIABLE: "STYLE_ADD_SELECTOR_VARIABLE";
     readonly STYLE_UPDATE_SELECTOR_VARIABLE: "STYLE_UPDATE_SELECTOR_VARIABLE";
     readonly STYLE_REMOVE_SELECTOR_VARIABLE: "STYLE_REMOVE_SELECTOR_VARIABLE";
@@ -48,6 +49,10 @@ export type StyleReducerActions = StyleReducerActionsBase & ({
     type: 'STYLE_REMOVE_SELECTOR';
     displayMode?: DisplayMode;
     selector: string;
+} | {
+    type: 'STYLE_REMOVE_SELECTORS';
+    displayMode?: DisplayMode;
+    selectors: string[];
 } | {
     type: 'STYLE_ADD_SELECTOR_VARIABLE' | 'STYLE_UPDATE_SELECTOR_VARIABLE';
     displayMode: DisplayMode;

package/dist/StyleReducer.mjs

@@ -8,6 +8,7 @@ var a = {
 	STYLE_ADD_SELECTOR: "STYLE_ADD_SELECTOR",
 	STYLE_UPDATE_SELECTOR: "STYLE_UPDATE_SELECTOR",
 	STYLE_REMOVE_SELECTOR: "STYLE_REMOVE_SELECTOR",
+	STYLE_REMOVE_SELECTORS: "STYLE_REMOVE_SELECTORS",
 	STYLE_ADD_SELECTOR_VARIABLE: "STYLE_ADD_SELECTOR_VARIABLE",
 	STYLE_UPDATE_SELECTOR_VARIABLE: "STYLE_UPDATE_SELECTOR_VARIABLE",
 	STYLE_REMOVE_SELECTOR_VARIABLE: "STYLE_REMOVE_SELECTOR_VARIABLE",
@@ -40,6 +41,12 @@ var a = {
 				e.removeSelector(i, n, a) && r(i, "cache", t(i));
 			});
 		}
+		case a.STYLE_REMOVE_SELECTORS: {
+			let { displayMode: n, selectors: a } = s;
+			return i(o, (i) => {
+				a.reduce((t, r) => e.removeSelector(i, n, r) || t, !1) && r(i, "cache", t(i));
+			});
+		}
 		case a.STYLE_ADD_SELECTOR_VARIABLE: {
 			let { displayMode: n, selector: a, category: c, name: l, value: u } = s;
 			return i(o, (i) => {

package/dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadow.mjs

@@ -25,7 +25,7 @@ var s = ({ value: s = "", onChange: c }) => {
 			onClick: p
 		})]
 	}), u.length > 0 && /* @__PURE__ */ i("div", {
-		className: "flex flex-col",
+		className: "flex flex-col gap-2",
 		children: u.map((e, n) => /* @__PURE__ */ i(t, {
 			value: e.trim(),
 			onChange: f(n),

package/dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadowItem.mjs

@@ -51,6 +51,7 @@ var l = ({ value: l = "1px 1px 3px 1px black", onChange: u, onRemove: d }) => {
 	return /* @__PURE__ */ o(s, {
 		className: "w-full",
 		closeOnClick: !1,
+		containerTopOffset: 5,
 		children: [/* @__PURE__ */ o(s.Trigger, {
 			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
 			children: [/* @__PURE__ */ o("div", {

package/dist/components/StyleInspector/categories/Effects/Filters/Filter.mjs

@@ -25,7 +25,7 @@ var s = ({ value: s, onChange: c }) => {
 			onClick: f
 		})]
 	}), l.length > 0 && /* @__PURE__ */ i("div", {
-		className: "flex flex-col",
+		className: "flex flex-col gap-2",
 		children: l.map((e, n) => /* @__PURE__ */ i(t, {
 			value: e,
 			onChange: d(n),

package/dist/components/StyleInspector/categories/Effects/Filters/FilterItem.mjs

@@ -35,6 +35,7 @@ var l = ({ value: l = "blur(5px)", onRemove: u, onChange: d }) => {
 	return /* @__PURE__ */ o(s, {
 		className: "w-full",
 		closeOnClick: !1,
+		containerTopOffset: 5,
 		children: [/* @__PURE__ */ o(s.Trigger, {
 			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
 			children: [/* @__PURE__ */ a("div", {

package/dist/components/StyleInspector/categories/Effects/Transform/Transform.mjs

@@ -1,37 +1,36 @@
 import e from "../../../components/InspectorLabel/index.mjs";
-import t from "./TransformItem.mjs";
-import { useCallback as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@plitzi/plitzi-ui/Icon";
+import { DEFAULT_FUNCTION as t, createFunctionValue as n, parseTransforms as r, serializeTransforms as i } from "./transformFunctions.mjs";
+import a from "./TransformItem.mjs";
+import { useCallback as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@plitzi/plitzi-ui/Icon";
 //#region src/components/StyleInspector/categories/Effects/Transform/Transform.tsx
-var s = ({ value: s, onChange: c }) => {
-	let l = [];
-	s && s !== "" && (l = s.match(/((translate3d|scale3d|skew)\([0-9a-z-, .%]+\))|(rotateX.*rotateZ\([0-9a-z%]+\))/gim) ?? []);
-	let u = (e) => (t) => {
-		t.stopPropagation(), t.preventDefault(), l.splice(e, 1), l.length > 0 ? c?.(l.join(" ")) : c?.("");
-	}, d = (e) => (t) => {
-		t !== l[e] && (l[e] = t, c?.(l.join(" ")));
-	}, f = n(() => {
-		s ? c?.(`${s} translate3d(0px, 0px, 0px)`) : c?.("translate3d(0px, 0px, 0px)");
-	}, [c, s]);
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+var d = ({ value: d, onChange: f }) => {
+	let p = r(typeof d == "string" ? d : ""), m = o((e) => f?.(e.length > 0 ? i(e) : ""), [f]), h = (e) => (t) => {
+		t.stopPropagation(), t.preventDefault(), m(p.filter((t, n) => n !== e));
+	}, g = (e) => (t) => {
+		m(p.map((n, r) => r === e ? t : n));
+	}, _ = o(() => {
+		m([...p, n(t)]);
+	}, [m, p]);
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("div", {
 		className: "flex justify-between",
-		children: [/* @__PURE__ */ i(e, {
+		children: [/* @__PURE__ */ c(e, {
 			keyValue: ["transform"],
 			children: "2D & 3D Transforms"
-		}), /* @__PURE__ */ i(o, {
+		}), /* @__PURE__ */ c(u, {
 			className: "cursor-pointer",
 			icon: "fas fa-plus",
-			onClick: f
+			onClick: _
 		})]
-	}), l.length > 0 && /* @__PURE__ */ i("div", {
-		className: "flex flex-col",
-		children: l.map((e, n) => /* @__PURE__ */ i(t, {
+	}), p.length > 0 && /* @__PURE__ */ c("div", {
+		className: "flex flex-col gap-2",
+		children: p.map((e, t) => /* @__PURE__ */ c(a, {
 			value: e,
-			onChange: d(n),
-			onRemove: u(n)
-		}, n))
+			onChange: g(t),
+			onRemove: h(t)
+		}, t))
 	})] });
 };
 //#endregion
-export { s as default };
+export { d as default };

package/dist/components/StyleInspector/categories/Effects/Transform/TransformItem.d.ts

@@ -1,7 +1,8 @@
+import { TransformFunctionValue } from './transformFunctions';
 import { MouseEvent } from 'react';
 export type TransformItemProps = {
-    value?: string;
-    onChange?: (value: string) => void;
+    value: TransformFunctionValue;
+    onChange?: (value: TransformFunctionValue) => void;
     onRemove?: (e: MouseEvent) => void;
 };
 declare const TransformItem: ({ value, onRemove, onChange }: TransformItemProps) => import("react").JSX.Element;

package/dist/components/StyleInspector/categories/Effects/Transform/TransformItem.mjs

@@ -1,148 +1,89 @@
 import e from "../../../components/CategoryOption/index.mjs";
-import t from "../../../components/CategorySection/index.mjs";
-import { useCallback as n, useMemo as r, useRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@plitzi/plitzi-ui/ContainerFloating";
-import c from "@plitzi/plitzi-ui/Icon";
+import { TRANSFORM_FUNCTIONS as t, createFunctionValue as n, getFunctionSpec as r, serializeTransform as i, unitsForKind as a } from "./transformFunctions.mjs";
+import { useCallback as o, useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@plitzi/plitzi-ui/ContainerFloating";
+import d from "@plitzi/plitzi-ui/Icon";
 //#region src/components/StyleInspector/categories/Effects/Transform/TransformItem.tsx
-var l = ({ value: l = "translate3d(0px, 0px, 0px)", onRemove: u, onChange: d }) => {
-	let f = l.match(/[a-x0-9-.%]+/gim), { type: p = "translate3d", posX: m = "0px", posY: h = "0px", posZ: g = "0px" } = {};
-	f?.length === 6 ? [, m, p, h, , g] = f : f?.length === 4 ? [p, m, h, g] = f : f?.length === 3 && ([p, m, h] = f);
-	let _ = i({
-		type: p,
-		posX: m,
-		posY: h,
-		posZ: g
+var f = t.reduce((e, t) => {
+	let n = e.find((e) => e.category === t.category);
+	return n ? n.specs.push(t) : e.push({
+		category: t.category,
+		specs: [t]
+	}), e;
+}, []), p = ({ value: t, onRemove: p, onChange: m }) => {
+	let h = r(t.name), g = s(() => h ? h.args : t.args.map((e, t) => ({
+		label: `#${t + 1}`,
+		kind: "length",
+		default: "0px"
+	})), [h, t.args]), _ = s(() => g.map((e, n) => t.args[n] ?? e.default), [g, t.args]), v = o((e) => m?.(n(e)), [m]), y = o((e) => (n) => {
+		let r = g.map((r, i) => i === e ? n : t.args[i] ?? r.default);
+		m?.({
+			name: t.name,
+			args: r
+		});
+	}, [
+		g,
+		m,
+		t.args,
+		t.name
+	]), b = i({
+		name: t.name,
+		args: _
 	});
-	_.current = {
-		type: p,
-		posX: m,
-		posY: h,
-		posZ: g
-	};
-	let v = n((e) => (t) => {
-		let n = { ..._.current };
-		n[e] = t;
-		let { type: r } = n, { posX: i, posY: a, posZ: o } = n;
-		e === "type" && _.current.type !== t && (t === "rotate" || t === "skew" ? {posX: i, posY: a, posZ: o} = {
-			posX: "0deg",
-			posY: "0deg",
-			posZ: "0deg"
-		} : t === "scale3d" ? {posX: i, posY: a, posZ: o} = {
-			posX: "1",
-			posY: "1",
-			posZ: "1"
-		} : {posX: i, posY: a, posZ: o} = {
-			posX: "0px",
-			posY: "0px",
-			posZ: "0px"
-		}), r === "rotate" ? d?.(`${r}X(${i}) ${r}Y(${a}) ${r}Z(${o})`) : r === "skew" ? d?.(`${r}(${i}, ${a})`) : d?.(`${r}(${i}, ${a}, ${o})`);
-	}, [d]), y = r(() => [
-		{
-			value: "translate3d",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
-				children: "Move"
-			}),
-			description: "",
-			active: p === "translate3d",
-			size: "custom"
-		},
-		{
-			value: "scale3d",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
-				children: "Scale"
-			}),
-			description: "",
-			active: p === "scale3d",
-			size: "custom"
-		},
-		{
-			value: "rotate",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
-				children: "Rotate"
-			}),
-			description: "",
-			active: p === "rotate",
-			size: "custom"
-		},
-		{
-			value: "skew",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
-				children: "Skew"
-			}),
-			description: "",
-			active: p === "skew",
-			size: "custom"
-		}
-	], [p]), b = r(() => p === "rotate" || p === "skew" ? { units: [{
-		label: "DEG",
-		value: "deg"
-	}] } : p === "scale3d" ? { units: void 0 } : { units: [{
-		label: "PX",
-		value: "px"
-	}] }, [p]);
-	return /* @__PURE__ */ o(s, {
-		className: "w-full",
+	return /* @__PURE__ */ l(u, {
+		className: "w-full min-w-0",
 		closeOnClick: !1,
-		children: [/* @__PURE__ */ o(s.Trigger, {
-			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
-			children: [/* @__PURE__ */ a("div", {
-				className: "flex items-center",
-				children: l
-			}), /* @__PURE__ */ a("div", {
-				className: "flex",
-				children: /* @__PURE__ */ a(c, {
-					size: "xs",
-					icon: "fas fa-trash-alt",
-					onClick: u,
-					intent: "danger",
-					title: "Remove"
-				})
+		containerTopOffset: 5,
+		children: [/* @__PURE__ */ l(u.Trigger, {
+			className: "flex w-full min-w-0 cursor-pointer items-center justify-between gap-1 rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
+			children: [/* @__PURE__ */ c("div", {
+				className: "min-w-0 truncate text-xs",
+				children: b
+			}), /* @__PURE__ */ c(d, {
+				size: "xs",
+				icon: "fas fa-trash-alt",
+				onClick: p,
+				intent: "danger",
+				title: "Remove"
 			})]
-		}), /* @__PURE__ */ a(s.Content, {
-			className: "w-[260px]",
-			children: /* @__PURE__ */ o("div", {
+		}), /* @__PURE__ */ c(u.Content, {
+			className: "w-[240px]",
+			children: /* @__PURE__ */ l("div", {
 				className: "flex w-full flex-col gap-2 p-2",
-				children: [/* @__PURE__ */ a(t, {
-					label: "Type",
-					children: /* @__PURE__ */ a(e, {
-						onChange: v("type"),
-						type: "iconGroup",
-						items: y
-					})
-				}), /* @__PURE__ */ o(t, {
-					label: "Position",
-					children: [
-						/* @__PURE__ */ a(e, {
-							label: "X",
-							value: m,
-							onChange: v("posX"),
-							type: "metric",
-							...b
-						}),
-						/* @__PURE__ */ a(e, {
-							label: "Y",
-							value: m,
-							onChange: v("posY"),
-							type: "metric",
-							...b
-						}),
-						p !== "skew" && /* @__PURE__ */ a(e, {
-							label: "Z",
-							value: m,
-							onChange: v("posZ"),
-							type: "metric",
-							...b
+				children: [/* @__PURE__ */ l(e, {
+					value: t.name,
+					onChange: v,
+					type: "select",
+					children: [f.map((e) => /* @__PURE__ */ c("optgroup", {
+						label: e.category,
+						children: e.specs.map((e) => /* @__PURE__ */ c("option", {
+							value: e.name,
+							children: e.label
+						}, e.name))
+					}, e.category)), !h && /* @__PURE__ */ c("optgroup", {
+						label: "Other",
+						children: /* @__PURE__ */ c("option", {
+							value: t.name,
+							children: t.name
 						})
-					]
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "flex flex-col gap-1.5",
+					children: g.map((t, n) => /* @__PURE__ */ c(e, {
+						label: t.label,
+						value: _[n],
+						onChange: y(n),
+						type: "metric",
+						direction: "row",
+						units: a(t.kind),
+						step: t.kind === "number" ? .1 : 1,
+						min: -Infinity
+					}, `${t.label}-${n}`))
 				})]
 			})
 		})]
 	});
 };
 //#endregion
-export { l as default };
+export { p as default };

package/dist/components/StyleInspector/categories/Effects/Transform/transformFunctions.d.ts

@@ -0,0 +1,27 @@
+export type TransformArgKind = 'length' | 'number' | 'angle';
+export type TransformArgSpec = {
+    label: string;
+    kind: TransformArgKind;
+    default: string;
+};
+export type TransformFunctionSpec = {
+    name: string;
+    label: string;
+    category: string;
+    args: TransformArgSpec[];
+};
+export type TransformFunctionValue = {
+    name: string;
+    args: string[];
+};
+export declare const TRANSFORM_FUNCTIONS: TransformFunctionSpec[];
+export declare const DEFAULT_FUNCTION = "translate3d";
+export declare const unitsForKind: (kind: TransformArgKind) => {
+    label: string;
+    value: string;
+}[];
+export declare const getFunctionSpec: (name: string) => TransformFunctionSpec | undefined;
+export declare const parseTransforms: (value: string) => TransformFunctionValue[];
+export declare const serializeTransform: ({ name, args }: TransformFunctionValue) => string;
+export declare const serializeTransforms: (transforms: TransformFunctionValue[]) => string;
+export declare const createFunctionValue: (name: string) => TransformFunctionValue;

package/dist/components/StyleInspector/categories/Effects/Transform/transformFunctions.mjs

@@ -0,0 +1,191 @@
+//#region src/components/StyleInspector/categories/Effects/Transform/transformFunctions.ts
+var e = (e) => ({
+	label: e,
+	kind: "length",
+	default: "0px"
+}), t = (e) => ({
+	label: e,
+	kind: "number",
+	default: "1"
+}), n = (e) => ({
+	label: e,
+	kind: "angle",
+	default: "0deg"
+}), r = [
+	{
+		name: "translate",
+		label: "Translate 2D",
+		category: "Translate",
+		args: [e("X"), e("Y")]
+	},
+	{
+		name: "translate3d",
+		label: "Translate 3D",
+		category: "Translate",
+		args: [
+			e("X"),
+			e("Y"),
+			e("Z")
+		]
+	},
+	{
+		name: "translateX",
+		label: "Translate X",
+		category: "Translate",
+		args: [e("X")]
+	},
+	{
+		name: "translateY",
+		label: "Translate Y",
+		category: "Translate",
+		args: [e("Y")]
+	},
+	{
+		name: "translateZ",
+		label: "Translate Z",
+		category: "Translate",
+		args: [e("Z")]
+	},
+	{
+		name: "scale",
+		label: "Scale 2D",
+		category: "Scale",
+		args: [t("X"), t("Y")]
+	},
+	{
+		name: "scale3d",
+		label: "Scale 3D",
+		category: "Scale",
+		args: [
+			t("X"),
+			t("Y"),
+			t("Z")
+		]
+	},
+	{
+		name: "scaleX",
+		label: "Scale X",
+		category: "Scale",
+		args: [t("X")]
+	},
+	{
+		name: "scaleY",
+		label: "Scale Y",
+		category: "Scale",
+		args: [t("Y")]
+	},
+	{
+		name: "scaleZ",
+		label: "Scale Z",
+		category: "Scale",
+		args: [t("Z")]
+	},
+	{
+		name: "rotate",
+		label: "Rotate",
+		category: "Rotate",
+		args: [n("Angle")]
+	},
+	{
+		name: "rotateX",
+		label: "Rotate X",
+		category: "Rotate",
+		args: [n("X")]
+	},
+	{
+		name: "rotateY",
+		label: "Rotate Y",
+		category: "Rotate",
+		args: [n("Y")]
+	},
+	{
+		name: "rotateZ",
+		label: "Rotate Z",
+		category: "Rotate",
+		args: [n("Z")]
+	},
+	{
+		name: "skew",
+		label: "Skew 2D",
+		category: "Skew",
+		args: [n("X"), n("Y")]
+	},
+	{
+		name: "skewX",
+		label: "Skew X",
+		category: "Skew",
+		args: [n("X")]
+	},
+	{
+		name: "skewY",
+		label: "Skew Y",
+		category: "Skew",
+		args: [n("Y")]
+	},
+	{
+		name: "perspective",
+		label: "Perspective",
+		category: "Perspective",
+		args: [e("Distance")]
+	}
+], i = "translate3d", a = {
+	length: [
+		{
+			label: "PX",
+			value: "px"
+		},
+		{
+			label: "%",
+			value: "%"
+		},
+		{
+			label: "EM",
+			value: "em"
+		},
+		{
+			label: "REM",
+			value: "rem"
+		},
+		{
+			label: "VW",
+			value: "vw"
+		},
+		{
+			label: "VH",
+			value: "vh"
+		}
+	],
+	angle: [
+		{
+			label: "DEG",
+			value: "deg"
+		},
+		{
+			label: "RAD",
+			value: "rad"
+		},
+		{
+			label: "TURN",
+			value: "turn"
+		}
+	],
+	number: []
+}, o = (e) => a[e], s = new Map(r.map((e) => [e.name.toLowerCase(), e])), c = (e) => s.get(e.toLowerCase()), l = /([a-zA-Z][a-zA-Z0-9]*)\s*\(([^)]*)\)/g, u = (e) => {
+	let t = [];
+	for (let n of e.matchAll(l)) {
+		let [, e, r] = n, i = r.split(",").map((e) => e.trim()).filter((e) => e !== "");
+		t.push({
+			name: e,
+			args: i
+		});
+	}
+	return t;
+}, d = ({ name: e, args: t }) => `${e}(${t.join(", ")})`, f = (e) => e.map(d).join(" "), p = (e) => {
+	let t = c(e);
+	return {
+		name: e,
+		args: t ? t.args.map((e) => e.default) : ["0px"]
+	};
+};
+//#endregion
+export { i as DEFAULT_FUNCTION, r as TRANSFORM_FUNCTIONS, p as createFunctionValue, c as getFunctionSpec, u as parseTransforms, d as serializeTransform, f as serializeTransforms, o as unitsForKind };

package/dist/components/StyleInspector/categories/Effects/Transition/Transition.mjs

@@ -29,7 +29,7 @@ var s = ({ value: s, onChange: c }) => {
 			onClick: f
 		})]
 	}), l.length > 0 && /* @__PURE__ */ i("div", {
-		className: "flex flex-col",
+		className: "flex flex-col gap-2",
 		children: l.map((e, n) => /* @__PURE__ */ i(t, {
 			value: e,
 			onChange: d(n),

package/dist/components/StyleInspector/categories/Effects/Transition/TransitionItem.mjs

@@ -46,6 +46,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 	return j = E in i ? i[E] : E.match(/[0-9.]+/gim), /* @__PURE__ */ u(d, {
 		className: "w-full",
 		closeOnClick: !1,
+		containerTopOffset: 5,
 		children: [/* @__PURE__ */ u(d.Trigger, {
 			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
 			children: [/* @__PURE__ */ l("div", {

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionIconGroup.mjs

@@ -19,6 +19,7 @@ var a = ({ items: a = [], onChange: o }) => {
 			active: t.active,
 			onClick: c(t.value),
 			icon: typeof t.icon == "string" ? t.icon : void 0,
+			title: t.description,
 			children: typeof t.icon != "string" && t.icon
 		}, n))
 	});

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

@@ -10,7 +10,7 @@ var a = ({ element: a }) => {
 		if (!a) return n;
 		let { definition: { bindings: r } } = a;
 		return r?.style && r.style.forEach((r) => {
-			e(o, `${r.source}.${r.fromPath}`) === void 0 || !r.enabled || t(n, r.toPath, e(o, `${r.source}.${r.fromPath}`));
+			e(o, r.source) === void 0 || !r.enabled || t(n, r.to, e(o, r.source));
 		}), n;
 	}, [o, a]);
 };

package/dist/components/StyleManager/ManagerSelector.mjs

@@ -11,56 +11,56 @@ import g from "@plitzi/plitzi-ui/Input";
 import { produce as _ } from "immer";
 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(""), { builderHandler: E } = r(v), { components: D } = r(d), O = a(() => C.filter((e) => !!e.componentType).map((e) => e.componentType), [C]), k = a(() => {
+	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 e = C;
 		return p(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;
 		});
-	}, [C, w]), A = i((e) => T(e), [T]), [j, M, N, P] = h({
+	}, [C, w]), M = i((e) => T(e), [T]), [N, P, F, I] = h({
 		id: "add-selector",
 		onClose: i((e, t) => {
 			if (t) if (t.mode === "default") {
 				let { name: e } = t;
-				E("styleAddSelector", n, e, "class", void 0, void 0, {
+				O("styleAddSelector", n, e, "class", void 0, void 0, {
 					styleSelector: void 0,
 					componentType: void 0
 				});
 			} else {
 				let { componentType: e } = t;
-				E("styleAddSelector", n, e, "element", void 0, void 0, {
+				O("styleAddSelector", n, e, "element", void 0, void 0, {
 					styleSelector: void 0,
 					componentType: e
 				});
 			}
-		}, [E, n])
-	}), F = i((e) => {
+		}, [O, n])
+	}), L = i((e) => {
 		S?.((t) => t?.name === e ? void 0 : C.find((t) => t.name === e));
-	}, [S, C]), I = 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))) : [], []), [L, R, z, B] = h({
+	}, [S, C]), R = 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))) : [], []), [z, B, V, H, , U] = h({
 		id: "delete-selector",
 		onClose: i((e, t, r) => {
-			!t || !r || (y.filter((e) => I(e, r)).forEach((e) => {
-				E("schemaUpdateElement", _(e, (t) => {
-					Object.keys(e.definition.styleSelectors).forEach((e) => {
-						f(t, `definition.styleSelectors.${e}`, "") === r && m(t, `definition.styleSelectors.${e}`, "");
-					});
-				}));
-			}), E("styleRemoveSelector", n, r), S?.(void 0));
+			if (!t || !r || r.length === 0) return;
+			let i = new Set(r), a = y.filter((e) => r.some((t) => R(e, t))).map((e) => _(e, (t) => {
+				Object.keys(e.definition.styleSelectors).forEach((e) => {
+					i.has(f(t, `definition.styleSelectors.${e}`, "")) && m(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);
 		}, [
-			E,
+			O,
 			n,
-			I,
+			R,
 			y,
 			S
 		])
-	}), V = i((e) => z(void 0, e), [z]), H = a(() => k.reduce((e, t) => ({
+	}), W = i((e) => V(void 0, [e]), [V]), G = i((e) => D((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), []), K = i(() => D([]), []), q = i(() => V(void 0, E), [V, E]), J = Array.isArray(U) ? U.length : 0, Y = a(() => j.reduce((e, t) => ({
 		...e,
-		[t.name]: y.filter((e) => I(e, t.name)).length
+		[t.name]: y.filter((e) => R(e, t.name)).length
 	}), {}), [
-		k,
+		j,
 		y,
-		I
-	]), U = i(() => void B(void 0, !1), [B]), W = i(() => void B(void 0, !0), [B]);
+		R
+	]), X = i(() => void H(void 0, !1), [H]), Z = i(() => void H(void 0, !0), [H]);
 	return /* @__PURE__ */ c("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: [
@@ -69,7 +69,7 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 				size: "sm",
 				className: "w-full",
 				iconPlacement: "before",
-				onClick: N,
+				onClick: F,
 				children: [/* @__PURE__ */ s(u.Icon, {
 					icon: "fas fa-tint",
 					size: "md",
@@ -79,51 +79,77 @@ var y = n(({ displayMode: n, flatList: y, selectors: b, selected: x, onSelect: S
 			/* @__PURE__ */ s(g, {
 				placeholder: "Search Selector",
 				value: w,
-				onChange: A,
+				onChange: M,
 				size: "xs"
 			}),
+			E.length > 0 && /* @__PURE__ */ c("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", {
+					className: "text-xs text-zinc-600 dark:text-zinc-300",
+					children: [E.length, " selected"]
+				}), /* @__PURE__ */ c("div", {
+					className: "flex gap-1",
+					children: [/* @__PURE__ */ s(u, {
+						size: "xs",
+						onClick: K,
+						children: "Clear"
+					}), /* @__PURE__ */ c(u, {
+						intent: "danger",
+						size: "xs",
+						iconPlacement: "before",
+						onClick: q,
+						children: [/* @__PURE__ */ s(u.Icon, { icon: "fas fa-trash" }), "Delete"]
+					})]
+				})]
+			}),
 			/* @__PURE__ */ s("div", {
 				className: "flex grow basis-0 flex-col overflow-y-auto",
-				children: k.map((t) => {
+				children: j.map((t) => {
 					let { name: n, type: r } = t;
 					return /* @__PURE__ */ s(e, {
 						id: n,
 						active: n === x,
+						checked: E.includes(n),
 						label: n,
 						type: r,
-						elementsCount: H[n],
-						onSelect: F,
-						onDelete: V
+						elementsCount: Y[n],
+						onSelect: L,
+						onDelete: W,
+						onToggleCheck: G
 					}, n);
 				})
 			}),
 			/* @__PURE__ */ c(l, {
-				id: j,
-				open: M,
-				onClose: P,
+				id: N,
+				open: P,
+				onClose: I,
 				size: "sm",
 				children: [/* @__PURE__ */ s(l.Header, { children: /* @__PURE__ */ s("h4", { children: "Add Selector" }) }), /* @__PURE__ */ s(l.Body, { children: /* @__PURE__ */ s(t, {
-					componentsNotAvailables: O,
-					components: D.current,
-					onSubmit: P,
-					onClose: P
+					componentsNotAvailables: A,
+					components: k.current,
+					onSubmit: I,
+					onClose: I
 				}) })]
 			}),
 			/* @__PURE__ */ c(l, {
-				id: L,
-				open: R,
-				onClose: B,
+				id: z,
+				open: B,
+				onClose: H,
 				children: [
 					/* @__PURE__ */ s(l.Header, { children: /* @__PURE__ */ s("h4", { children: "Remove Selector" }) }),
-					/* @__PURE__ */ s(l.Body, { children: /* @__PURE__ */ s("h4", { children: "Do you want to remove this item ?" }) }),
+					/* @__PURE__ */ c(l.Body, { children: [J > 1 && /* @__PURE__ */ c("h4", { children: [
+						"Do you want to remove these ",
+						J,
+						" items ?"
+					] }), J <= 1 && /* @__PURE__ */ s("h4", { children: "Do you want to remove this item ?" })] }),
 					/* @__PURE__ */ c(l.Footer, {
 						justify: "end",
 						children: [/* @__PURE__ */ s(u, {
-							onClick: U,
+							onClick: X,
 							size: "sm",
 							children: "Cancel"
 						}), /* @__PURE__ */ s(u, {
-							onClick: W,
+							onClick: Z,
 							size: "sm",
 							children: "Submit"
 						})]

package/dist/components/StyleManager/StyleSelectorTag.d.ts

@@ -3,10 +3,12 @@ export type StyleSelectorTagProps = {
     id: string;
     label?: string;
     active?: boolean;
+    checked?: boolean;
     elementsCount?: number;
     type?: TagType;
     onSelect?: (id: string) => void;
     onDelete?: (id: string) => void;
+    onToggleCheck?: (id: string) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ id, label, active, elementsCount, type, onSelect, onDelete }: StyleSelectorTagProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ id, label, active, checked, elementsCount, type, onSelect, onDelete, onToggleCheck }: StyleSelectorTagProps) => import("react").JSX.Element>;
 export default _default;

package/dist/components/StyleManager/StyleSelectorTag.mjs

@@ -3,41 +3,54 @@ 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";
-var s = n(({ id: n, label: s = "Selector", active: c = !1, elementsCount: l = 0, type: u = "class", onSelect: d, onDelete: f }) => {
-	let p = r(() => d?.(n), [n, d]), m = r((e) => {
-		e.stopPropagation(), n && f?.(n);
-	}, [n, f]);
+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", {
-			"hover:bg-gray-100 dark:hover:bg-zinc-700/60": !c,
-			"bg-gray-200 dark:bg-zinc-700": c
+			"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: p,
-		children: [/* @__PURE__ */ i(e, {
-			editable: !1,
-			selector: s,
-			type: u,
-			active: !0,
-			readOnly: !0
+		onClick: g,
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [/* @__PURE__ */ i("div", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ i(s, {
+					size: "xs",
+					checked: u,
+					onChange: v,
+					onClick: y
+				})
+			}), /* @__PURE__ */ i(e, {
+				editable: !1,
+				selector: c,
+				type: f,
+				active: !0,
+				readOnly: !0
+			})]
 		}), /* @__PURE__ */ a("div", {
 			className: "flex",
 			children: [/* @__PURE__ */ i("div", {
 				className: t("mr-1", {
-					flex: c,
-					"hidden group-hover:flex": !c
+					flex: l,
+					"hidden group-hover:flex": !l
 				}),
 				children: /* @__PURE__ */ i(o, {
 					intent: "danger",
 					size: "xs",
-					onClick: m,
+					onClick: _,
 					children: /* @__PURE__ */ i(o.Icon, { icon: "fas fa-trash" })
 				})
-			}), l > 0 && /* @__PURE__ */ i("div", {
+			}), d > 0 && /* @__PURE__ */ i("div", {
 				className: "bg-secondary-400 flex items-center justify-center rounded-sm px-1.5 py-1 text-xs text-white",
-				children: l
+				children: d
 			})]
 		})]
 	});
 });
 //#endregion
-export { s as default };
+export { c as default };

package/dist/helpers/calculateInheriting.mjs

@@ -118,14 +118,11 @@ var r = (e, t) => {
 	let S = {};
 	for (let e of y.tree) {
 		let r = s(e, p, m, h);
-		if (r) {
-			e.isAncestor && (r = t(r, n));
-			for (let t of Object.keys(r)) e.isAncestor && !n.includes(t) || (S[t] || (S[t] = []), S[t].push({
-				key: e.name,
-				value: r[t],
-				displayMode: e.displayMode
-			}));
-		}
+		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
+		});
 	}
 	let C = y.tree.filter((e) => e.isParent).reduce((e, t) => ({
 		...e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-style",
-  "version": "0.32.4",
+  "version": "0.32.6",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -454,6 +454,10 @@
       "types": "./dist/components/StyleInspector/categories/Effects/Transform/index.d.ts",
       "import": "./dist/components/StyleInspector/categories/Effects/Transform/index.mjs"
     },
+    "./components/StyleInspector/categories/Effects/Transform/transformFunctions": {
+      "types": "./dist/components/StyleInspector/categories/Effects/Transform/transformFunctions.d.ts",
+      "import": "./dist/components/StyleInspector/categories/Effects/Transform/transformFunctions.mjs"
+    },
     "./components/StyleInspector/categories/Effects/Transition": {
       "types": "./dist/components/StyleInspector/categories/Effects/Transition/index.d.ts",
       "import": "./dist/components/StyleInspector/categories/Effects/Transition/index.mjs"
@@ -831,19 +835,19 @@
     "build:prod": "vite build && node ../sdk-shared/scripts/generate-exports.mjs"
   },
   "dependencies": {
-    "@plitzi/plitzi-ui": "^1.6.13",
-    "@plitzi/sdk-plugins": "0.32.4",
-    "@plitzi/sdk-shared": "0.32.4",
-    "@plitzi/sdk-variables": "0.32.4",
+    "@plitzi/plitzi-ui": "^1.6.17",
+    "@plitzi/sdk-plugins": "0.32.6",
+    "@plitzi/sdk-shared": "0.32.6",
+    "@plitzi/sdk-variables": "0.32.6",
     "clsx": "^2.1.1",
-    "immer": "^11.1.8",
+    "immer": "^11.1.15",
     "prop-types": "^15.8.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "eslint": "^9.39.4",
+    "eslint": "^9.39.5",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.9"
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
   }
 }