chore(app): src/* path alias + migrate all relative imports

app/src/analytics/reportWebVitals.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { setAnalyticsAmbientProps } from '../hooks/useAnalytics';
-import { reportWebVitals } from './reportWebVitals';
+import { reportWebVitals } from 'src/analytics/reportWebVitals';
+import { setAnalyticsAmbientProps } from 'src/hooks/useAnalytics';
 
 // Single hoisted mock (vi.mock dedupes by module path — last call wins, so
 // keeping one shared mock avoids cross-test interference).

app/src/analytics/reportWebVitals.ts

@@ -1,4 +1,4 @@
-import { getAnalyticsAmbientProps } from '../hooks/useAnalytics';
+import { getAnalyticsAmbientProps } from 'src/hooks/useAnalytics';
 
 /**
  * Core Web Vitals tracking via web-vitals library.

app/src/components/CodeHighlighter.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from '../test-utils';
+import { render, screen } from 'src/test-utils';
 
 vi.mock('react-syntax-highlighter/dist/esm/prism-light', () => {
   const MockHighlighter = ({
@@ -45,7 +45,7 @@ vi.mock('react-syntax-highlighter/dist/esm/languages/prism/tsx', () => ({
   default: {},
 }));
 
-import CodeHighlighter from './CodeHighlighter';
+import CodeHighlighter from 'src/components/CodeHighlighter';
 
 describe('CodeHighlighter', () => {
   it('renders without crashing', () => {

app/src/components/CodeHighlighter.tsx

@@ -5,7 +5,7 @@ import r from 'react-syntax-highlighter/dist/esm/languages/prism/r';
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 
-import { typography } from '../theme';
+import { typography } from 'src/theme';
 
 SyntaxHighlighter.registerLanguage('python', python);
 SyntaxHighlighter.registerLanguage('r', r);

app/src/components/CodeShowcase.tsx

@@ -1,7 +1,7 @@
 import Box from '@mui/material/Box';
 
-import { typography } from '../theme';
-import { SectionHeader } from './SectionHeader';
+import { SectionHeader } from 'src/components/SectionHeader';
+import { typography } from 'src/theme';
 
 export function CodeShowcase() {
   return (

app/src/components/ErrorBoundary.test.tsx

@@ -2,9 +2,8 @@ import { ReactNode } from 'react';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from '../test-utils';
-// Must import after test-utils to get jest-dom matchers
-import { ErrorBoundary } from './ErrorBoundary';
+import { ErrorBoundary } from 'src/components/ErrorBoundary';
+import { render, screen } from 'src/test-utils';
 
 // Component that throws on render
 function ThrowingComponent({ message }: { message: string }): ReactNode {
@@ -58,7 +57,7 @@ describe('ErrorBoundary', () => {
   });
 
   it('toggles technical details disclosure', async () => {
-    const { userEvent } = await import('../test-utils');
+    const { userEvent } = await import('src/test-utils');
     const user = userEvent.setup();
 
     render(
@@ -82,7 +81,7 @@ describe('ErrorBoundary', () => {
   });
 
   it('copies details to the clipboard', async () => {
-    const { userEvent } = await import('../test-utils');
+    const { userEvent } = await import('src/test-utils');
     const user = userEvent.setup();
 
     const writeText = vi.fn().mockResolvedValue(undefined);
@@ -105,7 +104,7 @@ describe('ErrorBoundary', () => {
   });
 
   it('recovers when Try Again is clicked', async () => {
-    const { userEvent } = await import('../test-utils');
+    const { userEvent } = await import('src/test-utils');
     const user = userEvent.setup();
 
     // Use a flag to control whether the child throws

app/src/components/FeedbackWidget.test.tsx

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { render, screen, userEvent, waitFor } from '../test-utils';
-import { FeedbackWidget } from './FeedbackWidget';
+import { FeedbackWidget } from 'src/components/FeedbackWidget';
+import { render, screen, userEvent, waitFor } from 'src/test-utils';
 
 describe('FeedbackWidget', () => {
   beforeEach(() => {

app/src/components/FeedbackWidget.tsx

@@ -16,10 +16,10 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Tooltip from '@mui/material/Tooltip';
 
-import { API_URL } from '../constants';
-import { useAnalytics } from '../hooks';
-import { useLocalStorage } from '../hooks/useLocalStorage';
-import { RESERVED_TOP_LEVEL } from '../utils/paths';
+import { API_URL } from 'src/constants';
+import { useAnalytics } from 'src/hooks';
+import { useLocalStorage } from 'src/hooks/useLocalStorage';
+import { RESERVED_TOP_LEVEL } from 'src/utils/paths';
 
 const MAX_MESSAGE_LENGTH = 500;
 const SESSION_KEY = 'anyplot_feedback_session';

app/src/components/FilterBar.test.tsx

@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from '../test-utils';
+import { render, screen } from 'src/test-utils';
 
 // Mock the utils module
-vi.mock('../utils', () => ({
+vi.mock('src/utils', () => ({
   getAvailableValues: vi.fn(() => [
     ['scatter', 10],
     ['bar', 5],
@@ -12,7 +12,7 @@ vi.mock('../utils', () => ({
   getSearchResults: vi.fn(() => []),
 }));
 
-import { FilterBar } from './FilterBar';
+import { FilterBar } from 'src/components/FilterBar';
 
 // ResizeObserver polyfill
 class MockResizeObserver {

app/src/components/FilterBar.tsx

@@ -15,17 +15,17 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
-import type { ImageSize } from '../constants';
-import { colors, fontSize, semanticColors, typography } from '../theme';
-import type { ActiveFilters, FilterCategory, FilterCounts } from '../types';
-import { FILTER_CATEGORIES, FILTER_LABELS, FILTER_TOOLTIPS } from '../types';
+import { ToolbarActions } from 'src/components/ToolbarActions';
+import type { ImageSize } from 'src/constants';
+import { colors, fontSize, semanticColors, typography } from 'src/theme';
+import type { ActiveFilters, FilterCategory, FilterCounts } from 'src/types';
+import { FILTER_CATEGORIES, FILTER_LABELS, FILTER_TOOLTIPS } from 'src/types';
 import {
   getAvailableValues,
   getAvailableValuesForGroup,
   getSearchResults,
   type SearchResult,
-} from '../utils';
-import { ToolbarActions } from './ToolbarActions';
+} from 'src/utils';
 
 interface FilterBarProps {
   activeFilters: ActiveFilters;

app/src/components/Footer.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen, userEvent } from '../test-utils';
-import { Footer } from './Footer';
+import { Footer } from 'src/components/Footer';
+import { render, screen, userEvent } from 'src/test-utils';
 
 describe('Footer', () => {
   it('renders footer links', () => {

app/src/components/Footer.tsx

@@ -3,8 +3,8 @@ import { Link as RouterLink } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 
-import { GITHUB_URL } from '../constants';
-import { colors, fontSize, semanticColors, typography } from '../theme';
+import { GITHUB_URL } from 'src/constants';
+import { colors, fontSize, semanticColors, typography } from 'src/theme';
 
 interface FooterProps {
   onTrackEvent?: (name: string, props?: Record<string, string | undefined>) => void;

app/src/components/HeroSection.test.tsx

@@ -1,26 +1,26 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { render, screen, userEvent } from '../test-utils';
+import { render, screen, userEvent } from 'src/test-utils';
 
 const trackEvent = vi.fn();
 
-vi.mock('../hooks', async () => {
-  const actual = await vi.importActual<typeof import('../hooks')>('../hooks');
+vi.mock('src/hooks', async () => {
+  const actual = await vi.importActual<typeof import('src/hooks')>('src/hooks');
   return {
     ...actual,
     useAnalytics: () => ({ trackEvent, trackPageview: vi.fn() }),
   };
 });
 
-vi.mock('./PlotOfTheDayTerminal', () => ({
+vi.mock('src/components/PlotOfTheDayTerminal', () => ({
   PlotOfTheDayTerminal: () => <div data-testid="potd-terminal" />,
 }));
 
-vi.mock('./TypewriterText', () => ({
+vi.mock('src/components/TypewriterText', () => ({
   TypewriterText: () => <div data-testid="typewriter" />,
 }));
 
-import { HeroSection } from './HeroSection';
+import { HeroSection } from 'src/components/HeroSection';
 
 describe('HeroSection', () => {
   beforeEach(() => {

app/src/components/HeroSection.tsx

@@ -2,11 +2,11 @@ import { Link as RouterLink } from 'react-router-dom';
 
 import Box from '@mui/material/Box';
 
-import { useAnalytics } from '../hooks';
-import type { PlotOfTheDayData } from '../hooks/usePlotOfTheDay';
-import { colors, typography } from '../theme';
-import { PlotOfTheDayTerminal } from './PlotOfTheDayTerminal';
-import { TypewriterText } from './TypewriterText';
+import { PlotOfTheDayTerminal } from 'src/components/PlotOfTheDayTerminal';
+import { TypewriterText } from 'src/components/TypewriterText';
+import { useAnalytics } from 'src/hooks';
+import type { PlotOfTheDayData } from 'src/hooks/usePlotOfTheDay';
+import { colors, typography } from 'src/theme';
 
 interface HeroSectionProps {
   potd?: PlotOfTheDayData | null;

app/src/components/ImageCard.test.tsx

@@ -1,12 +1,12 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from '../test-utils';
-import type { PlotImage } from '../types';
-import { ImageCard } from './ImageCard';
+import { ImageCard } from 'src/components/ImageCard';
+import { render, screen } from 'src/test-utils';
+import type { PlotImage } from 'src/types';
 
 // Mock useCodeFetch to avoid actual API calls; mirrors the real hook contract
 // (fetchCode, getCode, isLoading) so contract drift breaks this test.
-vi.mock('../hooks/useCodeFetch', () => ({
+vi.mock('src/hooks/useCodeFetch', () => ({
   useCodeFetch: () => ({
     fetchCode: vi.fn().mockResolvedValue('print("hello")'),
     getCode: vi.fn().mockReturnValue(null),
@@ -59,7 +59,7 @@ describe('ImageCard', () => {
   });
 
   it('calls onClick when card is clicked', async () => {
-    const { userEvent } = await import('../test-utils');
+    const { userEvent } = await import('src/test-utils');
     const user = userEvent.setup();
     const onClick = vi.fn();
 
@@ -77,7 +77,7 @@ describe('ImageCard', () => {
   });
 
   it('toggles spec tooltip on spec_id click', async () => {
-    const { userEvent } = await import('../test-utils');
+    const { userEvent } = await import('src/test-utils');
     const user = userEvent.setup();
     const onTooltipToggle = vi.fn();
 
@@ -111,7 +111,7 @@ describe('ImageCard', () => {
     });
 
     it('toggles the language tooltip on click', async () => {
-      const { userEvent } = await import('../test-utils');
+      const { userEvent } = await import('src/test-utils');
       const user = userEvent.setup();
       const onTooltipToggle = vi.fn();
       render(<ImageCard {...defaultProps} onTooltipToggle={onTooltipToggle} />);

app/src/components/ImageCard.tsx

@@ -13,12 +13,12 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
-import { BATCH_SIZE, type ImageSize, LANG_DISPLAY, libExt } from '../constants';
-import { useCodeFetch } from '../hooks';
-import { colors, fontSize, semanticColors, typography } from '../theme';
-import type { PlotImage } from '../types';
-import { buildSrcSet, getFallbackSrc, getResponsiveSizes } from '../utils/responsiveImage';
-import { useThemedPreviewUrl } from '../utils/themedPreview';
+import { BATCH_SIZE, type ImageSize, LANG_DISPLAY, libExt } from 'src/constants';
+import { useCodeFetch } from 'src/hooks';
+import { colors, fontSize, semanticColors, typography } from 'src/theme';
+import type { PlotImage } from 'src/types';
+import { buildSrcSet, getFallbackSrc, getResponsiveSizes } from 'src/utils/responsiveImage';
+import { useThemedPreviewUrl } from 'src/utils/themedPreview';
 
 // Library abbreviations for compact mode
 const LIBRARY_ABBR: Record<string, string> = {

app/src/components/ImagesGrid.test.tsx

@@ -2,19 +2,19 @@ import { createRef } from 'react';
 
 import { describe, expect, it, type Mock, vi } from 'vitest';
 
-import type { ImageSize } from '../constants';
-import { render, screen } from '../test-utils';
-import type { LibraryInfo, PlotImage, SpecInfo } from '../types';
-import { ImagesGrid } from './ImagesGrid';
+import { ImagesGrid } from 'src/components/ImagesGrid';
+import type { ImageSize } from 'src/constants';
+import { render, screen } from 'src/test-utils';
+import type { LibraryInfo, PlotImage, SpecInfo } from 'src/types';
 
 // Mock child components to isolate ImagesGrid
-vi.mock('./ImageCard', () => ({
+vi.mock('src/components/ImageCard', () => ({
   ImageCard: ({ image, index }: { image: PlotImage; index: number }) => (
     <div data-testid={`image-card-${index}`}>{image.library}</div>
   ),
 }));
 
-vi.mock('./LoaderSpinner', () => ({
+vi.mock('src/components/LoaderSpinner', () => ({
   LoaderSpinner: ({ size }: { size: string }) => <div data-testid="loader-spinner">{size}</div>,
 }));
 

app/src/components/ImagesGrid.tsx

@@ -4,10 +4,10 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 
-import type { ImageSize } from '../constants';
-import type { LanguageInfo, LibraryInfo, PlotImage, SpecInfo } from '../types';
-import { ImageCard } from './ImageCard';
-import { LoaderSpinner } from './LoaderSpinner';
+import { ImageCard } from 'src/components/ImageCard';
+import { LoaderSpinner } from 'src/components/LoaderSpinner';
+import type { ImageSize } from 'src/constants';
+import type { LanguageInfo, LibraryInfo, PlotImage, SpecInfo } from 'src/types';
 
 interface ImagesGridProps {
   images: PlotImage[];

app/src/components/Layout.test.tsx

@@ -1,8 +1,8 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useAppData } from '../hooks/useLayoutContext';
-import { render, screen, waitFor } from '../test-utils';
-import { AppDataProvider } from './Layout';
+import { AppDataProvider } from 'src/components/Layout';
+import { useAppData } from 'src/hooks/useLayoutContext';
+import { render, screen, waitFor } from 'src/test-utils';
 
 // Helper component that reads the context and renders the four counts
 // the user-reported NumbersStrip is built from. Acts as a black-box

app/src/components/Layout.tsx

@@ -1,15 +1,15 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
-import { API_URL } from '../constants';
+import { API_URL } from 'src/constants';
 import {
   AppDataContext,
   type HomeState,
   HomeStateContext,
   initialHomeState,
   ThemeContext,
-} from '../hooks/useLayoutContext';
-import { useThemeMode } from '../hooks/useThemeMode';
-import type { LanguageInfo, LibraryInfo, SpecInfo } from '../types';
+} from 'src/hooks/useLayoutContext';
+import { useThemeMode } from 'src/hooks/useThemeMode';
+import type { LanguageInfo, LibraryInfo, SpecInfo } from 'src/types';
 
 // Global provider that wraps the entire router
 export function AppDataProvider({ children }: { children: ReactNode }) {

app/src/components/LibrariesSection.tsx

@@ -1,9 +1,9 @@
 import Box from '@mui/material/Box';
 
-import { LIBRARIES } from '../constants';
-import type { LibraryInfo } from '../types';
-import { LibraryCard } from './LibraryCard';
-import { SectionHeader } from './SectionHeader';
+import { LibraryCard } from 'src/components/LibraryCard';
+import { SectionHeader } from 'src/components/SectionHeader';
+import { LIBRARIES } from 'src/constants';
+import type { LibraryInfo } from 'src/types';
 
 interface LibrariesSectionProps {
   libraries: LibraryInfo[];

app/src/components/LibraryCard.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen, userEvent } from '../test-utils';
-import { LibraryCard } from './LibraryCard';
+import { LibraryCard } from 'src/components/LibraryCard';
+import { render, screen, userEvent } from 'src/test-utils';
 
 describe('LibraryCard', () => {
   it('renders the library name', () => {