roadmap-kit 1.0.0

package/dashboard/src/components/ui/accordion.jsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-slate-700", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:bg-slate-800/30 px-4 rounded-lg [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 text-slate-400" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0 px-4", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/dashboard/src/components/ui/badge.jsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium font-mono transition-all",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-cyan-500/30 bg-cyan-500/10 text-cyan-400",
+        secondary:
+          "border-slate-600 bg-slate-800/50 text-slate-300",
+        success:
+          "border-emerald-500/30 bg-emerald-500/10 text-emerald-400",
+        warning:
+          "border-amber-500/30 bg-amber-500/10 text-amber-400",
+        danger:
+          "border-rose-500/30 bg-rose-500/10 text-rose-400",
+        outline:
+          "border-slate-600 text-slate-400 bg-transparent",
+        info:
+          "border-blue-500/30 bg-blue-500/10 text-blue-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/dashboard/src/components/ui/card.jsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border border-slate-800 bg-slate-900/50 backdrop-blur text-slate-50 shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ 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(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-slate-400", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ 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 }

package/dashboard/src/components/ui/progress.jsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { cn } from "../../lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-slate-800",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/dashboard/src/components/ui/tabs.jsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "../../lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-auto items-center justify-center rounded-xl bg-navy-900/80 backdrop-blur-sm p-1.5 text-slate-400 border border-cyan-500/10",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-all",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/50",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "data-[state=active]:bg-cyan-500/20 data-[state=active]:text-cyan-400 data-[state=active]:shadow-sm",
+      "hover:text-slate-300 hover:bg-navy-800/50",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/50",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/dashboard/src/index.css

