diff --git a/src/lib/components/visualisations/D3BubbleChart.svelte b/src/lib/components/visualisations/D3BubbleChart.svelte
index f52893a9..b1dc7465 100644
--- a/src/lib/components/visualisations/D3BubbleChart.svelte
+++ b/src/lib/components/visualisations/D3BubbleChart.svelte
@@ -5,8 +5,13 @@ Uses D3.js circle packing for a balanced, overlap-free layout
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type * as d3Type from 'd3';
-	import { getTheme } from '$lib/stores/themeStore.svelte';
 	import { innerWidth as windowInnerWidth } from 'svelte/reactivity/window';
+	import {
+		getResolvedChartColors,
+		resolveColors,
+		getCSSPx,
+		prefersReducedMotion
+	} from '$lib/utils/chartColorUtils';
 
 	// D3 library loaded dynamically to reduce initial bundle size
 	let d3: typeof d3Type | null = $state(null);
@@ -51,53 +56,10 @@ Uses D3.js circle packing for a balanced, overlap-free layout
 	// Reactive values
 	const isMobile = $derived((windowInnerWidth.current ?? 1024) < 768);
 
-	// Utility functions for CSS variable resolution
-	// Fallbacks match design system v2.0 values from variables.css
-	function getCSSVariableValue(variableName: string): string {
-		if (typeof window === 'undefined') return '#9a4419';
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		return value || '#9a4419';
-	}
-
-	function getCSSPx(variableName: string, fallbackPx: number): number {
-		if (typeof window === 'undefined') return fallbackPx;
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		const match = value.match(/^([\d.]+)px$/);
-		return match ? Number(match[1]) : fallbackPx;
-	}
-
-	function prefersReducedMotion(): boolean {
-		if (typeof window === 'undefined') return false;
-		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-	}
-
-	function resolveColor(color: string): string {
-		if (color.startsWith('var(')) {
-			const varName = color.slice(4, -1).trim();
-			return getCSSVariableValue(varName);
-		}
-		if (color.startsWith('rgba(var(')) {
-			const rgbaMatch = color.match(/rgba\(var\(([^)]+)\),\s*([^)]+)\)/);
-			if (rgbaMatch) {
-				const rgbVarName = rgbaMatch[1];
-				const opacity = rgbaMatch[2];
-				const rgbValue = getCSSVariableValue(rgbVarName);
-				return `rgba(${rgbValue}, ${opacity})`;
-			}
-		}
-		return color;
-	}
-
 	// Reactive color resolution
 	const resolvedColors = $derived({
-		text: getCSSVariableValue('--color-text'),
-		border: getCSSVariableValue('--color-border'),
-		surface: getCSSVariableValue('--color-surface'),
-		surfaceRgb: getCSSVariableValue('--color-surface-rgb'),
-		chartColors: colors.map((color) => resolveColor(color)),
-		currentTheme: getTheme()
+		...getResolvedChartColors(),
+		chartColors: resolveColors(colors)
 	});
 
 	// Type for simulation nodes
diff --git a/src/lib/components/visualisations/EChartsBarChart.svelte b/src/lib/components/visualisations/EChartsBarChart.svelte
index b5625a65..98669b9f 100644
--- a/src/lib/components/visualisations/EChartsBarChart.svelte
+++ b/src/lib/components/visualisations/EChartsBarChart.svelte
@@ -3,8 +3,14 @@ ECharts Bar Chart - A much simpler alternative to the custom D3 implementation
 -->
 <script lang="ts">
 	import type * as echarts from 'echarts';
-	import { getTheme } from '$lib/stores/themeStore.svelte';
 	import { innerWidth } from 'svelte/reactivity/window';
+	import {
+		getResolvedChartColors,
+		resolveColor,
+		getEChartsTooltipStyle,
+		getEChartsAxisLineStyle,
+		getEChartsSplitLineStyle
+	} from '$lib/utils/chartColorUtils';
 
 	// Props - keeping the same interface as your D3 component for easy replacement
 	type DataItem = $$Generic;
@@ -33,38 +39,10 @@ ECharts Bar Chart - A much simpler alternative to the custom D3 implementation
 	// Use Svelte's reactive window width
 	const isMobile = $derived((innerWidth.current ?? 1024) < 768);
 
-	// Utility functions for CSS variable resolution
-	function getCSSVariableValue(variableName: string): string {
-		if (typeof window === 'undefined') return '';
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		return value;
-	}
-
-	function resolveColor(color: string): string {
-		if (color.startsWith('var(')) {
-			// Extract variable name from var(--variable-name)
-			const varName = color.slice(4, -1).trim();
-			const val = getCSSVariableValue(varName);
-			return val || color; // Return original if var not found
-		}
-		return color; // Return as-is if not a CSS variable
-	}
-
 	// Reactive color resolution - updates when theme changes
-	// Fallbacks match design system v2.0 values from variables.css (warm earth tones)
 	const resolvedColors = $derived({
-		primary: getCSSVariableValue('--color-primary') || '#9a4419',
-		text: getCSSVariableValue('--color-text') || '#2d2820',
-		textLight: getCSSVariableValue('--color-text-light') || '#7a7267',
-		border: getCSSVariableValue('--color-border') || '#e8e4df',
-		surface: getCSSVariableValue('--color-surface') || '#faf9f7',
-		surfaceRgb: getCSSVariableValue('--color-surface-rgb') || '250, 249, 247',
-		primaryDark: getCSSVariableValue('--color-primary-dark') || '#7a3516',
-		barColor: resolveColor(barColor),
-		fontFamily: getCSSVariableValue('--font-family-sans') || 'system-ui, sans-serif',
-		// Include theme to make this reactive to theme changes
-		currentTheme: getTheme()
+		...getResolvedChartColors(),
+		barColor: resolveColor(barColor)
 	});
 
 	// Chart data transformation
@@ -81,18 +59,7 @@ ECharts Bar Chart - A much simpler alternative to the custom D3 implementation
 		},
 		tooltip: {
 			trigger: 'axis',
-			backgroundColor: `color-mix(in srgb, ${resolvedColors.surface} 90%, transparent)`,
-			textStyle: {
-				color: resolvedColors.text,
-				fontSize: 12,
-				fontFamily: resolvedColors.fontFamily
-			},
-			borderRadius: 8,
-			borderColor: resolvedColors.border,
-			borderWidth: 1,
-			padding: [10, 14],
-			extraCssText:
-				'backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);'
+			...getEChartsTooltipStyle(resolvedColors)
 		},
 		grid: {
 			left: isMobile ? 32 : 64,
@@ -118,16 +85,8 @@ ECharts Bar Chart - A much simpler alternative to the custom D3 implementation
 				fontFamily: resolvedColors.fontFamily,
 				interval: isMobile ? 'auto' : 0 // Auto interval on mobile to prevent overlapping
 			},
-			axisLine: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			axisTick: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			}
+			axisLine: getEChartsAxisLineStyle(resolvedColors),
+			axisTick: getEChartsAxisLineStyle(resolvedColors)
 		},
 		yAxis: {
 			type: 'value',
@@ -144,23 +103,9 @@ ECharts Bar Chart - A much simpler alternative to the custom D3 implementation
 				fontSize: 12,
 				fontFamily: resolvedColors.fontFamily
 			},
-			axisLine: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			axisTick: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			splitLine: {
-				lineStyle: {
-					color: resolvedColors.border,
-					opacity: 0.3,
-					type: 'dashed'
-				}
-			}
+			axisLine: getEChartsAxisLineStyle(resolvedColors),
+			axisTick: getEChartsAxisLineStyle(resolvedColors),
+			splitLine: getEChartsSplitLineStyle(resolvedColors)
 		},
 		series: [
 			{
diff --git a/src/lib/components/visualisations/EChartsDoughnutChart.svelte b/src/lib/components/visualisations/EChartsDoughnutChart.svelte
index c45b3706..adaa643d 100644
--- a/src/lib/components/visualisations/EChartsDoughnutChart.svelte
+++ b/src/lib/components/visualisations/EChartsDoughnutChart.svelte
@@ -3,8 +3,12 @@ ECharts Doughnut/Pie Chart - A doughnut chart for visualizing categorical data
 -->
 <script lang="ts">
 	import type * as echarts from 'echarts';
-	import { getTheme } from '$lib/stores/themeStore.svelte';
 	import { innerWidth } from 'svelte/reactivity/window';
+	import {
+		getResolvedChartColors,
+		resolveColors,
+		getEChartsTooltipStyle
+	} from '$lib/utils/chartColorUtils';
 
 	// Props - keeping interface simple for doughnut chart
 	type DataItem = $$Generic;
@@ -50,46 +54,10 @@ ECharts Doughnut/Pie Chart - A doughnut chart for visualizing categorical data
 	// Use Svelte's reactive window width
 	const isMobile = $derived((innerWidth.current ?? 1024) < 768);
 
-	// Utility functions for CSS variable resolution
-	function getCSSVariableValue(variableName: string): string {
-		if (typeof window === 'undefined') return '';
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		return value;
-	}
-
-	function resolveColor(color: string): string {
-		if (color.startsWith('var(')) {
-			const varName = color.slice(4, -1).trim();
-			const val = getCSSVariableValue(varName);
-			return val || color;
-		}
-		if (color.startsWith('rgba(var(')) {
-			const rgbaMatch = color.match(/rgba\(var\(([^)]+)\),\s*([^)]+)\)/);
-			if (rgbaMatch) {
-				const rgbVarName = rgbaMatch[1];
-				const opacity = rgbaMatch[2];
-				const rgbValue = getCSSVariableValue(rgbVarName) || '0, 0, 0';
-				return `rgba(${rgbValue}, ${opacity})`;
-			}
-		}
-		return color;
-	}
-
 	// Reactive color resolution
