@leanspec/ui 0.2.3 → 0.2.4

package/dist/standalone/packages/web/src/app/stats/stats-client.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { FileText, CheckCircle2, PlayCircle, Clock } from 'lucide-react';
+import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+interface Stats {
+  totalSpecs: number;
+  completionRate: number;
+  specsByStatus: { status: string; count: number }[];
+  specsByPriority?: { priority: string; count: number }[];
+}
+
+interface Spec {
+  id: string;
+  specNumber: number | null;
+  status: string | null;
+  priority: string | null;
+  tags: string[] | null;
+  createdAt: Date | null;
+}
+
+interface StatsClientProps {
+  stats: Stats;
+  specs: Spec[];
+}
+
+const STATUS_COLORS = {
+  planned: '#3B82F6',
+  'in-progress': '#F59E0B',
+  complete: '#10B981',
+  archived: '#6B7280',
+};
+
+const PRIORITY_COLORS = {
+  critical: '#EF4444',
+  high: '#F59E0B',
+  medium: '#3B82F6',
+  low: '#6B7280',
+};
+
+export function StatsClient({ stats, specs }: StatsClientProps) {
+  // Calculate priority breakdown
+  const priorityBreakdown = specs.reduce((acc, spec) => {
+    const priority = spec.priority || 'unknown';
+    acc[priority] = (acc[priority] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const priorityData = Object.entries(priorityBreakdown).map(([priority, count]) => ({
+    name: priority.charAt(0).toUpperCase() + priority.slice(1),
+    value: count,
+    color: PRIORITY_COLORS[priority as keyof typeof PRIORITY_COLORS] || '#6B7280',
+  }));
+
+  // Calculate status data for charts
+  const statusData = stats.specsByStatus.map(item => ({
+    name: item.status.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+    value: item.count,
+    color: STATUS_COLORS[item.status as keyof typeof STATUS_COLORS] || '#6B7280',
+  }));
+
+  // Calculate tag frequency
+  const tagFrequency = specs.reduce((acc, spec) => {
+    (spec.tags || []).forEach(tag => {
+      acc[tag] = (acc[tag] || 0) + 1;
+    });
+    return acc;
+  }, {} as Record<string, number>);
+
+  const topTags = Object.entries(tagFrequency)
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 10)
+    .map(([tag, count]) => ({ tag, count }));
+
+  // Calculate monthly trends (last 6 months)
+  const monthlyTrends = specs
+    .filter(spec => spec.createdAt)
+    .reduce((acc, spec) => {
+      const month = new Date(spec.createdAt!).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+      acc[month] = (acc[month] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+
+  const trendData = Object.entries(monthlyTrends)
+    .slice(-6)
+    .map(([month, count]) => ({ month, count }));
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold tracking-tight">Project Statistics</h1>
+          <p className="text-muted-foreground mt-2">Comprehensive metrics and insights</p>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+          {/* Total Specs */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Total Specs</CardTitle>
+                <FileText className="h-5 w-5 text-blue-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">{stats.totalSpecs}</div>
+              <p className="text-xs text-muted-foreground mt-1">All specifications</p>
+            </CardContent>
+          </Card>
+
+          {/* Completed */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Completed</CardTitle>
+                <CheckCircle2 className="h-5 w-5 text-green-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">
+                {stats.specsByStatus.find(s => s.status === 'complete')?.count || 0}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                <span className="text-green-600 font-medium">{stats.completionRate}%</span> completion rate
+              </p>
+            </CardContent>
+          </Card>
+
+          {/* In Progress */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-orange-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">In Progress</CardTitle>
+                <PlayCircle className="h-5 w-5 text-orange-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">
+                {stats.specsByStatus.find(s => s.status === 'in-progress')?.count || 0}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">Active work</p>
+            </CardContent>
+          </Card>
+
+          {/* Planned */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Planned</CardTitle>
+                <Clock className="h-5 w-5 text-blue-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">
+                {stats.specsByStatus.find(s => s.status === 'planned')?.count || 0}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">Upcoming work</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Charts Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          {/* Status Distribution */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Status Distribution</CardTitle>
+              <CardDescription>Breakdown of specs by status</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <PieChart>
+                  <Pie
+                    data={statusData}
+                    cx="50%"
+                    cy="50%"
+                    labelLine={false}
+                    label={({ name, value }) => `${name}: ${value}`}
+                    outerRadius={80}
+                    fill="#8884d8"
+                    dataKey="value"
+                  >
+                    {statusData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                </PieChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          {/* Priority Distribution */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Priority Distribution</CardTitle>
+              <CardDescription>Breakdown of specs by priority</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <PieChart>
+                  <Pie
+                    data={priorityData}
+                    cx="50%"
+                    cy="50%"
+                    labelLine={false}
+                    label={({ name, value }) => `${name}: ${value}`}
+                    outerRadius={80}
+                    fill="#8884d8"
+                    dataKey="value"
+                  >
+                    {priorityData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                </PieChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Trends and Tags */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Monthly Trends */}
+          {trendData.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Creation Trend</CardTitle>
+                <CardDescription>Specs created over time</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={300}>
+                  <BarChart data={trendData}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="month" />
+                    <YAxis />
+                    <Tooltip />
+                    <Bar dataKey="count" fill="#3B82F6" />
+                  </BarChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Top Tags */}
+          {topTags.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Top Tags</CardTitle>
+                <CardDescription>Most frequently used tags</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {topTags.map(({ tag, count }) => (
+                    <div key={tag} className="flex items-center justify-between">
+                      <span className="text-sm font-medium">{tag}</span>
+                      <div className="flex items-center gap-2">
+                        <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
+                          <div
+                            className="h-full bg-primary"
+                            style={{ width: `${(count / topTags[0].count) * 100}%` }}
+                          />
+                        </div>
+                        <span className="text-sm text-muted-foreground w-8 text-right">{count}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/standalone/packages/web/src/components/back-to-top.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowUp } from 'lucide-react';
+
+export function BackToTop() {
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const toggleVisibility = () => {
+      // Show button when page is scrolled down 300px
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <Button
+      onClick={scrollToTop}
+      size="icon"
+      className="fixed bottom-6 right-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
+      aria-label="Back to top"
+    >
+      <ArrowUp className="h-5 w-5" />
+    </Button>
+  );
+}

package/dist/standalone/packages/web/src/components/empty-state.tsx

@@ -0,0 +1,52 @@
+import { LucideIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description: string
+  action?: {
+    label: string
+    onClick?: () => void
+    href?: string
+  }
+  className?: string
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-12 px-4 text-center",
+        className
+      )}
+    >
+      <div className="rounded-full bg-muted p-6 mb-4">
+        <Icon className="h-12 w-12 text-muted-foreground" />
+      </div>
+      <h3 className="text-lg font-semibold mb-2">{title}</h3>
+      <p className="text-sm text-muted-foreground max-w-md mb-6">
+        {description}
+      </p>
+      {action && (
+        <Button
+          onClick={action.onClick}
+          {...(action.href ? { asChild: true } : {})}
+        >
+          {action.href ? (
+            <a href={action.href}>{action.label}</a>
+          ) : (
+            action.label
+          )}
+        </Button>
+      )}
+    </div>
+  )
+}

package/dist/standalone/packages/web/src/components/main-sidebar.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, FileText, BarChart3, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+interface SidebarLinkProps {
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+  description?: string;
+  currentPath: string;
+  isCollapsed?: boolean;
+}
+
+function SidebarLink({ href, icon: Icon, children, description, currentPath, isCollapsed }: SidebarLinkProps) {
+  const isActive = currentPath === href || (href !== '/' && currentPath.startsWith(href));
+  
+  return (
+    <Link
+      href={href}
+      className={cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2 transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        isActive && "bg-accent text-accent-foreground font-medium",
+        isCollapsed && "justify-center px-2"
+      )}
+    >
+      <Icon className={cn("h-5 w-5 shrink-0", isActive && "text-primary")} />
+      {!isCollapsed && (
+        <div className="flex flex-col">
+          <span className="text-sm">{children}</span>
+          {description && (
+            <span className="text-xs text-muted-foreground">{description}</span>
+          )}
+        </div>
+      )}
+    </Link>
+  );
+}
+
+export function MainSidebar() {
+  const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('main-sidebar-collapsed');
+      return saved === 'true';
+    }
+    return false;
+  });
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Update CSS variable for other components to use and persist to localStorage
+  React.useEffect(() => {
+    document.documentElement.style.setProperty(
+      '--main-sidebar-width',
+      isCollapsed ? '60px' : '240px'
+    );
+    localStorage.setItem('main-sidebar-collapsed', String(isCollapsed));
+  }, [isCollapsed]);
+
+  // Close mobile menu on route change
+  React.useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
+  // Expose function for mobile toggle
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.toggleMainSidebar = () => setMobileOpen(prev => !prev);
+    return () => {
+      window.toggleMainSidebar = undefined;
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Mobile overlay backdrop */}
+      {mobileOpen && (
+        <div 
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside 
+        className={cn(
+          "sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border bg-background transition-all duration-300 flex-shrink-0",
+          // Desktop behavior
+          "hidden lg:flex",
+          mounted && isCollapsed ? "lg:w-[60px]" : "lg:w-[240px]",
+          // Mobile behavior - show as overlay when open
+          mobileOpen && "fixed left-0 top-14 z-50 flex w-[280px]"
+        )}
+      >
+        <div className="flex flex-col h-full w-full">
+          {/* Mobile close button */}
+          <div className="lg:hidden flex justify-end p-2 border-b border-border">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setMobileOpen(false)}
+              className="h-8 w-8 p-0"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close menu</span>
+            </Button>
+          </div>
+
+          {/* Navigation */}
+          {mounted && <nav className="flex-1 px-2 py-4 space-y-1">
+            <SidebarLink 
+              href="/" 
+              icon={Home} 
+              currentPath={pathname}
+              description={(!isCollapsed || mobileOpen) ? "Dashboard" : undefined}
+              isCollapsed={isCollapsed && !mobileOpen}
+            >
+              Home
+            </SidebarLink>
+            <SidebarLink 
+              href="/specs" 
+              icon={FileText} 
+              currentPath={pathname}
+              description={(!isCollapsed || mobileOpen) ? "All Specifications" : undefined}
+              isCollapsed={isCollapsed && !mobileOpen}
+            >
+              Specs
+            </SidebarLink>
+            <SidebarLink 
+              href="/stats" 
+              icon={BarChart3} 
+              currentPath={pathname}
+              description={(!isCollapsed || mobileOpen) ? "Analytics" : undefined}
+              isCollapsed={isCollapsed && !mobileOpen}
+            >
+              Stats
+            </SidebarLink>
+          </nav>}
+
+          {/* Collapse Toggle (desktop only) */}
+          <div className="hidden lg:block p-2 border-t border-border">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className={cn("w-full", mounted && isCollapsed && "px-2")}
+            >
+              {mounted && isCollapsed ? (
+                <ChevronRight className="h-4 w-4" />
+              ) : (
+                <>
+                  <ChevronLeft className="h-4 w-4 mr-2" />
+                  <span className="text-xs">Collapse</span>
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

package/dist/standalone/packages/web/src/components/markdown-link.test.ts

@@ -0,0 +1,96 @@
+/**
+ * Tests for MarkdownLink component
+ */
+
+import { describe, it, expect } from 'vitest';
+
+// Extract the transformation function for testing
+function transformSpecLink(href: string, currentSpecNumber?: number): string {
+  // Don't transform anchor links or external URLs
+  if (href.startsWith('#') || href.startsWith('http://') || href.startsWith('https://')) {
+    return href;
+  }
+
+  // Match same-directory sub-spec links: ./FILE.md
+  const sameDirectoryPattern = /^\.\/([^/]+\.md)$/;
+  const sameDirectoryMatch = href.match(sameDirectoryPattern);
+  
+  if (sameDirectoryMatch && currentSpecNumber) {
+    const subSpecFile = sameDirectoryMatch[1];
+    if (subSpecFile !== 'README.md') {
+      return `/specs/${currentSpecNumber}?subspec=${subSpecFile}`;
+    } else {
+      return `/specs/${currentSpecNumber}`;
+    }
+  }
+
+  // Match internal spec links: ../NNN-spec-name/ or ../NNN-spec-name/FILE.md
+  const specLinkPattern = /^\.\.\/(\d+)-[^/]+\/?([^/]+\.md)?$/;
+  const match = href.match(specLinkPattern);
+
+  if (match) {
+    // Convert to number to remove leading zeros (018 -> 18)
+    const specNumber = parseInt(match[1], 10);
+    const subSpecFile = match[2];
+
+    if (subSpecFile && subSpecFile !== 'README.md') {
+      // Sub-spec link (e.g., DESIGN.md, IMPLEMENTATION.md)
+      return `/specs/${specNumber}?subspec=${subSpecFile}`;
+    } else {
+      // Main spec link (README.md or just the directory)
+      return `/specs/${specNumber}`;
+    }
+  }
+
+  // If no pattern matches, return original href
+  return href;
+}
+
+describe('transformSpecLink', () => {
+  it('transforms spec directory links to /specs/NNN', () => {
+    expect(transformSpecLink('../048-spec-complexity-analysis/')).toBe('/specs/48');
+    expect(transformSpecLink('../066-context-economy-thresholds-refinement/')).toBe('/specs/66');
+    expect(transformSpecLink('../018-spec-validation/')).toBe('/specs/18');
+  });
+
+  it('transforms spec README.md links to /specs/NNN', () => {
+    expect(transformSpecLink('../048-spec-complexity-analysis/README.md')).toBe('/specs/48');
+    expect(transformSpecLink('../018-spec-validation/README.md')).toBe('/specs/18');
+  });
+
+  it('transforms sub-spec links to /specs/NNN?subspec=FILE.md', () => {
+    expect(transformSpecLink('../048-spec-complexity-analysis/DESIGN.md')).toBe('/specs/48?subspec=DESIGN.md');
+    expect(transformSpecLink('../066-context-economy-thresholds-refinement/IMPLEMENTATION.md')).toBe('/specs/66?subspec=IMPLEMENTATION.md');
+    expect(transformSpecLink('../018-spec-validation/CONFIGURATION-EXAMPLES.md')).toBe('/specs/18?subspec=CONFIGURATION-EXAMPLES.md');
+  });
+
+  it('transforms same-directory sub-spec links when currentSpecNumber is provided', () => {
+    expect(transformSpecLink('./DESIGN.md', 48)).toBe('/specs/48?subspec=DESIGN.md');
+    expect(transformSpecLink('./IMPLEMENTATION.md', 66)).toBe('/specs/66?subspec=IMPLEMENTATION.md');
+    expect(transformSpecLink('./CONFIGURATION-EXAMPLES.md', 18)).toBe('/specs/18?subspec=CONFIGURATION-EXAMPLES.md');
+    expect(transformSpecLink('./VALIDATION-RULES.md', 18)).toBe('/specs/18?subspec=VALIDATION-RULES.md');
+  });
+
+  it('leaves same-directory links unchanged when currentSpecNumber is not provided', () => {
+    expect(transformSpecLink('./DESIGN.md')).toBe('./DESIGN.md');
+    expect(transformSpecLink('./README.md')).toBe('./README.md');
+  });
+
+  it('transforms same-directory README.md to main spec', () => {
+    expect(transformSpecLink('./README.md', 18)).toBe('/specs/18');
+  });
+
+  it('leaves anchor links unchanged', () => {
+    expect(transformSpecLink('#heading')).toBe('#heading');
+    expect(transformSpecLink('#section-name')).toBe('#section-name');
+  });
+
+  it('leaves external URLs unchanged', () => {
+    expect(transformSpecLink('https://example.com')).toBe('https://example.com');
+    expect(transformSpecLink('http://example.com')).toBe('http://example.com');
+  });
+
+  it('leaves non-matching relative paths unchanged', () => {
+    expect(transformSpecLink('../other/path')).toBe('../other/path');
+  });
+});