@leanspec/ui 0.2.13 → 0.2.15-dev.21022397862

package/src/pages/SpecsPage.tsx

@@ -1,319 +0,0 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { LayoutGrid, List, AlertCircle, FileQuestion, FilterX, RefreshCcw } from 'lucide-react';
-import { Button, Card, CardContent } from '@leanspec/ui-components';
-import { useParams, useSearchParams } from 'react-router-dom';
-import { api } from '../lib/api';
-import type { Spec } from '../types/api';
-import { BoardView } from '../components/specs/BoardView';
-import { ListView } from '../components/specs/ListView';
-import { SpecsFilters } from '../components/specs/SpecsFilters';
-import { cn } from '../lib/utils';
-import { SpecListSkeleton } from '../components/shared/Skeletons';
-import { PageHeader } from '../components/shared/PageHeader';
-import { EmptyState } from '../components/shared/EmptyState';
-import { useProject } from '../contexts';
-import { useTranslation } from 'react-i18next';
-
-type ViewMode = 'list' | 'board';
-type SpecStatus = 'planned' | 'in-progress' | 'complete' | 'archived';
-type SortOption = 'id-desc' | 'id-asc' | 'updated-desc' | 'title-asc';
-
-export function SpecsPage() {
-  const [specs, setSpecs] = useState<Spec[]>([]);
-  const { projectId } = useParams<{ projectId: string }>();
-  const basePath = projectId ? `/projects/${projectId}` : '/projects/default';
-  const { currentProject, loading: projectLoading } = useProject();
-  const projectReady = !projectId || currentProject?.id === projectId;
-  const { t } = useTranslation('common');
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Filters
-  const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('all');
-  const [priorityFilter, setPriorityFilter] = useState<string>('all');
-  const [tagFilter, setTagFilter] = useState<string>('all');
-  const [sortBy, setSortBy] = useState<SortOption>('id-desc');
-
-  const [searchParams] = useSearchParams();
-  const initializedFromQuery = useRef(false);
-
-  // View State
-  const [viewMode, setViewMode] = useState<ViewMode>(() => {
-    const saved = localStorage.getItem('specs-view-mode');
-    return (saved === 'board' || saved === 'list') ? saved : 'list';
-  });
-
-  const loadSpecs = useCallback(async () => {
-    if (!projectReady || projectLoading) return;
-    try {
-      setLoading(true);
-      const data = await api.getSpecs();
-      setSpecs(data);
-      setError(null);
-    } catch (err: unknown) {
-      console.error('Failed to load specs', err);
-      setError(t('specsPage.state.errorDescription'));
-    } finally {
-      setLoading(false);
-    }
-  }, [projectLoading, projectReady, t]);
-
-  useEffect(() => {
-    void loadSpecs();
-  }, [loadSpecs]);
-
-  useEffect(() => {
-    if (initializedFromQuery.current) return;
-    const initialTag = searchParams.get('tag');
-    const initialQuery = searchParams.get('q');
-    if (initialTag) setTagFilter(initialTag);
-    if (initialQuery) setSearchQuery(initialQuery);
-    initializedFromQuery.current = true;
-  }, [searchParams]);
-
-  useEffect(() => {
-    localStorage.setItem('specs-view-mode', viewMode);
-  }, [viewMode]);
-
-  const handleStatusChange = useCallback(async (spec: Spec, newStatus: SpecStatus) => {
-    // Optimistic update
-    setSpecs(prev => prev.map(s =>
-      s.specName === spec.specName ? { ...s, status: newStatus } : s
-    ));
-
-    try {
-      await api.updateSpec(spec.specName, { status: newStatus });
-    } catch (err) {
-      // Revert on error
-      setSpecs(prev => prev.map(s =>
-        s.specName === spec.specName ? { ...s, status: spec.status } : s
-      ));
-      console.error('Failed to update status:', err);
-    }
-  }, []);
-
-  // Get unique values for filters
-  const uniqueStatuses = useMemo(() => {
-    const statuses = specs.map((s) => s.status).filter((s): s is SpecStatus => Boolean(s));
-    const uniqueSet = Array.from(new Set(statuses));
-    // Sort by defined order: planned -> in-progress -> complete -> archived
-    const statusOrder: Record<SpecStatus, number> = {
-      'planned': 1,
-      'in-progress': 2,
-      'complete': 3,
-      'archived': 4,
-    };
-    return uniqueSet.sort((a, b) => statusOrder[a] - statusOrder[b]);
-  }, [specs]);
-  const uniquePriorities = useMemo(() => {
-    const uniqueSet = Array.from(new Set(specs.map(s => s.priority).filter(Boolean) as string[]));
-    // Sort by defined order: critical -> high -> medium -> low
-    const priorityOrder: Record<string, number> = {
-      'critical': 1,
-      'high': 2,
-      'medium': 3,
-      'low': 4,
-    };
-    return uniqueSet.sort((a, b) => (priorityOrder[a] || 999) - (priorityOrder[b] || 999));
-  }, [specs]);
-  const uniqueTags = useMemo(() => {
-    const uniqueSet = Array.from(new Set(specs.flatMap(s => s.tags || [])));
-    // Sort alphabetically ascending
-    return uniqueSet.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-  }, [specs]);
-
-  const handleClearFilters = useCallback(() => {
-    setSearchQuery('');
-    setStatusFilter('all');
-    setPriorityFilter('all');
-    setTagFilter('all');
-  }, []);
-
-  // Filter specs based on search and filters
-  const filteredSpecs = useMemo(() => {
-    const filtered = specs.filter(spec => {
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        const matchesSearch =
-          spec.specName.toLowerCase().includes(query) ||
-          (spec.title ? spec.title.toLowerCase().includes(query) : false) ||
-          spec.tags?.some((tag: string) => tag.toLowerCase().includes(query));
-        if (!matchesSearch) return false;
-      }
-
-      if (statusFilter !== 'all' && spec.status !== statusFilter) {
-        return false;
-      }
-
-      if (priorityFilter !== 'all' && spec.priority !== priorityFilter) {
-        return false;
-      }
-
-      if (tagFilter !== 'all' && !spec.tags?.includes(tagFilter)) {
-        return false;
-      }
-
-      return true;
-    });
-
-    const sorted = [...filtered];
-    switch (sortBy) {
-      case 'id-asc':
-        sorted.sort((a, b) => (a.specNumber || 0) - (b.specNumber || 0));
-        break;
-      case 'updated-desc':
-        sorted.sort((a, b) => {
-          if (!a.updatedAt) return 1;
-          if (!b.updatedAt) return -1;
-          const aTime = new Date(a.updatedAt).getTime();
-          const bTime = new Date(b.updatedAt).getTime();
-          return bTime - aTime;
-        });
-        break;
-      case 'title-asc':
-        sorted.sort((a, b) => {
-          const titleA = (a.title || a.specName).toLowerCase();
-          const titleB = (b.title || b.specName).toLowerCase();
-          return titleA.localeCompare(titleB);
-        });
-        break;
-      case 'id-desc':
-      default:
-        sorted.sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0));
-        break;
-    }
-
-    return sorted;
-  }, [priorityFilter, searchQuery, sortBy, specs, statusFilter, tagFilter]);
-
-  if (loading) {
-    return (
-      <div className="p-4 sm:p-6">
-        <SpecListSkeleton />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="p-4 sm:p-6">
-        <Card>
-          <CardContent className="py-10 text-center space-y-3">
-            <div className="flex justify-center">
-              <AlertCircle className="h-6 w-6 text-destructive" />
-            </div>
-            <div className="text-lg font-semibold">{t('specsPage.state.errorTitle')}</div>
-            <p className="text-sm text-muted-foreground">{error || t('specsPage.state.errorDescription')}</p>
-            <Button variant="secondary" size="sm" onClick={loadSpecs} className="mt-2">
-              {t('actions.retry')}
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-[calc(100vh-3.5rem)] flex flex-col gap-4 p-4 sm:p-6 max-w-7xl mx-auto w-full">
-      <div className="flex flex-col gap-4 sticky top-14 bg-background mt-0 py-2 z-10">
-        <PageHeader
-          title={t('specsPage.title')}
-          description={t('specsPage.description')}
-          actions={(
-            <div className="flex items-center gap-1 bg-secondary/50 p-1 rounded-lg border">
-              <Button
-                variant={viewMode === 'list' ? 'secondary' : 'ghost'}
-                size="sm"
-                onClick={() => setViewMode('list')}
-                className={cn(
-                  "h-8",
-                  viewMode === 'list' && "bg-background shadow-sm"
-                )}
-                title={t('specsPage.views.listTooltip')}
-              >
-                <List className="w-4 h-4 mr-1.5" />
-                {t('specsPage.views.list')}
-              </Button>
-              <Button
-                variant={viewMode === 'board' ? 'secondary' : 'ghost'}
-                size="sm"
-                onClick={() => setViewMode('board')}
-                className={cn(
-                  "h-8",
-                  viewMode === 'board' && "bg-background shadow-sm"
-                )}
-                title={t('specsPage.views.boardTooltip')}
-              >
-                <LayoutGrid className="w-4 h-4 mr-1.5" />
-                {t('specsPage.views.board')}
-              </Button>
-            </div>
-          )}
-        />
-
-        <p className="text-sm text-muted-foreground">{t('specsPage.count', { count: filteredSpecs.length })}</p>
-
-        <SpecsFilters
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          statusFilter={statusFilter}
-          onStatusFilterChange={setStatusFilter}
-          priorityFilter={priorityFilter}
-          onPriorityFilterChange={setPriorityFilter}
-          tagFilter={tagFilter}
-          onTagFilterChange={setTagFilter}
-          sortBy={sortBy}
-          onSortByChange={(value) => setSortBy(value as SortOption)}
-          uniqueStatuses={uniqueStatuses}
-          uniquePriorities={uniquePriorities}
-          uniqueTags={uniqueTags}
-          onClearFilters={handleClearFilters}
-          totalSpecs={specs.length}
-          filteredCount={filteredSpecs.length}
-        />
-      </div>
-
-      <div className="flex-1 min-h-0">
-        {specs.length === 0 ? (
-          <EmptyState
-            icon={FileQuestion}
-            title={t('specsPage.state.noSpecsTitle')}
-            description={t('specsPage.state.noSpecsDescription')}
-            actions={(
-              <Button variant="secondary" size="sm" onClick={loadSpecs}>
-                <RefreshCcw className="h-4 w-4 mr-2" />
-                {t('specsPage.buttons.refreshList')}
-              </Button>
-            )}
-          />
-        ) : filteredSpecs.length === 0 ? (
-          <EmptyState
-            icon={FilterX}
-            title={t('specsPage.state.noFiltersTitle')}
-            description={t('specsPage.state.noFiltersDescription')}
-            actions={(
-              <div className="flex gap-2 flex-wrap justify-center">
-                <Button variant="outline" size="sm" onClick={handleClearFilters}>
-                  {t('specsNavSidebar.clearFilters')}
-                </Button>
-                <Button variant="secondary" size="sm" onClick={loadSpecs}>
-                  <RefreshCcw className="h-4 w-4 mr-2" />
-                  {t('specsPage.buttons.reloadData')}
-                </Button>
-              </div>
-            )}
-          />
-        ) : viewMode === 'list' ? (
-          <ListView specs={filteredSpecs} basePath={basePath} />
-        ) : (
-          <BoardView
-            specs={filteredSpecs}
-            onStatusChange={handleStatusChange}
-            basePath={basePath}
-          />
-        )}
-      </div>
-    </div>
-  );
-}

