@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -1,16 +1,27 @@
 export type GradientStop = {
     id: string;
     color: string;
+    /** Empty, one position or two (`10% 20%`, a hard band) — as written. */
     position: string;
 };
-export type BackgroundLayerType = 'none' | 'url' | 'linear-gradient' | 'radial-gradient' | 'conic-gradient';
+/**
+ * What a layer is. `raw` is any image the editor has no controls for — a token standing for it, `image-set()`,
+ * `cross-fade()` — kept word for word, so editing another layer never rewrites it into something else.
+ */
+export type BackgroundLayerType = 'none' | 'url' | 'linear-gradient' | 'radial-gradient' | 'conic-gradient' | 'raw';
 export type BackgroundLayer = {
     id: string;
     type: BackgroundLayerType;
     url: string;
+    raw: string;
+    /** A gradient's `repeating-` form. */
+    repeating: boolean;
+    /** Empty for CSS's default (to bottom), which is then not written. */
     angle: string;
     radialShape: 'circle' | 'ellipse';
+    /** A keyword (`closest-side`…) or an explicit size (`100px`, `40% 20%`). */
     radialExtent: string;
+    /** Empty for CSS's default (center). */
     radialPosition: string;
     conicAngle: string;
     conicPosition: string;
@@ -23,8 +34,17 @@ export type BackgroundLayer = {
     clip: string;
 };
 export declare const DEFAULT_STOPS: GradientStop[];
+/** What a layer added in the editor starts as — a gradient or a picture placed once, not tiled. */
 export declare const DEFAULT_LAYER_PROPS: {
+    repeat: string;
+    size: string;
+    positionX: string;
+    positionY: string;
+    attachment: string;
+    clip: string;
     url: string;
+    raw: string;
+    repeating: boolean;
     angle: string;
     radialShape: "ellipse";
     radialExtent: string;
@@ -32,12 +52,6 @@ export declare const DEFAULT_LAYER_PROPS: {
     conicAngle: string;
     conicPosition: string;
     stops: GradientStop[];
-    size: string;
-    positionX: string;
-    positionY: string;
-    repeat: string;
-    attachment: string;
-    clip: string;
 };
 export declare const newLayerId: () => string;
 export declare const newStopId: () => string;

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

@@ -1,5 +1,6 @@
+import { splitBySpaceOutsideParens as e } from "../../../cssValues.mjs";
 //#region src/components/StyleInspector/categories/Background/helpers/backgroundParser.ts
-var e = [{
+var t = [{
 	id: "stop-default-0",
 	color: "#000000",
 	position: "0%"
@@ -7,161 +8,161 @@ var e = [{
 	id: "stop-default-1",
 	color: "#ffffff",
 	position: "100%"
-}], t = {
-	url: "",
-	angle: "180deg",
-	radialShape: "ellipse",
-	radialExtent: "farthest-corner",
-	radialPosition: "50% 50%",
-	conicAngle: "0deg",
-	conicPosition: "50% 50%",
-	stops: e,
+}], n = {
 	size: "auto",
 	positionX: "0%",
 	positionY: "0%",
-	repeat: "no-repeat",
+	repeat: "repeat",
 	attachment: "scroll",
 	clip: "border-box"
-}, n = 0, r = () => `layer-${++n}`, i = () => `stop-${++n}`;
-function a(e) {
+}, r = {
+	url: "",
+	raw: "",
+	repeating: !1,
+	angle: "",
+	radialShape: "ellipse",
+	radialExtent: "farthest-corner",
+	radialPosition: "",
+	conicAngle: "0deg",
+	conicPosition: "",
+	stops: t,
+	...n,
+	repeat: "no-repeat"
+}, i = 0, a = () => `layer-${++i}`, o = () => `stop-${++i}`;
+function s(e) {
 	let t = [], n = 0, r = "";
 	for (let i of e) i === "(" ? n++ : i === ")" && n--, i === "," && n === 0 ? (t.push(r.trim()), r = "") : r += i;
 	return r.trim() && t.push(r.trim()), t;
 }
-function o(e) {
-	let t = e.trim(), n = 0, r = -1;
-	for (let e = 0; e < t.length; e++) t[e] === "(" ? n++ : t[e] === ")" ? n-- : t[e] === " " && n === 0 && (r = e);
-	if (r !== -1) {
-		let e = t.slice(r + 1).trim();
-		if (/^-?[\d.]/.test(e) || /\d(px|em|rem|%|vw|vh|dvh|dvw|lvh|lvw|fr|ch|ex)$/.test(e)) return {
-			color: t.slice(0, r).trim(),
-			position: e
-		};
-	}
+var c = /^[-+]?(\d|\.\d)[\w.%]*$|^calc\(/i, l = /^[-+]?(\d|\.\d)[\d.]*(deg|rad|turn|grad)?$/i, u = (e) => c.test(e);
+function d(t) {
+	let n = e(t.trim()), r = n.length;
+	for (; r > 1 && u(n[r - 1]);) r--;
 	return {
-		color: t,
-		position: ""
+		color: n.slice(0, r).join(" "),
+		position: n.slice(r).join(" ")
 	};
 }
-function s(e) {
-	return a(e).map((e) => ({
-		id: i(),
-		...o(e)
+function f(e) {
+	return e.map((e) => ({
+		id: o(),
+		...d(e)
 	}));
 }
-function c(e) {
-	let n = a(e), r = (n[0] ?? "").trim(), i = /^\d/.test(r) || r.startsWith("to ");
+function p(e) {
+	let t = s(e), n = (t[0] ?? "").trim(), r = l.test(n) || n.startsWith("to ");
 	return {
-		angle: i ? r : t.angle,
-		stops: s(n.slice(+!!i).join(", "))
+		angle: r ? n : "",
+		stops: f(t.slice(+!!r))
 	};
 }
-function l(e) {
-	let n = a(e), r = (n[0] ?? "").trim(), i = t.radialShape, o = t.radialExtent, c = t.radialPosition, l = 0;
-	if (/circle|ellipse|closest|farthest|at\s/.test(r)) {
-		l = 1, r.includes("circle") && (i = "circle"), r.includes("ellipse") && (i = "ellipse"), r.includes("closest-side") ? o = "closest-side" : r.includes("closest-corner") ? o = "closest-corner" : r.includes("farthest-side") ? o = "farthest-side" : r.includes("farthest-corner") && (o = "farthest-corner");
-		let e = r.match(/at\s+(.+)$/);
-		e && (c = e[1].trim());
-	}
-	let u = n.slice(l).join(", ");
+var m = /^(circle|ellipse|closest-|farthest-|at\s)|\sat\s/;
+function h(t) {
+	let n = s(t), i = (n[0] ?? "").trim();
+	if (!(m.test(i) || u(e(i)[0] ?? ""))) return { stops: f(n) };
+	let [a, o = ""] = i.startsWith("at ") ? ["", i.slice(3)] : i.split(/\s+at\s+/), c = e(a), l = c.find((e) => e === "circle" || e === "ellipse"), d = c.filter((e) => e !== "circle" && e !== "ellipse").join(" ");
 	return {
-		radialShape: i,
-		radialExtent: o,
-		radialPosition: c,
-		stops: s(u)
+		radialShape: l === "circle" ? "circle" : "ellipse",
+		radialExtent: d || r.radialExtent,
+		radialPosition: o.trim(),
+		stops: f(n.slice(1))
 	};
 }
-function u(e) {
-	let n = a(e), r = (n[0] ?? "").trim(), i = t.conicAngle, o = t.conicPosition, c = 0;
-	if (r.startsWith("from ") || r.startsWith("at ")) {
-		c = 1;
-		let e = r.match(/from\s+([\d.]+(?:deg|rad|turn|grad))/);
-		e && (i = e[1]);
-		let t = r.match(/at\s+(.+?)(?:\s+from|$)/);
-		t && (o = t[1].trim());
-	}
-	let l = n.slice(c).join(", ");
-	return {
-		conicAngle: i,
-		conicPosition: o,
-		stops: s(l)
+function g(e) {
+	let t = s(e), n = (t[0] ?? "").trim();
+	return !n.startsWith("from ") && !n.startsWith("at ") ? { stops: f(t) } : {
+		conicAngle: /from\s+(\S+)/.exec(n)?.[1] ?? r.conicAngle,
+		conicPosition: /at\s+(.+?)(?:\s+from\s|$)/.exec(n)?.[1].trim() ?? "",
+		stops: f(t.slice(1))
 	};
 }
-function d(e) {
+var _ = /^(repeating-)?(linear|radial|conic)-gradient\(([\s\S]+)\)$/i, v = /^url\(\s*(?:"(.*)"|'(.*)'|(.*?))\s*\)$/i;
+function y(e) {
 	let t = e.trim();
 	if (!t || t === "none") return { type: "none" };
-	let n = t.match(/^url\("(.*)"\)$/i);
+	let n = v.exec(t);
 	if (n) return {
 		type: "url",
-		url: n[1]
-	};
-	let r = t.match(/^url\('(.*)'\)$/i);
-	if (r) return {
-		type: "url",
-		url: r[1]
+		url: n.slice(1).find(Boolean) ?? ""
 	};
-	let i = t.match(/^url\((.*)\)$/i);
-	if (i) return {
-		type: "url",
-		url: i[1]
+	let r = _.exec(t);
+	if (!r) return {
+		type: "raw",
+		raw: t
 	};
-	let a = t.match(/^linear-gradient\(([\s\S]+)\)$/i);
-	if (a) return {
+	let i = !!r[1], a = r[2].toLowerCase();
+	return a === "linear" ? {
 		type: "linear-gradient",
-		...c(a[1])
-	};
-	let o = t.match(/^radial-gradient\(([\s\S]+)\)$/i);
-	if (o) return {
+		repeating: i,
+		...p(r[3])
+	} : a === "radial" ? {
 		type: "radial-gradient",
-		...l(o[1])
-	};
-	let s = t.match(/^conic-gradient\(([\s\S]+)\)$/i);
-	return s ? {
+		repeating: i,
+		...h(r[3])
+	} : {
 		type: "conic-gradient",
-		...u(s[1])
-	} : { type: "none" };
+		repeating: i,
+		...g(r[3])
+	};
 }
-function f(e) {
-	let n = (e["background-image"] ?? "").trim();
-	if (!n || n === "none") return [];
-	let i = a(n), o = a(e["background-size"] ?? ""), s = a(e["background-position"] ?? ""), c = a(e["background-repeat"] ?? ""), l = a(e["background-attachment"] ?? ""), u = a(e["background-clip"] ?? "");
-	return i.map((e, n) => {
-		let i = d(e), a = (s[n] ?? "").split(" ").filter(Boolean);
+var b = /* @__PURE__ */ new Set(["top", "bottom"]), x = /* @__PURE__ */ new Set(["left", "right"]), S = (t) => {
+	let r = e(t ?? "");
+	if (r.length === 0) return [n.positionX, n.positionY];
+	if (r.length === 1) return b.has(r[0]) ? ["center", r[0]] : [r[0], "center"];
+	if (r.length === 2) {
+		let [e, t] = r;
+		return b.has(e) || x.has(t) ? [t, e] : [e, t];
+	}
+	return r.length === 3 ? u(r[1]) ? [`${r[0]} ${r[1]}`, r[2]] : [r[0], `${r[1]} ${r[2]}`] : [`${r[0]} ${r[1]}`, r.slice(2).join(" ")];
+}, C = (e, t) => e.length > 0 ? e[t % e.length] : void 0;
+function w(e) {
+	let t = (e["background-image"] ?? "").trim();
+	if (!t || t === "none") return [];
+	let i = s(t), o = s(e["background-size"] ?? ""), c = s(e["background-position"] ?? ""), l = s(e["background-repeat"] ?? ""), u = s(e["background-attachment"] ?? ""), d = s(e["background-clip"] ?? "");
+	return i.map((e, t) => {
+		let [i, s] = S(C(c, t));
 		return {
-			...t,
-			...i,
-			id: r(),
-			size: o[n] ?? t.size,
-			positionX: a.at(0) ?? t.positionX,
-			positionY: a.at(1) ?? a.at(0) ?? t.positionY,
-			repeat: c[n] ?? t.repeat,
-			attachment: l[n] ?? t.attachment,
-			clip: u[n] ?? t.clip
+			...r,
+			...y(e),
+			id: a(),
+			size: C(o, t) ?? n.size,
+			positionX: i,
+			positionY: s,
+			repeat: C(l, t) ?? n.repeat,
+			attachment: C(u, t) ?? n.attachment,
+			clip: C(d, t) ?? n.clip
 		};
 	});
 }
-function p(e) {
+function T(e) {
 	return e.position ? `${e.color} ${e.position}` : e.color;
 }
-function m(e) {
+var E = (e) => {
+	switch (e.type) {
+		case "linear-gradient": return e.angle;
+		case "radial-gradient": return [
+			e.radialShape === "ellipse" ? "" : e.radialShape,
+			e.radialExtent === "farthest-corner" ? "" : e.radialExtent,
+			e.radialPosition ? `at ${e.radialPosition}` : ""
+		].filter(Boolean).join(" ");
+		case "conic-gradient": return [e.conicAngle && e.conicAngle !== "0deg" ? `from ${e.conicAngle}` : "", e.conicPosition ? `at ${e.conicPosition}` : ""].filter(Boolean).join(" ");
+		default: return "";
+	}
+};
+function D(e) {
 	switch (e.type) {
 		case "url": return `url("${e.url}")`;
-		case "linear-gradient": {
-			let t = e.stops.map(p).join(", ");
-			return `linear-gradient(${e.angle}, ${t})`;
-		}
-		case "radial-gradient": {
-			let t = e.stops.map(p).join(", "), n = e.radialShape === "ellipse" ? "" : `${e.radialShape} `, r = e.radialExtent === "farthest-corner" ? "" : `${e.radialExtent} `, i = `at ${e.radialPosition}`;
-			return `radial-gradient(${n || r ? `${n}${r}${i}` : i}, ${t})`;
-		}
+		case "raw": return e.raw || "none";
+		case "linear-gradient":
+		case "radial-gradient":
 		case "conic-gradient": {
-			let t = e.stops.map(p).join(", ");
-			return `conic-gradient(${e.conicAngle === "0deg" ? "" : `from ${e.conicAngle} `}${`at ${e.conicPosition}`}, ${t})`;
+			let t = E(e), n = e.stops.map(T).join(", ");
+			return `${e.repeating ? "repeating-" : ""}${e.type}(${t ? `${t}, ` : ""}${n})`;
 		}
 		default: return "none";
 	}
 }
-function h(e) {
+function O(e) {
 	return e.length === 0 ? {
 		"background-image": void 0,
 		"background-size": void 0,
@@ -170,7 +171,7 @@ function h(e) {
 		"background-attachment": void 0,
 		"background-clip": void 0
 	} : {
-		"background-image": e.map(m).join(", "),
+		"background-image": e.map(D).join(", "),
 		"background-size": e.map((e) => e.size).join(", "),
 		"background-position": e.map((e) => `${e.positionX} ${e.positionY}`).join(", "),
 		"background-repeat": e.map((e) => e.repeat).join(", "),
@@ -179,4 +180,4 @@ function h(e) {
 	};
 }
 //#endregion
-export { t as DEFAULT_LAYER_PROPS, e as DEFAULT_STOPS, r as newLayerId, i as newStopId, f as parseBackgroundLayers, m as serializeLayerImage, h as serializeLayersToCSS, p as serializeStop, a as splitTopLevelCommas };
+export { r as DEFAULT_LAYER_PROPS, t as DEFAULT_STOPS, a as newLayerId, o as newStopId, w as parseBackgroundLayers, D as serializeLayerImage, O as serializeLayersToCSS, T as serializeStop, s as splitTopLevelCommas };

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

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+/** The properties a background's layers are written across, one comma-separated list each. */
+export declare const BG_LAYER_KEYS: StyleCategory[];
+/**
+ * The layers' properties as one string — what tells a change made elsewhere (undo, another collaborator) from the one
+ * the editor just wrote, which it already shows.
+ */
+export declare const layerValuesKey: (record: Partial<Record<StyleCategory, StyleValue>>) => string;

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

@@ -0,0 +1,11 @@
+//#region src/components/StyleInspector/categories/Background/helpers/layerValues.ts
+var e = [
+	"background-image",
+	"background-size",
+	"background-position",
+	"background-repeat",
+	"background-attachment",
+	"background-clip"
+], t = (t) => e.map((e) => String(t[e])).join("||");
+//#endregion
+export { e as BG_LAYER_KEYS, t as layerValuesKey };

package/dist/components/StyleInspector/categories/Background/modes/ConicGradientMode.mjs

@@ -1,100 +1,65 @@
-import e from "../../../components/CategoryOption/index.mjs";
-import t from "../../../components/CategorySection/index.mjs";
-import n from "../components/BackgroundPosition/index.mjs";
-import r from "../components/BackgroundSize/index.mjs";
-import i from "../components/BackgroundTile/index.mjs";
-import a from "../components/GradientStopBar/index.mjs";
-import { useCallback as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } 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 { ANGLE_UNITS as r, CENTER_X_WORDS as i, CENTER_Y_WORDS as a, centerParts as o, joinCenter as s } from "./helpers.mjs";
+import c from "../components/GradientStopBar/index.mjs";
+import { useCallback as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/modes/ConicGradientMode.tsx
-var u = ({ layer: u, onChange: d }) => {
-	let f = o((e) => d?.({
-		...u,
-		conicAngle: String(e)
-	}), [u, d]), p = o((e) => {
-		let t = u.conicPosition.split(" ");
-		d?.({
-			...u,
-			conicPosition: `${String(e)} ${t[1] ?? "50%"}`
-		});
-	}, [u, d]), m = o((e) => {
-		let t = u.conicPosition.split(" ");
-		d?.({
-			...u,
-			conicPosition: `${t[0] ?? "50%"} ${String(e)}`
-		});
-	}, [u, d]), h = o((e) => d?.({
-		...u,
+var p = ({ layer: p, onChange: m }) => {
+	let [h, g] = o(p.conicPosition), _ = l((t) => m?.({
+		...p,
+		conicAngle: e(t)
+	}), [p, m]), v = l((t) => m?.({
+		...p,
+		conicPosition: s(e(t), g)
+	}), [
+		g,
+		p,
+		m
+	]), y = l((t) => m?.({
+		...p,
+		conicPosition: s(h, e(t))
+	}), [
+		h,
+		p,
+		m
+	]), b = l((e) => m?.({
+		...p,
 		stops: e
-	}), [u, d]);
-	return /* @__PURE__ */ l(s, { children: [
-		/* @__PURE__ */ c(t, {
-			label: "Start Angle",
-			children: /* @__PURE__ */ c(e, {
+	}), [p, m]);
+	return /* @__PURE__ */ f(u, { children: [
+		/* @__PURE__ */ d(n, {
+			label: "Start angle",
+			children: /* @__PURE__ */ d(t, {
 				type: "metric",
-				value: u.conicAngle,
-				units: [
-					{
-						label: "deg",
-						value: "deg"
-					},
-					{
-						label: "rad",
-						value: "rad"
-					},
-					{
-						label: "turn",
-						value: "turn"
-					}
-				],
-				min: 0,
-				max: 360,
-				onChange: f
+				value: p.conicAngle,
+				units: r,
+				min: -Infinity,
+				onChange: _
 			})
 		}),
-		/* @__PURE__ */ l(t, {
-			label: "Position",
-			children: [/* @__PURE__ */ c(e, {
+		/* @__PURE__ */ f(n, {
+			label: "Center",
+			children: [/* @__PURE__ */ d(t, {
 				type: "metric",
-				value: u.conicPosition.split(" ")[0] ?? "50%",
-				allowedWords: [
-					"center",
-					"left",
-					"right"
-				],
-				onChange: p
-			}), /* @__PURE__ */ c(e, {
+				value: h,
+				allowedWords: i,
+				min: -Infinity,
+				onChange: v
+			}), /* @__PURE__ */ d(t, {
 				type: "metric",
-				value: u.conicPosition.split(" ")[1] ?? "50%",
-				allowedWords: [
-					"center",
-					"top",
-					"bottom"
-				],
-				onChange: m
+				value: g,
+				allowedWords: a,
+				min: -Infinity,
+				onChange: y
 			})]
 		}),
-		/* @__PURE__ */ c(t, {
-			label: "Gradient",
-			direction: "column",
-			children: /* @__PURE__ */ c(a, {
-				stops: u.stops,
-				onChange: h
-			})
-		}),
-		/* @__PURE__ */ c(r, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(n, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(i, {
-			layer: u,
-			onChange: d
+		/* @__PURE__ */ d(c, {
+			stops: p.stops,
+			onChange: b
 		})
 	] });
 };
 //#endregion
-export { u as default };
+export { p as default };

package/dist/components/StyleInspector/categories/Background/modes/ImageMode.mjs

@@ -1,80 +1,19 @@
-import e from "../../../components/CategoryOption/index.mjs";
-import t from "../../../components/CategorySection/index.mjs";
-import n from "../components/BackgroundPosition/index.mjs";
-import r from "../components/BackgroundSize/index.mjs";
-import i from "../components/BackgroundTile/index.mjs";
-import { useCallback as a, useMemo as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { asText as e } from "../../../cssValues.mjs";
+import t from "../../../components/CategoryOption/index.mjs";
+import { useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/modes/ImageMode.tsx
-var u = ({ layer: u, onChange: d }) => {
-	let f = a((e) => d?.({
-		...u,
-		url: String(e)
-	}), [u, d]), p = a((e) => d?.({
-		...u,
-		attachment: String(e)
-	}), [u, d]), m = o(() => [
-		{
-			value: "fixed",
-			icon: /* @__PURE__ */ c("div", {
-				className: "px-1 text-xs select-none",
-				children: "Fixed"
-			}),
-			description: "Fixed to viewport",
-			active: u.attachment === "fixed",
-			size: "custom"
-		},
-		{
-			value: "local",
-			icon: /* @__PURE__ */ c("div", {
-				className: "px-1 text-xs select-none",
-				children: "Local"
-			}),
-			description: "Scrolls with content",
-			active: u.attachment === "local",
-			size: "custom"
-		},
-		{
-			value: "scroll",
-			icon: /* @__PURE__ */ c("div", {
-				className: "px-1 text-xs select-none",
-				children: "Scroll"
-			}),
-			description: "Scrolls with element",
-			active: u.attachment === "scroll",
-			size: "custom"
-		}
-	], [u.attachment]);
-	return /* @__PURE__ */ l(s, { children: [
-		/* @__PURE__ */ c(t, {
-			label: "URL",
-			children: /* @__PURE__ */ c(e, {
-				type: "input",
-				value: u.url,
-				onChange: f
-			})
-		}),
-		/* @__PURE__ */ c(r, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(n, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(i, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(t, {
-			label: "Attachment",
-			children: /* @__PURE__ */ c(e, {
-				type: "iconGroup",
-				items: m,
-				onChange: p
-			})
-		})
-	] });
+var i = ({ layer: i, onChange: a }) => {
+	let o = n((t) => a?.({
+		...i,
+		url: e(t)
+	}), [i, a]);
+	return /* @__PURE__ */ r(t, {
+		label: "URL",
+		type: "input",
+		value: i.url,
+		onChange: o
+	});
 };
 //#endregion
-export { u as default };
+export { i as default };