Merge pull request #52 from jhbruhn/fix/38-store-initialization-side-effects

fix: Remove module-level side effect from useMachineStore initialization

.claude/settings.local.json

@@ -4,7 +4,12 @@
       "Bash(npm run build:*)",
       "Bash(npm run lint)",
       "Bash(cat:*)",
-      "Bash(npm run dev:electron:*)"
+      "Bash(npm run dev:electron:*)",
+      "Bash(npm run lint:*)",
+      "Bash(npm test:*)",
+      "Bash(npm run:*)",
+      "Bash(gh issue create:*)",
+      "Bash(gh label create:*)"
     ],
     "deny": [],
     "ask": []

src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useMachineStore } from "./stores/useMachineStore";
+import { useMachineCacheStore } from "./stores/useMachineCacheStore";
 import { usePatternStore } from "./stores/usePatternStore";
 import { useUIStore } from "./stores/useUIStore";
 import { AppHeader } from "./components/AppHeader";
@@ -8,6 +9,13 @@ import { LeftSidebar } from "./components/LeftSidebar";
 import { PatternCanvas } from "./components/PatternCanvas";
 import { PatternCanvasPlaceholder } from "./components/PatternCanvasPlaceholder";
 import { BluetoothDevicePicker } from "./components/BluetoothDevicePicker";
+import { transformStitchesRotation } from "./utils/rotationUtils";
+import { encodeStitchesToPen } from "./formats/pen/encoder";
+import { decodePenData } from "./formats/pen/decoder";
+import {
+  calculatePatternCenter,
+  calculateBoundsFromDecodedStitches,
+} from "./components/PatternCanvas/patternCanvasHelpers";
 import "./App.css";
 
 function App() {
@@ -16,8 +24,13 @@ function App() {
     document.title = `Respira v${__APP_VERSION__}`;
   }, []);
 
