@aiready/components 0.1.30 → 0.1.32

package/src/feedback/index.ts

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

package/src/hooks/useD3.ts

@@ -59,7 +59,6 @@ export function useD3<T extends SVGSVGElement | HTMLDivElement>(
       const selection = d3.select(ref.current);
       renderFn(selection);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 
   return ref;
@@ -118,8 +117,7 @@ export function useD3WithResize<T extends SVGSVGElement | HTMLDivElement>(
     return () => {
       resizeObserver.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 
   return ref;
-}
+}

package/src/hooks/useDebounce.ts

@@ -41,4 +41,4 @@ export function useDebounce<T>(value: T, delay: number = 300): T {
   }, [value, delay]);
 
   return debouncedValue;
-}
+}

package/src/hooks/useForceSimulation.ts

@@ -95,6 +95,13 @@ export interface ForceSimulationOptions {
    */
   stabilizeOnStop?: boolean;
 
+  /**
+   * Throttle for tick updates in milliseconds to reduce update frequency
+   * (helps avoid excessive React re-renders).
+   * @default 33
+   */
+  tickThrottleMs?: number;
+
   /**
    * Maximum time (ms) to allow the simulation to run after creation/restart.
    * If the simulation hasn't cooled by this time, it will be force-stopped
@@ -112,7 +119,11 @@ export interface ForceSimulationOptions {
   /**
    * Optional tick callback invoked on each simulation tick with current nodes/links and the simulation instance
    */
-  onTick?: (nodes: SimulationNode[], links: SimulationLink[], sim: d3.Simulation<SimulationNode, SimulationLink>) => void;
+  onTick?: (
+    nodes: SimulationNode[],
+    links: SimulationLink[],
+    sim: d3.Simulation<SimulationNode, SimulationLink>
+  ) => void;
 }
 
 export interface UseForceSimulationReturn {
@@ -226,14 +237,11 @@ export function useForceSimulation(
     alphaTarget = 0,
     warmAlpha = 0.3,
     alphaMin = 0.01,
-    // @ts-ignore allow extra option
-    stabilizeOnStop = true,
     onTick,
     // Optional throttle in milliseconds for tick updates (reduce React re-renders)
     // Lower values = smoother but more CPU; default ~30ms (~33fps)
-    // @ts-ignore allow extra option
+    stabilizeOnStop = true,
     tickThrottleMs = 33,
-    // @ts-ignore allow extra option
     maxSimulationTimeMs = 3000,
   } = options;
 
@@ -242,18 +250,23 @@ export function useForceSimulation(
   const [isRunning, setIsRunning] = useState(false);
   const [alpha, setAlpha] = useState(1);
 
-  const simulationRef = useRef<d3.Simulation<SimulationNode, SimulationLink> | null>(null);
+  const simulationRef = useRef<d3.Simulation<
+    SimulationNode,
+    SimulationLink
+  > | null>(null);
   const stopTimeoutRef = useRef<number | null>(null);
 
   // Create lightweight keys for nodes/links so we only recreate the simulation
   // when the actual identity/content of inputs change (not when parent passes
   // new array references on each render).
   const nodesKey = initialNodes.map((n) => n.id).join('|');
-  const linksKey = (initialLinks || []).map((l) => {
-    const s = typeof l.source === 'string' ? l.source : (l.source as any)?.id;
-    const t = typeof l.target === 'string' ? l.target : (l.target as any)?.id;
-    return `${s}->${t}:${(l as any).type || ''}`;
-  }).join('|');
+  const linksKey = (initialLinks || [])
+    .map((l) => {
+      const s = typeof l.source === 'string' ? l.source : (l.source as any)?.id;
+      const t = typeof l.target === 'string' ? l.target : (l.target as any)?.id;
+      return `${s}->${t}:${(l as any).type || ''}`;
+    })
+    .join('|');
 
   useEffect(() => {
     // Create a copy of nodes and links to avoid mutating the original data
@@ -277,6 +290,7 @@ export function useForceSimulation(
         (n as any).vy = (Math.random() - 0.5) * 2;
       });
     } catch (e) {
+      void e;
       // If error, fall back to random positions
       nodesCopy.forEach((n) => {
         n.x = Math.random() * width;
@@ -287,35 +301,75 @@ export function useForceSimulation(
     }
 
     // Create the simulation
-    const simulation = (d3.forceSimulation(nodesCopy as any) as unknown) as d3.Simulation<SimulationNode, SimulationLink>;
+    const simulation = d3.forceSimulation(
+      nodesCopy as any
+    ) as unknown as d3.Simulation<SimulationNode, SimulationLink>;
 
     // Configure link force separately to avoid using generic type args on d3 helpers
     try {
-      const linkForce = (d3.forceLink(linksCopy as any) as unknown) as d3.ForceLink<SimulationNode, SimulationLink>;
-      linkForce.id((d: any) => d.id).distance((d: any) => (d && d.distance != null ? d.distance : linkDistance)).strength(linkStrength);
+      const linkForce = d3.forceLink(
+        linksCopy as any
+      ) as unknown as d3.ForceLink<SimulationNode, SimulationLink>;
+      linkForce
+        .id((d: any) => d.id)
+        .distance((d: any) =>
+          d && d.distance != null ? d.distance : linkDistance
+        )
+        .strength(linkStrength);
       simulation.force('link', linkForce as any);
     } catch (e) {
+      void e;
       // fallback: attach a plain link force
-      try { simulation.force('link', d3.forceLink(linksCopy as any) as any); } catch (e) {}
+      try {
+        simulation.force('link', d3.forceLink(linksCopy as any) as any);
+      } catch (e) {
+        void e;
+      }
     }
-      ;
-
     try {
-      simulation.force('charge', d3.forceManyBody().strength(chargeStrength) as any);
-      simulation.force('center', d3.forceCenter(width / 2, height / 2).strength(centerStrength) as any);
-      const collide = d3.forceCollide().radius((d: any) => {
-        const nodeSize = (d && d.size) ? d.size : 10;
-        return nodeSize + collisionRadius;
-      }).strength(collisionStrength as any) as any;
+      simulation.force(
+        'charge',
+        d3.forceManyBody().strength(chargeStrength) as any
+      );
+      simulation.force(
+        'center',
+        d3.forceCenter(width / 2, height / 2).strength(centerStrength) as any
+      );
+      const collide = d3
+        .forceCollide()
+        .radius((d: any) => {
+          const nodeSize = d && d.size ? d.size : 10;
+          return nodeSize + collisionRadius;
+        })
+        .strength(collisionStrength as any) as any;
       simulation.force('collision', collide);
-      simulation.force('x', d3.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5)) as any);
-      simulation.force('y', d3.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5)) as any);
+      simulation.force(
+        'x',
+        d3
+          .forceX(width / 2)
+          .strength(Math.max(0.02, centerStrength * 0.5)) as any
+      );
+      simulation.force(
+        'y',
+        d3
+          .forceY(height / 2)
+          .strength(Math.max(0.02, centerStrength * 0.5)) as any
+      );
       simulation.alphaDecay(alphaDecay);
       simulation.velocityDecay(velocityDecay);
       simulation.alphaMin(alphaMin);
-      try { simulation.alphaTarget(alphaTarget); } catch (e) {}
-      try { simulation.alpha(warmAlpha); } catch (e) {}
+      try {
+        simulation.alphaTarget(alphaTarget);
+      } catch (e) {
+        void e;
+      }
+      try {
+        simulation.alpha(warmAlpha);
+      } catch (e) {
+        void e;
+      }
     } catch (e) {
+      void e;
       // ignore force configuration errors
     }
 
@@ -323,7 +377,11 @@ export function useForceSimulation(
 
     // Force-stop timeout to ensure simulation doesn't run forever.
     if (stopTimeoutRef.current != null) {
-      try { (globalThis.clearTimeout as any)(stopTimeoutRef.current); } catch (e) {}
+      try {
+        (globalThis.clearTimeout as any)(stopTimeoutRef.current);
+      } catch (e) {
+        void e;
+      }
       stopTimeoutRef.current = null;
     }
     if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
@@ -339,7 +397,9 @@ export function useForceSimulation(
           }
           simulation.alpha(0);
           simulation.stop();
-        } catch (e) {}
+        } catch (e) {
+          void e;
+        }
         setIsRunning(false);
         setNodes([...nodesCopy]);
         setLinks([...linksCopy]);
