diff --git a/app/globals.css b/app/globals.css
index dc98be7..67bb31d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,6 +4,62 @@
@custom-variant dark (&:is(.dark *));
@theme inline {
+ /* Spacing Scale */
+ --spacing-0: 0;
+ --spacing-1: 0.25rem; /* 4px */
+ --spacing-2: 0.5rem; /* 8px */
+ --spacing-3: 0.75rem; /* 12px */
+ --spacing-4: 1rem; /* 16px */
+ --spacing-5: 1.25rem; /* 20px */
+ --spacing-6: 1.5rem; /* 24px */
+ --spacing-8: 2rem; /* 32px */
+ --spacing-10: 2.5rem; /* 40px */
+ --spacing-12: 3rem; /* 48px */
+ --spacing-16: 4rem; /* 64px */
+ --spacing-20: 5rem; /* 80px */
+ --spacing-24: 6rem; /* 96px */
+
+ /* Typography Scale */
+ --font-size-xs: 0.75rem; /* 12px */
+ --font-size-sm: 0.875rem; /* 14px */
+ --font-size-base: 1rem; /* 16px */
+ --font-size-lg: 1.125rem; /* 18px */
+ --font-size-xl: 1.25rem; /* 20px */
+ --font-size-2xl: 1.5rem; /* 24px */
+ --font-size-3xl: 1.875rem; /* 30px */
+ --font-size-4xl: 2.25rem; /* 36px */
+ --font-size-5xl: 3rem; /* 48px */
+ --font-size-6xl: 3.75rem; /* 60px */
+
+ /* Line Heights */
+ --leading-none: 1;
+ --leading-tight: 1.25;
+ --leading-snug: 1.375;
+ --leading-normal: 1.5;
+ --leading-relaxed: 1.625;
+ --leading-loose: 2;
+
+ /* Font Weights */
+ --font-weight-normal: 400;
+ --font-weight-medium: 500;
+ --font-weight-semibold: 600;
+ --font-weight-bold: 700;
+
+ /* Breakpoints */
+ --breakpoint-sm: 640px;
+ --breakpoint-md: 768px;
+ --breakpoint-lg: 1024px;
+ --breakpoint-xl: 1280px;
+ --breakpoint-2xl: 1536px;
+
+ /* Container Max Widths */
+ --container-sm: 640px;
+ --container-md: 768px;
+ --container-lg: 1024px;
+ --container-xl: 1280px;
+ --container-2xl: 1536px;
+
+ /* Colors */
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
@@ -37,10 +93,32 @@
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
+
+ /* Border Radius */
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg:
+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --shadow-xl:
+ 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+ /* Animation Durations */
+ --duration-fast: 150ms;
+ --duration-normal: 300ms;
+ --duration-slow: 500ms;
+
+ /* Z-Index Scale */
+ --z-index-10: 10;
+ --z-index-20: 20;
+ --z-index-30: 30;
+ --z-index-40: 40;
+ --z-index-50: 50;
}
:root {
diff --git a/docs/DESIGN_TOKENS.md b/docs/DESIGN_TOKENS.md
new file mode 100644
index 0000000..46da67a
--- /dev/null
+++ b/docs/DESIGN_TOKENS.md
@@ -0,0 +1,341 @@
+# Design Tokens
+
+GhostPaste uses a comprehensive design token system to ensure consistent styling across all components. These tokens are defined in `app/globals.css` and can be used throughout the application.
+
+## Spacing Scale
+
+Our spacing scale follows a consistent pattern based on rem units (1rem = 16px):
+
+| Token | Value | Pixels | Usage |
+| -------------- | ------- | ------ | -------------------------------------- |
+| `--spacing-0` | 0 | 0px | No spacing |
+| `--spacing-1` | 0.25rem | 4px | Tight spacing between related elements |
+| `--spacing-2` | 0.5rem | 8px | Small padding/margin |
+| `--spacing-3` | 0.75rem | 12px | Medium-small spacing |
+| `--spacing-4` | 1rem | 16px | Default spacing unit |
+| `--spacing-5` | 1.25rem | 20px | Medium spacing |
+| `--spacing-6` | 1.5rem | 24px | Large spacing |
+| `--spacing-8` | 2rem | 32px | Extra large spacing |
+| `--spacing-10` | 2.5rem | 40px | Section spacing |
+| `--spacing-12` | 3rem | 48px | Large section spacing |
+| `--spacing-16` | 4rem | 64px | Major section breaks |
+| `--spacing-20` | 5rem | 80px | Page-level spacing |
+| `--spacing-24` | 6rem | 96px | Maximum spacing |
+
+### Usage Examples
+
+```css
+/* Component padding */
+.component {
+ padding: var(--spacing-4);
+}
+
+/* Card with different spacing */
+.card {
+ padding: var(--spacing-6);
+ margin-bottom: var(--spacing-8);
+}
+
+/* Tight list items */
+.list-item {
+ padding: var(--spacing-2) var(--spacing-3);
+}
+```
+
+## Typography Scale
+
+Our typography system provides a comprehensive set of font sizes:
+
+| Token | Value | Pixels | Usage |
+| ------------------ | -------- | ------ | ---------------------- |
+| `--font-size-xs` | 0.75rem | 12px | Small labels, captions |
+| `--font-size-sm` | 0.875rem | 14px | Secondary text, hints |
+| `--font-size-base` | 1rem | 16px | Body text default |
+| `--font-size-lg` | 1.125rem | 18px | Emphasized body text |
+| `--font-size-xl` | 1.25rem | 20px | Small headings |
+| `--font-size-2xl` | 1.5rem | 24px | Section headings |
+| `--font-size-3xl` | 1.875rem | 30px | Page headings |
+| `--font-size-4xl` | 2.25rem | 36px | Large headings |
+| `--font-size-5xl` | 3rem | 48px | Hero text |
+| `--font-size-6xl` | 3.75rem | 60px | Display text |
+
+### Line Heights
+
+| Token | Value | Usage |
+| ------------------- | ----- | -------------------- |
+| `--leading-none` | 1 | Single line elements |
+| `--leading-tight` | 1.25 | Headings |
+| `--leading-snug` | 1.375 | Subheadings |
+| `--leading-normal` | 1.5 | Body text (default) |
+| `--leading-relaxed` | 1.625 | Readable paragraphs |
+| `--leading-loose` | 2 | Spacious text |
+
+### Font Weights
+
+| Token | Value | Usage |
+| ------------------------ | ----- | ----------------- |
+| `--font-weight-normal` | 400 | Body text |
+| `--font-weight-medium` | 500 | Emphasized text |
+| `--font-weight-semibold` | 600 | Subheadings |
+| `--font-weight-bold` | 700 | Headings, buttons |
+
+### Typography Usage
+
+```css
+/* Heading styles */
+h1 {
+ font-size: var(--font-size-4xl);
+ font-weight: var(--font-weight-bold);
+ line-height: var(--leading-tight);
+}
+
+/* Body text */
+p {
+ font-size: var(--font-size-base);
+ line-height: var(--leading-normal);
+}
+
+/* Small text */
+.caption {
+ font-size: var(--font-size-sm);
+ color: var(--color-muted-foreground);
+}
+```
+
+## Responsive Breakpoints
+
+Our breakpoint system follows standard responsive design patterns:
+
+| Token | Value | Usage |
+| ------------------ | ------ | ------------------------ |
+| `--breakpoint-sm` | 640px | Mobile landscape |
+| `--breakpoint-md` | 768px | Tablet portrait |
+| `--breakpoint-lg` | 1024px | Tablet landscape/desktop |
+| `--breakpoint-xl` | 1280px | Large desktop |
+| `--breakpoint-2xl` | 1536px | Extra large screens |
+
+### Container Max Widths
+
+Matching container widths for consistent layouts:
+
+| Token | Value | Usage |
+| ----------------- | ------ | ------------------------ |
+| `--container-sm` | 640px | Small container |
+| `--container-md` | 768px | Medium container |
+| `--container-lg` | 1024px | Standard container |
+| `--container-xl` | 1280px | Wide container (default) |
+| `--container-2xl` | 1536px | Full width container |
+
+### Responsive Usage
+
+```css
+/* Mobile-first responsive design */
+.container {
+ width: 100%;
+ max-width: var(--container-xl);
+ margin: 0 auto;
+ padding: 0 var(--spacing-4);
+}
+
+@media (min-width: 768px) {
+ .container {
+ padding: 0 var(--spacing-6);
+ }
+}
+
+@media (min-width: 1024px) {
+ .container {
+ padding: 0 var(--spacing-8);
+ }
+}
+```
+
+## Additional Design Tokens
+
+### Border Radius
+
+| Token | Value | Usage |
+| ------------- | -------------------- | --------------- |
+| `--radius-sm` | calc(--radius - 4px) | Small elements |
+| `--radius-md` | calc(--radius - 2px) | Medium elements |
+| `--radius-lg` | --radius | Default radius |
+| `--radius-xl` | calc(--radius + 4px) | Large elements |
+
+### Shadows
+
+| Token | Usage |
+| ------------- | ---------------- |
+| `--shadow-sm` | Subtle elevation |
+| `--shadow-md` | Cards, dropdowns |
+| `--shadow-lg` | Modals, popovers |
+| `--shadow-xl` | High elevation |
+
+### Animation Durations
+
+| Token | Value | Usage |
+| ------------------- | ----- | --------------------- |
+| `--duration-fast` | 150ms | Quick transitions |
+| `--duration-normal` | 300ms | Standard animations |
+| `--duration-slow` | 500ms | Deliberate animations |
+
+### Z-Index Scale
+
+| Token | Value | Usage |
+| -------------- | ----- | ---------------- |
+| `--z-index-10` | 10 | Dropdowns |
+| `--z-index-20` | 20 | Sticky elements |
+| `--z-index-30` | 30 | Fixed headers |
+| `--z-index-40` | 40 | Modals |
+| `--z-index-50` | 50 | Tooltips, toasts |
+
+## Using Design Tokens in Components
+
+### With Tailwind CSS v4
+
+Since we're using Tailwind CSS v4 with CSS variables, you can use these tokens directly in your styles:
+
+```css
+/* In your component CSS */
+.custom-card {
+ padding: var(--spacing-6);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-md);
+}
+
+/* Or with Tailwind utilities */
+.button {
+ @apply px-[var(--spacing-4)] py-[var(--spacing-2)];
+}
+```
+
+### In React Components
+
+```tsx
+// Using inline styles
+Content
;
+
+// Using CSS modules or styled components
+const Card = styled.div`
+ padding: var(--spacing-6);
+ margin-bottom: var(--spacing-4);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-md);
+`;
+```
+
+### With shadcn/ui Components
+
+shadcn/ui components already use many of these tokens. When customizing:
+
+```tsx
+// Customizing a Button with consistent spacing
+
+
+// Using consistent typography
+
+
+
+ Title
+
+
+
+```
+
+## Best Practices
+
+1. **Always use tokens** instead of hard-coded values
+2. **Mobile-first** - Start with mobile styles and add breakpoints
+3. **Consistent spacing** - Use the spacing scale for all padding/margins
+4. **Semantic usage** - Choose tokens based on their purpose, not just their value
+5. **Accessibility** - Ensure sufficient contrast and readable font sizes
+
+## Component Examples
+
+### Container Component
+
+```tsx
+// components/ui/container.tsx
+import { cn } from "@/lib/utils";
+
+interface ContainerProps {
+ children: React.ReactNode;
+ className?: string;
+ size?: "sm" | "md" | "lg" | "xl" | "2xl";
+}
+
+export function Container({
+ children,
+ className,
+ size = "xl",
+}: ContainerProps) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+### Spacing Utility Classes
+
+```css
+/* Utility classes using design tokens */
+.space-y-sm > * + * {
+ margin-top: var(--spacing-2);
+}
+
+.space-y-md > * + * {
+ margin-top: var(--spacing-4);
+}
+
+.space-y-lg > * + * {
+ margin-top: var(--spacing-8);
+}
+```
+
+## Migration Guide
+
+When updating existing components to use design tokens:
+
+1. Replace hard-coded pixel values with token variables
+2. Update media queries to use breakpoint tokens
+3. Replace arbitrary spacing with scale values
+4. Ensure consistent use across similar components
+
+```css
+/* Before */
+.card {
+ padding: 24px;
+ margin-bottom: 32px;
+}
+
+/* After */
+.card {
+ padding: var(--spacing-6);
+ margin-bottom: var(--spacing-8);
+}
+```
+
+## Token Reference Sheet
+
+For quick reference during development:
+
+- **Small spacing**: 4px (--spacing-1), 8px (--spacing-2)
+- **Medium spacing**: 16px (--spacing-4), 24px (--spacing-6)
+- **Large spacing**: 32px (--spacing-8), 48px (--spacing-12)
+- **Body text**: 16px (--font-size-base)
+- **Headings**: 24px (--font-size-2xl) to 48px (--font-size-5xl)
+- **Mobile**: < 640px
+- **Tablet**: 768px - 1024px
+- **Desktop**: > 1024px
diff --git a/docs/PHASE_4_ISSUES.md b/docs/PHASE_4_ISSUES.md
new file mode 100644
index 0000000..37cb158
--- /dev/null
+++ b/docs/PHASE_4_ISSUES.md
@@ -0,0 +1,562 @@
+# Phase 4: UI Components - GitHub Issues Breakdown
+
+## Overview
+
+Phase 4 focuses on building the UI components for GhostPaste. These components should be built using shadcn/ui, be fully accessible, support dark/light themes, and work on all screen sizes.
+
+## Issue Groups
+
+### 1. Layout Components (Foundation)
+
+#### Issue #53: Create Header Component
+
+**Title:** feat: create header component with navigation
+**Labels:** `ui`, `component`, `priority: high`
+**Description:**
+Create the main header component for GhostPaste with navigation and branding.
+
+**Requirements:**
+
+- Logo/brand on the left
+- Navigation items (Create, About, GitHub)
+- Theme toggle button on the right
+- Mobile-responsive hamburger menu
+- Sticky header on scroll
+- Use shadcn/ui navigation components
+
+**Acceptance Criteria:**
+
+- [ ] Header displays logo and navigation
+- [ ] Theme toggle works
+- [ ] Mobile menu functions correctly
+- [ ] Keyboard navigation support
+- [ ] ARIA labels for accessibility
+
+---
+
+#### Issue #70: Create Footer Component
+
+**Title:** feat: create footer component
+**Labels:** `ui`, `component`, `priority: low`
+**Description:**
+Create a simple footer component with links and copyright.
+
+**Requirements:**
+
+- Copyright notice
+- Links to GitHub, Privacy, Terms
+- Social links (optional)
+- Responsive layout
+
+**Acceptance Criteria:**
+
+- [ ] Footer displays all required information
+- [ ] Links are accessible
+- [ ] Responsive on all screen sizes
+
+---
+
+#### Issue #62: Create Container Component
+
+**Title:** feat: create container component for consistent spacing
+**Labels:** `ui`, `component`, `priority: medium`
+**Description:**
+Create a reusable container component for consistent page margins and max-width.
+
+**Requirements:**
+
+- Max-width constraint (1280px)
+- Responsive padding
+- Center alignment
+- Support for different variants (narrow, wide, full)
+
+**Acceptance Criteria:**
+
+- [ ] Container constrains content width
+- [ ] Responsive padding works
+- [ ] Different variants available
+
+---
+
+#### Issue #57: Implement Responsive Design Tokens
+
+**Title:** feat: implement design system tokens
+**Labels:** `ui`, `design-system`, `priority: high`
+**Description:**
+Set up design tokens for consistent spacing, typography, and breakpoints.
+
+**Requirements:**
+
+- Define spacing scale (4, 8, 16, 24, 32, 48, 64)
+- Typography scale (text-xs through text-6xl)
+- Breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)
+- Color tokens for themes
+- Add to Tailwind config
+
+**Acceptance Criteria:**
+
+- [ ] Design tokens documented
+- [ ] Tailwind config updated
+- [ ] Usage examples provided
+
+---
+
+### 2. Editor Components (Core)
+
+#### Issue #54: Create CodeEditor Component
+
+**Title:** feat: create CodeMirror editor wrapper component
+**Labels:** `ui`, `component`, `priority: critical`
+**Description:**
+Create a React wrapper for CodeMirror 6 with all required features.
+
+**Requirements:**
+
+- Support for all installed language modes
+- Theme switching (light/dark)
+- Line numbers toggle
+- Word wrap toggle
+- Syntax highlighting
+- Placeholder text
+- Read-only mode
+- Custom styling to match design system
+- Performance optimization for large files
+
+**Technical Details:**
+
+- Use CodeMirror 6 with React
+- Implement proper cleanup on unmount
+- Handle theme changes dynamically
+- Support controlled and uncontrolled modes
+
+**Acceptance Criteria:**
+
+- [ ] Editor renders and accepts input
+- [ ] Syntax highlighting works
+- [ ] Theme switching works
+- [ ] All language modes supported
+- [ ] Performance acceptable for 500KB files
+- [ ] Proper TypeScript types
+
+---
+
+#### Issue #55: Create FileEditor Component
+
+**Title:** feat: create single file editor component
+**Labels:** `ui`, `component`, `priority: critical`
+**Description:**
+Create the FileEditor component that combines filename input, language selector, and code editor.
+
+**Requirements:**
+
+- Filename input with validation
+- Language dropdown (auto-detect from extension)
+- Remove button (conditional display)
+- Integration with CodeEditor component
+- Error states for invalid filenames
+- Responsive layout
+
+**Acceptance Criteria:**
+
+- [ ] Component renders all sub-components
+- [ ] Filename validation works
+- [ ] Language auto-detection works
+- [ ] Remove button conditional logic works
+- [ ] Error states display correctly
+- [ ] Keyboard navigation between fields
+
+---
+
+#### Issue #56: Create MultiFileEditor Component
+
+**Title:** feat: create multi-file editor container
+**Labels:** `ui`, `component`, `priority: critical`
+**Description:**
+Create the container component that manages multiple FileEditor instances.
+
+**Requirements:**
+
+- State management for file array
+- Add/remove file functionality
+- Filename duplicate prevention
+- Auto-generate filenames (file1.txt, file2.txt)
+- Enforce min 1, max 20 files
+- Calculate total size
+- Auto-scroll to new files
+- Performance optimization
+
+**Acceptance Criteria:**
+
+- [ ] Can add up to 20 files
+- [ ] Can remove files (min 1)
+- [ ] Duplicate names prevented
+- [ ] Auto-scroll works
+- [ ] State updates efficiently
+- [ ] Total size calculated
+
+---
+
+#### Issue #63: Create AddFileButton Component
+
+**Title:** feat: create add file button component
+**Labels:** `ui`, `component`, `priority: medium`
+**Description:**
+Create the button component for adding new files.
+
+**Requirements:**
+
+- Plus icon with text
+- Disabled state at 20 files
+- Loading state while adding
+- Tooltip for disabled state
+- Consistent with design system
+
+**Acceptance Criteria:**
+
+- [ ] Button renders correctly
+- [ ] Disabled at file limit
+- [ ] Tooltip shows reason
+- [ ] Click handler works
+
+---
+
+### 3. Form Components (Gist Options)
+
+#### Issue #64: Create ExpirySelector Component
+
+**Title:** feat: create expiry time selector component
+**Labels:** `ui`, `component`, `priority: medium`
+**Description:**
+Create a component for selecting gist expiration time.
+
+**Requirements:**
+
+- Predefined options (1 hour, 1 day, 1 week, 30 days, Never)
+- Custom time input (optional)
+- Clear visual indication of selection
+- Accessible dropdown/radio group
+- Show human-readable format
+
+**Acceptance Criteria:**
+
+- [ ] All time options available
+- [ ] Selection updates parent state
+- [ ] Accessible with keyboard
+- [ ] Clear visual feedback
+
+---
+
+#### Issue #65: Create PINInput Component
+
+**Title:** feat: create PIN input component
+**Labels:** `ui`, `component`, `priority: medium`
+**Description:**
+Create a secure PIN input component for edit protection.
+
+**Requirements:**
+
+- Masked input by default
+- Show/hide toggle
+- Strength indicator
+- Validation messages
+- Character counter
+- Confirm PIN field
+- Accessible labels
+
+**Acceptance Criteria:**
+
+- [ ] PIN input masks characters
+- [ ] Show/hide toggle works
+- [ ] Validation displays errors
+- [ ] Strength indicator accurate
+- [ ] Confirm field matches
+
+---
+
+#### Issue #60: Create ShareDialog Component
+
+**Title:** feat: create share dialog with copy functionality
+**Labels:** `ui`, `component`, `priority: high`
+**Description:**
+Create a dialog that displays the shareable URL after gist creation.
+
+**Requirements:**
+
+- Modal/dialog overlay
+- Display full URL
+- Copy button with feedback
+- QR code generation (optional)
+- Social share buttons (optional)
+- Close on escape/click outside
+- Success animation
+
+**Acceptance Criteria:**
+
+- [ ] Dialog displays URL
+- [ ] Copy button works
+- [ ] Visual feedback on copy
+- [ ] Keyboard accessible
+- [ ] Mobile-friendly layout
+
+---
+
+### 4. Display Components (Viewing)
+
+#### Issue #61: Create GistViewer Component
+
+**Title:** feat: create gist viewer component
+**Labels:** `ui`, `component`, `priority: high`
+**Description:**
+Create the read-only gist viewer component.
+
+**Requirements:**
+
+- Display multiple files
+- Syntax highlighting
+- File tabs or list
+- Copy button per file
+- Download button
+- Print-friendly view
+- Loading states
+- Error states
+
+**Acceptance Criteria:**
+
+- [ ] Displays all files
+- [ ] Syntax highlighting works
+- [ ] Copy/download functional
+- [ ] Responsive layout
+- [ ] Loading states smooth
+
+---
+
+#### Issue #66: Create FileList Component
+
+**Title:** feat: create file list/tab component
+**Labels:** `ui`, `component`, `priority: medium`
+**Description:**
+Create a component to display and navigate between files in view mode.
+
+**Requirements:**
+
+- List view for many files
+- Tab view for few files
+- File icons by type
+- Active state indication
+- Keyboard navigation
+- Mobile-friendly
+
+**Acceptance Criteria:**
+
+- [ ] Shows all files
+- [ ] Navigation works
+- [ ] Active state clear
+- [ ] Responsive design
+- [ ] Keyboard accessible
+
+---
+
+#### Issue #71: Create VersionHistory Component
+
+**Title:** feat: create version history dropdown
+**Labels:** `ui`, `component`, `priority: low`
+**Description:**
+Create a dropdown to select and view different versions.
+
+**Requirements:**
+
+- Dropdown with version list
+- Show timestamp and number
+- Load version on selection
+- Visual diff indicator (optional)
+- Current version highlighted
+
+**Acceptance Criteria:**
+
+- [ ] Lists all versions
+- [ ] Selection loads version
+- [ ] Current version marked
+- [ ] Timestamps readable
+
+---
+
+#### Issue #67: Create LoadingStates Component
+
+**Title:** feat: create loading state components
+**Labels:** `ui`, `component`, `priority: medium`
+**Description:**
+Create consistent loading states for the application.
+
+**Requirements:**
+
+- Skeleton screens for editor
+- Spinner for actions
+- Progress bar for uploads
+- Shimmer effects
+- Accessible loading announcements
+
+**Acceptance Criteria:**
+
+- [ ] Multiple loading states
+- [ ] Smooth animations
+- [ ] Accessible to screen readers
+- [ ] Consistent design
+
+---
+
+#### Issue #58: Create ErrorBoundary Component
+
+**Title:** feat: create error boundary component
+**Labels:** `ui`, `component`, `priority: high`
+**Description:**
+Create an error boundary to catch and display errors gracefully.
+
+**Requirements:**
+
+- Catch React errors
+- User-friendly error message
+- Retry button
+- Report issue link
+- Dev mode stack trace
+- Log errors properly
+
+**Acceptance Criteria:**
+
+- [ ] Catches errors
+- [ ] Shows friendly message
+- [ ] Retry functionality
+- [ ] Logs errors
+- [ ] Dev mode details
+
+---
+
+### 5. UI Features (Enhancements)
+
+#### Issue #68: Implement Toast Notifications
+
+**Title:** feat: add toast notification system
+**Labels:** `ui`, `feature`, `priority: medium`
+**Description:**
+Implement a toast notification system for user feedback.
+
+**Requirements:**
+
+- Success, error, warning, info variants
+- Auto-dismiss with timer
+- Manual dismiss button
+- Queue multiple toasts
+- Position configuration
+- Animation in/out
+- Use shadcn/ui toast
+
+**Acceptance Criteria:**
+
+- [ ] All variants work
+- [ ] Auto-dismiss works
+- [ ] Queue system works
+- [ ] Accessible announcements
+- [ ] Smooth animations
+
+---
+
+#### Issue #72: Create Keyboard Shortcuts
+
+**Title:** feat: implement keyboard shortcuts
+**Labels:** `ui`, `feature`, `priority: low`
+**Description:**
+Add keyboard shortcuts for common actions.
+
+**Requirements:**
+
+- Cmd/Ctrl+S to save
+- Cmd/Ctrl+Enter to create/update
+- Cmd/Ctrl+K for command palette (future)
+- Escape to close dialogs
+- Tab navigation
+- Help dialog with shortcut list
+
+**Acceptance Criteria:**
+
+- [ ] Shortcuts work correctly
+- [ ] Don't conflict with browser
+- [ ] Help dialog available
+- [ ] Works across platforms
+
+---
+
+#### Issue #59: Implement Copy to Clipboard
+
+**Title:** feat: add copy to clipboard functionality
+**Labels:** `ui`, `feature`, `priority: high`
+**Description:**
+Implement copy functionality throughout the app.
+
+**Requirements:**
+
+- Copy share URL
+- Copy individual files
+- Copy all files
+- Visual feedback on copy
+- Fallback for older browsers
+- Keyboard shortcut support
+
+**Acceptance Criteria:**
+
+- [ ] Copy works everywhere needed
+- [ ] Visual feedback clear
+- [ ] Fallback works
+- [ ] Accessible to keyboard
+
+---
+
+## Implementation Order
+
+1. **Foundation** (Layout components) - Issues #53, #57, #62, #70
+2. **Core Editor** - Issues #54-56, #63
+3. **Display Components** - Issues #58, #61, #66, #67, #71
+4. **Form Components** - Issues #60, #64, #65
+5. **Enhancements** - Issues #59, #68, #72
+
+## Technical Guidelines
+
+### Component Structure
+
+```typescript
+// Example component structure
+interface ComponentProps {
+ // Props
+}
+
+export function Component({ ...props }: ComponentProps) {
+ // Implementation
+}
+```
+
+### Styling
+
+- Use Tailwind CSS classes
+- Follow shadcn/ui patterns
+- Support dark mode with `dark:` prefix
+- Use CSS variables for theming
+
+### Testing
+
+- Unit tests for logic
+- Component tests with React Testing Library
+- Accessibility tests
+- Visual regression tests (optional)
+
+### Documentation
+
+- Props documentation with JSDoc
+- Usage examples in Storybook (optional)
+- README for complex components
+
+## Success Metrics
+
+- All components render without errors
+- 100% keyboard accessible
+- WCAG 2.1 AA compliant
+- Performance: <50ms render time
+- Bundle size: <10KB per component
+- Test coverage: >80%
diff --git a/docs/PHASE_4_ISSUE_TRACKING.md b/docs/PHASE_4_ISSUE_TRACKING.md
new file mode 100644
index 0000000..e34ff6b
--- /dev/null
+++ b/docs/PHASE_4_ISSUE_TRACKING.md
@@ -0,0 +1,124 @@
+# Phase 4: UI Components - Issue Tracking
+
+## Overview
+
+All 19 Phase 4 UI component issues have been successfully created on GitHub. This document tracks the actual issue numbers and their implementation status.
+
+## Issue Mapping
+
+### Layout Components (4 issues)
+
+| GitHub # | Component | Priority | Status | Description |
+| -------- | ------------- | -------- | -------- | -------------------------------------------- |
+| #53 | Header | HIGH | 🟡 Ready | Main header with navigation and theme toggle |
+| #70 | Footer | LOW | 🟡 Ready | Simple footer with links and copyright |
+| #62 | Container | MEDIUM | 🟡 Ready | Reusable container for consistent spacing |
+| #57 | Design Tokens | HIGH | 🟡 Ready | Design system tokens for theming |
+
+### Editor Components (4 issues)
+
+| GitHub # | Component | Priority | Status | Description |
+| -------- | --------------- | -------- | -------- | ----------------------------------- |
+| #54 | CodeEditor | CRITICAL | 🟡 Ready | CodeMirror 6 wrapper component |
+| #55 | FileEditor | CRITICAL | 🟡 Ready | Single file editor with metadata |
+| #56 | MultiFileEditor | CRITICAL | 🟡 Ready | Container for multiple file editors |
+| #63 | AddFileButton | MEDIUM | 🟡 Ready | Button to add new files |
+
+### Form Components (3 issues)
+
+| GitHub # | Component | Priority | Status | Description |
+| -------- | -------------- | -------- | -------- | ------------------------------------ |
+| #64 | ExpirySelector | MEDIUM | 🟡 Ready | Gist expiration time selector |
+| #65 | PINInput | MEDIUM | 🟡 Ready | Secure PIN input for edit protection |
+| #60 | ShareDialog | HIGH | 🟡 Ready | Share URL dialog with copy function |
+
+### Display Components (5 issues)
+
+| GitHub # | Component | Priority | Status | Description |
+| -------- | -------------- | -------- | -------- | ------------------------------------ |
+| #61 | GistViewer | HIGH | 🟡 Ready | Read-only gist viewer |
+| #66 | FileList | MEDIUM | 🟡 Ready | File navigation tabs/list |
+| #71 | VersionHistory | LOW | 🟡 Ready | Version history dropdown |
+| #67 | LoadingStates | MEDIUM | 🟡 Ready | Consistent loading components |
+| #58 | ErrorBoundary | HIGH | 🟡 Ready | Error boundary for graceful failures |
+
+### UI Features (3 issues)
+
+| GitHub # | Component | Priority | Status | Description |
+| -------- | ------------------- | -------- | -------- | --------------------------------- |
+| #68 | Toast Notifications | MEDIUM | 🟡 Ready | Toast notification system |
+| #72 | Keyboard Shortcuts | LOW | 🟡 Ready | Global keyboard shortcuts |
+| #59 | Copy to Clipboard | HIGH | 🟡 Ready | Copy functionality throughout app |
+
+Note: Issue #69 appears to be a duplicate of #59 (both for copy to clipboard functionality).
+
+## Implementation Order
+
+### Week 1: Critical Path (Must Complete First)
+
+1. **#57** - Design Tokens (Foundation for all components)
+2. **#54** - CodeEditor (Core editing functionality)
+3. **#55** - FileEditor (Builds on CodeEditor)
+4. **#56** - MultiFileEditor (Manages FileEditors)
+
+### Week 2: Essential Components
+
+5. **#53** - Header (Navigation)
+6. **#61** - GistViewer (View functionality)
+7. **#60** - ShareDialog (Sharing flow)
+8. **#58** - ErrorBoundary (Error handling)
+9. **#59** - Copy to Clipboard (Core feature)
+
+### Week 3: Supporting Components
+
+10. **#62** - Container (Layout consistency)
+11. **#63** - AddFileButton (File management)
+12. **#64** - ExpirySelector (Gist options)
+13. **#65** - PINInput (Security feature)
+14. **#66** - FileList (Navigation)
+15. **#67** - LoadingStates (UX improvement)
+16. **#68** - Toast Notifications (User feedback)
+
+### Week 4: Polish
+
+17. **#70** - Footer (Complete layout)
+18. **#71** - VersionHistory (Advanced feature)
+19. **#72** - Keyboard Shortcuts (Power users)
+
+## Priority Summary
+
+- **CRITICAL** (3): #54, #55, #56
+- **HIGH** (6): #53, #57, #58, #59, #60, #61
+- **MEDIUM** (8): #62, #63, #64, #65, #66, #67, #68
+- **LOW** (3): #70, #71, #72
+
+## Status Legend
+
+- 🟡 Ready - Issue created and ready for development
+- 🔵 In Progress - Currently being worked on
+- 🟢 Complete - Implemented and merged
+- 🔴 Blocked - Waiting on dependencies
+
+## Notes
+
+1. **Duplicate Issue**: #69 appears to duplicate #59 (copy to clipboard). Consider closing one.
+2. **Dependencies**: Components in Week 1 must be completed before Week 2 can fully proceed.
+3. **Parallel Work**: Multiple developers can work on different component groups simultaneously.
+
+## Quick Commands
+
+```bash
+# View all UI issues
+gh issue list --label "ui" --state open
+
+# View critical issues
+gh issue list --label "ui,priority: critical" --state open
+
+# Update issue status
+gh issue edit [number] --add-label "in progress"
+
+# Create PR linked to issue
+gh pr create --title "feat: implement [component]" --body "Closes #[number]"
+```
+
+Last Updated: 2025-01-06
diff --git a/docs/PHASE_4_SUMMARY.md b/docs/PHASE_4_SUMMARY.md
new file mode 100644
index 0000000..acd90b8
--- /dev/null
+++ b/docs/PHASE_4_SUMMARY.md
@@ -0,0 +1,197 @@
+# Phase 4: UI Components - Implementation Summary
+
+## Overview
+
+Phase 4 consists of 19 GitHub issues to implement all UI components for GhostPaste. The components are grouped into 5 categories and should be implemented in a specific order to manage dependencies.
+
+## Issue Summary
+
+### Priority Distribution
+
+- **Critical** (3): Core editor components that block other features
+- **High** (5): Essential components for basic functionality
+- **Medium** (8): Important but not blocking components
+- **Low** (3): Nice-to-have enhancements
+
+### Time Estimates
+
+- **Total Phase Duration**: 3-4 weeks
+- **Critical Path**: 1-2 weeks (Editor components)
+- **Parallel Work**: Multiple developers can work on different groups
+
+## Implementation Phases
+
+### Week 1: Foundation & Core Editor
+
+**Must complete first** (blocking other work):
+
+1. #57: Design tokens (2-4 hours)
+2. #54: CodeEditor component (8-12 hours)
+3. #55: FileEditor component (4-6 hours)
+4. #56: MultiFileEditor component (6-8 hours)
+
+**Can start in parallel**:
+
+- #53: Header component (4-6 hours)
+- #62: Container component (2-3 hours)
+
+### Week 2: Display & Form Components
+
+**Primary work**:
+
+- #61: GistViewer component (6-8 hours)
+- #60: ShareDialog component (4-6 hours)
+- #64: ExpirySelector component (3-4 hours)
+- #65: PINInput component (4-6 hours)
+
+**Support work**:
+
+- #67: LoadingStates component (4-6 hours)
+- #58: ErrorBoundary component (3-4 hours)
+- #63: AddFileButton component (2-3 hours)
+
+### Week 3: Enhancements & Polish
+
+**UI Features**:
+
+- #68: Toast notifications (4-6 hours)
+- #59: Copy to clipboard (3-4 hours)
+- #66: FileList component (4-6 hours)
+
+**Lower priority**:
+
+- #72: Keyboard shortcuts (4-6 hours)
+- #71: VersionHistory component (3-4 hours)
+- #70: Footer component (2-3 hours)
+
+## Key Dependencies
+
+```mermaid
+graph TD
+ A[#57 Design Tokens] --> B[#54 CodeEditor]
+ B --> C[#55 FileEditor]
+ C --> D[#56 MultiFileEditor]
+ B --> E[#61 GistViewer]
+ A --> F[#53 Header]
+ A --> G[#62 Container]
+ D --> H[#60 ShareDialog]
+```
+
+## Technical Considerations
+
+### 1. Component Library Setup
+
+Before starting, ensure:
+
+- shadcn/ui is properly configured
+- Theme provider is set up
+- Tailwind CSS is configured with custom design tokens
+
+### 2. CodeMirror Integration
+
+The CodeEditor component (#54) is the most complex:
+
+- Requires careful memory management
+- Must handle theme switching
+- Needs performance optimization for large files
+- Should support all installed language modes
+
+### 3. State Management
+
+MultiFileEditor (#56) needs efficient state management:
+
+- Consider using `useReducer` for complex state
+- Implement proper memoization
+- Handle file array updates immutably
+
+### 4. Accessibility Requirements
+
+Every component must:
+
+- Support keyboard navigation
+- Include proper ARIA labels
+- Work with screen readers
+- Meet WCAG 2.1 AA standards
+
+### 5. Testing Strategy
+
+For each component:
+
+- Unit tests for logic
+- Integration tests for user interactions
+- Accessibility tests
+- Visual regression tests (optional)
+
+## Success Criteria
+
+### Phase Completion
+
+- [ ] All 19 issues completed and merged
+- [ ] Components documented with examples
+- [ ] Test coverage >80%
+- [ ] No accessibility violations
+- [ ] Performance benchmarks met
+
+### Quality Gates
+
+1. **Code Review**: Every PR reviewed by at least one person
+2. **Testing**: All tests passing including new tests
+3. **Documentation**: Props and usage documented
+4. **Accessibility**: Tested with keyboard and screen reader
+5. **Performance**: Renders within 50ms
+
+## Resource Allocation
+
+### Recommended Team Structure
+
+- **Lead Developer**: Focus on critical path (editor components)
+- **UI Developer**: Work on form and display components
+- **Junior Developer**: Handle layout components and simple features
+
+### Parallel Work Opportunities
+
+Multiple developers can work simultaneously on:
+
+- Layout components (Header, Footer, Container)
+- Form components (ExpirySelector, PINInput)
+- UI features (Toast, Copy to clipboard)
+
+## Risk Mitigation
+
+### Technical Risks
+
+1. **CodeMirror Complexity**: Allocate extra time, have fallback plan
+2. **Performance Issues**: Profile early, optimize as needed
+3. **State Management**: Design state structure carefully upfront
+
+### Schedule Risks
+
+1. **Dependencies**: Start critical path items first
+2. **Integration Issues**: Plan integration testing time
+3. **Design Changes**: Get design approval before implementation
+
+## Next Steps
+
+1. **Create all GitHub issues** using the templates in PHASE_4_ISSUES.md
+2. **Assign priorities and labels** according to the breakdown
+3. **Set up project board** to track progress
+4. **Begin with critical path** components
+5. **Schedule design review** for completed components
+
+## Useful Commands
+
+```bash
+# Create issues using GitHub CLI
+gh issue create --title "feat: create header component with navigation" \
+ --body "$(cat issue_template.md)" \
+ --label "ui,component,priority: high" \
+ --project "👻 GhostPaste"
+
+# List all Phase 4 issues
+gh issue list --label "ui" --project "👻 GhostPaste"
+
+# Create PR with proper labels
+gh pr create --title "feat: implement CodeEditor component" \
+ --label "ui,component" \
+ --project "👻 GhostPaste"
+```
diff --git a/docs/TODO.md b/docs/TODO.md
index 786ec5f..d16faa9 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -100,35 +100,35 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
### Layout Components
-- [ ] Create Header component with navigation
-- [ ] Create Footer component
-- [ ] Create Container component for consistent spacing
-- [ ] Implement responsive design tokens
+- [ ] Create Header component with navigation - [#53](https://github.com/nullcoder/ghostpaste/issues/53)
+- [ ] Create Footer component - [#70](https://github.com/nullcoder/ghostpaste/issues/70)
+- [ ] Create Container component for consistent spacing - [#62](https://github.com/nullcoder/ghostpaste/issues/62)
+- [ ] Implement responsive design tokens - [#57](https://github.com/nullcoder/ghostpaste/issues/57)
### Form Components
-- [ ] Create FileEditor component (single file with name, language, editor)
-- [ ] Create MultiFileEditor component (manages multiple FileEditor instances)
-- [ ] Create CodeEditor component (CodeMirror wrapper)
-- [ ] Create AddFileButton component
-- [ ] Create ExpirySelector component
-- [ ] Create PINInput component
-- [ ] Create ShareDialog component with copy functionality
+- [ ] Create FileEditor component (single file with name, language, editor) - [#55](https://github.com/nullcoder/ghostpaste/issues/55)
+- [ ] Create MultiFileEditor component (vertical layout, GitHub Gist style) - [#56](https://github.com/nullcoder/ghostpaste/issues/56)
+- [ ] Create CodeEditor component (CodeMirror wrapper) - [#54](https://github.com/nullcoder/ghostpaste/issues/54)
+- [ ] Create AddFileButton component - [#63](https://github.com/nullcoder/ghostpaste/issues/63)
+- [ ] Create ExpirySelector component - [#64](https://github.com/nullcoder/ghostpaste/issues/64)
+- [ ] Create PINInput component - [#65](https://github.com/nullcoder/ghostpaste/issues/65)
+- [ ] Create ShareDialog component with copy functionality - [#60](https://github.com/nullcoder/ghostpaste/issues/60)
### Display Components
-- [ ] Create GistViewer component
-- [ ] Create FileList component
-- [ ] Create VersionHistory dropdown
-- [ ] Create LoadingStates component
-- [ ] Create ErrorBoundary component
+- [ ] Create GistViewer component - [#61](https://github.com/nullcoder/ghostpaste/issues/61)
+- [ ] Create FileList component (vertical display for viewing) - [#66](https://github.com/nullcoder/ghostpaste/issues/66)
+- [ ] Create VersionHistory dropdown - [#71](https://github.com/nullcoder/ghostpaste/issues/71)
+- [ ] Create LoadingStates component - [#67](https://github.com/nullcoder/ghostpaste/issues/67)
+- [ ] Create ErrorBoundary component - [#58](https://github.com/nullcoder/ghostpaste/issues/58)
### UI Features
-- [ ] Implement dark/light theme toggle
-- [ ] Add toast notifications
-- [ ] Create keyboard shortcuts
-- [ ] Add copy-to-clipboard functionality
+- [ ] Implement dark/light theme toggle (included in Header #53)
+- [ ] Add toast notifications - [#68](https://github.com/nullcoder/ghostpaste/issues/68)
+- [ ] Create keyboard shortcuts - [#72](https://github.com/nullcoder/ghostpaste/issues/72)
+- [ ] Add copy-to-clipboard functionality - [#59](https://github.com/nullcoder/ghostpaste/issues/59)
- [ ] Implement responsive design
- [ ] Add file editor auto-scroll on add
- [ ] Implement filename auto-generation
diff --git a/lib/design-tokens.ts b/lib/design-tokens.ts
new file mode 100644
index 0000000..fa8490a
--- /dev/null
+++ b/lib/design-tokens.ts
@@ -0,0 +1,142 @@
+/**
+ * Design tokens for GhostPaste
+ * These match the CSS custom properties defined in globals.css
+ */
+
+export const spacing = {
+ 0: "var(--spacing-0)",
+ 1: "var(--spacing-1)",
+ 2: "var(--spacing-2)",
+ 3: "var(--spacing-3)",
+ 4: "var(--spacing-4)",
+ 5: "var(--spacing-5)",
+ 6: "var(--spacing-6)",
+ 8: "var(--spacing-8)",
+ 10: "var(--spacing-10)",
+ 12: "var(--spacing-12)",
+ 16: "var(--spacing-16)",
+ 20: "var(--spacing-20)",
+ 24: "var(--spacing-24)",
+} as const;
+
+export const fontSize = {
+ xs: "var(--font-size-xs)",
+ sm: "var(--font-size-sm)",
+ base: "var(--font-size-base)",
+ lg: "var(--font-size-lg)",
+ xl: "var(--font-size-xl)",
+ "2xl": "var(--font-size-2xl)",
+ "3xl": "var(--font-size-3xl)",
+ "4xl": "var(--font-size-4xl)",
+ "5xl": "var(--font-size-5xl)",
+ "6xl": "var(--font-size-6xl)",
+} as const;
+
+export const fontWeight = {
+ normal: "var(--font-weight-normal)",
+ medium: "var(--font-weight-medium)",
+ semibold: "var(--font-weight-semibold)",
+ bold: "var(--font-weight-bold)",
+} as const;
+
+export const lineHeight = {
+ none: "var(--leading-none)",
+ tight: "var(--leading-tight)",
+ snug: "var(--leading-snug)",
+ normal: "var(--leading-normal)",
+ relaxed: "var(--leading-relaxed)",
+ loose: "var(--leading-loose)",
+} as const;
+
+export const breakpoints = {
+ sm: "640px",
+ md: "768px",
+ lg: "1024px",
+ xl: "1280px",
+ "2xl": "1536px",
+} as const;
+
+export const containers = {
+ sm: "var(--container-sm)",
+ md: "var(--container-md)",
+ lg: "var(--container-lg)",
+ xl: "var(--container-xl)",
+ "2xl": "var(--container-2xl)",
+} as const;
+
+export const radius = {
+ sm: "var(--radius-sm)",
+ md: "var(--radius-md)",
+ lg: "var(--radius-lg)",
+ xl: "var(--radius-xl)",
+} as const;
+
+export const shadow = {
+ sm: "var(--shadow-sm)",
+ md: "var(--shadow-md)",
+ lg: "var(--shadow-lg)",
+ xl: "var(--shadow-xl)",
+} as const;
+
+export const duration = {
+ fast: "var(--duration-fast)",
+ normal: "var(--duration-normal)",
+ slow: "var(--duration-slow)",
+} as const;
+
+export const zIndex = {
+ 10: "var(--z-index-10)",
+ 20: "var(--z-index-20)",
+ 30: "var(--z-index-30)",
+ 40: "var(--z-index-40)",
+ 50: "var(--z-index-50)",
+} as const;
+
+/**
+ * Media query helper
+ * @example
+ * const styles = css`
+ * padding: ${spacing[4]};
+ *
+ * ${media.md} {
+ * padding: ${spacing[6]};
+ * }
+ * `;
+ */
+export const media = {
+ sm: `@media (min-width: ${breakpoints.sm})`,
+ md: `@media (min-width: ${breakpoints.md})`,
+ lg: `@media (min-width: ${breakpoints.lg})`,
+ xl: `@media (min-width: ${breakpoints.xl})`,
+ "2xl": `@media (min-width: ${breakpoints["2xl"]})`,
+} as const;
+
+/**
+ * Type-safe design token getter
+ * @example
+ * const padding = getToken('spacing', 4); // Returns 'var(--spacing-4)'
+ */
+export function getToken(
+ category: T,
+ value: keyof (typeof tokens)[T]
+): string {
+ return tokens[category][value] as string;
+}
+
+const tokens = {
+ spacing,
+ fontSize,
+ fontWeight,
+ lineHeight,
+ breakpoints,
+ containers,
+ radius,
+ shadow,
+ duration,
+ zIndex,
+} as const;
+
+export type DesignTokens = typeof tokens;
+export type SpacingScale = keyof typeof spacing;
+export type FontSizeScale = keyof typeof fontSize;
+export type BreakpointScale = keyof typeof breakpoints;
diff --git a/scripts/create-phase-4-issues.sh b/scripts/create-phase-4-issues.sh
new file mode 100755
index 0000000..cabbc72
--- /dev/null
+++ b/scripts/create-phase-4-issues.sh
@@ -0,0 +1,541 @@
+#!/bin/bash
+
+# Script to create all Phase 4 GitHub issues for GhostPaste
+# Requires GitHub CLI (gh) to be installed and authenticated
+
+echo "Creating Phase 4: UI Components issues..."
+
+# Function to create an issue
+create_issue() {
+ local title=$1
+ local body=$2
+ local labels=$3
+ local issue_number=$4
+
+ echo "Creating issue #$issue_number: $title"
+
+ gh issue create \
+ --title "$title" \
+ --body "$body" \
+ --label "$labels" \
+ --project "👻 GhostPaste" \
+ --milestone "Phase 4: UI Components"
+}
+
+# Layout Components
+create_issue \
+ "feat: create header component with navigation" \
+ "Create the main header component for GhostPaste with navigation and branding.
+
+## Requirements
+- Logo/brand on the left
+- Navigation items (Create, About, GitHub)
+- Theme toggle button on the right
+- Mobile-responsive hamburger menu
+- Sticky header on scroll
+- Use shadcn/ui navigation components
+
+## Acceptance Criteria
+- [ ] Header displays logo and navigation
+- [ ] Theme toggle works
+- [ ] Mobile menu functions correctly
+- [ ] Keyboard navigation support
+- [ ] ARIA labels for accessibility
+
+## Technical Notes
+- Use Next.js Link for navigation
+- Implement with shadcn/ui NavigationMenu
+- Support both light and dark themes
+- Test on mobile devices" \
+ "ui,component,priority: high" \
+ 42
+
+create_issue \
+ "feat: create footer component" \
+ "Create a simple footer component with links and copyright.
+
+## Requirements
+- Copyright notice
+- Links to GitHub, Privacy, Terms
+- Social links (optional)
+- Responsive layout
+
+## Acceptance Criteria
+- [ ] Footer displays all required information
+- [ ] Links are accessible
+- [ ] Responsive on all screen sizes
+
+## Technical Notes
+- Keep it simple and clean
+- Ensure sufficient contrast in both themes
+- Use semantic HTML" \
+ "ui,component,priority: low" \
+ 43
+
+create_issue \
+ "feat: create container component for consistent spacing" \
+ "Create a reusable container component for consistent page margins and max-width.
+
+## Requirements
+- Max-width constraint (1280px)
+- Responsive padding
+- Center alignment
+- Support for different variants (narrow, wide, full)
+
+## Acceptance Criteria
+- [ ] Container constrains content width
+- [ ] Responsive padding works
+- [ ] Different variants available
+
+## Technical Notes
+- Use Tailwind's container as base
+- Add custom padding scale
+- Support prose variant for content" \
+ "ui,component,priority: medium" \
+ 44
+
+create_issue \
+ "feat: implement design system tokens" \
+ "Set up design tokens for consistent spacing, typography, and breakpoints.
+
+## Requirements
+- Define spacing scale (4, 8, 16, 24, 32, 48, 64)
+- Typography scale (text-xs through text-6xl)
+- Breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)
+- Color tokens for themes
+- Add to Tailwind config
+
+## Acceptance Criteria
+- [ ] Design tokens documented
+- [ ] Tailwind config updated
+- [ ] Usage examples provided
+
+## Technical Notes
+- Extend Tailwind config
+- Document in README
+- Create TypeScript constants" \
+ "ui,design-system,priority: high" \
+ 45
+
+# Editor Components
+create_issue \
+ "feat: create CodeMirror editor wrapper component" \
+ "Create a React wrapper for CodeMirror 6 with all required features.
+
+## Requirements
+- Support for all installed language modes
+- Theme switching (light/dark)
+- Line numbers toggle
+- Word wrap toggle
+- Syntax highlighting
+- Placeholder text
+- Read-only mode
+- Custom styling to match design system
+- Performance optimization for large files
+
+## Technical Details
+- Use CodeMirror 6 with React
+- Implement proper cleanup on unmount
+- Handle theme changes dynamically
+- Support controlled and uncontrolled modes
+
+## Acceptance Criteria
+- [ ] Editor renders and accepts input
+- [ ] Syntax highlighting works
+- [ ] Theme switching works
+- [ ] All language modes supported
+- [ ] Performance acceptable for 500KB files
+- [ ] Proper TypeScript types
+
+## Performance Requirements
+- Initial render <50ms
+- Theme switch <16ms
+- Handle 500KB files smoothly" \
+ "ui,component,priority: critical" \
+ 46
+
+create_issue \
+ "feat: create single file editor component" \
+ "Create the FileEditor component that combines filename input, language selector, and code editor.
+
+## Requirements
+- Filename input with validation
+- Language dropdown (auto-detect from extension)
+- Remove button (conditional display)
+- Integration with CodeEditor component
+- Error states for invalid filenames
+- Responsive layout
+
+## Acceptance Criteria
+- [ ] Component renders all sub-components
+- [ ] Filename validation works
+- [ ] Language auto-detection works
+- [ ] Remove button conditional logic works
+- [ ] Error states display correctly
+- [ ] Keyboard navigation between fields
+
+## Technical Notes
+- Use composition with CodeEditor
+- Implement filename validation
+- Auto-detect language from extension
+- Handle error states gracefully" \
+ "ui,component,priority: critical" \
+ 47
+
+create_issue \
+ "feat: create multi-file editor container" \
+ "Create the container component that manages multiple FileEditor instances.
+
+## Requirements
+- State management for file array
+- Add/remove file functionality
+- Filename duplicate prevention
+- Auto-generate filenames (file1.txt, file2.txt)
+- Enforce min 1, max 20 files
+- Calculate total size
+- Auto-scroll to new files
+- Performance optimization
+
+## Acceptance Criteria
+- [ ] Can add up to 20 files
+- [ ] Can remove files (min 1)
+- [ ] Duplicate names prevented
+- [ ] Auto-scroll works
+- [ ] State updates efficiently
+- [ ] Total size calculated
+
+## Technical Notes
+- Consider useReducer for state
+- Implement proper memoization
+- Handle array updates immutably
+- Profile performance with many files" \
+ "ui,component,priority: critical" \
+ 48
+
+create_issue \
+ "feat: create add file button component" \
+ "Create the button component for adding new files.
+
+## Requirements
+- Plus icon with text
+- Disabled state at 20 files
+- Loading state while adding
+- Tooltip for disabled state
+- Consistent with design system
+
+## Acceptance Criteria
+- [ ] Button renders correctly
+- [ ] Disabled at file limit
+- [ ] Tooltip shows reason
+- [ ] Click handler works
+
+## Technical Notes
+- Use shadcn/ui Button
+- Add proper loading state
+- Implement tooltip component" \
+ "ui,component,priority: medium" \
+ 49
+
+# Form Components
+create_issue \
+ "feat: create expiry time selector component" \
+ "Create a component for selecting gist expiration time.
+
+## Requirements
+- Predefined options (1 hour, 1 day, 1 week, 30 days, Never)
+- Custom time input (optional)
+- Clear visual indication of selection
+- Accessible dropdown/radio group
+- Show human-readable format
+
+## Acceptance Criteria
+- [ ] All time options available
+- [ ] Selection updates parent state
+- [ ] Accessible with keyboard
+- [ ] Clear visual feedback
+
+## Technical Notes
+- Use shadcn/ui Select or RadioGroup
+- Format times clearly
+- Handle timezone considerations" \
+ "ui,component,priority: medium" \
+ 50
+
+create_issue \
+ "feat: create PIN input component" \
+ "Create a secure PIN input component for edit protection.
+
+## Requirements
+- Masked input by default
+- Show/hide toggle
+- Strength indicator
+- Validation messages
+- Character counter
+- Confirm PIN field
+- Accessible labels
+
+## Acceptance Criteria
+- [ ] PIN input masks characters
+- [ ] Show/hide toggle works
+- [ ] Validation displays errors
+- [ ] Strength indicator accurate
+- [ ] Confirm field matches
+
+## Technical Notes
+- Use controlled input
+- Implement strength algorithm
+- Show helpful error messages
+- Consider using OTP input pattern" \
+ "ui,component,priority: medium" \
+ 51
+
+create_issue \
+ "feat: create share dialog with copy functionality" \
+ "Create a dialog that displays the shareable URL after gist creation.
+
+## Requirements
+- Modal/dialog overlay
+- Display full URL
+- Copy button with feedback
+- QR code generation (optional)
+- Social share buttons (optional)
+- Close on escape/click outside
+- Success animation
+
+## Acceptance Criteria
+- [ ] Dialog displays URL
+- [ ] Copy button works
+- [ ] Visual feedback on copy
+- [ ] Keyboard accessible
+- [ ] Mobile-friendly layout
+
+## Technical Notes
+- Use shadcn/ui Dialog
+- Implement copy with fallback
+- Add success animation
+- Test on mobile devices" \
+ "ui,component,priority: high" \
+ 52
+
+# Display Components
+create_issue \
+ "feat: create gist viewer component" \
+ "Create the read-only gist viewer component.
+
+## Requirements
+- Display multiple files
+- Syntax highlighting
+- File tabs or list
+- Copy button per file
+- Download button
+- Print-friendly view
+- Loading states
+- Error states
+
+## Acceptance Criteria
+- [ ] Displays all files
+- [ ] Syntax highlighting works
+- [ ] Copy/download functional
+- [ ] Responsive layout
+- [ ] Loading states smooth
+
+## Technical Notes
+- Reuse CodeEditor in read-only mode
+- Implement file navigation
+- Add print styles
+- Handle loading states" \
+ "ui,component,priority: high" \
+ 53
+
+create_issue \
+ "feat: create file list/tab component" \
+ "Create a component to display and navigate between files in view mode.
+
+## Requirements
+- List view for many files
+- Tab view for few files
+- File icons by type
+- Active state indication
+- Keyboard navigation
+- Mobile-friendly
+
+## Acceptance Criteria
+- [ ] Shows all files
+- [ ] Navigation works
+- [ ] Active state clear
+- [ ] Responsive design
+- [ ] Keyboard accessible
+
+## Technical Notes
+- Auto-switch between tabs/list
+- Use appropriate icons
+- Implement keyboard navigation
+- Test with many files" \
+ "ui,component,priority: medium" \
+ 54
+
+create_issue \
+ "feat: create version history dropdown" \
+ "Create a dropdown to select and view different versions.
+
+## Requirements
+- Dropdown with version list
+- Show timestamp and number
+- Load version on selection
+- Visual diff indicator (optional)
+- Current version highlighted
+
+## Acceptance Criteria
+- [ ] Lists all versions
+- [ ] Selection loads version
+- [ ] Current version marked
+- [ ] Timestamps readable
+
+## Technical Notes
+- Use shadcn/ui Select
+- Format timestamps nicely
+- Handle loading states
+- Consider diff visualization" \
+ "ui,component,priority: low" \
+ 55
+
+create_issue \
+ "feat: create loading state components" \
+ "Create consistent loading states for the application.
+
+## Requirements
+- Skeleton screens for editor
+- Spinner for actions
+- Progress bar for uploads
+- Shimmer effects
+- Accessible loading announcements
+
+## Acceptance Criteria
+- [ ] Multiple loading states
+- [ ] Smooth animations
+- [ ] Accessible to screen readers
+- [ ] Consistent design
+
+## Technical Notes
+- Create reusable components
+- Use CSS animations
+- Add ARIA live regions
+- Test performance" \
+ "ui,component,priority: medium" \
+ 56
+
+create_issue \
+ "feat: create error boundary component" \
+ "Create an error boundary to catch and display errors gracefully.
+
+## Requirements
+- Catch React errors
+- User-friendly error message
+- Retry button
+- Report issue link
+- Dev mode stack trace
+- Log errors properly
+
+## Acceptance Criteria
+- [ ] Catches errors
+- [ ] Shows friendly message
+- [ ] Retry functionality
+- [ ] Logs errors
+- [ ] Dev mode details
+
+## Technical Notes
+- Implement React Error Boundary
+- Add error logging
+- Show stack trace in dev
+- Provide helpful actions" \
+ "ui,component,priority: high" \
+ 57
+
+# UI Features
+create_issue \
+ "feat: add toast notification system" \
+ "Implement a toast notification system for user feedback.
+
+## Requirements
+- Success, error, warning, info variants
+- Auto-dismiss with timer
+- Manual dismiss button
+- Queue multiple toasts
+- Position configuration
+- Animation in/out
+- Use shadcn/ui toast
+
+## Acceptance Criteria
+- [ ] All variants work
+- [ ] Auto-dismiss works
+- [ ] Queue system works
+- [ ] Accessible announcements
+- [ ] Smooth animations
+
+## Technical Notes
+- Use shadcn/ui Toast
+- Implement toast provider
+- Add queue management
+- Test accessibility" \
+ "ui,feature,priority: medium" \
+ 58
+
+create_issue \
+ "feat: implement keyboard shortcuts" \
+ "Add keyboard shortcuts for common actions.
+
+## Requirements
+- Cmd/Ctrl+S to save
+- Cmd/Ctrl+Enter to create/update
+- Cmd/Ctrl+K for command palette (future)
+- Escape to close dialogs
+- Tab navigation
+- Help dialog with shortcut list
+
+## Acceptance Criteria
+- [ ] Shortcuts work correctly
+- [ ] Don't conflict with browser
+- [ ] Help dialog available
+- [ ] Works across platforms
+
+## Technical Notes
+- Use key event handlers
+- Check platform differences
+- Document shortcuts
+- Add help dialog" \
+ "ui,feature,priority: low" \
+ 59
+
+create_issue \
+ "feat: add copy to clipboard functionality" \
+ "Implement copy functionality throughout the app.
+
+## Requirements
+- Copy share URL
+- Copy individual files
+- Copy all files
+- Visual feedback on copy
+- Fallback for older browsers
+- Keyboard shortcut support
+
+## Acceptance Criteria
+- [ ] Copy works everywhere needed
+- [ ] Visual feedback clear
+- [ ] Fallback works
+- [ ] Accessible to keyboard
+
+## Technical Notes
+- Use Clipboard API
+- Implement fallback
+- Add success feedback
+- Test browser support" \
+ "ui,feature,priority: high" \
+ 60
+
+echo "Phase 4 issues created successfully!"
+echo "Total issues: 19"
+echo "Next steps:"
+echo "1. Review issues on GitHub"
+echo "2. Add to project board"
+echo "3. Assign to developers"
+echo "4. Begin implementation with critical path items"
\ No newline at end of file