@unpunnyfuns/swatchbook-blocks 0.6.0 → 0.6.2

package/dist/index.mjs

@@ -615,21 +615,13 @@ function formatDimension$2(raw) {
 	}
 	return JSON.stringify(raw);
 }
-function formatColor$2(raw) {
+function formatSubColor$1(raw, format) {
 	if (raw == null) return "—";
-	if (typeof raw === "string") return raw;
-	if (typeof raw === "object") {
-		const v = raw;
-		if (Array.isArray(v.components) && typeof v.colorSpace === "string") {
-			const parts = v.components.map((c) => typeof c === "number" ? c.toFixed(3) : String(c));
-			const alpha = typeof v.alpha === "number" && v.alpha !== 1 ? `, ${v.alpha}` : "";
-			return `${v.colorSpace}(${parts.join(" ")}${alpha})`;
-		}
-	}
-	return JSON.stringify(raw);
+	return formatColor(raw, format).value;
 }
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "border") return false;
@@ -696,7 +688,7 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 							className: "sb-border-preview__breakdown-key",
 							children: "color"
 						}),
-						/* @__PURE__ */ jsx("span", { children: formatColor$2(row.value.color) })
+						/* @__PURE__ */ jsx("span", { children: formatSubColor$1(row.value.color, colorFormat) })
 					]
 				})
 			]
@@ -1337,6 +1329,7 @@ function stopKey(path, stop, fallback) {
 }
 function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "gradient") return false;
@@ -1397,7 +1390,7 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 								style: { background: stopCssColor(stop) },
 								"aria-hidden": true
 							}),
-							/* @__PURE__ */ jsx("span", { children: stopCssColor(stop) }),
+							/* @__PURE__ */ jsx("span", { children: formatColor(stop.color, colorFormat).value }),
 							/* @__PURE__ */ jsxs("span", {
 								className: "sb-gradient-palette__stop-position",
 								children: [
@@ -1742,18 +1735,9 @@ function formatDimension(raw) {
 	}
 	return JSON.stringify(raw);
 }
-function formatColor$1(raw) {
+function formatSubColor(raw, format) {
 	if (raw == null) return "—";
-	if (typeof raw === "string") return raw;
-	if (typeof raw === "object") {
-		const v = raw;
-		if (Array.isArray(v.components) && typeof v.colorSpace === "string") {
-			const parts = v.components.map((c) => typeof c === "number" ? c.toFixed(3) : String(c));
-			const alpha = typeof v.alpha === "number" && v.alpha !== 1 ? `, ${v.alpha}` : "";
-			return `${v.colorSpace}(${parts.join(" ")}${alpha})`;
-		}
-	}
-	return JSON.stringify(raw);
+	return formatColor(raw, format).value;
 }
 function asLayers(raw) {
 	if (Array.isArray(raw)) return raw;
@@ -1765,6 +1749,7 @@ function layerKey(path, layer, fallback) {
 }
 function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "shadow") return false;
@@ -1816,23 +1801,24 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-shadow-preview__breakdown",
-					children: row.layers.length === 1 ? renderLayer(row.layers[0]) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
+					children: row.layers.length === 1 ? renderLayer(row.layers[0], colorFormat) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
 						layer,
 						index: i,
-						total: row.layers.length
+						total: row.layers.length,
+						colorFormat
 					}, layerKey(row.path, layer, i)))
 				})
 			]
 		}, row.path))]
 	});
 }
-function renderLayer(layer) {
+function renderLayer(layer, format) {
 	if (!layer) return [];
 	const entries = [
 		["offset", `${formatDimension(layer.offsetX)} ${formatDimension(layer.offsetY)}`],
 		["blur", formatDimension(layer.blur)],
 		["spread", formatDimension(layer.spread)],
-		["color", formatColor$1(layer.color)]
+		["color", formatSubColor(layer.color, format)]
 	];
 	if (layer.inset) entries.push(["inset", String(layer.inset)]);
 	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
@@ -1840,7 +1826,7 @@ function renderLayer(layer) {
 		children: k
 	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
 }
-function Layer({ layer, index, total }) {
+function Layer({ layer, index, total, colorFormat }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sb-shadow-preview__layer",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -1853,7 +1839,7 @@ function Layer({ layer, index, total }) {
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			className: cx("sb-shadow-preview__breakdown", "sb-shadow-preview__layer-breakdown"),
-			children: renderLayer(layer)
+			children: renderLayer(layer, colorFormat)
 		})]
 	});
 }
