Refactor: extract shared styles, constants, and components

- Extract shared style bases (codeBlock, inlineCode, pageWrapper, cardBase,
  sectionTitle, containerNarrow/Wide) into src/styles.ts (-100 lines net)
- Extract CopyButton into src/components/CopyButton.tsx with timer cleanup
- Add shared URL constants (LATTICE_DASHBOARD_PATH, GITHUB_REPO_URL, etc.)
- Add LATTICE_LAYERS/LATTICE_EDGES constants for layer-color mapping
- Add hoverLiftHandlers() helper to eliminate 5 duplicate mouse handlers
- Replace recursive regex renderInline with single-pass character scanner
- Type route page field as string union for exhaustive switch checking
- Memoize ReaderPage node grouping, stats, and traceability computation
- Memoize BlogPage renderContent call

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: gmoon

src/App.tsx

@@ -3,7 +3,9 @@ import { ReaderPage } from './pages/ReaderPage'
 import { BlogPage } from './pages/BlogPage'
 import { GettingStartedPage } from './pages/GettingStartedPage'
 
-export function parseRoute(path: string): { page: string; slug?: string } {
+type PageRoute = 'home' | 'reader' | 'getting-started' | 'blog' | 'blog-post'
+
+export function parseRoute(path: string): { page: PageRoute; slug?: string } {
   if (path === '/reader' || path === '/reader/') return { page: 'reader' }
   if (path === '/getting-started' || path === '/getting-started/') return { page: 'getting-started' }
   if (path === '/blog' || path === '/blog/') return { page: 'blog' }

src/components/CopyButton.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect, useRef } from 'react'
+import { colors, fonts } from '../tokens'
+
+export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(
+    () => () => {
+      clearTimeout(timerRef.current)
+    },
+    [],
+  )
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => setCopied(false), 2000)
+    })
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      style={{
+        position: 'absolute',
+        top: '0.5rem',
+        right: '0.5rem',
+        background: copied ? colors.accentGreen : 'rgba(255,255,255,0.1)',
+        color: copied ? '#ffffff' : 'rgba(255,255,255,0.7)',
+        border: 'none',
+        borderRadius: '4px',
+        padding: '0.3rem 0.6rem',
+        fontSize: '0.75rem',
+        fontFamily: fonts.system,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+      }}
+    >
+      {copied ? 'Copied!' : 'Copy'}
+    </button>
+  )
+}

