Improve TypeScript types and error handling

- Created proper TypeScript types for Office API operations
- Replaced 'any' casts with appropriate types
- Added type-safe utility functions in office-types.ts
- Improved error handling with proper unknown type
- Added helper functions for PowerPoint shape operations
- Created proper TypeScript interface for webpack HMR

These changes improve code quality, maintainability, and help catch potential bugs at compile time rather than runtime.

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>

src/taskpane/components/RoundImage.tsx

@@ -7,6 +7,7 @@ import {
 } from "@fluentui/react-icons";
 import { useStatusContext } from "./App";
 import { useCommonStyles } from "./commonStyles";
+import { getErrorMessage, isPictureShape, getFirstSelectedSlide, selectShapesById } from "../types/office-types";
 
 export const RoundImage: React.FC = () => {
   const styles = useCommonStyles();
@@ -38,8 +39,8 @@ export const RoundImage: React.FC = () => {
         shape.load(["type"]);
         await context.sync();
 
-        // Ensure the shape is a picture
-        if (shape.type !== PowerPoint.ShapeType.image) {
+        // Ensure the shape is a picture using our type-safe utility
+        if (!isPictureShape(shape)) {
           setStatusMessage("Please select an image.");
           setStatusType("warning");
           return;
@@ -53,8 +54,10 @@ export const RoundImage: React.FC = () => {
         const width = shape.width;
         const height = shape.height;
       
-        const slide = context.presentation.getSelectedSlides().getItemAt(0);
-        const maskShape = slide.shapes.addGeometricShape("Ellipse" as any);
+        // Get the current slide using our type-safe utility
+        const slide = getFirstSelectedSlide(context);
+        // Create elliptical mask with proper type
+        const maskShape = slide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.ellipse);
        
         maskShape.load(["width", "height", "left", "top", "id"]);
         await context.sync();
@@ -73,17 +76,19 @@ export const RoundImage: React.FC = () => {
         setStatusMessage("Created mask shape. Please select both the image and the oval, then use the 'Shape Forma > Merge Shapes > Intersect' command in PowerPoint.");
         setStatusType("warning");
 
-        slide.setSelectedShapes([shape.id, maskShape.id]);
+        // Use our type-safe utility for selecting shapes
+        selectShapesById(slide, [shape.id, maskShape.id]);
         // Ensure we maintain the same size
         shape.width = width;
         shape.height = height;
       
         await context.sync();
       });
-    } catch (error) {
-      setStatusMessage(`Error: ${error.message}`);
+    } catch (error: unknown) {
+      const errorMessage = getErrorMessage(error);
+      setStatusMessage(`Error: ${errorMessage}`);
       setStatusType("error");
-      console.error("Main error:", error);
+      console.error("Round image error:", error);
     } finally {
       setIsProcessing(false);
     }