@@ -0,0 +1,440 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --matrix: #00ff88;
+    --signal: #ff9500;
+    --cyber: #00d4ff;
+    --alert: #ff3366;
+  }
+
+  ::selection {
+    background-color: rgba(0, 255, 136, 0.3);
+    color: white;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 255, 136, 0.2);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 255, 136, 0.4);
+  }
+
+  /* Select styling */
+  select {
+    background-color: #0a0a0a;
+    color: #00ff88;
+    border: 1px solid rgba(0, 255, 136, 0.2);
+  }
+
+  select option {
+    background-color: #0a0a0a;
+    color: #e0e0e0;
+    padding: 12px;
+  }
+
+  select option:hover,
+  select option:focus,
+  select option:checked {
+    background-color: rgba(0, 255, 136, 0.1);
+    color: #00ff88;
+  }
+
+  /* Focus styles */
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: none;
+    border-color: var(--matrix);
+    box-shadow: 0 0 0 1px var(--matrix), 0 0 20px rgba(0, 255, 136, 0.2);
+  }
+}
+
+@layer components {
+  /* Terminal card */
+  .terminal-card {
+    background: linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 100%);
+    border: 1px solid rgba(0, 255, 136, 0.15);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .terminal-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--matrix), transparent);
+    opacity: 0.5;
+  }
+
+  /* Sidebar style */
+  .sidebar-terminal {
+    background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
+    border-right: 1px solid rgba(0, 255, 136, 0.1);
+    position: relative;
+  }
+
+  .sidebar-terminal::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    background: linear-gradient(180deg, transparent, var(--matrix), transparent);
+    opacity: 0.3;
+  }
+
+  /* Glowing border */
+  .glow-border {
+    position: relative;
+  }
+
+  .glow-border::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, var(--matrix), var(--cyber));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0.5;
+  }
+
+  /* LED indicator */
+  .led {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .led::after {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 50%;
+    background: inherit;
+    filter: blur(4px);
+    opacity: 0.6;
+  }
+
+  .led-green {
+    background: var(--matrix);
+  }
+
+  .led-amber {
+    background: var(--signal);
+  }
+
+  .led-red {
+    background: var(--alert);
+  }
+
+  .led-gray {
+    background: #444;
+  }
+
+  .led-gray::after {
+    opacity: 0;
+  }
+
+  /* Progress bar brutalist */
+  .progress-brutal {
+    height: 6px;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    position: relative;
+  }
+
+  .progress-brutal-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--matrix), var(--cyber));
+    box-shadow: 0 0 10px var(--matrix);
+    transition: width 0.5s ease-out;
+  }
+
+  /* Nav item terminal style */
+  .nav-terminal {
+    position: relative;
+    font-family: 'IBM Plex Mono', monospace;
+    letter-spacing: 0.05em;
+    transition: all 0.2s ease;
+  }
+
+  .nav-terminal::before {
+    content: '>';
+    position: absolute;
+    left: 12px;
+    opacity: 0;
+    color: var(--matrix);
+    transition: all 0.2s ease;
+    transform: translateX(-5px);
+  }
+
+  .nav-terminal:hover::before,
+  .nav-terminal.active::before {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .nav-terminal.active {
+    background: rgba(0, 255, 136, 0.05);
+    color: var(--matrix);
+    border-left: 2px solid var(--matrix);
+  }
+
+  /* ASCII box decorations */
+  .ascii-box {
+    position: relative;
+  }
+
+  .ascii-box::before {
+    content: '┌──';
+    position: absolute;
+    top: -8px;
+    left: 0;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+    color: rgba(0, 255, 136, 0.3);
+  }
+
+  .ascii-box::after {
+    content: '──┘';
+    position: absolute;
+    bottom: -8px;
+    right: 0;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+    color: rgba(0, 255, 136, 0.3);
+  }
+
+  /* Scanline overlay */
+  .scanlines {
+    pointer-events: none;
+    position: fixed;
+    inset: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0, 0, 0, 0.05) 2px,
+      rgba(0, 0, 0, 0.05) 4px
+    );
+    z-index: 9999;
+  }
+
+  /* CRT glow effect */
+  .crt-glow {
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
+  }
+
+  /* Button terminal */
+  .btn-terminal {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    background: transparent;
+    border: 1px solid var(--matrix);
+    color: var(--matrix);
+    padding: 10px 20px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .btn-terminal::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--matrix);
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    z-index: -1;
+  }
+
+  .btn-terminal:hover {
+    color: black;
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
+  }
+
+  .btn-terminal:hover::before {
+    transform: translateX(0);
+  }
+
+  /* Status badge */
+  .status-badge {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 4px 8px;
+    border: 1px solid currentColor;
+  }
+
+  /* Grid background */
+  .grid-bg {
+    background-image:
+      linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  /* Typing cursor */
+  .typing-cursor::after {
+    content: '█';
+    animation: blink 1s step-end infinite;
+    color: var(--matrix);
+  }
+
+  /* Metric display */
+  .metric-display {
+    font-family: 'Orbitron', monospace;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Feature card */
+  .feature-card {
+    background: #0d0d0d;
+    border: 1px solid #00ff88;
+    transition: all 0.3s ease;
+  }
+
+  .feature-card:hover {
+    border-color: #00ff88;
+    box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
+  }
+
+  /* Task row */
+  .task-row {
+    background: #0d0d0d;
+    border: 1px solid #1a1a1a;
+    transition: all 0.2s ease;
+  }
+
+  .task-row:hover {
+    background: #111;
+    border-color: #333;
+  }
+
+  /* Input terminal style */
+  .input-terminal {
+    background: #0a0a0a;
+    border: 1px solid #333;
+    color: #e0e0e0;
+    font-family: 'IBM Plex Mono', monospace;
+    transition: all 0.2s ease;
+  }
+
+  .input-terminal::placeholder {
+    color: #555;
+  }
+
+  .input-terminal:focus {
+    border-color: var(--matrix);
+    box-shadow: 0 0 0 1px var(--matrix), 0 0 20px rgba(0, 255, 136, 0.1);
+  }
+
+  /* Modal overlay */
+  .modal-overlay {
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(4px);
+  }
+
+  /* Animated gradient text */
+  .text-matrix {
+    color: var(--matrix);
+  }
+
+  .text-signal {
+    color: var(--signal);
+  }
+
+  .text-cyber {
+    color: var(--cyber);
+  }
+
+  .text-alert {
+    color: var(--alert);
+  }
+}
+
+@layer utilities {
+  /* Stagger animations - elements always visible, animation is just enhancement */
+  .stagger > * {
+    opacity: 1 !important;
+    animation: slide-up 0.4s ease-out forwards;
+  }
+  .stagger > *:nth-child(1) { animation-delay: 0ms; }
+  .stagger > *:nth-child(2) { animation-delay: 50ms; }
+  .stagger > *:nth-child(3) { animation-delay: 100ms; }
+  .stagger > *:nth-child(4) { animation-delay: 150ms; }
+  .stagger > *:nth-child(5) { animation-delay: 200ms; }
+  .stagger > *:nth-child(6) { animation-delay: 250ms; }
+  .stagger > *:nth-child(7) { animation-delay: 300ms; }
+  .stagger > *:nth-child(8) { animation-delay: 350ms; }
+
+  /* Glow utilities */
+  .glow-matrix {
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+  }
+
+  .glow-signal {
+    box-shadow: 0 0 20px rgba(255, 149, 0, 0.3);
+  }
+
+  .glow-cyber {
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+  }
+
+  .glow-alert {
+    box-shadow: 0 0 20px rgba(255, 51, 102, 0.3);
+  }
+}
+
+/* Keyframes */
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out forwards;
+}

package/dashboard/src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}

package/dashboard/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)