-	// Fallbacks match design system v2.0 values from variables.css (warm earth tones)
 	const resolvedColors = $derived({
-		primary: getCSSVariableValue('--color-primary') || '#9a4419',
-		text: getCSSVariableValue('--color-text') || '#2d2820',
-		textLight: getCSSVariableValue('--color-text-light') || '#7a7267',
-		border: getCSSVariableValue('--color-border') || '#e8e4df',
-		surface: getCSSVariableValue('--color-surface') || '#faf9f7',
-		surfaceRgb: getCSSVariableValue('--color-surface-rgb') || '250, 249, 247',
-		accent: getCSSVariableValue('--color-accent') || '#c4a35a',
-		highlight: getCSSVariableValue('--color-highlight') || '#f59e0b',
-		chartColors: colors.map((color) => resolveColor(color)),
-		fontFamily: getCSSVariableValue('--font-family-sans') || 'system-ui, sans-serif',
-		currentTheme: getTheme()
+		...getResolvedChartColors(),
+		chartColors: resolveColors(colors)
 	});
 	// Chart data transformation
 	const chartData = $derived(
@@ -106,18 +74,7 @@ ECharts Doughnut/Pie Chart - A doughnut chart for visualizing categorical data
 		},
 		tooltip: {
 			trigger: 'item',
-			backgroundColor: `color-mix(in srgb, ${resolvedColors.surface} 90%, transparent)`,
-			textStyle: {
-				color: resolvedColors.text,
-				fontSize: 12,
-				fontFamily: resolvedColors.fontFamily
-			},
-			borderRadius: 8,
-			borderColor: resolvedColors.border,
-			borderWidth: 1,
-			padding: [10, 14],
-			extraCssText:
-				'backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);',
+			...getEChartsTooltipStyle(resolvedColors),
 			formatter: '{a} <br/>{b}: {c} ({d}%)',
 			confine: isMobile,
 			position: isMobile
diff --git a/src/lib/components/visualisations/EChartsHorizontalBarChart.svelte b/src/lib/components/visualisations/EChartsHorizontalBarChart.svelte
index 2617dc59..6187b479 100644
--- a/src/lib/components/visualisations/EChartsHorizontalBarChart.svelte
+++ b/src/lib/components/visualisations/EChartsHorizontalBarChart.svelte
@@ -3,8 +3,14 @@ ECharts Horizontal Bar Chart component
 -->
 <script lang="ts">
 	import type * as echarts from 'echarts';
-	import { getTheme } from '$lib/stores/themeStore.svelte';
 	import { innerWidth } from 'svelte/reactivity/window';
+	import {
+		getResolvedChartColors,
+		resolveColor,
+		getEChartsTooltipStyle,
+		getEChartsAxisLineStyle,
+		getEChartsSplitLineStyle
+	} from '$lib/utils/chartColorUtils';
 
 	// Props - keeping the same interface as your D3 component for easy replacement
 	type DataItem = $$Generic;
@@ -35,36 +41,10 @@ ECharts Horizontal Bar Chart component
 	// Use Svelte's reactive window width
 	const isMobile = $derived((innerWidth.current ?? 1024) < 768);
 
-	// Utility functions for CSS variable resolution
-	function getCSSVariableValue(variableName: string): string {
-		if (typeof window === 'undefined') return '';
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		return value;
-	}
-
-	function resolveColor(color: string): string {
-		if (color.startsWith('var(')) {
-			const varName = color.slice(4, -1).trim();
-			const val = getCSSVariableValue(varName);
-			return val || color;
-		}
-		return color;
-	}
-
 	// Reactive color resolution
-	// Fallbacks match design system v2.0 values from variables.css (warm earth tones)
 	const resolvedColors = $derived({
-		primary: getCSSVariableValue('--color-primary') || '#9a4419',
-		text: getCSSVariableValue('--color-text') || '#2d2820',
-		textLight: getCSSVariableValue('--color-text-light') || '#7a7267',
-		border: getCSSVariableValue('--color-border') || '#e8e4df',
-		surface: getCSSVariableValue('--color-surface') || '#faf9f7',
-		surfaceRgb: getCSSVariableValue('--color-surface-rgb') || '250, 249, 247',
-		primaryDark: getCSSVariableValue('--color-primary-dark') || '#7a3516',
-		barColor: resolveColor(barColor),
-		fontFamily: getCSSVariableValue('--font-family-sans') || 'system-ui, sans-serif',
-		currentTheme: getTheme()
+		...getResolvedChartColors(),
+		barColor: resolveColor(barColor)
 	});
 
 	// Chart data transformation - reverse order so highest values appear at top
@@ -80,18 +60,7 @@ ECharts Horizontal Bar Chart component
 	const chartOption = $derived({
 		tooltip: {
 			trigger: 'axis',
-			backgroundColor: `color-mix(in srgb, ${resolvedColors.surface} 90%, transparent)`,
-			textStyle: {
-				color: resolvedColors.text,
-				fontSize: 12,
-				fontFamily: resolvedColors.fontFamily
-			},
-			borderRadius: 8,
-			borderColor: resolvedColors.border,
-			borderWidth: 1,
-			padding: [10, 14],
-			extraCssText:
-				'backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);'
+			...getEChartsTooltipStyle(resolvedColors)
 		},
 		grid: {
 			left: isMobile ? '120px' : '150px',
@@ -121,23 +90,9 @@ ECharts Horizontal Bar Chart component
 			interval: 1,
 			minInterval: 1,
 			max: maxValue,
-			axisLine: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			axisTick: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			splitLine: {
-				lineStyle: {
-					color: resolvedColors.border,
-					opacity: 0.3,
-					type: 'dashed'
-				}
-			}
+			axisLine: getEChartsAxisLineStyle(resolvedColors),
+			axisTick: getEChartsAxisLineStyle(resolvedColors),
+			splitLine: getEChartsSplitLineStyle(resolvedColors)
 		},
 		yAxis: {
 			type: 'category',
@@ -157,16 +112,8 @@ ECharts Horizontal Bar Chart component
 				width: isMobile ? 100 : 130,
 				overflow: 'truncate'
 			},
-			axisLine: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			axisTick: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			}
+			axisLine: getEChartsAxisLineStyle(resolvedColors),
+			axisTick: getEChartsAxisLineStyle(resolvedColors)
 		},
 		series: [
 			{
diff --git a/src/lib/components/visualisations/EChartsNetworkGraph.svelte b/src/lib/components/visualisations/EChartsNetworkGraph.svelte
index 81e19078..69697fc5 100644
--- a/src/lib/components/visualisations/EChartsNetworkGraph.svelte
+++ b/src/lib/components/visualisations/EChartsNetworkGraph.svelte
@@ -3,9 +3,9 @@ ECharts Network Graph - A network visualization for author collaborations
 -->
 <script lang="ts">
 	import type * as echarts from 'echarts';
-	import { getTheme } from '$lib/stores/themeStore.svelte';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import Icon from '@iconify/svelte';
+	import { getResolvedChartColors, getEChartsTooltipStyle } from '$lib/utils/chartColorUtils';
 
 	// Props
 	type CollaborationData = {
@@ -76,29 +76,8 @@ ECharts Network Graph - A network visualization for author collaborations
 		}
 	}
 
-	// Utility functions for CSS variable resolution
-	function getCSSVariableValue(variableName: string): string {
-		if (typeof window === 'undefined') return '';
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		return value;
-	}
-
 	// Reactive color resolution
-	// Fallbacks match design system v2.0 values from variables.css (warm earth tones)
-	const resolvedColors = $derived({
-		primary: getCSSVariableValue('--color-primary') || '#9a4419',
-		text: getCSSVariableValue('--color-text') || '#2d2820',
-		textLight: getCSSVariableValue('--color-text-light') || '#7a7267',
-		border: getCSSVariableValue('--color-border') || '#e8e4df',
-		surface: getCSSVariableValue('--color-surface') || '#faf9f7',
-
-		accent: getCSSVariableValue('--color-accent') || '#c4a35a',
-		highlight: getCSSVariableValue('--color-highlight') || '#f59e0b',
-		success: getCSSVariableValue('--color-success') || '#10b981',
-		fontFamily: getCSSVariableValue('--font-family-sans') || 'system-ui, sans-serif',
-		currentTheme: getTheme()
-	});
+	const resolvedColors = $derived(getResolvedChartColors());
 
 	// Create a color palette for different collaboration counts
 	const collaborationColors = $derived.by(() => {
@@ -278,19 +257,15 @@ ECharts Network Graph - A network visualization for author collaborations
 		tooltip: {
 			trigger: 'item',
 			triggerOn: 'mousemove',
-			backgroundColor: `color-mix(in srgb, ${resolvedColors.surface} 90%, transparent)`,
+			...getEChartsTooltipStyle(resolvedColors),
 			textStyle: {
 				color: resolvedColors.text,
 				fontSize: isMobile ? 11 : 12,
 				fontFamily: resolvedColors.fontFamily
 			},
-			borderRadius: 8,
-			borderColor: resolvedColors.border,
-			borderWidth: 1,
 			extraCssText:
 				'backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); max-width: 280px; word-wrap: break-word; white-space: normal; line-height: 1.4;',
 			confine: true,
-			padding: [10, 14],
 			position: function (
 				point: [number, number],
 				params: any,
diff --git a/src/lib/components/visualisations/EChartsStackedBarChart.svelte b/src/lib/components/visualisations/EChartsStackedBarChart.svelte
index 61c02a29..87eb1d0a 100644
--- a/src/lib/components/visualisations/EChartsStackedBarChart.svelte
+++ b/src/lib/components/visualisations/EChartsStackedBarChart.svelte
@@ -3,8 +3,14 @@ ECharts Stacked Bar Chart component
 -->
 <script lang="ts">
 	import type * as echarts from 'echarts';
-	import { getTheme } from '$lib/stores/themeStore.svelte';
 	import { innerWidth } from 'svelte/reactivity/window';
+	import {
+		getResolvedChartColors,
+		resolveColors,
+		getEChartsTooltipStyle,
+		getEChartsAxisLineStyle,
+		getEChartsSplitLineStyle
+	} from '$lib/utils/chartColorUtils';
 
 	// Props - keeping the same interface as your D3 component for easy replacement
 	type DataItem = $$Generic;
@@ -43,35 +49,10 @@ ECharts Stacked Bar Chart component
 	// Use Svelte's reactive window width instead of manual event listener
 	const isMobile = $derived((innerWidth.current ?? 1024) < 768);
 
-	// Utility functions for CSS variable resolution
-	function getCSSVariableValue(variableName: string): string {
-		if (typeof window === 'undefined') return '';
-		const computedStyle = getComputedStyle(document.documentElement);
-		const value = computedStyle.getPropertyValue(variableName).trim();
-		return value;
-	}
-
-	function resolveColor(color: string): string {
-		if (color.startsWith('var(')) {
-			const varName = color.slice(4, -1).trim();
-			const val = getCSSVariableValue(varName);
-			return val || color;
-		}
-		return color;
-	}
-
 	// Reactive color resolution
-	// Fallbacks match design system v2.0 values from variables.css (warm earth tones)
 	const resolvedColors = $derived({
-		primary: getCSSVariableValue('--color-primary') || '#9a4419',
-		text: getCSSVariableValue('--color-text') || '#2d2820',
-		textLight: getCSSVariableValue('--color-text-light') || '#7a7267',
-		border: getCSSVariableValue('--color-border') || '#e8e4df',
-		surface: getCSSVariableValue('--color-surface') || '#faf9f7',
-		surfaceRgb: getCSSVariableValue('--color-surface-rgb') || '250, 249, 247',
-		resolvedSeriesColors: colors.map((color) => resolveColor(color)),
-		fontFamily: getCSSVariableValue('--font-family-sans') || 'system-ui, sans-serif',
-		currentTheme: getTheme()
+		...getResolvedChartColors(),
+		resolvedSeriesColors: resolveColors(colors)
 	});
 
 	// Chart data transformation
@@ -98,22 +79,13 @@ ECharts Stacked Bar Chart component
 				}
 			}
 		}))
-	); // Chart options - reactive to all dependencies
+	);
+
+	// Chart options - reactive to all dependencies
 	const chartOption = $derived({
 		tooltip: {
 			trigger: 'axis',
-			backgroundColor: `color-mix(in srgb, ${resolvedColors.surface} 90%, transparent)`,
-			textStyle: {
-				color: resolvedColors.text,
-				fontSize: 12,
-				fontFamily: resolvedColors.fontFamily
-			},
-			borderRadius: 8,
-			borderColor: resolvedColors.border,
-			borderWidth: 1,
-			padding: [10, 14],
-			extraCssText:
-				'backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);',
+			...getEChartsTooltipStyle(resolvedColors),
 			axisPointer: {
 				type: 'shadow'
 			},
@@ -179,16 +151,8 @@ ECharts Stacked Bar Chart component
 				interval: isMobile ? 'auto' : 0, // Auto interval on mobile to prevent overlapping
 				rotate: isMobile ? 45 : 0 // Rotate labels on mobile if needed
 			},
-			axisLine: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			axisTick: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			}
+			axisLine: getEChartsAxisLineStyle(resolvedColors),
+			axisTick: getEChartsAxisLineStyle(resolvedColors)
 		},
 		yAxis: {
 			type: 'value',
@@ -205,23 +169,9 @@ ECharts Stacked Bar Chart component
 				fontSize: 12,
 				fontFamily: resolvedColors.fontFamily
 			},
