diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index a3c9ba9..7e35bc3 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -5,6 +5,7 @@
 **Bleedy** is a web application for adding bleed margins to images, built with Vue 3, Vite, TypeScript, and PyScript. It allows users to upload images and automatically add professional bleed margins using Python image processing in the browser.
 
 ### Key Technologies
+
 - **Frontend**: Vue 3 + TypeScript + Vite
 - **UI Framework**: Element Plus with custom wired-elements for sketchy aesthetics
 - **Python Integration**: PyScript 2025.5.1 with PIL (Pillow) for image processing
@@ -16,6 +17,7 @@
 ## Build and Development Commands
 
 ### Environment Setup
+
 **ALWAYS run `npm install` first** - this project uses patched dependencies and requires proper installation.
 
 ```bash
@@ -25,58 +27,79 @@ npm install
 ### Development Commands
 
 #### Start Development Server
+
 ```bash
 npm run dev
 ```
+
 - Starts Vite dev server on http://localhost:5173/
 - Includes hot reload for Vue components
 - Takes ~1-2 seconds to start
 - PyScript loads asynchronously in browser
 
 #### Build for Production
+
 ```bash
 npm run build
 ```
+
 - **Time required**: ~8-10 seconds
 - Creates `dist/` directory with production build
 - Includes PyScript files and assets
 - Warning about chunk sizes is expected (large PyScript dependencies)
 
 #### Type Checking
+
 ```bash
 npm run type-check
 ```
-- **Known Issues**: Currently fails with 4 TypeScript errors in components
-- Errors relate to missing method references and type mismatches
+
+- **Known Issues**: Currently fails with 46+ TypeScript errors in components
+- Errors relate to:
+  - Missing type definitions for never[] arrays
+  - Property access on implicit 'any' types
+  - Missing Window API types (showOpenFilePicker)
+  - RoughJS module declaration issues
 - Build still succeeds despite type errors
 
 #### Preview Production Build
+
 ```bash
 npm run preview
 ```
+
 - Serves production build locally for testing
 
 ### Linting and Formatting
 
-#### ESLint (BROKEN - Needs Fix)
+#### ESLint
+
 ```bash
 npm run lint
 ```
-- **Status**: Currently broken due to ESLint 9.x flat config migration
-- **Issue**: `eslint.config.js` uses old CommonJS format but project is ES modules
-- **Workaround**: Use `npx eslint . --fix` after converting config to ES modules format
+
+- **Status**: Working with ESLint 9.x flat config (ES modules format)
+- Configuration in `eslint.config.js` uses modern ES modules format
+- Automatically ignores `dist/`, `dist-ssr/`, and `node_modules/` folders
 
 #### Prettier
+
 ```bash
 npm run format
 ```
+
 - Formats source files in `src/` directory
 - Configuration in `.prettierrc.json`
+- **Known Issue**: Prettier cache may report formatting issues even when files are correctly formatted
+  - Use `npx prettier --check . --cache=false` to verify actual formatting status
+  - Use `npx prettier --write . --cache=false` if standard format command seems inconsistent
 
 ### Testing
+
 ```bash
 npm run test:unit
 ```
+
 - **Status**: No tests currently exist
 - Uses Vitest with jsdom environment
 - Configuration ready in `vitest.config.ts`
@@ -84,6 +107,7 @@ npm run test:unit
 ## Project Architecture
 
 ### Directory Structure
+
 ```
 /
 ├── src/
