@plitzi/sdk-style 0.33.2 → 0.34.1

package/dist/components/Selector/Selector.mjs

@@ -2,23 +2,23 @@ import { selectorFormatter as e } from "./SelectorHelper.mjs";
 import t from "./SelectorItem/index.mjs";
 import n from "./SelectorSuggestions/index.mjs";
 import r from "../StyleManager/index.mjs";
-import { get as i, omit as a, pick as o } from "@plitzi/plitzi-ui/helpers";
-import s from "clsx";
-import { memo as c, useCallback as l, useMemo as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { memo as i, useCallback as a, useMemo as o, useRef as s, useState as c } from "react";
+import { get as l, omit as u, pick as d } from "@plitzi/plitzi-ui/helpers";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@plitzi/plitzi-ui/Button";
 import h, { useFloating as g } from "@plitzi/plitzi-ui/ContainerFloating";
-import _ from "@plitzi/plitzi-ui/Button";
+import _ from "clsx";
 import { usePopup as v } from "@plitzi/plitzi-ui/Popup";
-var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, componentType: S, disabled: C = !1, onChange: w, onSelectorSelected: T, onAdd: E, onRemove: D }) => {
-	let O = d(null), [k, A] = f(""), [j, M, , N, P] = g({ disabled: C }), { existsPopup: F, addPopup: I } = v("floating"), L = u(() => Object.values(b ?? {}).find((e) => e.type === "element" && e.componentType === S), [S, b]), R = u(() => Object.values(o(b ?? {}, y.split(" "))).map((e) => o(e, ["name", "type"])), [b, y]), z = u(() => Object.values(a(b ?? {}, y.split(" "))), [b, y]), B = l((e) => {
+var y = i(({ className: i = "", value: y = "", selectors: b, selector: x, componentType: S, disabled: C = !1, onChange: w, onSelectorSelected: T, onAdd: E, onRemove: D }) => {
+	let O = s(null), [k, A] = c(""), [j, M, , N, P] = g({ disabled: C }), { existsPopup: F, addPopup: I } = v("floating"), L = o(() => Object.values(b ?? {}).find((e) => e.type === "element" && e.componentType === S), [S, b]), R = o(() => Object.values(d(b ?? {}, y.split(" "))).map((e) => d(e, ["name", "type"])), [b, y]), z = o(() => Object.values(u(b ?? {}, y.split(" "))), [b, y]), B = a((e) => {
 		M(e.target.value.length > 0), A(e.target.value);
-	}, [M]), V = l(() => {
+	}, [M]), V = a(() => {
 		O.current?.focus(), M(k.length > 0);
 	}, [
 		O,
 		k,
 		M
-	]), H = l((e) => T?.(e), [T]), U = l((e) => (t, n = !0) => {
+	]), H = a((e) => T?.(e), [T]), U = a((e) => (t, n = !0) => {
 		let r = [...R.filter((t, n) => n !== e), t].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
 		E?.(t, !1), w?.(r), n && T?.(t);
 	}, [
@@ -26,18 +26,18 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 		E,
 		w,
 		T
-	]), W = l((e) => (t, n) => {
+	]), W = a((e) => (t, n) => {
 		switch (t) {
 			case "remove":
 			case "delete": {
 				let n = R.filter((t, n) => n !== e), r = n.reduce((e, t) => `${e} ${t.name}`, "").trim();
-				x && R[e].name === x.name && T?.(i(n, "0")), w?.(r), t === "delete" && D?.(R[e]);
+				x && R[e].name === x.name && T?.(l(n, "0")), w?.(r), t === "delete" && D?.(R[e]);
 				break;
 			}
 			case "duplicate": {
 				if (!n) break;
 				let t = [...R, n].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
-				E?.(n, !0, i(R, `${e}`)), w?.(t);
+				E?.(n, !0, l(R, `${e}`)), w?.(t);
 				break;
 			}
 		}
@@ -48,7 +48,7 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 		T,
 		E,
 		D
-	]), G = l((t) => {
+	]), G = a((t) => {
 		switch (t.key) {
 			case "Enter": {
 				let { value: n } = t.target;
@@ -79,7 +79,7 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 		w,
 		T,
 		M
-	]), K = l((e) => {
+	]), K = a((e) => {
 		setTimeout(() => A(""), 0), M(!1);
 		let t = [...R, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
 		w?.(t), T?.(e);
@@ -88,7 +88,7 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 		w,
 		T,
 		M
-	]), q = l((e) => {
+	]), q = a((e) => {
 		setTimeout(() => A(""), 0), M(!1);
 		let t = [...R, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
 		w?.(t), E?.(e, !1), T?.(e);
@@ -98,9 +98,9 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 		E,
 		T,
 		M
-	]), J = l((e) => {
-		e.preventDefault(), e.stopPropagation(), F("styleManager") || I("styleManager", /* @__PURE__ */ p(r, {}), {
-			icon: /* @__PURE__ */ p("i", { className: "fas fa-swatchbook text-base" }),
+	]), J = a((e) => {
+		e.preventDefault(), e.stopPropagation(), F("styleManager") || I("styleManager", /* @__PURE__ */ f(r, {}), {
+			icon: /* @__PURE__ */ f("i", { className: "fas fa-swatchbook text-base" }),
 			title: "Style Manager",
 			resizeHandles: ["se"],
 			allowLeftSide: !0,
@@ -108,30 +108,30 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 			placement: "floating",
 			width: 600
 		});
-	}, [I, F]), Y = u(() => ({ width: P?.width }), [P]), X = L ? [L, ...R] : R;
-	return /* @__PURE__ */ m(h, {
+	}, [I, F]), Y = o(() => ({ width: P?.width }), [P]), X = L ? [L, ...R] : R;
+	return /* @__PURE__ */ p(h, {
 		ref: N,
 		className: "w-full",
 		open: j,
-		children: [/* @__PURE__ */ p(h.Trigger, {
+		children: [/* @__PURE__ */ f(h.Trigger, {
 			className: "w-full",
-			children: /* @__PURE__ */ m("div", {
-				className: s("bg-grayviolet-200 relative flex flex-wrap gap-1 rounded-sm p-1 dark:bg-zinc-800", c, {
+			children: /* @__PURE__ */ p("div", {
+				className: _("bg-grayviolet-200 relative flex flex-wrap gap-1 rounded-sm p-1 dark:bg-zinc-800", i, {
 					"pointer-events-none cursor-not-allowed bg-gray-100 dark:bg-zinc-900": C,
 					"cursor-pointer": !C
 				}),
 				onClick: V,
 				onKeyDown: G,
 				children: [
-					/* @__PURE__ */ p(_, {
+					/* @__PURE__ */ f(m, {
 						intent: "secondary",
 						size: "custom",
 						onClick: J,
 						className: "h-7 w-7 rounded-sm bg-white dark:bg-zinc-700 dark:text-zinc-200",
 						title: "Style Manager",
-						children: /* @__PURE__ */ p(_.Icon, { icon: "fas fa-swatchbook" })
+						children: /* @__PURE__ */ f(m.Icon, { icon: "fas fa-swatchbook" })
 					}),
-					X.map((e, n) => /* @__PURE__ */ p(t, {
+					X.map((e, n) => /* @__PURE__ */ f(t, {
 						selector: e.name,
 						type: e.type,
 						editable: e.type !== "element",
@@ -140,7 +140,7 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 						onClick: H,
 						onChange: U(L ? n - 1 : n)
 					}, `${n}_${e.name}`)),
-					/* @__PURE__ */ p("input", {
+					/* @__PURE__ */ f("input", {
 						ref: O,
 						className: "flex min-h-0 w-0 border-none bg-transparent px-1 py-0 text-xs text-inherit outline-hidden focus:min-w-[50px] focus:grow focus:ring-transparent",
 						autoComplete: "off",
@@ -152,9 +152,9 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 					})
 				]
 			})
-		}), /* @__PURE__ */ p(h.Content, {
+		}), /* @__PURE__ */ f(h.Content, {
 			style: Y,
-			children: /* @__PURE__ */ p(n, {
+			children: /* @__PURE__ */ f(n, {
 				selector: k,
 				selectors: z,
 				onSelect: K,

package/dist/components/Selector/SelectorItem/ItemOptions.mjs

@@ -1,49 +1,49 @@
 import { useCallback as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/ContainerFloating";
-import i from "@plitzi/plitzi-ui/Icon";
-import a, { useModal as o } from "@plitzi/plitzi-ui/Modal";
-import { makeId as s } from "@plitzi/sdk-shared/helpers/utils";
+import { makeId as t } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/ContainerFloating";
+import a from "@plitzi/plitzi-ui/Icon";
+import o, { useModal as s } from "@plitzi/plitzi-ui/Modal";
 //#region src/components/Selector/SelectorItem/ItemOptions.tsx
 var c = ({ selector: c = "", type: l = "class", onAction: u }) => {
-	let { showDialog: d } = o(), f = e(() => u?.("duplicate", {
-		name: `${c}-${s(4)}`,
+	let { showDialog: d } = s(), f = e(() => u?.("duplicate", {
+		name: `${c}-${t(4)}`,
 		type: l
 	}), [
 		u,
 		c,
 		l
 	]), p = e(() => u?.("remove"), [u]), m = e(async () => {
-		await d(/* @__PURE__ */ t(a.Header, { children: /* @__PURE__ */ t("h4", { children: "Remove Selector" }) }), /* @__PURE__ */ t(a.Body, { children: /* @__PURE__ */ t("h4", { children: "Do you want to remove this item ?" }) }), void 0, { size: "sm" }, c) && u?.("delete");
+		await d(/* @__PURE__ */ n(o.Header, { children: /* @__PURE__ */ n("h4", { children: "Remove Selector" }) }), /* @__PURE__ */ n(o.Body, { children: /* @__PURE__ */ n("h4", { children: "Do you want to remove this item ?" }) }), void 0, { size: "sm" }, c) && u?.("delete");
 	}, [
 		u,
 		c,
 		d
 	]);
-	return /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t(r.Trigger, { children: /* @__PURE__ */ t(i, {
+	return /* @__PURE__ */ r(i, { children: [/* @__PURE__ */ n(i.Trigger, { children: /* @__PURE__ */ n(a, {
 		icon: "fa-solid fa-ellipsis-vertical",
 		className: "h-4 w-4 !min-w-4"
-	}) }), /* @__PURE__ */ t(r.Content, {
+	}) }), /* @__PURE__ */ n(i.Content, {
 		className: "text-xs text-zinc-700 dark:text-zinc-300",
-		children: /* @__PURE__ */ n("div", {
+		children: /* @__PURE__ */ r("div", {
 			className: "rounded border border-gray-200 bg-gray-50 py-1 dark:border-zinc-700 dark:bg-zinc-800",
-			children: [/* @__PURE__ */ t("div", {
+			children: [/* @__PURE__ */ n("div", {
 				className: "mb-1 px-2 font-bold text-zinc-800 dark:text-zinc-200",
 				children: "Actions"
-			}), /* @__PURE__ */ n("ul", {
+			}), /* @__PURE__ */ r("ul", {
 				className: "flex flex-col gap-1 px-2",
 				children: [
-					/* @__PURE__ */ t("li", {
+					/* @__PURE__ */ n("li", {
 						onClick: f,
 						className: "cursor-pointer rounded-sm px-2 py-1 hover:bg-gray-200 dark:hover:bg-zinc-700",
 						children: "Duplicate"
 					}),
-					/* @__PURE__ */ t("li", {
+					/* @__PURE__ */ n("li", {
 						onClick: p,
 						className: "cursor-pointer rounded-sm px-2 py-1 hover:bg-gray-200 dark:hover:bg-zinc-700",
 						children: "Remove"
 					}),
-					/* @__PURE__ */ t("li", {
+					/* @__PURE__ */ n("li", {
 						onClick: m,
 						className: "cursor-pointer rounded-sm px-2 py-1 text-red-400 hover:bg-gray-200 dark:hover:bg-zinc-700",
 						children: "Delete"

package/dist/components/Selector/SelectorItem/SelectorItem.mjs

@@ -1,12 +1,12 @@
 import { selectorFormatter as e } from "../SelectorHelper.mjs";
 import t from "./ItemOptions.mjs";
-import n from "clsx";
-import { useCallback as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "clsx";
 import o from "@plitzi/plitzi-ui/ContentEditable";
 //#region src/components/Selector/SelectorItem/SelectorItem.tsx
 var s = ({ className: s = "", selector: c = "", type: l = "class", editable: u = !0, active: d = !1, readOnly: f = !1, onClick: p, onChange: m, onAction: h }) => {
-	let g = r((e) => {
+	let g = n((e) => {
 		e.preventDefault(), f || e.stopPropagation(), p?.({
 			name: c,
 			type: l
@@ -16,14 +16,14 @@ var s = ({ className: s = "", selector: c = "", type: l = "class", editable: u =
 		f,
 		c,
 		l
-	]), _ = r((t) => {
+	]), _ = n((t) => {
 		m?.({
 			name: e(t),
 			type: l
 		});
 	}, [l, m]);
-	return /* @__PURE__ */ a("div", {
-		className: n("relative flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 text-white select-none", s, {
+	return /* @__PURE__ */ i("div", {
+		className: a("relative flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 text-white select-none", s, {
 			"bg-primary-400": l === "element" && d,
 			"bg-secondary-400": l !== "element" && d,
 			"bg-gray-500": !d,
@@ -31,15 +31,15 @@ var s = ({ className: s = "", selector: c = "", type: l = "class", editable: u =
 		}),
 		onClick: g,
 		title: `${l}: ${c}`,
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ i("div", {
 			className: "flex min-w-0 grow basis-0 text-xs",
-			children: [u && /* @__PURE__ */ i(o, {
+			children: [u && /* @__PURE__ */ r(o, {
 				className: "inline text-nowrap focus-visible:m-[1px] focus-visible:px-1 focus-visible:outline-1 focus-visible:outline-dashed",
 				value: c,
 				openMode: "doubleClick",
 				onChange: _
 			}), !u && c]
-		}), u && l !== "element" && /* @__PURE__ */ i(t, {
+		}), u && l !== "element" && /* @__PURE__ */ r(t, {
 			selector: c,
 			type: l,
 			onAction: h

package/dist/components/StyleInspector/Inspector.mjs

@@ -15,16 +15,16 @@ 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 { get as _, set as v } from "@plitzi/plitzi-ui/helpers";
-import { use as y, useCallback as b, useMemo as x } from "react";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { produce as w } from "immer";
+import { use as _, useCallback as v, useMemo 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";
 //#region src/components/StyleInspector/Inspector.tsx
 var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleSelector: P = "base", element: F, displayMode: I, mode: L = "element" }) => {
-	let { builderHandler: R } = y(T), [z, B] = E(`builder-state.styleInspector.${L}.collapsedCache`, {}), [V, H] = E(`builder-state.styleInspector.${L}.showAllOptions`, !1), [U, W] = E(`builder-state.styleInspector.${L}.replaceTokens`, !1), G = h({
+	let { builderHandler: R } = _(T), [z, B] = E(`builder-state.styleInspector.${L}.collapsedCache`, {}), [V, H] = E(`builder-state.styleInspector.${L}.showAllOptions`, !1), [U, W] = E(`builder-state.styleInspector.${L}.replaceTokens`, !1), G = h({
 		element: F,
 		componentType: k,
 		componentSubType: A,
@@ -32,10 +32,10 @@ var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, sty
 		styleSelector: P,
 		styleState: M,
 		styleVariant: N
-	}), K = b((e, t) => B((n) => ({
+	}), K = v((e, t) => B((n) => ({
 		...n,
 		[e]: t
-	})), [B]), q = b((e) => H(e.target.checked), [H]), J = b((e) => W(e.target.checked), [W]), Y = b((t, n) => {
+	})), [B]), q = v((e) => H(e.target.checked), [H]), J = v((e) => W(e.target.checked), [W]), Y = v((t, n) => {
 		if (j) {
 			R("styleUpdateSelector", I, j.name, t, n, {
 				componentType: j.type === "element" ? k : void 0,
@@ -52,9 +52,9 @@ var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, sty
 			styleState: M,
 			styleVariant: N
 		}), !F) return;
-		let i = _(F, `definition.styleSelectors.${P}`);
-		R("schemaUpdateElement", w(F, (e) => {
-			i ? v(e, `definition.styleSelectors.${P}`, `${i} ${r}`) : v(e, `definition.styleSelectors.${P}`, r);
+		let i = b(F, `definition.styleSelectors.${P}`);
+		R("schemaUpdateElement", S(F, (e) => {
+			i ? x(e, `definition.styleSelectors.${P}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${P}`, r);
 		}));
 	}, [
 		R,
@@ -65,19 +65,19 @@ var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, sty
 		P,
 		M,
 		N
-	]), X = x(() => {
+	]), X = y(() => {
 		let e = F?.definition.type;
 		return V || L === "manager" || e === "list" || e === "listItem";
 	}, [
 		F?.definition.type,
 		L,
 		V
-	]), Z = x(() => V || L === "manager" || _(G, "parentStyle.display", "block") === "flex", [
+	]), Z = y(() => V || L === "manager" || b(G, "parentStyle.display", "block") === "flex", [
 		G,
 		L,
 		V
-	]), Q = x(() => _(G, "parentStyle.flex-direction", "row") === "column", [G]);
-	return /* @__PURE__ */ S(g, {
+	]), Q = y(() => b(G, "parentStyle.flex-direction", "row") === "column", [G]);
+	return /* @__PURE__ */ C(g, {
 		componentType: k,
 		displayMode: I,
 		styleSelector: P,
@@ -87,90 +87,90 @@ var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, sty
 		element: F,
 		inheritData: G,
 		onChange: Y,
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "flex grow flex-col justify-between",
-			children: [/* @__PURE__ */ C("div", {
+			children: [/* @__PURE__ */ w("div", {
 				className: "flex grow flex-col",
 				children: [
-					X && /* @__PURE__ */ S(o, {
+					X && /* @__PURE__ */ C(o, {
 						replaceTokens: U,
 						isCollapsed: z.list ?? !0,
 						onCollapse: K
 					}),
-					X && /* @__PURE__ */ S(s, {
+					X && /* @__PURE__ */ C(s, {
 						replaceTokens: U,
 						isCollapsed: z.listItem ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(r, {
+					/* @__PURE__ */ C(r, {
 						replaceTokens: U,
 						isCollapsed: z.display ?? !0,
 						onCollapse: K
 					}),
-					Z && /* @__PURE__ */ S(i, {
+					Z && /* @__PURE__ */ C(i, {
 						replaceTokens: U,
 						isCollapsed: z.displayFlexChild ?? !0,
 						isFlexVertical: Q,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(f, {
+					/* @__PURE__ */ C(f, {
 						replaceTokens: U,
 						isCollapsed: z.spacing ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(d, {
+					/* @__PURE__ */ C(d, {
 						replaceTokens: U,
 						isCollapsed: z.size ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(l, {
+					/* @__PURE__ */ C(l, {
 						replaceTokens: U,
 						isCollapsed: z.position ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(p, {
+					/* @__PURE__ */ C(p, {
 						replaceTokens: U,
 						isCollapsed: z.typography ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(t, {
+					/* @__PURE__ */ C(t, {
 						replaceTokens: U,
 						isCollapsed: z.background ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(n, {
+					/* @__PURE__ */ C(n, {
 						replaceTokens: U,
 						isCollapsed: z.border ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(a, {
+					/* @__PURE__ */ C(a, {
 						replaceTokens: U,
 						isCollapsed: z.effects ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(c, {
+					/* @__PURE__ */ C(c, {
 						replaceTokens: U,
 						isCollapsed: z.others ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(m, {
+					/* @__PURE__ */ C(m, {
 						isCollapsed: z.variables ?? !0,
 						onCollapse: K
 					}),
-					/* @__PURE__ */ S(u, {
+					/* @__PURE__ */ C(u, {
 						isCollapsed: z.rawStyle ?? !0,
 						selectors: O,
 						onCollapse: K
 					})
 				]
-			}), /* @__PURE__ */ C("div", {
+			}), /* @__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__ */ S(D, {
+				children: [/* @__PURE__ */ C(D, {
 					size: "xs",
 					label: "Replace Tokens",
 					checked: U,
 					onChange: J
-				}), L === "element" && /* @__PURE__ */ S(D, {
+				}), L === "element" && /* @__PURE__ */ C(D, {
 					size: "xs",
 					label: "Show All Options",
 					checked: V,

package/dist/components/StyleInspector/StyleInspector.mjs

@@ -1,35 +1,35 @@
-import e from "./Inspector.mjs";
-import t from "../Selector/index.mjs";
-import { get as n, pick as r, set as i } from "@plitzi/plitzi-ui/helpers";
-import { clsx as a } from "clsx";
-import { use as o, useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useBuilderStoreSync as p } from "@plitzi/sdk-shared/store";
-import { produce as m } from "immer";
+import e from "../Selector/index.mjs";
+import t from "./Inspector.mjs";
+import { use as n, useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+import { useBuilderStoreSync as s } from "@plitzi/sdk-shared/store";
+import { get as c, pick as l, set as u } from "@plitzi/plitzi-ui/helpers";
+import { produce as d } from "immer";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
 import h from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
 import g from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
 import _ from "@plitzi/plitzi-ui/Select";
 import v from "@plitzi/plitzi-ui/Select2";
 //#region src/components/StyleInspector/StyleInspector.tsx
 var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "element", componentType: w, styleSelectors: T, styleSelectorsAvailables: E, componentSubTypesAvailables: D, allowStyleSelector: O = !0, allowStyleState: k = !0, allowStyleVariant: A = !0, onChange: j, onRemoveVariant: M }) => {
-	let [N, P] = u(void 0), [F, I] = u("base"), [L, R] = u(void 0), [z, B] = u(void 0);
-	p("styleSelector", F, { enabled: C === "element" }), p("styleVariant", L, { enabled: C === "element" }), p("styleState", z, { enabled: C === "element" });
-	let { builderHandler: V } = o(h), H = l(() => n(T, F, ""), [T, F]), U = l(() => Object.values(r(b ?? {}, S ? [S.definition.type, ...H.split(" ")] : H.split(" "))), [
+	let [N, P] = o(void 0), [F, I] = o("base"), [L, R] = o(void 0), [z, B] = o(void 0);
+	s("styleSelector", F, { enabled: C === "element" }), s("styleVariant", L, { enabled: C === "element" }), s("styleState", z, { enabled: C === "element" });
+	let { builderHandler: V } = n(h), H = a(() => c(T, F, ""), [T, F]), U = a(() => Object.values(l(b ?? {}, S ? [S.definition.type, ...H.split(" ")] : H.split(" "))), [
 		b,
 		S,
 		H
-	]), W = l(() => x ? n(b, x) : void 0, [b, x]), G = l(() => Object.keys(W?.attributes[F]?.variants ?? {}).map((e) => ({
+	]), W = a(() => x ? c(b, x) : void 0, [b, x]), G = a(() => Object.keys(W?.attributes[F]?.variants ?? {}).map((e) => ({
 		label: e,
 		value: e
 	})), [W?.attributes, F]);
-	c(() => {
+	i(() => {
 		if (I("base"), C !== "element") return;
-		let e = n(T, "base", "").split(" "), t = e[e.length - 1];
+		let e = c(T, "base", "").split(" "), t = e[e.length - 1];
 		j?.(t || ""), B(void 0), P(void 0);
 	}, [j, T]), g(() => {
 		if (C === "element") {
 			if (x !== S?.definition.type) {
-				let e = n(T, F, "").split(" ");
+				let e = c(T, F, "").split(" ");
 				j?.(e[e.length - 1]);
 			}
 			B(void 0), R(void 0), P(void 0);
@@ -37,15 +37,15 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 	}, [F]), g(() => {
 		B(void 0), R(void 0), P(void 0);
 	}, [x]);
-	let K = s((e, t, r) => {
-		if (t && !r) return;
-		let { name: i, type: a } = e;
-		!t && i !== "" && !b?.[i] ? V("styleAddSelector", y, i, a, void 0, void 0, {
+	let K = r((e, t, n) => {
+		if (t && !n) return;
+		let { name: r, type: i } = e;
+		!t && r !== "" && !b?.[r] ? V("styleAddSelector", y, r, i, void 0, void 0, {
 			styleSelector: F,
-			componentType: a === "element" ? w : void 0
-		}) : t && r && r.name !== i && b?.[r.name] && !b[i] && V("styleAddSelector", y, i, a, void 0, n(b, `${r.name}.attributes`, {}), {
+			componentType: i === "element" ? w : void 0
+		}) : t && n && n.name !== r && b?.[n.name] && !b[r] && V("styleAddSelector", y, r, i, void 0, c(b, `${n.name}.attributes.${F}.default`, {}), {
 			styleSelector: F,
-			componentType: a === "element" ? w : void 0
+			componentType: i === "element" ? w : void 0
 		});
 	}, [
 		V,
@@ -53,27 +53,27 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 		y,
 		b,
 		F
-	]), q = s((e) => {
+	]), q = r((e) => {
 		if (!e || x && x === e.name) {
 			j?.(void 0);
 			return;
 		}
 		j?.(e.name);
-	}, [j, x]), J = s((e) => {
-		S && V("schemaUpdateElement", m(S, (t) => {
-			i(t, `definition.styleSelectors.${F}`, e);
+	}, [j, x]), J = r((e) => {
+		S && V("schemaUpdateElement", d(S, (t) => {
+			u(t, `definition.styleSelectors.${F}`, e);
 		}));
 	}, [
 		S,
 		V,
 		F
-	]), Y = s((e) => {
+	]), Y = r((e) => {
 		V("styleRemoveSelector", y, e.name);
-	}, [V, y]), X = s((e) => P(e), []), Z = s((e) => {
+	}, [V, y]), X = r((e) => P(e), []), Z = r((e) => {
 		I(e);
-	}, []), Q = s((e) => B(e?.value), []), $ = s((e) => {
+	}, []), Q = r((e) => B(e?.value), []), $ = r((e) => {
 		R(e?.value);
-	}, []), ee = s((e) => {
+	}, []), ee = r((e) => {
 		M?.(e.value), z && B(void 0), e.value === L && R(void 0), V("styleUpdateSelector", y, W?.name, void 0, void 0, {
 			styleSelector: F,
 			styleVariant: e.value,
@@ -90,11 +90,11 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 		z,
 		L
 	]), te = O && (A || k || !!E?.length || !!D?.length);
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ p("div", {
 		className: "flex w-full grow flex-col gap-2",
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: "flex w-full flex-col gap-2 px-1",
-			children: [C === "element" && /* @__PURE__ */ d(t, {
+			children: [C === "element" && /* @__PURE__ */ f(e, {
 				className: "min-h-0 w-full",
 				value: H,
 				selectors: b,
@@ -104,32 +104,32 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 				onChange: J,
 				onRemove: Y,
 				onSelectorSelected: q
-			}), te && /* @__PURE__ */ f("div", {
-				className: a("flex w-full items-center gap-2", { "mt-2": C === "manager" }),
+			}), te && /* @__PURE__ */ p("div", {
+				className: m("flex w-full items-center gap-2", { "mt-2": C === "manager" }),
 				children: [
-					!!D?.length && /* @__PURE__ */ d(_, {
+					!!D?.length && /* @__PURE__ */ f(_, {
 						className: "grow basis-0",
 						size: "xs",
 						value: N,
 						onChange: X,
-						children: D.map((e) => /* @__PURE__ */ d("option", {
+						children: D.map((e) => /* @__PURE__ */ f("option", {
 							value: e,
 							children: e
 						}, e))
 					}),
-					E && E.length > 1 && /* @__PURE__ */ d(_, {
+					E && E.length > 1 && /* @__PURE__ */ f(_, {
 						className: "grow basis-0",
 						size: "xs",
 						onChange: Z,
 						value: F,
-						children: E.map((e) => /* @__PURE__ */ d("option", {
+						children: E.map((e) => /* @__PURE__ */ f("option", {
 							value: e,
 							children: e
 						}, e))
 					}),
-					A && /* @__PURE__ */ d("div", {
+					A && /* @__PURE__ */ f("div", {
 						className: "grow basis-0",
-						children: /* @__PURE__ */ d(v, {
+						children: /* @__PURE__ */ f(v, {
 							className: "grow basis-0",
 							value: L,
 							options: G,
@@ -142,9 +142,9 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 							onRemove: ee
 						})
 					}),
-					k && /* @__PURE__ */ d("div", {
+					k && /* @__PURE__ */ f("div", {
 						className: "grow basis-0",
-						children: /* @__PURE__ */ d(v, {
+						children: /* @__PURE__ */ f(v, {
 							className: "grow basis-0",
 							value: z,
 							options: [
@@ -181,9 +181,9 @@ var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "elemen
 					})
 				]
 			})]
-		}), /* @__PURE__ */ d("div", {
+		}), /* @__PURE__ */ f("div", {
 			className: "flex grow basis-0 flex-col overflow-auto border-t border-gray-300 dark:border-zinc-700",
-			children: /* @__PURE__ */ d(e, {
+			children: /* @__PURE__ */ f(t, {
 				selectors: U,
 				componentType: w,
 				selector: W,