@plitzi/sdk-style 0.38.10 → 0.38.11

package/dist/components/StyleInspector/categories/Background/components/BackgroundTile/BackgroundTile.mjs

@@ -1,50 +1,51 @@
-import e from "../../../../components/CategoryOption/index.mjs";
-import t from "../../../../components/CategorySection/index.mjs";
-import { useCallback as n, useMemo as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-import a from "@plitzi/plitzi-ui/icons/BackgroundTileX";
-import o from "@plitzi/plitzi-ui/icons/BackgroundTileXY";
-import s from "@plitzi/plitzi-ui/icons/BackgroundTileY";
-import c from "@plitzi/plitzi-ui/icons/XMark";
+import { asText as e } from "../../../../cssValues.mjs";
+import t from "../../../../components/CategoryOption/index.mjs";
+import n from "../../../../components/CategorySection/index.mjs";
+import { useCallback as r, useMemo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/icons/BackgroundTileX";
+import s from "@plitzi/plitzi-ui/icons/BackgroundTileXY";
+import c from "@plitzi/plitzi-ui/icons/BackgroundTileY";
+import l from "@plitzi/plitzi-ui/icons/XMark";
 //#region src/components/StyleInspector/categories/Background/components/BackgroundTile/BackgroundTile.tsx
-var l = ({ layer: l, onChange: u }) => {
-	let d = r(() => [
+var u = ({ layer: u, onChange: d }) => {
+	let f = i(() => [
 		{
 			value: "repeat",
-			icon: /* @__PURE__ */ i(o, {}),
+			icon: /* @__PURE__ */ a(s, {}),
 			description: "Horizontally and Vertically",
-			active: l.repeat === "repeat"
+			active: u.repeat === "repeat"
 		},
 		{
 			value: "repeat-x",
-			icon: /* @__PURE__ */ i(a, {}),
+			icon: /* @__PURE__ */ a(o, {}),
 			description: "Horizontally",
-			active: l.repeat === "repeat-x"
+			active: u.repeat === "repeat-x"
 		},
 		{
 			value: "repeat-y",
-			icon: /* @__PURE__ */ i(s, {}),
+			icon: /* @__PURE__ */ a(c, {}),
 			description: "Vertically",
-			active: l.repeat === "repeat-y"
+			active: u.repeat === "repeat-y"
 		},
 		{
 			value: "no-repeat",
-			icon: /* @__PURE__ */ i(c, {}),
+			icon: /* @__PURE__ */ a(l, {}),
 			description: "Don't tile",
-			active: l.repeat === "no-repeat"
+			active: u.repeat === "no-repeat"
 		}
-	], [l.repeat]), f = n((e) => u?.({
-		...l,
-		repeat: String(e)
-	}), [l, u]);
-	return /* @__PURE__ */ i(t, {
+	], [u.repeat]), p = r((t) => d?.({
+		...u,
+		repeat: e(t)
+	}), [u, d]);
+	return /* @__PURE__ */ a(n, {
 		label: "Tile",
-		children: /* @__PURE__ */ i(e, {
+		children: /* @__PURE__ */ a(t, {
 			type: "iconGroup",
-			items: d,
-			onChange: f
+			items: f,
+			onChange: p
 		})
 	});
 };
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientPreviewBar.d.ts

@@ -1,7 +1,9 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 type GradientPreviewBarProps = {
     gradientCSS: string;
+    children?: ReactNode;
     onClick: (e: MouseEvent<HTMLDivElement>) => void;
 };
-declare const GradientPreviewBar: ({ gradientCSS, onClick }: GradientPreviewBarProps) => import('react').JSX.Element;
+/** The stops drawn on a bar over a checkerboard, with their handles on it; a click on the bar adds a stop there. */
+declare const GradientPreviewBar: ({ gradientCSS, children, onClick }: GradientPreviewBarProps) => import('react').JSX.Element;
 export default GradientPreviewBar;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientPreviewBar.mjs

@@ -1,20 +1,21 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { resolveTokens as e } from "../../../../cssValues.mjs";
+import t from "../../../../StyleInspectorContext.mjs";
+import { CHECKERBOARD as n } from "../../../../components/ColorSwatch/helpers.mjs";
+import { use as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientPreviewBar.tsx
-var n = ({ gradientCSS: n, onClick: r }) => /* @__PURE__ */ t("div", {
-	className: "relative h-6 w-full cursor-crosshair overflow-hidden rounded-sm border border-gray-300 dark:border-zinc-600",
-	onClick: r,
-	title: "Click to add a color stop",
-	children: [/* @__PURE__ */ e("div", {
-		className: "absolute inset-0",
-		style: {
-			backgroundImage: "linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%)",
-			backgroundSize: "10px 10px",
-			backgroundPosition: "0 0,0 5px,5px -5px,-5px 0"
-		}
-	}), /* @__PURE__ */ e("div", {
-		className: "absolute inset-0",
-		style: { background: n }
-	})]
-});
+var s = ({ gradientCSS: s, children: c, onClick: l }) => {
+	let { variables: u } = r(t), d = i(() => ({ background: e(s, u) }), [s, u]);
+	return /* @__PURE__ */ o("div", {
+		className: "relative h-7 w-full cursor-copy rounded-md ring-1 ring-black/15 ring-inset dark:ring-white/20",
+		style: n,
+		title: "Click the bar to add a stop",
+		onClick: l,
+		children: [/* @__PURE__ */ a("div", {
+			className: "absolute inset-0 rounded-md",
+			style: d
+		}), c]
+	});
+};
 //#endregion
-export { n as default };
+export { s as default };

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.d.ts

@@ -3,5 +3,9 @@ export type GradientStopBarProps = {
     stops: GradientStop[];
     onChange?: (stops: GradientStop[]) => void;
 };
+/**
+ * A gradient's stops: the bar that draws them with a handle per stop, and the selected stop's color and position. A
+ * click on the bar adds a stop there in the color around it; a gradient keeps at least two.
+ */
 declare const GradientStopBar: ({ stops, onChange }: GradientStopBarProps) => import('react').JSX.Element;
 export default GradientStopBar;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.mjs

@@ -1,94 +1,62 @@
 import { newStopId as e } from "../../helpers/backgroundParser.mjs";
 import t from "./GradientPreviewBar.mjs";
 import n from "./GradientStopEditor.mjs";
-import r from "./GradientStopTrack.mjs";
-import { useCallback as i, useMemo as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "clsx";
-import d from "@plitzi/plitzi-ui/Icon";
+import { colorNear as r, sortStops as i, stopsPreview as a } from "./helpers.mjs";
+import o from "./GradientStopTrack.mjs";
+import { useCallback as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.tsx
-function f(e) {
-	let t = parseFloat(e);
-	return isNaN(t) ? 0 : Math.max(0, Math.min(100, t));
-}
-var p = ({ stops: p, onChange: m }) => {
-	let h = o(p);
-	h.current = p;
-	let [g, _] = s(p[0]?.id ?? ""), v = a(() => [...p].sort((e, t) => f(e.position) - f(t.position)), [p]), y = a(() => `linear-gradient(90deg, ${v.map((e) => e.position ? `${e.color} ${e.position}` : e.color).join(", ")})`, [v]), b = p.find((e) => e.id === g) ?? p[0], x = i((t) => {
-		let { left: n, width: r } = t.currentTarget.getBoundingClientRect(), i = Math.round(Math.max(0, Math.min(100, (t.clientX - n) / r * 100))), a = h.current, o = [...a].sort((e, t) => Math.abs(f(e.position) - i) - Math.abs(f(t.position) - i)).at(0), s = {
+var p = 10, m = ({ stops: m, onChange: h }) => {
+	let g = l(m);
+	g.current = m;
+	let [_, v] = u(m[0]?.id ?? ""), y = c(() => a(m), [m]), b = m.find((e) => e.id === _) ?? m.at(0), x = s((t) => {
+		let n = g.current, a = {
 			id: e(),
-			color: o?.color ?? "#808080",
-			position: `${i}%`
-		}, c = [...a, s].sort((e, t) => f(e.position) - f(t.position));
-		m?.(c), _(s.id);
-	}, [m]), S = i((e) => {
-		b && m?.(h.current.map((t) => t.id === b.id ? {
+			color: r(n, t),
+			position: `${t}%`
+		};
+		h?.(i([...n, a])), v(a.id);
+	}, [h]), S = s((e) => {
+		let { left: t, width: n } = e.currentTarget.getBoundingClientRect(), r = n - p * 2;
+		x(Math.round(Math.max(0, Math.min(100, (e.clientX - t - p) / r * 100))));
+	}, [x]), C = s(() => x(50), [x]), w = s((e) => {
+		b && h?.(g.current.map((t) => t.id === b.id ? {
 			...t,
 			color: e
 		} : t));
-	}, [m, b]), C = i((e) => {
-		m?.(e.sort((e, t) => f(e.position) - f(t.position)));
-	}, [m]), w = i((e) => {
-		b && m?.(h.current.map((t) => t.id === b.id ? {
+	}, [h, b]), T = s((e) => {
+		b && h?.(i(g.current.map((t) => t.id === b.id ? {
 			...t,
-			position: String(e)
-		} : t).sort((e, t) => f(e.position) - f(t.position)));
-	}, [m, b]), T = i(() => {
-		if (!b || h.current.length <= 2) return;
-		let e = h.current.filter((e) => e.id !== b.id);
-		m?.(e), _(e[0]?.id ?? "");
-	}, [m, b]), E = i(() => {
-		let t = {
-			id: e(),
-			color: "#808080",
-			position: "50%"
-		}, n = [...h.current, t].sort((e, t) => f(e.position) - f(t.position));
-		m?.(n), _(t.id);
-	}, [m]);
-	return /* @__PURE__ */ l("div", {
+			position: e
+		} : t)));
+	}, [h, b]), E = s((e) => h?.(i(e)), [h]), D = s((e) => {
+		if (g.current.length <= 2) return;
+		let t = g.current.filter((t) => t.id !== e);
+		h?.(t), v(t[0]?.id ?? "");
+	}, [h]), O = s(() => {
+		b && D(b.id);
+	}, [D, b]);
+	return /* @__PURE__ */ f("div", {
 		className: "flex flex-col gap-2",
-		children: [
-			/* @__PURE__ */ c(t, {
-				gradientCSS: y,
-				onClick: x
-			}),
-			/* @__PURE__ */ c("div", {
-				className: "flex px-2",
-				children: /* @__PURE__ */ c(r, {
-					stops: p,
-					selectedId: g,
-					onChange: C,
-					onSelect: _
-				})
-			}),
-			b && /* @__PURE__ */ c(n, {
-				stop: b,
-				showRemove: p.length > 2,
-				onColorChange: S,
-				onPositionChange: w,
-				onRemove: T
-			}),
-			/* @__PURE__ */ l("div", {
-				className: "flex flex-wrap gap-1",
-				children: [v.map((e) => /* @__PURE__ */ c("button", {
-					type: "button",
-					className: u("h-5 w-5 cursor-pointer rounded-sm border shadow-sm", g === e.id ? "border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "border-gray-300 hover:border-gray-400 dark:border-zinc-600"),
-					style: { backgroundColor: e.color },
-					onClick: () => _(e.id),
-					title: `${e.color} • ${e.position}`
-				}, e.id)), /* @__PURE__ */ c("button", {
-					type: "button",
-					className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm border border-dashed border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500 dark:border-zinc-600 dark:text-zinc-500",
-					title: "Add stop at 50%",
-					onClick: E,
-					children: /* @__PURE__ */ c(d, {
-						icon: "fas fa-plus",
-						size: "xs"
-					})
-				})]
+		children: [/* @__PURE__ */ d(t, {
+			gradientCSS: y,
+			onClick: S,
+			children: /* @__PURE__ */ d(o, {
+				stops: m,
+				selectedId: b?.id ?? "",
+				onChange: E,
+				onSelect: v,
+				onRemove: D
 			})
-		]
+		}), b && /* @__PURE__ */ d(n, {
+			stop: b,
+			canRemove: m.length > 2,
+			onColorChange: w,
+			onPositionChange: T,
+			onAdd: C,
+			onRemove: O
+		})]
 	});
 };
 //#endregion
-export { p as default };
+export { m as default };

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopEditor.d.ts

@@ -1,10 +1,12 @@
 import { GradientStop } from '../../helpers/backgroundParser';
 type GradientStopEditorProps = {
     stop: GradientStop;
-    showRemove: boolean;
+    canRemove: boolean;
     onColorChange: (color: string) => void;
-    onPositionChange: (value: unknown) => void;
+    onPositionChange: (value: string) => void;
+    onAdd: () => void;
     onRemove: () => void;
 };
-declare const GradientStopEditor: ({ stop, showRemove, onColorChange, onPositionChange, onRemove }: GradientStopEditorProps) => import('react').JSX.Element;
+/** The selected stop's color and position, and the two buttons that change how many stops there are. */
+declare const GradientStopEditor: ({ stop, canRemove, onColorChange, onPositionChange, onAdd, onRemove }: GradientStopEditorProps) => import('react').JSX.Element;
 export default GradientStopEditor;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopEditor.mjs

@@ -1,48 +1,58 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import n from "@plitzi/plitzi-ui/Icon";
-import r from "@plitzi/plitzi-ui/ColorPicker";
-import i from "@plitzi/plitzi-ui/MetricInput";
+import n from "@plitzi/plitzi-ui/ColorPicker";
+import r from "@plitzi/plitzi-ui/MetricInput";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopEditor.tsx
-var a = ({ stop: a, showRemove: o, onColorChange: s, onPositionChange: c, onRemove: l }) => /* @__PURE__ */ t("div", {
-	className: "flex items-center gap-1.5 rounded border border-gray-200 bg-gray-50 p-1.5 dark:border-zinc-700 dark:bg-zinc-800/50",
-	children: [
-		/* @__PURE__ */ e("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ e(r, {
+var i = [{
+	label: "%",
+	value: "%"
+}, {
+	label: "PX",
+	value: "px"
+}], a = ({ stop: a, canRemove: o, onColorChange: s, onPositionChange: c, onAdd: l, onRemove: u }) => /* @__PURE__ */ t("div", {
+	className: "flex flex-col gap-1.5",
+	children: [/* @__PURE__ */ e(n, {
+		size: "xs",
+		className: { root: "w-full min-w-0" },
+		value: a.color,
+		allowVariables: !0,
+		showAlpha: !0,
+		onChange: s
+	}), /* @__PURE__ */ t("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ e("span", {
+				className: "text-xs text-zinc-500 dark:text-zinc-400",
+				children: "At"
+			}),
+			/* @__PURE__ */ e(r, {
 				size: "xs",
-				className: { root: "w-full min-w-0" },
-				value: a.color,
-				allowVariables: !0,
-				showAlpha: !0,
-				onChange: s
+				className: "w-24 shrink-0",
+				value: a.position,
+				units: i,
+				allowedWords: [],
+				min: -Infinity,
+				onChange: c
+			}),
+			/* @__PURE__ */ e("span", { className: "grow" }),
+			/* @__PURE__ */ e("button", {
+				type: "button",
+				className: "flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-zinc-500 hover:bg-gray-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100",
+				title: "Add a stop",
+				"aria-label": "Add a stop",
+				onClick: l,
+				children: /* @__PURE__ */ e("i", { className: "fa-solid fa-plus text-xs" })
+			}),
+			/* @__PURE__ */ e("button", {
+				type: "button",
+				className: "flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-zinc-500 hover:bg-red-500/10 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-red-400",
+				title: o ? "Remove this stop" : "A gradient needs two stops",
+				"aria-label": "Remove this stop",
+				disabled: !o,
+				onClick: u,
+				children: /* @__PURE__ */ e("i", { className: "fa-solid fa-trash-can text-xs" })
 			})
-		}),
-		/* @__PURE__ */ e(i, {
-			size: "xs",
-			className: "w-20 shrink-0",
-			value: a.position,
-			units: [{
-				label: "%",
-				value: "%"
-			}, {
-				label: "PX",
-				value: "px"
-			}],
-			allowedWords: [],
-			min: Infinity,
-			onChange: c
-		}),
-		o && /* @__PURE__ */ e("button", {
-			type: "button",
-			className: "shrink-0 cursor-pointer rounded p-0.5 text-gray-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400",
-			title: "Remove stop",
-			onClick: l,
-			children: /* @__PURE__ */ e(n, {
-				icon: "fas fa-times",
-				size: "xs"
-			})
-		})
-	]
+		]
+	})]
 });
 //#endregion
 export { a as default };

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.d.ts

@@ -6,6 +6,10 @@ type GradientStopHandleProps = {
     trackRef: RefObject<HTMLDivElement | null>;
     onPositionChange: (stopId: string, pct: number) => void;
     onSelect: (stopId: string) => void;
+    onRemove: (stopId: string) => void;
 };
-declare const GradientStopHandle: ({ stop, selected, trackRef, onPositionChange, onSelect }: GradientStopHandleProps) => import('react').JSX.Element;
+/**
+ * A stop on the gradient: dragged along it, or moved with the arrow keys (Shift for ten at a time); Delete removes it.
+ */
+declare const GradientStopHandle: ({ stop, selected, trackRef, onPositionChange, onSelect, onRemove }: GradientStopHandleProps) => import('react').JSX.Element;
 export default GradientStopHandle;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.mjs

@@ -1,44 +1,66 @@
-import e from "../../helpers/normalizeLeft.mjs";
-import { useCallback as t, useLayoutEffect as n, useMemo as r, useRef as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
-import o from "clsx";
+import { resolveTokens as e } from "../../../../cssValues.mjs";
+import t from "../../../../StyleInspectorContext.mjs";
+import { stopPct as n } from "./helpers.mjs";
+import r from "../../helpers/normalizeLeft.mjs";
+import { use as i, useCallback as a, useLayoutEffect as o, useMemo as s, useRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import u from "clsx";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.tsx
-var s = ({ stop: s, selected: c, trackRef: l, onPositionChange: u, onSelect: d }) => {
-	let f = i(null), p = i(!1), m = i(!1), h = r(() => e(s.position, (f.current?.parentNode)?.getBoundingClientRect().width ?? Infinity), [s.position]), g = t((e) => {
-		let t = l.current;
+var d = ({ stop: d, selected: f, trackRef: p, onPositionChange: m, onSelect: h, onRemove: g }) => {
+	let { variables: _ } = i(t), v = c(null), y = c(!1), b = c(!1), x = s(() => r(d.position.split(" ")[0] ?? "", p.current?.getBoundingClientRect().width ?? Infinity), [d.position, p]), S = s(() => e(d.color, _), [d.color, _]), C = a((e) => {
+		let t = p.current;
 		if (!t) return 0;
 		let { left: n, width: r } = t.getBoundingClientRect();
 		return Math.round(Math.max(0, Math.min(100, (e - n) / r * 100)));
-	}, [l]);
-	n(() => {
-		!p.current && f.current && (f.current.style.left = h);
-	}, [h]);
-	let _ = t((e) => {
-		e.preventDefault(), m.current = !1, p.current = !0, f.current?.setPointerCapture(e.pointerId), d(s.id);
-	}, [d, s.id]), v = t((e) => {
-		p.current && f.current && (m.current = !0, f.current.style.left = `${g(e.clientX)}%`);
-	}, [g]), y = t((e) => {
-		if (p.current && (p.current = !1, m.current && f.current)) {
-			let t = g(e.clientX);
-			f.current.style.left = `${t}%`, u(s.id, t);
+	}, [p]);
+	o(() => {
+		!y.current && v.current && (v.current.style.left = x);
+	}, [x]);
+	let w = a((e) => {
+		e.preventDefault(), e.stopPropagation(), b.current = !1, y.current = !0, v.current?.setPointerCapture(e.pointerId), v.current?.focus(), h(d.id);
+	}, [h, d.id]), T = a((e) => {
+		y.current && v.current && (b.current = !0, v.current.style.left = `${C(e.clientX)}%`);
+	}, [C]), E = a((e) => {
+		if (y.current && (y.current = !1, b.current && v.current)) {
+			let t = C(e.clientX);
+			v.current.style.left = `${t}%`, m(d.id, t);
 		}
 	}, [
+		C,
+		m,
+		d.id
+	]), D = a((e) => {
+		let t = e.shiftKey ? 10 : 1;
+		if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+			e.preventDefault();
+			let r = n(d.position) + (e.key === "ArrowLeft" ? -t : t);
+			m(d.id, Math.max(0, Math.min(100, r)));
+		} else (e.key === "Delete" || e.key === "Backspace") && (e.preventDefault(), e.stopPropagation(), g(d.id));
+	}, [
+		m,
 		g,
-		u,
-		s.id
-	]);
-	return /* @__PURE__ */ a("div", {
-		ref: f,
-		className: o("absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full border-2 shadow-sm", c ? "z-10 border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "z-0 border-white hover:border-gray-300 dark:border-zinc-500"),
+		d.id,
+		d.position
+	]), O = a((e) => e.stopPropagation(), []);
+	return /* @__PURE__ */ l("button", {
+		ref: v,
+		type: "button",
+		className: u("pointer-events-auto absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full border-2 shadow-md outline-none active:cursor-grabbing", {
+			"ring-primary-500 dark:ring-primary-400 z-10 border-white ring-2": f,
+			"z-0 border-white/90 hover:border-white": !f
+		}),
 		style: {
-			left: h,
-			backgroundColor: s.color
+			left: x,
+			backgroundColor: S
 		},
-		onPointerDown: _,
-		onPointerMove: v,
-		onPointerUp: y,
-		title: `${s.color} • ${s.position}`
+		title: `${d.color} · ${d.position || "auto"} — drag, or use the arrow keys`,
+		"aria-label": `Color stop ${d.color} at ${d.position || "auto"}`,
+		onPointerDown: w,
+		onPointerMove: T,
+		onPointerUp: E,
+		onKeyDown: D,
+		onClick: O
 	});
 };
 //#endregion
-export { s as default };
+export { d as default };

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopTrack.d.ts

@@ -4,6 +4,8 @@ type GradientStopTrackProps = {
     selectedId: string;
     onChange?: (stops: GradientStop[]) => void;
     onSelect: (id: string) => void;
+    onRemove: (id: string) => void;
 };
-declare const GradientStopTrack: ({ stops, selectedId, onChange, onSelect }: GradientStopTrackProps) => import('react').JSX.Element;
+/** The handles, laid over the bar inset by half a handle, so a stop at 0% or 100% stays whole and grabbable. */
+declare const GradientStopTrack: ({ stops, selectedId, onChange, onSelect, onRemove }: GradientStopTrackProps) => import('react').JSX.Element;
 export default GradientStopTrack;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopTrack.mjs

@@ -1,27 +1,28 @@
 import e from "./GradientStopHandle.mjs";
 import { useCallback as t, useRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopTrack.tsx
-var a = ({ stops: a, selectedId: o, onChange: s, onSelect: c }) => {
-	let l = n(null), u = n(a);
-	u.current = a;
+var i = ({ stops: i, selectedId: a, onChange: o, onSelect: s, onRemove: c }) => {
+	let l = n(null), u = n(i);
+	u.current = i;
 	let d = t((e, t) => {
-		s?.(u.current.map((n) => n.id === e ? {
+		o?.(u.current.map((n) => n.id === e ? {
 			...n,
 			position: `${t}%`
 		} : n));
-	}, [s]);
-	return /* @__PURE__ */ i("div", {
+	}, [o]);
+	return /* @__PURE__ */ r("div", {
 		ref: l,
-		className: "relative h-5 w-full select-none",
-		children: [/* @__PURE__ */ r("div", { className: "absolute top-1/2 right-0 left-0 h-px -translate-y-1/2 bg-gray-300 dark:bg-zinc-600" }), a.map((t) => /* @__PURE__ */ r(e, {
+		className: "pointer-events-none absolute inset-y-0 right-2.5 left-2.5 select-none",
+		children: i.map((t) => /* @__PURE__ */ r(e, {
 			trackRef: l,
 			stop: t,
-			selected: o === t.id,
+			selected: a === t.id,
 			onPositionChange: d,
-			onSelect: c
-		}, t.id))]
+			onSelect: s,
+			onRemove: c
+		}, t.id))
 	});
 };
 //#endregion
-export { a as default };
+export { i as default };

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/helpers.d.ts

@@ -0,0 +1,8 @@
+import { GradientStop } from '../../helpers/backgroundParser';
+/** Where a stop sits along the bar, in percent — its first position when it has two, 0 when it has none. */
+export declare const stopPct: (position: string) => number;
+export declare const sortStops: (stops: GradientStop[]) => GradientStop[];
+/** The stops drawn left to right on the bar, whatever the gradient's own direction or shape. */
+export declare const stopsPreview: (stops: GradientStop[]) => string;
+/** The color the stops have at a point of the bar — the closest stop's — for a stop added there. */
+export declare const colorNear: (stops: GradientStop[], pct: number) => string;

package/dist/components/StyleInspector/categories/Background/components/GradientStopBar/helpers.mjs

@@ -0,0 +1,8 @@
+import { serializeStop as e } from "../../helpers/backgroundParser.mjs";
+//#region src/components/StyleInspector/categories/Background/components/GradientStopBar/helpers.ts
+var t = (e) => {
+	let t = parseFloat(e);
+	return isNaN(t) ? 0 : Math.max(0, Math.min(100, t));
+}, n = (e) => [...e].sort((e, n) => t(e.position) - t(n.position)), r = (t) => `linear-gradient(90deg, ${n(t).map(e).join(", ")})`, i = (e, n) => [...e].sort((e, r) => Math.abs(t(e.position) - n) - Math.abs(t(r.position) - n)).at(0)?.color ?? "#808080";
+//#endregion
+export { i as colorNear, n as sortStops, t as stopPct, r as stopsPreview };

package/dist/components/StyleInspector/categories/Background/components/LayerGroup/LayerGroup.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type LayerGroupProps = {
+    title: string;
+    children?: ReactNode;
+};
+/** A titled group of a layer's controls — what it draws, then where it goes — so a long editor reads in two halves. */
+declare const LayerGroup: ({ title, children }: LayerGroupProps) => import('react').JSX.Element;
+export default LayerGroup;

package/dist/components/StyleInspector/categories/Background/components/LayerGroup/LayerGroup.mjs

@@ -0,0 +1,11 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/LayerGroup/LayerGroup.tsx
+var n = ({ title: n, children: r }) => /* @__PURE__ */ t("div", {
+	className: "flex flex-col gap-2",
+	children: [/* @__PURE__ */ e("span", {
+		className: "text-[11px] font-semibold tracking-wide text-zinc-500 uppercase dark:text-zinc-400",
+		children: n
+	}), r]
+});
+//#endregion
+export { n as default };

package/dist/components/StyleInspector/categories/Background/components/LayerGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as LayerGroup } from './LayerGroup';
+export * from './LayerGroup';
+export default LayerGroup;

package/dist/components/StyleInspector/categories/Background/components/LayerGroup/index.mjs

@@ -0,0 +1,5 @@
+import e from "./LayerGroup.mjs";
+//#region src/components/StyleInspector/categories/Background/components/LayerGroup/index.ts
+var t = e;
+//#endregion
+export { t as default };