@@ -2294,46 +2280,96 @@ function analyzeVariance(path, axes, themes, themesResolved) {
 //#endregion
 //#region src/token-detail/CompositeBreakdown.tsx
 function CompositeBreakdown({ path }) {
-	const { token } = useTokenDetailData(path);
+	const { token, resolved } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
 	if (!token) return null;
 	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
 		type: token.$type,
 		rawValue: token.$value,
+		partialAliasOf: token.partialAliasOf,
+		resolved,
 		colorFormat
 	});
 }
-function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
+function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, colorFormat }) {
 	if (!rawValue || typeof rawValue !== "object") return null;
+	const objectAliases = pickObjectAliases(partialAliasOf);
+	const arrayAliases = pickArrayAliases(partialAliasOf);
+	const aliasFor = (key) => subValueChain(objectAliases?.[key], resolved);
 	if (type === "typography") {
 		const v = rawValue;
 		return renderKeyValueList([
-			["fontFamily", formatFontFamily(v["fontFamily"])],
-			["fontSize", formatDimensionValue(v["fontSize"])],
-			["fontWeight", formatPrimitive(v["fontWeight"])],
-			["lineHeight", formatPrimitive(v["lineHeight"])],
-			["letterSpacing", formatDimensionValue(v["letterSpacing"])]
+			[
+				"fontFamily",
+				formatFontFamily(v["fontFamily"]),
+				aliasFor("fontFamily")
+			],
+			[
+				"fontSize",
+				formatDimensionValue(v["fontSize"]),
+				aliasFor("fontSize")
+			],
+			[
+				"fontWeight",
+				formatPrimitive(v["fontWeight"]),
+				aliasFor("fontWeight")
+			],
+			[
+				"lineHeight",
+				formatPrimitive(v["lineHeight"]),
+				aliasFor("lineHeight")
+			],
+			[
+				"letterSpacing",
+				formatDimensionValue(v["letterSpacing"]),
+				aliasFor("letterSpacing")
+			]
 		]);
 	}
 	if (type === "border") {
 		const v = rawValue;
 		return renderKeyValueList([
-			["color", formatColorSubValue(v["color"], colorFormat)],
-			["width", formatDimensionValue(v["width"])],
-			["style", formatPrimitive(v["style"])]
+			[
+				"color",
+				formatColorSubValue(v["color"], colorFormat),
+				aliasFor("color")
+			],
+			[
+				"width",
+				formatDimensionValue(v["width"]),
+				aliasFor("width")
+			],
+			[
+				"style",
+				formatPrimitive(v["style"]),
+				aliasFor("style")
+			]
 		]);
 	}
 	if (type === "transition") {
 		const v = rawValue;
 		return renderKeyValueList([
-			["duration", formatDimensionValue(v["duration"])],
-			["timingFunction", formatPrimitive(v["timingFunction"])],
-			["delay", formatDimensionValue(v["delay"])]
+			[
+				"duration",
+				formatDimensionValue(v["duration"]),
+				aliasFor("duration")
+			],
+			[
+				"timingFunction",
+				formatPrimitive(v["timingFunction"]),
+				aliasFor("timingFunction")
+			],
+			[
+				"delay",
+				formatDimensionValue(v["delay"]),
+				aliasFor("delay")
+			]
 		]);
 	}
 	if (type === "shadow") {
 		const layers = Array.isArray(rawValue) ? rawValue : [rawValue];
 		const multi = layers.length > 1;
+		const layerAliasFor = (i, key) => subValueChain(arrayAliases?.[i]?.[key], resolved);
 		return /* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__breakdown-section",
 			children: layers.map((layer, i) => {
@@ -2347,27 +2383,33 @@ function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "color",
-							value: formatColorSubValue(v["color"], colorFormat)
+							value: formatColorSubValue(v["color"], colorFormat),
+							alias: layerAliasFor(i, "color")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "offsetX",
-							value: formatDimensionValue(v["offsetX"])
+							value: formatDimensionValue(v["offsetX"]),
+							alias: layerAliasFor(i, "offsetX")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "offsetY",
-							value: formatDimensionValue(v["offsetY"])
+							value: formatDimensionValue(v["offsetY"]),
+							alias: layerAliasFor(i, "offsetY")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "blur",
-							value: formatDimensionValue(v["blur"])
+							value: formatDimensionValue(v["blur"]),
+							alias: layerAliasFor(i, "blur")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "spread",
-							value: formatDimensionValue(v["spread"])
+							value: formatDimensionValue(v["spread"]),
+							alias: layerAliasFor(i, "spread")
 						}),
 						"inset" in v && /* @__PURE__ */ jsx(KeyValueRow, {
 							label: "inset",
-							value: formatPrimitive(v["inset"])
+							value: formatPrimitive(v["inset"]),
+							alias: void 0
 						})
 					]
 				}, shadowLayerKey(v, i));