package/src/pages/StatsPage.tsx

@@ -1,307 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import {
-  BarChart,
-  Bar,
-  PieChart,
-  Pie,
-  Cell,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend
-} from 'recharts';
-import { AlertCircle, FileText, Clock, PlayCircle, CheckCircle2, TrendingUp } from 'lucide-react';
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@leanspec/ui-components';
-import { Link } from 'react-router-dom';
-import { StatCard } from '../components/dashboard/StatCard';
-import { api } from '../lib/api';
-import type { Stats, Spec } from '../types/api';
-import { StatsSkeleton } from '../components/shared/Skeletons';
-import { PageHeader } from '../components/shared/PageHeader';
-import { useTranslation } from 'react-i18next';
-import { useProject } from '../contexts';
-
-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 StatsPage() {
-  const [stats, setStats] = useState<Stats | null>(null);
-  const [specs, setSpecs] = useState<Spec[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const { t, i18n } = useTranslation('common');
-  const { currentProject, loading: projectLoading } = useProject();
-
-  const loadStats = useCallback(async () => {
-    if (projectLoading || !currentProject) return;
-    try {
-      setLoading(true);
-      const [statsData, specsData] = await Promise.all([api.getStats(), api.getSpecs()]);
-      setStats(statsData);
-      setSpecs(Array.isArray(specsData) ? specsData : []);
-      setError(null);
-    } catch (err) {
-      console.error('Failed to load statistics', err);
-      setError(t('statsPage.state.errorDescription'));
-    } finally {
-      setLoading(false);
-    }
-  }, [currentProject, projectLoading, t]);
-
-  useEffect(() => {
-    void loadStats();
-  }, [loadStats]);
-
-  // Prepare data for charts - must be before any conditional returns
-  const statusCounts = useMemo(() => stats?.specsByStatus.reduce<Record<string, number>>((acc: Record<string, number>, entry: { status: string; count: number }) => {
-    acc[entry.status] = entry.count;
-    return acc;
-  }, {}) || {}, [stats?.specsByStatus]);
-
-  const statusData = useMemo(() => stats?.specsByStatus.map(({ status, count }: { status: string; count: number }) => ({
-    name: t(`status.${status}`, { defaultValue: status }),
-    value: count,
-    fill: STATUS_COLORS[status as keyof typeof STATUS_COLORS] || '#6B7280',
-  })) || [], [stats?.specsByStatus, t]);
-
-  const priorityData = useMemo(() => (stats?.specsByPriority || []).map(({ priority, count }: { priority: string; count: number }) => ({
-    name: t(`priority.${priority}`, { defaultValue: priority }),
-    value: count,
-    fill: PRIORITY_COLORS[priority as keyof typeof PRIORITY_COLORS] || '#6B7280',
-  })), [stats?.specsByPriority, t]);
-
-  const topTags = useMemo(() => {
-    const tagFrequency = specs.reduce<Record<string, number>>((acc, spec) => {
-      (spec.tags || []).forEach((tag: string) => {
-        acc[tag] = (acc[tag] || 0) + 1;
-      });
-      return acc;
-    }, {});
-
-    return Object.entries(tagFrequency)
-      .sort(([, a], [, b]) => b - a)
-      .slice(0, 10)
-      .map(([tag, count]) => ({ tag, count }));
-  }, [specs]);
-
-  const trendData = useMemo(() => {
-    const monthFormatter = new Intl.DateTimeFormat(i18n.language, { year: 'numeric', month: 'short' });
-    const monthly = specs
-      .filter((spec) => spec.createdAt)
-      .reduce<Record<string, number>>((acc, spec) => {
-        try {
-          const date = typeof spec.createdAt === 'string'
-            ? new Date(spec.createdAt)
-            : spec.createdAt;
-
-          if (date instanceof Date && !isNaN(date.getTime())) {
-            const month = monthFormatter.format(date);
-            acc[month] = (acc[month] || 0) + 1;
-          }
-        } catch {
-          // Skip invalid dates
-        }
-        return acc;
-      }, {});
-
-    return Object.entries(monthly)
-      .slice(-6)
-      .map(([month, count]) => ({ month, count }));
-  }, [i18n.language, specs]);
-
-  const completionRate = stats?.completionRate.toFixed(1) || '0.0';
-
-  if (projectLoading || loading) {
-    return <StatsSkeleton />;
-  }
-
-  if (!currentProject) {
-    return (
-      <Card>
-        <CardContent className="py-10 text-center space-y-3">
-          <div className="text-lg font-semibold">{t('statsPage.state.noProjectTitle', { defaultValue: 'No project selected' })}</div>
-          <p className="text-sm text-muted-foreground">
-            {t('statsPage.state.noProjectDescription', { defaultValue: 'Select or create a project to view statistics.' })}
-          </p>
-          <Link to="/projects" className="inline-flex">
-            <Button variant="secondary" size="sm">{t('projectsPage.title', { defaultValue: 'Projects' })}</Button>
-          </Link>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (error || !stats) {
-    return (
-      <Card>
-        <CardContent className="py-10 text-center space-y-3">
-          <div className="flex justify-center">
-            <AlertCircle className="h-6 w-6 text-destructive" />
-          </div>
-          <div className="text-lg font-semibold">{t('statsPage.state.errorTitle')}</div>
-          <p className="text-sm text-muted-foreground">{error || t('statsPage.state.unknownError')}</p>
-          <Button variant="secondary" size="sm" onClick={loadStats} className="mt-2">
-            {t('actions.retry')}
-          </Button>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="space-y-6 p-6">
-      <PageHeader
-        title={t('statsPage.title')}
-        description={t('statsPage.description')}
-      />
-
-      {/* Summary Cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
-        <StatCard
-          title={t('statsPage.cards.total.title')}
-          value={stats.totalSpecs}
-          icon={FileText}
-          iconColor="text-blue-600"
-          gradientFrom="from-blue-500/10"
-        />
-        <StatCard
-          title={t('statsPage.cards.planned.title')}
-          value={statusCounts.planned || 0}
-          icon={Clock}
-          iconColor="text-purple-600"
-          gradientFrom="from-purple-500/10"
-        />
-        <StatCard
-          title={t('statsPage.cards.inProgress.title')}
-          value={statusCounts['in-progress'] || 0}
-          icon={PlayCircle}
-          iconColor="text-orange-600"
-          gradientFrom="from-orange-500/10"
-        />
-        <StatCard
-          title={t('statsPage.cards.completed.title')}
-          value={statusCounts.complete || 0}
-          icon={CheckCircle2}
-          iconColor="text-green-600"
-          gradientFrom="from-green-500/10"
-          subtext={
-            <span className="flex items-center gap-1">
-              <TrendingUp className="h-3 w-3" />
-              {completionRate}% {t('statsPage.cards.completed.subtitle')}
-            </span>
-          }
-        />
-      </div>
-
-      {/* Charts */}
-      <div className="grid gap-6 md:grid-cols-2">
-        {/* Status Distribution - Pie Chart */}
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('statsPage.charts.status.title')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={300}>
-              <PieChart>
-                <Pie
-                  data={statusData}
-                  cx="50%"
-                  cy="50%"
-                  labelLine={false}
-                  label={({ name, value }) => t('statsPage.charts.label', { name, value })}
-                  outerRadius={80}
-                  dataKey="value"
-                >
-                  {statusData.map((entry: { name: string; value: number; fill: string }, index: number) => (
-                    <Cell key={`cell-${index}`} fill={entry.fill} />
-                  ))}
-                </Pie>
-                <Tooltip />
-                <Legend />
-              </PieChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-
-        {/* Priority Distribution - Bar Chart */}
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('statsPage.charts.priority.title')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={300}>
-              <BarChart data={priorityData}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="name" />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar dataKey="value" fill="#3B82F6" />
-              </BarChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-6 md:grid-cols-2">
-        {trendData.length > 0 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>{t('statsPage.charts.creation.title')}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <ResponsiveContainer width="100%" height={300}>
-                <BarChart data={trendData}>
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis dataKey="month" />
-                  <YAxis allowDecimals={false} />
-                  <Tooltip />
-                  <Bar dataKey="count" fill="#3B82F6" />
-                </BarChart>
-              </ResponsiveContainer>
-            </CardContent>
-          </Card>
-        )}
-
-        {topTags.length > 0 && (
-          <Card>
-            <CardHeader>
-              <CardTitle>{t('statsPage.charts.topTags.title')}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                {topTags.map(({ tag, count }) => (
-                  <div key={tag} className="flex items-center justify-between gap-3">
-                    <span className="text-sm font-medium truncate">{tag}</span>
-                    <div className="flex items-center gap-2 w-40">
-                      <div className="w-full 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-xs text-muted-foreground w-6 text-right">{count}</span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/router/projectRoutes.tsx

@@ -1,36 +0,0 @@
-import type { RouteObject } from 'react-router-dom';
-
-import { SpecDetailLayout } from '../components/SpecDetailLayout';
-import { ContextPage } from '../pages/ContextPage';
-import { DashboardPage } from '../pages/DashboardPage';
-import { DependenciesPage } from '../pages/DependenciesPage';
-import { SpecDetailPage } from '../pages/SpecDetailPage';
-import { SpecsPage } from '../pages/SpecsPage';
-import { StatsPage } from '../pages/StatsPage';
-
-/**
- * Shared project-scoped route definitions.
- *
- * Both the web app (@leanspec/ui) and desktop app (@leanspec/desktop)
- * compose these under their own top-level layouts and router types
- * (browser vs hash).
- */
-export function createProjectRoutes(): RouteObject[] {
-  return [
-    { index: true, element: <DashboardPage /> },
-    {
-      path: 'specs',
-      children: [
-        { index: true, element: <SpecsPage /> },
-        {
-          element: <SpecDetailLayout />,
-          children: [{ path: ':specName', element: <SpecDetailPage /> }],
-        },
-      ],
-    },
-    { path: 'stats', element: <StatsPage /> },
-    { path: 'dependencies', element: <DependenciesPage /> },
-    { path: 'dependencies/:specName', element: <DependenciesPage /> },
-    { path: 'context', element: <ContextPage /> },
-  ];
-}

package/src/router.tsx

@@ -1,33 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import { Layout } from './components/Layout';
-import { ProjectsPage } from './pages/ProjectsPage';
-import { RootRedirect } from './components/RootRedirect';
-import { createProjectRoutes } from './router/projectRoutes';
-
-/**
- * Router configuration for @leanspec/ui (Vite SPA).
- *
- * Layout hierarchy:
- * - Layout: Navigation + MainSidebar (for all project routes including projects list)
- *
- * This nested layout approach ensures:
- * 1. Navigation bar is always present across all pages
- * 2. MainSidebar is always visible for consistent navigation
- * 3. SpecDetailLayout provides SpecsNavSidebar + outlet context
- */
-export const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <RootRedirect />,
-  },
-  {
-    path: '/projects',
-    element: <Layout />,
-    children: [{ index: true, element: <ProjectsPage /> }],
-  },
-  {
-    path: '/projects/:projectId',
-    element: <Layout />,
-    children: createProjectRoutes(),
-  },
-]);