@plitzi/sdk-style 0.38.9 → 0.38.11

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

@@ -1,130 +1,63 @@
-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 { asText as e } from "../../../cssValues.mjs";
+import t from "../../../components/CategoryOption/index.mjs";
+import n from "../../../components/ValueListItem/index.mjs";
+import { FILTER_GROUPS as r, FILTER_SPECS as i, parseFilter as a, serializeFilter as o } from "./helpers.mjs";
+import { useCallback as s, useRef as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Effects/Filters/FilterItem.tsx
-var l = ({ value: l = "blur(5px)", onRemove: u, onChange: d }) => {
-	let f = l.match(/[a-z-]+|[0-9.-]+(px|%|deg|)/gim), { propType: p = "blur", amount: m = "5px" } = {};
-	f?.length === 2 && ([p, m] = f);
-	let h = i({
-		propType: p,
-		amount: m
-	});
-	h.current = {
-		propType: p,
-		amount: m
-	};
-	let g = n((e) => (t) => {
-		let n = { ...h.current };
-		n[e] = t;
-		let { propType: r } = n, { amount: i } = n;
-		e === "propType" && h.current.amount !== t && (i = t === "blur" ? "5px" : t === "hue-rotate" ? "0deg" : "0.5"), d?.(`${r}(${i})`);
-	}, [d]), _ = r(() => p === "hue-rotate" ? { units: [{
-		label: "DEG",
-		value: "deg"
-	}] } : p === "blur" ? { units: [{
-		label: "PX",
-		value: "px"
-	}] } : {
-		units: void 0,
-		max: 1,
-		step: .1
-	}, [p]);
-	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", {
-				className: "flex items-center",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex",
-					children: l
-				})
-			}), /* @__PURE__ */ a("div", {
-				className: "flex",
-				children: /* @__PURE__ */ a(c, {
-					size: "xs",
-					icon: "fas fa-trash-alt",
-					onClick: u,
-					intent: "danger",
-					title: "Remove"
-				})
+var f = Object.entries(i), p = ({ value: p, title: m, onRemove: h, onChange: g }) => {
+	let _ = a(p), v = c(_);
+	v.current = _;
+	let y = _ ? i[_.name] : void 0, b = s((t) => {
+		let n = e(t);
+		Object.hasOwn(i, n) && g(o({
+			name: n,
+			amount: i[n].default
+		}));
+	}, [g]), x = s((t) => {
+		v.current && g(o({
+			...v.current,
+			amount: e(t)
+		}));
+	}, [g]), S = s((t) => g(e(t)), [g]);
+	return /* @__PURE__ */ d(n, {
+		summary: p,
+		title: m,
+		removeLabel: `Remove ${m.toLowerCase()}`,
+		onRemove: h,
+		children: [!_ && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+			label: "Value",
+			type: "input",
+			value: p,
+			onChange: S
+		}), /* @__PURE__ */ u("p", {
+			className: "m-0 text-[11px] text-zinc-500 dark:text-zinc-400",
+			children: "A function the editor has no control for, so it is edited as written."
+		})] }), _ && y && /* @__PURE__ */ d("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: [/* @__PURE__ */ u(t, {
+				label: "Function",
+				type: "select",
+				value: _.name,
+				onChange: b,
+				children: r.map((e) => /* @__PURE__ */ u("optgroup", {
+					label: e,
+					children: f.filter(([, t]) => t.group === e).map(([e, t]) => /* @__PURE__ */ u("option", {
+						value: e,
+						children: t.label
+					}, e))
+				}, e))
+			}), /* @__PURE__ */ u(t, {
+				label: "Amount",
+				type: "metric",
+				value: _.amount,
+				units: y.units,
+				step: y.step,
+				min: _.name === "hue-rotate" ? -Infinity : 0,
+				onChange: x
 			})]
