@upsoftware_tech/svarium 1.0.7 → 1.0.8

package/src/lib/appearance.ts

@@ -0,0 +1,748 @@
+type AppearanceLike = {
+	class?: unknown;
+	style?: unknown;
+	fontWeight?: unknown;
+	fontSize?: unknown;
+	textColor?: unknown;
+	fontColor?: unknown;
+	bgColor?: unknown;
+	borderWidth?: unknown;
+	borderRadius?: unknown;
+	borderColor?: unknown;
+	borderStyle?: unknown;
+	outlineWidth?: unknown;
+	outlineColor?: unknown;
+	outlineStyle?: unknown;
+	outlineOffset?: unknown;
+	[key: string]: unknown;
+};
+
+const fontWeightToClass: Record<string, string> = {
+	'100': 'font-thin',
+	'200': 'font-extralight',
+	'300': 'font-light',
+	'400': 'font-normal',
+	'500': 'font-medium',
+	'600': 'font-semibold',
+	'700': 'font-bold',
+	'800': 'font-extrabold',
+	'900': 'font-black',
+	thin: 'font-thin',
+	extralight: 'font-extralight',
+	'extra-light': 'font-extralight',
+	light: 'font-light',
+	normal: 'font-normal',
+	regular: 'font-normal',
+	medium: 'font-medium',
+	semibold: 'font-semibold',
+	'semi-bold': 'font-semibold',
+	bold: 'font-bold',
+	extrabold: 'font-extrabold',
+	'extra-bold': 'font-extrabold',
+	black: 'font-black',
+};
+
+const fontSizeToClass: Record<string, string> = {
+	xs: 'text-xs',
+	sm: 'text-sm',
+	base: 'text-base',
+	lg: 'text-lg',
+	xl: 'text-xl',
+	'2xl': 'text-2xl',
+	'3xl': 'text-3xl',
+	'4xl': 'text-4xl',
+	'5xl': 'text-5xl',
+	'6xl': 'text-6xl',
+	'7xl': 'text-7xl',
+	'8xl': 'text-8xl',
+	'9xl': 'text-9xl',
+};
+
+const fontColorToClass: Record<string, string> = {
+	slate: 'text-slate-500',
+	gray: 'text-gray-500',
+	zinc: 'text-zinc-500',
+	neutral: 'text-neutral-500',
+	stone: 'text-stone-500',
+	red: 'text-red-500',
+	orange: 'text-orange-500',
+	amber: 'text-amber-500',
+	yellow: 'text-yellow-500',
+	lime: 'text-lime-500',
+	green: 'text-green-500',
+	emerald: 'text-emerald-500',
+	teal: 'text-teal-500',
+	cyan: 'text-cyan-500',
+	sky: 'text-sky-500',
+	blue: 'text-blue-500',
+	indigo: 'text-indigo-500',
+	violet: 'text-violet-500',
+	purple: 'text-purple-500',
+	fuchsia: 'text-fuchsia-500',
+	pink: 'text-pink-500',
+	rose: 'text-rose-500',
+	white: 'text-white',
+	black: 'text-black',
+};
+
+const backgroundColorToClass: Record<string, string> = {
+    slate: 'bg-slate-500',
+    gray: 'bg-gray-500',
+    zinc: 'bg-zinc-500',
+    neutral: 'bg-neutral-500',
+    stone: 'bg-stone-500',
+    red: 'bg-red-500',
+    'red-200': 'bg-red-200',
+    orange: 'bg-orange-500',
+    amber: 'bg-amber-500',
+    yellow: 'bg-yellow-500',
+    lime: 'bg-lime-500',
+    green: 'bg-green-500',
+    emerald: 'bg-emerald-500',
+    teal: 'bg-teal-500',
+    cyan: 'bg-cyan-500',
+    sky: 'bg-sky-500',
+    blue: 'bg-blue-500',
+    indigo: 'bg-indigo-500',
+    violet: 'bg-violet-500',
+    purple: 'bg-purple-500',
+    fuchsia: 'bg-fuchsia-500',
+    pink: 'bg-pink-500',
+    rose: 'bg-rose-500',
+    white: 'bg-white',
+    black: 'bg-black',
+};
+
+const borderColorToClass: Record<string, string> = {
+	slate: 'border-slate-500',
+	gray: 'border-gray-500',
+	zinc: 'border-zinc-500',
+	neutral: 'border-neutral-500',
+	stone: 'border-stone-500',
+	red: 'border-red-500',
+	orange: 'border-orange-500',
+	amber: 'border-amber-500',
+	yellow: 'border-yellow-500',
+	lime: 'border-lime-500',
+	green: 'border-green-500',
+	emerald: 'border-emerald-500',
+	teal: 'border-teal-500',
+	cyan: 'border-cyan-500',
+	sky: 'border-sky-500',
+	blue: 'border-blue-500',
+	indigo: 'border-indigo-500',
+	violet: 'border-violet-500',
+	purple: 'border-purple-500',
+	fuchsia: 'border-fuchsia-500',
+	pink: 'border-pink-500',
+	rose: 'border-rose-500',
+	white: 'border-white',
+	black: 'border-black',
+};
+
+const outlineColorToClass: Record<string, string> = {
+	slate: 'outline-slate-500',
+	gray: 'outline-gray-500',
+	zinc: 'outline-zinc-500',
+	neutral: 'outline-neutral-500',
+	stone: 'outline-stone-500',
+	red: 'outline-red-500',
+	orange: 'outline-orange-500',
+	amber: 'outline-amber-500',
+	yellow: 'outline-yellow-500',
+	lime: 'outline-lime-500',
+	green: 'outline-green-500',
+	emerald: 'outline-emerald-500',
+	teal: 'outline-teal-500',
+	cyan: 'outline-cyan-500',
+	sky: 'outline-sky-500',
+	blue: 'outline-blue-500',
+	indigo: 'outline-indigo-500',
+	violet: 'outline-violet-500',
+	purple: 'outline-purple-500',
+	fuchsia: 'outline-fuchsia-500',
+	pink: 'outline-pink-500',
+	rose: 'outline-rose-500',
+	white: 'outline-white',
+	black: 'outline-black',
+};
+
+function getColorParts(value: unknown): { light?: unknown; dark?: unknown } {
+	if (Array.isArray(value)) {
+		return {
+			light: value[0],
+			dark: value[1],
+		};
+	}
+
+	if (value && typeof value === 'object') {
+		const record = value as Record<string, unknown>;
+		if ('light' in record || 'dark' in record) {
+			return {
+				light: record.light,
+				dark: record.dark,
+			};
+		}
+	}
+
+	if (value !== undefined) {
+		return { light: value };
+	}
+
+	return {};
+}
+
+function appendTextColor(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+	dark = false,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+	let token = '';
+
+	if (normalized.startsWith('text-')) {
+		token = normalized;
+	} else if (fontColorToClass[normalized]) {
+		token = fontColorToClass[normalized];
+	} else if (/^[a-z]+-(50|[1-9]00)$/.test(normalized)) {
+		token = `text-${normalized}`;
+	}
+
+	if (token !== '') {
+		classTokens.push(dark ? `dark:${token}` : token);
+		return;
+	}
+
+	if (dark) {
+		return;
+	}
+
+	if (/^(#|rgb\(|rgba\(|hsl\(|hsla\(|var\()/.test(raw)) {
+		style.color = raw;
+		return;
+	}
+
+	style.color = raw;
+}
+
+function appendBackgroundColor(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+	dark = false,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+	let token = '';
+
+	if (normalized.startsWith('bg-')) {
+		token = normalized;
+	} else if (backgroundColorToClass[normalized]) {
+		token = backgroundColorToClass[normalized];
+	} else if (/^[a-z]+-(50|[1-9]00)$/.test(normalized)) {
+		token = `bg-${normalized}`;
+	}
+
+	if (token !== '') {
+		classTokens.push(dark ? `dark:${token}` : token);
+		return;
+	}
+
+	if (dark) {
+		return;
+	}
+
+	if (/^(#|rgb\(|rgba\(|hsl\(|hsla\(|var\()/.test(raw)) {
+		style.backgroundColor = raw;
+		return;
+	}
+
+	style.backgroundColor = raw;
+}
+
+function appendBorderWidth(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+	const normalizedNumber = normalized.endsWith('.')
+		? normalized.slice(0, -1)
+		: normalized;
+
+	if (normalized === 'border' || normalized.startsWith('border-')) {
+		classTokens.push(normalized);
+		return;
+	}
+
+	if (/^(x|y|t|r|b|l)-.+$/.test(normalized)) {
+		classTokens.push(`border-${normalized}`);
+		return;
+	}
+
+	if (/^\d+$/.test(normalizedNumber)) {
+		if (normalizedNumber === '0') {
+			classTokens.push('border-0');
+			return;
+		}
+
+		if (normalizedNumber === '1') {
+			classTokens.push('border');
+			return;
+		}
+
+		classTokens.push(`border-${normalizedNumber}`);
+		return;
+	}
+
+	if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(normalized)) {
+		style.borderWidth = normalized;
+		return;
+	}
+
+	if (/^\d+(\.\d+)?$/.test(normalizedNumber)) {
+		style.borderWidth = `${normalizedNumber}px`;
+		return;
+	}
+
+	style.borderWidth = raw;
+}
+
+function appendBorderRadius(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+
+	if (normalized.startsWith('rounded')) {
+		classTokens.push(normalized);
+		return;
+	}
+
+	if (normalized === 'base' || normalized === 'default') {
+		classTokens.push('rounded');
+		return;
+	}
+
+	if (/^[a-z]{1,2}-.+$/.test(normalized)) {
+		classTokens.push(`rounded-${normalized}`);
+		return;
+	}
+
+	if (/^(none|sm|md|lg|xl|2xl|3xl|full)$/.test(normalized)) {
+		classTokens.push(`rounded-${normalized}`);
+		return;
+	}
+
+	if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(normalized)) {
+		style.borderRadius = normalized;
+		return;
+	}
+
+	if (/^\d+(\.\d+)?$/.test(normalized)) {
+		style.borderRadius = `${normalized}px`;
+		return;
+	}
+
+	style.borderRadius = raw;
+}
+
+function appendBorderColor(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+	dark = false,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+	let token = '';
+
+	if (normalized.startsWith('border-')) {
+		token = normalized;
+	} else if (borderColorToClass[normalized]) {
+		token = borderColorToClass[normalized];
+	} else if (/^[a-z]+-(50|[1-9]00)$/.test(normalized)) {
+		token = `border-${normalized}`;
+	}
+
+	if (token !== '') {
+		classTokens.push(dark ? `dark:${token}` : token);
+		return;
+	}
+
+	if (dark) {
+		return;
+	}
+
+	if (/^(#|rgb\(|rgba\(|hsl\(|hsla\(|var\()/.test(raw)) {
+		style.borderColor = raw;
+		return;
+	}
+
+	style.borderColor = raw;
+}
+
+function appendBorderStyle(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+
+	if (normalized.startsWith('border-')) {
+		classTokens.push(normalized);
+		return;
+	}
+
+	const styleMap: Record<string, string> = {
+		solid: 'border-solid',
+		dashed: 'border-dashed',
+		dotted: 'border-dotted',
+		double: 'border-double',
+		none: 'border-none',
+		hidden: 'border-hidden',
+	};
+
+	if (styleMap[normalized]) {
+		classTokens.push(styleMap[normalized]);
+		return;
+	}
+
+	style.borderStyle = raw;
+}
+
+function appendOutlineWidth(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+
+	if (normalized === 'outline' || normalized.startsWith('outline-')) {
+		classTokens.push(normalized);
+		return;
+	}
+
+	if (/^\d+$/.test(normalized)) {
+		if (normalized === '1') {
+			classTokens.push('outline');
+			return;
+		}
+
+		classTokens.push(`outline-${normalized}`);
+		return;
+	}
+
+	if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(normalized)) {
+		style.outlineWidth = normalized;
+		return;
+	}
+
+	if (/^\d+(\.\d+)?$/.test(normalized)) {
+		style.outlineWidth = `${normalized}px`;
+		return;
+	}
+
+	style.outlineWidth = raw;
+}
+
+function appendOutlineColor(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+	dark = false,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+	let token = '';
+
+	if (normalized.startsWith('outline-')) {
+		token = normalized;
+	} else if (outlineColorToClass[normalized]) {
+		token = outlineColorToClass[normalized];
+	} else if (/^[a-z]+-(50|[1-9]00)$/.test(normalized)) {
+		token = `outline-${normalized}`;
+	}
+
+	if (token !== '') {
+		classTokens.push(dark ? `dark:${token}` : token);
+		return;
+	}
+
+	if (dark) {
+		return;
+	}
+
+	if (/^(#|rgb\(|rgba\(|hsl\(|hsla\(|var\()/.test(raw)) {
+		style.outlineColor = raw;
+		return;
+	}
+
+	style.outlineColor = raw;
+}
+
+function appendOutlineStyle(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+
+	if (normalized.startsWith('outline-')) {
+		classTokens.push(normalized);
+		return;
+	}
+
+	const styleMap: Record<string, string> = {
+		solid: 'outline-solid',
+		dashed: 'outline-dashed',
+		dotted: 'outline-dotted',
+		double: 'outline-double',
+		none: 'outline-none',
+		hidden: 'outline-hidden',
+	};
+
+	if (styleMap[normalized]) {
+		classTokens.push(styleMap[normalized]);
+		return;
+	}
+
+	style.outlineStyle = raw;
+}
+
+function appendOutlineOffset(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+
+	if (normalized.startsWith('outline-offset-')) {
+		classTokens.push(normalized);
+		return;
+	}
+
+	if (/^\d+$/.test(normalized)) {
+		classTokens.push(`outline-offset-${normalized}`);
+		return;
+	}
+
+	if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(normalized)) {
+		style.outlineOffset = normalized;
+		return;
+	}
+
+	if (/^\d+(\.\d+)?$/.test(normalized)) {
+		style.outlineOffset = `${normalized}px`;
+		return;
+	}
+
+	style.outlineOffset = raw;
+}
+
+function normalizeClassTokens(input: unknown): string[] {
+	if (typeof input === 'string') {
+		return input.split(/\s+/).map((token) => token.trim()).filter(Boolean);
+	}
+
+	if (Array.isArray(input)) {
+		return input.flatMap((entry) => normalizeClassTokens(entry));
+	}
+
+	if (input && typeof input === 'object') {
+		return Object.entries(input as Record<string, unknown>)
+			.filter(([, enabled]) => Boolean(enabled))
+			.map(([token]) => token);
+	}
+
+	return [];
+}
+
+function uniqueTokens(tokens: string[]): string[] {
+	return Array.from(new Set(tokens.filter(Boolean)));
+}
+
+function mergeStyle(base: unknown, extra: Record<string, string>): unknown {
+	if (Object.keys(extra).length === 0) {
+		return base;
+	}
+
+	if (base === undefined || base === null || base === '') {
+		return extra;
+	}
+
+	if (Array.isArray(base)) {
+		return [...base, extra];
+	}
+
+	if (typeof base === 'object') {
+		return { ...(base as Record<string, unknown>), ...extra };
+	}
+
+	return [base, extra];
+}
+
+function normalizeAppearance(appearance: AppearanceLike): {
+	classTokens: string[];
+	style: Record<string, string>;
+	appearance: AppearanceLike;
+} {
+	const classTokens = normalizeClassTokens(appearance.class);
+	const style: Record<string, string> = {};
+
+	const weight = appearance.fontWeight !== undefined
+		? String(appearance.fontWeight).trim().toLowerCase()
+		: '';
+
+	if (weight !== '' && fontWeightToClass[weight]) {
+		classTokens.push(fontWeightToClass[weight]);
+	}
+
+	const fontSize = appearance.fontSize !== undefined
+		? String(appearance.fontSize).trim().toLowerCase()
+		: '';
+
+	if (fontSize !== '') {
+		if (fontSizeToClass[fontSize]) {
+			classTokens.push(fontSizeToClass[fontSize]);
+		} else if (fontSize.startsWith('text-')) {
+			classTokens.push(fontSize);
+		} else if (/^\d+(\.\d+)?$/.test(fontSize)) {
+			style.fontSize = `${fontSize}px`;
+		} else if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(fontSize)) {
+			style.fontSize = fontSize;
+		}
+	}
+
+	const textColorValue = appearance.textColor !== undefined
+		? appearance.textColor
+		: appearance.fontColor;
+	const { light: lightTextColor, dark: darkTextColor } = getColorParts(textColorValue);
+	appendTextColor(lightTextColor, classTokens, style);
+	appendTextColor(darkTextColor, classTokens, style, true);
+
+	const { light: lightBgColor, dark: darkBgColor } = getColorParts(appearance.bgColor);
+	appendBackgroundColor(lightBgColor, classTokens, style);
+	appendBackgroundColor(darkBgColor, classTokens, style, true);
+
+	appendBorderWidth(appearance.borderWidth, classTokens, style);
+	appendBorderRadius(appearance.borderRadius, classTokens, style);
+
+	const { light: lightBorderColor, dark: darkBorderColor } = getColorParts(appearance.borderColor);
+	appendBorderColor(lightBorderColor, classTokens, style);
+	appendBorderColor(darkBorderColor, classTokens, style, true);
+
+	appendBorderStyle(appearance.borderStyle, classTokens, style);
+
+	appendOutlineWidth(appearance.outlineWidth, classTokens, style);
+
+	const { light: lightOutlineColor, dark: darkOutlineColor } = getColorParts(appearance.outlineColor);
+	appendOutlineColor(lightOutlineColor, classTokens, style);
+	appendOutlineColor(darkOutlineColor, classTokens, style, true);
+
+	appendOutlineStyle(appearance.outlineStyle, classTokens, style);
+	appendOutlineOffset(appearance.outlineOffset, classTokens, style);
+
+	const nextAppearance: AppearanceLike = {
+		...appearance,
+	};
+
+	delete nextAppearance.fontWeight;
+	delete nextAppearance.fontSize;
+	delete nextAppearance.textColor;
+	delete nextAppearance.fontColor;
+	delete nextAppearance.bgColor;
+	delete nextAppearance.borderWidth;
+	delete nextAppearance.borderRadius;
+	delete nextAppearance.borderColor;
+	delete nextAppearance.borderStyle;
+	delete nextAppearance.outlineWidth;
+	delete nextAppearance.outlineColor;
+	delete nextAppearance.outlineStyle;
+	delete nextAppearance.outlineOffset;
+
+	if (classTokens.length > 0) {
+		nextAppearance.class = uniqueTokens(classTokens).join(' ');
+	}
+
+	if (Object.keys(style).length > 0) {
+		nextAppearance.style = mergeStyle(appearance.style, style);
+	}
+
+	return {
+		classTokens: uniqueTokens(classTokens),
+		style,
+		appearance: nextAppearance,
+	};
+}
+
+export function normalizeNodeProps(nodeProps: Record<string, any>): Record<string, any> {
+	const resolved = { ...nodeProps };
+	const appearance = resolved.appearance;
+
+	if (appearance && typeof appearance === 'object' && !Array.isArray(appearance)) {
+		const normalized = normalizeAppearance(appearance as AppearanceLike);
+		const combinedClass = uniqueTokens([
+			...normalizeClassTokens(resolved.class),
+			...normalized.classTokens,
+		]);
+
+		if (combinedClass.length > 0) {
+			resolved.class = combinedClass.join(' ');
+		}
+
+		resolved.style = mergeStyle(resolved.style, normalized.style);
+		resolved.appearance = normalized.appearance;
+	}
+
+	return resolved;
+}