@aiready/components 0.1.31 → 0.1.34

package/src/charts/GraphControls.tsx

@@ -89,7 +89,6 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
   position = 'top-left',
   className,
 }) => {
-
   if (!visible) return null;
 
   const positionClasses: Record<string, string> = {
@@ -150,7 +149,11 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
           onClick={() => onManualLayoutToggle?.(!manualLayout)}
           active={manualLayout}
           icon="🔧"
-          label={manualLayout ? 'Manual layout: ON (drag freely)' : 'Manual layout: OFF (forces active)'}
+          label={
+            manualLayout
+              ? 'Manual layout: ON (drag freely)'
+              : 'Manual layout: OFF (forces active)'
+          }
         />
 
         {/* Divider */}

package/src/charts/LinkItem.tsx

@@ -9,19 +9,31 @@ export interface LinkItemProps {
   nodes?: GraphNode[]; // Optional nodes array to resolve string IDs to node objects
 }
 
-export const LinkItem: React.FC<LinkItemProps> = ({ link, onClick, defaultWidth, showLabel = true, nodes = [] }) => {
-  const src = (link.source as any)?.id ?? (typeof link.source === 'string' ? link.source : undefined);
-  const tgt = (link.target as any)?.id ?? (typeof link.target === 'string' ? link.target : undefined);
+export const LinkItem: React.FC<LinkItemProps> = ({
+  link,
+  onClick,
+  defaultWidth,
+  showLabel = true,
+  nodes = [],
+}) => {
+  const src =
+    (link.source as any)?.id ??
+    (typeof link.source === 'string' ? link.source : undefined);
+  const tgt =
+    (link.target as any)?.id ??
+    (typeof link.target === 'string' ? link.target : undefined);
 
   // Helper to get node position from source/target (which could be node object or string ID)
-  const getNodePosition = (nodeOrId: string | GraphNode): { x: number; y: number } | null => {
+  const getNodePosition = (
+    nodeOrId: string | GraphNode
+  ): { x: number; y: number } | null => {
     if (typeof nodeOrId === 'object' && nodeOrId !== null) {
       // It's a node object
       const node = nodeOrId as GraphNode;
       return { x: node.x ?? 0, y: node.y ?? 0 };
     } else if (typeof nodeOrId === 'string') {
       // It's a string ID, try to find in nodes array
-      const found = nodes.find(n => n.id === nodeOrId);
+      const found = nodes.find((n) => n.id === nodeOrId);
       if (found) return { x: found.x ?? 0, y: found.y ?? 0 };
     }
     return null;

package/src/charts/NodeItem.tsx

@@ -56,10 +56,25 @@ export const NodeItem: React.FC<NodeItemProps> = ({
         opacity={isHovered || isSelected ? 1 : 0.9}
       />
       {pinned && (
-        <circle r={nodeSize + 4} fill="none" stroke="#ff6b6b" strokeWidth={1} opacity={0.5} className="pointer-events-none" />
+        <circle
+          r={nodeSize + 4}
+          fill="none"
+          stroke="#ff6b6b"
+          strokeWidth={1}
+          opacity={0.5}
+          className="pointer-events-none"
+        />
       )}
       {showLabel && node.label && (
-        <text y={nodeSize + 15} fill="#333" fontSize="12" textAnchor="middle" dominantBaseline="middle" pointerEvents="none" className="select-none">
+        <text
+          y={nodeSize + 15}
+          fill="#333"
+          fontSize="12"
+          textAnchor="middle"
+          dominantBaseline="middle"
+          pointerEvents="none"
+          className="select-none"
+        >
           {node.label}
         </text>
       )}

package/src/code-block/CodeBlock.tsx

@@ -13,8 +13,8 @@ export interface CodeBlockProps {
 // 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 normalized = code.replace(/\t/g, '  ').replace(/[ \t]+$/gm, '');
+
   const lines = normalized.split('\n');
   if (lines.length <= 1) return normalized.trim();
 
@@ -23,7 +23,7 @@ function dedentCode(code: string): string {
   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);
 
@@ -35,10 +35,15 @@ function dedentCode(code: string): string {
   }, 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');
-  
+  const dedented =
+    minIndent === Infinity || minIndent === 0
+      ? relevantLines.join('\n')
+      : relevantLines
+          .map((l) =>
+            l.startsWith(' '.repeat(minIndent)) ? l.slice(minIndent) : l
+          )
+          .join('\n');
+
   return dedented;
 }
 
@@ -73,12 +78,32 @@ function CopyButton({ code }: { code: string }) {
       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
+          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
+          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>
@@ -100,7 +125,9 @@ export function CodeBlock({
     // Handle template literal children
     try {
       const raw = React.Children.toArray(children)
-        .map((c) => (typeof c === 'string' ? c : typeof c === 'number' ? String(c) : ''))
+        .map((c) =>
+          typeof c === 'string' ? c : typeof c === 'number' ? String(c) : ''
+        )
         .join('');
       return dedentCode(raw);
     } catch {
@@ -109,7 +136,9 @@ export function CodeBlock({
   }, [children]);
 
   return (
-    <div className={`group relative my-4 overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-lg ${className}`}>
+    <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">
@@ -138,10 +167,18 @@ export function CodeBlock({
 }
 
 // Inline code component
-export function InlineCode({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+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}`}>
+    <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

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

package/src/components/badge.tsx

@@ -23,7 +23,8 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
@@ -32,4 +33,4 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   );
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -32,7 +32,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
@@ -50,4 +51,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { Button, buttonVariants };
+export { Button, buttonVariants };

package/src/components/card.tsx

@@ -75,4 +75,11 @@ const CardFooter = React.forwardRef<
 ));
 CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/src/components/checkbox.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { cn } from '../utils/cn';
 
-export interface CheckboxProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+export interface CheckboxProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> {
   label?: string;
 }
 
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   ({ className, label, id, ...props }, ref) => {
     const checkboxId = id || React.useId();
-    
+
     return (
       <div className="flex items-center">
         <input
@@ -36,4 +38,4 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 );
 Checkbox.displayName = 'Checkbox';
 
-export { Checkbox };
+export { Checkbox };

package/src/components/container.tsx

@@ -28,4 +28,4 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
 );
 Container.displayName = 'Container';
 
-export { Container };
+export { Container };

package/src/components/grid.tsx

@@ -37,4 +37,4 @@ const Grid = React.forwardRef<HTMLDivElement, GridProps>(
 );
 Grid.displayName = 'Grid';
 
-export { Grid };
+export { Grid };

package/src/components/input.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { cn } from '../utils/cn';
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -21,4 +20,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = 'Input';
 
-export { Input };
+export { Input };

package/src/components/label.tsx

@@ -7,18 +7,15 @@ const labelVariants = cva(
 );
 
 export interface LabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+  extends
+    React.LabelHTMLAttributes<HTMLLabelElement>,
     VariantProps<typeof labelVariants> {}
 
 const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, ...props }, ref) => (
-    <label
-      ref={ref}
-      className={cn(labelVariants(), className)}
-      {...props}
-    />
+    <label ref={ref} className={cn(labelVariants(), className)} {...props} />
   )
 );
 Label.displayName = 'Label';
 
-export { Label };
+export { Label };

package/src/components/radio-group.tsx

@@ -7,8 +7,10 @@ export interface RadioOption {
   disabled?: boolean;
 }
 
-export interface RadioGroupProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface RadioGroupProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
   options: RadioOption[];
   value?: string;
   onChange?: (value: string) => void;
@@ -68,4 +70,4 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
 );
 RadioGroup.displayName = 'RadioGroup';
 
-export { RadioGroup };
+export { RadioGroup };

package/src/components/select.tsx

@@ -7,8 +7,10 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
-export interface SelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+export interface SelectProps extends Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  'onChange'
+> {
   options: SelectOption[];
   placeholder?: string;
   onChange?: (value: string) => void;
@@ -50,4 +52,4 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
 );
 Select.displayName = 'Select';
 
-export { Select };
+export { Select };

package/src/components/separator.tsx

@@ -26,4 +26,4 @@ const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
 );
 Separator.displayName = 'Separator';
 
-export { Separator };
+export { Separator };

package/src/components/stack.tsx

@@ -58,4 +58,4 @@ const Stack = React.forwardRef<HTMLDivElement, StackProps>(
 );
 Stack.displayName = 'Stack';
 
-export { Stack };
+export { Stack };

package/src/components/switch.tsx

@@ -1,24 +1,32 @@
 import * as React from 'react';
 import { cn } from '../utils/cn';
 
-export interface SwitchProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+export interface SwitchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> {
   label?: string;
   onCheckedChange?: (checked: boolean) => void;
 }
 
 const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, id, checked, onCheckedChange, onChange, ...props }, ref) => {
+  (
+    { className, label, id, checked, onCheckedChange, onChange, ...props },
+    ref
+  ) => {
     const switchId = id || React.useId();
-    
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       onChange?.(e);
       onCheckedChange?.(e.target.checked);
     };
-    
+
     return (
       <div className="flex items-center">
-        <label htmlFor={switchId} className="relative inline-flex cursor-pointer items-center">
+        <label
+          htmlFor={switchId}
+          className="relative inline-flex cursor-pointer items-center"
+        >
           <input
             type="checkbox"
             id={switchId}
@@ -46,4 +54,4 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
 );
 Switch.displayName = 'Switch';
 
-export { Switch };
+export { Switch };

package/src/components/textarea.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { cn } from '../utils/cn';
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
@@ -20,4 +19,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 );
 Textarea.displayName = 'Textarea';
 
-export { Textarea };
+export { Textarea };

package/src/data-display/ScoreBar.tsx

@@ -3,7 +3,12 @@
 import { getRating as getCoreRating } from '@aiready/core/client';
 import { cn } from '../utils/cn';
 
-export type ScoreRating = 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical';
+export type ScoreRating =
+  | 'excellent'
+  | 'good'
+  | 'fair'
+  | 'needs-work'
+  | 'critical';
 
 export interface ScoreBarProps {
   score: number;
@@ -14,11 +19,22 @@ export interface ScoreBarProps {
   className?: string;
 }
 
-const ratingConfig: Record<ScoreRating, { color: string; bgColor: string; label: string }> = {
-  excellent: { color: 'bg-green-500', bgColor: 'bg-green-100', label: 'Excellent' },
+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' },
+  'needs-work': {
+    color: 'bg-orange-500',
+    bgColor: 'bg-orange-100',
+    label: 'Needs Work',
+  },
   critical: { color: 'bg-red-500', bgColor: 'bg-red-100', label: 'Critical' },
 };
 
@@ -26,11 +42,11 @@ const ratingConfig: Record<ScoreRating, { color: string; bgColor: string; label:
 function getRating(score: number): ScoreRating {
   const coreRating = getCoreRating(score);
   const ratingMap: Record<string, ScoreRating> = {
-    'Excellent': 'excellent',
-    'Good': 'good',
-    'Fair': 'fair',
+    Excellent: 'excellent',
+    Good: 'good',
+    Fair: 'fair',
     'Needs Work': 'needs-work',
-    'Critical': 'critical',
+    Critical: 'critical',
   };
   return ratingMap[coreRating] || 'critical';
 }
@@ -66,7 +82,11 @@ export function ScoreBar({
       </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)}
+          className={cn(
+            'rounded-full transition-all duration-500',
+            config.color,
+            sizes.height
+          )}
           style={{ width: `${percentage}%` }}
         />
       </div>
@@ -85,15 +105,30 @@ export interface ScoreCardProps {
   className?: string;
 }
 
-export function ScoreCard({ score, title, breakdown, className }: ScoreCardProps) {
+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={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`)}>
+        <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>}
@@ -114,9 +149,11 @@ export function ScoreCard({ score, title, breakdown, className }: ScoreCardProps
 
       {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}
+          <strong>Formula:</strong>{' '}
+          {breakdown
+            .map((item) => `${item.score}×${item.weight || 1}`)
+            .join(' + ')}{' '}
+          / 100 = {score}
         </div>
       )}
     </div>

package/src/data-display/index.ts

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

package/src/feedback/ErrorDisplay.tsx

@@ -41,7 +41,13 @@ export function ErrorDisplay({
           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">
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+          >
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -65,13 +71,20 @@ export interface EmptyStateProps {
   };
 }
 
-export function EmptyState({ title, description, icon, action }: EmptyStateProps) {
+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>}
+        {description && (
+          <p className="mt-2 text-sm text-slate-500">{description}</p>
+        )}
       </div>
       {action && (
         <button
@@ -83,4 +96,4 @@ export function EmptyState({ title, description, icon, action }: EmptyStateProps
       )}
     </div>
   );
-}
+}

package/src/feedback/LoadingSpinner.tsx

@@ -11,7 +11,10 @@ const sizeClasses = {
   lg: 'h-12 w-12',
 };
 
-export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+export function LoadingSpinner({
+  size = 'md',
+  className = '',
+}: LoadingSpinnerProps) {
   return (
     <div className={`flex items-center justify-center ${className}`}>
       <div
@@ -25,11 +28,13 @@ export interface LoadingOverlayProps {
   message?: string;
 }
 
-export function LoadingOverlay({ message = 'Loading...' }: LoadingOverlayProps) {
+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>
   );
-}
+}