@leanspec/ui 0.2.7 → 0.2.8

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

@@ -1,283 +0,0 @@
-'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/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/back-to-top.tsx

@@ -1,46 +0,0 @@
-'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/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/empty-state.tsx

@@ -1,52 +0,0 @@
-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/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/main-sidebar.tsx

@@ -1,175 +0,0 @@
-'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/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/markdown-link.test.ts

@@ -1,96 +0,0 @@
-/**
- * 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');
-  });
-});