@@ -108,6 +132,7 @@ npm run test:unit
 ```
 
 ### Key Configuration Files
+
 - `vite.config.ts` - Vite build configuration with Vue, Element Plus, and custom elements
 - `tsconfig.*.json` - TypeScript configuration split across multiple files
 - `vitest.config.ts` - Test configuration (inherits from Vite config)
@@ -115,6 +140,7 @@ npm run test:unit
 - `.prettierrc.json` - Code formatting rules
 
 ### PyScript Integration
+
 - **Python Version**: Pyodide 0.26.1
 - **Python Packages**: Pillow (PIL) for image processing
 - **Communication**: Custom event system between Python and Vue
@@ -126,87 +152,115 @@ npm run test:unit
 ## Dependencies and Patches
 
 ### Critical Dependencies
+
 - `vue@^3.5.13` - Core framework
 - `element-plus@^2.9.5` - UI components
 - `typescript@~5.7.2` - Type checking
 - `vite@^6.0.6` - Build tool
 
 ### Patched Dependencies
+
 **IMPORTANT**: This project patches two dependencies. Running `npm install` applies these patches automatically.
 
 1. `roughjs@4.6.6.patch` - Fixes rendering issues
 2. `wired-elements@3.0.0-rc.6.patch` - Fixes compatibility with modern browsers
 
 ### Known Dependency Issues
+
 - **wired-elements**: Using old RC version (3.0.0-rc.6) that's no longer maintained
-- **ESLint**: Configuration needs migration to flat config format
 - **Browserslist**: Data is 7 months old (warning during build)
 
 ## Continuous Integration
 
 ### GitHub Workflows
-1. **Azure Static Web Apps CI/CD** (`.github/workflows/azure-static-web-apps-*.yml`)
+
+1. **Azure Static Web Apps CI/CD** (`.github/workflows/azure-static-web-apps-thankful-mushroom-08ecc5d1e.yml`)
    - Deploys to Azure on pushes to master
    - Uses standard Node.js build process
 
-2. **SonarCloud** (`.github/workflows/sonarcloud.yml`)
+2. **CI** (`.github/workflows/ci.yml`)
+   - Continuous integration checks on push/PR
+   - Runs build and lint checks
+
+3. **SonarCloud** (`.github/workflows/sonarcloud.yml`)
    - Code quality analysis on push/PR
 
-3. **Build** (`.github/workflows/build.yml`)
-   - Currently only runs SonarCloud scan
+4. **Post-Merge Cleanup** (`.github/workflows/post-merge-cleanup.yml`)
+   - Cleanup tasks after merge
 
 ### Pre-commit Hooks (Planned)
+
 - `scripts/check-pyscript-version.sh` - Validates PyScript version consistency
 - Currently not integrated with Husky
 
 ## Common Issues and Solutions
 
 ### TypeScript Errors
-- **Issue**: 4 type errors in components (missing methods, type mismatches)
+
+- **Issue**: 46+ type errors across multiple components
 - **Impact**: Build succeeds, but `npm run type-check` fails
-- **Solution**: Fix component type definitions and method references
+- **Main Issues**:
+  - ImageSelection.vue: Array type inference (`never[]` instead of proper types)
+  - Missing Window API types for File System Access API
+  - RoughJS module lacks TypeScript declarations
+- **Solution**: Add proper type annotations and interface declarations
 
 ### ESLint Configuration
-- **Issue**: Config uses old format, incompatible with ESLint 9.x
-- **Solution**: Convert `eslint.config.js` to ES modules format, remove `root` property
+
+- **Status**: Using ESLint 9.x flat config format (ES modules) with proper ignore patterns
+- Ignores `dist/`, `dist-ssr/`, and `node_modules/` folders automatically
 
 ### PyScript Loading
+
 - **Issue**: PyScript loads asynchronously, may cause timing issues
 - **Solution**: Use event listeners for Python-JavaScript communication
 
 ### Build Warnings
+
 - Large bundle size warnings are expected due to PyScript/Pyodide dependencies
 - Chunk size limit warnings can be ignored for this use case
 
+### Prettier Cache Issues
+
+- **Issue**: `npm run format:check` may report formatting issues due to stale cache
+- **Verification**: Use `npx prettier --check . --cache=false` to verify true formatting status
+- **Solution**: Run `npx prettier --write . --cache=false` or clear `node_modules/.cache/prettier/`
+
 ## Development Guidelines
 
 ### Making Changes
+
 1. **Always run `npm install`** after pulling changes (patches may update)
 2. **Test in development mode first**: `npm run dev`
 3. **Check build**: `npm run build` (ignore type check failures for now)
 4. **Verify functionality**: Test image upload and processing in browser
 
 ### Component Development
+
 - Vue 3 Composition API with `<script setup>` syntax
 - TypeScript for type safety
 - Element Plus components for standard UI
 - Wired Elements for sketchy aesthetic components
 
 ### Python Development
+
 - Edit files in `public/pyscript/`
 - Use `console.log()` for debugging (accessible in browser dev tools)
 - Follow existing event-driven communication pattern with JavaScript
 
 ### Styling
+
 - Uses Element Plus theme
 - Custom CSS in `src/assets/`
 - Doodle.css and paper-css for hand-drawn aesthetics
 - Google Fonts: Cabin Sketch
 
 ## Trust These Instructions
+
 These instructions are comprehensive and tested. Only search for additional information if:
+
 1. Commands documented here fail unexpectedly
 2. You need to understand implementation details not covered
 3. Requirements change beyond current scope
 
-Always prefer the documented commands and configurations over exploration.
\ No newline at end of file
+Always prefer the documented commands and configurations over exploration.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index b827815..955a36b 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,62 +1,62 @@
 version: 2
 updates:
   # Enable version updates for npm
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
-      day: "monday"
-      time: "09:00"
-      timezone: "UTC"
+      interval: 'weekly'
+      day: 'monday'
+      time: '09:00'
+      timezone: 'UTC'
     # Group updates to reduce PR noise
     groups:
       production-dependencies:
         patterns:
-          - "vue*"
-          - "element-plus"
-          - "@element-plus/*"
+          - 'vue*'
+          - 'element-plus'
+          - '@element-plus/*'
         update-types:
-          - "minor"
-          - "patch"
+          - 'minor'
+          - 'patch'
       development-dependencies:
         patterns:
-          - "@types/*"
-          - "@typescript-eslint/*"
-          - "eslint*"
-          - "vite*"
-          - "vitest*"
+          - '@types/*'
+          - '@typescript-eslint/*'
+          - 'eslint*'
+          - 'vite*'
+          - 'vitest*'
         update-types:
-          - "minor"
-          - "patch"
+          - 'minor'
+          - 'patch'
     # Apply labels to PRs for easier management
     labels:
-      - "dependencies"
-      - "automated"
+      - 'dependencies'
+      - 'automated'
     # Limit open PRs
     open-pull-requests-limit: 5
     # Ignore major version bumps for critical dependencies
     ignore:
-      - dependency-name: "vue"
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "element-plus"
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "vite"
-        update-types: ["version-update:semver-major"]
+      - dependency-name: 'vue'
+        update-types: ['version-update:semver-major']
+      - dependency-name: 'element-plus'
+        update-types: ['version-update:semver-major']
+      - dependency-name: 'vite'
+        update-types: ['version-update:semver-major']
     # Automatically rebase PRs when needed
-    rebase-strategy: "auto"
+    rebase-strategy: 'auto'
     # Set custom commit message prefix
     commit-message:
-      prefix: "deps"
-      include: "scope"
+      prefix: 'deps'
+      include: 'scope'
 
   # Enable version updates for GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
     labels:
-      - "dependencies"
-      - "github-actions"
+      - 'dependencies'
+      - 'github-actions'
     open-pull-requests-limit: 3
     commit-message:
-      prefix: "ci"
+      prefix: 'ci'
diff --git a/.github/workflows/post-merge-cleanup.yml b/.github/workflows/post-merge-cleanup.yml
index c34485f..1ef2a1c 100644
--- a/.github/workflows/post-merge-cleanup.yml
+++ b/.github/workflows/post-merge-cleanup.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     # Only run if PR was merged (not just closed)
     if: github.event.pull_request.merged == true
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -27,7 +27,7 @@ jobs:
           # Check if PR title or description mentions consolidation
           PR_TITLE="${{ github.event.pull_request.title }}"
           PR_BODY="${{ github.event.pull_request.body }}"
-          
+
           if [[ "$PR_TITLE" == *"Consolidate"* ]] || [[ "$PR_TITLE" == *"consolidate"* ]] || \
              [[ "$PR_BODY" == *"PRs Consolidated"* ]] || [[ "$PR_BODY" == *"consolidat"* ]]; then
             echo "is_consolidation=true" >> $GITHUB_OUTPUT
@@ -45,10 +45,10 @@ jobs:
           script: |
             const owner = context.repo.owner;
             const repo = context.repo.repo;
-            
+
             // List of PR numbers to close (from consolidation)
             const prsToClose = [1, 7, 8, 10, 12, 14, 15];
-            
+
             // Add comment and close each PR
             for (const prNumber of prsToClose) {
               try {
@@ -93,7 +93,7 @@ jobs:
           script: |
             const owner = context.repo.owner;
             const repo = context.repo.repo;
-            
+
             // List of branches to delete (from consolidation)
             const branchesToDelete = [
               'refactor-cleanup',
@@ -103,7 +103,7 @@ jobs:
               'snyk-upgrade-element-plus-2.9.5',
               'snyk-upgrade-element-plus-2.10.5'
             ];
-            
+
             for (const branch of branchesToDelete) {
               try {
                 await github.rest.git.deleteRef({
@@ -125,7 +125,7 @@ jobs:
           script: |
             const owner = context.repo.owner;
             const repo = context.repo.repo;
-            
+
             // Add comment to the merged PR summarizing cleanup
             await github.rest.issues.createComment({
               owner,
diff --git a/AUTOMATION_SETUP.md b/AUTOMATION_SETUP.md
index f981829..ef75473 100644
--- a/AUTOMATION_SETUP.md
+++ b/AUTOMATION_SETUP.md
@@ -11,6 +11,7 @@ This document explains the automated workflows and configurations set up for the
 **Trigger**: Runs when a PR is merged to `master` or `main`
 
 **Actions Performed**:
+
 - ✅ Detects if the merged PR is a consolidation PR (checks title/description)
 - ✅ Closes all consolidated PRs (PRs #1, #7, #8, #10, #12, #14, #15)
 - ✅ Adds explanatory comments to closed PRs
@@ -23,11 +24,13 @@ This document explains the automated workflows and configurations set up for the
 
 **Configuration**: `.github/workflows/post-merge-cleanup.yml`
 
-**Requirements**: 
+**Requirements**:
+
 - GitHub token with appropriate permissions (automatically provided by GitHub Actions)
 - No manual intervention needed
 
 **How it works**:
+
 1. When any PR is merged to master, the workflow checks if it's a consolidation PR
 2. If yes, it iterates through the list of consolidated PR numbers and branch names
 3. Closes each PR with a comment explaining the consolidation
@@ -38,11 +41,13 @@ This document explains the automated workflows and configurations set up for the
 
 **Purpose**: Validate code quality, formatting, type safety, and build success on every PR.
 
-**Trigger**: 
+**Trigger**:
+
 - Push to `master`
 - Pull request opened, synchronized, or reopened
 
 **Actions Performed**:
+
 - ✅ Checks code formatting with Prettier
 - ✅ Lints code with ESLint (no auto-fix in CI)
 - ✅ Runs TypeScript type checking
@@ -54,11 +59,13 @@ This document explains the automated workflows and configurations set up for the
 
 **Purpose**: Automatically monitor and update dependencies to keep the project secure and up-to-date.
 
-**Schedule**: 
+**Schedule**:
+
 - **npm dependencies**: Weekly on Mondays at 09:00 UTC
 - **GitHub Actions**: Monthly
 
 **Features**:
+
 - 📦 Groups related dependencies to reduce PR noise
   - Production dependencies (Vue, Element Plus)
   - Development dependencies (TypeScript, ESLint, Vite)
@@ -70,6 +77,7 @@ This document explains the automated workflows and configurations set up for the
 **Configuration**: `.github/dependabot.yml`
 
 **Ignored Major Updates**:
+
 - `vue` - Major updates require manual review
 - `element-plus` - Major updates require manual review
 - `vite` - Major updates require manual review
@@ -80,46 +88,55 @@ This document explains the automated workflows and configurations set up for the
 
 **Purpose**: Run code quality checks before commits and pushes to catch issues early.
 
-**Configuration**: `.huskyrc.json`
+**Status**: Husky v9.1.7 is installed but hooks are not yet configured.
+
+**Current State**:
+- Husky is installed in devDependencies
+- `prepare` script is configured in package.json
+- `.huskyrc.json` exists (legacy v4 format, not used by Husky v9)
+- `.husky/` directory does not exist yet
 
-**Hooks**:
+**Intended Hooks** (from `.huskyrc.json`):
 
 #### Pre-commit
-Runs before each commit:
+
+Should run before each commit:
+
 ```bash
 npm run format:check  # Verify code formatting
 npm run lint -- --no-fix  # Check for linting issues
 ```
 
 #### Pre-push
-Runs before pushing to remote:
+
+Should run before pushing to remote:
+
 ```bash
 npm run type-check  # Verify TypeScript types
 npm run build  # Ensure project builds successfully
 ```
 
-**Setup Instructions**:
+**Setup Instructions** (To enable hooks):
+
+1. Initialize Husky v9:
 
-1. Install Husky (if not already installed):
 ```bash
-npm install --save-dev husky
+npx husky init
 ```
 
-2. Initialize Husky:
+2. Create hook scripts in `.husky/` directory:
+
 ```bash
-npx husky install
-```
+# Create pre-commit hook
+echo "npm run format:check && npm run lint -- --no-fix" > .husky/pre-commit
+chmod +x .husky/pre-commit
 
-3. Add Husky setup to package.json (automatic with .huskyrc.json):
-```json
-{
-  "scripts": {
-    "prepare": "husky install"
-  }
-}
+# Create pre-push hook
+echo "npm run type-check && npm run build" > .husky/pre-push
+chmod +x .husky/pre-push
 ```
 
-4. The hooks will automatically run based on `.huskyrc.json` configuration
+3. The hooks will run automatically on commit/push after setup
 
 ### PyScript Version Check Hook
 
@@ -130,10 +147,13 @@ npx husky install
 **Status**: Placeholder implementation - needs completion
 
 **To Integrate**:
+
 1. Complete the version parsing logic in the script
-2. Add to Husky pre-commit hook:
+2. After Husky hooks are configured, add to pre-commit hook:
+
 ```bash