-		}), /* @__PURE__ */ a(s.Content, {
-			className: "w-[260px]",
-			children: /* @__PURE__ */ a("div", {
-				className: "flex w-full flex-col gap-2 p-2",
-				children: /* @__PURE__ */ o(t, {
-					label: "Type",
-					children: [/* @__PURE__ */ o(e, {
-						label: "Property",
-						onChange: g("propType"),
-						type: "select",
-						value: p,
-						children: [
-							/* @__PURE__ */ a("optgroup", {
-								label: "General",
-								children: /* @__PURE__ */ a("option", {
-									value: "blur",
-									children: "Blur"
-								})
-							}),
-							/* @__PURE__ */ o("optgroup", {
-								label: "Color Adjustments",
-								children: [
-									/* @__PURE__ */ a("option", {
-										value: "brightness",
-										children: "Brightness"
-									}),
-									/* @__PURE__ */ a("option", {
-										value: "contrast",
-										children: "Contrast"
-									}),
-									/* @__PURE__ */ a("option", {
-										value: "hue-rotate",
-										children: "Hue Rotate"
-									}),
-									/* @__PURE__ */ a("option", {
-										value: "saturate",
-										children: "Saturation"
-									})
-								]
-							}),
-							/* @__PURE__ */ o("optgroup", {
-								label: "Color Effects",
-								children: [
-									/* @__PURE__ */ a("option", {
-										value: "grayscale",
-										children: "Grayscale"
-									}),
-									/* @__PURE__ */ a("option", {
-										value: "invert",
-										children: "Invert"
-									}),
-									/* @__PURE__ */ a("option", {
-										value: "sepia",
-										children: "Sepia"
-									})
-								]
-							})
-						]
-					}), /* @__PURE__ */ a(e, {
-						label: "Amount",
-						value: m,
-						onChange: g("amount"),
-						type: "metric",
-						units: _.units,
-						step: _.step,
-						max: _.max
-					})]
-				})
-			})
 		})]
 	});
 };
 //#endregion
-export { l as default };
+export { p as default };

package/dist/components/StyleInspector/categories/Effects/Filters/helpers.d.ts

@@ -0,0 +1,25 @@
+/** One function of a `filter` / `backdrop-filter` list: its name and its argument as written. */
+export type FilterValue = {
+    name: string;
+    amount: string;
+};
+export type FilterSpec = {
+    label: string;
+    group: 'General' | 'Color adjustments' | 'Color effects';
+    default: string;
+    /** Besides none: a proportion is written `0.5` or `50%`, and past 1 the browser clamps it where CSS says to. */
+    units: {
+        label: string;
+        value: string;
+    }[];
+    step: number;
+};
+/** The functions the editor has a control for: how the picker names them, where a new one starts, what it takes. */
+export declare const FILTER_SPECS: Record<string, FilterSpec>;
+export declare const FILTER_GROUPS: readonly ["General", "Color adjustments", "Color effects"];
+/**
+ * A filter function the editor has a control for. Any other — `drop-shadow(…)`, `url(#svg-filter)`, a token — answers
+ * `undefined` and is kept as text.
+ */
+export declare const parseFilter: (value: string) => FilterValue | undefined;
+export declare const serializeFilter: ({ name, amount }: FilterValue) => string;

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

@@ -0,0 +1,87 @@
+//#region src/components/StyleInspector/categories/Effects/Filters/helpers.ts
+var e = [{
+	label: "%",
+	value: "%"
+}], t = {
+	blur: {
+		label: "Blur",
+		group: "General",
+		default: "5px",
+		units: [{
+			label: "PX",
+			value: "px"
+		}],
+		step: 1
+	},
+	opacity: {
+		label: "Opacity",
+		group: "General",
+		default: "0.5",
+		units: e,
+		step: .1
+	},
+	brightness: {
+		label: "Brightness",
+		group: "Color adjustments",
+		default: "1",
+		units: e,
+		step: .1
+	},
+	contrast: {
+		label: "Contrast",
+		group: "Color adjustments",
+		default: "1",
+		units: e,
+		step: .1
+	},
+	"hue-rotate": {
+		label: "Hue rotate",
+		group: "Color adjustments",
+		default: "0deg",
+		units: [{
+			label: "DEG",
+			value: "deg"
+		}],
+		step: 1
+	},
+	saturate: {
+		label: "Saturation",
+		group: "Color adjustments",
+		default: "1",
+		units: e,
+		step: .1
+	},
+	grayscale: {
+		label: "Grayscale",
+		group: "Color effects",
+		default: "0.5",
+		units: e,
+		step: .1
+	},
+	invert: {
+		label: "Invert",
+		group: "Color effects",
+		default: "0.5",
+		units: e,
+		step: .1
+	},
+	sepia: {
+		label: "Sepia",
+		group: "Color effects",
+		default: "0.5",
+		units: e,
+		step: .1
+	}
+}, n = [
+	"General",
+	"Color adjustments",
+	"Color effects"
+], r = /^([a-z-]+)\((.*)\)$/i, i = (e) => {
+	let n = r.exec(e.trim());
+	if (n && n[1].toLowerCase() in t) return {
+		name: n[1].toLowerCase(),
+		amount: n[2].trim()
+	};
+}, a = ({ name: e, amount: t }) => `${e}(${t})`;
+//#endregion
+export { n as FILTER_GROUPS, t as FILTER_SPECS, i as parseFilter, a as serializeFilter };

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

