@leanspec/ui 0.2.5 → 0.2.6-dev.20251125010539

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/specs-nav-sidebar.tsx

@@ -1,561 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import Link from 'next/link';
-import { List, type ListImperativeAPI } from 'react-window';
-import {
-  Search,
-  ChevronLeft,
-  ChevronRight,
-  X,
-  List as ListIconLucide,
-  Filter,
-} from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { StatusBadge, getStatusLabel } from '@/components/status-badge';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { cn } from '@/lib/utils';
-import { extractH1Title } from '@/lib/utils';
-import { PriorityBadge, getPriorityLabel } from './priority-badge';
-import { formatRelativeTime } from '@/lib/date-utils';
-import {
-  useSpecsSidebarSpecs,
-  useSpecsSidebarActiveSpec,
-  getSidebarScrollTop,
-  updateSidebarScrollTop,
-} from '@/lib/stores/specs-sidebar-store';
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined'
-  ? React.useLayoutEffect
-  : React.useEffect;
-import type { SidebarSpec } from '@/types/specs';
-
-interface SpecsNavSidebarProps {
-  initialSpecs?: SidebarSpec[];
-  currentSpecId?: string;
-  currentSubSpec?: string;
-  onSpecHover?: (specId: string) => void;
-}
-
-export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSpec, onSpecHover }: SpecsNavSidebarProps) {
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [statusFilter, setStatusFilter] = React.useState<string>('all');
-  const [priorityFilter, setPriorityFilter] = React.useState<string>('all');
-  const [tagFilter, setTagFilter] = React.useState<string>('all');
-  const [showFilters, setShowFilters] = React.useState(false);
-  const [isCollapsed, setIsCollapsed] = React.useState(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('specs-nav-sidebar-collapsed');
-      return saved === 'true';
-    }
-    return false;
-  });
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [mounted, setMounted] = React.useState(false);
-  const activeItemRef = React.useRef<HTMLAnchorElement>(null);
-  const scrollFrameRef = React.useRef<number | null>(null);
-  const restoredScrollRef = React.useRef(false);
-  const listRef = React.useRef<ListImperativeAPI>(null);
-  const savedScrollRef = React.useRef(0);
-  const anchoredActiveSpecRef = React.useRef(false);
-  const initialRenderRef = React.useRef(true);
-  
-  // Use selector hooks to avoid unnecessary re-renders from unrelated state changes
-  const sidebarSpecs = useSpecsSidebarSpecs();
-  const sidebarActiveSpecId = useSpecsSidebarActiveSpec();
-  
-  // Memoize specs to prevent unnecessary recalculations downstream
-  const cachedSpecs = React.useMemo(
-    () => (sidebarSpecs.length > 0 ? sidebarSpecs : initialSpecs),
-    [sidebarSpecs, initialSpecs]
-  );
-  
-  const resolvedCurrentSpecId = currentSpecId || sidebarActiveSpecId || '';
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Update CSS variable for page width calculations and persist to localStorage
-  React.useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--specs-nav-sidebar-width',
-      isCollapsed ? '0px' : '280px'
-    );
-    localStorage.setItem('specs-nav-sidebar-collapsed', String(isCollapsed));
-  }, [isCollapsed]);
-
-  // Close mobile menu on route change
-  React.useEffect(() => {
-    setMobileOpen(false);
-  }, [resolvedCurrentSpecId, currentSubSpec]);
-
-  const filteredSpecs = React.useMemo(() => {
-    let specs = cachedSpecs;
-
-    // Apply search query
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      specs = specs.filter(
-        (spec) =>
-          spec.title?.toLowerCase().includes(query) ||
-          spec.specName.toLowerCase().includes(query) ||
-          spec.specNumber?.toString().includes(query)
-      );
-    }
-
-    // Apply status filter
-    if (statusFilter !== 'all') {
-      specs = specs.filter((spec) => spec.status === statusFilter);
-    }
-
-    // Apply priority filter
-    if (priorityFilter !== 'all') {
-      specs = specs.filter((spec) => spec.priority === priorityFilter);
-    }
-
-    // Apply tag filter
-    if (tagFilter !== 'all') {
-      specs = specs.filter((spec) => spec.tags?.includes(tagFilter));
-    }
-
-    console.debug(specs);
-    return specs;
-  }, [cachedSpecs, searchQuery, statusFilter, priorityFilter, tagFilter]);
-
-  // Get all unique tags from all specs
-  const allTags = React.useMemo(() => {
-    const tagsSet = new Set<string>();
-    cachedSpecs.forEach((spec) => {
-      spec.tags?.forEach((tag) => tagsSet.add(tag));
-    });
-    return Array.from(tagsSet).sort();
-  }, [cachedSpecs]);
-
-  // Check if any filters are active
-  const hasActiveFilters = statusFilter !== 'all' || priorityFilter !== 'all' || tagFilter !== 'all';
-
-  // Reset all filters
-  const resetFilters = () => {
-    setStatusFilter('all');
-    setPriorityFilter('all');
-    setTagFilter('all');
-  };
-
-  // Sort specs by number descending (newest first)
-  const sortedSpecs = React.useMemo(() => {
-    return [...filteredSpecs].sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0));
-  }, [filteredSpecs]);
-
-  // Persist and restore sidebar scroll position without triggering component re-renders
-  useIsomorphicLayoutEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    let rafId: number | null = null;
-    let cleanup: (() => void) | null = null;
-
-    savedScrollRef.current = getSidebarScrollTop();
-    anchoredActiveSpecRef.current = savedScrollRef.current > 0;
-
-    const setupScrollPersistence = () => {
-      const listElement = listRef.current?.element;
-
-      if (!listElement) {
-        rafId = window.requestAnimationFrame(setupScrollPersistence);
-        return;
-      }
-
-      if (!restoredScrollRef.current) {
-        if (savedScrollRef.current > 0) {
-          listElement.scrollTop = savedScrollRef.current;
-        }
-        restoredScrollRef.current = true;
-      }
-
-      const handleScroll = () => {
-        if (scrollFrameRef.current !== null) {
-          return;
-        }
-        scrollFrameRef.current = window.requestAnimationFrame(() => {
-          scrollFrameRef.current = null;
-          savedScrollRef.current = listElement.scrollTop;
-          updateSidebarScrollTop(listElement.scrollTop);
-        });
-      };
-
-      listElement.addEventListener('scroll', handleScroll, { passive: true });
-      cleanup = () => {
-        listElement.removeEventListener('scroll', handleScroll);
-      };
-    };
-
-    setupScrollPersistence();
-
-    return () => {
-      if (cleanup) {
-        cleanup();
-      }
-      if (rafId !== null) {
-        window.cancelAnimationFrame(rafId);
-      }
-      if (scrollFrameRef.current !== null) {
-        window.cancelAnimationFrame(scrollFrameRef.current);
-        scrollFrameRef.current = null;
-      }
-    };
-  }, []);
-
-  // Ensure the active spec is visible when first loading without a stored scroll position
-  useIsomorphicLayoutEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    if (!initialRenderRef.current) {
-      return;
-    }
-
-    initialRenderRef.current = false;
-
-    if (anchoredActiveSpecRef.current) {
-      return;
-    }
-
-    if (!resolvedCurrentSpecId) {
-      return;
-    }
-
-    let rafId: number | null = null;
-
-    const tryAnchorScroll = () => {
-      if (anchoredActiveSpecRef.current) {
-        return;
-      }
-
-      if (!restoredScrollRef.current || !listRef.current) {
-        rafId = window.requestAnimationFrame(tryAnchorScroll);
-        return;
-      }
-
-      const targetIndex = sortedSpecs.findIndex((spec) => spec.id === resolvedCurrentSpecId);
-      if (targetIndex === -1) {
-        return;
-      }
-
-      anchoredActiveSpecRef.current = true;
-      listRef.current.scrollToRow({ index: targetIndex, align: 'center' });
-    };
-
-    tryAnchorScroll();
-
-    return () => {
-      if (rafId !== null) {
-        window.cancelAnimationFrame(rafId);
-      }
-    };
-  }, [sortedSpecs, resolvedCurrentSpecId]);
-
-  // Expose function for mobile toggle
-  React.useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    window.toggleSpecsSidebar = () => setMobileOpen(prev => !prev);
-    return () => {
-      window.toggleSpecsSidebar = undefined;
-    };
-  }, []);
-
-  // Virtual list row renderer (rowProps will be passed by react-window)
-  const RowComponent = React.useCallback((rowProps: { index: number; style: React.CSSProperties }) => {
-    const { index, style } = rowProps;
-    const spec = sortedSpecs[index];
-    const isCurrentSpec = spec.id === resolvedCurrentSpecId;
-
-    // Extract H1 title, fallback to title or name
-    const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
-    const displayTitle = h1Title || spec.title || spec.specName;
-
-    return (
-      <div style={style} className="px-1">
-        <div className="mb-0.5">
-          {/* Main spec item */}
-          <div className="flex items-center gap-0.5">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  ref={isCurrentSpec && !currentSubSpec ? activeItemRef : null}
-                  href={`/specs/${spec.specNumber || spec.id}`}
-                  onMouseEnter={() => onSpecHover?.(spec.specNumber?.toString() || spec.id)}
-                  className={cn(
-                    'w-full flex flex-col gap-1 p-1.5 rounded-md text-sm transition-colors',
-                    isCurrentSpec
-                      ? 'bg-accent text-accent-foreground font-medium'
-                      : 'hover:bg-accent/50',
-                  )}
-                >
-                  <div className="flex items-center gap-1.5">
-                    {spec.specNumber && (
-                      <span className="text-xs font-mono text-muted-foreground shrink-0">
-                        #{spec.specNumber.toString().padStart(3, '0')}
-                      </span>
-                    )}
-                    <span className="truncate text-xs leading-relaxed">{displayTitle}</span>
-                  </div>
-                  <div className="flex items-center gap-1.5 flex-wrap">
-                    {spec.status && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <div>
-                            <StatusBadge status={spec.status} iconOnly className="text-[10px] scale-90" />
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipContent side="right">
-                          {getStatusLabel(spec.status)}
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                    {spec.priority && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <div>
-                            <PriorityBadge priority={spec.priority} iconOnly className="text-[10px] scale-90" />
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipContent side="right">
-                          {getPriorityLabel(spec.priority)}
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                    {typeof spec.subSpecsCount === 'number' && spec.subSpecsCount > 0 && (
-                      <span className="text-[10px] text-muted-foreground">
-                        +{spec.subSpecsCount} files
-                      </span>
-                    )}
-                    {spec.updatedAt && (
-                      <span className="text-[10px] text-muted-foreground">
-                        {formatRelativeTime(spec.updatedAt)}
-                      </span>
-                    )}
-                  </div>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right" className="max-w-[300px]">
-                <div className="space-y-1">
-                  <div className="font-semibold">{displayTitle}</div>
-                  <div className="text-xs text-muted-foreground">{spec.specName}</div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    );
-  }, [sortedSpecs, resolvedCurrentSpecId, currentSubSpec, onSpecHover]);
-
-  // Calculate list height
-  const listHeight = React.useMemo(() => {
-    // Get viewport height minus header (3.5rem = 56px) and search/filter area (~180px)
-    if (typeof window !== 'undefined') {
-      return window.innerHeight - 56 - 180;
-    }
-    return 600; // fallback
-  }, []);
-
-  // Memoized List component to prevent unnecessary re-renders
-  const MemoizedList = React.useMemo(() => {
-    return React.memo(List<Record<string, never>>);
-  }, []);
-
-  return (
-    <TooltipProvider delayDuration={700}>
-      {/* Mobile overlay backdrop */}
-      {mobileOpen && (
-        <div 
-          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-          onClick={() => setMobileOpen(false)}
-        />
-      )}
-
-      <div className="relative flex-shrink-0">
-        <aside className={cn(
-          "sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border bg-background flex flex-col overflow-hidden transition-all duration-300",
-          // Desktop behavior
-          "hidden lg:flex",
-          mounted && isCollapsed ? "lg:w-0 lg:border-r-0" : "lg:w-[280px]",
-          // Mobile behavior - show as overlay when open
-          mobileOpen && "fixed left-0 top-14 z-50 flex w-[280px]"
-        )}>
-          <div className="p-4 border-b border-border">
-            <div className="flex items-center justify-between mb-3">
-              <h2 className="font-semibold text-sm">Specifications</h2>
-              <div className="flex items-center gap-1">
-                {/* Filter toggle button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant={showFilters || hasActiveFilters ? "default" : "ghost"}
-                      size="sm"
-                      onClick={() => setShowFilters(!showFilters)}
-                      className="h-6 w-6 p-0"
-                    >
-                      <Filter className="h-4 w-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">
-                    {showFilters ? 'Hide filters' : 'Show filters'}
-                  </TooltipContent>
-                </Tooltip>
-                {/* Mobile close button */}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setMobileOpen(false)}
-                  className="h-6 w-6 p-0 lg:hidden"
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-                {/* Desktop collapse button */}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setIsCollapsed(true)}
-                  className="h-6 w-6 p-0 hidden lg:flex lg:items-center lg:justify-center"
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-
-            {/* Filter controls */}
-            {showFilters && (
-              <div className="space-y-2 mb-3 pb-3 border-b border-border">
-                <div className="flex items-center justify-between">
-                  <span className="text-xs font-medium text-muted-foreground">Filters</span>
-                  {hasActiveFilters && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={resetFilters}
-                      className="h-5 text-xs px-2 py-0"
-                    >
-                      Clear
-                    </Button>
-                  )}
-                </div>
-                
-                <Select value={statusFilter} onValueChange={setStatusFilter}>
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="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="h-8 text-xs">
-                    <SelectValue placeholder="Priority" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Priority</SelectItem>
-                    <SelectItem value="low">Low</SelectItem>
-                    <SelectItem value="medium">Medium</SelectItem>
-                    <SelectItem value="high">High</SelectItem>
-                    <SelectItem value="critical">Critical</SelectItem>
-                  </SelectContent>
-                </Select>
-
-                {allTags.length > 0 && (
-                  <Select value={tagFilter} onValueChange={setTagFilter}>
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue placeholder="Tag" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">All Tags</SelectItem>
-                      {allTags.map((tag) => (
-                        <SelectItem key={tag} value={tag}>
-                          {tag}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              </div>
-            )}
-
-            <div className="relative">
-              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search specs..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-8 h-9 border-border"
-              />
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-hidden">
-            {sortedSpecs.length === 0 ? (
-              <div className="text-center py-8 text-sm text-muted-foreground">
-                No specs found
-              </div>
-            ) : (
-              <MemoizedList
-                listRef={listRef}
-                defaultHeight={listHeight}
-                rowCount={sortedSpecs.length}
-                rowHeight={72}
-                overscanCount={5}
-                rowComponent={RowComponent}
-                rowProps={{}}
-              />
-            )}
-          </div>
-        </aside>
-
-        {/* Floating toggle button when collapsed (desktop only) */}
-        {mounted && isCollapsed && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setIsCollapsed(false)}
-            className="hidden lg:items-center lg:justify-center lg:flex h-6 w-6 p-0 fixed z-50 top-20 -translate-y-1 -translate-x-1/2 left-[calc(var(--main-sidebar-width,240px))] bg-background border"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        )}
-
-        {/* Mobile floating toggle button - matches BackToTop/TOC style */}
-        <Button
-          onClick={() => setMobileOpen(true)}
-          size="icon"
-          className="lg:hidden fixed bottom-6 left-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
-          aria-label="Show specifications list"
-        >
-          <ListIconLucide className="h-5 w-5" />
-        </Button>
-      </div>
-    </TooltipProvider>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/status-badge.tsx

@@ -1,53 +0,0 @@
-/**
- * Status badge component with icons
- */
-
-import { Clock, PlayCircle, CheckCircle2, Archive } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { cn } from '@/lib/utils';
-
-interface StatusBadgeProps {
-  status: string;
-  className?: string;
-  iconOnly?: boolean;
-}
-
-const statusConfig = {
-  'planned': {
-    icon: Clock,
-    label: 'Planned',
-    className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
-  },
-  'in-progress': {
-    icon: PlayCircle,
-    label: 'In Progress',
-    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
-  },
-  'complete': {
-    icon: CheckCircle2,
-    label: 'Complete',
-    className: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
-  },
-  'archived': {
-    icon: Archive,
-    label: 'Archived',
-    className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
-  }
-};
-
-export function StatusBadge({ status, className, iconOnly = false }: StatusBadgeProps) {
-  const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.planned;
-  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 getStatusLabel(status: string): string {
-  const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.planned;
-  return config.label;
-}