src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { colors, fonts } from '../tokens'
+import { GITHUB_REPO_URL } from '../constants'
 
 const styles = {
   footer: {
@@ -21,7 +22,7 @@ export function Footer() {
     <footer style={styles.footer}>
       <p>
         &copy; {new Date().getFullYear()} Forkzero. Built with{' '}
-        <a href="https://github.com/forkzero/lattice" style={styles.link}>
+        <a href={GITHUB_REPO_URL} style={styles.link}>
           Lattice
         </a>
         .

src/components/Header.tsx

@@ -1,4 +1,5 @@
 import { colors, fonts } from '../tokens'
+import { GITHUB_ORG_URL, GITHUB_REPO_URL } from '../constants'
 
 const styles = {
   header: {
@@ -66,7 +67,7 @@ export function Header({ minimal }: { minimal?: boolean }) {
           <a href="/blog" style={styles.navLink}>
             Blog
           </a>
-          <a href="https://github.com/forkzero" target="_blank" rel="noopener noreferrer" style={styles.navLinkGh}>
+          <a href={GITHUB_ORG_URL} target="_blank" rel="noopener noreferrer" style={styles.navLinkGh}>
             GitHub
           </a>
         </nav>
@@ -85,7 +86,7 @@ export function PoweredByHeader() {
       <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: '0.8rem', fontFamily: fonts.system }}>
         Powered by{' '}
         <a
-          href="https://github.com/forkzero/lattice"
+          href={GITHUB_REPO_URL}
           target="_blank"
           rel="noopener noreferrer"
           style={{ color: colors.textPrimary, textDecoration: 'none' }}

src/components/Hero.tsx

@@ -1,5 +1,5 @@
 import { colors, fonts, gradient } from '../tokens'
-import { INSTALL_CMD } from '../constants'
+import { INSTALL_CMD, LATTICE_DASHBOARD_PATH } from '../constants'
 
 const keyframesStyle = `
 @keyframes lattice-fade-slide-up {
@@ -238,7 +238,7 @@ export function Hero() {
           <a href="/getting-started" style={styles.ctaPrimary}>
             Get Started
           </a>
-          <a href="/reader?url=https://forkzero.github.io/lattice/lattice-data.json" style={styles.ctaSecondary}>
+          <a href={LATTICE_DASHBOARD_PATH} style={styles.ctaSecondary}>
             See it live
           </a>
         </div>

src/components/LatticeFlowDiagram.tsx

@@ -1,4 +1,5 @@
 import { colors, radius, fonts } from '../tokens'
+import { LATTICE_LAYERS, LATTICE_EDGES } from '../styles'
 
 const styles: Record<string, React.CSSProperties> = {
   diagramContainer: {
@@ -58,13 +59,8 @@ const styles: Record<string, React.CSSProperties> = {
   },
 }
 
-const nodes = [
-  { label: 'Sources', color: colors.accentBlue },
-  { label: 'Theses', color: colors.accentPurple },
-  { label: 'Requirements', color: colors.accentYellow },
-  { label: 'Implementations', color: colors.accentGreen },
-]
-const edges = ['supports', 'derives', 'satisfies']
+const nodes = LATTICE_LAYERS.map((layer) => ({ label: layer.label, color: layer.color }))
+const edges = [...LATTICE_EDGES]
 
 export function LatticeFlowDiagram() {
   return (

src/components/ProjectCard.tsx

@@ -1,13 +1,11 @@
-import { colors, fonts, shadows, radius } from '../tokens'
+import { colors, fonts, shadows } from '../tokens'
+import { cardBase, hoverLiftHandlers } from '../styles'
 import type { Project } from '../data/projects'
 
 const styles = {
   card: {
-    background: colors.bgCard,
-    borderRadius: radius,
+    ...cardBase,
     padding: '1.5rem',
-    boxShadow: shadows.md,
-    border: `1px solid ${colors.borderColor}`,
     transition: 'transform 0.2s, box-shadow 0.2s',
     display: 'flex',
     flexDirection: 'column' as const,
@@ -75,17 +73,7 @@ const styles = {
 
 export function ProjectCard({ project }: { project: Project }) {
   return (
-    <div
-      style={styles.card}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.transform = 'translateY(-2px)'
-        e.currentTarget.style.boxShadow = shadows.lg
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.transform = 'translateY(0)'
-        e.currentTarget.style.boxShadow = shadows.md
-      }}
-    >
+    <div style={styles.card} {...hoverLiftHandlers(shadows.md)}>
       <div style={styles.header}>
         <div>
           <h3 style={styles.name}>{project.name}</h3>

src/constants.ts

@@ -2,3 +2,10 @@ export const INSTALL_URL = 'https://forkzero.ai/lattice/install.sh'
 export const INSTALL_CMD = `curl -fsSL ${INSTALL_URL} | sh`
 export const INSTALL_URL_WINDOWS = 'https://forkzero.ai/lattice/install.ps1'
 export const INSTALL_CMD_WINDOWS = `irm ${INSTALL_URL_WINDOWS} | iex`
+
+export const LATTICE_DATA_URL = 'https://forkzero.github.io/lattice/lattice-data.json'
+export const LATTICE_DASHBOARD_PATH = '/reader?url=' + LATTICE_DATA_URL
+export const LATTICE_DASHBOARD_URL = 'https://forkzero.ai' + LATTICE_DASHBOARD_PATH
+
+export const GITHUB_ORG_URL = 'https://github.com/forkzero'
+export const GITHUB_REPO_URL = 'https://github.com/forkzero/lattice'

src/data/blog-posts.ts

@@ -1,3 +1,5 @@
+import { INSTALL_CMD, LATTICE_DASHBOARD_URL, GITHUB_REPO_URL } from '../constants'
+
 export interface BlogAuthor {
   name: string
   bio: string
@@ -154,14 +156,14 @@ Think of it as the coordination layer underneath. RAG selects *from* knowledge;
 
 \`\`\`bash
 # Install
-curl -fsSL https://forkzero.ai/lattice/install.sh | sh
+${INSTALL_CMD}
 
 # Initialize a lattice in your project
 lattice init
 \`\`\`
 
-- [Lattice on GitHub](https://github.com/forkzero/lattice)
-- [Live dashboard](https://forkzero.ai/reader?url=https://forkzero.github.io/lattice/lattice-data.json)
+- [Lattice on GitHub](${GITHUB_REPO_URL})
+- [Live dashboard](${LATTICE_DASHBOARD_URL})
 - [Forkzero](https://forkzero.ai)`,
   },
 ]

src/data/projects.ts

@@ -1,3 +1,5 @@
+import { GITHUB_REPO_URL, LATTICE_DASHBOARD_URL } from '../constants'
+
 export interface Project {
   name: string
   tagline: string
@@ -18,8 +20,8 @@ export const projects: Project[] = [
     status: 'Active',
     statusColor: '#10b981',
     tech: ['Rust', 'MCP', 'YAML'],
-    url: 'https://github.com/forkzero/lattice',
-    readerUrl: 'https://forkzero.ai/reader?url=https://forkzero.github.io/lattice/lattice-data.json',
+    url: GITHUB_REPO_URL,
+    readerUrl: LATTICE_DASHBOARD_URL,
   },
   {
     name: 'Team of Rivals',