-			axisLine: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			axisTick: {
-				lineStyle: {
-					color: resolvedColors.border
-				}
-			},
-			splitLine: {
-				lineStyle: {
-					color: resolvedColors.border,
-					opacity: 0.3,
-					type: 'dashed'
-				}
-			}
+			axisLine: getEChartsAxisLineStyle(resolvedColors),
+			axisTick: getEChartsAxisLineStyle(resolvedColors),
+			splitLine: getEChartsSplitLineStyle(resolvedColors)
 		},
 		series: seriesData,
 		backgroundColor: 'transparent',
diff --git a/src/lib/utils/chartColorUtils.ts b/src/lib/utils/chartColorUtils.ts
new file mode 100644
index 00000000..94aeb8df
--- /dev/null
+++ b/src/lib/utils/chartColorUtils.ts
@@ -0,0 +1,238 @@
+/**
+ * Chart Color Utilities
+ *
+ * Centralized utilities for resolving CSS variables and colors in chart components.
+ * Used by ECharts and D3 visualization components to ensure consistent theming.
+ */
+
+import { getTheme } from '$lib/stores/themeStore.svelte';
+
+/**
+ * Gets the computed value of a CSS custom property from the document root.
+ * Returns empty string during SSR or if variable is not found.
+ *
+ * @param variableName - CSS variable name (e.g., '--color-primary')
+ * @returns The computed value of the CSS variable, or empty string
+ */
+export function getCSSVariableValue(variableName: string): string {
+	if (typeof window === 'undefined') return '';
+	const computedStyle = getComputedStyle(document.documentElement);
+	const value = computedStyle.getPropertyValue(variableName).trim();
+	return value;
+}
+
+/**
+ * Gets the computed value of a CSS custom property with a fallback.
+ *
+ * @param variableName - CSS variable name (e.g., '--color-primary')
+ * @param fallback - Fallback value if variable is not found
+ * @returns The computed value of the CSS variable, or the fallback
+ */
+export function getCSSVariableValueWithFallback(variableName: string, fallback: string): string {
+	const value = getCSSVariableValue(variableName);
+	return value || fallback;
+}
+
+/**
+ * Gets a CSS variable value as a pixel number.
+ * Useful for spacing variables used in chart calculations.
+ *
+ * @param variableName - CSS variable name (e.g., '--space-2')
+ * @param fallbackPx - Fallback pixel value
+ * @returns The numeric pixel value
+ */
+export function getCSSPx(variableName: string, fallbackPx: number): number {
+	if (typeof window === 'undefined') return fallbackPx;
+	const computedStyle = getComputedStyle(document.documentElement);
+	const value = computedStyle.getPropertyValue(variableName).trim();
+	const match = value.match(/^([\d.]+)px$/);
+	return match ? Number(match[1]) : fallbackPx;
+}
+
+/**
+ * Resolves a color string, handling CSS variable references.
+ * Supports:
+ * - Plain colors (returned as-is)
+ * - var(--variable-name) syntax
+ * - rgba(var(--variable-name), opacity) syntax
+ *
+ * @param color - Color string to resolve
+ * @returns The resolved color value
+ */
+export function resolveColor(color: string): string {
+	// Handle var(--variable-name) syntax
+	if (color.startsWith('var(')) {
+		const varName = color.slice(4, -1).trim();
+		const val = getCSSVariableValue(varName);
+		return val || color; // Return original if var not found
+	}
+
+	// Handle rgba(var(--variable-name), opacity) syntax
+	if (color.startsWith('rgba(var(')) {
+		const rgbaMatch = color.match(/rgba\(var\(([^)]+)\),\s*([^)]+)\)/);
+		if (rgbaMatch) {
+			const rgbVarName = rgbaMatch[1];
+			const opacity = rgbaMatch[2];
+			const rgbValue = getCSSVariableValue(rgbVarName) || '0, 0, 0';
+			return `rgba(${rgbValue}, ${opacity})`;
+		}
+	}
+
+	return color;
+}
+
+/**
+ * Resolves an array of colors, handling CSS variable references.
+ *
+ * @param colors - Array of color strings to resolve
+ * @returns Array of resolved color values
+ */
+export function resolveColors(colors: string[]): string[] {
+	return colors.map((color) => resolveColor(color));
+}
+
+/**
+ * Checks if the user prefers reduced motion.
+ * Useful for disabling chart animations.
+ *
+ * @returns True if user prefers reduced motion
+ */
+export function prefersReducedMotion(): boolean {
+	if (typeof window === 'undefined') return false;
+	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Base chart colors from the design system.
+ * These are fallback values matching design system v2.0 (warm earth tones).
+ */
+export const CHART_COLOR_FALLBACKS = {
+	primary: '#9a4419',
+	primaryDark: '#7a3516',
+	text: '#2d2820',
+	textLight: '#7a7267',
+	border: '#e8e4df',
+	surface: '#faf9f7',
+	surfaceRgb: '250, 249, 247',
+	accent: '#c4a35a',
+	highlight: '#f59e0b',
+	success: '#10b981',
+	secondary: '#6b7280',
+	fontFamily: 'system-ui, sans-serif'
+} as const;
+
+/**
+ * Type for resolved chart colors
+ */
+export interface ResolvedChartColors {
+	primary: string;
+	primaryDark: string;
+	text: string;
+	textLight: string;
+	border: string;
+	surface: string;
+	surfaceRgb: string;
+	accent: string;
+	highlight: string;
+	success: string;
+	secondary: string;
+	fontFamily: string;
+	currentTheme: string;
+}
+
+/**
+ * Creates a reactive object of resolved chart colors.
+ * Call this within a $derived to make it reactive to theme changes.
+ *
+ * @returns Object with resolved color values
+ */
+export function getResolvedChartColors(): ResolvedChartColors {
+	return {
+		primary: getCSSVariableValueWithFallback('--color-primary', CHART_COLOR_FALLBACKS.primary),
+		primaryDark: getCSSVariableValueWithFallback(
+			'--color-primary-dark',
+			CHART_COLOR_FALLBACKS.primaryDark
+		),
+		text: getCSSVariableValueWithFallback('--color-text', CHART_COLOR_FALLBACKS.text),
+		textLight: getCSSVariableValueWithFallback(
+			'--color-text-light',
+			CHART_COLOR_FALLBACKS.textLight
+		),
+		border: getCSSVariableValueWithFallback('--color-border', CHART_COLOR_FALLBACKS.border),
+		surface: getCSSVariableValueWithFallback('--color-surface', CHART_COLOR_FALLBACKS.surface),
+		surfaceRgb: getCSSVariableValueWithFallback(
+			'--color-surface-rgb',
+			CHART_COLOR_FALLBACKS.surfaceRgb
+		),
+		accent: getCSSVariableValueWithFallback('--color-accent', CHART_COLOR_FALLBACKS.accent),
+		highlight: getCSSVariableValueWithFallback(
+			'--color-highlight',
+			CHART_COLOR_FALLBACKS.highlight
+		),
+		success: getCSSVariableValueWithFallback('--color-success', CHART_COLOR_FALLBACKS.success),
+		secondary: getCSSVariableValueWithFallback(
+			'--color-secondary',
+			CHART_COLOR_FALLBACKS.secondary
+		),
+		fontFamily: getCSSVariableValueWithFallback(
+			'--font-family-sans',
+			CHART_COLOR_FALLBACKS.fontFamily
+		),
+		// Include theme to make $derived reactive to theme changes
+		currentTheme: getTheme()
+	};
+}
+
+/**
+ * Common tooltip styles for ECharts components.
+ * Returns style configuration object for consistent tooltip appearance.
+ *
+ * @param colors - Resolved chart colors
+ * @returns ECharts tooltip configuration object
+ */
+export function getEChartsTooltipStyle(colors: ResolvedChartColors) {
+	return {
+		backgroundColor: `color-mix(in srgb, ${colors.surface} 90%, transparent)`,
+		textStyle: {
+			color: colors.text,
+			fontSize: 12,
+			fontFamily: colors.fontFamily
+		},
+		borderRadius: 8,
+		borderColor: colors.border,
+		borderWidth: 1,
+		padding: [10, 14],
+		extraCssText:
+			'backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg);'
+	};
+}
+
+/**
+ * Common axis line styles for ECharts components.
+ *
+ * @param colors - Resolved chart colors
+ * @returns ECharts axis line style configuration
+ */
+export function getEChartsAxisLineStyle(colors: ResolvedChartColors) {
+	return {
+		lineStyle: {
+			color: colors.border
+		}
+	};
+}
+
+/**
+ * Common split line styles for ECharts components.
+ *
+ * @param colors - Resolved chart colors
+ * @returns ECharts split line style configuration
+ */
+export function getEChartsSplitLineStyle(colors: ResolvedChartColors) {
+	return {
+		lineStyle: {
+			color: colors.border,
+			opacity: 0.3,
+			type: 'dashed' as const
+		}
+	};
+}
diff --git a/src/lib/utils/filterUtils.ts b/src/lib/utils/filterUtils.ts
index 09b13843..4cedc6de 100644
--- a/src/lib/utils/filterUtils.ts
+++ b/src/lib/utils/filterUtils.ts
@@ -163,3 +163,63 @@ export function createDerivedCountStore<TItem>(
 		return counts;
 	});
 }