@@ -352,9 +412,10 @@ export function useForceSimulation(
     let lastUpdate = 0;
     const tickHandler = () => {
       try {
-        if (typeof onTick === 'function') onTick(nodesCopy, linksCopy, simulation);
+        if (typeof onTick === 'function')
+          onTick(nodesCopy, linksCopy, simulation);
       } catch (e) {
-        // ignore user tick errors
+        void e;
       }
 
       // If simulation alpha has cooled below the configured minimum, stop it to
@@ -371,7 +432,9 @@ export function useForceSimulation(
               });
             }
             simulation.stop();
-          } catch (e) {}
+          } catch (e) {
+            void e;
+          }
           setAlpha(simulation.alpha());
           setIsRunning(false);
           setNodes([...nodesCopy]);
@@ -379,13 +442,16 @@ export function useForceSimulation(
           return;
         }
       } catch (e) {
-        // ignore
+        void e;
       }
 
       const now = Date.now();
       const shouldUpdate = now - lastUpdate >= (tickThrottleMs as number);
       if (rafId == null && shouldUpdate) {
-        rafId = (globalThis.requestAnimationFrame || ((cb: FrameRequestCallback) => setTimeout(cb, 16)))(() => {
+        rafId = (
+          globalThis.requestAnimationFrame ||
+          ((cb: FrameRequestCallback) => setTimeout(cb, 16))
+        )(() => {
           rafId = null;
           lastUpdate = Date.now();
           setNodes([...nodesCopy]);
@@ -406,13 +472,26 @@ export function useForceSimulation(
     return () => {
       try {
         simulation.on('tick', null as any);
-      } catch (e) {}
+      } catch (e) {
+        void e;
+      }
       if (stopTimeoutRef.current != null) {
-        try { (globalThis.clearTimeout as any)(stopTimeoutRef.current); } catch (e) {}
+        try {
+          (globalThis.clearTimeout as any)(stopTimeoutRef.current);
+        } catch (e) {
+          void e;
+        }
         stopTimeoutRef.current = null;
       }
       if (rafId != null) {
-        try { (globalThis.cancelAnimationFrame || ((id: number) => clearTimeout(id)))(rafId); } catch (e) {}
+        try {
+          (
+            globalThis.cancelAnimationFrame ||
+            ((id: number) => clearTimeout(id))
+          )(rafId);
+        } catch (e) {
+          void e;
+        }
         rafId = null;
       }
       simulation.stop();
@@ -441,16 +520,29 @@ export function useForceSimulation(
     if (simulationRef.current) {
       // Reheat the simulation to a modest alpha target rather than forcing
       // full heat; this matches the Observable pattern and helps stability.
-      try { simulationRef.current.alphaTarget(warmAlpha).restart(); } catch (e) { simulationRef.current.restart(); }
+      try {
+        simulationRef.current.alphaTarget(warmAlpha).restart();
+      } catch {
+        simulationRef.current.restart();
+      }
       setIsRunning(true);
       // Reset safety timeout when simulation is manually restarted
       if (stopTimeoutRef.current != null) {
-        try { (globalThis.clearTimeout as any)(stopTimeoutRef.current); } catch (e) {}
+        try {
+          (globalThis.clearTimeout as any)(stopTimeoutRef.current);
+        } catch (e) {
+          void e;
+        }
         stopTimeoutRef.current = null;
       }
       if (maxSimulationTimeMs && maxSimulationTimeMs > 0) {
         stopTimeoutRef.current = (globalThis.setTimeout as any)(() => {
-          try { simulationRef.current?.alpha(0); simulationRef.current?.stop(); } catch (e) {}
+          try {
+            simulationRef.current?.alpha(0);
+            simulationRef.current?.stop();
+          } catch (e) {
+            void e;
+          }
           setIsRunning(false);
         }, maxSimulationTimeMs) as unknown as number;
       }
@@ -464,7 +556,11 @@ export function useForceSimulation(
     }
   };
 
-  const originalForcesRef = useRef({ charge: chargeStrength, link: linkStrength, collision: collisionStrength });
+  const originalForcesRef = useRef({
+    charge: chargeStrength,
+    link: linkStrength,
+    collision: collisionStrength,
+  });
   const forcesEnabledRef = useRef(true);
 
   const setForcesEnabled = (enabled: boolean) => {
@@ -486,7 +582,7 @@ export function useForceSimulation(
         link.strength(enabled ? originalForcesRef.current.link : 0);
       }
     } catch (e) {
-      // ignore
+      void e;
     }
   };
 
@@ -530,7 +626,9 @@ export function useForceSimulation(
  * }
  * ```
  */
-export function useDrag(simulation: d3.Simulation<SimulationNode, any> | null | undefined) {
+export function useDrag(
+  simulation: d3.Simulation<SimulationNode, any> | null | undefined
+) {
   const dragStarted = (event: any, node: SimulationNode) => {
     if (!simulation) return;
     if (!event.active) simulation.alphaTarget(0.3).restart();
@@ -555,4 +653,4 @@ export function useDrag(simulation: d3.Simulation<SimulationNode, any> | null |
     onDrag: dragged,
     onDragEnd: dragEnded,
   };
-}
+}

package/src/index.ts

@@ -20,19 +20,37 @@ export { Separator, type SeparatorProps } from './components/separator';
 
 // Form Components
 export { Checkbox, type CheckboxProps } from './components/checkbox';
-export { RadioGroup, type RadioGroupProps, type RadioOption } from './components/radio-group';
+export {
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioOption,
+} from './components/radio-group';
 export { Switch, type SwitchProps } from './components/switch';
 export { Textarea, type TextareaProps } from './components/textarea';
-export { Select, type SelectProps, type SelectOption } from './components/select';
+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';
+export {
+  Breadcrumb,
+  type BreadcrumbProps,
+  type BreadcrumbItem,
+} from './navigation';
 
 // Data Display
-export { ScoreBar, ScoreCard, type ScoreBarProps, type ScoreCardProps, type ScoreRating } from './data-display';
+export {
+  ScoreBar,
+  ScoreCard,
+  type ScoreBarProps,
+  type ScoreCardProps,
+  type ScoreRating,
+} from './data-display';
 
 // Feedback
 export {
@@ -47,7 +65,12 @@ export {
 } from './feedback';
 
 // Theme
-export { ThemeProvider, useTheme, type Theme, type EffectiveTheme } from './theme';
+export {
+  ThemeProvider,
+  useTheme,
+  type Theme,
+  type EffectiveTheme,
+} from './theme';
 
 // Utils
 export { cn } from './utils/cn';
@@ -76,7 +99,4 @@ export {
   type ForceDirectedGraphHandle,
   type LayoutType,
 } from './charts/ForceDirectedGraph';
-export {
-  GraphControls,
-  type GraphControlsProps,
-} from './charts/GraphControls';
+export { GraphControls, type GraphControlsProps } from './charts/GraphControls';

package/src/navigation/Breadcrumb.tsx

@@ -22,7 +22,11 @@ const DefaultSeparator = () => (
     strokeWidth="1.5"
     stroke="currentColor"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M8.25 4.5l7.5 7.5-7.5 7.5"
+    />
   </svg>
 );
 
@@ -30,16 +34,17 @@ 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">
+    <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>
-              )}
+              {index > 0 && <span className="flex-shrink-0">{Separator}</span>}
               {item.href && !isLast ? (
                 <a
                   href={item.href}
@@ -48,7 +53,11 @@ export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
                   {item.label}
                 </a>
               ) : (
-                <span className={isLast ? 'font-medium text-slate-900' : 'text-slate-600'}>
+                <span
+                  className={
+                    isLast ? 'font-medium text-slate-900' : 'text-slate-600'
+                  }
+                >
                   {item.label}
                 </span>
               )}
@@ -58,4 +67,4 @@ export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
       </ol>
     </nav>
   );
-}
+}

package/src/navigation/index.ts

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

package/src/theme/ThemeProvider.tsx

@@ -17,7 +17,9 @@ const STORAGE_KEY = 'aiready-theme';
 
 function getSystemTheme(): EffectiveTheme {
   if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
 }
 
 function getStoredTheme(): Theme {
@@ -102,7 +104,13 @@ export function ThemeProvider({
   // Prevent hydration mismatch
   if (!mounted) {
     return (
-      <ThemeContext.Provider value={{ theme: defaultTheme, setTheme: () => {}, effectiveTheme: 'light' }}>
+      <ThemeContext.Provider
+        value={{
+          theme: defaultTheme,
+          setTheme: () => {},
+          effectiveTheme: 'light',
+        }}
+      >
         {children}
       </ThemeContext.Provider>
     );
@@ -121,4 +129,4 @@ export function useTheme(): ThemeContextValue {
     throw new Error('useTheme must be used within a ThemeProvider');
   }
   return context;
-}
+}

package/src/theme/index.ts

@@ -1 +1,6 @@
-export { ThemeProvider, useTheme, type Theme, type EffectiveTheme } from './ThemeProvider';
+export {
+  ThemeProvider,
+  useTheme,
+  type Theme,
+  type EffectiveTheme,
+} from './ThemeProvider';

package/src/utils/cn.ts

@@ -8,4 +8,4 @@ import { twMerge } from 'tailwind-merge';
  */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
-}
+}

package/src/utils/colors.ts

@@ -55,4 +55,4 @@ export function hexToRgba(hex: string, alpha: number): string {
   const g = parseInt(hex.slice(3, 5), 16);
   const b = parseInt(hex.slice(5, 7), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
+}

package/src/utils/formatters.ts

@@ -158,4 +158,4 @@ export function formatRange(min: number, max: number): string {
  */
 export function formatDecimal(value: number, decimals: number = 2): string {
   return value.toFixed(decimals);
-}
+}

package/src/utils/score.ts

@@ -46,7 +46,9 @@ export function scoreGlow(score: number | null | undefined): string {
 /**
  * Get rating from score (for use with ScoreBar component)
  */
-export function getScoreRating(score: number | null | undefined): 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical' {
+export function getScoreRating(
+  score: number | null | undefined
+): 'excellent' | 'good' | 'fair' | 'needs-work' | 'critical' {
   if (score == null) return 'critical';
   if (score >= 90) return 'excellent';
   if (score >= 75) return 'good';

package/tailwind.config.js

@@ -43,4 +43,4 @@ export default {
     },
   },
   plugins: [],
-};
+};