feat: Comprehensive Indie Flower typography integration and Tab Management improvements

✨ Features:
- Complete Indie Flower handwritten font integration
- Typography demo page at /typography-demo
- Handwritten UI components (WelcomeMessage, CompactWelcome, HandwrittenAccent)
- CSS utilities for handwritten styling
- UnoCSS shortcuts for typography
- Google Fonts integration in root.tsx

🔧 Improvements:
- Tab Management System fixes
- Enhanced handwritten.css with comprehensive utilities
- Font-family configuration in UnoCSS theme
- Cross-component handwritten styling support

📝 Documentation:
- Interactive typography showcase
- Component usage examples
- Responsive handwritten design patterns

This implementation provides a complete handwritten typography system
that can be easily used across the entire application while maintaining
compatibility with the existing design system.

app/components/ui/WelcomeMessage.tsx

@@ -0,0 +1,98 @@
+import { classNames } from '~/utils/classNames';
+
+interface WelcomeMessageProps {
+  className?: string;
+  showDecorativeElements?: boolean;
+}
+
+export function WelcomeMessage({ className, showDecorativeElements = true }: WelcomeMessageProps) {
+  return (
+    <div className={classNames('text-center space-y-6 p-8', className)}>
+      {/* Main Title with Handwritten Font */}
+      <div className="relative">
+        <h1 className="title-handwritten text-accent-500 mb-2 text-4xl md:text-5xl">
+          Welcome to Bolt!
+        </h1>
+        {showDecorativeElements && (
+          <div className="decorative-text text-accent-300 text-sm absolute -top-2 -right-4 opacity-70">
+            ✨ magical
+          </div>
+        )}
+      </div>
+
+      {/* Subtitle */}
+      <p className="subtitle-handwritten text-bolt-elements-textSecondary max-w-2xl mx-auto">
+        Let's create something amazing together!
+      </p>
+
+      {/* Decorative Labels */}
+      {showDecorativeElements && (
+        <div className="flex flex-wrap justify-center gap-4 mt-8">
+          <span className="label-handwritten bg-accent-50 text-accent-700 px-3 py-1 rounded-full transform -rotate-1">
+            AI-powered
+          </span>
+          <span className="label-handwritten bg-green-50 text-green-700 px-3 py-1 rounded-full transform rotate-1">
+            Creative
+          </span>
+          <span className="label-handwritten bg-blue-50 text-blue-700 px-3 py-1 rounded-full transform -rotate-0.5">
+            Intuitive
+          </span>
+        </div>
+      )}
+
+      {/* Handwritten Note */}
+      <div className="mt-8 relative">
+        <div className="decorative-text text-bolt-elements-textTertiary text-base max-w-md mx-auto leading-relaxed">
+          Just start a conversation and I'll help you develop your ideas...
+        </div>
+        {showDecorativeElements && (
+          <div className="absolute -bottom-2 right-1/4 text-accent-400 text-lg transform rotate-12">
+            →
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Smaller variant for compact spaces
+export function CompactWelcome({ className }: { className?: string }) {
+  return (
+    <div className={classNames('text-center space-y-3', className)}>
+      <h2 className="heading-handwritten text-accent-500">
+        Hello! 👋
+      </h2>
+      <p className="text-handwritten text-bolt-elements-textSecondary text-sm">
+        How can I help you today?
+      </p>
+    </div>
+  );
+}
+
+// Decorative accent component
+export function HandwrittenAccent({ 
+  children, 
+  className,
+  color = 'accent' 
+}: { 
+  children: React.ReactNode;
+  className?: string;
+  color?: 'accent' | 'green' | 'blue' | 'purple';
+}) {
+  const colorClasses = {
+    accent: 'text-accent-500',
+    green: 'text-green-500',
+    blue: 'text-blue-500',
+    purple: 'text-purple-500',
+  };
+
+  return (
+    <span className={classNames(
+      'text-handwritten font-normal tracking-wide',
+      colorClasses[color],
+      className
+    )}>
+      {children}
+    </span>
+  );
+}

app/root.tsx

@@ -12,6 +12,7 @@ import { ClientOnly } from 'remix-utils/client-only';
 
 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
 import globalStyles from './styles/index.scss?url';
+import handwrittenStyles from './styles/handwritten.css?url';
 import xtermStyles from '@xterm/xterm/css/xterm.css?url';
 
 import 'virtual:uno.css';
@@ -25,6 +26,7 @@ export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: reactToastifyStyles },
   { rel: 'stylesheet', href: tailwindReset },
   { rel: 'stylesheet', href: globalStyles },
+  { rel: 'stylesheet', href: handwrittenStyles },
   { rel: 'stylesheet', href: xtermStyles },
   {
     rel: 'preconnect',
@@ -37,7 +39,7 @@ export const links: LinksFunction = () => [
   },
   {
     rel: 'stylesheet',
-    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Indie+Flower&display=swap',
   },
 ];
 

app/routes/typography-demo.tsx

@@ -0,0 +1,200 @@
+import type { MetaFunction } from '@remix-run/cloudflare';
+import { Header } from '~/components/header/Header';
+import { WelcomeMessage, CompactWelcome, HandwrittenAccent } from '~/components/ui/WelcomeMessage';
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'Typography Demo - Bolt' },
+    { name: 'description', content: 'Showcase of handwritten typography using Indie Flower font' }
+  ];
+};
+
+export default function TypographyDemo() {
+  return (
+    <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
+      <Header />
+      <div className="flex-1 overflow-auto">
+        <div className="max-w-6xl mx-auto p-8 space-y-12">
+          
+          {/* Page Title */}
+          <div className="text-center">
+            <h1 className="text-4xl font-bold text-bolt-elements-textPrimary mb-2">
+              Typography Showcase
+            </h1>
+            <p className="text-bolt-elements-textSecondary">
+              Demonstrating the <HandwrittenAccent>Indie Flower</HandwrittenAccent> handwritten font integration
+            </p>
+          </div>
+
+          {/* Welcome Message Component */}
+          <section className="bg-bolt-elements-background-depth-2 rounded-lg">
+            <h2 className="text-2xl font-semibold text-bolt-elements-textPrimary p-6 pb-0">
+              Welcome Message Component
+            </h2>
+            <WelcomeMessage />
+          </section>
+
+          {/* Compact Welcome */}
+          <section className="bg-bolt-elements-background-depth-2 rounded-lg p-6">
+            <h2 className="text-2xl font-semibold text-bolt-elements-textPrimary mb-4">
+              Compact Welcome Variant
+            </h2>
+            <CompactWelcome />
+          </section>
+
+          {/* Typography Utilities */}
+          <section className="bg-bolt-elements-background-depth-2 rounded-lg p-6">
+            <h2 className="text-2xl font-semibold text-bolt-elements-textPrimary mb-6">
+              Typography Utilities
+            </h2>
+            <div className="space-y-6">
+              
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Handwritten Headings</h3>
+                <div className="space-y-2">
+                  <h1 className="title-handwritten text-accent-500">Large Title (title-handwritten)</h1>
+                  <h2 className="heading-handwritten text-accent-500">Medium Heading (heading-handwritten)</h2>
+                  <h3 className="subtitle-handwritten text-accent-500">Subtitle (subtitle-handwritten)</h3>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Handwritten Text</h3>
+                <p className="text-handwritten text-bolt-elements-textSecondary">
+                  This is regular handwritten text using the text-handwritten utility class.
+                </p>
+                <p className="label-handwritten text-bolt-elements-textTertiary">
+                  This is smaller label text (label-handwritten).
+                </p>
+              </div>
+
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Decorative Text</h3>
+                <div className="space-y-3">
+                  <p className="decorative-text text-accent-500">
+                    Decorative text with slight rotation
+                  </p>
+                  <div className="flex gap-3">
+                    <span className="label-handwritten bg-accent-50 text-accent-700 px-3 py-1 rounded-full transform -rotate-1">
+                      Rotated left
+                    </span>
+                    <span className="label-handwritten bg-green-50 text-green-700 px-3 py-1 rounded-full transform rotate-1">
+                      Rotated right
+                    </span>
+                    <span className="label-handwritten bg-blue-50 text-blue-700 px-3 py-1 rounded-full">
+                      No rotation
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Colored Accents</h3>
+                <div className="space-y-2">
+                  <p>
+                    This is regular text with <HandwrittenAccent color="accent">accent colored</HandwrittenAccent> handwritten words.
+                  </p>
+                  <p>
+                    You can also use <HandwrittenAccent color="green">green</HandwrittenAccent>, 
+                    <HandwrittenAccent color="blue"> blue</HandwrittenAccent>, or 
+                    <HandwrittenAccent color="purple"> purple</HandwrittenAccent> colors.
+                  </p>
+                </div>
+              </div>
+
+            </div>
+          </section>
+
+          {/* Usage Examples */}
+          <section className="bg-bolt-elements-background-depth-2 rounded-lg p-6">
+            <h2 className="text-2xl font-semibold text-bolt-elements-textPrimary mb-6">
+              Creative Usage Examples
+            </h2>
+            
+            <div className="grid md:grid-cols-2 gap-6">
+              
+              {/* Example 1: Personal Note */}
+              <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
+                <div className="decorative-text text-yellow-800 text-lg mb-2">
+                  Quick Note ✏️
+                </div>
+                <p className="text-handwritten text-yellow-700 leading-relaxed">
+                  Remember to add error handling to the API endpoints before deployment!
+                </p>
+              </div>
+
+              {/* Example 2: Feature Highlight */}
+              <div className="bg-gradient-to-br from-accent-50 to-purple-50 p-4 rounded-lg relative">
+                <div className="title-handwritten text-accent-600 mb-2">
+                  New Feature! 🎉
+                </div>
+                <p className="text-handwritten text-gray-700">
+                  Real-time collaboration is now available for all projects
+                </p>
+                <div className="absolute -top-1 -right-1 decorative-text text-accent-400 text-xl">
+                  ✨
+                </div>
+              </div>
+
+              {/* Example 3: Quote */}
+              <div className="md:col-span-2 bg-gray-50 p-6 rounded-lg border-l-4 border-gray-300">
+                <blockquote className="decorative-text text-gray-600 text-xl text-center italic">
+                  "Code is poetry written in logic"
+                </blockquote>
+                <div className="text-handwritten text-gray-500 text-right mt-2">
+                  - Anonymous Developer
+                </div>
+              </div>
+
+            </div>
+          </section>
+
+          {/* Implementation Guide */}
+          <section className="bg-bolt-elements-background-depth-2 rounded-lg p-6">
+            <h2 className="text-2xl font-semibold text-bolt-elements-textPrimary mb-6">
+              Implementation Guide
+            </h2>
+            
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Available CSS Classes</h3>
+                <div className="bg-bolt-elements-background-depth-1 p-4 rounded-lg font-mono text-sm">
+                  <div className="grid md:grid-cols-2 gap-2 text-bolt-elements-textSecondary">
+                    <div>.text-handwritten</div>
+                    <div>.text-indie</div>
+                    <div>.heading-handwritten</div>
+                    <div>.title-handwritten</div>
+                    <div>.subtitle-handwritten</div>
+                    <div>.label-handwritten</div>
+                    <div>.decorative-text</div>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Font Stack</h3>
+                <div className="bg-bolt-elements-background-depth-1 p-4 rounded-lg">
+                  <code className="text-bolt-elements-textSecondary">
+                    font-family: "Indie Flower", cursive;
+                  </code>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">Best Practices</h3>
+                <ul className="list-disc list-inside space-y-2 text-bolt-elements-textSecondary">
+                  <li>Use handwritten fonts sparingly for emphasis and personality</li>
+                  <li>Combine with subtle rotations for a more natural handwritten feel</li>
+                  <li>Ensure sufficient contrast for accessibility</li>
+                  <li>Consider using decorative elements like emojis and symbols</li>
+                  <li>Test readability across different screen sizes</li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+        </div>
+      </div>
+    </div>
+  );
+}

