specra 0.1.0

package/src/components/docs/steps.tsx

@@ -0,0 +1,29 @@
+interface StepsProps {
+  children: React.ReactNode
+}
+
+interface StepProps {
+  title: string
+  children: React.ReactNode
+}
+
+export function Steps({ children }: StepsProps) {
+  return (
+    <div className="my-6 ml-4 space-y-6 [counter-reset:step]">
+      {children}
+    </div>
+  )
+}
+
+export function Step({ title, children }: StepProps) {
+  return (
+    <div className="relative pl-8 pb-6 border-l-2 border-border last:border-l-0 last:pb-0 [counter-increment:step] before:content-[counter(step)] before:absolute before:left-0 before:-translate-x-1/2 before:w-8 before:h-8 before:rounded-full before:bg-primary before:text-primary-foreground before:flex before:items-center before:justify-center before:text-sm before:font-semibold before:z-10">
+      <div className="mb-2">
+        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+      </div>
+      <div className="prose prose-sm dark:prose-invert max-w-none [&>*:last-child]:mb-0">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/docs/tab-context.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { createContext, useContext, useState, ReactNode } from "react"
+
+interface TabContextType {
+  activeTabGroup: string
+  setActiveTabGroup: (tabId: string) => void
+}
+
+const TabContext = createContext<TabContextType | undefined>(undefined)
+
+export function TabProvider({ children, defaultTab }: { children: ReactNode; defaultTab: string }) {
+  const [activeTabGroup, setActiveTabGroup] = useState(defaultTab)
+
+  return (
+    <TabContext.Provider value={{ activeTabGroup, setActiveTabGroup }}>
+      {children}
+    </TabContext.Provider>
+  )
+}
+
+export function useTabContext() {
+  const context = useContext(TabContext)
+  if (!context) {
+    throw new Error("useTabContext must be used within TabProvider")
+  }
+  return context
+}

package/src/components/docs/tab-groups.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { Icon } from "./icon"
+import type { TabGroup } from "@/lib/config.types"
+
+interface TabGroupsProps {
+  tabGroups: TabGroup[]
+  activeTabId?: string
+  onTabChange?: (tabId: string) => void
+}
+
+export function TabGroups({ tabGroups, activeTabId, onTabChange }: TabGroupsProps) {
+  const activeTab = activeTabId || tabGroups[0]?.id || ""
+
+  const handleTabChange = (tabId: string) => {
+    onTabChange?.(tabId)
+  }
+
+  if (!tabGroups || tabGroups.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="sticky top-16 z-30 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto px-6">
+        <nav className="flex gap-1 overflow-x-auto no-scrollbar" aria-label="Documentation tabs">
+          {tabGroups.map((tab) => {
+            const isActive = tab.id === activeTab
+
+            return (
+              <button
+                key={tab.id}
+                onClick={() => handleTabChange(tab.id)}
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-all border-b-2 ${
+                  isActive
+                    ? "border-primary text-primary"
+                    : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
+                }`}
+                aria-current={isActive ? "page" : undefined}
+              >
+                {tab.icon && <Icon icon={tab.icon} size={16} className="shrink-0" />}
+                {tab.label}
+              </button>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}

package/src/components/docs/table-of-contents.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import type { SpecraConfig } from "@/lib/config"
+
+interface TOCItem {
+  id: string
+  title: string
+  level: number
+}
+
+interface TableOfContentsProps {
+  items: TOCItem[]
+  config: SpecraConfig
+}
+
+export function TableOfContents({ items, config }: TableOfContentsProps) {
+  const [activeId, setActiveId] = useState<string>("")
+
+  // Check if TOC should be shown
+  if (!config.navigation?.showTableOfContents) {
+    return null
+  }
+
+  // Filter items by max depth
+  const maxDepth = config.navigation?.tocMaxDepth || 3
+  const filteredItems = items.filter(item => item.level <= maxDepth)
+
+  // Check if tab groups are configured
+  const hasTabGroups = config.navigation?.tabGroups && config.navigation.tabGroups.length > 0
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: "-80px 0px -80% 0px" },
+    )
+
+    filteredItems.forEach((item) => {
+      const element = document.getElementById(item.id)
+      if (element) {
+        observer.observe(element)
+      }
+    })
+
+    return () => observer.disconnect()
+  }, [filteredItems])
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    e.preventDefault()
+    const element = document.getElementById(id)
+    if (element) {
+      const offset = 100 // Offset for fixed header
+      const elementPosition = element.getBoundingClientRect().top
+      const offsetPosition = elementPosition + window.scrollY - offset
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth",
+      })
+      
+      // Update URL without jumping
+      window.history.replaceState(null, "", `#${id}`)
+      
+      // Manually set active ID after scroll
+      setActiveId(id)
+    }
+  }
+
+  // Adjust top position based on whether tabs are present
+  const stickyTop = hasTabGroups ? "top-[7.5rem]" : "top-24"
+  const maxHeight = hasTabGroups ? "max-h-[calc(100vh-10rem)]" : "max-h-[calc(100vh-7rem)]"
+
+  return (
+    <aside className={`w-64 hidden xl:block shrink-0 sticky ${stickyTop} self-start`}>
+      {filteredItems.length > 0 && (
+        <div className={`${maxHeight} overflow-y-auto bg-muted/30 dark:bg-muted/10 rounded-2xl p-4 border border-border/50`}>
+          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">On this page</h3>
+          <nav className="space-y-1">
+            {filteredItems.map((item) => (
+              <a
+                key={item.id}
+                href={`#${item.id}`}
+                onClick={(e) => handleClick(e, item.id)}
+                className={`block text-sm transition-all cursor-pointer rounded-xl px-3 py-2 ${item.level === 3 ? "ml-3" : ""} ${
+                  activeId === item.id
+                    ? "text-primary font-medium"
+                    : "text-foreground hover:bg-accent/50"
+                }`}
+              >
+                {item.title}
+              </a>
+            ))}
+          </nav>
+        </div>
+      )}
+    </aside>
+  )
+}

package/src/components/docs/tabs.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import React, { useState, Children, isValidElement } from "react"
+
+interface TabProps {
+  label: string
+  children: React.ReactNode
+}
+
+interface TabsProps {
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[]
+  defaultValue?: string
+}
+
+export function Tab({ children }: TabProps) {
+  return <>{children}</>
+}
+
+export function Tabs({ children, defaultValue }: TabsProps) {
+  const tabs = Children.toArray(children).filter(isValidElement) as React.ReactElement<TabProps>[]
+
+  // Use defaultValue or first tab label as initial active tab
+  const firstTabLabel = tabs[0]?.props.label || ""
+  const [activeTab, setActiveTab] = useState(defaultValue || firstTabLabel)
+
+  return (
+    <div className="my-6">
+      {/* Tab buttons */}
+      <div className="flex items-center gap-1 border-b border-border mb-4">
+        {tabs.map((tab) => {
+          const label = tab.props.label
+          const isActive = activeTab === label
+
+          return (
+            <button
+              key={label}
+              onClick={() => setActiveTab(label)}
+              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                isActive
+                  ? "border-primary text-primary"
+                  : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
+              }`}
+            >
+              {label}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Tab content */}
+      {tabs.map((tab) => {
+        const label = tab.props.label
+        if (activeTab !== label) return null
+
+        return (
+          <div key={label} className="prose prose-slate dark:prose-invert max-w-none [&>*:first-child]:mt-0">
+            {tab.props.children}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/docs/theme-toggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useEffect, useState } from "react"
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<"light" | "dark">("dark")
+
+  useEffect(() => {
+    // Check for saved theme preference or default to dark
+    const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    const initialTheme = savedTheme || (prefersDark ? "dark" : "light")
+    
+    setTheme(initialTheme)
+    document.documentElement.classList.toggle("dark", initialTheme === "dark")
+  }, [])
+
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark"
+    setTheme(newTheme)
+    localStorage.setItem("theme", newTheme)
+    document.documentElement.classList.toggle("dark", newTheme === "dark")
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex items-center justify-center w-9 h-9 rounded-md border border-border bg-background hover:bg-accent transition-colors"
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <Sun className="h-4 w-4 text-foreground" />
+      ) : (
+        <Moon className="h-4 w-4 text-foreground" />
+      )}
+    </button>
+  )
+}

package/src/components/docs/tooltip.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useState } from "react"
+
+interface TooltipProps {
+  children: React.ReactNode
+  content: string
+  position?: "top" | "bottom" | "left" | "right"
+}
+
+export function Tooltip({ children, content, position = "top" }: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const positions = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2",
+  }
+
+  return (
+    <span
+      className="relative inline-flex underline decoration-dotted cursor-help"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <span
+          className={`absolute ${positions[position]} z-50 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap pointer-events-none`}
+        >
+          {content}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/components/docs/version-switcher.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { useState } from "react"
+import { Check, ChevronDown } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+interface VersionSwitcherProps {
+  currentVersion: string
+  versions: string[]
+}
+
+export function VersionSwitcher({ currentVersion, versions }: VersionSwitcherProps) {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  const handleVersionChange = (version: string) => {
+    router.push(`/docs/${version}`)
+    setOpen(false)
+  }
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-3 py-2 text-sm text-foreground bg-muted rounded-md hover:bg-muted/80 transition-colors"
+      >
+        <span className="font-medium">{currentVersion}</span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 mt-2 w-48 bg-background border border-border rounded-md shadow-lg z-50">
+            <div className="p-2">
+              {versions.map((version) => (
+                <button
+                  key={version}
+                  onClick={() => handleVersionChange(version)}
+                  className="flex items-center justify-between w-full px-3 py-2 text-sm text-foreground hover:bg-muted rounded-md transition-colors"
+                >
+                  <span>{version}</span>
+                  {version === currentVersion && <Check className="h-4 w-4 text-primary" />}
+                </button>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/docs/video.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+interface VideoProps {
+  src: string
+  caption?: string
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  controls?: boolean
+  poster?: string
+}
+
+export function Video({
+  src,
+  caption,
+  autoplay = false,
+  loop = false,
+  muted = false,
+  controls = true,
+  poster,
+}: VideoProps) {
+  // Check if it's a YouTube or Vimeo URL
+  const isYouTube = src.includes("youtube.com") || src.includes("youtu.be")
+  const isVimeo = src.includes("vimeo.com")
+
+  const getYouTubeId = (url: string) => {
+    const match = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/)
+    return match ? match[1] : null
+  }
+
+  const getVimeoId = (url: string) => {
+    const match = url.match(/vimeo\.com\/(\d+)/)
+    return match ? match[1] : null
+  }
+
+  return (
+    <figure className="my-6">
+      <div className="relative rounded-xl border border-border overflow-hidden bg-muted/30">
+        {isYouTube ? (
+          <div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
+            <iframe
+              className="absolute top-0 left-0 w-full h-full"
+              src={`https://www.youtube.com/embed/${getYouTubeId(src)}${autoplay ? "?autoplay=1" : ""}`}
+              title="YouTube video"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        ) : isVimeo ? (
+          <div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
+            <iframe
+              className="absolute top-0 left-0 w-full h-full"
+              src={`https://player.vimeo.com/video/${getVimeoId(src)}${autoplay ? "?autoplay=1" : ""}`}
+              title="Vimeo video"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        ) : (
+          <video
+            src={src}
+            controls={controls}
+            autoPlay={autoplay}
+            loop={loop}
+            muted={muted}
+            poster={poster}
+            className="w-full h-auto"
+          >
+            Your browser does not support the video tag.
+          </video>
+        )}
+      </div>
+      {caption && (
+        <figcaption className="mt-2 text-center text-sm text-muted-foreground italic">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}

package/src/components/global/index.ts

@@ -0,0 +1,3 @@
+
+
+export * from './version-not-found'

package/src/components/global/version-not-found.tsx

@@ -0,0 +1,26 @@
+import { AlertTriangle } from "lucide-react";
+import Link from "next/link";
+
+export function VersionNotFound() {
+  return (
+    <>
+    <div className="flex min-h-screen items-center justify-center px-4">
+      <div className="text-center">
+        <div className="mb-4 flex justify-center">
+          <AlertTriangle className="h-16 w-16 text-yellow-500" />
+        </div>
+        <h1 className="mb-2 text-4xl font-bold">Version Not Found</h1>
+        <p className="mb-6 text-muted-foreground">
+          The documentation version you're looking for doesn't exist.
+        </p>
+        <Link
+          href="/docs/v1.0.0"
+          className="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+        >
+          Go to Latest Version
+        </Link>
+      </div>
+    </div>
+    </>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,8 @@
+// Documentation Components
+export * from './docs'
+
+// UI Components
+export * from './ui'
+
+// Global Components
+export * from './global'

package/src/components/theme-provider.tsx

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

package/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+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 badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }