@leanspec/ui 0.2.3 → 0.2.4

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

@@ -0,0 +1,95 @@
+/**
+ * Custom link component for ReactMarkdown that handles internal spec links
+ */
+
+import Link from 'next/link';
+import { AnchorHTMLAttributes } from 'react';
+
+interface MarkdownLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  children?: React.ReactNode;
+  currentSpecNumber?: number;
+}
+
+/**
+ * Transform internal spec links to proper web app routes
+ * Examples:
+ * - ../048-spec-complexity-analysis/ -> /specs/48
+ * - ../048-spec-complexity-analysis/README.md -> /specs/48
+ * - ../048-spec-complexity-analysis/DESIGN.md -> /specs/48?subspec=DESIGN.md
+ * - ./DESIGN.md -> current spec with ?subspec=DESIGN.md
+ * - #heading -> #heading (anchor links unchanged)
+ * - https://... -> https://... (external links unchanged)
+ */
+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;
+}
+
+export function MarkdownLink({ href, children, currentSpecNumber, ...props }: MarkdownLinkProps) {
+  if (!href) {
+    return <a {...props}>{children}</a>;
+  }
+
+  const transformedHref = transformSpecLink(href, currentSpecNumber);
+
+  // External links or anchor links - use regular <a> tag
+  const isExternal = transformedHref.startsWith('http://') || transformedHref.startsWith('https://');
+  const isAnchor = transformedHref.startsWith('#');
+  
+  if (isExternal || isAnchor) {
+    return (
+      <a 
+        href={transformedHref} 
+        {...props}
+        target={isExternal ? '_blank' : undefined}
+        rel={isExternal ? 'noopener noreferrer' : undefined}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // Internal spec links - use Next.js Link
+  return (
+    <Link href={transformedHref} {...props} className="text-primary hover:underline">
+      {children}
+    </Link>
+  );
+}

package/dist/standalone/packages/web/src/components/navigation.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import { ChevronRight, Menu, BookOpen } from 'lucide-react';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { QuickSearch } from '@/components/quick-search';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface Spec {
+  id: string
+  specNumber: string
+  title: string
+  status: string
+  priority: string
+  tags: string[]
+  createdAt: string
+}
+
+interface NavigationProps {
+  specs: Spec[]
+}
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
+  return (
+    <nav className="flex items-center gap-1 text-sm text-muted-foreground">
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center gap-1">
+          {index > 0 && <ChevronRight className="h-4 w-4" />}
+          {item.href ? (
+            <Link 
+              href={item.href}
+              className="hover:text-foreground transition-colors"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span className="text-foreground">{item.label}</span>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+function getBreadcrumbs(pathname: string): BreadcrumbItem[] {
+  if (pathname === '/') {
+    return [{ label: 'Home' }];
+  }
+  
+  if (pathname === '/stats') {
+    return [
+      { label: 'Home', href: '/' },
+      { label: 'Stats' }
+    ];
+  }
+  
+  if (pathname === '/specs' || pathname.startsWith('/specs?')) {
+    const searchParams = new URLSearchParams(pathname.split('?')[1] || '');
+    const view = searchParams.get('view');
+    const viewLabel = view === 'board' ? 'Board View' : 'List View';
+    return [
+      { label: 'Home', href: '/' },
+      { label: `Specs (${viewLabel})` }
+    ];
+  }
+  
+  if (pathname.startsWith('/specs/')) {
+    const specId = pathname.split('/')[2];
+    return [
+      { label: 'Home', href: '/' },
+      { label: 'Specs', href: '/specs' },
+      { label: specId }
+    ];
+  }
+  
+  if (pathname === '/board') {
+    return [
+      { label: 'Home', href: '/' },
+      { label: 'Board' }
+    ];
+  }
+  
+  return [{ label: 'Home', href: '/' }];
+}
+
+export function Navigation({ specs }: NavigationProps) {
+  const pathname = usePathname();
+  const breadcrumbs = getBreadcrumbs(pathname);
+
+  const toggleSidebar = () => {
+    if (typeof window !== 'undefined' && window.toggleMainSidebar) {
+      window.toggleMainSidebar();
+    }
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full h-14 border-b border-border bg-background">
+      <div className="flex items-center justify-between h-full px-2 sm:px-4">
+        {/* Left: Mobile Menu + Logo + Breadcrumb */}
+        <div className="flex items-center gap-2 sm:gap-4 min-w-0 flex-1">
+          {/* Mobile hamburger menu */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={toggleSidebar}
+            className="lg:hidden h-9 w-9 shrink-0"
+          >
+            <Menu className="h-5 w-5" />
+            <span className="sr-only">Toggle menu</span>
+          </Button>
+
+          <Link href="/" className="flex items-center space-x-2 shrink-0">
+            <Image
+              src="/logo-with-bg.svg" 
+              alt="LeanSpec" 
+              width={32}
+              height={32}
+              className="h-7 w-7 sm:h-8 sm:w-8 dark:hidden" 
+            />
+            <Image
+              src="/logo-dark-bg.svg" 
+              alt="LeanSpec" 
+              width={32}
+              height={32}
+              className="h-7 w-7 sm:h-8 sm:w-8 hidden dark:block" 
+            />
+            <span className="font-bold text-lg sm:text-xl hidden sm:inline">LeanSpec</span>
+          </Link>
+          <div className="hidden md:block min-w-0">
+            <Breadcrumb items={breadcrumbs} />
+          </div>
+        </div>
+        
+        {/* Right: Search + Theme + Docs + GitHub */}
+        <div className="flex items-center gap-1 sm:gap-2 shrink-0">
+          <QuickSearch specs={specs} />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div>
+                  <ThemeToggle />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Toggle theme</p>
+              </TooltipContent>
+            </Tooltip>
+            
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" asChild className="h-9 w-9 sm:h-10 sm:w-10">
+                  <a 
+                    href="https://www.lean-spec.dev" 
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Documentation"
+                  >
+                    <BookOpen className="h-5 w-5" />
+                  </a>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Documentation</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" asChild className="h-9 w-9 sm:h-10 sm:w-10">
+                  <a 
+                    href="https://github.com/codervisor/lean-spec" 
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="GitHub repository"
+                  >
+                    <Image
+                      src="/github-mark-white.svg"
+                      alt="GitHub"
+                      width={20}
+                      height={20}
+                      className="hidden dark:block"
+                    />
+                    <Image
+                      src="/github-mark.svg"
+                      alt="GitHub"
+                      width={20}
+                      height={20}
+                      className="dark:hidden"
+                    />
+                  </a>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>GitHub repository</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    </header>
+  );
+}

package/dist/standalone/packages/web/src/components/priority-badge.tsx

@@ -0,0 +1,53 @@
+/**
+ * Priority badge component with icons
+ */
+
+import { AlertCircle, ArrowUp, Minus, ArrowDown } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface PriorityBadgeProps {
+  priority: string;
+  className?: string;
+  iconOnly?: boolean;
+}
+
+const priorityConfig = {
+  'critical': {
+    icon: AlertCircle,
+    label: 'Critical',
+    className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+  },
+  'high': {
+    icon: ArrowUp,
+    label: 'High',
+    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
+  },
+  'medium': {
+    icon: Minus,
+    label: 'Medium',
+    className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  'low': {
+    icon: ArrowDown,
+    label: 'Low',
+    className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
+  }
+};
+
+export function PriorityBadge({ priority, className, iconOnly = false }: PriorityBadgeProps) {
+  const config = priorityConfig[priority as keyof typeof priorityConfig] || priorityConfig.medium;
+  const Icon = config.icon;
+
+  return (
+    <Badge className={cn('flex items-center w-fit', !iconOnly && 'gap-1.5', config.className, className)}>
+      <Icon className="h-3.5 w-3.5" />
+      {!iconOnly && config.label}
+    </Badge>
+  );
+}
+
+export function getPriorityLabel(priority: string): string {
+  const config = priorityConfig[priority as keyof typeof priorityConfig] || priorityConfig.medium;
+  return config.label;
+}

package/dist/standalone/packages/web/src/components/quick-search.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { FileText, Search, Clock, Tag } from "lucide-react"
+import Fuse from "fuse.js"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { StatusBadge } from "@/components/status-badge"
+import { PriorityBadge } from "@/components/priority-badge"
+
+interface Spec {
+  id: string
+  specNumber: string
+  title: string
+  status: string
+  priority: string
+  tags: string[]
+  createdAt: string
+}
+
+interface QuickSearchProps {
+  specs: Spec[]
+}
+
+export function QuickSearch({ specs }: QuickSearchProps) {
+  const router = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
+  const [recentSearches, setRecentSearches] = React.useState<string[]>([])
+
+  // Load recent searches from localStorage
+  React.useEffect(() => {
+    const saved = localStorage.getItem("leanspec-recent-searches")
+    if (saved) {
+      setRecentSearches(JSON.parse(saved))
+    }
+  }, [])
+
+  // Setup keyboard shortcut
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  // Setup fuzzy search
+  const fuse = React.useMemo(
+    () =>
+      new Fuse(specs, {
+        keys: [
+          { name: "title", weight: 2 },
+          { name: "specNumber", weight: 1.5 },
+          { name: "tags", weight: 0.5 },
+        ],
+        threshold: 0.4,
+        includeScore: true,
+        minMatchCharLength: 2,
+      }),
+    [specs]
+  )
+
+  const results = React.useMemo(() => {
+    if (!search) return specs.slice(0, 8)
+    return fuse.search(search).map((result) => result.item)
+  }, [search, fuse, specs])
+
+  const handleSelect = (specId: string, title: string) => {
+    // Save to recent searches
+    const updated = [title, ...recentSearches.filter((s) => s !== title)].slice(0, 5)
+    setRecentSearches(updated)
+    localStorage.setItem("leanspec-recent-searches", JSON.stringify(updated))
+
+    // Navigate
+    router.push(`/specs/${specId}`)
+    setOpen(false)
+    setSearch("")
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="inline-flex items-center gap-2 px-2 sm:px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors border rounded-md hover:border-foreground/20"
+      >
+        <Search className="h-4 w-4" />
+        <span className="hidden sm:inline">Quick search...</span>
+        <kbd className="hidden md:inline-flex pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </button>
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput
+          placeholder="Search specs by title, number, or tags..."
+          value={search}
+          onValueChange={setSearch}
+        />
+        <CommandList>
+          <CommandEmpty>No specs found.</CommandEmpty>
+
+          {!search && recentSearches.length > 0 && (
+            <CommandGroup heading="Recent Searches">
+              {recentSearches.map((recent) => (
+                <CommandItem
+                  key={recent}
+                  value={recent}
+                  onSelect={() => {
+                    setSearch(recent)
+                  }}
+                >
+                  <Clock className="mr-2 h-4 w-4" />
+                  {recent}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+
+          <CommandGroup heading="Specs">
+            {results.map((spec) => (
+              <CommandItem
+                key={spec.id}
+                value={`${spec.specNumber} ${spec.title}`}
+                onSelect={() => handleSelect(spec.id, spec.title)}
+              >
+                <FileText className="mr-2 h-4 w-4" />
+                <div className="flex-1 flex items-center justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">#{spec.specNumber}</span>
+                      <span className="truncate">{spec.title}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1 shrink-0">
+                    <StatusBadge status={spec.status} />
+                    <PriorityBadge priority={spec.priority} />
+                  </div>
+                </div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+
+          {search && (
+            <CommandGroup heading="Filter by Tag">
+              {Array.from(new Set(specs.flatMap((s) => s.tags)))
+                .filter((tag) => tag.toLowerCase().includes(search.toLowerCase()))
+                .slice(0, 5)
+                .map((tag) => (
+                  <CommandItem
+                    key={tag}
+                    value={tag}
+                    onSelect={() => {
+                      router.push(`/?tag=${encodeURIComponent(tag)}`)
+                      setOpen(false)
+                    }}
+                  >
+                    <Tag className="mr-2 h-4 w-4" />
+                    Filter by: <span className="ml-1 font-medium">{tag}</span>
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}

package/dist/standalone/packages/web/src/components/skeletons.tsx

@@ -0,0 +1,119 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+export function SpecListSkeleton() {
+  return (
+    <div className="space-y-4">
+      {[...Array(5)].map((_, i) => (
+        <Card key={i}>
+          <CardHeader>
+            <div className="flex items-start justify-between">
+              <div className="space-y-2 flex-1">
+                <Skeleton className="h-6 w-3/4" />
+                <Skeleton className="h-4 w-1/2" />
+              </div>
+              <Skeleton className="h-6 w-20" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function SpecDetailSkeleton() {
+  return (
+    <div className="container mx-auto py-8 px-4 max-w-6xl">
+      <div className="space-y-6">
+        {/* Breadcrumb */}
+        <Skeleton className="h-5 w-48" />
+        
+        {/* Header */}
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-2/3" />
+          <Skeleton className="h-5 w-full" />
+        </div>
+
+        {/* Metadata section */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i}>
+              <CardContent className="p-4">
+                <Skeleton className="h-4 w-20 mb-2" />
+                <Skeleton className="h-6 w-24" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Content */}
+        <Card>
+          <CardContent className="p-6 space-y-4">
+            <Skeleton className="h-8 w-1/3" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-4/5" />
+            <div className="py-4" />
+            <Skeleton className="h-8 w-1/4" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <Card className="relative overflow-hidden">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-5 w-5 rounded-full" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="h-8 w-16 mb-2" />
+        <Skeleton className="h-3 w-32" />
+      </CardContent>
+    </Card>
+  )
+}
+
+export function KanbanBoardSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {[...Array(4)].map((_, i) => (
+        <div key={i} className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-6 w-8" />
+          </div>
+          <div className="space-y-3">
+            {[...Array(3)].map((_, j) => (
+              <Card key={j}>
+                <CardContent className="p-4 space-y-2">
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-4 w-3/4" />
+                  <div className="flex gap-2 pt-2">
+                    <Skeleton className="h-5 w-16" />
+                    <Skeleton className="h-5 w-16" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}