feat: complete Phase 1 - project foundation with Next.js 16 and Tailwind CSS 4

Initialize modern tech stack following audio-ui patterns: **Framework Setup** - Next.js 16 with App Router and Turbopack (ready in 754ms) - React 19 with TypeScript 5 - Static export configuration for deployment **Styling System** - Tailwind CSS 4 with @tailwindcss/postcss - OKLCH color space for vibrant, perceptually uniform colors - Custom CSS variables for theming (light/dark modes) - Canvas-specific color palette (canvas-bg, canvas-grid, canvas-selection) - Custom animations (fadeIn, slideDown, scaleIn, etc.) - Checkerboard pattern utility for transparency preview - Custom scrollbar styling **State Management** - Zustand installed for layers, canvas, and history state **Canvas Libraries** - pica for high-quality image resizing - file-saver for export functionality - uuid for layer ID generation **Development Experience** - Path aliases (@/* pattern) configured - Strict TypeScript with proper type checking - Auto dark mode detection with localStorage persistence - Responsive layout with overflow handling **Initial UI** - Root layout with theme system - Landing page showing Phase 1 completion status - Clean, modern design with gradient title Ready for Phase 2: Core Canvas Engine implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 21:12:38 +01:00
parent c9df06e11b
commit 37920401b3
8 changed files with 4675 additions and 0 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,40 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Paint UI - Browser Image Editor',
+  description: 'Modern browser-based image editor built with Next.js. Multi-layer canvas, drawing tools, effects, and more.',
+  keywords: ['image editor', 'canvas', 'drawing', 'paint', 'layers', 'effects', 'photoshop alternative'],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const theme = localStorage.getItem('theme');
+                  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  const shouldBeDark = theme === 'dark' || (!theme && prefersDark);
+                  if (shouldBeDark) {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className="min-h-screen antialiased overflow-hidden">
+        {children}
+      </body>
+    </html>
+  );
+}