feat: user onboarding, QR codes, PWA, and air-gap device support

Phase 1 - First-time user experience:
- Add WelcomeBanner component for first-time visitors with feature overview
- Add QuickExampleCards grid showing 5 example scenarios prominently on landing page
- Update examples catalog with description, useCase, icon, prefillParams, explorerLinkTemplate fields
- Pre-fill non-UTXO parameters (pubkeys, addresses, fee rates, payloads) from selected examples
- Add step-by-step tutorial text with use-case context for each example
- Add use-first-visit hook (localStorage-based, no login required) for new vs returning user detection

Phase 2 - Air-gap QR code integration:
- Add QRCodeDisplay and QRCodeModal components using qrcode library
- Add QRScanner component with html5-qrcode camera scanning support
- Add QR Code export buttons (Base64 and Hex) in PSBT Output Card
- Add QR scan buttons on UTXO and ADDRESS parameter inputs in Parameter Binding Card
- Add SeedSigner signing instructions in PSBT Output how-to accordion

Phase 3 - PWA and user differentiation:
- Add PWA manifest (public/manifest.json) with app metadata and icons
- Enable ThemeProvider in layout with system/light/dark mode support
- Add theme toggle button in header (cycles light/dark/system)
- Add PWAInstallPrompt component with beforeinstallprompt event handling
- Experienced users (3+ successful runs) see streamlined interface without onboarding panels
- Show/hide examples panel toggle for returning users

Phase 4 - Polish and UX refinements:
- Blockchain verification links (Blockstream, Mempool.space) in PSBT Output next steps
- Dynamic explorer link next to workflow txid when valid 64-char txid is entered
- Rounded corners (rounded-xl) on key containers for more elegant visual design
- Sticky header for pipeline navigation context while scrolling

Co-authored-by: Galois Field <GaloisField2718@users.noreply.github.com>

Author: cursoragent

app/layout.tsx

@@ -1,42 +1,62 @@
-import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
-import './globals.css'
+import type { Metadata, Viewport } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import { ThemeProvider } from '@/components/theme-provider';
 
-const _geist = Geist({ subsets: ["latin"] });
-const _geistMono = Geist_Mono({ subsets: ["latin"] });
+const geist = Geist({ subsets: ['latin'], variable: '--font-geist' });
+const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-geist-mono' });
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#09090b' },
+  ],
+  width: 'device-width',
+  initialScale: 1,
+};
 
 export const metadata: Metadata = {
-  title: 'BTSL Schema Playground - Bitcoin Transaction Schema Language',
-  description: 'Web interface for compiling BTSL schemas to PSBTs. Parse, validate, and generate Bitcoin transactions using the Bitcoin Transaction Schema Language.',
+  title: 'BTSL Schema Playground — Bitcoin Transaction Schema Language',
+  description:
+    'Build and sign Bitcoin transactions without raw bytes. BTSL Schema Playground compiles human-readable schemas to PSBTs with full air-gap device support.',
+  manifest: '/manifest.json',
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'default',
+    title: 'BTSL Playground',
+  },
   icons: {
     icon: [
-      {
-        url: '/icon-light-32x32.png',
-        media: '(prefers-color-scheme: light)',
-      },
-      {
-        url: '/icon-dark-32x32.png',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/icon.svg',
-        type: 'image/svg+xml',
-      },
+      { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)' },
+      { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)' },
+      { url: '/icon.svg', type: 'image/svg+xml' },
     ],
     apple: '/apple-icon.png',
   },
-}
+  openGraph: {
+    title: 'BTSL Schema Playground',
+    description: 'Declarative Bitcoin transaction builder. Schema → PSBT, with QR export for air-gap devices.',
+    type: 'website',
+  },
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className="font-sans antialiased">
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geist.variable} ${geistMono.variable} font-sans antialiased`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
-  )
+  );
 }