@leanspec/ui 0.2.7 → 0.2.8

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

@@ -1,277 +0,0 @@
-'use client';
-
-import { useState, useMemo } from 'react';
-import Link from 'next/link';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-import { Search, FileText, CheckCircle2, PlayCircle, Clock } from 'lucide-react';
-import { StatusBadge } from '@/components/status-badge';
-import { PriorityBadge } from '@/components/priority-badge';
-
-interface Spec {
-  id: string;
-  specNumber: number | null;
-  specName: string;
-  title: string | null;
-  status: string | null;
-  priority: string | null;
-  tags: string[] | null;
-}
-
-interface Stats {
-  totalSpecs: number;
-  completionRate: number;
-  specsByStatus: { status: string; count: number }[];
-}
-
-interface HomeClientProps {
-  initialProjects: unknown[];
-  initialStats: Stats;
-  initialSpecs: Spec[];
-}
-
-export function HomeClient({ initialProjects: _initialProjects, initialStats, initialSpecs }: HomeClientProps) {
-  void _initialProjects;
-  const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('all');
-  const [priorityFilter, setPriorityFilter] = useState<string>('all');
-
-  const filteredSpecs = useMemo(() => {
-    return initialSpecs.filter(spec => {
-      const matchesSearch = !searchQuery ||
-        spec.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        spec.specName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        spec.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
-
-      const matchesStatus = statusFilter === 'all' || spec.status === statusFilter;
-      const matchesPriority = priorityFilter === 'all' || spec.priority === priorityFilter;
-
-      return matchesSearch && matchesStatus && matchesPriority;
-    });
-  }, [initialSpecs, searchQuery, statusFilter, priorityFilter]);
-
-  const stats = initialStats;
-
-  return (
-    <div className="min-h-screen bg-background">
-      {/* Stats Section */}
-      <section className="container mx-auto px-4 py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">LeanSpec Web</h1>
-          <p className="text-muted-foreground mt-2">Interactive spec showcase for AI-powered development</p>
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-          {/* Total Specs */}
-          <Card className="relative overflow-hidden">
-            <div className="absolute inset-0 bg-linear-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>
-            </CardContent>
-          </Card>
-
-          {/* Completed */}
-          <Card className="relative overflow-hidden">
-            <div className="absolute inset-0 bg-linear-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 flex items-center gap-1">
-                <span className="text-green-600">{stats.completionRate}%</span>
-                completion rate
-              </p>
-            </CardContent>
-          </Card>
-
-          {/* In Progress */}
-          <Card className="relative overflow-hidden">
-            <div className="absolute inset-0 bg-linear-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>
-            </CardContent>
-          </Card>
-
-          {/* Planned */}
-          <Card className="relative overflow-hidden">
-            <div className="absolute inset-0 bg-linear-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>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      {/* Specs List */}
-      <section className="container mx-auto px-4 py-4">
-        <div className="mb-1">
-          <h2 className="text-xl sm:text-2xl font-bold mb-4">Specifications</h2>
-
-          {/* Search and Filters */}
-          <div className="lg:sticky lg:top-14 lg:z-40 bg-background pb-4 pt-2 mb-1">
-            <div className="flex flex-col gap-3 mb-3">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-                <Input
-                  placeholder="Search specs..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
-
-              <div className="flex gap-2 overflow-x-auto pb-2">
-                <Select value={statusFilter} onValueChange={setStatusFilter}>
-                  <SelectTrigger className="w-[140px] sm:w-[180px]">
-                    <SelectValue placeholder="All Status" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Status</SelectItem>
-                    <SelectItem value="planned">Planned</SelectItem>
-                    <SelectItem value="in-progress">In Progress</SelectItem>
-                    <SelectItem value="complete">Complete</SelectItem>
-                    <SelectItem value="archived">Archived</SelectItem>
-                  </SelectContent>
-                </Select>
-
-                <Select value={priorityFilter} onValueChange={setPriorityFilter}>
-                  <SelectTrigger className="w-[140px] sm:w-[180px]">
-                    <SelectValue placeholder="All Priority" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Priority</SelectItem>
-                    <SelectItem value="critical">Critical</SelectItem>
-                    <SelectItem value="high">High</SelectItem>
-                    <SelectItem value="medium">Medium</SelectItem>
-                    <SelectItem value="low">Low</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Desktop Table View */}
-        <div className="hidden md:block border rounded-lg border-gray-200 dark:border-gray-800 overflow-x-auto">
-          <table className="w-full">
-            <thead className="lg:sticky lg:top-14 lg:z-30 border-b backdrop-blur border-gray-200 bg-background/95 dark:border-gray-800">
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  Spec
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  Title
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  Status
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  Priority
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
-              {filteredSpecs.map((spec) => (
-                <tr 
-                  key={spec.id} 
-                  className="group hover:bg-muted/50 transition-colors cursor-pointer"
-                  onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
-                >
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className="text-primary group-hover:underline font-medium">
-                      {spec.specNumber ? `#${spec.specNumber}` : spec.specName}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4">
-                    <div className="text-sm">{spec.title || spec.specName}</div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <StatusBadge status={spec.status || 'planned'} />
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <PriorityBadge priority={spec.priority || 'medium'} />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Mobile Card View */}
-        <div className="md:hidden space-y-3">
-          {filteredSpecs.map((spec) => (
-            <Link
-              key={spec.id}
-              href={`/specs/${spec.specNumber || spec.id}`}
-              className="block"
-            >
-              <Card className="hover:bg-muted/50 transition-colors">
-                <CardContent className="p-4">
-                  <div className="flex items-start justify-between gap-2 mb-2">
-                    <div className="flex-1 min-w-0">
-                      <div className="font-medium text-primary mb-1">
-                        {spec.specNumber ? `#${spec.specNumber}` : spec.specName}
-                      </div>
-                      <div className="text-sm text-foreground truncate">
-                        {spec.title || spec.specName}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2 mt-3">
-                    <StatusBadge status={spec.status || 'planned'} />
-                    <PriorityBadge priority={spec.priority || 'medium'} />
-                  </div>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="container mx-auto px-4 py-8 text-center text-muted-foreground border-t border-gray-200 dark:border-gray-800 mt-12">
-        <p>LeanSpec - Lightweight spec methodology for AI-powered development</p>
-        <p className="mt-2 text-sm">
-          <a href="https://github.com/codervisor/lean-spec" className="text-primary hover:underline">
-            View on GitHub
-          </a>
-        </p>
-      </footer>
-    </div>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/layout.tsx

@@ -1,70 +0,0 @@
-import type { Metadata } from "next";
-import "./globals.css";
-import { Navigation } from "@/components/navigation";
-import { MainSidebar } from "@/components/main-sidebar";
-import { ThemeProvider } from "@/components/theme-provider";
-import { Toast } from "@/components/ui/toast";
-import { getSpecs } from "@/lib/db/service-queries";
-
-export const metadata: Metadata = {
-  title: "LeanSpec Web - Interactive Spec Showcase",
-  description: "Browse and explore LeanSpec specifications in a rich, interactive format",
-  icons: {
-    icon: [
-      { url: '/favicon.ico' },
-      { url: '/logo.svg', type: 'image/svg+xml' },
-    ],
-    apple: '/logo.svg',
-  },
-  openGraph: {
-    title: "LeanSpec Web",
-    description: "Browse and explore LeanSpec specifications in a rich, interactive format",
-    type: "website",
-  },
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 5,
-  },
-};
-
-export default async function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const specs = await getSpecs();
-  const specsForSearch = specs
-    .filter(spec => spec.specNumber && spec.title && spec.status && spec.priority)
-    .map(spec => ({
-      id: spec.id,
-      specNumber: spec.specNumber!.toString(),
-      title: spec.title!,
-      status: spec.status!,
-      priority: spec.priority!,
-      tags: spec.tags || [],
-      createdAt: spec.createdAt ? spec.createdAt.toISOString() : '',
-    }));
-
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className="antialiased bg-background overflow-x-hidden">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <Navigation specs={specsForSearch} />
-          <div className="flex w-full min-w-0">
-            <MainSidebar />
-            <main className="flex-1 min-h-[calc(100vh-3.5rem)] min-w-0 w-full lg:w-[calc(100vw-var(--main-sidebar-width,240px))]">
-              {children}
-            </main>
-          </div>
-          <Toast />
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/loading.tsx

@@ -1,87 +0,0 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-
-export default function Loading() {
-  return (
-    <div className="min-h-screen bg-background">
-      {/* Stats Section */}
-      <section className="container mx-auto px-4 py-8">
-        <div className="mb-8">
-          <Skeleton className="h-10 w-64 mb-2" />
-          <Skeleton className="h-5 w-96" />
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-          {[...Array(4)].map((_, i) => (
-            <Card key={i}>
-              <CardHeader className="pb-3">
-                <Skeleton className="h-4 w-24" />
-              </CardHeader>
-              <CardContent>
-                <Skeleton className="h-9 w-16" />
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </section>
-
-      {/* Specs List */}
-      <section className="container mx-auto px-4 py-8">
-        <div className="mb-6">
-          <Skeleton className="h-8 w-48 mb-4" />
-          
-          <div className="flex flex-col sm:flex-row gap-4 mb-6">
-            <Skeleton className="h-9 flex-1" />
-            <div className="flex gap-2">
-              <Skeleton className="h-9 w-32" />
-              <Skeleton className="h-9 w-32" />
-            </div>
-          </div>
-
-          <Skeleton className="h-4 w-48 mb-4" />
-        </div>
-
-        <Card>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead className="border-b">
-                <tr>
-                  <th className="px-6 py-3 text-left">
-                    <Skeleton className="h-4 w-12" />
-                  </th>
-                  <th className="px-6 py-3 text-left">
-                    <Skeleton className="h-4 w-16" />
-                  </th>
-                  <th className="px-6 py-3 text-left">
-                    <Skeleton className="h-4 w-16" />
-                  </th>
-                  <th className="px-6 py-3 text-left">
-                    <Skeleton className="h-4 w-16" />
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y">
-                {[...Array(10)].map((_, i) => (
-                  <tr key={i}>
-                    <td className="px-6 py-4">
-                      <Skeleton className="h-5 w-12" />
-                    </td>
-                    <td className="px-6 py-4">
-                      <Skeleton className="h-5 w-64" />
-                    </td>
-                    <td className="px-6 py-4">
-                      <Skeleton className="h-6 w-20" />
-                    </td>
-                    <td className="px-6 py-4">
-                      <Skeleton className="h-6 w-16" />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Card>
-      </section>
-    </div>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/not-found.tsx

@@ -1,27 +0,0 @@
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-
-export default function NotFound() {
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center px-4">
-      <div className="text-center space-y-6">
-        <div className="space-y-2">
-          <h1 className="text-6xl font-bold text-primary">404</h1>
-          <h2 className="text-2xl font-semibold">Page Not Found</h2>
-          <p className="text-muted-foreground max-w-md mx-auto">
-            The page you&rsquo;re looking for doesn&rsquo;t exist or has been moved.
-          </p>
-        </div>
-        
-        <div className="flex gap-4 justify-center">
-          <Button asChild>
-            <Link href="/">Go Home</Link>
-          </Button>
-          <Button variant="outline" asChild>
-            <Link href="/board">View Board</Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/page.tsx

@@ -1,18 +0,0 @@
-/**
- * Home page - Dashboard with project overview
- */
-
-import { getStats, getSpecs } from '@/lib/db/service-queries';
-import { DashboardClient } from './dashboard-client';
-
-// Force dynamic rendering - this page needs runtime data
-export const dynamic = 'force-dynamic';
-
-export default async function Home() {
-  const [stats, specs] = await Promise.all([
-    getStats(),
-    getSpecs(),
-  ]);
-
-  return <DashboardClient initialSpecs={specs} initialStats={stats} />;
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/specs/[id]/loading.tsx

@@ -1,5 +0,0 @@
-import { SpecDetailLoadingShell } from '@/components/spec-detail-loading-shell';
-
-export default function SpecLoading() {
-  return <SpecDetailLoadingShell />;
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/specs/[id]/page.tsx

@@ -1,43 +0,0 @@
-/**
- * Spec detail page with markdown rendering and enhanced UI
- * Phase 2: Tier 2 - Hybrid Rendering with client-side caching
- */
-
-import { notFound } from 'next/navigation';
-import { getSpecById, getSpecsWithSubSpecCount } from '@/lib/db/service-queries';
-import { SpecDetailWrapper } from '@/components/spec-detail-wrapper';
-
-// Tier 1: Route segment caching for performance
-export const revalidate = 60; // Cache rendered pages for 60s
-export const dynamicParams = true; // Generate new pages on demand
-
-export default async function SpecDetailPage({ 
-  params,
-  searchParams
-}: { 
-  params: Promise<{ id: string }>;
-  searchParams: Promise<{ subspec?: string }>;
-}) {
-  const { id } = await params;
-  const { subspec: currentSubSpec } = await searchParams;
-  
-  const [spec, allSpecs] = await Promise.all([
-    getSpecById(id),
-    getSpecsWithSubSpecCount()
-  ]);
-
-  if (!spec) {
-    notFound();
-  }
-
-  return (
-    <SpecDetailWrapper 
-      spec={spec}
-      allSpecs={allSpecs}
-      currentSubSpec={currentSubSpec}
-    />
-  );
-}
-
-
-

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/specs/page.tsx

@@ -1,18 +0,0 @@
-/**
- * Specs page - Browse all LeanSpec specifications with list/board switcher
- */
-
-import { getSpecs, getStats } from '@/lib/db/service-queries';
-import { SpecsClient } from './specs-client';
-
-// Force dynamic rendering - this page needs runtime data
-export const dynamic = 'force-dynamic';
-
-export default async function SpecsPage() {
-  const [specs, stats] = await Promise.all([
-    getSpecs(),
-    getStats(),
-  ]);
-
-  return <SpecsClient initialSpecs={specs} initialStats={stats} />;
-}