@leanspec/ui 0.2.14 → 0.2.15-dev.21025278490

package/src/components/MermaidDiagram.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import mermaid from 'mermaid';
-import { useTranslation } from 'react-i18next';
-
-interface MermaidDiagramProps {
-  chart: string;
-  className?: string;
-}
-
-// Initialize mermaid with configuration
-mermaid.initialize({
-  startOnLoad: false,
-  theme: 'default',
-  securityLevel: 'loose',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-});
-
-// Generate unique IDs for Mermaid diagrams using crypto.randomUUID or fallback
-const generateId = () => {
-  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-    return `mermaid-${crypto.randomUUID()}`;
-  }
-  // Fallback for older browsers
-  return `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-};
-
-export function MermaidDiagram({ chart, className = '' }: MermaidDiagramProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [svg, setSvg] = useState<string>('');
-  const [error, setError] = useState<string | null>(null);
-  const [id] = useState(generateId);
-  const { t } = useTranslation(['common', 'errors']);
-
-  useEffect(() => {
-    if (!chart || !ref.current) return;
-
-    const renderDiagram = async () => {
-      try {
-        setError(null);
-        // Update theme based on document theme
-        const isDark = document.documentElement.classList.contains('dark');
-        mermaid.initialize({
-          theme: isDark ? 'dark' : 'default',
-          securityLevel: 'loose',
-        });
-
-        const { svg } = await mermaid.render(id, chart);
-        setSvg(svg);
-      } catch (err) {
-        console.error('Mermaid rendering error:', err);
-        const fallback = t('mermaid.renderError', { ns: 'errors' });
-        setError(err instanceof Error ? err.message : fallback);
-      }
-    };
-
-    renderDiagram();
-  }, [chart, id]);
-
-  if (error) {
-    return (
-      <div className={`border border-destructive rounded-lg p-4 ${className}`}>
-        <div className="text-sm text-destructive">
-          <strong>{t('mermaid.title', { ns: 'errors' })}</strong>
-          <pre className="mt-2 text-xs overflow-auto">{error}</pre>
-        </div>
-      </div>
-    );
-  }
-
-  if (!svg) {
-    return (
-      <div className={`border rounded-lg p-4 ${className}`}>
-        <div className="text-sm text-muted-foreground">{t('mermaid.loading', { ns: 'errors' })}</div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={ref}
-      className={`mermaid-diagram border rounded-lg p-4 overflow-auto ${className}`}
-      dangerouslySetInnerHTML={{ __html: svg }}
-    />
-  );
-}

package/src/components/MinimalLayout.tsx

@@ -1,51 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import { Navigation } from './Navigation';
-import { ErrorBoundary } from './shared/ErrorBoundary';
-import { PageTransition } from './shared/PageTransition';
-import { BackToTop } from './shared/BackToTop';
-import { useGlobalShortcuts } from '../hooks/useKeyboardShortcuts';
-import { LayoutProvider, useLayout, useKeyboardShortcuts } from '../contexts';
-import type { ReactNode } from 'react';
-
-/**
- * MinimalLayout provides only Navigation (app shell) without MainSidebar.
- * Used for pages like ProjectsPage where sidebar navigation doesn't make sense.
- */
-function MinimalLayoutContent({ navigationRightSlot }: { navigationRightSlot?: ReactNode }) {
-  const { toggleMobileSidebar } = useLayout();
-  const { toggleHelp } = useKeyboardShortcuts();
-
-  // Register global keyboard shortcuts
-  useGlobalShortcuts();
-
-  return (
-    <div className="min-h-screen flex flex-col bg-background">
-      <Navigation
-        onToggleSidebar={toggleMobileSidebar}
-        onShowShortcuts={toggleHelp}
-        rightSlot={navigationRightSlot}
-      />
-      <main className="flex-1 w-full min-h-[calc(100vh-3.5rem)]">
-        <ErrorBoundary onReset={() => window.location.reload()}>
-          <PageTransition>
-            <Outlet />
-          </PageTransition>
-        </ErrorBoundary>
-      </main>
-      <BackToTop />
-    </div>
-  );
-}
-
-/**
- * MinimalLayout wrapper that provides LayoutProvider.
- * Note: mobileSidebarOpen state exists but has no effect since there's no sidebar.
- * This maintains API consistency with Layout component.
- */
-export function MinimalLayout({ navigationRightSlot }: { navigationRightSlot?: ReactNode } = {}) {
-  return (
-    <LayoutProvider>
-      <MinimalLayoutContent navigationRightSlot={navigationRightSlot} />
-    </LayoutProvider>
-  );
-}

package/src/components/Navigation.tsx

@@ -1,254 +0,0 @@
-import type { ReactNode } from 'react';
-import { Link, useLocation, useParams } from 'react-router-dom';
-import { BookOpen, ChevronRight, Menu } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@leanspec/ui-components';
-import { QuickSearch } from './QuickSearch';
-import { ThemeToggle } from './ThemeToggle';
-import { LanguageSwitcher } from './LanguageSwitcher';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip';
-
-interface BreadcrumbItem {
-  label: string;
-  to?: string;
-}
-
-interface NavigationProps {
-  onToggleSidebar?: () => void;
-  onShowShortcuts?: () => void;
-  rightSlot?: ReactNode;
-  onHeaderDoubleClick?: () => void;
-}
-
-function stripProjectPrefix(pathname: string): string {
-  const match = pathname.match(/^\/projects\/[^/]+(\/.*)?$/);
-  return match ? match[1] || '/' : pathname;
-}
-
-function parsePathname(pathname: string): { page: string; specId?: string; query?: string } {
-  const path = stripProjectPrefix(pathname);
-
-  if (path === '/') return { page: 'home' };
-  if (path === '/stats') return { page: 'stats' };
-  if (path === '/dependencies') return { page: 'dependencies' };
-  if (path === '/context') return { page: 'context' };
-  if (path === '/settings') return { page: 'settings' };
-  if (path === '/specs' || path.startsWith('/specs?')) {
-    return { page: 'specs', query: path.split('?')[1] };
-  }
-  if (path.startsWith('/specs/')) {
-    return { page: 'spec-detail', specId: path.split('/')[2] };
-  }
-
-  return { page: 'unknown' };
-}
-
-function Breadcrumb({ basePath }: { basePath: string }) {
-  const location = useLocation();
-  const { t } = useTranslation('common');
-
-  const homeLabel = t('navigation.home');
-  const specsLabel = t('navigation.specs');
-  const statsLabel = t('navigation.stats');
-  const depsLabel = t('navigation.dependencies');
-  const contextLabel = t('navigation.context');
-  const settingsLabel = t('navigation.settings');
-
-  const parsed = parsePathname(location.pathname);
-
-  let items: BreadcrumbItem[] = [];
-
-  switch (parsed.page) {
-    case 'home':
-      items = [{ label: homeLabel }];
-      break;
-
-    case 'stats':
-      items = [{ label: homeLabel, to: basePath }, { label: statsLabel }];
-      break;
-
-    case 'dependencies':
-      items = [{ label: homeLabel, to: basePath }, { label: depsLabel }];
-      break;
-
-    case 'context':
-      items = [{ label: homeLabel, to: basePath }, { label: contextLabel }];
-      break;
-
-    case 'settings':
-      items = [{ label: homeLabel, to: basePath }, { label: settingsLabel }];
-      break;
-
-    case 'specs': {
-      items = [{ label: homeLabel, to: basePath }, { label: specsLabel }];
-      break;
-    }
-
-    case 'spec-detail':
-      items = [
-        { label: homeLabel, to: basePath },
-        { label: specsLabel, to: `${basePath}/specs` },
-        { label: parsed.specId || '' },
-      ];
-      break;
-
-    default:
-      items = [{ label: homeLabel, to: basePath }];
-  }
-
-  return (
-    <nav className="hidden md: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.to ? (
-            <Link to={item.to} className="hover:text-foreground transition-colors">
-              {item.label}
-            </Link>
-          ) : (
-            <span className="text-foreground">{item.label}</span>
-          )}
-        </div>
-      ))}
-    </nav>
-  );
-}
-
-export function Navigation({ onToggleSidebar, rightSlot, onHeaderDoubleClick }: NavigationProps) {
-  const { t } = useTranslation('common');
-  const { projectId } = useParams<{ projectId: string }>();
-  const basePath = projectId ? `/projects/${projectId}` : '/projects/default';
-
-  const toggleSidebar = () => {
-    onToggleSidebar?.();
-  };
-
-  return (
-    <header
-      className="sticky top-0 z-50 w-full h-14 border-b border-border bg-background"
-      data-tauri-drag-region="true"
-      onDoubleClick={onHeaderDoubleClick}
-    >
-      <div className="flex items-center justify-between h-full lg:px-1 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"
-            data-tauri-drag-region="false"
-          >
-            <Menu className="h-5 w-5" />
-            <span className="sr-only">{t('navigation.toggleMenu')}</span>
-          </Button>
-
-          <Link
-            to={basePath}
-            className="flex items-center space-x-2 shrink-0"
-            data-tauri-drag-region="false"
-          >
-            <img
-              src="/logo-with-bg.svg"
-              alt="LeanSpec"
-              className="h-7 w-7 sm:h-8 sm:w-8 dark:hidden"
-            />
-            <img
-              src="/logo-dark-bg.svg"
-              alt="LeanSpec"
-              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" data-tauri-drag-region="false">
-            <Breadcrumb basePath={basePath} />
-          </div>
-        </div>
-
-        {/* Right: Search + Language + Theme + Docs + GitHub */}
-        <div className="flex items-center gap-1 sm:gap-2 shrink-0" data-tauri-drag-region="false">
-          <div data-tauri-drag-region="false">
-            <QuickSearch />
-          </div>
-          <TooltipProvider>
-            <LanguageSwitcher />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>
-                  <ThemeToggle />
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{t('theme.toggleTheme')}</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  asChild
-                  className="h-9 w-9 sm:h-10 sm:w-10"
-                  data-tauri-drag-region="false"
-                >
-                  <a
-                    href="https://www.lean-spec.dev"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={t('navigation.docsTooltip')}
-                  >
-                    <BookOpen className="h-5 w-5" />
-                  </a>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{t('navigation.docsTooltip')}</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  asChild
-                  className="h-9 w-9 sm:h-10 sm:w-10"
-                  data-tauri-drag-region="false"
-                >
-                  <a
-                    href="https://github.com/codervisor/lean-spec"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={t('navigation.githubTooltip')}
-                  >
-                    <img
-                      src="/github-mark-white.svg"
-                      alt="GitHub"
-                      className="hidden dark:block w-5 h-5"
-                    />
-                    <img
-                      src="/github-mark.svg"
-                      alt="GitHub"
-                      className="dark:hidden w-5 h-5"
-                    />
-                  </a>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{t('navigation.githubTooltip')}</p>
-              </TooltipContent>
-            </Tooltip>
-
-            {rightSlot && (
-              <div className="ml-2 flex items-center" data-tauri-drag-region="false">
-                {rightSlot}
-              </div>
-            )}
-          </TooltipProvider>
-        </div>
-      </div>
-    </header>
-  );
-}

package/src/components/PriorityBadge.tsx

@@ -1,59 +0,0 @@
-import { AlertCircle, ArrowUp, Minus, ArrowDown } from 'lucide-react';
-import { Badge } from '@leanspec/ui-components';
-import { cn } from '../lib/utils';
-import { useTranslation } from 'react-i18next';
-
-interface PriorityBadgeProps {
-  priority: string;
-  className?: string;
-  iconOnly?: boolean;
-}
-
-const priorityConfig: Record<string, { icon: typeof AlertCircle; labelKey: `priority.${string}`; className: string }> = {
-  'critical': {
-    icon: AlertCircle,
-    labelKey: 'priority.critical',
-    className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
-  },
-  'high': {
-    icon: ArrowUp,
-    labelKey: 'priority.high',
-    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
-  },
-  'medium': {
-    icon: Minus,
-    labelKey: 'priority.medium',
-    className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
-  },
-  'low': {
-    icon: ArrowDown,
-    labelKey: 'priority.low',
-    className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
-  }
-};
-
-export function getPriorityLabel(priority: string, t: (key: string) => string) {
-  const config = priorityConfig[priority] || priorityConfig['medium'];
-  return t(config.labelKey);
-}
-
-export function PriorityBadge({ priority, className, iconOnly = false }: PriorityBadgeProps) {
-  const config = priorityConfig[priority] || priorityConfig['medium'];
-  const Icon = config.icon;
-  const { t } = useTranslation('common');
-
-  return (
-    <Badge
-      variant="outline"
-      className={cn(
-        'flex items-center w-fit h-5 px-2 py-0.5 text-xs font-medium border-transparent',
-        !iconOnly && 'gap-1.5',
-        config.className,
-        className,
-      )}
-    >
-      <Icon className="h-3.5 w-3.5" />
-      {!iconOnly && t(config.labelKey)}
-    </Badge>
-  );
-}

package/src/components/ProjectSwitcher.tsx

@@ -1,222 +0,0 @@
-/**
- * Project Switcher Component
- * Dropdown/expandable project selector for the sidebar
- */
-
-import { useState } from 'react';
-import { ChevronsUpDown, Plus, Star, Settings, Loader2, Check } from 'lucide-react';
-import { cn } from '@leanspec/ui-components';
-import { Button } from '@leanspec/ui-components';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from '@leanspec/ui-components';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@leanspec/ui-components';
-import { Skeleton } from '@leanspec/ui-components';
-import { useProject } from '../contexts';
-import { CreateProjectDialog } from './projects/CreateProjectDialog';
-import { ProjectAvatar } from './shared/ProjectAvatar';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-interface ProjectSwitcherProps {
-  collapsed?: boolean;
-  onAddProject?: () => void; // Kept for compatibility, but we'll use internal dialog
-}
-
-export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
-  const {
-    currentProject,
-    projects,
-    loading: isLoading,
-    switchProject,
-  } = useProject();
-  const { t } = useTranslation('common');
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const [open, setOpen] = useState(false);
-  const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
-  const [isSwitching, setIsSwitching] = useState(false);
-
-  // Show skeleton during initial load
-  if (isLoading) {
-    return (
-      <Skeleton className={cn(
-        "w-full",
-        collapsed ? "h-9 w-9" : "h-10"
-      )} />
-    );
-  }
-
-  const handleProjectSelect = async (projectId: string) => {
-    if (projectId === currentProject?.id) {
-      setOpen(false);
-      return;
-    }
-
-    setIsSwitching(true);
-    setOpen(false);
-
-    const pathname = location.pathname;
-    const projectPathMatch = pathname.match(/^\/projects\/[^/]+(\/.*)?$/);
-    let subPath = projectPathMatch?.[1] || '';
-
-    if (!subPath || subPath === '/') {
-      subPath = '/specs';
-    }
-
-    if (subPath.match(/^\/specs\/[^/]+$/)) {
-      subPath = '/specs';
-    }
-
-    try {
-      await switchProject(projectId);
-      navigate(`/projects/${projectId}${subPath}${location.search}`);
-    } catch (err) {
-      console.error('Failed to switch project', err);
-    } finally {
-      setIsSwitching(false);
-    }
-  };
-
-  const sortedProjects = [...(projects || [])].sort((a, b) => {
-    if (a.favorite === b.favorite) return 0;
-    return a.favorite ? -1 : 1;
-  });
-
-  return (
-    <>
-      <CreateProjectDialog
-        open={showNewProjectDialog}
-        onOpenChange={setShowNewProjectDialog}
-      />
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            disabled={isSwitching}
-            className={cn(
-              "w-full justify-between transition-opacity",
-              collapsed ? "h-9 w-9 p-0 justify-center" : "px-3",
-              isSwitching && "opacity-70"
-            )}
-          >
-            {collapsed ? (
-              isSwitching ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <ProjectAvatar
-                  name={currentProject?.name || ''}
-                  color={currentProject?.color}
-                  size="sm"
-                />
-              )
-            ) : (
-              <>
-                <div className="flex items-center gap-2 truncate">
-                  {isSwitching ? (
-                    <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
-                  ) : (
-                    <ProjectAvatar
-                      name={currentProject?.name || ''}
-                      color={currentProject?.color}
-                      size="sm"
-                      className="shrink-0"
-                    />
-                  )}
-                  <span className="truncate">
-                    {isSwitching ? t('projectSwitcher.switching') : (currentProject?.name || t('projectSwitcher.placeholder'))}
-                  </span>
-                </div>
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-              </>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[240px] p-0" align="start">
-          <Command>
-            <CommandInput placeholder={t('projectSwitcher.searchPlaceholder')} />
-            <CommandList>
-              <CommandEmpty>{t('projectSwitcher.noProject')}</CommandEmpty>
-              <CommandGroup heading={t('projects.projects')}>
-                {sortedProjects.map((project) => {
-                  const isActive = currentProject?.id === project.id;
-                  return (
-                    <CommandItem
-                      key={project.id}
-                      onSelect={() => handleProjectSelect(project.id)}
-                      className={cn(
-                        "text-sm",
-                        isActive && "bg-accent"
-                      )}
-                    >
-                      <div className="flex items-center gap-2 w-full">
-                        <ProjectAvatar
-                          name={project.name || ''}
-                          color={project.color}
-                          size="sm"
-                          className="shrink-0"
-                        />
-                        <span className="truncate flex-1">{project.name}</span>
-                        {project.favorite && (
-                          <Star className="h-3 w-3 shrink-0 fill-yellow-600 text-yellow-600 dark:fill-yellow-500 dark:text-yellow-500" />
-                        )}
-                        <div
-                          className={cn(
-                            'mr-2 flex h-4 w-4 items-center justify-center',
-                            currentProject?.id === project.id ? 'opacity-100' : 'opacity-0'
-                          )}
-                        >
-                          <Check className="h-4 w-4" />
-                        </div>
-                      </div>
-                    </CommandItem>
-                  );
-                })}
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup>
-                <CommandItem
-                  className="cursor-pointer"
-                  onSelect={() => {
-                    setOpen(false);
-                    setShowNewProjectDialog(true);
-                  }}
-                >
-                  <div className="flex items-center gap-2">
-                    <Plus className="h-4 w-4" />
-                    <span>{t('projects.createProject')}</span>
-                  </div>
-                </CommandItem>
-                <CommandItem
-                  className="cursor-pointer"
-                  onSelect={() => {
-                    setOpen(false);
-                    navigate('/projects');
-                  }}
-                >
-                  <div className="flex items-center gap-2">
-                    <Settings className="h-4 w-4" />
-                    <span>{t('projects.manageProjects')}</span>
-                  </div>
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}