feat: add consistent navigation and disable server-side exports

- Created shared Navigation component for all pages
- Added Navigation to all docs pages and playground
- Updated homepage tagline to include all v1.0 features
  Old: Documents + Slides + Spreadsheets
  New: Documents • Slides • Spreadsheets • Charts • Diagrams • Code
- Disabled export buttons in playground with clear messaging
  - Added warning banner explaining server requirement
  - Changed buttons to gray/disabled state
  - Added CLI installation instructions
  - Hover tooltips show CLI commands
- All pages now have consistent header navigation
- Added pt-24 padding to all pages for fixed nav
- No more 'lost' feeling when navigating between sections

Author: alpha912

app/docs/api-reference/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { Code, Package, Wrench } from 'phosphor-react';
 
 export default function APIReferencePage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center gap-4 mb-4">

app/docs/getting-started/installation/page.tsx

@@ -3,10 +3,15 @@
 // Why: Help users get started with OSF quickly
 // Related: app/docs/getting-started/first-document/page.tsx
 
+'use client';
+
+import Navigation from '@/components/Navigation';
+
 export default function InstallationPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 max-w-4xl pt-24">
         <h1 className="text-5xl font-bold mb-4 border-b-4 border-white pb-4">Installation</h1>
         <p className="text-xl text-gray-300 mb-12">
           Get OmniScript Format up and running in minutes.

app/docs/page.tsx

@@ -5,12 +5,14 @@
 
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { Rocket, Book, Sparkle, Wrench, Lightbulb, BookOpen, PresentationChart } from 'phosphor-react';
 
 export default function DocsPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-6xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 max-w-6xl pt-24">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-white pb-4">
           OmniScript Format Documentation
         </h1>

app/docs/releases/page.tsx

@@ -5,12 +5,14 @@
 
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { CheckCircle, Warning, RocketLaunch, GitBranch } from 'phosphor-react';
 
 export default function ReleasesPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-white pb-4">
           Release Notes
         </h1>

app/docs/releases/v1-0/page.tsx

@@ -5,12 +5,14 @@
 
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { Rocket, ChartBar, FlowArrow, Code, CheckCircle, Warning, Star, Confetti } from 'phosphor-react';
 
 export default function V1ReleaseNotesPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center gap-4 mb-4">

app/docs/user-guide/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { Book, FileText, PresentationChart, Table, ChartBar, FlowArrow, Code } from 'phosphor-react';
 
 export default function UserGuidePage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center gap-4 mb-4">

app/docs/v1-features/chart-blocks/page.tsx

@@ -5,12 +5,14 @@
 
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { ChartBar, GameController } from 'phosphor-react';
 
 export default function ChartBlocksPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-blue-500 pb-4">
           @chart Blocks
         </h1>

app/docs/v1-features/code-blocks/page.tsx

@@ -5,12 +5,14 @@
 
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { Code, GameController, CheckCircle, Warning } from 'phosphor-react';
 
 export default function CodeBlocksPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-green-500 pb-4">
           @code Blocks
         </h1>

app/docs/v1-features/diagram-blocks/page.tsx

@@ -5,12 +5,14 @@
 
 'use client';
 
+import Navigation from '@/components/Navigation';
 import { FlowArrow, GameController } from 'phosphor-react';
 
 export default function DiagramBlocksPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <div className="container mx-auto px-4 py-12 max-w-4xl">
+      <Navigation />
+      <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-purple-500 pb-4">
           @diagram Blocks
         </h1>

app/playground/page.tsx

@@ -8,6 +8,7 @@
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { parse } from 'omniscript-parser';
+import Navigation from '@/components/Navigation';
 
 const MonacoEditor = dynamic(() => import('@monaco-editor/react'), { ssr: false });