@leanspec/ui 0.2.6 → 0.2.7-dev.20251126090633

package/.next/standalone/packages/ui/src/components/mermaid-diagram.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from 'next-themes';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { Code2, AlertCircle } from 'lucide-react';
+
+interface MermaidDiagramProps {
+  code: string;
+}
+
+// Counter for generating unique IDs
+let diagramIdCounter = 0;
+
+export function MermaidDiagram({ code }: MermaidDiagramProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = React.useState<string>('');
+  const [error, setError] = React.useState<string | null>(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [showSource, setShowSource] = React.useState(false);
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  // Track mount state for SSR safety
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Render the mermaid diagram
+  React.useEffect(() => {
+    if (!mounted) return;
+
+    const renderDiagram = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Dynamically import mermaid to avoid SSR issues
+        const mermaid = (await import('mermaid')).default;
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+          // Use 'strict' for security - specs are developer-authored
+          // but we still want to prevent potential XSS from code blocks
+          securityLevel: 'strict',
+          fontFamily: 'inherit',
+        });
+
+        // Generate unique ID for the diagram using counter
+        const id = `mermaid-${Date.now()}-${++diagramIdCounter}`;
+        const cleanedCode = code.trim();
+
+        const { svg: renderedSvg } = await mermaid.render(id, cleanedCode);
+        setSvg(renderedSvg);
+        setError(null);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Diagram render failed';
+        setError(errorMessage);
+        setSvg('');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    renderDiagram();
+  }, [code, resolvedTheme, mounted]);
+
+  // Show skeleton during SSR or initial mount
+  if (!mounted) {
+    return <DiagramSkeleton />;
+  }
+
+  // Show loading state
+  if (isLoading) {
+    return <DiagramSkeleton />;
+  }
+
+  // Show error state with fallback to source
+  if (error) {
+    return (
+      <div className="my-4 border border-destructive/50 bg-destructive/10 rounded-md overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-2 bg-destructive/20 border-b border-destructive/30">
+          <AlertCircle className="h-4 w-4 text-destructive" />
+          <span className="text-sm font-medium text-destructive">Diagram error</span>
+        </div>
+        <div className="p-4">
+          <p className="text-sm text-destructive mb-3">{error}</p>
+          <pre className="text-xs overflow-x-auto bg-muted/50 p-3 rounded border">
+            <code>{code}</code>
+          </pre>
+        </div>
+      </div>
+    );
+  }
+
+  // Show rendered diagram with source toggle
+  return (
+    <div className="my-4 border rounded-md overflow-hidden">
+      <div className="flex items-center justify-end px-3 py-1.5 bg-muted/30 border-b">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setShowSource(!showSource)}
+          className="h-7 text-xs"
+        >
+          <Code2 className="h-3.5 w-3.5 mr-1.5" />
+          {showSource ? 'View Diagram' : 'View Source'}
+        </Button>
+      </div>
+
+      {showSource ? (
+        <pre className="text-xs overflow-x-auto p-4 bg-muted/20">
+          <code className="language-mermaid">{code}</code>
+        </pre>
+      ) : (
+        <div
+          ref={containerRef}
+          className="flex justify-center overflow-x-auto p-4 bg-background"
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      )}
+    </div>
+  );
+}
+
+function DiagramSkeleton() {
+  return (
+    <div className="my-4 border rounded-md overflow-hidden">
+      <div className="flex items-center justify-end px-3 py-1.5 bg-muted/30 border-b">
+        <Skeleton className="h-7 w-24" />
+      </div>
+      <div className="flex justify-center items-center p-8">
+        <Skeleton className="h-48 w-full max-w-md" />
+      </div>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/components/spec-detail-client.tsx

@@ -21,6 +21,7 @@ import { MarkdownLink } from '@/components/markdown-link';
 import { TableOfContents, TableOfContentsSidebar } from '@/components/table-of-contents';
 import { BackToTop } from '@/components/back-to-top';
 import { SpecDependencyGraph } from '@/components/spec-dependency-graph';
+import { MermaidDiagram } from '@/components/mermaid-diagram';
 import {
   Dialog,
   DialogContent,
@@ -43,7 +44,8 @@ import {
   Home,
   TrendingUp,
   Clock,
-  Maximize2
+  Maximize2,
+  List as ListIcon
 } from 'lucide-react';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
@@ -216,12 +218,29 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
       <header ref={headerRef} className="lg:sticky lg:top-14 lg:z-20 border-b bg-card">
         <div className="px-3 sm:px-6 py-3 sm:py-4">
           {/* Line 1: Spec number + H1 Title */}
-          <h1 className="text-xl sm:text-2xl font-bold tracking-tight mb-2 sm:mb-3">
-            {spec.specNumber && (
-              <span className="text-muted-foreground">#{spec.specNumber.toString().padStart(3, '0')} </span>
-            )}
-            {displayTitle}
-          </h1>
+          <div className="flex items-start justify-between gap-2 mb-2 sm:mb-3">
+            <h1 className="text-xl sm:text-2xl font-bold tracking-tight">
+              {spec.specNumber && (
+                <span className="text-muted-foreground">#{spec.specNumber.toString().padStart(3, '0')} </span>
+              )}
+              {displayTitle}
+            </h1>
+            
+            {/* Mobile Specs List Toggle */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="lg:hidden h-8 w-8 -mr-2 shrink-0 text-muted-foreground"
+              onClick={() => {
+                if (typeof window !== 'undefined' && window.toggleSpecsSidebar) {
+                  window.toggleSpecsSidebar();
+                }
+              }}
+            >
+              <ListIcon className="h-5 w-5" />
+              <span className="sr-only">Toggle specs list</span>
+            </Button>
+          </div>
           
           {/* Line 2: Status, Priority, Tags, Actions */}
           <div className="flex flex-wrap items-center gap-2">
@@ -393,6 +412,27 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
                 rehypePlugins={[rehypeHighlight, rehypeSlug]}
                 components={{
                   a: (props) => <MarkdownLink {...props} currentSpecNumber={spec.specNumber || undefined} />,
+                  pre: ({ children, ...props }) => {
+                    // Safely get the first child element
+                    const childArray = React.Children.toArray(children);
+                    const firstChild = childArray[0];
+                    
+                    // Check if this is a mermaid code block
+                    if (
+                      React.isValidElement(firstChild) &&
+                      firstChild.type === 'code' &&
+                      typeof (firstChild.props as { className?: string }).className === 'string' &&
+                      (firstChild.props as { className?: string }).className?.includes('language-mermaid')
+                    ) {
+                      const codeProps = firstChild.props as { children?: React.ReactNode };
+                      const code = typeof codeProps.children === 'string'
+                        ? codeProps.children
+                        : '';
+                      return <MermaidDiagram code={code} />;
+                    }
+                    // Default pre rendering
+                    return <pre {...props}>{children}</pre>;
+                  },
                 }}
               >
                 {displayContent}

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

@@ -395,12 +395,12 @@ export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSp
 
       <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",
+          "border-r border-border bg-background flex flex-col overflow-hidden transition-all duration-300",
           // Desktop behavior
-          "hidden lg:flex",
+          "hidden lg:flex lg:sticky lg:top-14 lg:h-[calc(100vh-3.5rem)]",
           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]"
+          mobileOpen && "fixed inset-y-0 left-0 z-[60] flex w-[280px]"
         )}>
           <div className="p-4 border-b border-border">
             <div className="flex items-center justify-between mb-3">
@@ -545,16 +545,6 @@ export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSp
             <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/src/contexts/project-context.tsx

@@ -69,15 +69,15 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
       if (!currentProject && data.projects.length > 0) {
         const projectToSet = initialProjectId 
           ? data.projects.find((p: LocalProject) => p.id === initialProjectId)
-          : data.recentProjects[0] || data.projects[0];
+          : data.recentProjects?.[0] || data.projects[0];
         
         if (projectToSet) {
           setCurrentProject(projectToSet);
         }
       }
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Error fetching projects:', err);
-      setError(err.message || 'Failed to load projects');
+      setError(err instanceof Error ? err.message : 'Failed to load projects');
     } finally {
       setIsLoading(false);
     }