-npx husky add .husky/pre-commit "bash scripts/check-pyscript-version.sh"
+# After initializing Husky, append to .husky/pre-commit
+echo "bash scripts/check-pyscript-version.sh" >> .husky/pre-commit
 ```
 
 **Future Work**: See `TODO.md` for full implementation plan
@@ -143,6 +163,7 @@ npx husky add .husky/pre-commit "bash scripts/check-pyscript-version.sh"
 ### Current Setup
 
 **Dependabot**: Enabled for automated security updates
+
 - Monitors npm dependencies weekly
 - Groups security updates with regular dependency updates
 - Automatically opens PRs for vulnerabilities
@@ -160,6 +181,7 @@ npx husky add .husky/pre-commit "bash scripts/check-pyscript-version.sh"
    - Monitor continuously
 
 **npm audit**:
+
 - Run manually: `npm audit`
 - Fix issues: `npm audit fix`
 - For breaking changes: `npm audit fix --force` (review carefully)
@@ -177,6 +199,7 @@ Some actions cannot be fully automated and require manual intervention:
 3. Or, ask reviewers to resolve their reviews after reading the responses
 
 **Reviews to address**:
+
 - CodeRabbit review (already addressed in commits)
 - Any other pending reviews
 
@@ -217,10 +240,11 @@ npm update <package-name>
 
 ### Setup Required
 
-1. **Husky hooks**: Run once by any developer:
+1. **Husky hooks**: Not yet active. To enable:
+
 ```bash
-npm install
-npx husky install
+npx husky init
+# Then create hook scripts in .husky/ directory (see Pre-commit Hooks section)
 ```
 
 2. **PyScript version check**: Complete script implementation (see TODO.md)
@@ -230,15 +254,18 @@ npx husky install
 ## 📊 Monitoring and Maintenance
 
 ### Weekly Tasks
+
 - Review Dependabot PRs
 - Merge approved dependency updates
 
 ### Monthly Tasks
+
 - Review security audit: `npm audit`
 - Check for outdated dependencies: `npm outdated`
 - Review and update ignored major versions if needed
 
 ### Quarterly Tasks
+
 - Review automation effectiveness
 - Update workflow configurations if needed
 - Review and update pre-commit hooks
@@ -257,6 +284,7 @@ To update the list of PRs/branches to clean up in future consolidations:
 ### Changing Dependabot Behavior
 
 Edit `.github/dependabot.yml`:
+
 - Adjust schedule frequency
 - Modify grouping patterns
 - Add/remove ignored dependencies
@@ -264,46 +292,58 @@ Edit `.github/dependabot.yml`:
 
 ### Customizing Husky Hooks
 
-Edit `.huskyrc.json`:
-- Add new hooks (`commit-msg`, `post-merge`, etc.)
-- Modify existing hook commands
-- Add custom scripts
+After initializing Husky and creating hook scripts in `.husky/` directory:
+
+- Add new hooks by creating files in `.husky/` (e.g., `commit-msg`, `post-merge`)
+- Modify existing hook scripts in `.husky/` directory
+- Add custom scripts to hook files
+
+Note: `.huskyrc.json` is not used by Husky v9
 
 ## 🐛 Troubleshooting
 
 ### Post-merge cleanup didn't run
 
 **Possible causes**:
+
 - PR title/description doesn't contain "consolidate"
 - PR was closed but not merged
 - Workflow permissions issue
 
 **Solution**:
+
 - Check workflow runs in GitHub Actions tab
 - Manually close PRs and delete branches if needed
 
 ### Dependabot not creating PRs
 
 **Possible causes**:
+
 - Dependabot not enabled for repository
 - No updates available
 - Open PR limit reached
 
 **Solution**:
+
 - Check Dependabot status in repository settings
 - Review Insights > Dependency graph > Dependabot
 
 ### Husky hooks not running
 
 **Possible causes**:
-- Husky not installed
+
+- Husky hooks not yet configured (`.husky/` directory doesn't exist)
 - Git hooks not initialized
 - Script execution permissions
 
 **Solution**:
+
 ```bash
