feature: Migrate PatternCanvas to shadcn/ui and rename placeholder

- Migrated PatternCanvas component to use shadcn Card components (Card, CardHeader, CardTitle, CardDescription, CardContent)
- Replaced custom zoom control buttons with shadcn Button component using outline variant and icon size
- Renamed PatternPreviewPlaceholder to PatternCanvasPlaceholder for consistency
- Updated all imports and references in App.tsx
- Maintained all existing functionality including Konva canvas rendering, zoom controls, and pattern positioning

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

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

src/App.tsx

@@ -6,7 +6,7 @@ import { useUIStore } from "./stores/useUIStore";
 import { AppHeader } from "./components/AppHeader";
 import { LeftSidebar } from "./components/LeftSidebar";
 import { PatternCanvas } from "./components/PatternCanvas";
-import { PatternPreviewPlaceholder } from "./components/PatternPreviewPlaceholder";
+import { PatternCanvasPlaceholder } from "./components/PatternCanvasPlaceholder";
 import { BluetoothDevicePicker } from "./components/BluetoothDevicePicker";
 import "./App.css";
 
@@ -76,7 +76,7 @@ function App() {
 
           {/* Right Column - Pattern Preview */}
           <div className="flex flex-col lg:overflow-hidden lg:h-full">
-            {pesData ? <PatternCanvas /> : <PatternPreviewPlaceholder />}
+            {pesData ? <PatternCanvas /> : <PatternCanvasPlaceholder />}
           </div>
         </div>
 

src/components/PatternCanvas.tsx

@@ -22,6 +22,14 @@ import {
   PatternBounds,
   CurrentPosition,
 } from "./KonvaComponents";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 
 export function PatternCanvas() {
   // Machine store
@@ -252,27 +260,30 @@ export function PatternCanvas() {
     : "text-gray-600 dark:text-gray-400";
 
   return (
-    <div
+    <Card
-      className={`lg:h-full bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md border-l-4 ${borderColor} flex flex-col`}
+      className={`p-0 gap-0 lg:h-full flex flex-col border-l-4 ${borderColor}`}
     >
-      <div className="flex items-start gap-3 mb-3 flex-shrink-0">
+      <CardHeader className="p-4 pb-3">
+        <div className="flex items-start gap-3">
           <PhotoIcon className={`w-6 h-6 ${iconColor} flex-shrink-0 mt-0.5`} />
           <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">
+            <CardTitle className="text-sm">Pattern Preview</CardTitle>
-            Pattern Preview
-          </h3>
             {pesData ? (
-            <p className="text-xs text-gray-600 dark:text-gray-400">
+              <CardDescription className="text-xs">
-              {((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(1)} ×{" "}
+                {((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(1)}{" "}
-              {((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(1)} mm
+                ×{" "}
-            </p>
+                {((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(1)}{" "}
+                mm
+              </CardDescription>
             ) : (
-            <p className="text-xs text-gray-600 dark:text-gray-400">
+              <CardDescription className="text-xs">
                 No pattern loaded
-            </p>
+              </CardDescription>
             )}
           </div>
         </div>
+      </CardHeader>
+      <CardContent className="px-4 pt-0 pb-4 flex-1 flex flex-col">
         <div
           className="relative w-full h-[400px] sm:h-[500px] lg:flex-1 lg:min-h-0 border border-gray-300 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-900 overflow-hidden"
           ref={containerRef}
@@ -475,42 +486,51 @@ export function PatternCanvas() {
 
               {/* Zoom Controls Overlay */}
               <div className="absolute bottom-2 sm:bottom-5 right-2 sm:right-5 flex gap-1.5 sm:gap-2 items-center bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg shadow-lg z-10">
-              <button
+                <Button
-                className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-primary-600 hover:text-white hover:border-primary-600 dark:hover:border-primary-600 hover:shadow-md hover:shadow-primary-600/30 disabled:opacity-50 disabled:cursor-not-allowed"
+                  variant="outline"
+                  size="icon"
+                  className="w-7 h-7 sm:w-8 sm:h-8"
                   onClick={handleCenterPattern}
                   disabled={!pesData || patternUploaded || isUploading}
                   title="Center Pattern in Hoop"
                 >
-                <ArrowsPointingInIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+                  <ArrowsPointingInIcon className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
+                </Button>
-              <button
+                <Button
-                className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-primary-600 hover:text-white hover:border-primary-600 dark:hover:border-primary-600 hover:shadow-md hover:shadow-primary-600/30 disabled:opacity-50 disabled:cursor-not-allowed"
+                  variant="outline"
+                  size="icon"
+                  className="w-7 h-7 sm:w-8 sm:h-8"
                   onClick={handleZoomIn}
                   title="Zoom In"
                 >
-                <PlusIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+                  <PlusIcon className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
+                </Button>
                 <span className="min-w-[40px] sm:min-w-[50px] text-center text-sm font-semibold text-gray-900 dark:text-gray-100 select-none">
                   {Math.round(stageScale * 100)}%
                 </span>
-              <button
+                <Button
-                className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-primary-600 hover:text-white hover:border-primary-600 dark:hover:border-primary-600 hover:shadow-md hover:shadow-primary-600/30 disabled:opacity-50 disabled:cursor-not-allowed"
+                  variant="outline"
+                  size="icon"
+                  className="w-7 h-7 sm:w-8 sm:h-8"
                   onClick={handleZoomOut}
                   title="Zoom Out"
                 >
-                <MinusIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+                  <MinusIcon className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
+                </Button>
-              <button
+                <Button
-                className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-primary-600 hover:text-white hover:border-primary-600 dark:hover:border-primary-600 hover:shadow-md hover:shadow-primary-600/30 disabled:opacity-50 disabled:cursor-not-allowed ml-1"
+                  variant="outline"
+                  size="icon"
+                  className="w-7 h-7 sm:w-8 sm:h-8 ml-1"
                   onClick={handleZoomReset}
                   title="Reset Zoom"
                 >
-                <ArrowPathIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+                  <ArrowPathIcon className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
+                </Button>
               </div>
             </>
           )}
         </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }

src/components/PatternCanvasPlaceholder.tsx

@@ -0,0 +1,75 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
+export function PatternCanvasPlaceholder() {
+  return (
+    <Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
+      <CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
+        <CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
+      </CardHeader>
+      <CardContent className="p-6 flex-1 flex flex-col">
+        <div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
+          {/* Decorative background pattern */}
+          <div className="absolute inset-0 opacity-5 dark:opacity-10">
+            <div className="absolute top-10 left-10 w-32 h-32 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
+            <div className="absolute bottom-10 right-10 w-40 h-40 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
+            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 h-48 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
+          </div>
+
+          <div className="text-center relative z-10">
+            <div className="relative inline-block mb-6">
+              <svg
+                className="w-28 h-28 mx-auto text-gray-300 dark:text-gray-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+                />
+              </svg>
+              <div className="absolute -top-2 -right-2 w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
+                <svg
+                  className="w-5 h-5 text-primary-600 dark:text-primary-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 4v16m8-8H4"
+                  />
+                </svg>
+              </div>
+            </div>
+            <h3 className="text-gray-700 dark:text-gray-200 text-base lg:text-lg font-semibold mb-2">
+              No Pattern Loaded
+            </h3>
+            <p className="text-gray-500 dark:text-gray-400 text-sm mb-4 max-w-sm mx-auto">
+              Connect to your machine and choose a PES embroidery file to see
+              your design preview
+            </p>
+            <div className="flex items-center justify-center gap-6 text-xs text-gray-400 dark:text-gray-500">
+              <div className="flex items-center gap-1">
+                <div className="w-2 h-2 bg-primary-400 dark:bg-primary-500 rounded-full"></div>
+                <span>Drag to Position</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-2 h-2 bg-success-400 dark:bg-success-500 rounded-full"></div>
+                <span>Zoom & Pan</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-2 h-2 bg-accent-400 dark:bg-accent-500 rounded-full"></div>
+                <span>Real-time Preview</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/PatternPreviewPlaceholder.tsx

@@ -1,75 +0,0 @@
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-
-export function PatternPreviewPlaceholder() {
-  return (
-    <Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
-      <CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
-        <CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
-      </CardHeader>
-      <CardContent className="p-6 flex-1 flex flex-col">
-        <div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
-        {/* Decorative background pattern */}
-        <div className="absolute inset-0 opacity-5 dark:opacity-10">
-          <div className="absolute top-10 left-10 w-32 h-32 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
-          <div className="absolute bottom-10 right-10 w-40 h-40 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 h-48 border-4 border-gray-400 dark:border-gray-500 rounded-full"></div>
-        </div>
-
-        <div className="text-center relative z-10">
-          <div className="relative inline-block mb-6">
-            <svg
-              className="w-28 h-28 mx-auto text-gray-300 dark:text-gray-600"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-              />
-            </svg>
-            <div className="absolute -top-2 -right-2 w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-              <svg
-                className="w-5 h-5 text-primary-600 dark:text-primary-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 4v16m8-8H4"
-                />
-              </svg>
-            </div>
-          </div>
-          <h3 className="text-gray-700 dark:text-gray-200 text-base lg:text-lg font-semibold mb-2">
-            No Pattern Loaded
-          </h3>
-          <p className="text-gray-500 dark:text-gray-400 text-sm mb-4 max-w-sm mx-auto">
-            Connect to your machine and choose a PES embroidery file to see your
-            design preview
-          </p>
-          <div className="flex items-center justify-center gap-6 text-xs text-gray-400 dark:text-gray-500">
-            <div className="flex items-center gap-1">
-              <div className="w-2 h-2 bg-primary-400 dark:bg-primary-500 rounded-full"></div>
-              <span>Drag to Position</span>
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="w-2 h-2 bg-success-400 dark:bg-success-500 rounded-full"></div>
-              <span>Zoom & Pan</span>
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="w-2 h-2 bg-accent-400 dark:bg-accent-500 rounded-full"></div>
-              <span>Real-time Preview</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      </CardContent>
-    </Card>
-  );
-}