@@ -96,9 +96,9 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
 
       // Refresh recent projects list
       await refreshProjects();
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Error switching project:', err);
-      setError(err.message || 'Failed to switch project');
+      setError(err instanceof Error ? err.message : 'Failed to switch project');
       throw err;
     }
   }, [refreshProjects]);
@@ -123,9 +123,9 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
       const data = await response.json();
       await refreshProjects();
       return data.project;
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Error adding project:', err);
-      setError(err.message || 'Failed to add project');
+      setError(err instanceof Error ? err.message : 'Failed to add project');
       throw err;
     }
   }, [refreshProjects]);
@@ -148,9 +148,9 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
       }
 
       await refreshProjects();
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Error removing project:', err);
-      setError(err.message || 'Failed to remove project');
+      setError(err instanceof Error ? err.message : 'Failed to remove project');
       throw err;
     }
   }, [currentProject, projects, refreshProjects]);
@@ -169,9 +169,9 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
       }
 
       await refreshProjects();
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Error toggling favorite:', err);
-      setError(err.message || 'Failed to toggle favorite');
+      setError(err instanceof Error ? err.message : 'Failed to toggle favorite');
       throw err;
     }
   }, [refreshProjects]);
@@ -193,9 +193,9 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
       }
 
       await refreshProjects();
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Error updating project:', err);
-      setError(err.message || 'Failed to update project');
+      setError(err instanceof Error ? err.message : 'Failed to update project');
       throw err;
     }
   }, [refreshProjects]);
@@ -203,7 +203,7 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
   // Load projects on mount
   useEffect(() => {
     refreshProjects();
-  }, []);
+  }, [refreshProjects]);
 
   const value: ProjectContextType = {
     mode,