-npm install
-npx husky install
+# Initialize Husky v9
+npx husky init
+
+# Create hook scripts (see Pre-commit Hooks section)
+# Make them executable
 chmod +x .husky/*
 ```
 
diff --git a/AUTOMATION_SUMMARY.md b/AUTOMATION_SUMMARY.md
index ae88cc6..02f3aac 100644
--- a/AUTOMATION_SUMMARY.md
+++ b/AUTOMATION_SUMMARY.md
@@ -9,9 +9,11 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 ### 1. GitHub Actions Workflows
 
 #### `.github/workflows/post-merge-cleanup.yml`
+
 **Purpose**: Automatically clean up consolidated PRs and branches after merge
 
 **What it does**:
+
 - Detects consolidation PRs by title/description
 - Closes all consolidated PRs (PRs #1, #7, #8, #10, #12, #14, #15)
 - Adds explanatory comments to each closed PR
@@ -29,9 +31,11 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 ### 2. Dependency Management
 
 #### `.github/dependabot.yml`
+
 **Purpose**: Automated dependency monitoring and updates
 
 **What it does**:
+
 - **npm dependencies**: Weekly updates (Mondays 09:00 UTC)
 - **GitHub Actions**: Monthly updates
 - Groups related dependencies to reduce PR noise
@@ -46,23 +50,40 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 
 ### 3. Pre-commit Hooks
 
-#### `.huskyrc.json`
-**Purpose**: Run code quality checks before commits and pushes
+#### Husky Configuration
+
+**Status**: Husky v9.1.7 is installed but hooks are not yet configured.
+
+**Current state**:
+
+- `husky` package is in devDependencies
+- `prepare` script configured in package.json
+- `.huskyrc.json` exists (legacy v4 format, not used by Husky v9)
+- `.husky/` directory does not exist yet
+
+**To enable hooks**, run:
+
+```bash
+npm install
+npx husky init
+# Then create hook scripts in .husky/ directory
+```
+
+**Intended hooks** (from `.huskyrc.json`):
 
-**Hooks configured**:
 - **pre-commit**: Format check + lint (no auto-fix)
 - **pre-push**: Type check + build
 
-**Setup required**: Developers must run `npm install && npx husky install` once
-
-**Benefit**: Catches issues before they reach CI
+**Benefit**: Once configured, catches issues before they reach CI
 
 ### 4. Documentation
 
 #### `AUTOMATION_SETUP.md`
+
 **Purpose**: Complete guide to all automation features
 
 **Contents**:
+
 - Detailed explanation of each workflow
 - Configuration instructions
 - Troubleshooting guide
@@ -70,9 +91,11 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 - Monitoring and maintenance schedule
 
 #### `REVIEW_RESOLUTION.md`
+
 **Purpose**: Guide for resolving the three open reviews on PR #18
 
 **Contents**:
+
 - How all reviews were addressed
 - Manual actions required to dismiss reviews
 - Post-resolution checklist
@@ -84,7 +107,9 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 ### Modified Files
 
 #### `package.json`
+
 **Changes**:
+
 - Added `husky` to devDependencies (^9.1.7)
 - Added `prepare` script: `husky install || true`
   - Runs automatically after `npm install`
@@ -95,6 +120,7 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 ## ✅ What Happens When PR #18 Merges
 
 ### Immediate (Automatic)
+
 1. **Post-merge cleanup workflow runs**:
    - Closes consolidated PRs with explanatory comments
    - Deletes obsolete branches
@@ -105,32 +131,39 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
    - Will open first update PRs next Monday
 
 ### Requires One-Time Setup (Per Developer)
-1. **Husky hooks**: Any developer who clones the repo should run:
+
+1. **Husky hooks** (Not yet active): Husky is installed but hooks need to be configured:
    ```bash
-   npm install  # Automatically runs husky install
+   npm install
+   npx husky init
+   # Create hook scripts in .husky/ directory based on .huskyrc.json
    ```
-   Hooks will then run on every commit/push
+   Once configured, hooks will run on every commit/push
 
 ## 🎯 Benefits
 
 ### 1. Zero-Effort PR Cleanup
+
 - No manual closing of consolidated PRs
 - No manual deletion of branches
 - Automatic documentation in PR comments
 
 ### 2. Automated Dependency Management
+
 - Weekly security updates
 - Grouped updates reduce PR noise
 - Smart major version ignoring
 - Automatic rebasing
 
 ### 3. Early Issue Detection
+
 - Formatting issues caught before commit
 - Build failures caught before push
 - Type errors identified early
 - Reduces CI failures
 
 ### 4. Clear Documentation
+
 - All automation explained
 - Troubleshooting guides included
 - Customization instructions provided
@@ -138,27 +171,35 @@ This commit adds comprehensive automation infrastructure to handle post-merge ac
 ## 📋 Manual Actions Still Required
 
 ### 1. Review Dismissal
+
 The automation cannot dismiss GitHub reviews. Manual steps:
+
 - Go to PR #18
 - For each review, click "Resolve conversation" or "Dismiss review"
 - See `REVIEW_RESOLUTION.md` for detailed instructions
 
 ### 2. Deployment
+
 After merge, deploy to production:
+
 ```bash
 npm run build
 # Deploy dist/ folder to hosting service
 ```
 
 ### 3. Security Vulnerabilities
+
 Address the 5 moderate vulnerabilities:
+
 ```bash
 npm audit
 npm audit fix
 ```
 
 ### 4. PyScript Version Check
+
 Complete the implementation in `scripts/check-pyscript-version.sh`:
+
 - Add actual version parsing logic
 - Test the script
 - Integrate with Husky
@@ -166,6 +207,7 @@ Complete the implementation in `scripts/check-pyscript-version.sh`:
 ## 🔍 Testing & Verification
 
 ### Before Merge
+
 - [x] All files created successfully
 - [x] Workflow syntax validated
 - [x] Dependabot config validated
@@ -174,6 +216,7 @@ Complete the implementation in `scripts/check-pyscript-version.sh`:
 - [x] package.json updated with husky
 
 ### After Merge (Verification Steps)
+
 1. Check GitHub Actions tab for post-merge-cleanup run
 2. Verify PRs #1, #7, #8, #10, #12, #14, #15 are closed
 3. Verify obsolete branches are deleted
@@ -183,26 +226,30 @@ Complete the implementation in `scripts/check-pyscript-version.sh`:
 ## 🐛 Troubleshooting
 
 ### If post-merge cleanup doesn't run:
+
 1. Check Actions tab for workflow run status
 2. Verify PR was merged (not just closed)
 3. Check workflow file for syntax errors
 4. Manually close PRs and delete branches if needed
 
 ### If Dependabot doesn't create PRs:
+
 1. Check repository settings → Security → Dependabot
 2. Verify configuration file syntax
 3. Check for open PR limits
 4. Review Insights → Dependency graph → Dependabot
 
 ### If Husky hooks don't work:
-1. Run `npm install` in repository
-2. Run `npx husky install` manually
-3. Check `.husky/` directory was created
-4. Verify `chmod +x .husky/*`
+
+1. Hooks are not yet configured - `.husky/` directory needs to be created
+2. Run `npx husky init` to initialize Husky v9
+3. Create hook scripts in `.husky/` directory (currently only `.huskyrc.json` exists, which is not used by Husky v9)
+4. Verify `chmod +x .husky/*` after creating hooks
 
 ## 📚 Documentation References
 
 All details available in:
+
 - **AUTOMATION_SETUP.md** - Complete automation guide
 - **REVIEW_RESOLUTION.md** - Review resolution instructions
 - **PR_READINESS.md** - Merge readiness assessment
@@ -214,7 +261,7 @@ All details available in:
 This automation infrastructure eliminates manual toil from the post-merge process while maintaining code quality through automated checks. After the initial one-time setup (husky install), everything runs automatically:
 
 - ✅ PR cleanup: Automatic
-- ✅ Branch deletion: Automatic  
+- ✅ Branch deletion: Automatic
 - ✅ Dependency updates: Automatic
 - ✅ Pre-commit checks: Automatic
 - ✅ Documentation: Complete
diff --git a/CODERABBIT_FIXES.md b/CODERABBIT_FIXES.md
index 64c1be3..577446a 100644
--- a/CODERABBIT_FIXES.md
+++ b/CODERABBIT_FIXES.md
@@ -9,9 +9,11 @@ All critical TypeScript type safety issues and accessibility concerns identified
 ## Fixed Issues
 
 ### 1. ✅ Logo.vue - TypeScript Ref Typing and Null Guards
+
 **Issue**: `ref(null)` inferred as `Ref<null>` causing type errors and potential null reference crashes.
 
 **Fix Applied**:
+
 - Added proper SVG element type: `const svg = ref<SVGSVGElement | null>(null)`
 - Added null guard before RoughJS operations: `if (!svg.value) return`
 - Added null guard before `appendChild`: Only called after confirming `svg.value` exists
@@ -19,11 +21,14 @@ All critical TypeScript type safety issues and accessibility concerns identified
 **Impact**: Prevents runtime crashes when SVG element isn't mounted yet.
 
 ### 2. ✅ App.vue - Missing Import and Invalid CSS
-**Issue**: 
+
+**Issue**:
+
 - `nextTick` called on line 93 but not imported (hard TypeScript error)
 - CSS properties wrapped in quotes making them invalid
 
 **Fix Applied**:
+
 - Added `nextTick` to imports: `import {nextTick, onMounted, ref} from 'vue'`
 - Removed quotes from CSS values:
   - `--el-header-height: '6.5rem'` → `--el-header-height: 6.5rem`
@@ -32,14 +37,17 @@ All critical TypeScript type safety issues and accessibility concerns identified
   - `serializeSVG(svg: SVGSVGElement)`
   - `generateSvgBackground(container: HTMLElement)`
 
-**Impact**: 
+**Impact**:
+
 - Fixes compile error preventing app from running
 - Restores intended header sizing
 
 ### 3. ✅ ImageGallery.vue - TypeScript Type Safety
+
 **Issue**: Untyped refs causing type inference failures throughout the component.
 
 **Fix Applied**:
+
 - Defined `GalleryImage` type for image data
 - Typed all refs properly:
   - `const images = ref<GalleryImage[]>([])`
@@ -53,9 +61,11 @@ All critical TypeScript type safety issues and accessibility concerns identified
 **Impact**: Prevents type errors and null reference crashes in gallery operations.
 
 ### 4. ✅ ImageSelection.vue - Emit Type Consistency
+
 **Issue**: `removeImage` emitted ID array instead of File objects, breaking downstream components expecting File[].
 
 **Fix Applied**:
+
 ```typescript
 // Emit remaining File objects, not IDs
 const remainingFiles = this.images
@@ -67,11 +77,14 @@ this.$emit('update:selectedImages', remainingFiles)
 **Impact**: Maintains consistent data types across component boundaries, preventing PyScript bridge failures.
 
 ### 5. ✅ handdrawn.scss - Accessibility Focus Styles
+
 **Issue**:
+
 - Global `:focus { outline: none }` removed all focus indicators (WCAG violation)
 - No visible keyboard focus for interactive elements
 
 **Fix Applied**:
+
 - Removed global `outline: none` rule
 - Added explicit accessible focus styles:
   ```scss
@@ -85,7 +98,8 @@ this.$emit('update:selectedImages', remainingFiles)
   - `&:focus-visible + label::before` (checkboxes/radios)
   - `&:focus-visible + label::after` (switches)
 
-**Impact**: 
+**Impact**:
+
 - Restores keyboard navigation visibility
 - Meets WCAG 2.1 Level AA focus indicator requirements
 - Improves accessibility for keyboard and screen reader users
@@ -93,13 +107,17 @@ this.$emit('update:selectedImages', remainingFiles)
 ## Verification
 
 ### Build Status
+
 ```bash
 ✓ built in 7.39s
 ```
+
 Build continues to pass with no errors.
 
 ### Type Checking Status
+
 Some TypeScript errors remain in other files not critical to the identified issues. The critical fixes prevent:
+
 - Runtime null reference errors (Logo.vue, ImageGallery.vue)
 - Compilation failures (App.vue)
 - Type mismatches breaking component communication (ImageSelection.vue)
@@ -108,7 +126,9 @@ Some TypeScript errors remain in other files not critical to the identified issu
 ## Remaining Items
 
 ### Non-Critical TypeScript Errors
+
 The following non-critical TypeScript errors exist but don't block the build or cause runtime issues:
+
 - Missing type declarations for some third-party libraries (`vue3-image-preview`, `roughjs/bundled`)
 - Some implicit `any` types in older Vue 2-style components that need gradual migration
 - File System API types (experimental browser API)
@@ -116,10 +136,12 @@ The following non-critical TypeScript errors exist but don't block the build or
 These can be addressed in future PRs focused on comprehensive TypeScript migration.
 
 ### Not Addressed (By Design)
+
 - **SelectionTools.vue state management**: CodeRabbit noted menu actions work on local state. This component appears to be a stub/placeholder for future functionality and doesn't need immediate fixing.
 - **Global font overrides**: Intentional design choice for sketchy aesthetic. Scoping would require extensive CSS refactoring.
 
 ## Files Changed
+
 - `src/components/Logo.vue` - TypeScript typing and null guards
 - `src/App.vue` - Import fix and CSS corrections
 - `src/components/ImageGallery.vue` - TypeScript types
@@ -127,6 +149,7 @@ These can be addressed in future PRs focused on comprehensive TypeScript migrati
 - `src/assets/scss/handdrawn.scss` - Accessibility focus styles
 
 ## Testing Recommendations
+
 1. **Keyboard Navigation**: Test all interactive elements with Tab key to verify focus indicators
 2. **Image Upload Flow**: Verify File objects flow correctly through ImageSelection → ProcessImages → PyScript
 3. **SVG Rendering**: Confirm Logo renders without console errors on mount
diff --git a/CONSOLIDATION_CHANGES.md b/CONSOLIDATION_CHANGES.md
index 12c9263..8ef519d 100644
--- a/CONSOLIDATION_CHANGES.md
+++ b/CONSOLIDATION_CHANGES.md
@@ -5,11 +5,13 @@ This document tracks all changes made during the consolidation of 7 open PRs int
 ## 📦 Package Version Changes
 
 ### ✅ Upgrades Applied
+
 - **element-plus**: `^2.9.1` → `^2.11.4` (security updates from Snyk PRs #12, #14, #15)
 - **vue**: `^3.5.13` → `^3.5.22` (latest stable with bug fixes)
 - **vue-router**: `^4.5.0` → `^4.5.1` (latest stable with improvements)
 
 ### 🔧 Configuration Modernizations
+
 - **ESLint**: Migrated from CommonJS to flat config format (ESLint 9.x compatible)
 - **PyScript**: Updated to `2025.5.1` with Pyodide `0.26.1`
 - **CI/CD**: Replaced `.github/workflows/build.yml` with comprehensive `.github/workflows/ci.yml`
@@ -17,9 +19,11 @@ This document tracks all changes made during the consolidation of 7 open PRs int
 ## 🗑️ Removed Files and Functionality
 
 ### Removed Icon Components (Renamed for Consistency)
+
 The following sketch icon components were removed and replaced with PascalCase versions:
 
 #### Removed Files:
+
 - `src/assets/sketch_icons/add-image.vue` → `src/assets/sketch_icons/AddImageIcon.vue`
 - `src/assets/sketch_icons/blood-droplet.vue` → `src/assets/sketch_icons/BloodDropletIcon.vue`
 - `src/assets/sketch_icons/check-mark.vue` → `src/assets/sketch_icons/CheckMarkIcon.vue`
@@ -35,6 +39,7 @@ The following sketch icon components were removed and replaced with PascalCase v
 **Action Required**: Update any imports that reference the old kebab-case filenames.
 
 ### Removed Workflow File
+
 - `.github/workflows/build.yml` → Replaced with `.github/workflows/ci.yml`
 
 **Reason for Removal**: Basic build workflow replaced with comprehensive CI pipeline including linting, formatting, type checking, and build validation.
@@ -44,11 +49,13 @@ The following sketch icon components were removed and replaced with PascalCase v
 ## ➕ Added Functionality
 
 ### New Files Added:
+
 - `FUTURE_WORK.md` - Comprehensive roadmap for future development
 - `src/components/HighlightedText.vue` - New component for text highlighting
 - `.github/workflows/ci.yml` - Enhanced CI pipeline
 
 ### Enhanced Configuration:
+
 - **Prettier**: Added `format:check` script for CI validation
 - **ESLint**: Modern flat configuration with improved TypeScript support
 - **PyScript**: Enhanced JavaScript-Python interop with event-driven communication
@@ -56,6 +63,7 @@ The following sketch icon components were removed and replaced with PascalCase v
 ## 🔄 Modified Components and Files
 
 ### Configuration Files Modified:
+
 - `package.json` - Dependencies updated, scripts enhanced
 - `eslint.config.js` - Migrated to flat config format
 - `.prettierrc.json` - Updated for consistent formatting
@@ -65,19 +73,23 @@ The following sketch icon components were removed and replaced with PascalCase v
 ## 🎯 Future Development Recommendations
 
 ### High Priority Actions:
+
 1. **Update Import Statements**: Review all components for imports of renamed icon files
 2. **Test Icon Usage**: Verify all sketch icons render correctly with new naming
 3. **Dependency Monitoring**: Set up automated monitoring for security updates
 4. **PyScript Migration**: Consider gradual migration to newer PyScript patterns
 
 ### Development Guidelines:
+
 1. **Component Naming**: Always use PascalCase for Vue component filenames
 2. **Icon Management**: Consider consolidating icon management into a single directory structure
 3. **Type Safety**: Leverage the improved TypeScript configuration for better development experience
 4. **CI/CD**: Utilize the new comprehensive CI pipeline for quality assurance
 
 ### Planned Future Work:
+
 See `FUTURE_WORK.md` and `TODO.md` for detailed roadmap including:
+
 - Sketchy UI library overhaul
 - PyScript version check automation
 - Architecture documentation improvements
@@ -86,6 +98,7 @@ See `FUTURE_WORK.md` and `TODO.md` for detailed roadmap including:
 ## 🔍 Validation Steps Completed
 
 ### Build Validation:
+
 - ✅ Build succeeds in 11.37s
 - ✅ All 1566 modules transformed successfully
 - ✅ No breaking changes introduced
@@ -93,6 +106,7 @@ See `FUTURE_WORK.md` and `TODO.md` for detailed roadmap including:
 - ⚠️ Some TypeScript errors exist but don't block build (documented in CODERABBIT_FIXES.md)
 
 ### Functionality Validation:
+
 - ✅ All core application features preserved
 - ✅ PyScript integration maintained
 - ✅ UI components render correctly
@@ -113,12 +127,14 @@ For future AI agents working on this codebase:
 **NEW in commit ddcc433**: Comprehensive automation infrastructure added
 
 ### What's Automated:
+
 - ✅ **PR Cleanup**: Automatic closing of consolidated PRs (#1, #7, #8, #10, #12, #14, #15)
 - ✅ **Branch Deletion**: Automatic deletion of obsolete branches
 - ✅ **Dependency Updates**: Weekly Dependabot PRs for security updates
 - ✅ **Pre-commit Checks**: Husky hooks for code quality
 
 ### Documentation:
+
 - `AUTOMATION_SETUP.md` - Complete automation guide
 - `REVIEW_RESOLUTION.md` - Review dismissal instructions
 - `AUTOMATION_SUMMARY.md` - Quick automation overview
@@ -130,6 +146,7 @@ For future AI agents working on this codebase:
 ## 📞 Support and Questions
 
 For questions about removed functionality or migration recommendations, refer to:
+
 - `AUTOMATION_SETUP.md` for automation infrastructure
 - `FUTURE_WORK.md` for planned improvements
 - `TODO.md` for specific technical tasks
@@ -141,7 +158,9 @@ For questions about removed functionality or migration recommendations, refer to
 ## 🔍 Known Remaining Issues (Non-Blocking)
 
 ### TypeScript Errors (Non-Critical)
+
 Some TypeScript errors remain but **do not** block the build process:
+
 - Missing type declarations for third-party libraries (`vue3-image-preview`, `roughjs/bundled`)
 - Some implicit `any` types in older Vue 2-style components
 - File System API types (experimental browser API)
@@ -149,6 +168,7 @@ Some TypeScript errors remain but **do not** block the build process:
 These are documented in `CODERABBIT_FIXES.md` and can be addressed in future PRs.
 
 ### npm Audit Warnings
+
 - 5 moderate severity vulnerabilities exist in transitive dependencies
 - These are in development dependencies and don't affect production builds
 - Can be addressed with `npm audit fix` in a future security-focused PR
@@ -156,7 +176,8 @@ These are documented in `CODERABBIT_FIXES.md` and can be addressed in future PRs
 ---
 
 **Last Updated**: October 14, 2025
-**Consolidation Commits**: 
+**Consolidation Commits**:
+
 - c34e753 (Complete PR consolidation: Unified codebase from all open PRs)
 - 4f8ba7a (Fix package version regressions and document consolidation changes)
-- 5999327 (Address CodeRabbit review: Fix TypeScript types, null guards, and accessibility)
\ No newline at end of file
+- 5999327 (Address CodeRabbit review: Fix TypeScript types, null guards, and accessibility)
diff --git a/NEXT_STEPS.md b/NEXT_STEPS.md
new file mode 100644
index 0000000..b6b98b5
--- /dev/null
+++ b/NEXT_STEPS.md
@@ -0,0 +1,185 @@
+# Next Steps - Subsequent Implementation PR
+
+This document outlines the tasks and features that should be implemented in a subsequent PR after this preliminary setup PR is merged. The preliminary PR (#31) focuses on Copilot instructions, ESLint configuration, and code formatting. The subsequent PR should build upon this foundation with more substantial feature work.
+
+## Context
+
+This preliminary PR establishes:
+- ✅ Accurate Copilot instructions for the repository
+- ✅ Working ESLint configuration with proper ignore patterns
+- ✅ Consistent code formatting across the codebase
+- ✅ Documented known issues and workarounds
+- ✅ Accurate documentation for tooling (Husky, Prettier, TypeScript)
+
+## Subsequent PR Scope
+
+The following items should be addressed in the next major implementation PR after this one is merged:
+
+### 1. TypeScript Type Safety Improvements
+
+**Priority**: High  
+**Estimated Effort**: Medium-Large
+
+#### Issues to Address (46+ TypeScript errors)
+
+**a) ImageSelection.vue - Array Type Inference**
+- Fix `never[]` type inference issues
+- Add proper type annotations for image arrays
+- Define interfaces for image data structures
+
+**b) Window API Types - File System Access API**
+- Add type declarations for experimental File System Access API
+- Define proper types for `showOpenFilePicker` and related methods
+- Consider creating a custom type definition file
+
+**c) RoughJS Module Declarations**
+- Add TypeScript declarations for RoughJS library
+- Either contribute types to DefinitelyTyped or create local declarations
+- Ensure SVG rendering components have proper RoughJS types
+
+**d) Other Component Type Issues**
+- Review and fix implicit `any` types across components
+- Add proper type guards where needed
+- Ensure all refs and reactive data are properly typed
+
+### 2. Pre-commit Hooks Configuration
+
+**Priority**: Medium  
+**Estimated Effort**: Small
+
+#### Tasks
+- Run `npx husky init` to create `.husky/` directory
+- Create pre-commit hook script:
+  ```bash
+  echo "npm run format:check && npm run lint -- --no-fix" > .husky/pre-commit
+  chmod +x .husky/pre-commit
+  ```
+- Create pre-push hook script:
+  ```bash
+  echo "npm run type-check && npm run build" > .husky/pre-push
+  chmod +x .husky/pre-push
+  ```
+- Remove or update legacy `.huskyrc.json` file
+- Test hooks locally before committing
+- Update documentation to reflect actual hook setup
+
+### 3. PyScript Version Check Implementation
+
+**Priority**: Low  
+**Estimated Effort**: Small
+
+#### Tasks
+- Complete implementation in `scripts/check-pyscript-version.sh`
+- Add version parsing logic for:
+  - `public/pyscript/config.toml`
+  - HTML files referencing PyScript
+  - Documentation mentioning PyScript version
+- Integrate with Husky pre-commit hooks
+- Add tests for the version check script
+- Document usage and expected behavior
+
+### 4. Security Vulnerability Remediation
+
+**Priority**: High  
+**Estimated Effort**: Small-Medium
+
+#### Tasks
+- Address 5 moderate npm security vulnerabilities
+- Run `npm audit` to review all vulnerabilities
+- Attempt `npm audit fix` for automatic fixes
+- Manually update packages if needed
+- Test application after updates
+- Document any vulnerabilities that cannot be fixed (with justification)
+
+### 5. Test Infrastructure Setup
+
+**Priority**: Medium  
+**Estimated Effort**: Medium
+
+#### Tasks
+- Create initial test files using Vitest
+- Add component tests for key components:
+  - ImageSelection.vue
+  - ImageProcessor.vue
+  - StepManager.vue
+- Add utility function tests
+- Set up test coverage reporting
+- Integrate tests into CI workflow
+- Document testing approach and conventions
+
+### 6. Prettier Cache Issue Resolution
+
+**Priority**: Low  
+**Estimated Effort**: Small
+
+#### Tasks
+- Investigate Prettier cache false positives
+- Consider adding `.prettierignore` if needed
+- Update CI workflow to use `--cache=false` flag
+- Document workaround in contributor guide
+- Monitor for upstream Prettier fixes
+
+### 7. Documentation Improvements
+
+**Priority**: Low  
+**Estimated Effort**: Small
+
+#### Tasks
+- Add CONTRIBUTING.md with development workflow
+- Create component documentation in Storybook or similar
+- Document PyScript bridge communication protocol
+- Add architecture decision records (ADRs) for major decisions
+- Update README with current project status
+
+## Implementation Strategy
+
+### Phase 1: Foundation (Immediate)
+1. TypeScript type safety improvements (most impactful)
+2. Security vulnerability fixes (critical)
+3. Pre-commit hooks setup (quick win)
+
+### Phase 2: Quality & Testing (Soon After)
+4. Test infrastructure setup
+5. PyScript version check implementation
+
+### Phase 3: Polish (Later)
+6. Prettier cache investigation
+7. Documentation enhancements
+
+## Success Criteria
+
+The subsequent PR should:
+- ✅ Reduce TypeScript errors from 46+ to <10
+- ✅ Have all security vulnerabilities addressed or documented
+- ✅ Include at least 20 unit tests with >70% coverage
+- ✅ Have working pre-commit hooks that prevent bad commits
+- ✅ Build and run successfully with no new warnings
+- ✅ Pass all existing linting and formatting checks
+
+## Notes
+
+- This is a living document and can be updated as priorities change
+- Some tasks may be split into separate smaller PRs if appropriate
+- New issues discovered during implementation should be added here
+- Consider creating GitHub issues for each major task for better tracking
+
+## Related Work
+
+This subsequent PR will complement:
+- PR #30: Infrastructure as Code and CI/CD improvements
+- PR #31: This preliminary setup PR (Copilot instructions)
+
+## Timeline Estimate
+
+- **Phase 1**: 1-2 weeks
+- **Phase 2**: 1 week  
+- **Phase 3**: 1 week
+
+**Total estimated effort**: 3-4 weeks of development work
+
+---
+
+**Document Version**: 1.0  
+**Created**: October 16, 2025  
+**Last Updated**: October 16, 2025  
+**Status**: Ready for implementation after PR #31 merge
diff --git a/PR_READINESS.md b/PR_READINESS.md
index 717a65d..2100e50 100644
--- a/PR_READINESS.md
+++ b/PR_READINESS.md
@@ -11,6 +11,7 @@ This PR successfully consolidates all 7 open PRs into a unified, modern codebase
 ## 📋 Consolidation Summary
 
 ### PRs Consolidated:
+
 1. **PR #1**: `refactor-cleanup` - Foundational refactoring and cleanup
 2. **PR #7**: `phase1-refactor-pyscript-deps` - PyScript dependency modernization
 3. **PR #8**: `fix/eslint-errors` - ESLint fixes and comprehensive modernization (BASE)
@@ -20,6 +21,7 @@ This PR successfully consolidates all 7 open PRs into a unified, modern codebase
 7. **PR #15**: `snyk-upgrade-element-plus-2.10.5` - Snyk security update
 
 ### Consolidation Approach:
+
 Used **PR #8** (`fix/eslint-errors`) as the foundation due to its comprehensive modernization, then integrated valuable changes from all other PRs.
 
 ---
@@ -27,30 +29,36 @@ Used **PR #8** (`fix/eslint-errors`) as the foundation due to its comprehensive
 ## 🎯 Key Improvements Delivered
 
 ### 1. Dependency Upgrades ✅
+
 - **element-plus**: 2.9.1 → 2.11.4 (all Snyk security fixes applied)
 - **vue**: 3.5.13 → 3.5.22 (latest stable)
 - **vue-router**: 4.5.0 → 4.5.1 (latest stable)
 - **PyScript**: 2025.5.1 with Pyodide 0.26.1
 
 ### 2. TypeScript Type Safety ✅
+
 Fixed critical issues that would cause runtime crashes:
+
 - **Logo.vue**: Added SVGSVGElement typing + null guards
 - **App.vue**: Imported missing `nextTick`, fixed parameter types
 - **ImageGallery.vue**: Proper TypeScript types for refs
 - **ImageSelection.vue**: Fixed File[] emit consistency
 
 ### 3. Accessibility Compliance ✅
+
 - Removed global `outline: none` (WCAG violation)
 - Added accessible `:focus-visible` styles for all interactive elements
 - Meets WCAG 2.1 Level AA requirements
 - Improved keyboard navigation visibility
 
 ### 4. Modern Configuration ✅
+
 - **ESLint 9.x**: Migrated to flat config format
 - **CI/CD**: Comprehensive pipeline with lint, format, type-check, and build
 - **PyScript**: Event-driven JS-Python communication
 
 ### 5. Comprehensive Documentation ✅
+
 - **CONSOLIDATION_CHANGES.md**: All changes, removals, version updates
 - **CODERABBIT_FIXES.md**: TypeScript and accessibility fixes
 - **FUTURE_WORK.md**: Roadmap for future development
@@ -62,6 +70,7 @@ Fixed critical issues that would cause runtime crashes:
 ## ✅ Validation Results
 
 ### Build Status
+
 ```
 ✓ built in 11.37s
 ✓ 1566 modules transformed
@@ -70,6 +79,7 @@ Fixed critical issues that would cause runtime crashes:
 ```
 
 ### Type Checking
+
 ```
 ✓ Critical type errors fixed (Logo, App, ImageGallery, ImageSelection)
 ⚠️ 26 non-critical TypeScript errors remain (documented)
@@ -77,13 +87,15 @@ Fixed critical issues that would cause runtime crashes:
 ```
 
 **Non-Critical Errors:**
+
 - Missing type declarations for third-party libraries
-- Implicit `any` types in older Vue 2-style components  
+- Implicit `any` types in older Vue 2-style components
 - Experimental browser API types (File System API)
 
 These don't block builds and are documented for future resolution.
 
 ### Dependency Audit
+
 ```
 ⚠️ 5 moderate severity vulnerabilities (transitive dev dependencies)
 ✓ No critical/high vulnerabilities
@@ -93,6 +105,7 @@ These don't block builds and are documented for future resolution.
 Can be addressed with `npm audit fix` in a future security-focused PR.
 
 ### Linting
+
 ```
 ✓ ESLint 9.x flat config working
 ✓ Prettier formatting consistent
@@ -100,6 +113,7 @@ Can be addressed with `npm audit fix` in a future security-focused PR.
 ```
 
 ### Functionality
+
 ```
 ✅ Core image processing preserved
 ✅ PyScript integration working
@@ -113,14 +127,18 @@ Can be addressed with `npm audit fix` in a future security-focused PR.
 ## 📊 Review Comments Status
 
 ### CodeRabbit Review ✅
+
 All critical issues addressed in commit `5999327`:
+
 - ✅ TypeScript type safety issues fixed
 - ✅ Null guard protections added
 - ✅ Accessibility violations resolved
 - ✅ Component communication type consistency restored
 
 ### User Feedback ✅
+
 All user requests addressed:
+
 - ✅ Package version regressions fixed (commit `4f8ba7a`)
 - ✅ Comprehensive change documentation created
 - ✅ No functionality removed without documentation
@@ -128,6 +146,7 @@ All user requests addressed:
 - ✅ Agent task considerations included
 
 ### Unresolved Comments
+
 None. All actionable comments have been addressed.
 
 ---
@@ -137,7 +156,9 @@ None. All actionable comments have been addressed.
 After merging this PR into master, perform the following:
 
 ### 1. Close Consolidated PRs
+
 Close and mark as consolidated:
+
 - PR #1 (refactor-cleanup)
 - PR #7 (phase1-refactor-pyscript-deps)
 - PR #8 (fix/eslint-errors) - BASE
@@ -147,6 +168,7 @@ Close and mark as consolidated:
 - PR #15 (snyk-upgrade-element-plus-2.10.5)
 
 ### 2. Delete Obsolete Branches
+
 ```bash
 git branch -d refactor-cleanup
 git branch -d phase1-refactor-pyscript-deps
@@ -157,11 +179,13 @@ git branch -d snyk-upgrade-element-plus-2.10.5
 ```
 
 ### 3. Deploy to Production
+
 - Run full build: `npm run build`
 - Verify functionality in production environment
 - Monitor for any runtime issues
 
 ### 4. Future Security Updates
+
 - Set up Dependabot or Snyk for automated security monitoring
 - Address the 5 moderate vulnerabilities in next maintenance window
 
@@ -172,6 +196,7 @@ git branch -d snyk-upgrade-element-plus-2.10.5
 All changes are comprehensively documented for future developers and AI agents:
 
 ### Key Documentation Files:
+
 1. **CONSOLIDATION_CHANGES.md** - Change tracking, version updates, removals
 2. **CODERABBIT_FIXES.md** - TypeScript and accessibility fixes
 3. **FUTURE_WORK.md** - Development roadmap and planned improvements
@@ -180,6 +205,7 @@ All changes are comprehensively documented for future developers and AI agents:
 6. **PR_READINESS.md** - This comprehensive readiness assessment
 
 ### Documentation Completeness:
+
 - ✅ All package version changes documented
 - ✅ All removed files/functionality documented with rationale
 - ✅ All added functionality documented
@@ -193,25 +219,33 @@ All changes are comprehensively documented for future developers and AI agents:
 ## ⚠️ Known Limitations (Non-Blocking)
 
 ### 1. TypeScript Errors
+
 26 non-critical TypeScript errors remain but don't prevent builds:
+
 - Primarily missing type declarations for legacy libraries
 - Can be gradually addressed in future PRs
 - Documented in CODERABBIT_FIXES.md
 
 ### 2. Test Coverage
+
 No automated tests currently exist:
+
 - Vitest infrastructure is set up
 - Test creation is planned (see FUTURE_WORK.md)
 - Manual functional testing performed successfully
 
 ### 3. Dependency Vulnerabilities
+
 5 moderate vulnerabilities in transitive dev dependencies:
+
 - Don't affect production builds
 - Can be addressed with `npm audit fix --force`
 - Should be handled in dedicated security PR
 
 ### 4. Chunk Size Warning
+
 Large bundle size due to PyScript/Pyodide:
+
 - Expected for this application architecture
 - Future optimization opportunity documented
 - Doesn't affect functionality
@@ -223,8 +257,9 @@ Large bundle size due to PyScript/Pyodide:
 ### ✅ **APPROVED FOR SQUASH AND MERGE**
 
 **Rationale:**
+
 1. All critical issues resolved
-2. Build succeeds consistently  
+2. Build succeeds consistently
 3. No breaking changes introduced
 4. Comprehensive documentation provided
 5. All code review comments addressed
@@ -233,6 +268,7 @@ Large bundle size due to PyScript/Pyodide:
 8. Modern best practices implemented
 
 **Merge Strategy:**
+
 - **Recommended**: Squash and merge
 - **Reason**: Consolidates 5 commits into clean history
 - **Commit Message**: Use PR title with summary from description
@@ -240,6 +276,7 @@ Large bundle size due to PyScript/Pyodide:
 **Confidence Level:** High (9/10)
 
 The only minor deductions are for:
+
 - Non-critical TypeScript errors (documented, can be fixed later)
 - Lack of automated tests (infrastructure ready, planned for future)
 
@@ -248,6 +285,7 @@ The only minor deductions are for:
 ## 📞 Support Information
 
 For questions or issues after merge:
+
 - Review `CONSOLIDATION_CHANGES.md` for change rationale
 - Check `CODERABBIT_FIXES.md` for specific fixes made
 - Consult `FUTURE_WORK.md` for planned improvements
@@ -261,20 +299,21 @@ For questions or issues after merge:
 **Target Branch**: master  
 **Source Branch**: copilot/fix-24af5139-e7f4-41f7-8db2-e4ecab11f72c
 
-
 ---
 
 ## 🤖 AUTOMATION UPDATE (Commit ddcc433)
 
-**All post-merge actions are now automatedecho ___BEGIN___COMMAND_OUTPUT_MARKER___ ; PS1= ; PS2= ; EC=0 ; echo ___BEGIN___COMMAND_DONE_MARKER___0 ; }*
+\*_All post-merge actions are now automatedecho ***BEGIN***COMMAND_OUTPUT_MARKER*** ; PS1= ; PS2= ; EC=0 ; echo ***BEGIN***COMMAND_DONE_MARKER***0 ; }_
 
 ### What's Automated:
+
 - ✅ **PR Cleanup**: Closes PRs #1, #7, #8, #10, #12, #14, #15 automatically
 - ✅ **Branch Deletion**: Removes all obsolete branches automatically
 - ✅ **Dependency Updates**: Dependabot configured for weekly security updates
 - ✅ **Pre-commit Checks**: Husky hooks for code quality
 
 ### Manual Actions (Only 3):
+
 1. Dismiss reviews (see REVIEW_RESOLUTION.md)
 2. Deploy to production (`npm run build`)
 3. Run `npm audit fix`
@@ -282,4 +321,3 @@ For questions or issues after merge:
 **Complete documentation**: `AUTOMATION_SETUP.md`
 
 When this PR merges, everything happens automatically. 🎉
-
diff --git a/REVIEW_RESOLUTION.md b/REVIEW_RESOLUTION.md
index 91444d9..1c044fe 100644
--- a/REVIEW_RESOLUTION.md
+++ b/REVIEW_RESOLUTION.md
@@ -7,14 +7,17 @@ This document provides instructions for resolving the three open reviews on PR #
 PR #18 has the following review comments that need to be addressed or dismissed:
 
 ### Review 1: CodeRabbit AI Review
+
 **Status**: Addressed in commits
 **Action Required**: Dismiss review or mark as resolved
 
 ### Review 2: User Request - Package Versions
+
 **Status**: Addressed in commit 4f8ba7a
 **Action Required**: Confirm resolution
 
 ### Review 3: User Request - Code Review Comments
+
 **Status**: Addressed in commit 5999327 and b682a60
 **Action Required**: Confirm resolution
 
@@ -25,6 +28,7 @@ PR #18 has the following review comments that need to be addressed or dismissed:
 ### 1. CodeRabbit Review - Critical Issues
 
 **Issues Raised**:
+
 - TypeScript type safety problems (Logo.vue, App.vue, ImageGallery.vue)
 - Missing imports (nextTick in App.vue)
 - Invalid CSS syntax
@@ -32,6 +36,7 @@ PR #18 has the following review comments that need to be addressed or dismissed:
 - Accessibility violations (global outline:none)
 
 **Resolution** (Commit: 5999327):
+
 - ✅ **Logo.vue**: Added `SVGSVGElement` typing and null guards
 - ✅ **App.vue**: Imported missing `nextTick`, fixed CSS quotes, added parameter types
 - ✅ **ImageGallery.vue**: Added proper TypeScript types for all refs
@@ -41,6 +46,7 @@ PR #18 has the following review comments that need to be addressed or dismissed:
 **Documentation**: `CODERABBIT_FIXES.md` contains complete details
 
 **Validation**:
+
 - Build passes: ✅ (8.69s)
 - All critical issues resolved: ✅
 - Accessibility compliant: ✅
@@ -48,9 +54,11 @@ PR #18 has the following review comments that need to be addressed or dismissed:
 ### 2. Package Version Verification
 
 **Issue Raised**:
+
 > "Please ensure that the end result after rebasing and merging this PR doesn't regress Package and dependency versions..."
 
 **Resolution** (Commit: 4f8ba7a):
+
 - ✅ **element-plus**: 2.9.1 → 2.11.4 (all Snyk security updates)
 - ✅ **vue**: 3.5.13 → 3.5.22 (latest stable)
 - ✅ **vue-router**: 4.5.0 → 4.5.1 (latest stable)
@@ -61,6 +69,7 @@ PR #18 has the following review comments that need to be addressed or dismissed:
 **Documentation**: `CONSOLIDATION_CHANGES.md` tracks all version changes and removals
 
 **Validation**:
+
 - All dependencies upgraded: ✅
 - No regressions: ✅
 - Comprehensive documentation: ✅
@@ -68,21 +77,25 @@ PR #18 has the following review comments that need to be addressed or dismissed:
 ### 3. Code Review Comments Resolution
 
 **Issue Raised**:
+
 > "Please ensure all code review comments and suggestions by coderabbitai and others are addressed if needed, and resolved."
 
 **Resolution** (Commits: 5999327, b682a60):
+
 - ✅ All CodeRabbit issues addressed (see section 1)
 - ✅ Package versions verified and corrected (see section 2)
 - ✅ Created `PR_READINESS.md` with comprehensive assessment
 - ✅ Updated `CONSOLIDATION_CHANGES.md` with accurate versions and known issues
 - ✅ All actionable comments resolved
 
-**Documentation**: 
+**Documentation**:
+
 - `PR_READINESS.md` - Complete merge readiness assessment
 - `CODERABBIT_FIXES.md` - TypeScript and accessibility fixes
 - `CONSOLIDATION_CHANGES.md` - All changes documented
 
 **Validation**:
+
 - All critical comments addressed: ✅
 - Build successful: ✅
 - Documentation complete: ✅
@@ -105,38 +118,41 @@ Since I (GitHub Copilot) cannot directly interact with GitHub's API to dismiss r
    - Or click the "..." menu → "Dismiss review"
 
 3. **Add dismissal reason**:
+
    ```
    All issues raised in this review have been addressed in subsequent commits:
    - Commit 5999327: TypeScript and accessibility fixes
    - Commit 4f8ba7a: Package version corrections
    - Commit b682a60: Documentation updates
-   
+
    See CODERABBIT_FIXES.md and PR_READINESS.md for details.
    ```
 
 ### Option 2: Request Review Resolution (No Special Permissions Needed)
 
 1. **Tag reviewers in a comment**:
+
    ```markdown
    @coderabbitai All issues from your review have been addressed:
-   
+
    ✅ TypeScript type safety - Fixed in commit 5999327
    ✅ Accessibility violations - Fixed in commit 5999327
    ✅ Package versions - Verified in commit 4f8ba7a
    ✅ Documentation - Complete in commit b682a60
-   
+
    Please re-review and approve if the fixes are satisfactory.
    ```
 
 2. **For user reviews**, add a comment:
+
    ```markdown
    All requested changes have been implemented:
-   
+
    ✅ Package versions verified (element-plus: 2.11.4, vue: 3.5.22)
    ✅ No functionality removed without documentation
    ✅ Comprehensive change tracking in CONSOLIDATION_CHANGES.md
    ✅ Future recommendations in FUTURE_WORK.md
-   
+
    Build validated: 8.69s, all tests passing.
    ```
 
@@ -171,6 +187,7 @@ Use this checklist to track review resolution:
 After all reviews are resolved:
 
 ### 1. Final Verification
+
 ```bash
 # Clone the branch
 git checkout copilot/fix-24af5139-e7f4-41f7-8db2-e4ecab11f72c
@@ -196,6 +213,7 @@ npm run lint -- --no-fix
 **Recommended merge method**: Squash and merge
 
 **Commit message**:
+
 ```
 Consolidate all open PRs into unified master-ready codebase (#18)
 
@@ -232,7 +250,7 @@ After merge, verify that automation runs:
      - refactor-cleanup
      - phase1-refactor-pyscript-deps
      - fix/eslint-errors
-     - snyk-upgrade-* branches
+     - snyk-upgrade-\* branches
 
 4. **Check cleanup comment**:
    - Return to merged PR #18
@@ -247,6 +265,7 @@ After merge, verify that automation runs:
 **Issue**: "You don't have permission to dismiss this review"
 
 **Solution**:
+
 - Ask repository owner/admin to dismiss
 - Or request reviewer to update their review status
 - Or merge with approved reviews from other maintainers
@@ -256,16 +275,18 @@ After merge, verify that automation runs:
 **Issue**: Post-merge cleanup workflow didn't execute
 
 **Solution**:
+
 1. Check workflow run status in Actions tab
 2. Verify PR was merged (not just closed)
 3. Check workflow file for syntax errors
 4. Manually close PRs and delete branches if needed:
+
    ```bash
    # Delete branches locally
    git branch -d refactor-cleanup
    git branch -d phase1-refactor-pyscript-deps
    # etc.
-   
+
    # Delete remote branches
    git push origin --delete refactor-cleanup
    git push origin --delete phase1-refactor-pyscript-deps
@@ -277,6 +298,7 @@ After merge, verify that automation runs:
 **Issue**: Build fails in production
 
 **Solution**:
+
 1. Verify npm version: `npm --version` (should be 11.0.0+)
 2. Clean install: `rm -rf node_modules package-lock.json && npm install`
 3. Check Node version: `node --version` (should be 20.x)
diff --git a/eslint.config.js b/eslint.config.js
index 62e107c..7fea4b4 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,10 +1,10 @@
 import pluginVue from 'eslint-plugin-vue'
-import {
-  defineConfig,
-  createConfig as vueTsEslintConfig,
-} from '@vue/eslint-config-typescript'
+import {defineConfig, createConfig as vueTsEslintConfig} from '@vue/eslint-config-typescript'
 
 export default defineConfig(
+  {
+    ignores: ['dist/**', 'dist-ssr/**', 'node_modules/**']
+  },
   pluginVue.configs['flat/recommended'],
-  vueTsEslintConfig(),
+  vueTsEslintConfig()
 )
diff --git a/package-lock.json b/package-lock.json
index a30bbe1..54f8132 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "eslint": "^9.17.0",
         "eslint-plugin-format": "^1.0.1",
         "eslint-plugin-vue": "^9.32.0",
+        "husky": "^9.1.7",
         "jsdom": "^25.0.1",
         "postcss": "^8.4.49",
         "prettier": "^3.4.2",
@@ -5519,6 +5520,22 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
diff --git a/src/assets/scss/handdrawn.scss b/src/assets/scss/handdrawn.scss
index a53533b..271738b 100644
--- a/src/assets/scss/handdrawn.scss
+++ b/src/assets/scss/handdrawn.scss
@@ -4,11 +4,11 @@ $lightgray: #919090;
 // @import url(https://fonts.googleapis.com/css?family=Indie+Flower);
 // @import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);
 // @import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);
-@import "https://fonts.googleapis.com/css?family=Architects+Daughter";
+@import 'https://fonts.googleapis.com/css?family=Architects+Daughter';
 
 body {
   // background: whitesmoke url(assets/backgrounds/paper_texture309.jpg);
-  background: whitesmoke url("assets/backgrounds/paper_texture310.jpg");
+  background: whitesmoke url('assets/backgrounds/paper_texture310.jpg');
 
   // background: whitesmoke url(assets/backgrounds/paper_texture318.jpg);
   // background: whitesmoke url(assets/backgrounds/paper_texture327.jpg);
diff --git a/src/components/HighlightedText.vue b/src/components/HighlightedText.vue
index 96f8d5a..0135f14 100644
--- a/src/components/HighlightedText.vue
+++ b/src/components/HighlightedText.vue
@@ -11,7 +11,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import {defineComponent, computed} from 'vue'
+
+interface TextPart {
+  text: string
+  highlight: boolean
+}
 
 export default defineComponent({
   name: 'HighlightedText',
@@ -26,22 +31,22 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const parts = computed(() => {
+    const parts = computed<TextPart[]>(() => {
       if (!props.query) {
-        return [{ text: props.text, highlight: false }]
+        return [{text: props.text, highlight: false}]
       }
       const regex = new RegExp(`(${props.query})`, 'gi')
       const result = []
       let lastIndex = 0
       props.text.replace(regex, (match, _, index) => {
         if (index > lastIndex) {
-          result.push({ text: props.text.substring(lastIndex, index), highlight: false })
+          result.push({text: props.text.substring(lastIndex, index), highlight: false})
         }
-        result.push({ text: match, highlight: true })
+        result.push({text: match, highlight: true})
         lastIndex = index + match.length
       })
       if (lastIndex < props.text.length) {
-        result.push({ text: props.text.substring(lastIndex), highlight: false })
+        result.push({text: props.text.substring(lastIndex), highlight: false})
       }
       return result
     })