@aiready/components 0.13.12 → 0.13.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.13.12",
+  "version": "0.13.14",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -128,7 +128,7 @@
     "framer-motion": "^12.35.0",
     "lucide-react": "^0.577.0",
     "tailwind-merge": "^3.0.0",
-    "@aiready/core": "0.23.13"
+    "@aiready/core": "0.23.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",

package/src/charts/ForceDirectedGraph.tsx

@@ -106,6 +106,28 @@ export interface ForceDirectedGraphProps {
   onLayoutChange?: (layout: LayoutType) => void;
 }
 
+/**
+ * Helper functions for graph node manipulation.
+ * Extracted to reduce semantic duplicate patterns.
+ */
+
+/** Pins a node to its current position (sets fx/fy to current x/y) */
+function pinNode(node: GraphNode): void {
+  node.fx = node.x;
+  node.fy = node.y;
+}
+
+/** Unpins a node (sets fx/fy to null) */
+function unpinNode(node: GraphNode): void {
+  node.fx = null;
+  node.fy = null;
+}
+
+/** Unpins all nodes - helper for bulk unpin operations */
+function unpinAllNodes(nodes: GraphNode[]): void {
+  nodes.forEach(unpinNode);
+}
+
 /**
  * An interactive Force-Directed Graph component using D3.js for physics and React for rendering.
  *
@@ -218,26 +240,19 @@ export const ForceDirectedGraph = forwardRef<
         pinAll: () => {
           const newPinned = new Set<string>();
           nodes.forEach((node) => {
-            node.fx = node.x;
-            node.fy = node.y;
+            pinNode(node);
             newPinned.add(node.id);
           });
           setPinnedNodes(newPinned);
           restart();
         },
         unpinAll: () => {
-          nodes.forEach((node) => {
-            node.fx = null;
-            node.fy = null;
-          });
+          unpinAllNodes(nodes);
           setPinnedNodes(new Set());
           restart();
         },
         resetLayout: () => {
-          nodes.forEach((node) => {
-            node.fx = null;
-            node.fy = null;
-          });
+          unpinAllNodes(nodes);
           setPinnedNodes(new Set());
           restart();
         },
@@ -352,8 +367,7 @@ export const ForceDirectedGraph = forwardRef<
         event.stopPropagation();
         dragActiveRef.current = true;
         dragNodeRef.current = node;
-        node.fx = node.x;
-        node.fy = node.y;
+        pinNode(node);
         setPinnedNodes((prev) => new Set([...prev, node.id]));
         stop();
       },
@@ -378,8 +392,7 @@ export const ForceDirectedGraph = forwardRef<
           if (!event.active) restart();
           dragActiveRef.current = true;
           dragNodeRef.current = node;
-          node.fx = node.x;
-          node.fy = node.y;
+          pinNode(node);
           setPinnedNodes((prev) => new Set([...prev, node.id]));
         })
         .on('drag', (event: any) => {
@@ -416,12 +429,10 @@ export const ForceDirectedGraph = forwardRef<
         event.stopPropagation();
         if (!enableDrag) return;
         if (node.fx === null || node.fx === undefined) {
-          node.fx = node.x;
-          node.fy = node.y;
+          pinNode(node);
           setPinnedNodes((prev) => new Set([...prev, node.id]));
         } else {
-          node.fx = null;
-          node.fy = null;
+          unpinNode(node);
           setPinnedNodes((prev) => {
             const next = new Set(prev);
             next.delete(node.id);
@@ -440,10 +451,7 @@ export const ForceDirectedGraph = forwardRef<
         height={height}
         className={cn('bg-white dark:bg-gray-900', className)}
         onDoubleClick={() => {
-          nodes.forEach((n) => {
-            n.fx = null;
-            n.fy = null;
-          });
+          unpinAllNodes(nodes);
           setPinnedNodes(new Set());
           restart();
         }}

package/src/components/icons/IconBase.tsx

@@ -10,6 +10,37 @@ export interface IconBaseProps extends React.SVGProps<SVGSVGElement> {
   viewBox?: string;
 }
 
+/**
+ * Common stroke props for line-based icons.
+ * Reduces duplication across icon components.
+ */
+export const STROKE_ICON_PROPS = {
+  strokeWidth: 2,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+};
+
+/**
+ * Creates an icon component with common stroke props pre-applied.
+ * Reduces semantic duplicate patterns in icon definitions.
+ *
+ * @param _name - Name of the icon (reserved for debugging/future use)
+ * @param children - SVG child elements (paths, circles, etc.)
+ * @param additionalProps - Additional props to pass to IconBase
+ * @returns Icon component with standard stroke styling
+ */
+export function createStrokeIcon(
+  _name: string,
+  children: React.ReactNode,
+  additionalProps?: Partial<IconBaseProps>
+): React.ReactElement {
+  return (
+    <IconBase {...STROKE_ICON_PROPS} {...additionalProps}>
+      {children}
+    </IconBase>
+  );
+}
+
 /**
  * A shared base component for all icons to reduce code duplication
  * and improve AI signal clarity.

package/src/components/icons/index.tsx

@@ -1,60 +1,49 @@
-import { IconBase, IconBaseProps } from './IconBase';
+import { IconBase, IconBaseProps, createStrokeIcon } from './IconBase';
 
+// Icons using common stroke props - uses factory to reduce duplication
 export function AlertCircleIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'AlertCircle',
+    <>
       <circle cx="12" cy="12" r="10" />
       <line x1="12" y1="8" x2="12" y2="12" />
       <line x1="12" y1="16" x2="12.01" y2="16" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function AlertTriangleIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'AlertTriangle',
+    <>
       <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
       <line x1="12" y1="9" x2="12" y2="13" />
       <line x1="12" y1="17" x2="12.01" y2="17" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function ArrowRightIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'ArrowRight',
+    <>
       <line x1="5" y1="12" x2="19" y2="12" />
       <polyline points="12 5 19 12 12 19" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function BrainIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Brain',
+    <>
       <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.74-3.41A2.5 2.5 0 0 1 2 14c0-1.5 1-2 1-2s-1-.5-1-2a2.5 2.5 0 0 1 2.3-2.48A2.5 2.5 0 0 1 7 5.5a2.5 2.5 0 0 1 2.5-3.5z" />
       <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.74-3.41A2.5 2.5 0 0 0 22 14c0-1.5-1-2-1-2s1-.5 1-2a2.5 2.5 0 0 0-2.3-2.48A2.5 2.5 0 0 0 17 5.5a2.5 2.5 0 0 0-2.5-3.5z" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
@@ -70,88 +59,68 @@ export function ChartIcon(props: IconBaseProps) {
 }
 
 export function ClockIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Clock',
+    <>
       <circle cx="12" cy="12" r="10" />
       <polyline points="12 6 12 12 16 14" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function FileIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'File',
+    <>
       <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
       <polyline points="14 2 14 8 20 8" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function HammerIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Hammer',
+    <>
       <path d="M18.42 13.59L7.46 2.63a1 1 0 0 0-1.42 0l-4.7 4.7a1 1 0 0 0 0 1.42L11 18.23l1.07-1.07-1.41-1.41 1.42-1.42 1.41 1.41 1.41-1.41-1.41-1.41 1.42-1.42 1.41 1.41 2-2z" />
       <path d="M13 18l6 6" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function InfoIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Info',
+    <>
       <circle cx="12" cy="12" r="10" />
       <line x1="12" y1="16" x2="12" y2="12" />
       <line x1="12" y1="8" x2="12.01" y2="8" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function PlayIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <polygon points="5 3 19 12 5 21 5 3" />
-    </IconBase>
+  return createStrokeIcon(
+    'Play',
+    <polygon points="5 3 19 12 5 21 5 3" />,
+    props
   );
 }
 
 export function RefreshCwIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'RefreshCw',
+    <>
       <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
       <path d="M21 3v5h-5" />
       <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
       <path d="M3 21v-5h5" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
@@ -185,58 +154,44 @@ export function RocketIcon(props: IconBaseProps) {
 }
 
 export function SaveIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Save',
+    <>
       <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
       <polyline points="17 21 17 13 7 13 7 21" />
       <polyline points="7 3 7 8 15 8" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function SettingsIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Settings',
+    <>
       <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
       <circle cx="12" cy="12" r="3" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function ShieldCheckIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'ShieldCheck',
+    <>
       <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
       <path d="M9 12l2 2 4-4" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function ShieldIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-    </IconBase>
+  return createStrokeIcon(
+    'Shield',
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
+    props
   );
 }
 
@@ -255,87 +210,67 @@ export function TargetIcon(props: IconBaseProps) {
 }
 
 export function TerminalIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Terminal',
+    <>
       <polyline points="4 17 10 11 4 5" />
       <line x1="12" y1="19" x2="20" y2="19" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function TrashIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Trash',
+    <>
       <polyline points="3 6 5 6 21 6" />
       <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function TrendingUpIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'TrendingUp',
+    <>
       <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
       <polyline points="17 6 23 6 23 12" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function UploadIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Upload',
+    <>
       <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4" />
       <polyline points="17 8 12 3 7 8" />
       <line x1="12" y1="3" x2="12" y2="15" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function WalletIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
+  return createStrokeIcon(
+    'Wallet',
+    <>
       <path d="M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1" />
       <path d="M16 12h5" />
       <circle cx="16" cy="12" r="1" />
-    </IconBase>
+    </>,
+    props
   );
 }
 
 export function ZapIcon(props: IconBaseProps) {
-  return (
-    <IconBase
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
-    </IconBase>
+  return createStrokeIcon(
+    'Zap',
+    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
+    props
   );
 }
 

package/src/hooks/simulation-helpers.ts

@@ -0,0 +1,31 @@
+import { SimulationNode } from './simulation-types';
+
+/**
+ * Stabilizes nodes by zeroing velocities and rounding positions.
+ * Extracted to reduce duplicate patterns in useForceSimulation.
+ */
+export function stabilizeNodes(nodes: SimulationNode[]): void {
+  nodes.forEach((n) => {
+    (n as any).vx = 0;
+    (n as any).vy = 0;
+    if (typeof n.x === 'number') n.x = Number(n.x.toFixed(3));
+    if (typeof n.y === 'number') n.y = Number(n.y.toFixed(3));
+  });
+}
+
+/**
+ * Seeds nodes with random positions within bounds.
+ * Used as fallback when initial positioning fails.
+ */
+export function seedRandomPositions(
+  nodes: SimulationNode[],
+  width: number,
+  height: number
+): void {
+  nodes.forEach((n) => {
+    n.x = Math.random() * width;
+    n.y = Math.random() * height;
+    (n as any).vx = (Math.random() - 0.5) * 10;
+    (n as any).vy = (Math.random() - 0.5) * 10;
+  });
+}