✨ Add ESLint config, additional UI components, and type definitions

- ESLint configuration for Next.js
- Separator and label UI components
- TypeScript declarations for fonts
- Enhanced chat components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: sheikhcoders

.node-version

@@ -0,0 +1 @@
+18

.nvmrc

@@ -0,0 +1 @@
+18

eslint.config.mjs

@@ -0,0 +1,31 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      // Accessibility rules
+      "jsx-a11y/alt-text": "error",
+      "jsx-a11y/anchor-has-content": "error",
+      "jsx-a11y/aria-props": "error",
+      "jsx-a11y/aria-role": "error",
+      "jsx-a11y/role-has-required-aria-props": "error",
+      // TypeScript rules
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_" },
+      ],
+    },
+  },
+];
+
+export default eslintConfig;

src/components/chat/message-skeleton.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Message loading skeleton
+ * MUST: Skeletons mirror final content to avoid layout shift
+ */
+export function MessageSkeleton() {
+  return (
+    <div className="flex gap-3" aria-busy="true" aria-label="Loading message">
+      {/* Avatar skeleton */}
+      <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+      
+      {/* Message content skeleton */}
+      <div className="flex max-w-[85%] flex-col gap-2">
+        <Skeleton className="h-4 w-48" />
+        <Skeleton className="h-4 w-64" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+    </div>
+  );
+}

src/components/ui/card.tsx

@@ -0,0 +1,82 @@
+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 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,
+};

src/components/ui/label.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>((
+  { className, orientation = "horizontal", decorative = true, ...props },
+  ref
+) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/components/ui/skeleton.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * Skeleton loading component
+ * MUST: Skeletons mirror final content to avoid layout shift
+ */
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse-subtle rounded-md bg-muted",
+        // Reduced motion: no animation
+        "motion-reduce:animate-none",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

src/components/ui/visually-hidden.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import * as React from "react";
+import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
+
+/**
+ * Visually hidden component for screen reader only content
+ * MUST: Don't ship the schema—visuals may omit labels but accessible names still exist
+ */
+const VisuallyHidden = React.forwardRef<
+  React.ElementRef<typeof VisuallyHiddenPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof VisuallyHiddenPrimitive.Root>
+>(({ ...props }, ref) => (
+  <VisuallyHiddenPrimitive.Root ref={ref} {...props} />
+));
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden };

src/hooks/use-focus-trap.ts

@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+
+/**
+ * Hook for trapping focus within a container
+ * MUST: Manage focus (trap, move, and return) per APG patterns
+ */
+export function useFocusTrap<T extends HTMLElement>(active: boolean = true) {
+  const containerRef = useRef<T>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  // Get all focusable elements within the container
+  const getFocusableElements = useCallback(() => {
+    if (!containerRef.current) return [];
+
+    const selector = [
+      'a[href]',
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])',
+    ].join(',');
+
+    return Array.from(
+      containerRef.current.querySelectorAll<HTMLElement>(selector)
+    ).filter((el) => {
+      // Filter out elements that are not visible
+      return el.offsetParent !== null;
+    });
+  }, []);
+
+  // Handle Tab key to trap focus
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!active || event.key !== 'Tab') return;
+
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (event.shiftKey) {
+        // Shift + Tab: go to last element if on first
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab: go to first element if on last
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    },
+    [active, getFocusableElements]
+  );
+
+  useEffect(() => {
+    if (!active) return;
+
+    // Store the currently focused element
+    previousActiveElement.current = document.activeElement as HTMLElement;
+
+    // Focus the first focusable element in the container
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+
+    // Add event listener for Tab key
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+
+      // Return focus to the previously focused element
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [active, getFocusableElements, handleKeyDown]);
+
+  return containerRef;
+}