refactor: adopt shared Input/Textarea components (#101)

* refactor: adopt shared Input/Textarea components across 15 files

Replace 42 raw <input>/<textarea> elements with <Input>/<Textarea>
from components/ui/. Consistent focus states, error handling, and
styling across all form fields.

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

* refactor: replace hardcoded rgba/hex colors with Tailwind tokens

- rgba(255,255,255,0.xx) → bg-white/[0.xx], border-white/[0.xx]
- rgba(6,182,212,0.3) → border-primary/30 (focus states)
- #0a0a0a → bg-background
- Inline style hex colors → var(--color-primary), var(--color-brand-gradient-to)
- 28 files updated, zero hardcoded rgba() patterns remaining

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

* feat: add PageMeta to 16 pages for SEO and proper browser tab titles

Public pages (Login, Register, Forgot/Reset Password, Verify Email,
Survey Thank You) get descriptions for SEO. Authenticated pages
(Dashboard, Flow Library, My Flows, Session History, AI Assistant,
Account Settings, Step Library, My Shares, Feedback, Guides) get
proper tab titles.

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

* feat: add page transitions and staggered list animations

- ViewTransitionOutlet: wraps Outlet with fade-in-up animation keyed
  to route path. Sidebar/topbar stay still, only content area animates.
- StaggerList: reusable component that cascades children with
  incremental delay (50ms default). Pure CSS via @utility stagger-item.
- Applied stagger to TreeGridView, MyTreesPage cards, SessionHistoryPage.
- New stagger-fade-in keyframe in @theme block.

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

* fix: ViewTransitionOutlet needs h-full for React Flow canvas

The wrapper div broke the height chain needed by TreeEditorPage's
h-full layout, causing React Flow canvas to collapse to zero height.

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

* fix: main-content flex layout for tree editor + scrollable pages

Main content area is now flex-col so the ViewTransitionOutlet wrapper
gets an explicit computed height via flex-1 min-h-0. This makes h-full
resolve correctly in the tree editor (React Flow canvas) while still
allowing overflow-y-auto scrolling for normal pages.

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

* fix: resolve ESLint errors in Button and Skeleton components

- Button: suppress react-refresh/only-export-components for buttonVariants re-export
- Skeleton: replace empty interface with type alias, replace Math.random() with static widths array

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

* feat: add PageMeta, animation classes, and layout fixes to remaining pages

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/layout/AppLayout.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react'
-import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
 import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -8,6 +8,7 @@ import { BrandLogo } from '@/components/common/BrandLogo'
 import { TopBar } from './TopBar'
 import { Sidebar } from './Sidebar'
 import { EmailVerificationBanner } from './EmailVerificationBanner'
+import { ViewTransitionOutlet } from './ViewTransitionOutlet'
 import { cn } from '@/lib/utils'
 
 export function AppLayout() {
@@ -183,9 +184,9 @@ export function AppLayout() {
       )}
 
       {/* Main Content */}
-      <main className="main-content">
+      <main className="main-content flex flex-col overflow-hidden">
         <EmailVerificationBanner />
-        <Outlet />
+        <ViewTransitionOutlet />
       </main>
     </div>
     </>

frontend/src/components/layout/ViewTransitionOutlet.tsx

@@ -0,0 +1,26 @@
+import { Outlet, useLocation } from 'react-router-dom'
+
+/**
+ * Wraps <Outlet> with a fade-in animation keyed to the route path.
+ * When the route changes, React unmounts/remounts the wrapper div,
+ * triggering the CSS animation. Sidebar and topbar stay still.
+ *
+ * Uses flex-1 + min-h-0 to fill the main content area exactly.
+ * overflow-y-auto enables scrolling for normal pages while full-height
+ * pages (tree editor, etc.) use their own overflow:hidden to take
+ * the exact container height without scrolling.
+ */
+export function ViewTransitionOutlet() {
+  const location = useLocation()
+
+  // Use the first two path segments as the key to avoid re-animating
+  // on param changes within the same page (e.g., /trees/123 → /trees/456)
+  const segments = location.pathname.split('/').filter(Boolean)
+  const routeKey = segments.slice(0, 2).join('/') || '/'
+
+  return (
+    <div key={routeKey} className="flex-1 min-h-0 animate-fade-in-up">
+      <Outlet />
+    </div>
+  )
+}