+
+/**
+ * Checks if any filters in the filter state object are active.
+ * Handles arrays, objects (like yearRange), and primitive values.
+ *
+ * @param filters - The filter state object to check
+ * @returns True if any filter has active values
+ *
+ * @example
+ * const active = areFiltersActive($activeFilters);
+ * // Returns true if any filter array has items, or yearRange is set, etc.
+ */
+export function areFiltersActive<T extends object>(filters: T | null | undefined): boolean {
+	if (!filters) return false;
+
+	return Object.values(filters).some((val: unknown) => {
+		// Check for non-empty arrays
+		if (Array.isArray(val) && val.length > 0) return true;
+
+		// Check for non-null, non-array objects (like yearRange: { min, max })
+		if (
+			val !== null &&
+			val !== undefined &&
+			typeof val === 'object' &&
+			!Array.isArray(val) &&
+			Object.keys(val).length > 0
+		) {
+			return true;
+		}
+
+		// Check for truthy primitive values (non-empty strings, non-zero numbers, true)
+		if (!Array.isArray(val) && typeof val !== 'object' && val !== null && val !== undefined) {
+			return val !== '' && val !== 0 && val !== false;
+		}
+
+		return false;
+	});
+}
+
+/**
+ * Creates a sort change handler factory.
+ * Returns a function that updates the activeSort variable when sort changes.
+ *
+ * @param allowedSorts - Array of allowed sort keys for the specific page
+ * @returns A handler function for sortChange events
+ *
+ * @example
+ * const handleSortChange = createSortHandler(['date', 'title', 'citations']);
+ * handleSortChange({ sortBy: 'date' }); // Updates activeSort
+ */
+export function createSortHandler<T extends string>(allowedSorts: T[]) {
+	return (
+		data: { sortBy: T },
+		setActiveSort: (sort: T) => void
+	): void => {
+		if (allowedSorts.includes(data.sortBy)) {
+			setActiveSort(data.sortBy);
+		}
+	};
+}
diff --git a/src/lib/utils/scrollAnimations.ts b/src/lib/utils/scrollAnimations.ts
deleted file mode 100644
index 1e55b277..00000000
--- a/src/lib/utils/scrollAnimations.ts
+++ /dev/null
@@ -1,452 +0,0 @@
-import { animationsEnabledStore } from '$lib/stores/globalState.svelte';
-
-/**
- * @deprecated This module is deprecated in favor of CSS-only scroll animations.
- * 
- * Use the modern CSS animation classes instead:
- * - `scroll-reveal` - Fade-up animation triggered on viewport entry
- * - `scroll-reveal-scale` - Scale-in animation for cards and images
- * - `grid-stagger` - Container class for staggered child animations
- * - `page-enter` - Subtle page load animation
- * 
- * These CSS classes use native scroll-driven animations (animation-timeline: view())
- * with graceful fallbacks for unsupported browsers. They automatically respect
- * prefers-reduced-motion and require no JavaScript.
- * 
- * Example migration:
- * ```svelte
- * <!-- OLD -->
- * <div use:scrollAnimate={{ animationClass: 'scale-in' }}>
- * 
- * <!-- NEW -->
- * <div class="scroll-reveal-scale">
- * ```
- * 
- * See src/styles/components/animations.css for the modern animation system.
- */
-
-// Get animation state helper
-const isAnimationsEnabled = () => animationsEnabledStore.get();
-
-export interface ScrollAnimationOptions {
-	threshold?: number;
-	rootMargin?: string;
-	once?: boolean;
-	delay?: number;
-	duration?: number;
-	easing?: string;
-}
-
-export interface ScrollAnimationConfig {
-	element: HTMLElement;
-	animationClass?: string;
-	options?: ScrollAnimationOptions;
-	onEnter?: (element: HTMLElement) => void;
-	onExit?: (element: HTMLElement) => void;
-}
-
-// Global animation defaults pulled from CSS variables
-function readCssVar(name: string, fallback: string): string {
-	if (typeof window !== 'undefined') {
-		const val = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-		if (val) return val;
-	}
-	return fallback;
-}
-
-const DEFAULT_EASING = readCssVar('--anim-ease-base', 'cubic-bezier(0.4, 0, 0.2, 1)');
-
-function cssDurationToMs(value: string): number {
-	const v = value.trim();
-	if (v.endsWith('ms')) return parseFloat(v);
-	if (v.endsWith('s')) return parseFloat(v) * 1000;
-	return parseFloat(v) || 600;
-}
-
-const DEFAULT_DURATION_MS = cssDurationToMs(readCssVar('--anim-duration-base', '0.6s'));
-
-/**
- * Creates an intersection observer for scroll-triggered animations
- */
-export function createScrollObserver(configs: ScrollAnimationConfig[]): IntersectionObserver {
-	if (!isAnimationsEnabled()) {
-		configs.forEach(({ element, animationClass, onEnter }) => {
-			if (animationClass) {
-				element.classList.add(animationClass);
-			}
-			onEnter?.(element);
-		});
-		// Return a dummy observer that does nothing
-		return new IntersectionObserver(() => {});
-	}
-
-	const defaultOptions: ScrollAnimationOptions = {
-		threshold: 0.1,
-		rootMargin: '50px',
-		once: true,
-		delay: 0,
-		duration: DEFAULT_DURATION_MS,
-		easing: DEFAULT_EASING
-	};
-
-	const observer = new IntersectionObserver(
-		(entries) => {
-			entries.forEach((entry) => {
-				const config = configs.find((c) => c.element === entry.target);
-				if (!config) return;
-
-				const options = { ...defaultOptions, ...config.options };
-
-				if (entry.isIntersecting) {
-					// Add animation class with delay
-					setTimeout(() => {
-						if (config.animationClass) {
-							entry.target.classList.add(config.animationClass);
-						}
-						config.onEnter?.(entry.target as HTMLElement);
-					}, options.delay);
-
-					// If once is true, stop observing this element
-					if (options.once) {
-						observer.unobserve(entry.target);
-					}
-				} else if (!options.once) {
-					// Remove animation class when element exits viewport
-					if (config.animationClass) {
-						entry.target.classList.remove(config.animationClass);
-					}
-					config.onExit?.(entry.target as HTMLElement);
-				}
-			});
-		},
-		{
-			threshold: configs[0]?.options?.threshold || defaultOptions.threshold,
-			rootMargin: configs[0]?.options?.rootMargin || defaultOptions.rootMargin
-		}
-	);
-
-	// Start observing all elements
-	configs.forEach((config) => {
-		observer.observe(config.element);
-	});
-
-	return observer;
-}
-
-/**
- * Svelte action for scroll animations
- */
-export function scrollAnimate(
-	element: HTMLElement,
-	options: ScrollAnimationOptions & { animationClass?: string } = {}
-) {
-	if (!isAnimationsEnabled()) {
-		element.style.opacity = '1';
-		element.style.transform = 'none';
-		element.style.transition = 'none';
-		element.removeAttribute('data-animate');
-
-		// Clean up the inline style after the current frame to avoid interfering
-		// with other potential style changes.
-		requestAnimationFrame(() => {
-			element.style.transition = '';
-		});
-
-		return {
-			destroy() {
-				/* No-op */
-			}
-		};
-	}
-
-	const defaultOptions: ScrollAnimationOptions = {
-		threshold: 0.1,
-		rootMargin: '50px',
-		once: true,
-		delay: 0,
-		duration: DEFAULT_DURATION_MS,
-		easing: DEFAULT_EASING
-	};
-
-	const finalOptions = { ...defaultOptions, ...options };
-
-	let transformCleanupTimer: ReturnType<typeof setTimeout> | null = null;
-
-	const scheduleTransformCleanup = () => {
-		// Drop lingering transforms once the entrance animation finishes so popovers can rise above siblings
-		if (transformCleanupTimer) {
-			clearTimeout(transformCleanupTimer);
-		}
-		const duration =
-			typeof finalOptions.duration === 'number' ? finalOptions.duration : DEFAULT_DURATION_MS;
-		const delay = typeof finalOptions.delay === 'number' ? finalOptions.delay : 0;
-		transformCleanupTimer = setTimeout(() => {
-			if (element.style.transform === 'translateY(0)') {
-				element.style.removeProperty('transform');
-			}
-			transformCleanupTimer = null;
-		}, duration + delay + 50);
-	};
-
-	// Add data attribute for CSS control
-	element.setAttribute('data-animate', 'true');
-
-	// Set transition immediately
-	element.style.transition = `all ${finalOptions.duration ?? DEFAULT_DURATION_MS}ms ${finalOptions.easing || DEFAULT_EASING}`;
-
-	const observer = new IntersectionObserver(
-		(entries) => {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting) {
-					setTimeout(() => {
-						element.style.opacity = '1';
-						element.style.transform = 'translateY(0)';
-						element.classList.add('animate-in');
-
-						if (options.animationClass) {
-							element.classList.add(options.animationClass);
-						}
-
-						scheduleTransformCleanup();
-					}, finalOptions.delay);
-
-					if (finalOptions.once) {
-						observer.unobserve(element);
-					}
-				} else if (!finalOptions.once) {
-					if (transformCleanupTimer) {
-						clearTimeout(transformCleanupTimer);
-						transformCleanupTimer = null;
-					}
-					element.style.opacity = '0';
-					element.style.transform = 'translateY(30px)';
-					element.classList.remove('animate-in');
-
-					if (options.animationClass) {
-						element.classList.remove(options.animationClass);
-					}
-				}
-			});
-		},
-		{
-			threshold: finalOptions.threshold,
-			rootMargin: finalOptions.rootMargin
-		}
-	);
-
-	// Start observing
-	observer.observe(element);
-
-	return {
-		destroy() {
-			observer.disconnect();
-			element.removeAttribute('data-animate');
-			if (transformCleanupTimer) {
-				clearTimeout(transformCleanupTimer);
-			}
-		}
-	};
-}
-
-/**
- * Smooth scroll to element with offset
- */
-export function smoothScrollTo(
-	target: string | HTMLElement,
-	options: {
-		offset?: number;
-		duration?: number;
-		easing?: (t: number) => number;
-		callback?: () => void;
-	} = {}
-) {
-	const element = typeof target === 'string' ? document.querySelector(target) : target;
-	if (!element) return;
-
-	const startPosition = window.pageYOffset;
-	const targetPosition =
-		element.getBoundingClientRect().top + startPosition - (options.offset || 0);
-	const distance = targetPosition - startPosition;
-	const duration = options.duration || 800;
-	const easing = options.easing || ((t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t));
-
-	let startTime: number | null = null;
-
-	function animation(currentTime: number) {
-		if (startTime === null) startTime = currentTime;
-		const timeElapsed = currentTime - startTime;
-		const progress = Math.min(timeElapsed / duration, 1);
-		const easedProgress = easing(progress);
-
-		window.scrollTo(0, startPosition + distance * easedProgress);
-
-		if (progress < 1) {
-			requestAnimationFrame(animation);
-		} else {
-			options.callback?.();
-		}
-	}
-
-	requestAnimationFrame(animation);
-}
-
-/**
- * Parallax scroll effect
- */
-export function parallaxScroll(
-	element: HTMLElement,
-	speed: number = 0.5,
-	direction: 'vertical' | 'horizontal' = 'vertical'
-) {
-	function updateParallax() {
-		const scrolled = window.pageYOffset;
-		const rate = scrolled * -speed;
-
-		if (direction === 'vertical') {
-			element.style.transform = `translateY(${rate}px)`;
-		} else {
-			element.style.transform = `translateX(${rate}px)`;
-		}
-	}
-
-	// Throttle scroll events for performance
-	let ticking = false;
-	function requestTick() {
-		if (!ticking) {
-			requestAnimationFrame(updateParallax);
-			ticking = true;
-		}
-	}
-
-	function handleScroll() {
-		ticking = false;
-		requestTick();
-	}
-
-	window.addEventListener('scroll', handleScroll, { passive: true });
-
-	return {
-		destroy() {
-			window.removeEventListener('scroll', handleScroll);
-		}
-	};
-}
-
-/**
- * Staggered animations for lists
- */
-export function staggeredAnimation(
-	elements: HTMLElement[],
-	options: {
-		delay?: number;
-		stagger?: number;
-		animationClass?: string;
-		threshold?: number;
-	} = {}
-) {
-	if (!isAnimationsEnabled()) {
-		elements.forEach((element) => {
-			element.style.opacity = '1';
-			element.style.transform = 'translateY(0)';
-			element.style.transition = 'none';
-			element.removeAttribute('data-animate');
-
-			requestAnimationFrame(() => {
-				element.style.transition = '';
-			});
-		});
-		return {
-			destroy() {
-				/* No-op */
-			}
-		};
-	}
-
-	const { delay = 0, stagger = 100, animationClass = 'animate-in', threshold = 0.1 } = options;
-
-	// Set initial state for all elements with data attribute
-	elements.forEach((element, index) => {
-		element.setAttribute('data-animate', 'true');
-		element.style.transition = `all ${DEFAULT_DURATION_MS}ms ${DEFAULT_EASING}`;
-		element.style.transitionDelay = `${delay + index * stagger}ms`;
-	});
-
-	const observer = new IntersectionObserver(
-		(entries) => {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting) {
-					const element = entry.target as HTMLElement;
-					element.style.opacity = '1';
-					element.style.transform = 'translateY(0)';
-					element.classList.add(animationClass);
-					observer.unobserve(element);
-				}
-			});
-		},
-		{ threshold }
-	);
-
-	elements.forEach((element) => observer.observe(element));
-
-	return {
-		destroy() {
-			observer.disconnect();
-			elements.forEach((element) => {
-				element.removeAttribute('data-animate');
-			});
-		}
-	};
-}
-
-/**
- * Reading progress indicator
- */
-export function createReadingProgress(
-	container: HTMLElement,
-	progressBar: HTMLElement,
-	options: {
-		offset?: number;
-		smoothing?: number;
-	} = {}
-) {
-	const { offset = 0, smoothing = 0.1 } = options;
-	let currentProgress = 0;
-	let targetProgress = 0;
-
-	function updateProgress() {
-		const containerRect = container.getBoundingClientRect();
-		const containerHeight = container.offsetHeight;
-		const viewportHeight = window.innerHeight;
-
-		// Calculate how much of the container has been scrolled through
-		const scrolled = Math.max(0, -containerRect.top + offset);
-		const maxScroll = containerHeight - viewportHeight + offset;
-
-		targetProgress = Math.min(100, Math.max(0, (scrolled / maxScroll) * 100));
-
-		// Smooth the progress with easing
-		currentProgress += (targetProgress - currentProgress) * smoothing;
-
-		progressBar.style.width = `${currentProgress}%`;
-
-		if (Math.abs(targetProgress - currentProgress) > 0.1) {
-			requestAnimationFrame(updateProgress);
-		}
-	}
-
-	let ticking = false;
-	function handleScroll() {
-		if (!ticking) {
-			requestAnimationFrame(updateProgress);
-			ticking = true;
-		}
-	}
-
-	window.addEventListener('scroll', handleScroll, { passive: true });
-
-	return {
-		destroy() {
-			window.removeEventListener('scroll', handleScroll);
-		}
-	};
-}
diff --git a/src/lib/utils/scrollPreservation.ts b/src/lib/utils/scrollPreservation.ts
deleted file mode 100644
index 1723890c..00000000
--- a/src/lib/utils/scrollPreservation.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-/**
- * Utility functions for preserving scroll position during dynamic content changes
- */
-
-/**
- * Preserves scroll position when executing a function that might change page content
- * @param fn - The function to execute (e.g., a filter toggle)
- * @param delay - Delay in ms before restoring scroll position (default: 50ms)
- */
-export function preserveScrollPosition<T extends (...args: any[]) => any>(
-	fn: T,
-	delay: number = 50
-): T {
-	return ((...args: Parameters<T>) => {
-		// Check if we're in a browser environment
-		if (typeof window === 'undefined') {
-			return fn(...args);
-		}
-
-		// Capture current scroll position
-		const scrollY = window.scrollY;
-		const scrollX = window.scrollX;
-
-		// Execute the function (this will change the content)
-		const result = fn(...args);
-
-		// Restore scroll position after a short delay to allow DOM updates
-		requestAnimationFrame(() => {
-			setTimeout(() => {
-				window.scrollTo(scrollX, scrollY);
-			}, delay);
-		});
-
-		return result;
-	}) as T;
-}
-
-/**
- * Scroll preservation that works with smooth scroll behavior
- * @param callback - The function to execute that changes content
- * @param delay - Delay in ms before restoring scroll position
- */
-export function withScrollPreservation(callback: () => void, delay: number = 150): void {
-	// Check if we're in a browser environment
-	if (typeof window === 'undefined') {
-		callback();
-		return;
-	}
-
-	const scrollY = window.scrollY;
-	const scrollX = window.scrollX;
-
-	// Store original scroll behavior
-	const originalScrollBehavior = document.documentElement.style.scrollBehavior;
-
-	// Execute the callback
-	callback();
-
-	// Function to restore scroll position
-	const restorePosition = () => {
-		// Temporarily disable smooth scrolling
-		document.documentElement.style.scrollBehavior = 'auto';
-
-		// Restore position
-		window.scrollTo(scrollX, scrollY);
-
-		// Restore original scroll behavior after a brief delay
-		setTimeout(() => {
-			document.documentElement.style.scrollBehavior = originalScrollBehavior;
-		}, 100);
-	};
-
-	// Multiple restore attempts with different timing
-	requestAnimationFrame(() => {
-		restorePosition();
-
-		// Additional attempt after delay
-		setTimeout(restorePosition, delay);
-	});
-}
-
-/**
- * Enhanced version that also preserves the scroll position of specific elements
- * @param callback - The function to execute
- * @param preserveElements - Array of element selectors to preserve scroll position for
- * @param delay - Delay in ms before restoring scroll position
- */
-export function withAdvancedScrollPreservation(
-	callback: () => void,
-	preserveElements: string[] = [],
-	delay: number = 50
-): void {
-	// Check if we're in a browser environment
-	if (typeof window === 'undefined') {
-		callback();
-		return;
-	}
-
-	// Capture window scroll position
-	const windowScrollY = window.scrollY;
-	const windowScrollX = window.scrollX;
-
-	// Capture scroll positions of specific elements
-	const elementScrollPositions: Array<{ element: Element; scrollTop: number; scrollLeft: number }> =
-		[];
-
-	preserveElements.forEach((selector) => {
-		const elements = document.querySelectorAll(selector);
-		elements.forEach((element) => {
-			elementScrollPositions.push({
-				element,
-				scrollTop: element.scrollTop,
-				scrollLeft: element.scrollLeft
-			});
-		});
-	});
-
-	// Execute the callback
-	callback();
-
-	// Restore scroll positions
-	requestAnimationFrame(() => {
-		setTimeout(() => {
-			// Restore window scroll position
-			window.scrollTo(windowScrollX, windowScrollY);
-
-			// Restore element scroll positions
-			elementScrollPositions.forEach(({ element, scrollTop, scrollLeft }) => {
-				element.scrollTop = scrollTop;
-				element.scrollLeft = scrollLeft;
-			});
-		}, delay);
-	});
-}
-
-/**
- * Preserves only the scroll position of specific elements without affecting window scroll
- * This is ideal for sidebar filters where we want to keep the sidebar position stable
- * but allow the main content area to update naturally
- * @param callback - The function to execute
- * @param preserveElements - Array of element selectors to preserve scroll position for
- * @param delay - Delay in ms before restoring scroll position
- */
-export function withElementScrollPreservation(
-	callback: () => void,
-	preserveElements: string[] = [],
-	delay: number = 50
-): void {
-	// Check if we're in a browser environment
-	if (typeof window === 'undefined') {
-		callback();
-		return;
-	}
-
-	// Capture scroll positions of specific elements only
-	const elementScrollPositions: Array<{ element: Element; scrollTop: number; scrollLeft: number }> =
-		[];
-
-	preserveElements.forEach((selector) => {
-		const elements = document.querySelectorAll(selector);
-		elements.forEach((element) => {
-			elementScrollPositions.push({
-				element,
-				scrollTop: element.scrollTop,
-				scrollLeft: element.scrollLeft
-			});
-		});
-	});
-
-	// Execute the callback
-	callback();
-
-	// Restore only element scroll positions (not window scroll)
-	requestAnimationFrame(() => {
-		setTimeout(() => {
-			elementScrollPositions.forEach(({ element, scrollTop, scrollLeft }) => {
-				element.scrollTop = scrollTop;
-				element.scrollLeft = scrollLeft;
-			});
-		}, delay);
-	});
-}
diff --git a/src/lib/utils/seoUtils.ts b/src/lib/utils/seoUtils.ts
index 51b74342..817e2a06 100644
--- a/src/lib/utils/seoUtils.ts
+++ b/src/lib/utils/seoUtils.ts
@@ -9,6 +9,12 @@ import {
 	socialLinks
 } from '$lib/data/siteConfig';
 import { getDefaultDescription } from '$lib/utils/siteHelpers';
