@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -1,172 +1,178 @@
-import e from "../../../../components/CategoryOption/index.mjs";
-import t from "../../../../components/CategorySection/index.mjs";
-import { serializeLayerImage as n } from "../../helpers/backgroundParser.mjs";
-import r from "../../modes/ConicGradientMode.mjs";
-import i from "../../modes/ImageMode.mjs";
-import a from "../../modes/LinearGradientMode.mjs";
-import o from "../../modes/RadialGradientMode.mjs";
-import { memo as s, useCallback as c, useMemo as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "clsx";
-import m from "@plitzi/plitzi-ui/Icon";
-import { nodeOf as h } from "@plitzi/sdk-shared/helpers/eventTarget";
-//#region src/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.tsx
-var g = {
-	none: "None",
-	url: "Image",
-	"linear-gradient": "Linear Gradient",
-	"radial-gradient": "Radial Gradient",
-	"conic-gradient": "Conic Gradient"
-}, _ = [
-	{
-		value: "border-box",
-		label: "Border Box"
-	},
-	{
-		value: "padding-box",
-		label: "Padding Box"
-	},
-	{
-		value: "content-box",
-		label: "Content Box"
-	}
-], v = s(({ layer: s, index: v, expanded: y, onExpand: b, onChange: x, onRemove: S, onReorder: C }) => {
-	let [w, T] = u(!1), E = l(() => n(s), [s]), D = c((e) => {
-		let t = String(e);
-		x({
-			...s,
-			type: t
+import { CLIP_OPTIONS as e, LAYER_TYPES as t, LAYER_TYPE_LABELS as n, isGradient as r, layerSummary as i } from "./helpers.mjs";
+import { asText as a } from "../../../../cssValues.mjs";
+import o from "../../../../components/CategoryOption/index.mjs";
+import s from "../../../../components/CategorySection/index.mjs";
+import c from "../../../../components/ColorSwatch/index.mjs";
+import { serializeLayerImage as l } from "../../helpers/backgroundParser.mjs";
+import u from "../../modes/ConicGradientMode.mjs";
+import d from "../../modes/ImageMode.mjs";
+import f from "../../modes/LinearGradientMode.mjs";
+import p from "../../modes/RadialGradientMode.mjs";
+import m from "../../modes/RawMode.mjs";
+import h from "../BackgroundAttachment/index.mjs";
+import g from "../BackgroundPosition/index.mjs";
+import _ from "../BackgroundSize/index.mjs";
+import v from "../BackgroundTile/index.mjs";
+import y from "../LayerGroup/index.mjs";
+import { memo as b, useCallback as x, useMemo as S, useState as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import E from "clsx";
+import D from "@plitzi/plitzi-ui/Switch";
+import { nodeOf as O } from "@plitzi/sdk-shared/helpers/eventTarget";
+var k = b(({ layer: b, index: k, expanded: A, onExpand: j, onChange: M, onRemove: N, onReorder: P }) => {
+	let [F, I] = C(!1), L = S(() => l(b), [b]), R = x((e) => {
+		let n = t.find((t) => t === a(e));
+		n && M({
+			...b,
+			type: n
 		});
-	}, [s, x]), O = c(() => b(s.id), [b, s.id]), k = c((e) => x({
-		...s,
-		clip: String(e)
-	}), [s, x]), A = c((e) => {
-		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(v));
-	}, [v]), j = c(() => {
-		T(!1);
-	}, []), M = c((e) => {
-		e.preventDefault(), T(!0);
-	}, []), N = c((e) => {
-		e.currentTarget.contains(h(e.relatedTarget)) || T(!1);
-	}, []), P = c((e) => {
-		e.preventDefault(), T(!1);
+	}, [b, M]), z = x((e) => M({
+		...b,
+		repeating: e.target.checked
+	}), [b, M]), B = x((e) => M({
+		...b,
+		clip: a(e)
+	}), [b, M]), V = x(() => j(b.id), [j, b.id]), H = x((e) => {
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), j(b.id));
+	}, [j, b.id]), U = x((e) => e.stopPropagation(), []), W = x((e) => {
+		e.stopPropagation(), N();
+	}, [N]), G = x((e) => {
+		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(k));
+	}, [k]), K = x(() => I(!1), []), q = x((e) => {
+		e.preventDefault(), I(!0);
+	}, []), J = x((e) => {
+		e.currentTarget.contains(O(e.relatedTarget)) || I(!1);
+	}, []), Y = x((e) => {
+		e.preventDefault(), I(!1);
 		let t = parseInt(e.dataTransfer.getData("text/plain"), 10);
-		isNaN(t) || C(t, v);
-	}, [v, C]);
-	return /* @__PURE__ */ f("div", {
-		className: p("rounded-sm border transition-colors", {
-			"border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20": w,
-			"border-gray-200 dark:border-zinc-700": !w
+		isNaN(t) || P(t, k);
+	}, [k, P]), X = r(b.type), Z = b.type !== "none";
+	return /* @__PURE__ */ T("div", {
+		className: E("rounded-md border transition-colors duration-150", {
+			"border-primary-500 bg-primary-500/5 dark:border-primary-400 dark:bg-primary-400/10": F,
+			"border-primary-500/60 dark:border-primary-400/60": A && !F,
+			"border-gray-200 dark:border-zinc-700": !A && !F
 		}),
-		onDragOver: M,
-		onDragLeave: N,
-		onDrop: P,
-		children: [/* @__PURE__ */ f("div", {
-			className: "flex h-8 items-center gap-1 px-1",
+		onDragOver: q,
+		onDragLeave: J,
+		onDrop: Y,
+		children: [/* @__PURE__ */ T("div", {
+			className: "group flex h-8 cursor-pointer items-center gap-2 px-1.5 select-none",
+			role: "button",
+			tabIndex: 0,
+			"aria-expanded": A,
+			onClick: V,
+			onKeyDown: H,
 			children: [
-				/* @__PURE__ */ d("span", {
+				/* @__PURE__ */ w("span", {
 					draggable: !0,
-					className: "cursor-grab px-1 text-gray-400 hover:text-gray-600 active:cursor-grabbing dark:text-zinc-500 dark:hover:text-zinc-300",
-					onDragStart: A,
-					onDragEnd: j,
-					children: /* @__PURE__ */ d(m, {
-						icon: "fa-solid fa-grip-lines",
-						size: "xs"
-					})
-				}),
-				s.type !== "none" && /* @__PURE__ */ d("div", {
-					className: "h-4 w-4 shrink-0 rounded-sm border border-gray-300 dark:border-zinc-600",
-					style: { background: E }
+					className: "flex h-5 w-4 cursor-grab items-center justify-center text-zinc-400 hover:text-zinc-700 active:cursor-grabbing dark:text-zinc-500 dark:hover:text-zinc-200",
+					title: "Drag to reorder — the first layer is drawn on top",
+					onClick: U,
+					onDragStart: G,
+					onDragEnd: K,
+					children: /* @__PURE__ */ w("i", { className: "fa-solid fa-grip-vertical text-xs" })
 				}),
-				/* @__PURE__ */ d("span", {
-					className: "flex-1 truncate text-xs text-gray-600 dark:text-zinc-400",
-					children: g[s.type]
+				/* @__PURE__ */ w(c, {
+					className: "h-5 w-5",
+					value: L,
+					property: "background"
 				}),
-				/* @__PURE__ */ d("button", {
-					type: "button",
-					className: "cursor-pointer p-1 text-gray-400 hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300",
-					onClick: O,
-					title: y ? "Collapse" : "Expand",
-					children: /* @__PURE__ */ d(m, {
-						icon: y ? "fa-solid fa-angle-up" : "fa-solid fa-angle-down",
-						size: "xs"
-					})
+				/* @__PURE__ */ w("span", {
+					className: "min-w-0 grow truncate text-xs text-zinc-700 dark:text-zinc-200",
+					title: i(b),
+					children: i(b)
 				}),
-				/* @__PURE__ */ d("button", {
+				/* @__PURE__ */ w("i", { className: E("fa-solid text-xs text-zinc-400 dark:text-zinc-500", {
+					"fa-angle-up": A,
+					"fa-angle-down": !A
+				}) }),
+				/* @__PURE__ */ w("button", {
 					type: "button",
-					className: "cursor-pointer p-1 text-gray-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400",
-					onClick: S,
+					className: "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-zinc-400 hover:bg-red-500/10 hover:text-red-600 dark:text-zinc-500 dark:hover:text-red-400",
 					title: "Remove layer",
-					children: /* @__PURE__ */ d(m, {
-						icon: "fas fa-times",
-						size: "xs"
-					})
+					"aria-label": "Remove layer",
+					onClick: W,
+					children: /* @__PURE__ */ w("i", { className: "fa-solid fa-xmark text-xs" })
 				})
 			]
-		}), y && /* @__PURE__ */ f("div", {
-			className: "flex flex-col gap-2 border-t border-gray-200 p-2 dark:border-zinc-700",
-			children: [
-				/* @__PURE__ */ d(t, {
-					label: "Type",
-					children: /* @__PURE__ */ f(e, {
+		}), A && /* @__PURE__ */ T("div", {
+			className: "flex flex-col gap-4 border-t border-gray-200 p-2.5 dark:border-zinc-700",
+			children: [/* @__PURE__ */ T(y, {
+				title: X ? "Gradient" : n[b.type],
+				children: [
+					/* @__PURE__ */ w(o, {
+						label: "Type",
 						type: "select",
-						value: s.type,
-						onChange: D,
-						children: [
-							/* @__PURE__ */ d("option", {
-								value: "linear-gradient",
-								children: "Linear Gradient"
-							}),
-							/* @__PURE__ */ d("option", {
-								value: "radial-gradient",
-								children: "Radial Gradient"
-							}),
-							/* @__PURE__ */ d("option", {
-								value: "conic-gradient",
-								children: "Conic Gradient"
-							}),
-							/* @__PURE__ */ d("option", {
-								value: "url",
-								children: "Image URL"
-							}),
-							/* @__PURE__ */ d("option", {
-								value: "none",
-								children: "None"
-							})
-						]
+						value: b.type,
+						onChange: R,
+						children: t.map((e) => /* @__PURE__ */ w("option", {
+							value: e,
+							children: n[e]
+						}, e))
+					}),
+					b.type === "url" && /* @__PURE__ */ w(d, {
+						layer: b,
+						onChange: M
+					}),
+					b.type === "raw" && /* @__PURE__ */ w(m, {
+						layer: b,
+						onChange: M
+					}),
+					b.type === "linear-gradient" && /* @__PURE__ */ w(f, {
+						layer: b,
+						onChange: M
+					}),
+					b.type === "radial-gradient" && /* @__PURE__ */ w(p, {
+						layer: b,
+						onChange: M
+					}),
+					b.type === "conic-gradient" && /* @__PURE__ */ w(u, {
+						layer: b,
+						onChange: M
+					}),
+					X && /* @__PURE__ */ w(D, {
+						size: "xs",
+						label: "Repeat the gradient",
+						checked: b.repeating,
+						onChange: z
 					})
-				}),
-				s.type === "url" && /* @__PURE__ */ d(i, {
-					layer: s,
-					onChange: x
-				}),
-				s.type === "linear-gradient" && /* @__PURE__ */ d(a, {
-					layer: s,
-					onChange: x
-				}),
-				s.type === "radial-gradient" && /* @__PURE__ */ d(o, {
-					layer: s,
-					onChange: x
-				}),
-				s.type === "conic-gradient" && /* @__PURE__ */ d(r, {
-					layer: s,
-					onChange: x
-				}),
-				s.type !== "none" && /* @__PURE__ */ d(t, {
-					label: "Clip",
-					children: /* @__PURE__ */ d(e, {
-						type: "select",
-						value: s.clip,
-						onChange: k,
-						children: _.map((e) => /* @__PURE__ */ d("option", {
-							value: e.value,
-							children: e.label
-						}, e.value))
+				]
+			}), Z && /* @__PURE__ */ T(y, {
+				title: "Placement",
+				children: [
+					/* @__PURE__ */ w(_, {
+						layer: b,
+						onChange: M
+					}),
+					/* @__PURE__ */ w(g, {
+						layer: b,
+						onChange: M
+					}),
+					/* @__PURE__ */ w(v, {
+						layer: b,
+						onChange: M
+					}),
+					/* @__PURE__ */ w(h, {
+						layer: b,
+						onChange: M
+					}),
+					/* @__PURE__ */ w(s, {
+						label: "Clip",
+						children: /* @__PURE__ */ w(o, {
+							type: "select",
+							value: b.clip,
+							onChange: B,
+							children: e.map((e) => /* @__PURE__ */ w("option", {
+								value: e.value,
+								children: e.label
+							}, e.value))
+						})
 					})
-				})
-			]
+				]
+			})]
 		})]
 	});
 });
 //#endregion
-export { v as default };
+export { k as default };

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

@@ -0,0 +1,11 @@
+import { BackgroundLayer, BackgroundLayerType } from '../../helpers/backgroundParser';
+export declare const LAYER_TYPE_LABELS: Record<BackgroundLayerType, string>;
+/** The order the type picker lists them in. */
+export declare const LAYER_TYPES: BackgroundLayerType[];
+export declare const CLIP_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const isGradient: (type: BackgroundLayerType) => boolean;
+/** How a layer's row names it: what it is, and the one detail that tells two of a kind apart. */
+export declare const layerSummary: (layer: BackgroundLayer) => string;

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

@@ -0,0 +1,45 @@
+//#region src/components/StyleInspector/categories/Background/components/BackgroundLayer/helpers.ts
+var e = {
+	none: "None",
+	url: "Image",
+	"linear-gradient": "Linear gradient",
+	"radial-gradient": "Radial gradient",
+	"conic-gradient": "Conic gradient",
+	raw: "Custom (CSS)"
+}, t = [
+	"linear-gradient",
+	"radial-gradient",
+	"conic-gradient",
+	"url",
+	"raw",
+	"none"
+], n = [
+	{
+		value: "border-box",
+		label: "Border box"
+	},
+	{
+		value: "padding-box",
+		label: "Padding box"
+	},
+	{
+		value: "content-box",
+		label: "Content box"
+	},
+	{
+		value: "text",
+		label: "Text"
+	}
+], r = (e) => e === "linear-gradient" || e === "radial-gradient" || e === "conic-gradient", i = (e) => e.split(/[?#]/)[0].split("/").filter(Boolean).at(-1) ?? e, a = (t) => {
+	let n = `${t.repeating ? "Repeating " : ""}${e[t.type]}`;
+	switch (t.type) {
+		case "url": return t.url ? `${n} · ${i(t.url)}` : `${n} · no URL yet`;
+		case "raw": return `Custom · ${t.raw}`;
+		case "linear-gradient": return `${n} · ${t.angle || "to bottom"}`;
+		case "radial-gradient": return `${n} · ${t.radialShape}`;
+		case "conic-gradient": return `${n} · from ${t.conicAngle || "0deg"}`;
+		default: return n;
+	}
+};
+//#endregion
+export { n as CLIP_OPTIONS, t as LAYER_TYPES, e as LAYER_TYPE_LABELS, r as isGradient, a as layerSummary };

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

@@ -1,39 +1,42 @@
-import e from "../../../../components/CategoryOption/index.mjs";
-import t from "../../../../components/CategorySection/index.mjs";
-import { useCallback as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+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 } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/components/BackgroundPosition/BackgroundPosition.tsx
-var a = [
+var o = [
 	"center",
 	"top",
 	"right",
 	"bottom",
 	"left",
 	"auto"
-], o = ({ layer: o, onChange: s }) => {
-	let c = n((e) => s?.({
-		...o,
-		positionX: String(e)
-	}), [o, s]), l = n((e) => s?.({
-		...o,
-		positionY: String(e)
-	}), [o, s]);
-	return /* @__PURE__ */ i(t, {
+], s = ({ layer: s, onChange: c }) => {
+	let l = r((t) => c?.({
+		...s,
+		positionX: e(t)
+	}), [s, c]), u = r((t) => c?.({
+		...s,
+		positionY: e(t)
+	}), [s, c]);
+	return /* @__PURE__ */ a(n, {
 		label: "Position",
-		children: [/* @__PURE__ */ r(e, {
+		children: [/* @__PURE__ */ i(t, {
 			label: "X",
 			type: "metric",
-			value: o.positionX,
-			allowedWords: a,
-			onChange: c
-		}), /* @__PURE__ */ r(e, {
+			value: s.positionX,
+			allowedWords: o,
+			min: -Infinity,
+			onChange: l
+		}), /* @__PURE__ */ i(t, {
 			label: "Y",
 			type: "metric",
-			value: o.positionY,
-			allowedWords: a,
-			onChange: l
+			value: s.positionY,
+			allowedWords: o,
+			min: -Infinity,
+			onChange: u
 		})]
 	});
 };
 //#endregion
-export { o as default };
+export { s as default };

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

@@ -1,86 +1,95 @@
-import e from "../../../../components/CategoryOption/index.mjs";
-import t from "../../../../components/CategorySection/index.mjs";
-import { useCallback as n, useMemo as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { asText as e } from "../../../../cssValues.mjs";
+import t from "../../../../components/CategoryOption/index.mjs";
+import n from "../../../../components/CategorySection/index.mjs";
+import { sizeParts as r, sizePreset as i } from "./helpers.mjs";
+import { useCallback as a, useMemo as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/components/BackgroundSize/BackgroundSize.tsx
-var s = ({ layer: s, onChange: c }) => {
-	let l = s.size === "auto" || s.size.includes(" ") || /^\d/.test(s.size), u = r(() => s.size.includes(" ") ? s.size.split(" ") : ["auto", "auto"], [s.size]), d = n((e) => {
-		let t = String(e);
-		if (t === "cover" || t === "contain") c?.({
-			...s,
-			size: t
-		});
-		else {
-			let e = s.size;
-			c?.({
-				...s,
-				size: e === "cover" || e === "contain" ? "auto auto" : e
+var u = ({ layer: u, onChange: d }) => {
+	let f = i(u.size), [p, m] = r(u.size), h = a((t) => {
+		let n = e(t);
+		if (n !== "custom") {
+			d?.({
+				...u,
+				size: n
 			});
+			return;
 		}
-	}, [s, c]), f = s.size === "cover" ? "cover" : s.size === "contain" ? "contain" : "auto", p = n((e) => c?.({
-		...s,
-		size: `${String(e)} ${u[1] ?? "auto"}`
+		d?.({
+			...u,
+			size: f === "custom" ? u.size : "auto"
+		});
+	}, [
+		u,
+		d,
+		f
+	]), g = a((t) => d?.({
+		...u,
+		size: `${e(t)} ${m}`
 	}), [
-		s,
-		c,
-		u
-	]), m = n((e) => c?.({
-		...s,
-		size: `${u[0] ?? "auto"} ${String(e)}`
+		m,
+		u,
+		d
+	]), _ = a((t) => d?.({
+		...u,
+		size: `${p} ${e(t)}`
 	}), [
-		s,
-		c,
-		u
-	]), h = r(() => [
+		u,
+		d,
+		p
+	]), v = o(() => [
 		{
-			value: "auto",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
+			value: "custom",
+			icon: /* @__PURE__ */ c("span", {
+				className: "px-1.5 text-xs select-none",
 				children: "Custom"
 			}),
-			description: "Custom dimensions",
-			active: f === "auto",
+			description: "A width and a height of its own",
+			active: f === "custom",
 			size: "custom"
 		},
 		{
 			value: "cover",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
+			icon: /* @__PURE__ */ c("span", {
+				className: "px-1.5 text-xs select-none",
 				children: "Cover"
 			}),
-			description: "Cover the element",
+			description: "Fill the element, cropping what overflows",
 			active: f === "cover",
 			size: "custom"
 		},
 		{
 			value: "contain",
-			icon: /* @__PURE__ */ a("div", {
-				className: "px-1 text-xs select-none",
+			icon: /* @__PURE__ */ c("span", {
+				className: "px-1.5 text-xs select-none",
 				children: "Contain"
 			}),
-			description: "Fit inside the element",
+			description: "Fit inside the element, whole",
 			active: f === "contain",
 			size: "custom"
 		}
 	], [f]);
-	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
 		label: "Size",
-		children: /* @__PURE__ */ a(e, {
+		children: /* @__PURE__ */ c(t, {
 			type: "iconGroup",
-			items: h,
-			onChange: d
+			items: v,
+			onChange: h
 		})
-	}), l && /* @__PURE__ */ o(t, { children: [/* @__PURE__ */ a(e, {
-		label: "W",
-		type: "metric",
-		value: u[0],
-		onChange: p
-	}), /* @__PURE__ */ a(e, {
-		label: "H",
-		type: "metric",
-		value: u[1],
-		onChange: m
-	})] })] });
+	}), f === "custom" && /* @__PURE__ */ l(n, {
+		label: "",
+		children: [/* @__PURE__ */ c(t, {
+			label: "Width",
+			type: "metric",
+			value: p,
+			onChange: g
+		}), /* @__PURE__ */ c(t, {
+			label: "Height",
+			type: "metric",
+			value: m,
+			onChange: _
+		})]
+	})] });
 };
 //#endregion
-export { s as default };
+export { u as default };

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

@@ -0,0 +1,4 @@
+/** Which of the three ways a size is written: one of the two keywords, or a width and a height. */
+export declare const sizePreset: (size: string) => "cover" | "contain" | "custom";
+/** A size as its width and its height. One value is the width, the height then follows the image (`auto`). */
+export declare const sizeParts: (size: string) => [string, string];

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

@@ -0,0 +1,8 @@
+//#region src/components/StyleInspector/categories/Background/components/BackgroundSize/helpers.ts
+var e = (e) => e === "cover" || e === "contain" ? e : "custom", t = (t) => {
+	if (e(t) !== "custom") return ["auto", "auto"];
+	let [n = "auto", r = "auto"] = t.split(" ").filter(Boolean);
+	return [n, r];
+};
+//#endregion
+export { t as sizeParts, e as sizePreset };