neotoma 0.3.0 → 0.3.2

package/docs/ui/prototype_guide.md

@@ -1,300 +0,0 @@
-# Neotoma MVP Interactive Prototype — Guide
-## Overview
-This guide explains the interactive MVP prototype built with static data fixtures for demonstration purposes.
-## Access Points
-### 1. Quick Start
-```bash
-npm run dev:prototype
-```
-### 2. Shell Script
-```bash
-./scripts/prototypes/run-prototype.sh
-```
-### 3. Direct URL
-```
-http://localhost:5174
-```
-## Navigation Map
-```
-┌─────────────────────────────────────────────────────────────┐
-│                    Neotoma MVP Prototype                     │
-│                                                              │
-│  [Records: 15] [Timeline: 26] [Entities: 17]    [About]    │
-└─────────────────────────────────────────────────────────────┘
-                              │
-        ┌─────────────────────┼─────────────────────┐
-        │                     │                     │
-   ┌────▼────┐          ┌─────▼─────┐        ┌─────▼──────┐
-   │ Records │          │ Timeline  │        │  Entities  │
-   │  View   │          │   View    │        │    View    │
-   └─────────┘          └───────────┘        └────────────┘
-        │                     │                     │
-   ┌────▼────┐          ┌─────▼─────┐        ┌─────▼──────┐
-   │ • List  │          │ • Events  │        │ • Stats    │
-   │ • Search│          │ • Filter  │        │ • Counts   │
-   │ • Filter│          │ • Groups  │        │ • Types    │
-   │ • Detail│          │ • Navigate│        │            │
-   └─────────┘          └───────────┘        └────────────┘
-```
-## Views Explained
-### Records View
-**Purpose**: Browse and search all ingested documents
-**Features**:
-- Table view with all records
-- Search bar (full-text across fields)
-- Type filter dropdown
-- Click source → Opens detail panel
-- Shows source metadata, interpretations, observations
-**Sample Sources**:
-- Financial: Invoices, receipts, bank statements
-- Identity: Passport, driver's license
-- Travel: Flights, hotel bookings
-- Medical: Lab results
-- Legal: Leases, service agreements
-- Insurance: Health insurance policy
-- Tax: 1099 forms
-- Education: Diplomas
-- Utilities: Bills
-- Vehicles: Registration
-**Interactions**:
-1. Type in search box → Filters sources
-2. Select type from dropdown → Filters by type
-3. Click source row → Opens detail panel
-4. Click X on detail panel → Closes panel
-### Timeline View
-**Purpose**: See chronological history of all events
-**Features**:
-- Events grouped by year and month
-- Collapsible year sections
-- Event type filtering
-- Color-coded event badges
-- Click event → Navigate to source detail
-- Date and time display
-**Event Types**:
-- InvoiceIssued, PaymentDue
-- ContractSigned, ContractEffective, ContractExpiry
-- DocumentIssued, TaxDocumentIssued
-- TravelBooked, FlightDeparture, FlightArrival
-- HotelCheckIn, HotelCheckOut
-- MedicalAppointment
-- PolicyEffective, PolicyRenewal
-- EducationCompleted
-- RegistrationRenewed
-- Purchase, BankStatement
-- UtilityBillDue
-**Interactions**:
-1. Click year header → Expand/collapse months
-2. Select event type from dropdown → Filter events
-3. Toggle "Newest First" / "Oldest First" → Change sort order
-4. Click event card → Navigate to source detail in Sources view
-### Entities View
-**Purpose**: Show extracted entities and their types
-**Features**:
-- Entity statistics dashboard
-- Counts by entity type
-- Visual breakdown
-- Button to navigate to records
-**Entity Types**:
-- **People** (2): John Smith, Dr. Sarah Johnson
-- **Companies** (8): Acme Corp, TechSupply, banks, airlines, utilities
-- **Locations** (6): Cities, airports, hotels, universities
-- **Products** (1): Tesla vehicle
-**Concept Demonstrated**:
-Entity resolution extracts real-world things from records:
-- Same person across multiple documents → Single entity
-- Company mentioned in invoices, contracts → Single entity
-- Location referenced in travel, address → Single entity
-## Welcome Modal
-**Triggered**:
-- Automatically on first visit
-- Click "About" button in header
-- Stored in localStorage (shows once)
-**Content**:
-- Overview of prototype features
-- Statistics (15 records, 26 events, 17 entities)
-- "What to Try" suggestions
-- Quick navigation buttons
-**Interactions**:
-1. "Explore Records" → Close modal, stay on Records view
-2. "Start with Timeline" → Close modal, switch to Timeline view
-3. Click X or outside → Close modal
-## Data Flow
-### Static Fixtures
-```
-fixtures/
-├── records.ts    → FIXTURE_RECORDS (15 items)
-├── entities.ts   → FIXTURE_ENTITIES (17 items)
-└── events.ts     → FIXTURE_EVENTS (26 items)
-        │
-        ▼
-  PrototypeApp.tsx  (loads fixtures)
-        │
-        ├──→ RecordsTable (displays records)
-        ├──→ TimelineView (displays events)
-        └──→ Entities View (displays entity stats)
-```
-### No Backend Required
-- All data loaded from TypeScript files
-- No API calls
-- No database queries
-- No authentication
-- No file system access
-## Design System
-### Colors (Light Mode)
-- **Primary**: `#0066CC` (Trust blue)
-- **Background**: `#FFFFFF` (White)
-- **Foreground**: `#111827` (Near black)
-- **Border**: `#E5E7EB` (Gray)
-- **Muted**: `#6B7280` (Gray)
-### Colors (Dark Mode)
-- **Primary**: `#3B82F6` (Bright blue)
-- **Background**: `#0F172A` (Dark blue-gray)
-- **Foreground**: `#F1F5F9` (Light gray)
-- **Border**: `#334155` (Dark gray)
-- **Muted**: `#94A3B8` (Mid gray)
-### Typography
-- **Headings**: Inter (system fallback: -apple-system)
-- **Body**: Inter
-- **Code**: Fira Code (monospace fallback)
-### Spacing Scale
-- xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px
-### Components
-- Built with Shadcn UI
-- Radix UI primitives
-- Tailwind CSS styling
-- Consistent with design system spec
-## Demo Scenarios
-### Scenario 1: Financial Records Review
-1. Start on Records view
-2. Click type filter → Select "FinancialRecord"
-3. See 3 financial records (invoice, receipt, bank statement)
-4. Click invoice → View details in side panel
-5. Switch to Timeline view
-6. See InvoiceIssued event on Nov 15, 2024
-7. Click event → Navigate back to invoice source
-### Scenario 2: Travel Planning
-1. Start on Records view
-2. Search "travel" or "flight"
-3. See flight booking and hotel reservation
-4. Switch to Timeline view
-5. Filter by event type → Select "FlightDeparture"
-6. See SF to NYC flight on Dec 15
-7. Expand December 2024 → See full trip itinerary
-### Scenario 3: Entity Exploration
-1. Switch to Entities view
-2. See 17 entities across 4 types
-3. Note 8 companies extracted
-4. Click "View Records"
-5. Browse records → See company names in properties
-6. Understand entity linking concept
-### Scenario 4: Timeline Navigation
-1. Switch to Timeline view
-2. Collapse 2024 → Expand 2023
-3. See historical events (passport issued, contracts signed)
-4. Toggle sort order → Oldest First
-5. See chronological progression from 2010 (MBA graduation)
-6. Click event → View source detail
-## Troubleshooting
-### Prototype won't start
-```bash
-# Check if port 5174 is available
-lsof -i :5174
-# Kill process if needed
-kill -9 <PID>
-# Try again
-npm run dev:prototype
-```
-### Welcome modal won't show
-```javascript
-// Reset localStorage in browser console
-localStorage.removeItem('neotoma-prototype-welcome-seen');
-// Refresh page
-```
-### Fixtures not loading
-```bash
-# Check files exist
-ls -la frontend/src/fixtures/
-# Should see:
-# - index.ts
-# - records.ts
-# - entities.ts
-# - events.ts
-```
-### Styling looks broken
-```bash
-# Rebuild Tailwind
-cd frontend
-npm run build:ui
-# Or restart dev server
-npm run dev:prototype
-```
-## Extending the Prototype
-### Add New Records
-Edit `frontend/src/fixtures/records.ts`:
-```typescript
-{
-  id: 'rec-016',
-  type: 'NewRecordType',
-  summary: 'Description',
-  properties: {
-    field1: 'value1',
-    field2: 'value2',
-  },
-  tags: ['tag1', 'tag2'],
-  created_at: '2024-12-02T10:00:00Z',
-  updated_at: '2024-12-02T10:00:00Z',
-  user_id: 'user-demo',
-  file_urls: ['/fixtures/file.pdf'],
-  _status: 'Ready',
-}
-```
-### Add New Events
-Edit `frontend/src/fixtures/events.ts`:
-```typescript
-{
-  id: 'evt-027',
-  type: 'NewEventType',
-  date: '2024-12-02',
-  time: '10:00',
-  title: 'Event Title',
-  description: 'Event description',
-  record_id: 'rec-016',
-  record_type: 'NewRecordType',
-  entity_ids: ['ent-person-001'],
-  properties: {},
-  created_at: '2024-12-02T10:00:00Z',
-}
-```
-### Add New Entities
-Edit `frontend/src/fixtures/entities.ts`:
-```typescript
-{
-  id: 'ent-company-009',
-  type: 'Company',
-  name: 'New Company Inc',
-  canonical_name: 'new company inc',
-  properties: {
-    industry: 'Technology',
-  },
-  related_records: ['rec-016'],
-  created_at: '2024-12-02T10:00:00Z',
-  updated_at: '2024-12-02T10:00:00Z',
-}
-```
-### Customize Welcome Modal
-Edit `frontend/src/PrototypeApp.tsx`:
-Find the `<Dialog>` component and modify:
-- Title
-- Description
-- Feature highlights
-- Button labels
-- Button actions
-## Feedback and Issues
-For prototype feedback:
-1. UI/UX improvements
-2. Missing features to demonstrate
-3. Additional demo scenarios
-4. Documentation clarity
-**Version**: 1.0.0
-**Status**: ✅ Complete
-**Last Updated**: December 2, 2024