@@ -1,36 +1,26 @@
-import e from "../../../components/InspectorLabel/index.mjs";
+import e from "../../../components/ValueList/index.mjs";
 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";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Effects/Transform/Transform.tsx
-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__ */ c(e, {
-			keyValue: ["transform"],
-			children: "2D & 3D Transforms"
-		}), /* @__PURE__ */ c(u, {
-			className: "cursor-pointer",
-			icon: "fas fa-plus",
-			onClick: _
-		})]
-	}), p.length > 0 && /* @__PURE__ */ c("div", {
-		className: "flex flex-col gap-2",
-		children: p.map((e, t) => /* @__PURE__ */ c(a, {
+var c = ["transform"], l = ({ value: l, onChange: u }) => {
+	let d = r(typeof l == "string" ? l : ""), f = o((e) => u?.(e.length > 0 ? i(e) : ""), [u]), p = (e) => () => f(d.filter((t, n) => n !== e)), m = (e) => (t) => {
+		f(d.map((n, r) => r === e ? t : n));
+	}, h = o(() => {
+		f([...d, n(t)]);
+	}, [f, d]);
+	return /* @__PURE__ */ s(e, {
+		label: "2D & 3D Transforms",
+		keys: c,
+		addLabel: "Add transform",
+		onAdd: h,
+		children: d.length > 0 && d.map((e, t) => /* @__PURE__ */ s(a, {
 			value: e,
-			onChange: g(t),
-			onRemove: h(t)
+			onChange: m(t),
+			onRemove: p(t)
 		}, t))
-	})] });
+	});
 };
 //#endregion
-export { d as default };
+export { l as default };

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

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

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

@@ -1,89 +1,65 @@
 import e from "../../../components/CategoryOption/index.mjs";
-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";
+import t from "../../../components/ValueListItem/index.mjs";
+import { TRANSFORM_FUNCTION_GROUPS as n, createFunctionValue as r, getFunctionSpec as i, serializeTransform as a, unitsForKind as o } from "./transformFunctions.mjs";
+import { useCallback as s, useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Effects/Transform/TransformItem.tsx
-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) => ({
+var d = ({ value: d, onRemove: f, onChange: p }) => {
+	let m = i(d.name), h = c(() => m ? m.args : d.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
+	})), [m, d.args]), g = c(() => h.map((e, t) => d.args[t] ?? e.default), [h, d.args]), _ = s((e) => p?.(r(e)), [p]), v = s((e) => (t) => {
+		let n = h.map((n, r) => r === e ? t : d.args[r] ?? n.default);
+		p?.({
+			name: d.name,
+			args: n
 		});
 	}, [
-		g,
-		m,
-		t.args,
-		t.name
-	]), b = i({
-		name: t.name,
-		args: _
+		h,
+		p,
+		d.args,
+		d.name
+	]), y = a({
+		name: d.name,
+		args: g
 	});
