feat: initialize Next.js 16 project with Tailwind CSS 4 and Docker support

Phase 1 Implementation:
- Set up Next.js 16 with React 19, TypeScript 5, and Turbopack
- Configure Tailwind CSS 4 with OKLCH color system
- Implement dark/light theme support
- Create core UI components: Button, Card, Slider, Progress, Toast
- Add ThemeToggle component for theme switching
- Set up project directory structure for audio editor
- Create storage utilities for settings management
- Add Dockerfile with multi-stage build (Node + nginx)
- Configure nginx for static file serving with caching
- Add docker-compose.yml for easy deployment
- Configure static export mode for production

Tech Stack:
- Next.js 16 with Turbopack
- React 19
- TypeScript 5
- Tailwind CSS 4
- pnpm 9.0.0
- nginx 1.27 (for Docker deployment)

Build verified and working ✓

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

components/ui/Slider.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface SliderProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  showValue?: boolean;
+}
+
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      className,
+      value = 0,
+      onChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      label,
+      showValue = false,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(parseFloat(e.target.value));
+    };
+
+    return (
+      <div className={cn('w-full', className)}>
+        {(label || showValue) && (
+          <div className="flex items-center justify-between mb-2">
+            {label && (
+              <label className="text-sm font-medium text-foreground">
+                {label}
+              </label>
+            )}
+            {showValue && (
+              <span className="text-sm text-muted-foreground">{value}</span>
+            )}
+          </div>
+        )}
+        <input
+          ref={ref}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={handleChange}
+          disabled={disabled}
+          className={cn(
+            'w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer',
+            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4',
+            '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary',
+            '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-colors',
+            '[&::-webkit-slider-thumb]:hover:bg-primary/90',
+            '[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full',
+            '[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer',
+            '[&::-moz-range-thumb]:transition-colors [&::-moz-range-thumb]:hover:bg-primary/90'
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';
+
+export { Slider };