+import { smartTruncate } from '$lib/utils/textUtils';
+import {
+	COMMUNICATION_TYPE_SEO_LABELS,
+	PUBLICATION_TYPE_SEO_LABELS,
+	ACTIVITY_TYPE_SEO_LABELS
+} from '$lib/utils/typeUtils';
 
 // ============================================================================
 // JSON-LD SCHEMA TYPES
@@ -291,42 +297,9 @@ export function createSectionBreadcrumbs(
 export function createCommunicationSEODescription(communication: Communication): string {
 	const { type, title, conference, location, country, year, abstract, authors } = communication;
 
-	// Helper to get readable type labels
-	const getTypeLabel = (type: string): string => {
-		const typeLabels: Record<string, string> = {
-			conference: 'Conference paper',
-			workshop: 'Workshop presentation',
-			seminar: 'Seminar',
-			lecture: 'Lecture',
-			panel: 'Panel discussion',
-			event: 'Academic presentation'
-		};
-		return typeLabels[type] || 'Academic presentation';
-	};
-
-	// Helper to truncate text while preserving sentence boundaries
-	const smartTruncate = (text: string, maxLength: number): string => {
-		if (text.length <= maxLength) return text;
-
-		// Find the last complete sentence within the limit
-		const truncated = text.substring(0, maxLength);
-		const lastSentenceEnd = Math.max(
-			truncated.lastIndexOf('. '),
-			truncated.lastIndexOf('? '),
-			truncated.lastIndexOf('! ')
-		);
-
-		if (lastSentenceEnd > maxLength * 0.6) {
-			// If we have a good sentence break, use it
-			return text.substring(0, lastSentenceEnd + 1).trim();
-		}
-
-		// Otherwise, truncate at word boundary and add ellipsis
-		const lastSpace = truncated.lastIndexOf(' ');
-		return lastSpace > maxLength * 0.6
-			? text.substring(0, lastSpace) + '...'
-			: text.substring(0, maxLength - 3) + '...';
-	};
+	// Get type label from centralized mapping
+	const getTypeLabel = (type: string): string =>
+		COMMUNICATION_TYPE_SEO_LABELS[type] || 'Academic presentation';
 
 	// Start building the description with the most important information first
 	let description = '';
@@ -454,45 +427,9 @@ export function createPublicationSEODescription(publication: Publication): strin
 	const { type, title, journal, publisher, book, year, abstract, authors, placeOfPublication } =
 		publication;
 
-	// Helper to get readable type labels
-	const getTypeLabel = (type: string): string => {
-		const typeLabels: Record<string, string> = {
-			article: 'Journal article',
-			book: 'Book',
-			chapter: 'Book chapter',
-			'special-issue': 'Special issue',
-			report: 'Research report',
-			encyclopedia: 'Encyclopedia entry',
-			blogpost: 'Blog post',
-			'masters-thesis': "Master's thesis",
-			'phd-dissertation': 'PhD dissertation'
-		};
-		return typeLabels[type] || 'Academic publication';
-	};
-
-	// Helper to truncate text while preserving sentence boundaries (reuse existing function)
-	const smartTruncate = (text: string, maxLength: number): string => {
-		if (text.length <= maxLength) return text;
-
-		// Find the last complete sentence within the limit
-		const truncated = text.substring(0, maxLength);
-		const lastSentenceEnd = Math.max(
-			truncated.lastIndexOf('. '),
-			truncated.lastIndexOf('? '),
-			truncated.lastIndexOf('! ')
-		);
-
-		if (lastSentenceEnd > maxLength * 0.6) {
-			// If we have a good sentence break, use it
-			return text.substring(0, lastSentenceEnd + 1).trim();
-		}
-
-		// Otherwise, truncate at word boundary and add ellipsis
-		const lastSpace = truncated.lastIndexOf(' ');
-		return lastSpace > maxLength * 0.6
-			? text.substring(0, lastSpace) + '...'
-			: text.substring(0, maxLength - 3) + '...';
-	};
+	// Get type label from centralized mapping
+	const getTypeLabel = (type: string): string =>
+		PUBLICATION_TYPE_SEO_LABELS[type] || 'Academic publication';
 
 	// Start building the description with the most important information first
 	let description = '';
@@ -617,46 +554,9 @@ export function createPublicationSEOKeywords(publication: Publication): string {
 export function createActivitySEODescription(activity: Activity): string {
 	const { title, description, type, year, tags } = activity;
 
-	// Helper to get blog-friendly type labels with engaging language
-	const getBlogTypeLabel = (type?: string): string => {
-		const typeLabels: Record<string, string> = {
-			conference: 'Conference insights',
-			workshop: 'Workshop highlights',
-			seminar: 'Seminar takeaways',
-			lecture: 'Lecture summary',
-			panel: 'Panel discussion',
-			grant: 'Research funding',
-			publication: 'Publication update',
-			event: 'Academic event',
-			visit: 'Academic visit',
-			news: 'Latest news'
-		};
-		return typeLabels[type || ''] || 'Academic update';
-	};
-
-	// Helper to truncate text while preserving word boundaries
-	const smartTruncate = (text: string, maxLength: number): string => {
-		if (text.length <= maxLength) return text;
-
-		// Find the last complete sentence within the limit
-		const truncated = text.substring(0, maxLength);
-		const lastSentenceEnd = Math.max(
-			truncated.lastIndexOf('. '),
-			truncated.lastIndexOf('? '),
-			truncated.lastIndexOf('! ')
-		);
-
-		if (lastSentenceEnd > maxLength * 0.6) {
-			// If we have a good sentence break, use it
-			return text.substring(0, lastSentenceEnd + 1).trim();
-		}
-
-		// Otherwise, truncate at word boundary and add ellipsis
-		const lastSpace = truncated.lastIndexOf(' ');
-		return lastSpace > maxLength * 0.6
-			? text.substring(0, lastSpace) + '...'
-			: text.substring(0, maxLength - 3) + '...';
-	};
+	// Get blog-friendly type label from centralized mapping
+	const getBlogTypeLabel = (type?: string): string =>
+		ACTIVITY_TYPE_SEO_LABELS[type || ''] || 'Academic update';
 
 	// Start with the activity description (primary content)
 	let seoDescription = description || '';
diff --git a/src/lib/utils/textUtils.ts b/src/lib/utils/textUtils.ts
index fd688bd7..4b4c996b 100644
--- a/src/lib/utils/textUtils.ts
+++ b/src/lib/utils/textUtils.ts
@@ -10,3 +10,55 @@ export function truncateAbstract(text: string | undefined, maxLength: number = 2
 	if (text.length <= maxLength) return text;
 	return text.substring(0, maxLength) + '...';
 }
+
+/**
+ * Intelligently truncates text while preserving sentence boundaries or word breaks.
+ *
+ * This function attempts to find natural break points in text:
+ * 1. First, it looks for complete sentences (ending with . ? !) within the limit
+ * 2. If no good sentence break exists, it truncates at a word boundary
+ * 3. Falls back to hard truncation only if necessary
+ *
+ * Useful for creating SEO descriptions that remain readable.
+ *
+ * @param text The text to truncate
+ * @param maxLength Maximum length of the result (including ellipsis if added)
+ * @param minBreakRatio Minimum position (as ratio of maxLength) for a valid break point (default: 0.6)
+ * @returns Truncated text, potentially with ellipsis
+ *
+ * @example
+ * smartTruncate("This is a sentence. This is another.", 30)
+ * // Returns: "This is a sentence."
+ *
+ * @example
+ * smartTruncate("A very long text without sentence breaks here", 20)
+ * // Returns: "A very long text..."
+ */
+export function smartTruncate(
+	text: string,
+	maxLength: number,
+	minBreakRatio: number = 0.6
+): string {
+	if (text.length <= maxLength) return text;
+
+	// Find the last complete sentence within the limit
+	const truncated = text.substring(0, maxLength);
+	const lastSentenceEnd = Math.max(
+		truncated.lastIndexOf('. '),
+		truncated.lastIndexOf('? '),
+		truncated.lastIndexOf('! ')
+	);
+
+	const minBreakPosition = maxLength * minBreakRatio;
+
+	if (lastSentenceEnd > minBreakPosition) {
+		// If we have a good sentence break, use it
+		return text.substring(0, lastSentenceEnd + 1).trim();
+	}
+
+	// Otherwise, truncate at word boundary and add ellipsis
+	const lastSpace = truncated.lastIndexOf(' ');
+	return lastSpace > minBreakPosition
+		? text.substring(0, lastSpace) + '...'
+		: text.substring(0, maxLength - 3) + '...';
+}
diff --git a/src/lib/utils/typeUtils.ts b/src/lib/utils/typeUtils.ts
new file mode 100644
index 00000000..72b1c6a0
--- /dev/null
+++ b/src/lib/utils/typeUtils.ts
@@ -0,0 +1,137 @@
+/**
+ * Type Display Utilities
+ *
+ * Centralized functions for converting internal type identifiers to
+ * human-readable display text. Used across detail pages for badges,
+ * titles, and labels.
+ */
+
+/**
+ * Maps publication type identifiers to human-readable display text.
+ *
+ * @param type - The internal publication type identifier
+ * @returns Human-readable display text for the type
+ *
+ * @example
+ * getPublicationTypeBadge('article') // Returns: 'Journal Article'
+ * getPublicationTypeBadge('chapter') // Returns: 'Book Chapter'
+ */
+export function getPublicationTypeBadge(type: string): string {
+	const typeLabels: Record<string, string> = {
+		article: 'Journal Article',
+		'bulletin-article': 'Bulletin Article',
+		book: 'Book',
+		chapter: 'Book Chapter',
+		'special-issue': 'Special Issue',
+		report: 'Report',
+		encyclopedia: 'Encyclopedia Entry',
+		blogpost: 'Blog Post',
+		'masters-thesis': "Master's Thesis",
+		'phd-dissertation': 'PhD Dissertation'
+	};
+	return typeLabels[type] || type;
+}
+
+/**
+ * Maps communication type identifiers to human-readable display text.
+ *
+ * @param type - The internal communication type identifier
+ * @returns Human-readable display text for the type
+ *
+ * @example
+ * getCommunicationTypeBadge('conference') // Returns: 'Conference Paper'
+ * getCommunicationTypeBadge('workshop') // Returns: 'Workshop Presentation'
+ */
+export function getCommunicationTypeBadge(type: string): string {
+	const typeLabels: Record<string, string> = {
+		conference: 'Conference Paper',
+		workshop: 'Workshop Presentation',
+		seminar: 'Seminar',
+		lecture: 'Lecture',
+		panel: 'Panel',
+		event: 'Academic Presentation'
+	};
+	return typeLabels[type] || type;
+}
+
+/**
+ * Maps activity type identifiers to human-readable display text.
+ * Uses engaging, blog-friendly labels.
+ *
+ * @param type - The internal activity type identifier
+ * @returns Human-readable display text for the type
+ *
+ * @example
+ * getActivityTypeBadge('conference') // Returns: 'Conference'
+ * getActivityTypeBadge('grant') // Returns: 'Research Grant'
+ */
+export function getActivityTypeBadge(type: string | undefined): string {
+	if (!type) return 'Activity';
+
+	const typeLabels: Record<string, string> = {
+		conference: 'Conference',
+		workshop: 'Workshop',
+		seminar: 'Seminar',
+		lecture: 'Lecture',
+		panel: 'Panel',
+		grant: 'Research Grant',
+		publication: 'Publication',
+		event: 'Event',
+		visit: 'Academic Visit',
+		news: 'News'
+	};
+	return typeLabels[type] || type;
+}
+
+/**
+ * Formats a panel type for display by capitalizing the first letter.
+ * Used for activity panel types.
+ *
+ * @param panelType - The panel type string to format
+ * @returns Formatted panel type with first letter capitalized
+ *
+ * @example
+ * formatPanelType('conference') // Returns: 'Conference'
+ */
+export function formatPanelType(panelType: string | undefined): string {
+	if (!panelType) return '';
+	return panelType.charAt(0).toUpperCase() + panelType.slice(1);
+}
+
+/**
+ * Type label mappings for SEO purposes - used in meta descriptions.
+ * These are more descriptive than the badge labels.
+ */
+export const PUBLICATION_TYPE_SEO_LABELS: Record<string, string> = {
+	article: 'Journal article',
+	book: 'Book',
+	chapter: 'Book chapter',
+	'special-issue': 'Special issue',
+	report: 'Research report',
+	encyclopedia: 'Encyclopedia entry',
+	blogpost: 'Blog post',
+	'masters-thesis': "Master's thesis",
+	'phd-dissertation': 'PhD dissertation'
+};
+
+export const COMMUNICATION_TYPE_SEO_LABELS: Record<string, string> = {
+	conference: 'Conference paper',
+	workshop: 'Workshop presentation',
+	seminar: 'Seminar',
+	lecture: 'Lecture',
+	panel: 'Panel discussion',
+	event: 'Academic presentation'
+};
+
+export const ACTIVITY_TYPE_SEO_LABELS: Record<string, string> = {
+	conference: 'Conference insights',
+	workshop: 'Workshop highlights',
+	seminar: 'Seminar takeaways',
+	lecture: 'Lecture summary',
+	panel: 'Panel discussion',
+	grant: 'Research funding',
+	publication: 'Publication update',
+	event: 'Academic event',
+	visit: 'Academic visit',
+	news: 'Latest news'
+};
diff --git a/src/routes/activities/[id]/+page.svelte b/src/routes/activities/[id]/+page.svelte
index 4c0c1f98..8862fc2d 100644
--- a/src/routes/activities/[id]/+page.svelte
+++ b/src/routes/activities/[id]/+page.svelte
@@ -15,7 +15,12 @@
 	import TagList from '$lib/components/molecules/TagList.svelte';
 	import ActionLinks from '$lib/components/molecules/ActionLinks.svelte';
 	import IframeRenderer from '$lib/components/molecules/IframeRenderer.svelte';
-	import { createActivitySEODescription, createActivitySEOKeywords } from '$lib/utils/seoUtils';
+	import {
+		createActivitySEODescription,
+		createActivitySEOKeywords,
+		truncateTitle
+	} from '$lib/utils/seoUtils';
+	import { formatPanelType } from '$lib/utils/typeUtils';
 	import MetaTags from '$lib/components/activities/MetaTags.svelte';
 	import { useBreadcrumbJsonLd } from '$lib/utils/breadcrumbJsonLd.svelte';
 	import { useJsonLdScript } from '$lib/utils/jsonLd.svelte';
@@ -29,12 +34,6 @@
 	const seoDescription = $derived(createActivitySEODescription(activity));
 	const seoKeywords = $derived(createActivitySEOKeywords(activity));
 
-	// Helper function to truncate title at the first colon (copied from publications page)
-	function truncateTitle(title: string): string {
-		const colonIndex = title.indexOf(':');
-		return colonIndex > -1 ? title.substring(0, colonIndex) + '...' : title;
-	}
-
 	// Define breadcrumb items - reactive to activity changes
 	const breadcrumbItems = $derived([
 		{ label: 'Activities', href: `${base}/activities` },
@@ -47,12 +46,6 @@
 	// Inject activity JSON-LD structured data
 	useJsonLdScript('activity-json-ld', () => jsonLdString);
 
-	// Helper function to format panelType for display
-	function formatPanelType(panelType: string | undefined): string {
-		if (!panelType) return '';
-		return panelType.charAt(0).toUpperCase() + panelType.slice(1);
-	}
-
 	// Optimize animations for better performance
 	$effect(() => {
 		if (browser) {
diff --git a/src/routes/communications/[id]/+page.svelte b/src/routes/communications/[id]/+page.svelte
index 7d7c432d..f20b8650 100644
--- a/src/routes/communications/[id]/+page.svelte
+++ b/src/routes/communications/[id]/+page.svelte
@@ -18,6 +18,7 @@
 		createCommunicationSEOKeywords,
 		truncateTitle
 	} from '$lib/utils/seoUtils';
+	import { getCommunicationTypeBadge } from '$lib/utils/typeUtils';
 	import MetaTags from '$lib/components/communications/MetaTags.svelte';
 	import { useBreadcrumbJsonLd } from '$lib/utils/breadcrumbJsonLd.svelte';
 
@@ -72,24 +73,6 @@
 			: []
 	);
 
-	// Helper to get badge text
-	function getTypeBadgeText(type: string): string {
-		switch (type) {
-			case 'conference':
-				return 'Conference Paper';
-			case 'workshop':
-				return 'Workshop Presentation';
-			case 'seminar':
-				return 'Seminar';
-			case 'lecture':
-				return 'Lecture';
-			case 'panel':
-				return 'Panel';
-			default:
-				return type;
-		}
-	}
-
 	// Prepare details for the DetailsGrid component
 	const communicationDetails = $derived([
 		{ label: 'Event', value: communication.conference ?? '' },
@@ -123,7 +106,7 @@
 			<PageHeader
 				title={communication.title}
 				date={communication.date}
-				typeBadgeText={getTypeBadgeText(communication.type || '')}
+				typeBadgeText={getCommunicationTypeBadge(communication.type || '')}
 				authors={communication.authors}
 			/>
 
diff --git a/src/routes/conference-activity/+page.svelte b/src/routes/conference-activity/+page.svelte
index 0e20dda9..cc3c9fca 100644
--- a/src/routes/conference-activity/+page.svelte
+++ b/src/routes/conference-activity/+page.svelte
@@ -68,6 +68,7 @@
 	import { urlFilterSync } from '$lib/actions/urlFilterSync.svelte';
 	import Sorter from '$lib/components/common/Sorter.svelte';
 	import { sortItems } from '$lib/utils/sortUtils';
+	import { areFiltersActive } from '$lib/utils/filterUtils';
 	import Icon from '@iconify/svelte'; // Import Iconify
 	import Button from '$lib/components/atoms/Button.svelte'; // Import Button
 
@@ -123,24 +124,7 @@
 			})) || []
 	);
 
-	// Helper to check if any filters are active (consistent with communications/+page.svelte)
-	function areFiltersActive(filters: typeof $activeFilters): boolean {
-		if (!filters) return false;
-		return Object.values(filters).some(
-			(val) =>
-				(Array.isArray(val) && val.length > 0) ||
-				(val !== null &&
-					val !== undefined &&
-					typeof val === 'object' &&
-					Object.keys(val).length > 0 &&
-					val.constructor === Object) ||
-				(!Array.isArray(val) &&
-					typeof val !== 'object' &&
-					val !== null &&
-					val !== undefined &&
-					val !== '')
-		);
-	} // Function to handle filter requests from items (consistent with communications/+page.svelte)
+	// Function to handle filter requests from items (consistent with communications/+page.svelte)
 	function handleFilterRequest(event: { type: string; value: string }) {
 		const { type, value } = event;
 		if (type === 'tag') {
diff --git a/src/routes/publications/+page.svelte b/src/routes/publications/+page.svelte
index a9deb607..45dbadeb 100644
--- a/src/routes/publications/+page.svelte
+++ b/src/routes/publications/+page.svelte
@@ -46,6 +46,7 @@
 	import { urlFilterSync } from '$lib/actions/urlFilterSync.svelte';
 	import Sorter from '$lib/components/common/Sorter.svelte';
 	import { sortItems } from '$lib/utils/sortUtils';
+	import { areFiltersActive } from '$lib/utils/filterUtils';
 	import Icon from '@iconify/svelte';
 	import Button from '$lib/components/atoms/Button.svelte';
 
@@ -86,24 +87,11 @@
 		} else if (type === 'country') {
 			toggleCountryFilter(value);
 		}
-	} // Handler for the sortChange event from the Sorter component
-	function handleSortChange(data: { sortBy: 'date' | 'title' | 'citations' }) {
-		activeSort = data.sortBy;
 	}
 
-	// Helper to check if any filters are active
-	function areFiltersActive(filters: typeof $activeFilters): boolean {
-		if (!filters) return false;
-		return Object.values(filters).some(
-			(val) =>
-				(Array.isArray(val) && val.length > 0) ||
-				(val !== null &&
-					val !== undefined &&
-					typeof val === 'object' &&
-					Object.keys(val).length > 0 &&
-					val.constructor === Object) || // Check for non-null, non-array objects like yearRange
-				(!Array.isArray(val) && typeof val !== 'object' && val !== null && val !== undefined) // Check for primitive values if needed
-		);
+	// Handler for the sortChange event from the Sorter component
+	function handleSortChange(data: { sortBy: 'date' | 'title' | 'citations' }) {
+		activeSort = data.sortBy;
 	}
 
 	// Prepare setters object for the action
diff --git a/src/routes/publications/[id]/+page.svelte b/src/routes/publications/[id]/+page.svelte
index 6609867a..f441a4ca 100644
--- a/src/routes/publications/[id]/+page.svelte
+++ b/src/routes/publications/[id]/+page.svelte
@@ -27,6 +27,7 @@
 		createPublicationSEOKeywords,
 		truncateTitle
 	} from '$lib/utils/seoUtils';
+	import { getPublicationTypeBadge } from '$lib/utils/typeUtils';
 
 	interface Props {
 		data: PageData;
@@ -50,34 +51,6 @@
 	useBreadcrumbJsonLd(() => breadcrumbItems);
 	useJsonLdScript('publication-json-ld', () => jsonLdString);
 
-	// Helper to get badge text
-	function getTypeBadgeText(type: string): string {
-		switch (type) {
-			case 'article':
-				return 'Journal Article';
-			case 'bulletin-article':
-				return 'Bulletin Article';
-			case 'book':
-				return 'Book';
-			case 'chapter':
-				return 'Book Chapter';
-			case 'special-issue':
-				return 'Special Issue';
-			case 'report':
-				return 'Report';
-			case 'encyclopedia':
-				return 'Encyclopedia Entry';
-			case 'blogpost':
-				return 'Blog Post';
-			case 'masters-thesis':
-				return "Master's Thesis";
-			case 'phd-dissertation':
-				return 'PhD Dissertation';
-			default:
-				return type;
-		}
-	}
-
 	// Project URL mappings
 	let projectMappings = $derived({
 		'Religious Activism on Campuses in Togo and Benin': `${base}/research/religious-activism-campuses-togo-benin`,
@@ -226,7 +199,7 @@
 			<PageHeader
 				title={publication.title}
 				date={publication.date}
-				typeBadgeText={getTypeBadgeText(publication.type)}
+				typeBadgeText={getPublicationTypeBadge(publication.type)}
 				authors={publication.authors}
 			/>