app/styles/handwritten.css

@@ -0,0 +1,113 @@
+/* Handwritten Font Enhancements for Indie Flower */
+/* Diese Datei enthält zusätzliche Styles für die Indie Flower Schriftart */
+
+/* Subtile Animations für handschriftliche Elemente */
+@keyframes handwritten-wiggle {
+  0%, 100% { transform: rotate(-0.5deg); }
+  50% { transform: rotate(0.5deg); }
+}
+
+@keyframes handwritten-float {
+  0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
+  50% { transform: translateY(-2px) rotate(0.5deg); }
+}
+
+@keyframes handwritten-bounce {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.05) rotate(1deg); }
+}
+
+/* Hover-Effekte für handschriftliche Elemente */
+.handwritten-hover:hover {
+  animation: handwritten-wiggle 0.5s ease-in-out;
+}
+
+.handwritten-float {
+  animation: handwritten-float 3s ease-in-out infinite;
+}
+
+.handwritten-interactive:hover {
+  animation: handwritten-bounce 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+/* Verbesserte Lesbarkeit für handschriftliche Texte */
+.font-handwritten,
+.font-indie {
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+}
+
+/* Spezielle Stile für verschiedene Schriftgrößen */
+.text-handwritten {
+  line-height: 1.5;
+}
+
+.title-handwritten {
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+}
+
+.heading-handwritten {
+  line-height: 1.3;
+  letter-spacing: 0.015em;
+}
+
+.subtitle-handwritten {
+  line-height: 1.4;
+}
+
+.label-handwritten {
+  line-height: 1.4;
+  letter-spacing: 0.025em;
+}
+
+/* Dekorative Elemente */
+.decorative-text {
+  position: relative;
+}
+
+.decorative-text::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.3;
+  transform: scaleX(0.8) skew(-12deg);
+}
+
+/* Responsive Anpassungen */
+@media (max-width: 640px) {
+  .title-handwritten {
+    font-size: 1.875rem; /* text-3xl statt text-5xl */
+  }
+  
+  .heading-handwritten {
+    font-size: 1.5rem; /* text-xl statt text-2xl */
+  }
+}
+
+/* Dark Mode Anpassungen */
+[data-theme="dark"] .decorative-text::after {
+  opacity: 0.5;
+}
+
+/* Accessibility Verbesserungen */
+@media (prefers-reduced-motion: reduce) {
+  .handwritten-hover:hover,
+  .handwritten-float,
+  .handwritten-interactive:hover {
+    animation: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .font-handwritten,
+  .font-indie {
+    font-family: 'Georgia', serif !important;
+  }
+}

uno.config.ts

@@ -104,6 +104,18 @@ export default defineConfig({
     'transition-theme': 'transition-[background-color,border-color,color] duration-150 bolt-ease-cubic-bezier',
     kdb: 'bg-bolt-elements-code-background text-bolt-elements-code-text py-1 px-1.5 rounded-md',
     'max-w-chat': 'max-w-[var(--chat-max-width)]',
+    // Handwritten typography utilities
+    'font-handwritten': 'font-["Indie_Flower",cursive]',
+    'handwritten-sm': 'font-["Indie_Flower",cursive] text-sm',
+    'handwritten-base': 'font-["Indie_Flower",cursive] text-base',
+    'handwritten-lg': 'font-["Indie_Flower",cursive] text-lg',
+    'handwritten-xl': 'font-["Indie_Flower",cursive] text-xl',
+    'handwritten-2xl': 'font-["Indie_Flower",cursive] text-2xl',
+    'handwritten-3xl': 'font-["Indie_Flower",cursive] text-3xl',
+    'handwritten-accent': 'font-["Indie_Flower",cursive] text-accent-500',
+    'handwritten-header': 'font-["Indie_Flower",cursive] text-2xl font-medium text-bolt-elements-textPrimary',
+    'handwritten-welcome': 'font-["Indie_Flower",cursive] text-3xl font-medium text-accent-600 dark:text-accent-400',
+    'handwritten-note': 'font-["Indie_Flower",cursive] text-base text-bolt-elements-textSecondary italic',
   },
   rules: [
     /**
@@ -113,6 +125,10 @@ export default defineConfig({
     ['b', {}],
   ],
   theme: {
+    fontFamily: {
+      'handwritten': ['Indie Flower', 'cursive'],
+      'sans': ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+    },
     colors: {
       ...COLOR_PRIMITIVES,
       bolt: {