feat(ui): pseudo-function style for 404, footer, empty state, library card

app/src/components/FilterBar.tsx

@@ -746,13 +746,15 @@ export function FilterBar({
                   return [
                     <MenuItem key="no-results" disabled>
                       <Typography
+                        aria-label="No matches"
                         sx={{
-                          fontFamily: typography.fontFamily,
+                          fontFamily: typography.mono,
                           fontSize: fontSize.base,
                           color: semanticColors.mutedText,
+                          '& .subj': { opacity: 0.7 },
                         }}
                       >
-                        no matches
+                        <span className="subj">results</span>.empty()
                       </Typography>
                     </MenuItem>,
                   ];

app/src/components/Footer.test.tsx

@@ -8,8 +8,8 @@ describe('Footer', () => {
 
     expect(screen.getByText('github')).toBeInTheDocument();
     expect(screen.getByText('report')).toBeInTheDocument();
-    expect(screen.getByText('about')).toBeInTheDocument();
-    expect(screen.getByText('legal')).toBeInTheDocument();
+    expect(screen.getByText('.about()')).toBeInTheDocument();
+    expect(screen.getByText('.legal()')).toBeInTheDocument();
   });
 
   it('renders markus neusinger link', () => {
@@ -59,7 +59,7 @@ describe('Footer', () => {
 
     render(<Footer onTrackEvent={onTrackEvent} />);
 
-    await user.click(screen.getByText('about'));
+    await user.click(screen.getByText('.about()'));
     expect(onTrackEvent).toHaveBeenCalledWith('internal_link', expect.objectContaining({ destination: 'about' }));
   });
 
@@ -69,7 +69,7 @@ describe('Footer', () => {
 
     render(<Footer onTrackEvent={onTrackEvent} />);
 
-    await user.click(screen.getByText('legal'));
+    await user.click(screen.getByText('.legal()'));
     expect(onTrackEvent).toHaveBeenCalledWith('internal_link', expect.objectContaining({ destination: 'legal' }));
   });
 
@@ -107,14 +107,14 @@ describe('Footer', () => {
   it('renders about as internal router link to /about', () => {
     render(<Footer />);
 
-    const aboutLink = screen.getByText('about').closest('a');
+    const aboutLink = screen.getByText('.about()').closest('a');
     expect(aboutLink).toHaveAttribute('href', '/about');
   });
 
   it('renders legal as internal router link to /legal', () => {
     render(<Footer />);
 
-    const legalLink = screen.getByText('legal').closest('a');
+    const legalLink = screen.getByText('.legal()').closest('a');
     expect(legalLink).toHaveAttribute('href', '/legal');
   });
 });

app/src/components/Footer.tsx

@@ -91,18 +91,20 @@ export function Footer({ onTrackEvent, selectedSpec, selectedLibrary }: FooterPr
         component={RouterLink}
         to="/about"
         onClick={trackInternal('about')}
+        aria-label="About anyplot"
         sx={linkSx}
       >
-        about
+        .about()
       </Link>
       <span>·</span>
       <Link
         component={RouterLink}
         to="/legal"
         onClick={trackInternal('legal')}
+        aria-label="Legal notice and privacy"
         sx={linkSx}
       >
-        legal
+        .legal()
       </Link>
     </Box>
   );

app/src/components/LibraryCard.tsx

@@ -24,6 +24,7 @@ export function LibraryCard({ name, count, onClick }: LibraryCardProps) {
     <Box
       component="button"
       onClick={onClick}
+      aria-label={`Browse ${name} examples`}
       sx={{
         all: 'unset',
         boxSizing: 'border-box',
@@ -55,6 +56,7 @@ export function LibraryCard({ name, count, onClick }: LibraryCardProps) {
           boxShadow: '0 16px 32px -12px rgba(0,0,0,0.08)',
           borderColor: 'rgba(0, 158, 115, 0.2)',
           '&::before': { transform: 'scaleX(1)' },
+          '& .lib-card-cta': { color: colors.primary },
         },
         '&:focus-visible': {
           outline: `2px solid ${colors.primary}`,
@@ -93,16 +95,17 @@ export function LibraryCard({ name, count, onClick }: LibraryCardProps) {
         {DESCRIPTIONS[name] || ''}
       </Box>
 
-      <Box sx={{
+      <Box className="lib-card-cta" sx={{
         fontFamily: typography.mono,
         fontSize: '11px',
         color: 'var(--ink-muted)',
         mt: 'auto',
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
+        transition: 'color 0.2s',
       }}>
-        <span>browse →</span>
+        <span aria-hidden="true">.explore()</span>
       </Box>
     </Box>
   );

app/src/components/RouteErrorBoundary.test.tsx

@@ -80,8 +80,8 @@ describe('RouteErrorBoundary', () => {
         <RouterProvider router={router} />
       </ThemeProvider>
     );
-    expect(await screen.findByText('404')).toBeInTheDocument();
-    expect(screen.getByText('page not found')).toBeInTheDocument();
+    expect(await screen.findByRole('heading', { level: 1, name: /page not found/i })).toBeInTheDocument();
+    expect(screen.getByText(/404 — no route matched/i)).toBeInTheDocument();
   });
 
   it('auto-reloads once on chunk load errors', async () => {

app/src/pages/MapPage.tsx

@@ -825,13 +825,17 @@ export function MapPage() {
               boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
             }}>
               {searchMatches.length === 0 ? (
-                <Box sx={{
-                  px: 1.25, py: 0.75,
-                  fontSize: fontSize.xs,
-                  color: 'var(--ink-soft)',
-                  fontStyle: 'italic',
-                }}>
-                  no matches
+                <Box
+                  aria-label="No matches"
+                  sx={{
+                    px: 1.25, py: 0.75,
+                    fontSize: fontSize.xs,
+                    color: 'var(--ink-soft)',
+                    fontFamily: typography.mono,
+                    '& .subj': { opacity: 0.7 },
+                  }}
+                >
+                  <span className="subj">results</span>.empty()
                 </Box>
               ) : (
                 searchMatches.map((s, i) => (

app/src/pages/NotFoundPage.test.tsx

@@ -8,19 +8,19 @@ vi.mock('react-helmet-async', () => ({
 }));
 
 describe('NotFoundPage', () => {
-  it('renders 404 heading', () => {
+  it('renders page.miss() heading', () => {
     render(<NotFoundPage />);
-    expect(screen.getByText('404')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: /page not found/i })).toBeInTheDocument();
   });
 
-  it('renders page not found message', () => {
+  it('renders 404 sub-message', () => {
     render(<NotFoundPage />);
-    expect(screen.getByText('page not found')).toBeInTheDocument();
+    expect(screen.getByText(/404 — no route matched/i)).toBeInTheDocument();
   });
 
   it('renders link back to home', () => {
     render(<NotFoundPage />);
-    const link = screen.getByText('back to anyplot.ai');
-    expect(link.closest('a')).toHaveAttribute('href', '/');
+    const link = screen.getByRole('link', { name: /go home/i });
+    expect(link).toHaveAttribute('href', '/');
   });
 });

app/src/pages/NotFoundPage.tsx

@@ -15,19 +15,29 @@ export function NotFoundPage() {
         <Typography
           variant="h4"
           component="h1"
-          sx={{ fontFamily: typography.fontFamily, fontWeight: 600, mb: 2, color: 'var(--ink)' }}
+          aria-label="Page not found"
+          sx={{
+            fontFamily: typography.mono,
+            fontWeight: 600,
+            mb: 2,
+            color: 'var(--ink)',
+            '& .subj': { color: 'var(--ink-muted)' },
+          }}
         >
-          404
+          <span className="subj">page</span>.miss()
         </Typography>
         <Typography sx={{ fontFamily: typography.fontFamily, color: semanticColors.mutedText, mb: 4 }}>
-          page not found
+          404 — no route matched
         </Typography>
         <Box
           component={Link}
           to="/"
-          sx={{ color: colors.primary, fontFamily: typography.fontFamily, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
+          aria-label="Go home"
+          sx={{ color: colors.primary, fontFamily: typography.mono, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
         >
-          back to anyplot.ai
+          <span aria-hidden="true">
+            <Box component="span" sx={{ color: 'var(--ink-muted)' }}>page</Box>.home()
+          </span>
         </Box>
       </Box>
     </>

app/src/pages/SpecPage.test.tsx

@@ -125,9 +125,9 @@ describe('SpecPage', () => {
     render(<SpecPage />);
 
     await waitFor(() => {
-      expect(screen.getByText('404')).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 1, name: /page not found/i })).toBeInTheDocument();
     });
-    expect(screen.getByText('page not found')).toBeInTheDocument();
+    expect(screen.getByText(/404 — no route matched/i)).toBeInTheDocument();
   });
 
   it('handles fetch error', async () => {