-	return /* @__PURE__ */ l(u, {
-		className: "w-full min-w-0",
-		closeOnClick: !1,
-		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"
+	return /* @__PURE__ */ u(t, {
+		summary: y,
+		title: "Transform",
+		removeLabel: "Remove transform",
+		onRemove: f,
+		children: [/* @__PURE__ */ u(e, {
+			label: "Function",
+			value: d.name,
+			onChange: _,
+			type: "select",
+			children: [n.map((e) => /* @__PURE__ */ l("optgroup", {
+				label: e.category,
+				children: e.specs.map((e) => /* @__PURE__ */ l("option", {
+					value: e.name,
+					children: e.label
+				}, e.name))
+			}, e.category)), !m && /* @__PURE__ */ l("optgroup", {
+				label: "Other",
+				children: /* @__PURE__ */ l("option", {
+					value: d.name,
+					children: d.name
+				})
 			})]
-		}), /* @__PURE__ */ c(u.Content, {
-			className: "w-[240px]",
-			children: /* @__PURE__ */ l("div", {
-				className: "flex w-full flex-col gap-2 p-2",
-				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}`))
-				})]
-			})
+		}), /* @__PURE__ */ l("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: h.map((t, n) => /* @__PURE__ */ l(e, {
+				label: t.label,
+				value: g[n],
+				onChange: v(n),
+				type: "metric",
+				units: o(t.kind),
+				step: t.kind === "number" ? .1 : 1,
+				min: -Infinity
+			}, `${t.label}-${n}`))
 		})]
 	});
 };
 //#endregion
-export { p as default };
+export { d as default };

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

@@ -25,3 +25,8 @@ 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;
+/** The functions by category, in the order the picker lists them. */
+export declare const TRANSFORM_FUNCTION_GROUPS: {
+    category: string;
+    specs: typeof TRANSFORM_FUNCTIONS;
+}[];

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

@@ -186,6 +186,12 @@ var e = (e) => ({
 		name: e,
 		args: t ? t.args.map((e) => e.default) : ["0px"]
 	};
-};
+}, m = r.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;
+}, []);
 //#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 };
+export { i as DEFAULT_FUNCTION, r as TRANSFORM_FUNCTIONS, m as TRANSFORM_FUNCTION_GROUPS, 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

@@ -1,41 +1,25 @@
-import e from "../../../components/InspectorLabel/index.mjs";
-import t from "./TransitionItem.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 { splitByCommaOutsideParens as e } from "../../../cssValues.mjs";
+import t from "../../../components/ValueList/index.mjs";
+import { DEFAULT_TRANSITION as n, serializeTransition as r } from "./helpers.mjs";
+import i from "./TransitionItem.mjs";
+import { useCallback as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Effects/Transition/Transition.tsx
-var s = ({ value: s, onChange: c }) => {
-	let l = [];
-	s && s !== "" && (l = s.split(/,(?![^()]*\))/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(() => {
-		l.length > 0 ? c?.(`${s},opacity 200ms ease 0ms`) : c?.("opacity 200ms ease 0ms");
-	}, [
-		c,
-		l.length,
-		s
-	]);
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
-		className: "flex justify-between",
-		children: [/* @__PURE__ */ i(e, {
-			keyValue: ["transition"],
-			children: "Transitions"
-		}), /* @__PURE__ */ i(o, {
-			className: "cursor-pointer",
-			icon: "fas fa-plus",
-			onClick: f
-		})]
-	}), l.length > 0 && /* @__PURE__ */ i("div", {
-		className: "flex flex-col gap-2",
-		children: l.map((e, n) => /* @__PURE__ */ i(t, {
+var s = ["transition"], c = ({ value: c, onChange: l }) => {
+	let u = typeof c == "string" && c !== "" ? e(c).map((e) => e.trim()) : [], d = a((e) => l?.(e.length > 0 ? e.join(", ") : ""), [l]), f = (e) => () => d(u.filter((t, n) => n !== e)), p = (e) => (t) => {
+		t !== u[e] && d(u.map((n, r) => r === e ? t : n));
+	};
+	return /* @__PURE__ */ o(t, {
+		label: "Transitions",
+		keys: s,
+		addLabel: "Add transition",
+		onAdd: () => d([...u, r(n)]),
+		children: u.length > 0 && u.map((e, t) => /* @__PURE__ */ o(i, {
 			value: e,
-			onChange: d(n),
-			onRemove: u(n)
-		}, n))
-	})] });
+			onChange: p(t),
+			onRemove: f(t)
+		}, t))
+	});
 };
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/StyleInspector/categories/Effects/Transition/TransitionEasing.d.ts

@@ -0,0 +1,10 @@
+export type TransitionEasingProps = {
+    value: string;
+    onChange: (easing: string) => void;
+};
+/**
+ * The easing of one transition: a picker of the named curves, and — opened from it — the curve itself, to drag into
+ * one of your own, with the presets drawn and a dot that runs along it.
+ */
+declare const TransitionEasing: ({ value, onChange }: TransitionEasingProps) => import('react').JSX.Element;
+export default TransitionEasing;