feature: Enhance Konva rendering with React.memo optimization

Wrap PatternCanvas and PatternLayer components with React.memo to
prevent unnecessary re-renders when props haven't changed. This builds
on the existing useMemo optimizations and provides better performance
with large patterns and frequent UI updates.

Benefits:
- Prevents re-renders when parent components update
- Improves render performance during active sewing
- Smoother user experience with complex patterns

Fixes #43

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/PatternCanvas/PatternCanvas.tsx

@@ -1,4 +1,4 @@
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, memo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import {
   useMachineStore,
@@ -23,7 +23,7 @@ import { ZoomControls } from "./ZoomControls";
 import { PatternLayer } from "./PatternLayer";
 import { useCanvasViewport, usePatternTransform } from "@/hooks";
 
-export function PatternCanvas() {
+export const PatternCanvas = memo(function PatternCanvas() {
   // Machine store
   const { sewingProgress, machineInfo } = useMachineStore(
     useShallow((state) => ({
@@ -277,4 +277,4 @@ export function PatternCanvas() {
       </CardContent>
     </Card>
   );
-}
+});

src/components/PatternCanvas/PatternLayer.tsx

@@ -5,7 +5,7 @@
  * Handles both interactive (draggable/rotatable) and locked states
  */
 
-import { useMemo, type RefObject } from "react";
+import { useMemo, memo, type RefObject } from "react";
 import { Group, Transformer } from "react-konva";
 import type Konva from "konva";
 import type { KonvaEventObject } from "konva/lib/Node";
@@ -30,7 +30,7 @@ interface PatternLayerProps {
   attachTransformer?: () => void;
 }
 
-export function PatternLayer({
+export const PatternLayer = memo(function PatternLayer({
   pesData,
   offset,
   rotation = 0,
@@ -143,4 +143,4 @@ export function PatternLayer({
       )}
     </>
   );
-}
+});