-  // Machine store - for auto-loading cached pattern
+  // Initialize machine store subscriptions (once on mount)
-  const { resumedPattern, resumeFileName } = useMachineStore(
+  useEffect(() => {
+    useMachineStore.getState().initialize();
+  }, []);
+
+  // Machine cache store - for auto-loading cached pattern
+  const { resumedPattern, resumeFileName } = useMachineCacheStore(
     useShallow((state) => ({
       resumedPattern: state.resumedPattern,
       resumeFileName: state.resumeFileName,
@@ -25,10 +38,20 @@ function App() {
   );
 
   // Pattern store - for auto-loading cached pattern
-  const { pesData, setPattern, setPatternOffset } = usePatternStore(
+  const {
+    pesData,
+    uploadedPesData,
+    setPattern,
+    setUploadedPattern,
+    setPatternRotation,
+    setPatternOffset,
+  } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
+      uploadedPesData: state.uploadedPesData,
       setPattern: state.setPattern,
+      setUploadedPattern: state.setUploadedPattern,
+      setPatternRotation: state.setPatternRotation,
       setPatternOffset: state.setPatternOffset,
     })),
   );
@@ -47,23 +70,130 @@ function App() {
 
   // Auto-load cached pattern when available
   useEffect(() => {
-    if (resumedPattern && !pesData) {
+    // Only auto-load if we have a resumed pattern and haven't already loaded it
+    if (resumedPattern && !uploadedPesData && !pesData) {
+      if (!resumedPattern.pesData) {
+        console.error(
+          "[App] ERROR: resumedPattern has no pesData!",
+          resumedPattern,
+        );
+        return;
+      }
+
       console.log(
         "[App] Loading resumed pattern:",
         resumeFileName,
         "Offset:",
         resumedPattern.patternOffset,
+        "Rotation:",
+        resumedPattern.patternRotation,
+        "Has stitches:",
+        resumedPattern.pesData.stitches?.length || 0,
+        "Has cached uploaded data:",
+        !!resumedPattern.uploadedPesData,
       );
-      setPattern(resumedPattern.pesData, resumeFileName || "");
+
-      // Restore the cached pattern offset
+      const originalPesData = resumedPattern.pesData;
-      if (resumedPattern.patternOffset) {
+      const cachedUploadedPesData = resumedPattern.uploadedPesData;
-        setPatternOffset(
+      const rotation = resumedPattern.patternRotation || 0;
-          resumedPattern.patternOffset.x,
+      const originalOffset = resumedPattern.patternOffset || { x: 0, y: 0 };
-          resumedPattern.patternOffset.y,
+
+      // Set the original pattern data for editing
+      setPattern(originalPesData, resumeFileName || "");
+
+      // Restore the original offset (setPattern resets it to 0,0)
+      setPatternOffset(originalOffset.x, originalOffset.y);
+
+      // Set rotation if present
+      if (rotation !== 0) {
+        setPatternRotation(rotation);
+      }
+
+      // Use cached uploadedPesData if available, otherwise recalculate
+      if (cachedUploadedPesData) {
+        // Use the exact uploaded data from cache
+        // Calculate the adjusted offset (same logic as upload)
+        if (rotation !== 0) {
+          const originalCenter = calculatePatternCenter(originalPesData.bounds);
+          const rotatedCenter = calculatePatternCenter(
+            cachedUploadedPesData.bounds,
+          );
+          const centerShiftX = rotatedCenter.x - originalCenter.x;
+          const centerShiftY = rotatedCenter.y - originalCenter.y;
+
+          const adjustedOffset = {
+            x: originalOffset.x + centerShiftX,
+            y: originalOffset.y + centerShiftY,
+          };
+
+          setUploadedPattern(
+            cachedUploadedPesData,
+            adjustedOffset,
+            resumeFileName || undefined,
+          );
+        } else {
+          setUploadedPattern(
+            cachedUploadedPesData,
+            originalOffset,
+            resumeFileName || undefined,
+          );
+        }
+      } else if (rotation !== 0) {
+        // Fallback: recalculate if no cached uploaded data (shouldn't happen for new uploads)
+        console.warn("[App] No cached uploaded data, recalculating rotation");
+        const rotatedStitches = transformStitchesRotation(
+          originalPesData.stitches,
+          rotation,
+          originalPesData.bounds,
+        );
+
+        const penResult = encodeStitchesToPen(rotatedStitches);
+        const penData = new Uint8Array(penResult.penBytes);
+        const decoded = decodePenData(penData);
+        const rotatedBounds = calculateBoundsFromDecodedStitches(decoded);
+
+        const originalCenter = calculatePatternCenter(originalPesData.bounds);
+        const rotatedCenter = calculatePatternCenter(rotatedBounds);
+        const centerShiftX = rotatedCenter.x - originalCenter.x;
+        const centerShiftY = rotatedCenter.y - originalCenter.y;
+
+        const adjustedOffset = {
+          x: originalOffset.x + centerShiftX,
+          y: originalOffset.y + centerShiftY,
+        };
+
+        const rotatedPesData = {
+          ...originalPesData,
+          stitches: rotatedStitches,
+          penData,
+          penStitches: decoded,
+          bounds: rotatedBounds,
+        };
+
+        setUploadedPattern(
+          rotatedPesData,
+          adjustedOffset,
+          resumeFileName || undefined,
+        );
+      } else {
+        // No rotation - uploaded pattern is same as original
+        setUploadedPattern(
+          originalPesData,
+          originalOffset,
+          resumeFileName || undefined,
         );
       }
     }
-  }, [resumedPattern, resumeFileName, pesData, setPattern, setPatternOffset]);
+  }, [
+    resumedPattern,
+    resumeFileName,
+    uploadedPesData,
+    pesData,
+    setPattern,
+    setUploadedPattern,
+    setPatternRotation,
+    setPatternOffset,
+  ]);
 
   return (
     <div className="h-screen flex flex-col bg-gray-100 dark:bg-gray-900 overflow-hidden">
@@ -76,7 +206,11 @@ function App() {
 
           {/* Right Column - Pattern Preview */}
           <div className="flex flex-col lg:overflow-hidden lg:h-full">
-            {pesData ? <PatternCanvas /> : <PatternCanvasPlaceholder />}
+            {pesData || uploadedPesData ? (
+              <PatternCanvas />
+            ) : (
+              <PatternCanvasPlaceholder />
+            )}
           </div>
         </div>
 

src/components/FileUpload.tsx

@@ -1,6 +1,8 @@
 import { useState, useCallback } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useMachineStore, usePatternUploaded } from "../stores/useMachineStore";
+import { useMachineUploadStore } from "../stores/useMachineUploadStore";
+import { useMachineCacheStore } from "../stores/useMachineCacheStore";
 import { usePatternStore } from "../stores/usePatternStore";
 import { useUIStore } from "../stores/useUIStore";
 import {
@@ -40,25 +42,28 @@ import { cn } from "@/lib/utils";
 
 export function FileUpload() {
   // Machine store
-  const {
+  const { isConnected, machineStatus, machineInfo } = useMachineStore(
-    isConnected,
-    machineStatus,
-    uploadProgress,
-    isUploading,
-    machineInfo,
-    resumeAvailable,
-    resumeFileName,
-    uploadPattern,
-  } = useMachineStore(
     useShallow((state) => ({
       isConnected: state.isConnected,
       machineStatus: state.machineStatus,
+      machineInfo: state.machineInfo,
+    })),
+  );
+
+  // Machine upload store
+  const { uploadProgress, isUploading, uploadPattern } = useMachineUploadStore(
+    useShallow((state) => ({
       uploadProgress: state.uploadProgress,
       isUploading: state.isUploading,
-      machineInfo: state.machineInfo,
+      uploadPattern: state.uploadPattern,
+    })),
+  );
+
+  // Machine cache store
+  const { resumeAvailable, resumeFileName } = useMachineCacheStore(
+    useShallow((state) => ({
       resumeAvailable: state.resumeAvailable,
       resumeFileName: state.resumeFileName,
-      uploadPattern: state.uploadPattern,
     })),
   );
 
@@ -206,11 +211,14 @@ export function FileUpload() {
         setUploadedPattern(pesDataForUpload, adjustedOffset);
 
         // Upload the pattern with offset
+        // IMPORTANT: Pass original unrotated pesData for caching, rotated pesData for upload
         uploadPattern(
           penDataToUpload,
           pesDataForUpload,
           displayFileName,
           adjustedOffset,
+          patternRotation,
+          pesData, // Original unrotated pattern for caching
         );
 
         return; // Early return to skip the upload below
@@ -226,6 +234,8 @@ export function FileUpload() {
         pesDataForUpload,
         displayFileName,
         patternOffset,
+        0, // No rotation
+        // No need to pass originalPesData since it's the same as pesDataForUpload
       );
     }
   }, [

src/components/LeftSidebar.tsx

@@ -13,14 +13,16 @@ export function LeftSidebar() {
     })),
   );
 
-  const { pesData } = usePatternStore(
+  const { pesData, uploadedPesData } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
+      uploadedPesData: state.uploadedPesData,
     })),
   );
 
   // Derived state: pattern is uploaded if machine has pattern info
   const patternUploaded = usePatternUploaded();
+  const hasPattern = pesData || uploadedPesData;
 
   return (
     <div className="flex flex-col gap-4 md:gap-5 lg:gap-6 lg:overflow-hidden">
@@ -31,7 +33,7 @@ export function LeftSidebar() {
       {isConnected && !patternUploaded && <FileUpload />}
 
       {/* Compact Pattern Summary - Show after upload (during sewing stages) */}
-      {isConnected && patternUploaded && pesData && <PatternSummaryCard />}
+      {isConnected && patternUploaded && hasPattern && <PatternSummaryCard />}
 
       {/* Progress Monitor - Show when pattern is uploaded */}
       {isConnected && patternUploaded && (

src/components/PatternCanvas/KonvaComponents.tsx

@@ -157,6 +157,77 @@ export const Stitches = memo(
     currentStitchIndex,
     showProgress = false,
   }: StitchesProps) => {
+    // PERFORMANCE OPTIMIZATION:
+    // Separate static group structure (doesn't change during sewing)
+    // from dynamic completion status (changes with currentStitchIndex).
+    // This prevents recalculating all groups on every progress update.
+    //
+    // For very large patterns (>100k stitches), consider:
+    // - Virtualization: render only visible stitches based on viewport
+    // - LOD (Level of Detail): reduce stitch density when zoomed out
+    // - Web Workers: offload grouping calculations to background thread
+
+    interface StaticStitchGroup {
+      color: string;
+      points: number[];
+      isJump: boolean;
+      startIndex: number; // First stitch index in this group
+      endIndex: number; // Last stitch index in this group
+    }
+
+    // Static grouping - only recalculates when stitches or colors change
+    const staticGroups = useMemo(() => {
+      const groups: StaticStitchGroup[] = [];
+      let currentGroup: StaticStitchGroup | null = null;
+
+      let prevX = 0;
+      let prevY = 0;
+
+      for (let i = 0; i < stitches.length; i++) {
+        const stitch = stitches[i];
+        const [x, y, cmd, colorIndex] = stitch;
+        const isJump = (cmd & MOVE) !== 0;
+        const color = getThreadColor(pesData, colorIndex);
+
+        // Start new group if color or type changes (NOT completion status)
+        if (
+          !currentGroup ||
+          currentGroup.color !== color ||
+          currentGroup.isJump !== isJump
+        ) {
+          // For jump stitches, include previous position
+          if (isJump && i > 0) {
+            currentGroup = {
+              color,
+              points: [prevX, prevY, x, y],
+              isJump,
+              startIndex: i,
+              endIndex: i,
+            };
+          } else {
+            currentGroup = {
+              color,
+              points: [x, y],
+              isJump,
+              startIndex: i,
+              endIndex: i,
+            };
+          }
+          groups.push(currentGroup);
+        } else {
+          currentGroup.points.push(x, y);
+          currentGroup.endIndex = i;
+        }
+
+        prevX = x;
+        prevY = y;
+      }
+
+      return groups;
+    }, [stitches, pesData]);
+
+    // Dynamic grouping - adds completion status based on currentStitchIndex
+    // Only needs to check group boundaries, not rebuild everything
     const stitchGroups = useMemo(() => {
       interface StitchGroup {
         color: string;
@@ -166,53 +237,75 @@ export const Stitches = memo(
       }
 
       const groups: StitchGroup[] = [];
-      let currentGroup: StitchGroup | null = null;
 
-      let prevX = 0;
+      for (const staticGroup of staticGroups) {
-      let prevY = 0;
+        // Check if this group needs to be split based on completion
-
-      for (let i = 0; i < stitches.length; i++) {
-        const stitch = stitches[i];
-        const [x, y, cmd, colorIndex] = stitch;
-        const isCompleted = i < currentStitchIndex;
-        const isJump = (cmd & MOVE) !== 0;
-        const color = getThreadColor(pesData, colorIndex);
-
-        // Start new group if color/status/type changes
         if (
-          !currentGroup ||
+          currentStitchIndex > staticGroup.startIndex &&
-          currentGroup.color !== color ||
+          currentStitchIndex <= staticGroup.endIndex
-          currentGroup.completed !== isCompleted ||
-          currentGroup.isJump !== isJump
         ) {
-          // For jump stitches, we need to create a line from previous position to current position
+          // Group is partially completed - need to split
-          // So we include both the previous point and current point
+          // This is rare during sewing (only happens when crossing group boundaries)
-          if (isJump && i > 0) {
-            currentGroup = {
-              color,
-              points: [prevX, prevY, x, y],
-              completed: isCompleted,
-              isJump,
-            };
-          } else {
-            currentGroup = {
-              color,
-              points: [x, y],
-              completed: isCompleted,
-              isJump,
-            };
-          }
-          groups.push(currentGroup);
-        } else {
-          currentGroup.points.push(x, y);
-        }
 
-        prevX = x;
+          // Rebuild this group with completion split
-        prevY = y;
+          let currentSubGroup: StitchGroup | null = null;
+          const groupStitches = stitches.slice(
+            staticGroup.startIndex,
+            staticGroup.endIndex + 1,
+          );
+
+          let prevX =
+            staticGroup.startIndex > 0
+              ? stitches[staticGroup.startIndex - 1][0]
+              : 0;
+          let prevY =
+            staticGroup.startIndex > 0
+              ? stitches[staticGroup.startIndex - 1][1]
+              : 0;
+
+          for (let i = 0; i < groupStitches.length; i++) {
+            const absoluteIndex = staticGroup.startIndex + i;
+            const stitch = groupStitches[i];
+            const [x, y] = stitch;
+            const isCompleted = absoluteIndex < currentStitchIndex;
+
+            if (!currentSubGroup || currentSubGroup.completed !== isCompleted) {
+              if (staticGroup.isJump && i > 0) {
+                currentSubGroup = {
+                  color: staticGroup.color,
+                  points: [prevX, prevY, x, y],
+                  completed: isCompleted,
+                  isJump: staticGroup.isJump,
+                };
+              } else {
+                currentSubGroup = {
+                  color: staticGroup.color,
+                  points: [x, y],
+                  completed: isCompleted,
+                  isJump: staticGroup.isJump,
+                };
+              }
+              groups.push(currentSubGroup);
+            } else {
+              currentSubGroup.points.push(x, y);
+            }
+
+            prevX = x;
+            prevY = y;
+          }
+        } else {
+          // Group is fully completed or fully incomplete
+          groups.push({
+            color: staticGroup.color,
+            points: staticGroup.points,
+            completed: currentStitchIndex > staticGroup.endIndex,
+            isJump: staticGroup.isJump,
+          });
+        }
       }
 
       return groups;
-    }, [stitches, pesData, currentStitchIndex]);
+    }, [staticGroups, currentStitchIndex, stitches]);
 
     return (
       <Group name="stitches">
@@ -239,6 +332,16 @@ export const Stitches = memo(
       </Group>
     );
   },
+  // Custom comparison to prevent unnecessary re-renders
+  (prevProps, nextProps) => {
+    // Re-render only if these values actually changed
+    return (
+      prevProps.stitches === nextProps.stitches &&
+      prevProps.pesData === nextProps.pesData &&
+      prevProps.currentStitchIndex === nextProps.currentStitchIndex &&
+      prevProps.showProgress === nextProps.showProgress
+    );
+  },
 );
 
 Stitches.displayName = "Stitches";

src/components/PatternCanvas/PatternCanvas.tsx

@@ -4,6 +4,7 @@ import {
   useMachineStore,
   usePatternUploaded,
 } from "../../stores/useMachineStore";
+import { useMachineUploadStore } from "../../stores/useMachineUploadStore";
 import { usePatternStore } from "../../stores/usePatternStore";
 import { Stage, Layer } from "react-konva";
 import Konva from "konva";
@@ -25,10 +26,16 @@ import { usePatternTransform } from "../../hooks/usePatternTransform";
 
 export function PatternCanvas() {
   // Machine store
-  const { sewingProgress, machineInfo, isUploading } = useMachineStore(
+  const { sewingProgress, machineInfo } = useMachineStore(
     useShallow((state) => ({
       sewingProgress: state.sewingProgress,
       machineInfo: state.machineInfo,
+    })),
+  );
+
+  // Machine upload store
+  const { isUploading } = useMachineUploadStore(
+    useShallow((state) => ({
       isUploading: state.isUploading,
     })),
   );
@@ -190,7 +197,9 @@ export function PatternCanvas() {
               </Layer>
 
               {/* Original pattern layer: draggable with transformer (shown before upload starts) */}
-              <Layer visible={!isUploading && !patternUploaded}>
+              <Layer
+                visible={!isUploading && !patternUploaded && !uploadedPesData}
+              >
                 {pesData && (
                   <PatternLayer
                     pesData={pesData}
@@ -209,7 +218,9 @@ export function PatternCanvas() {
               </Layer>
 
               {/* Uploaded pattern layer: locked, rotation baked in (shown during and after upload) */}
-              <Layer visible={isUploading || patternUploaded}>
+              <Layer
+                visible={isUploading || patternUploaded || !!uploadedPesData}
+              >
                 {uploadedPesData && (
                   <PatternLayer
                     pesData={uploadedPesData}
@@ -241,12 +252,12 @@ export function PatternCanvas() {
 
                     <PatternPositionIndicator
                       offset={
-                        isUploading || patternUploaded
+                        isUploading || patternUploaded || uploadedPesData
                           ? initialUploadedPatternOffset
                           : localPatternOffset
                       }
                       rotation={localPatternRotation}
-                      isLocked={patternUploaded}
+                      isLocked={patternUploaded || !!uploadedPesData}
                       isUploading={isUploading}
                     />
 
@@ -257,7 +268,10 @@ export function PatternCanvas() {
                       onZoomReset={handleZoomReset}
                       onCenterPattern={handleCenterPattern}
                       canCenterPattern={
-                        !!pesData && !patternUploaded && !isUploading
+                        !!pesData &&
+                        !patternUploaded &&
+                        !isUploading &&
+                        !uploadedPesData
                       }
                     />
                   </>

src/components/PatternSummaryCard.tsx

@@ -25,14 +25,16 @@ export function PatternSummaryCard() {
   );
 
   // Pattern store
-  const { pesData, currentFileName } = usePatternStore(
+  const { pesData, uploadedPesData, currentFileName } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
+      uploadedPesData: state.uploadedPesData,
       currentFileName: state.currentFileName,
     })),
   );
 
-  if (!pesData) return null;
+  const displayPattern = uploadedPesData || pesData;
+  if (!displayPattern) return null;
 
   const canDelete = canDeletePattern(machineStatus);
   return (
@@ -52,7 +54,7 @@ export function PatternSummaryCard() {
         </div>
       </CardHeader>
       <CardContent className="px-4 pt-0 pb-4">
-        <PatternInfo pesData={pesData} />
+        <PatternInfo pesData={displayPattern} />
 
         {canDelete && (
           <Button

src/components/ProgressMonitor.tsx

@@ -52,6 +52,8 @@ export function ProgressMonitor() {
 
   // Pattern store
   const pesData = usePatternStore((state) => state.pesData);
+  const uploadedPesData = usePatternStore((state) => state.uploadedPesData);
+  const displayPattern = uploadedPesData || pesData;
   const currentBlockRef = useRef<HTMLDivElement>(null);
 
   // State indicators
@@ -60,8 +62,8 @@ export function ProgressMonitor() {
 
   // Use PEN stitch count as fallback when machine reports 0 total stitches
   const totalStitches = patternInfo
-    ? patternInfo.totalStitches === 0 && pesData?.penStitches
+    ? patternInfo.totalStitches === 0 && displayPattern?.penStitches
-      ? pesData.penStitches.stitches.length
+      ? displayPattern.penStitches.stitches.length
       : patternInfo.totalStitches
     : 0;
 
@@ -72,7 +74,7 @@ export function ProgressMonitor() {
 
   // Calculate color block information from decoded penStitches
   const colorBlocks = useMemo(() => {
-    if (!pesData || !pesData.penStitches) return [];
+    if (!displayPattern || !displayPattern.penStitches) return [];
 
     const blocks: Array<{
       colorIndex: number;
@@ -87,8 +89,8 @@ export function ProgressMonitor() {
     }> = [];
 
     // Use the pre-computed color blocks from decoded PEN data
-    for (const penBlock of pesData.penStitches.colorBlocks) {
+    for (const penBlock of displayPattern.penStitches.colorBlocks) {
-      const thread = pesData.threads[penBlock.colorIndex];
+      const thread = displayPattern.threads[penBlock.colorIndex];
       blocks.push({
         colorIndex: penBlock.colorIndex,
         threadHex: thread?.hex || "#000000",
@@ -103,7 +105,7 @@ export function ProgressMonitor() {
     }
 
     return blocks;
-  }, [pesData]);
+  }, [displayPattern]);
 
   // Determine current color block based on current stitch
   const currentStitch = sewingProgress?.currentStitch || 0;

src/hooks/useCanvasViewport.ts

@@ -5,13 +5,7 @@
  * Handles wheel zoom and button zoom operations
  */
 
-import {
+import { useState, useEffect, useCallback, type RefObject } from "react";
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  type RefObject,
-} from "react";
 import type Konva from "konva";
 import type { PesPatternData } from "../formats/import/pesImporter";
 import type { MachineInfo } from "../types/machine";
@@ -34,8 +28,11 @@ export function useCanvasViewport({
   const [stagePos, setStagePos] = useState({ x: 0, y: 0 });
   const [stageScale, setStageScale] = useState(1);
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const initialScaleRef = useRef<number>(1);
+  const [initialScale, setInitialScale] = useState(1);
-  const prevPesDataRef = useRef<PesPatternData | null>(null);
+
+  // Track the last processed pattern to detect changes during render
+  const [lastProcessedPattern, setLastProcessedPattern] =
+    useState<PesPatternData | null>(null);
 
   // Track container size with ResizeObserver
   useEffect(() => {
@@ -59,41 +56,36 @@ export function useCanvasViewport({
     return () => resizeObserver.disconnect();
   }, [containerRef]);
 
-  // Calculate and store initial scale when pattern or hoop changes
+  // Reset viewport when pattern changes (during render, not in effect)
-  useEffect(() => {
+  // This follows the React-recommended pattern for deriving state from props
-    // Use whichever pattern is available (uploaded or original)
+  const currentPattern = uploadedPesData || pesData;
-    const currentPattern = uploadedPesData || pesData;
+  if (
-    if (!currentPattern || containerSize.width === 0) {
+    currentPattern &&
-      prevPesDataRef.current = null;
+    currentPattern !== lastProcessedPattern &&
-      return;
+    containerSize.width > 0
-    }
+  ) {
+    const { bounds } = currentPattern;
+    const viewWidth = machineInfo
+      ? machineInfo.maxWidth
+      : bounds.maxX - bounds.minX;
+    const viewHeight = machineInfo
+      ? machineInfo.maxHeight
+      : bounds.maxY - bounds.minY;
 
-    // Only recalculate if pattern changed
+    const newInitialScale = calculateInitialScale(
-    if (prevPesDataRef.current !== currentPattern) {
+      containerSize.width,
-      prevPesDataRef.current = currentPattern;
+      containerSize.height,
+      viewWidth,
+      viewHeight,
+    );
 
-      const { bounds } = currentPattern;
+    // Update state during render when pattern changes
-      const viewWidth = machineInfo
+    // This is the recommended React pattern for resetting state based on props
-        ? machineInfo.maxWidth
+    setLastProcessedPattern(currentPattern);
-        : bounds.maxX - bounds.minX;
+    setInitialScale(newInitialScale);
-      const viewHeight = machineInfo
+    setStageScale(newInitialScale);
-        ? machineInfo.maxHeight
+    setStagePos({ x: containerSize.width / 2, y: containerSize.height / 2 });
-        : bounds.maxY - bounds.minY;
+  }
-
-      const initialScale = calculateInitialScale(
-        containerSize.width,
-        containerSize.height,
-        viewWidth,
-        viewHeight,
-      );
-      initialScaleRef.current = initialScale;
-
-      // Reset view when pattern changes
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setStageScale(initialScale);
-      setStagePos({ x: containerSize.width / 2, y: containerSize.height / 2 });
-    }
-  }, [pesData, uploadedPesData, machineInfo, containerSize]);
 
   // Wheel zoom handler
   const handleWheel = useCallback((e: Konva.KonvaEventObject<WheelEvent>) => {
@@ -159,10 +151,9 @@ export function useCanvasViewport({
   }, [containerSize]);
 
   const handleZoomReset = useCallback(() => {
-    const initialScale = initialScaleRef.current;
     setStageScale(initialScale);
     setStagePos({ x: containerSize.width / 2, y: containerSize.height / 2 });
-  }, [containerSize]);
+  }, [initialScale, containerSize]);
 
   return {
     // State

src/hooks/usePatternTransform.ts

@@ -39,22 +39,41 @@ export function usePatternTransform({
   const patternGroupRef = useRef<Konva.Group | null>(null);
   const transformerRef = useRef<Konva.Transformer | null>(null);
 
-  // Update pattern offset when initialPatternOffset changes
+  // Track previous prop values to detect external changes
-  if (
+  const prevOffsetRef = useRef(initialPatternOffset);
-    initialPatternOffset &&
+  const prevRotationRef = useRef(initialPatternRotation);
-    (localPatternOffset.x !== initialPatternOffset.x ||
-      localPatternOffset.y !== initialPatternOffset.y)
-  ) {
-    setLocalPatternOffset(initialPatternOffset);
-  }
 
-  // Update pattern rotation when initialPatternRotation changes
+  // Sync local state with parent props when they change externally
-  if (
+  // This implements a "partially controlled" pattern needed for Konva drag interactions:
-    initialPatternRotation !== undefined &&
+  // - Local state enables optimistic updates during drag/transform (immediate visual feedback)
-    localPatternRotation !== initialPatternRotation
+  // - Parent props sync when external changes occur (e.g., pattern upload resets position)
-  ) {
+  // - Previous value refs prevent sync loops by only updating when props genuinely change
-    setLocalPatternRotation(initialPatternRotation);
+  useEffect(() => {
-  }
+    if (
+      initialPatternOffset &&
+      (prevOffsetRef.current.x !== initialPatternOffset.x ||
+        prevOffsetRef.current.y !== initialPatternOffset.y)
+    ) {
+      // This setState in effect is intentional and safe: it only runs when the parent
+      // prop changes, not in response to our own local updates
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setLocalPatternOffset(initialPatternOffset);
+      prevOffsetRef.current = initialPatternOffset;
+    }
+  }, [initialPatternOffset]);
+
+  useEffect(() => {
+    if (
+      initialPatternRotation !== undefined &&
+      prevRotationRef.current !== initialPatternRotation
+    ) {
+      // This setState in effect is intentional and safe: it only runs when the parent
+      // prop changes, not in response to our own local updates
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setLocalPatternRotation(initialPatternRotation);
+      prevRotationRef.current = initialPatternRotation;
+    }
+  }, [initialPatternRotation]);
 
   // Attach/detach transformer based on state
   const attachTransformer = useCallback(() => {

src/platform/browser/BrowserStorageService.ts

@@ -15,8 +15,17 @@ export class BrowserStorageService implements IStorageService {
     pesData: PesPatternData,
     fileName: string,
     patternOffset?: { x: number; y: number },
+    patternRotation?: number,
+    uploadedPesData?: PesPatternData,
   ): Promise<void> {
-    PatternCacheService.savePattern(uuid, pesData, fileName, patternOffset);
+    PatternCacheService.savePattern(
+      uuid,
+      pesData,
+      fileName,
+      patternOffset,
+      patternRotation,
+      uploadedPesData,
+    );
   }
 
   async getPatternByUUID(uuid: string): Promise<ICachedPattern | null> {

src/platform/electron/ElectronStorageService.ts

@@ -20,6 +20,8 @@ export class ElectronStorageService implements IStorageService {
     pesData: PesPatternData,
     fileName: string,
     patternOffset?: { x: number; y: number },
+    patternRotation?: number,
+    uploadedPesData?: PesPatternData,
   ): Promise<void> {
     // Convert Uint8Array to array for JSON serialization over IPC
     const serializable = {
@@ -28,9 +30,16 @@ export class ElectronStorageService implements IStorageService {
         ...pesData,
         penData: Array.from(pesData.penData),
       },
+      uploadedPesData: uploadedPesData
+        ? {
+            ...uploadedPesData,
+            penData: Array.from(uploadedPesData.penData),
+          }
+        : undefined,
       fileName,
       timestamp: Date.now(),
       patternOffset,
+      patternRotation,
     };
 
     // Fire and forget (sync-like behavior to match interface)
@@ -51,6 +60,17 @@ export class ElectronStorageService implements IStorageService {
         pattern.pesData.penData = new Uint8Array(pattern.pesData.penData);
       }
 
+      if (
+        pattern &&
+        pattern.uploadedPesData &&
+        Array.isArray(pattern.uploadedPesData.penData)
+      ) {
+        // Restore Uint8Array from array for uploadedPesData
+        pattern.uploadedPesData.penData = new Uint8Array(
+          pattern.uploadedPesData.penData,
+        );
+      }
+
       return pattern;
     } catch (err) {
       console.error("[ElectronStorage] Failed to get pattern:", err);
@@ -69,6 +89,17 @@ export class ElectronStorageService implements IStorageService {
         pattern.pesData.penData = new Uint8Array(pattern.pesData.penData);
       }
 
+      if (
+        pattern &&
+        pattern.uploadedPesData &&
+        Array.isArray(pattern.uploadedPesData.penData)
+      ) {
+        // Restore Uint8Array from array for uploadedPesData
+        pattern.uploadedPesData.penData = new Uint8Array(
+          pattern.uploadedPesData.penData,
+        );
+      }
+
       return pattern;
     } catch (err) {
       console.error("[ElectronStorage] Failed to get latest pattern:", err);

src/platform/interfaces/IStorageService.ts

@@ -2,10 +2,12 @@ import type { PesPatternData } from "../../formats/import/pesImporter";
 
 export interface ICachedPattern {
   uuid: string;
-  pesData: PesPatternData;
+  pesData: PesPatternData; // Original unrotated pattern data
+  uploadedPesData?: PesPatternData; // Pattern with rotation applied (what was uploaded to machine)
   fileName: string;
   timestamp: number;
   patternOffset?: { x: number; y: number };
+  patternRotation?: number; // Rotation angle in degrees
 }
 
 export interface IStorageService {
@@ -14,6 +16,8 @@ export interface IStorageService {
     pesData: PesPatternData,
     fileName: string,
     patternOffset?: { x: number; y: number },
+    patternRotation?: number,
+    uploadedPesData?: PesPatternData,
   ): Promise<void>;
 
   getPatternByUUID(uuid: string): Promise<ICachedPattern | null>;

src/services/PatternCacheService.ts

@@ -2,10 +2,12 @@ import type { PesPatternData } from "../formats/import/pesImporter";
 
 interface CachedPattern {
   uuid: string;
-  pesData: PesPatternData;
+  pesData: PesPatternData; // Original unrotated pattern data
+  uploadedPesData?: PesPatternData; // Pattern with rotation applied (what was uploaded to machine)
   fileName: string;
   timestamp: number;
   patternOffset?: { x: number; y: number };
+  patternRotation?: number; // Rotation angle in degrees
 }
 
 const CACHE_KEY = "brother_pattern_cache";
@@ -39,6 +41,8 @@ export class PatternCacheService {
     pesData: PesPatternData,
     fileName: string,
     patternOffset?: { x: number; y: number },
+    patternRotation?: number,
+    uploadedPesData?: PesPatternData,
   ): void {
     try {
       // Convert penData Uint8Array to array for JSON serialization
@@ -47,12 +51,24 @@ export class PatternCacheService {
         penData: Array.from(pesData.penData) as unknown as Uint8Array,
       };
 
+      // Also convert uploadedPesData if present
+      const uploadedPesDataWithArrayPenData = uploadedPesData
+        ? {
+            ...uploadedPesData,
+            penData: Array.from(
+              uploadedPesData.penData,
+            ) as unknown as Uint8Array,
+          }
+        : undefined;
+
       const cached: CachedPattern = {
         uuid,
         pesData: pesDataWithArrayPenData,
+        uploadedPesData: uploadedPesDataWithArrayPenData,
         fileName,
         timestamp: Date.now(),
         patternOffset,
+        patternRotation,
       };
 
       localStorage.setItem(CACHE_KEY, JSON.stringify(cached));
@@ -63,6 +79,10 @@ export class PatternCacheService {
         uuid,
         "Offset:",
         patternOffset,
+        "Rotation:",
+        patternRotation,
+        "Has uploaded data:",
+        !!uploadedPesData,
       );
     } catch (err) {
       console.error("[PatternCache] Failed to save pattern:", err);
@@ -101,11 +121,23 @@ export class PatternCacheService {
         pattern.pesData.penData = new Uint8Array(pattern.pesData.penData);
       }
 
+      // Restore Uint8Array from array inside uploadedPesData if present
+      if (
+        pattern.uploadedPesData &&
+        Array.isArray(pattern.uploadedPesData.penData)
+      ) {
+        pattern.uploadedPesData.penData = new Uint8Array(
+          pattern.uploadedPesData.penData,
+        );
+      }
+
       console.log(
         "[PatternCache] Found cached pattern:",
         pattern.fileName,
         "UUID:",
         uuid,
+        "Has uploaded data:",
+        !!pattern.uploadedPesData,
       );
       return pattern;
     } catch (err) {
@@ -131,6 +163,16 @@ export class PatternCacheService {
         pattern.pesData.penData = new Uint8Array(pattern.pesData.penData);
       }
 
+      // Restore Uint8Array from array inside uploadedPesData if present
+      if (
+        pattern.uploadedPesData &&
+        Array.isArray(pattern.uploadedPesData.penData)
+      ) {
+        pattern.uploadedPesData.penData = new Uint8Array(
+          pattern.uploadedPesData.penData,
+        );
+      }
+
       return pattern;
     } catch (err) {
       console.error("[PatternCache] Failed to retrieve pattern:", err);

src/stores/useMachineCacheStore.ts

@@ -0,0 +1,194 @@
+import { create } from "zustand";
+import type { PesPatternData } from "../formats/import/pesImporter";
+import { uuidToString } from "../services/PatternCacheService";
+
+/**
+ * Machine Cache Store
+ *
+ * Manages pattern caching and resume functionality.
+ * Handles checking for cached patterns on the machine and loading them.
+ * Extracted from useMachineStore for better separation of concerns.
+ */
+
+interface MachineCacheState {
+  // Resume state
+  resumeAvailable: boolean;
+  resumeFileName: string | null;
+  resumedPattern: {
+    pesData: PesPatternData;
+    uploadedPesData?: PesPatternData;
+    patternOffset?: { x: number; y: number };
+    patternRotation?: number;
+  } | null;
+
+  // Actions
+  checkResume: () => Promise<PesPatternData | null>;
+  loadCachedPattern: () => Promise<{
+    pesData: PesPatternData;
+    uploadedPesData?: PesPatternData;
+    patternOffset?: { x: number; y: number };
+    patternRotation?: number;
+  } | null>;
+
+  // Helper methods for inter-store communication
+  setResumeAvailable: (available: boolean, fileName: string | null) => void;
+  clearResumeState: () => void;
+}
+
+export const useMachineCacheStore = create<MachineCacheState>((set, get) => ({
+  // Initial state
+  resumeAvailable: false,
+  resumeFileName: null,
+  resumedPattern: null,
+
+  /**
+   * Check for resumable pattern on the machine
+   * Queries the machine for its current pattern UUID and checks if we have it cached
+   */
+  checkResume: async (): Promise<PesPatternData | null> => {
+    try {
+      // Import here to avoid circular dependency
+      const { useMachineStore } = await import("./useMachineStore");
+      const { service, storageService } = useMachineStore.getState();
+
+      console.log("[Resume] Checking for cached pattern...");
+
+      const machineUuid = await service.getPatternUUID();
+      console.log(
+        "[Resume] Machine UUID:",
+        machineUuid ? uuidToString(machineUuid) : "none",
+      );
+
+      if (!machineUuid) {
+        console.log("[Resume] No pattern loaded on machine");
+        set({ resumeAvailable: false, resumeFileName: null });
+        return null;
+      }
+
+      const uuidStr = uuidToString(machineUuid);
+      const cached = await storageService.getPatternByUUID(uuidStr);
+
+      if (cached) {
+        console.log(
+          "[Resume] Pattern found in cache:",
+          cached.fileName,
+          "Offset:",
+          cached.patternOffset,
+          "Rotation:",
+          cached.patternRotation,
+          "Has uploaded data:",
+          !!cached.uploadedPesData,
+        );
+        console.log("[Resume] Auto-loading cached pattern...");
+        set({
+          resumeAvailable: true,
+          resumeFileName: cached.fileName,
+          resumedPattern: {
+            pesData: cached.pesData,
+            uploadedPesData: cached.uploadedPesData,
+            patternOffset: cached.patternOffset,
+            patternRotation: cached.patternRotation,
+          },
+        });
+
+        // Fetch pattern info from machine
+        try {
+          const info = await service.getPatternInfo();
+          useMachineStore.setState({ patternInfo: info });
+          console.log("[Resume] Pattern info loaded from machine");
+        } catch (err) {
+          console.error("[Resume] Failed to load pattern info:", err);
+        }
+
+        return cached.pesData;
+      } else {
+        console.log("[Resume] Pattern on machine not found in cache");
+        set({ resumeAvailable: false, resumeFileName: null });
+        return null;
+      }
+    } catch (err) {
+      console.error("[Resume] Failed to check resume:", err);
+      set({ resumeAvailable: false, resumeFileName: null });
+      return null;
+    }
+  },
+
+  /**
+   * Load cached pattern data
+   * Used when the user wants to restore a previously uploaded pattern
+   */
+  loadCachedPattern: async (): Promise<{
+    pesData: PesPatternData;
+    uploadedPesData?: PesPatternData;
+    patternOffset?: { x: number; y: number };
+    patternRotation?: number;
+  } | null> => {
+    const { resumeAvailable } = get();
+    if (!resumeAvailable) return null;
+
+    try {
+      // Import here to avoid circular dependency
+      const { useMachineStore } = await import("./useMachineStore");
+      const { service, storageService, refreshPatternInfo } =
+        useMachineStore.getState();
+
+      const machineUuid = await service.getPatternUUID();
+      if (!machineUuid) return null;
+
+      const uuidStr = uuidToString(machineUuid);
+      const cached = await storageService.getPatternByUUID(uuidStr);
+
+      if (cached) {
+        console.log(
+          "[Resume] Loading cached pattern:",
+          cached.fileName,
+          "Offset:",
+          cached.patternOffset,
+          "Rotation:",
+          cached.patternRotation,
+          "Has uploaded data:",
+          !!cached.uploadedPesData,
+        );
+        await refreshPatternInfo();
+        return {
+          pesData: cached.pesData,
+          uploadedPesData: cached.uploadedPesData,
+          patternOffset: cached.patternOffset,
+          patternRotation: cached.patternRotation,
+        };
+      }
+
+      return null;
+    } catch (err) {
+      console.error(
+        "[Resume] Failed to load cached pattern:",
+        err instanceof Error ? err.message : "Unknown error",
+      );
+      return null;
+    }
+  },
+
+  /**
+   * Set resume availability
+   * Used by other stores to update resume state
+   */
+  setResumeAvailable: (available: boolean, fileName: string | null) => {
+    set({
+      resumeAvailable: available,
+      resumeFileName: fileName,
+      ...(available === false && { resumedPattern: null }),
+    });
+  },
+
+  /**
+   * Clear resume state
+   * Called when pattern is deleted from machine
+   */
+  clearResumeState: () => {
+    set({
+      resumeAvailable: false,
+      resumeFileName: null,
+      resumedPattern: null,
+    });
+  },
+}));

src/stores/useMachineStore.ts

@@ -13,7 +13,6 @@ import { SewingMachineError } from "../utils/errorCodeHelpers";
 import { uuidToString } from "../services/PatternCacheService";
 import { createStorageService } from "../platform";
 import type { IStorageService } from "../platform/interfaces/IStorageService";
-import type { PesPatternData } from "../formats/import/pesImporter";
 import { usePatternStore } from "./usePatternStore";
 
 interface MachineState {
@@ -34,18 +33,6 @@ interface MachineState {
   patternInfo: PatternInfo | null;
   sewingProgress: SewingProgress | null;
 
-  // Upload state
-  uploadProgress: number;
-  isUploading: boolean;
-
-  // Resume state
-  resumeAvailable: boolean;
-  resumeFileName: string | null;
-  resumedPattern: {
-    pesData: PesPatternData;
-    patternOffset?: { x: number; y: number };
-  } | null;
-
   // Error state
   error: string | null;
   isPairingError: boolean;
@@ -65,21 +52,13 @@ interface MachineState {
   refreshPatternInfo: () => Promise<void>;
   refreshProgress: () => Promise<void>;
   refreshServiceCount: () => Promise<void>;
-  uploadPattern: (
-    penData: Uint8Array,
-    pesData: PesPatternData,
-    fileName: string,
-    patternOffset?: { x: number; y: number },
-  ) => Promise<void>;
   startMaskTrace: () => Promise<void>;
   startSewing: () => Promise<void>;
   resumeSewing: () => Promise<void>;
   deletePattern: () => Promise<void>;
-  checkResume: () => Promise<PesPatternData | null>;
+
-  loadCachedPattern: () => Promise<{
+  // Initialization
-    pesData: PesPatternData;
+  initialize: () => void;
-    patternOffset?: { x: number; y: number };
-  } | null>;
 
   // Internal methods
   _setupSubscriptions: () => void;
@@ -98,11 +77,6 @@ export const useMachineStore = create<MachineState>((set, get) => ({
   machineError: SewingMachineError.None,
   patternInfo: null,
   sewingProgress: null,
-  uploadProgress: 0,
-  isUploading: false,
-  resumeAvailable: false,
-  resumeFileName: null,
-  resumedPattern: null,
   error: null,
   isPairingError: false,
   isCommunicating: false,
@@ -110,70 +84,10 @@ export const useMachineStore = create<MachineState>((set, get) => ({
   pollIntervalId: null,
   serviceCountIntervalId: null,
 
-  // Check for resumable pattern
-  checkResume: async (): Promise<PesPatternData | null> => {
-    try {
-      const { service, storageService } = get();
-      console.log("[Resume] Checking for cached pattern...");
-
-      const machineUuid = await service.getPatternUUID();
-      console.log(
-        "[Resume] Machine UUID:",
-        machineUuid ? uuidToString(machineUuid) : "none",
-      );
-
-      if (!machineUuid) {
-        console.log("[Resume] No pattern loaded on machine");
-        set({ resumeAvailable: false, resumeFileName: null });
-        return null;
-      }
-
-      const uuidStr = uuidToString(machineUuid);
-      const cached = await storageService.getPatternByUUID(uuidStr);
-
-      if (cached) {
-        console.log(
-          "[Resume] Pattern found in cache:",
-          cached.fileName,
-          "Offset:",
-          cached.patternOffset,
-        );
-        console.log("[Resume] Auto-loading cached pattern...");
-        set({
-          resumeAvailable: true,
-          resumeFileName: cached.fileName,
-          resumedPattern: {
-            pesData: cached.pesData,
-            patternOffset: cached.patternOffset,
-          },
-        });
-
-        // Fetch pattern info from machine
-        try {
-          const info = await service.getPatternInfo();
-          set({ patternInfo: info });
-          console.log("[Resume] Pattern info loaded from machine");
-        } catch (err) {
-          console.error("[Resume] Failed to load pattern info:", err);
-        }
-
-        return cached.pesData;
-      } else {
-        console.log("[Resume] Pattern on machine not found in cache");
-        set({ resumeAvailable: false, resumeFileName: null });
-        return null;
-      }
-    } catch (err) {
-      console.error("[Resume] Failed to check resume:", err);
-      set({ resumeAvailable: false, resumeFileName: null });
-      return null;
-    }
-  },
-
   // Connect to machine
   connect: async () => {
     try {
-      const { service, checkResume } = get();
+      const { service } = get();
       set({ error: null, isPairingError: false });
 
       await service.connect();
@@ -190,8 +104,9 @@ export const useMachineStore = create<MachineState>((set, get) => ({
         machineError: state.error,
       });
 
-      // Check for resume possibility
+      // Check for resume possibility using cache store
-      await checkResume();
+      const { useMachineCacheStore } = await import("./useMachineCacheStore");
+      await useMachineCacheStore.getState().checkResume();
 
       // Start polling
       get()._startPolling();
@@ -299,69 +214,6 @@ export const useMachineStore = create<MachineState>((set, get) => ({
     }
   },
 
-  // Upload pattern to machine
-  uploadPattern: async (
-    penData: Uint8Array,
-    pesData: PesPatternData,
-    fileName: string,
-    patternOffset?: { x: number; y: number },
-  ) => {
-    const {
-      isConnected,
-      service,
-      storageService,
-      refreshStatus,
-      refreshPatternInfo,
-    } = get();
-    if (!isConnected) {
-      set({ error: "Not connected to machine" });
-      return;
-    }
-
-    try {
-      set({ error: null, uploadProgress: 0, isUploading: true });
-
-      const uuid = await service.uploadPattern(
-        penData,
-        (progress) => {
-          set({ uploadProgress: progress });
-        },
-        pesData.bounds,
-        patternOffset,
-      );
-
-      set({ uploadProgress: 100 });
-
-      // Cache the pattern with its UUID and offset
-      const uuidStr = uuidToString(uuid);
-      storageService.savePattern(uuidStr, pesData, fileName, patternOffset);
-      console.log(
-        "[Cache] Saved pattern:",
-        fileName,
-        "with UUID:",
-        uuidStr,
-        "Offset:",
-        patternOffset,
-      );
-
-      // Clear resume state since we just uploaded
-      set({
-        resumeAvailable: false,
-        resumeFileName: null,
-      });
-
-      // Refresh status and pattern info after upload
-      await refreshStatus();
-      await refreshPatternInfo();
-    } catch (err) {
-      set({
-        error: err instanceof Error ? err.message : "Failed to upload pattern",
-      });
-    } finally {
-      set({ isUploading: false });
-    }
-  },
-
   // Start mask trace
   startMaskTrace: async () => {
     const { isConnected, service, refreshStatus } = get();
@@ -437,14 +289,19 @@ export const useMachineStore = create<MachineState>((set, get) => ({
       set({
         patternInfo: null,
         sewingProgress: null,
-        uploadProgress: 0,
-        resumeAvailable: false,
-        resumeFileName: null,
       });
 
       // Clear uploaded pattern data in pattern store
       usePatternStore.getState().clearUploadedPattern();
 
+      // Clear upload state in upload store
+      const { useMachineUploadStore } = await import("./useMachineUploadStore");
+      useMachineUploadStore.getState().reset();
+
+      // Clear resume state in cache store
+      const { useMachineCacheStore } = await import("./useMachineCacheStore");
+      useMachineCacheStore.getState().clearResumeState();
+
       await refreshStatus();
     } catch (err) {
       set({
@@ -455,41 +312,9 @@ export const useMachineStore = create<MachineState>((set, get) => ({
     }
   },
 
-  // Load cached pattern
+  // Initialize the store (call once from App component)
-  loadCachedPattern: async (): Promise<{
+  initialize: () => {
-    pesData: PesPatternData;
+    get()._setupSubscriptions();
-    patternOffset?: { x: number; y: number };
-  } | null> => {
-    const { resumeAvailable, service, storageService, refreshPatternInfo } =
-      get();
-    if (!resumeAvailable) return null;
-
-    try {
-      const machineUuid = await service.getPatternUUID();
-      if (!machineUuid) return null;
-
-      const uuidStr = uuidToString(machineUuid);
-      const cached = await storageService.getPatternByUUID(uuidStr);
-
-      if (cached) {
-        console.log(
-          "[Resume] Loading cached pattern:",
-          cached.fileName,
-          "Offset:",
-          cached.patternOffset,
-        );
-        await refreshPatternInfo();
-        return { pesData: cached.pesData, patternOffset: cached.patternOffset };
-      }
-
-      return null;
-    } catch (err) {
-      set({
-        error:
-          err instanceof Error ? err.message : "Failed to load cached pattern",
-      });
-      return null;
-    }
   },
 
   // Setup service subscriptions
@@ -563,7 +388,12 @@ export const useMachineStore = create<MachineState>((set, get) => ({
       }
 
       // follows the apps logic:
-      if (get().resumeAvailable && get().patternInfo?.totalStitches == 0) {
+      // Check if we have a cached pattern and pattern info needs refreshing
+      const { useMachineCacheStore } = await import("./useMachineCacheStore");
+      if (
+        useMachineCacheStore.getState().resumeAvailable &&
+        get().patternInfo?.totalStitches == 0
+      ) {
         await refreshPatternInfo();
       }
 
@@ -599,9 +429,6 @@ export const useMachineStore = create<MachineState>((set, get) => ({
   },
 }));
 
-// Initialize subscriptions when store is created
-useMachineStore.getState()._setupSubscriptions();
-
 // Selector hooks for common use cases
 export const useIsConnected = () =>
   useMachineStore((state) => state.isConnected);

src/stores/useMachineUploadStore.ts

@@ -0,0 +1,128 @@
+import { create } from "zustand";
+import type { PesPatternData } from "../formats/import/pesImporter";
+import { uuidToString } from "../services/PatternCacheService";
+
+/**
+ * Machine Upload Store
+ *
+ * Manages the state and logic for uploading patterns to the machine.
+ * Extracted from useMachineStore for better separation of concerns.
+ */
+
+interface MachineUploadState {
+  // Upload state
+  uploadProgress: number;
+  isUploading: boolean;
+
+  // Actions
+  uploadPattern: (
+    penData: Uint8Array,
+    uploadedPesData: PesPatternData, // Pattern with rotation applied (for machine upload)
+    fileName: string,
+    patternOffset?: { x: number; y: number },
+    patternRotation?: number,
+    originalPesData?: PesPatternData, // Original unrotated pattern (for caching)
+  ) => Promise<void>;
+
+  reset: () => void;
+}
+
+export const useMachineUploadStore = create<MachineUploadState>((set) => ({
+  // Initial state
+  uploadProgress: 0,
+  isUploading: false,
+
+  /**
+   * Upload a pattern to the machine
+   *
+   * @param penData - The PEN-formatted pattern data to upload
+   * @param uploadedPesData - Pattern with rotation applied (for machine)
+   * @param fileName - Name of the pattern file
+   * @param patternOffset - Pattern position offset
+   * @param patternRotation - Rotation angle in degrees
+   * @param originalPesData - Original unrotated pattern (for caching)
+   */
+  uploadPattern: async (
+    penData: Uint8Array,
+    uploadedPesData: PesPatternData,
+    fileName: string,
+    patternOffset?: { x: number; y: number },
+    patternRotation?: number,
+    originalPesData?: PesPatternData,
+  ) => {
+    // Import here to avoid circular dependency
+    const { useMachineStore } = await import("./useMachineStore");
+    const {
+      isConnected,
+      service,
+      storageService,
+      refreshStatus,
+      refreshPatternInfo,
+    } = useMachineStore.getState();
+
+    if (!isConnected) {
+      throw new Error("Not connected to machine");
+    }
+
+    try {
+      set({ uploadProgress: 0, isUploading: true });
+
+      // Upload to machine using the rotated bounds
+      const uuid = await service.uploadPattern(
+        penData,
+        (progress) => {
+          set({ uploadProgress: progress });
+        },
+        uploadedPesData.bounds,
+        patternOffset,
+      );
+
+      set({ uploadProgress: 100 });
+
+      // Cache the ORIGINAL unrotated pattern with rotation angle AND the uploaded data
+      // This allows us to restore the editable state correctly and ensures the exact
+      // uploaded data is used on resume (prevents inconsistencies from version updates)
+      const pesDataToCache = originalPesData || uploadedPesData;
+      const uuidStr = uuidToString(uuid);
+      storageService.savePattern(
+        uuidStr,
+        pesDataToCache,
+        fileName,
+        patternOffset,
+        patternRotation,
+        uploadedPesData, // Cache the exact uploaded data
+      );
+      console.log(
+        "[MachineUpload] Saved pattern:",
+        fileName,
+        "with UUID:",
+        uuidStr,
+        "Offset:",
+        patternOffset,
+        "Rotation:",
+        patternRotation,
+        "(cached original unrotated data + uploaded data)",
+      );
+
+      // Clear resume state in cache store since we just uploaded
+      const { useMachineCacheStore } = await import("./useMachineCacheStore");
+      useMachineCacheStore.getState().setResumeAvailable(false, null);
+
+      // Refresh status and pattern info after upload
+      await refreshStatus();
+      await refreshPatternInfo();
+    } catch (err) {
+      throw err instanceof Error ? err : new Error("Failed to upload pattern");
+    } finally {
+      set({ isUploading: false });
+    }
+  },
+
+  /**
+   * Reset upload state
+   * Called when pattern is deleted from machine
+   */
+  reset: () => {
+    set({ uploadProgress: 0, isUploading: false });
+  },
+}));

src/stores/usePatternStore.ts

@@ -21,6 +21,7 @@ interface PatternState {
   setUploadedPattern: (
     uploadedData: PesPatternData,
     uploadedOffset: { x: number; y: number },
+    fileName?: string,
   ) => void;
   clearUploadedPattern: () => void;
   resetPatternOffset: () => void;
@@ -69,23 +70,32 @@ export const usePatternStore = create<PatternState>((set) => ({
   setUploadedPattern: (
     uploadedData: PesPatternData,
     uploadedOffset: { x: number; y: number },
+    fileName?: string,
   ) => {
     set({
       uploadedPesData: uploadedData,
       uploadedPatternOffset: uploadedOffset,
       patternUploaded: true,
+      // Optionally set filename if provided (for resume/reconnect scenarios)
+      ...(fileName && { currentFileName: fileName }),
     });
     console.log("[PatternStore] Uploaded pattern set");
   },
 
   // Clear uploaded pattern (called when deleting from machine)
+  // This reverts to pre-upload state, keeping pesData so user can re-adjust and re-upload
   clearUploadedPattern: () => {
+    console.log("[PatternStore] CLEARING uploaded pattern...");
     set({
       uploadedPesData: null,
       uploadedPatternOffset: { x: 0, y: 0 },
       patternUploaded: false,
+      // Keep pesData, currentFileName, patternOffset, patternRotation
+      // so user can adjust and re-upload
     });
-    console.log("[PatternStore] Uploaded pattern cleared");
+    console.log(
+      "[PatternStore] Uploaded pattern cleared - back to editable mode",
+    );
   },
 
   // Reset pattern offset to default