@@ -2377,13 +2419,15 @@ function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 	if (type === "gradient") {
 		const stops = Array.isArray(rawValue) ? rawValue : [];
 		if (stops.length === 0) return null;
+		const stopAliasFor = (i) => subValueChain(arrayAliases?.[i]?.["color"], resolved);
 		return /* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__breakdown-section",
 			children: stops.map((stop, i) => {
 				const v = stop;
 				return /* @__PURE__ */ jsx(KeyValueRow, {
 					label: `${((typeof v["position"] === "number" ? v["position"] : 0) * 100).toFixed(0)}%`,
-					value: formatColorSubValue(v["color"], colorFormat)
+					value: formatColorSubValue(v["color"], colorFormat),
+					alias: stopAliasFor(i)
 				}, gradientStopKey(v, i));
 			})
 		});
@@ -2393,17 +2437,35 @@ function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 function renderKeyValueList(rows) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__breakdown-section",
-		children: rows.filter(([, v]) => v !== null).map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
+		children: rows.filter(([, v, alias]) => v !== null || alias && alias.length > 0).map(([k, v, alias]) => /* @__PURE__ */ jsx(KeyValueRow, {
 			label: k,
-			value: v ?? ""
+			value: v ?? "",
+			alias
 		}, k))
 	});
 }
-function KeyValueRow({ label, value }) {
+function KeyValueRow({ label, value, alias }) {
+	const hasAlias = alias && alias.length > 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		className: "sb-token-detail__breakdown-key",
 		children: label
-	}), /* @__PURE__ */ jsx("span", { children: value ?? "—" })] });
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "sb-token-detail__breakdown-value",
+		children: [/* @__PURE__ */ jsx("span", { children: value ?? "—" }), hasAlias && /* @__PURE__ */ jsx("span", {
+			className: "sb-token-detail__breakdown-alias",
+			"data-testid": "breakdown-alias",
+			children: alias.map((p, i) => /* @__PURE__ */ jsxs("span", {
+				className: "sb-token-detail__breakdown-alias-step",
+				children: [i > 0 && /* @__PURE__ */ jsx("span", {
+					className: "sb-token-detail__arrow",
+					children: "→"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sb-token-detail__chain-node",
+					children: p
+				})]
+			}, p))
+		})]
+	})] });
 }
 function formatPrimitive(v) {
 	if (v == null) return null;
@@ -2435,6 +2497,24 @@ function formatColorSubValue(v, format) {
 	if (v == null) return null;
 	return formatColor(v, format).value;
 }
+function pickObjectAliases(v) {
+	if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
+	return v;
+}
+function pickArrayAliases(v) {
+	if (!Array.isArray(v)) return void 0;
+	return v;
+}
+/**
+* Walk the alias chain starting from an immediate sub-value alias target.
+* `aliasTarget` is the path the sub-value directly references; the target
+* token's own `aliasChain` continues the walk to the primitive.
+*/
+function subValueChain(aliasTarget, resolved) {
+	if (!aliasTarget) return void 0;
+	const tail = (resolved?.[aliasTarget])?.aliasChain;
+	return tail && tail.length > 0 ? [aliasTarget, ...tail] : [aliasTarget];
+}
 function shadowLayerKey(layer, fallback) {
 	return `shadow|${[
 		layer["color"],