@leanspec/ui 0.2.7 → 0.2.8

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/sub-spec-tabs.tsx

@@ -1,143 +0,0 @@
-/**
- * Sub-spec tabs component for spec detail page
- */
-'use client';
-
-import { useState } from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Card } from '@/components/ui/card';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
-import { cn } from '@/lib/utils';
-import { FileText, Palette, Code, TestTube, CheckSquare, Wrench, Map, GitBranch, BookOpen } from 'lucide-react';
-
-export interface SubSpec {
-  name: string;
-  file: string;
-  iconName: string;
-  color: string;
-  content: string;
-}
-
-const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
-  FileText,
-  Palette,
-  Code,
-  TestTube,
-  CheckSquare,
-  Wrench,
-  Map,
-  GitBranch,
-  BookOpen,
-};
-
-interface SubSpecTabsProps {
-  mainContent: string;
-  subSpecs: SubSpec[];
-}
-
-export function SubSpecTabs({ mainContent, subSpecs }: SubSpecTabsProps) {
-  const [activeTab, setActiveTab] = useState('readme');
-
-  // If no sub-specs, just render main content
-  if (subSpecs.length === 0) {
-    return (
-      <article className="prose prose-slate dark:prose-invert max-w-none">
-        <ReactMarkdown 
-          remarkPlugins={[remarkGfm]}
-          rehypePlugins={[rehypeHighlight]}
-        >
-          {mainContent}
-        </ReactMarkdown>
-      </article>
-    );
-  }
-
-  // Show overview tab listing all sub-specs if there are many
-  const showOverview = subSpecs.length > 0;
-
-  return (
-    <div className="space-y-4">
-      {showOverview && activeTab === 'readme' && subSpecs.length > 2 && (
-        <Card className="p-4 bg-muted/50 border-l-4 border-l-primary">
-          <div className="flex items-start gap-3">
-            <BookOpen className="h-5 w-5 text-primary mt-0.5" />
-            <div>
-              <h4 className="font-semibold text-sm mb-2">This spec has multiple sections</h4>
-              <p className="text-sm text-muted-foreground mb-3">
-                Use the tabs below to navigate between the main overview and detailed sections:
-              </p>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                {subSpecs.map((subSpec) => {
-                  const Icon = ICON_MAP[subSpec.iconName];
-                  return (
-                    <button
-                      key={subSpec.file}
-                      onClick={() => setActiveTab(subSpec.name.toLowerCase())}
-                      className="flex items-center gap-2 p-2 text-left hover:bg-accent rounded-md transition-colors text-sm"
-                    >
-                      {Icon && <Icon className={cn("h-4 w-4", subSpec.color)} />}
-                      <span className="font-medium">{subSpec.name}</span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </Card>
-      )}
-
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="border-b mb-6">
-          <TabsList className="h-auto p-0 bg-transparent w-full justify-start">
-            <TabsTrigger 
-              value="readme" 
-              className="flex items-center gap-2 data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-4 py-3"
-            >
-              <FileText className="h-4 w-4" />
-              Overview
-            </TabsTrigger>
-            {subSpecs.map((subSpec) => {
-              const Icon = ICON_MAP[subSpec.iconName];
-              return (
-                <TabsTrigger 
-                  key={subSpec.file} 
-                  value={subSpec.name.toLowerCase()}
-                  className="flex items-center gap-2 data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-4 py-3"
-                >
-                  {Icon && <Icon className={cn("h-4 w-4", subSpec.color)} />}
-                  {subSpec.name}
-                </TabsTrigger>
-              );
-            })}
-          </TabsList>
-        </div>
-        
-        <TabsContent value="readme" className="mt-0">
-          <article className="prose prose-slate dark:prose-invert max-w-none">
-            <ReactMarkdown 
-              remarkPlugins={[remarkGfm]}
-              rehypePlugins={[rehypeHighlight]}
-            >
-              {mainContent}
-            </ReactMarkdown>
-          </article>
-        </TabsContent>
-        
-        {subSpecs.map((subSpec) => (
-          <TabsContent key={subSpec.file} value={subSpec.name.toLowerCase()} className="mt-0">
-            <article className="prose prose-slate dark:prose-invert max-w-none">
-              <ReactMarkdown 
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeHighlight]}
-              >
-                {subSpec.content}
-              </ReactMarkdown>
-            </article>
-          </TabsContent>
-        ))}
-      </Tabs>
-    </div>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/table-of-contents.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { List, ChevronRight } from 'lucide-react';
-import GithubSlugger from 'github-slugger';
-import { cn } from '@/lib/utils';
-
-interface TOCItem {
-  id: string;
-  text: string;
-  level: number;
-}
-
-interface TableOfContentsProps {
-  content: string;
-}
-
-/**
- * Extract headings from markdown content
- */
-function extractHeadings(markdown: string): TOCItem[] {
-  if (!markdown) return [];
-
-  const headings: TOCItem[] = [];
-  const lines = markdown.split('\n');
-  let inCodeBlock = false;
-  const slugger = new GithubSlugger();
-
-  for (const line of lines) {
-    // Track code blocks
-    if (line.trim().startsWith('```')) {
-      inCodeBlock = !inCodeBlock;
-      continue;
-    }
-
-    // Skip lines inside code blocks
-    if (inCodeBlock) continue;
-
-    // Match headings (## Heading or ### Heading, skip # H1)
-    const match = line.match(/^(#{2,6})\s+(.+)$/);
-    if (match) {
-      const level = match[1].length;
-      const text = match[2].trim();
-      const id = slugger.slug(text);
-
-      headings.push({ id, text, level });
-    }
-  }
-
-  return headings;
-}
-
-export function TableOfContents({ content }: TableOfContentsProps) {
-  const [open, setOpen] = React.useState(false);
-  const headings = React.useMemo(() => extractHeadings(content), [content]);
-
-  // If no headings, don't render
-  if (headings.length === 0) return null;
-
-  const handleHeadingClick = (id: string) => {
-    setOpen(false);
-    // Small delay to allow dialog to close before scrolling
-    setTimeout(() => {
-      const element = document.getElementById(id);
-      if (element) {
-        // Scroll with offset for sticky header (top navbar + spec header)
-        const headerOffset = 180; // Adjust based on your header height
-        const elementPosition = element.getBoundingClientRect().top;
-        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: 'smooth'
-        });
-
-        if (window.history.replaceState) {
-          window.history.replaceState(null, '', `#${id}`);
-        } else {
-          window.location.hash = id;
-        }
-      }
-    }, 100);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          size="icon"
-          className="fixed bottom-24 right-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
-          aria-label="Table of contents"
-        >
-          <List className="h-5 w-5" />
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>Table of Contents</DialogTitle>
-        </DialogHeader>
-        <nav className="space-y-1">
-          {headings.map((heading, index) => (
-            <button
-              key={`${heading.id}-${index}`}
-              onClick={() => handleHeadingClick(heading.id)}
-              className={cn(
-                'w-full text-left px-2 py-1.5 text-sm rounded-md hover:bg-muted transition-colors flex items-start gap-2 group',
-                heading.level === 2 && 'font-medium',
-                heading.level === 3 && 'pl-6',
-                heading.level === 4 && 'pl-10',
-                heading.level === 5 && 'pl-14',
-                heading.level === 6 && 'pl-18'
-              )}
-            >
-              <ChevronRight className="h-4 w-4 mt-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-              <span className="flex-1">{heading.text}</span>
-            </button>
-          ))}
-        </nav>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/theme-provider.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/theme-toggle.tsx

@@ -1,37 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return (
-      <Button variant="ghost" size="icon" disabled aria-label="Toggle theme">
-        <Sun className="h-5 w-5" />
-      </Button>
-    )
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      aria-label="Toggle theme"
-    >
-      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-    </Button>
-  )
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/ui/avatar.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

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

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/ui/breadcrumb.tsx

@@ -1,110 +0,0 @@
-import * as React from "react"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ className, ...props }, ref) => (
-  <a
-    ref={ref}
-    className={cn("transition-colors hover:text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/ui/button.tsx

@@ -1,57 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/ui/card.tsx

@@ -1,76 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border border-gray-200 dark:border-gray-800 bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }