@leanspec/ui 0.2.5 → 0.2.6-dev.20251125015611

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

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

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

@@ -1,53 +0,0 @@
-/**
- * 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/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/quick-search.tsx

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

@@ -1,119 +0,0 @@
-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>
-  )
-}