@aiready/components 0.1.21 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.1.21",
+  "version": "0.1.24",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,8 +62,8 @@
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "d3-force": "^3.0.0",
-    "tailwind-merge": "^2.6.1",
-    "@aiready/core": "0.9.22"
+    "tailwind-merge": "^3.0.0",
+    "@aiready/core": "0.9.25"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",
@@ -74,7 +74,7 @@
     "tailwindcss": "^4.1.14",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.8"
+    "vitest": "^4.0.0"
   },
   "scripts": {
     "dev": "tsup --watch",

package/src/charts/ForceDirectedGraph.tsx

@@ -128,8 +128,8 @@ export const ForceDirectedGraph = forwardRef<ForceDirectedGraphHandle, ForceDire
   const nodes = React.useMemo(() => {
     if (!initialNodes || !initialNodes.length) return initialNodes;
     
-    const cx = width / 2;
-    const cy = height / 2;
+    const centerX = width / 2;
+    const centerY = height / 2;
     
     // For force layout, use random positions but don't animate
     if (layout === 'force') {
@@ -145,8 +145,8 @@ export const ForceDirectedGraph = forwardRef<ForceDirectedGraphHandle, ForceDire
       const radius = Math.min(width, height) * 0.35;
       return initialNodes.map((n: any, i: number) => ({
         ...n,
-        x: cx + Math.cos((2 * Math.PI * i) / initialNodes.length) * radius,
-        y: cy + Math.sin((2 * Math.PI * i) / initialNodes.length) * radius,
+        x: centerX + Math.cos((2 * Math.PI * i) / initialNodes.length) * radius,
+        y: centerY + Math.sin((2 * Math.PI * i) / initialNodes.length) * radius,
       }));
     }
     
@@ -188,16 +188,16 @@ export const ForceDirectedGraph = forwardRef<ForceDirectedGraphHandle, ForceDire
     if (!nodes || nodes.length === 0) return;
     
     const applyLayout = () => {
-      const cx = width / 2;
-      const cy = height / 2;
+      const centerX = width / 2;
+      const centerY = height / 2;
       
       if (layout === 'circular') {
         // Place all nodes in a circle
         const radius = Math.min(width, height) * 0.35;
         nodes.forEach((node, i) => {
           const angle = (2 * Math.PI * i) / nodes.length;
-          node.fx = cx + Math.cos(angle) * radius;
-          node.fy = cy + Math.sin(angle) * radius;
+          node.fx = centerX + Math.cos(angle) * radius;
+          node.fy = centerY + Math.sin(angle) * radius;
         });
       } else if (layout === 'hierarchical') {
         // Place packages in rows, files within packages in columns

package/src/code-block/CodeBlock.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useState, useCallback, useMemo } from 'react';
+
+export interface CodeBlockProps {
+  children: React.ReactNode;
+  language?: string;
+  showCopy?: boolean;
+  showHeader?: boolean;
+  className?: string;
+}
+
+// Dedent helper - removes common leading indentation
+function dedentCode(code: string): string {
+  // Normalize tabs to two spaces
+  let normalized = code.replace(/\t/g, '  ').replace(/[ \t]+$/gm, '');
+  
+  const lines = normalized.split('\n');
+  if (lines.length <= 1) return normalized.trim();
+
+  // Remove leading/trailing empty lines
+  let start = 0;
+  while (start < lines.length && lines[start].trim() === '') start++;
+  let end = lines.length - 1;
+  while (end >= 0 && lines[end].trim() === '') end--;
+  
+  if (start > end) return '';
+  const relevantLines = lines.slice(start, end + 1);
+
+  // Find minimum indent across non-empty lines
+  const nonEmpty = relevantLines.filter((l) => l.trim() !== '');
+  const minIndent = nonEmpty.reduce((min, line) => {
+    const m = line.match(/^\s*/)?.[0].length ?? 0;
+    return Math.min(min, m);
+  }, Infinity);
+
+  // Remove common indentation
+  const dedented = minIndent === Infinity || minIndent === 0
+    ? relevantLines.join('\n')
+    : relevantLines.map((l) => (l.startsWith(' '.repeat(minIndent)) ? l.slice(minIndent) : l)).join('\n');
+  
+  return dedented;
+}
+
+// Simple Copy Button
+function CopyButton({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = code;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [code]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="rounded-md p-1.5 text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-colors"
+      title={copied ? 'Copied!' : 'Copy code'}
+    >
+      {copied ? (
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+        </svg>
+      ) : (
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+export function CodeBlock({
+  children,
+  language = 'typescript',
+  showCopy = true,
+  showHeader = true,
+  className = '',
+}: CodeBlockProps) {
+  // Get code string from children
+  const codeString = useMemo(() => {
+    if (typeof children === 'string') {
+      return dedentCode(children);
+    }
+    // Handle template literal children
+    try {
+      const raw = React.Children.toArray(children)
+        .map((c) => (typeof c === 'string' ? c : typeof c === 'number' ? String(c) : ''))
+        .join('');
+      return dedentCode(raw);
+    } catch {
+      return '';
+    }
+  }, [children]);
+
+  return (
+    <div className={`group relative my-4 overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-lg ${className}`}>
+      {/* Header bar */}
+      {showHeader && (
+        <div className="flex items-center justify-between border-b border-slate-700 bg-slate-800/50 px-4 py-2">
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1.5">
+              <div className="h-3 w-3 rounded-full bg-red-500/50" />
+              <div className="h-3 w-3 rounded-full bg-amber-500/50" />
+              <div className="h-3 w-3 rounded-full bg-emerald-500/50" />
+            </div>
+            <span className="ml-2 text-xs font-semibold uppercase tracking-wider text-slate-500 font-mono">
+              {language}
+            </span>
+          </div>
+          {showCopy && <CopyButton code={codeString} />}
+        </div>
+      )}
+
+      {/* Code body */}
+      <pre className="overflow-x-auto p-4 text-sm leading-relaxed">
+        <code className="font-mono block whitespace-pre text-slate-300">
+          {codeString}
+        </code>
+      </pre>
+    </div>
+  );
+}
+
+// Inline code component
+export function InlineCode({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <code className={`rounded-md bg-slate-100 px-1.5 py-0.5 text-sm font-mono text-slate-800 ${className}`}>
+      {children}
+    </code>
+  );
+}

package/src/code-block/index.ts

@@ -0,0 +1 @@
+export { CodeBlock, InlineCode, type CodeBlockProps } from './CodeBlock';

package/src/data-display/ScoreBar.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { getRating as getCoreRating } from '@aiready/core/client';
+import { cn } from '../utils/cn';
+
+export type ScoreRating = 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical';
+
+export interface ScoreBarProps {
+  score: number;
+  maxScore?: number;
+  label: string;
+  showScore?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const ratingConfig: Record<ScoreRating, { color: string; bgColor: string; label: string }> = {
+  excellent: { color: 'bg-green-500', bgColor: 'bg-green-100', label: 'Excellent' },
+  good: { color: 'bg-emerald-500', bgColor: 'bg-emerald-100', label: 'Good' },
+  fair: { color: 'bg-amber-500', bgColor: 'bg-amber-100', label: 'Fair' },
+  'needs-work': { color: 'bg-orange-500', bgColor: 'bg-orange-100', label: 'Needs Work' },
+  critical: { color: 'bg-red-500', bgColor: 'bg-red-100', label: 'Critical' },
+};
+
+// Convert Title Case rating from core to lowercase for component use
+function getRating(score: number): ScoreRating {
+  const coreRating = getCoreRating(score);
+  const ratingMap: Record<string, ScoreRating> = {
+    'Excellent': 'excellent',
+    'Good': 'good',
+    'Fair': 'fair',
+    'Needs Work': 'needs-work',
+    'Critical': 'critical',
+  };
+  return ratingMap[coreRating] || 'critical';
+}
+
+const sizeConfig = {
+  sm: { height: 'h-1.5', text: 'text-xs', score: 'text-sm' },
+  md: { height: 'h-2', text: 'text-sm', score: 'text-base' },
+  lg: { height: 'h-3', text: 'text-base', score: 'text-lg' },
+};
+
+export function ScoreBar({
+  score,
+  maxScore = 100,
+  label,
+  showScore = true,
+  size = 'md',
+  className,
+}: ScoreBarProps) {
+  const percentage = Math.min(100, Math.max(0, (score / maxScore) * 100));
+  const rating = getRating(percentage);
+  const config = ratingConfig[rating];
+  const sizes = sizeConfig[size];
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      <div className="flex items-center justify-between">
+        <span className={cn('text-slate-700', sizes.text)}>{label}</span>
+        {showScore && (
+          <span className={cn('font-bold text-slate-900', sizes.score)}>
+            {score}/{maxScore}
+          </span>
+        )}
+      </div>
+      <div className={cn('w-full rounded-full bg-slate-200', sizes.height)}>
+        <div
+          className={cn('rounded-full transition-all duration-500', config.color, sizes.height)}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface ScoreCardProps {
+  score: number;
+  title?: string;
+  breakdown?: Array<{
+    label: string;
+    score: number;
+    weight?: number;
+  }>;
+  className?: string;
+}
+
+export function ScoreCard({ score, title, breakdown, className }: ScoreCardProps) {
+  const rating = getRating(score);
+  const config = ratingConfig[rating];
+
+  return (
+    <div className={cn('rounded-xl border-2 border-slate-200 bg-white p-6 shadow-lg', className)}>
+      <div className="mb-4">
+        <div className="text-4xl font-black text-slate-900">{score}/100</div>
+        <div className={cn('text-lg font-bold', `text-${rating === 'excellent' ? 'green' : rating === 'good' ? 'emerald' : rating === 'fair' ? 'amber' : rating === 'needs-work' ? 'orange' : 'red'}-600`)}>
+          {config.label} Rating
+        </div>
+        {title && <p className="text-sm text-slate-600 mt-1">{title}</p>}
+      </div>
+
+      {breakdown && breakdown.length > 0 && (
+        <div className="space-y-3">
+          {breakdown.map((item, index) => (
+            <ScoreBar
+              key={index}
+              score={item.score}
+              label={item.label}
+              size="sm"
+            />
+          ))}
+        </div>
+      )}
+
+      {breakdown && breakdown.length > 0 && (
+        <div className="mt-4 text-xs text-slate-600 bg-slate-50 p-3 rounded-lg">
+          <strong>Formula:</strong> {breakdown.map(item => 
+            `${item.score}×${item.weight || 1}`
+          ).join(' + ')} / 100 = {score}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/data-display/index.ts

@@ -0,0 +1 @@
+export { ScoreBar, ScoreCard, type ScoreBarProps, type ScoreCardProps, type ScoreRating } from './ScoreBar';

package/src/feedback/ErrorDisplay.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+
+export interface ErrorDisplayProps {
+  title?: string;
+  message: string;
+  retry?: () => void;
+  retryLabel?: string;
+}
+
+export function ErrorDisplay({
+  title = 'Something went wrong',
+  message,
+  retry,
+  retryLabel = 'Try again',
+}: ErrorDisplayProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4 p-8">
+      <div className="rounded-full bg-red-100 p-3">
+        <svg
+          className="h-6 w-6 text-red-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          />
+        </svg>
+      </div>
+      <div className="text-center">
+        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
+        <p className="mt-2 text-sm text-slate-500">{message}</p>
+      </div>
+      {retry && (
+        <button
+          onClick={retry}
+          className="mt-2 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+        >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
+          </svg>
+          {retryLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export interface EmptyStateProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export function EmptyState({ title, description, icon, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4 p-8">
+      {icon && <div className="rounded-full bg-slate-100 p-3">{icon}</div>}
+      <div className="text-center">
+        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
+        {description && <p className="mt-2 text-sm text-slate-500">{description}</p>}
+      </div>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className="mt-2 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/feedback/LoadingSpinner.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+export interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+};
+
+export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <div
+        className={`${sizeClasses[size]} animate-spin rounded-full border-2 border-slate-300 border-t-blue-600`}
+      />
+    </div>
+  );
+}
+
+export interface LoadingOverlayProps {
+  message?: string;
+}
+
+export function LoadingOverlay({ message = 'Loading...' }: LoadingOverlayProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-4">
+      <LoadingSpinner size="lg" />
+      <p className="text-sm text-slate-500 animate-pulse">{message}</p>
+    </div>
+  );
+}

package/src/feedback/index.ts

@@ -0,0 +1,2 @@
+export { LoadingSpinner, LoadingOverlay, type LoadingSpinnerProps, type LoadingOverlayProps } from './LoadingSpinner';
+export { ErrorDisplay, EmptyState, type ErrorDisplayProps, type EmptyStateProps } from './ErrorDisplay';

package/src/index.ts

@@ -25,10 +25,35 @@ export { Switch, type SwitchProps } from './components/switch';
 export { Textarea, type TextareaProps } from './components/textarea';
 export { Select, type SelectProps, type SelectOption } from './components/select';
 
+// Code Block
+export { CodeBlock, InlineCode, type CodeBlockProps } from './code-block';
+
+// Navigation
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './navigation';
+
+// Data Display
+export { ScoreBar, ScoreCard, type ScoreBarProps, type ScoreCardProps, type ScoreRating } from './data-display';
+
+// Feedback
+export {
+  LoadingSpinner,
+  LoadingOverlay,
+  ErrorDisplay,
+  EmptyState,
+  type LoadingSpinnerProps,
+  type LoadingOverlayProps,
+  type ErrorDisplayProps,
+  type EmptyStateProps,
+} from './feedback';
+
+// Theme
+export { ThemeProvider, useTheme, type Theme, type EffectiveTheme } from './theme';
+
 // Utils
 export { cn } from './utils/cn';
 export * from './utils/colors';
 export * from './utils/formatters';
+export * from './utils/score';
 
 // Hooks
 export { useDebounce } from './hooks/useDebounce';

package/src/navigation/Breadcrumb.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../utils/cn';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  separator?: React.ReactNode;
+  className?: string;
+}
+
+const DefaultSeparator = () => (
+  <svg
+    className="h-4 w-4 text-slate-400"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+  </svg>
+);
+
+export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
+  const Separator = separator || <DefaultSeparator />;
+
+  return (
+    <nav className={cn('flex items-center gap-1 text-sm', className)} aria-label="Breadcrumb">
+      <ol className="flex items-center gap-1">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          
+          return (
+            <li key={index} className="flex items-center gap-1">
+              {index > 0 && (
+                <span className="flex-shrink-0">{Separator}</span>
+              )}
+              {item.href && !isLast ? (
+                <a
+                  href={item.href}
+                  className="text-slate-600 hover:text-slate-900 transition-colors"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span className={isLast ? 'font-medium text-slate-900' : 'text-slate-600'}>
+                  {item.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/navigation/index.ts

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './Breadcrumb';