package/docs/ui/shadcn_components.md

@@ -1,189 +0,0 @@
-# shadcn/ui Components Inventory
-This document lists all available shadcn/ui components in the Neotoma application and their usage status.
-## Available Components
-### ✅ Installed and Available
-#### Core UI Components
-1. **Button** (`@/components/ui/button`)
-   - **Status:** ✅ Active
-   - **Usage:** Primary action buttons, secondary actions, ghost buttons, icon buttons
-   - **Variants:** default, destructive, outline, secondary, ghost, link
-   - **Sizes:** default, sm, lg, icon
-   - **Used in:** SourceTable, EntityList, StyleGuide, ChatPanel, all major components
-2. **Input** (`@/components/ui/input`)
-   - **Status:** ✅ Active
-   - **Usage:** Text inputs, search fields, form inputs
-   - **Features:** Focus states, disabled states, error states
-   - **Used in:** SourceTable (search), EntityList (search), StyleGuide, ChatPanel, forms
-3. **Label** (`@/components/ui/label`)
-   - **Status:** ✅ Active
-   - **Usage:** Form labels, input labels
-   - **Used in:** Forms, StyleGuide, settings components
-4. **Card** (`@/components/ui/card`)
-   - **Status:** ✅ Active
-   - **Usage:** Content containers, dashboard widgets, information cards
-   - **Sub-components:** CardHeader, CardTitle, CardDescription, CardContent, CardFooter
-   - **Used in:** StyleGuide, dashboard components, onboarding
-5. **Badge** (`@/components/ui/badge`)
-   - **Status:** ✅ Active
-   - **Usage:** Status indicators, entity type labels, tags
-   - **Variants:** default, secondary, destructive, outline
-   - **Used in:** SourceTable, EntityList (entity type badges), StyleGuide, entity displays
-6. **Table** (`@/components/ui/table`)
-   - **Status:** ✅ Active
-   - **Usage:** High-density data tables, source lists, entity lists, observation lists
-   - **Sub-components:** TableHeader, TableBody, TableRow, TableHead, TableCell, TableFooter, TableCaption
-   - **Used in:** SourceTable, EntityList, ObservationList, StyleGuide
-7. **Separator** (`@/components/ui/separator`)
-   - **Status:** ✅ Active
-   - **Usage:** Visual dividers, section separators
-   - **Used in:** StyleGuide, forms, content sections
-8. **Select** (`@/components/ui/select`)
-   - **Status:** ✅ Active
-   - **Usage:** Dropdown selects, type filters, locale selectors
-   - **Sub-components:** SelectTrigger, SelectValue, SelectContent, SelectItem, SelectLabel, SelectSeparator
-   - **Used in:** SourceTable (type filter), EntityList (type filter), StyleGuide (locale selector), should be used throughout app instead of native select
-9. **Dropdown Menu** (`@/components/ui/dropdown-menu`)
-   - **Status:** ✅ Active
-   - **Usage:** Context menus, column visibility toggles, row actions
-   - **Sub-components:** DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator
-   - **Used in:** SourceTable (column visibility, row actions), EntityList, StyleGuide
-10. **Dialog** (`@/components/ui/dialog`)
-    - **Status:** ✅ Active
-    - **Usage:** Modal dialogs, confirmations, forms
-    - **Sub-components:** DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
-    - **Used in:** KeyManagementDialog (key import/export/regenerate)
-11. **Sheet** (`@/components/ui/sheet`)
-    - **Status:** ✅ Active
-    - **Usage:** Slide-out panels, sidebars, detail views
-    - **Sub-components:** SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription
-    - **Used in:** Mobile navigation sidebar, detail panels
-12. **Textarea** (`@/components/ui/textarea`)
-    - **Status:** ✅ Active
-    - **Usage:** Multi-line text input, chat message input
-    - **Used in:** ChatPanel (message input with auto-resize)
-13. **Toast** (`@/components/ui/toast`)
-    - **Status:** ✅ Active
-    - **Usage:** Notifications, success/error messages, user feedback
-    - **Sub-components:** Toaster, useToast hook
-    - **Used in:** App.tsx (file upload notifications), KeyManagementDialog (key operations), SourceDetail (file operations), EntityDetail
-14. **Scroll Area** (`@/components/ui/scroll-area`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Custom scrollable containers with styled scrollbars
-    - **Sub-components:** ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner
-    - **Used in:** Not currently used in application (component available for future use)
-15. **Input Group** (`@/components/ui/input-group`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Input with prefix/suffix elements (icons, buttons)
-    - **Sub-components:** InputGroupRoot, InputGroupPrefix, InputGroupSuffix
-    - **Used in:** Not currently used in application (component available for future use)
-16. **Tabs** (`@/components/ui/tabs`)
-    - **Status:** ✅ Active
-    - **Usage:** Tabbed interfaces for organizing content into sections
-    - **Sub-components:** Tabs, TabsList, TabsTrigger, TabsContent
-    - **Used in:** EntityDetail (Snapshot, Schema, Sources, Interpretations, Timeline, Observations, Relationships tabs), SourceDetail (Source, Interpretations, Observations, Entities tabs)
-17. **Progress** (`@/components/ui/progress`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Progress indicators for loading states, file uploads, processing
-    - **Features:** Animated progress bar with percentage
-    - **Used in:** Not currently used in application (recommended for FileUploadView, ingestion processing states)
-18. **Tooltip** (`@/components/ui/tooltip`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Hover tooltips for helpful hints, icon button explanations
-    - **Sub-components:** Tooltip, TooltipTrigger, TooltipContent, TooltipProvider
-    - **Used in:** Not currently used in application (recommended for form fields, icon buttons, table headers)
-19. **Skeleton** (`@/components/ui/skeleton`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Loading state placeholders for content
-    - **Features:** Animated pulse effect, customizable dimensions
-    - **Used in:** Not currently used in application (recommended for SourceTable, EntityList, detail view loading states)
-20. **Switch** (`@/components/ui/switch`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Toggle switches for boolean preferences, feature flags
-    - **Features:** Accessible keyboard navigation, smooth animations
-    - **Used in:** Not currently used in application (recommended for Settings view theme toggle, integration enable/disable)
-21. **Collapsible** (`@/components/ui/collapsible`)
-    - **Status:** ✅ Installed (not actively used)
-    - **Usage:** Expandable/collapsible sections for advanced options
-    - **Sub-components:** Collapsible, CollapsibleTrigger, CollapsibleContent
-    - **Used in:** Not currently used in application (recommended for SourceDetail advanced sections, EntityDetail provenance, filter panels)
-## Component Usage Guidelines
-### When to Use Select vs DropdownMenu
-**Use Select (`@/components/ui/select`):**
-- Single value selection from a list
-- Form inputs (locale, type filter, etc.)
-- When you need a controlled value with placeholder
-- When the selection is the primary action
-**Use DropdownMenu (`@/components/ui/dropdown-menu`):**
-- Context menus (row actions, column visibility)
-- Multiple selections (checkboxes)
-- Radio button groups
-- Actions that don't require a selected value display
-- When you need more complex menu structures
-### Migration from Native HTML Elements
-**Replace native `<select>` with shadcn Select:**
-```tsx
-// ❌ Don't use
-<select className="...">
-  <option>Value</option>
-</select>
-// ✅ Use instead
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="Select..." />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="value">Value</SelectItem>
-  </SelectContent>
-</Select>
-```
-## Components Not Yet Installed (Potential Additions)
-The following shadcn/ui components are available but not yet installed. Consider adding them if needed:
-1. **Checkbox** - For checkbox inputs (currently using native checkboxes in SourceTable)
-2. **Alert** - For alert messages and banners
-3. **Popover** - For popover content and date picker integration
-4. **Calendar** - For date pickers and date range filters
-5. **Accordion** - For collapsible content sections
-6. **Slider** - For range inputs
-7. **Radio Group** - For radio button groups
-8. **Avatar** - For user avatars
-9. **Command** - For command palette
-10. **Context Menu** - For right-click context menus
-11. **Hover Card** - For hover cards
-12. **Menubar** - For menu bars
-13. **Navigation Menu** - For navigation menus
-14. **Pagination** - For pagination controls
-15. **Resizable** - For resizable panels
-16. **Toggle** - For toggle buttons
-17. **Toggle Group** - For toggle button groups
-## Integration Recommendations
-### High Priority Components (Already Installed - Ready to Use)
-1. **Progress** - Integrate into FileUploadView for upload progress, ingestion processing states
-2. **Skeleton** - Use in SourceTable, EntityList, ObservationList loading states instead of spinners
-3. **Switch** - Use in Settings view for theme toggle, integration enable/disable
-4. **Tooltip** - Add to form fields, icon buttons, table headers for helpful hints
-5. **Collapsible** - Use in SourceDetail and EntityDetail for expandable sections (raw text, provenance, raw fragments)
-
-### High Priority Components (Not Installed - Should Add)
-1. **Checkbox** - Replace native checkboxes in SourceTable and EntityList row selection
-2. **Alert** - Add for error messages, notifications, system status banners
-### Medium Priority Components (Not Installed - Consider Adding)
-1. **Popover** - For additional information on hover/click, date picker integration, contextual help
-2. **Calendar** - For date range filters in SourceTable and EntityList, timeline date selection
-### Low Priority Components (Not Installed - Future Consideration)
-1. **Accordion** - For FAQ sections, collapsible help content
-2. **Slider** - For numeric range inputs (amount filters, zoom controls)
-3. **Radio Group** - For single-select options (view mode, preferences)
-4. **Command** - For command palette (if implementing keyboard-first navigation)
-5. **Avatar** - For user avatars (if implementing user profiles)
-## Design System Alignment
-All shadcn/ui components should:
-- Use Inter font for UI text
-- Use JetBrains Mono for monospace (where applicable)
-- Follow design system color palette
-- Match spacing scale (4px, 8px, 16px, etc.)
-- Support dark mode
-- Meet WCAG AA accessibility standards
-## References
-- [shadcn/ui Documentation](https://ui.shadcn.com/)
-- [Radix UI Primitives](https://www.radix-ui.com/)
-- `docs/ui/design_system.md` - Design system specifications

package/docs/ui/style_guide_updates.md

@@ -1,74 +0,0 @@
-# Style Guide Implementation Updates
-## Font Configuration
-### Added Font Imports
-- **Inter** (UI font): Added Google Fonts import in `frontend/index.html`
-- **JetBrains Mono** (monospace font): Added Google Fonts import in `frontend/index.html`
-### CSS Updates (`frontend/src/index.css`)
-- Set body font-family to Inter with system fallbacks
-- Set default body font-size to 0.9375rem (15px) with 1.6 line-height
-- Added h1-h4 typography styles matching design system specifications
-- Added monospace font-family for code/pre elements
-### Tailwind Config Updates (`tailwind.config.mjs`)
-- Added `fontFamily.sans`: Inter with system fallbacks
-- Added `fontFamily.mono`: JetBrains Mono with fallbacks
-- Added custom font sizes:
-  - `text-body`: 0.9375rem (15px) with 1.6 line-height
-  - `text-body-lg`: 1rem (16px) with 1.6 line-height
-  - `text-small`: 0.8125rem (13px) with 1.5 line-height
-  - `text-mono`: 0.875rem (14px) with 1.5 line-height
-## Component Style Updates
-### Buttons (`frontend/src/components/ui/button.tsx`)
-- Changed from `text-sm` to `text-body` (15px instead of 14px)
-- Added hover lift effect (`hover:-translate-y-px hover:shadow-sm`)
-- Added active state (`active:translate-y-0 active:shadow-none`)
-- Updated transition to `transition-all duration-150 ease-in-out`
-### Inputs (`frontend/src/components/ui/input.tsx`)
-- Changed from `text-sm` to `text-body` (15px instead of 14px)
-- Added focus border color transition
-- Added disabled background color
-- Updated transition to `transition-colors duration-150`
-### Badges (`frontend/src/components/ui/badge.tsx`)
-- Changed from `rounded-full` to `rounded` (4px border-radius)
-- Changed from `text-xs` to `text-small` (13px)
-- Changed from `font-semibold` to `font-medium` (500 weight)
-- Updated padding from `px-2.5 py-0.5` to `px-2 py-1` (4px 8px)
-### Tables (`frontend/src/components/ui/table.tsx`)
-- **TableHead**:
-  - Added `text-small` (13px)
-  - Added `uppercase` text-transform
-  - Added `tracking-wider` (0.05em letter-spacing)
-  - Changed to `font-semibold` (600 weight)
-  - Added `bg-muted/50` background
-  - Changed border to `border-b-2` (2px)
-- **TableCell**:
-  - Changed from `p-4` to `px-4 py-3` (12px 16px padding)
-  - Changed from `text-sm` to `text-body` (15px)
-- **TableRow**:
-  - Added `h-10` (40px height)
-## Style Guide Component Updates
-### Typography Section
-- Updated heading examples to use native h1-h4 elements (no Tailwind size overrides)
-- Added font family information in description
-- Updated monospace example to use `text-mono` class
-- Added font-mono class to metadata labels for consistency
-### Table Example
-- Updated table headers to uppercase (matching design system)
-## Verification Checklist
-- [x] Inter font loaded and applied to body
-- [x] JetBrains Mono font loaded and applied to monospace elements
-- [x] Body text size: 0.9375rem (15px)
-- [x] Button text size: 0.9375rem (15px)
-- [x] Input text size: 0.9375rem (15px)
-- [x] Badge text size: 0.8125rem (13px)
-- [x] Table header text size: 0.8125rem (13px)
-- [x] Table cell text size: 0.9375rem (15px)
-- [x] Badge border-radius: 4px (rounded)
-- [x] Button/Input border-radius: 6px (rounded-md)
-- [x] Card border-radius: 8px (rounded-lg)
-- [x] Table row height: 40px
-- [x] Table header: uppercase, letter-spacing, background
-## Remaining Considerations
-1. **Button hover effects**: Added subtle lift effect matching design system
-2. **Input focus states**: Added border color transition
-3. **Table styling**: Headers now match design system (uppercase, smaller text, background)
-All styles now match the specifications in `docs/ui/design_system.md`.