Complete PR consolidation: Unified codebase from all open PRs

This commit consolidates all open PRs into a single, cohesive codebase:

Consolidated PRs:
- PR #1: Refactor, clean up, and improve app functionality
- PR #7: PyScript and dependency refactoring
- PR #8: ESLint fixes and comprehensive modernization (BASE)
- PR #10: Reverse merge resolution
- PR #12, #14, #15: Snyk security updates (element-plus upgrade)
- PR #18: Current copilot improvements

Key features integrated:
✅ PyScript 2025.5.1 with Pyodide 0.26.1
✅ ESLint 9.x flat config migration
✅ Element Plus v2.10.4+ (latest security updates)
✅ Comprehensive CI/CD pipeline
✅ Modern Vue 3 + TypeScript structure
✅ JavaScript-Python interop improvements
✅ Security vulnerability fixes
✅ Build system optimization
✅ Comprehensive documentation (copilot-instructions.md, TODO.md)

All branches ready for deletion after master update.

Author: Copilot

.github/workflows/azure-static-web-apps-thankful-mushroom-08ecc5d1e.yml

@@ -1,47 +1,52 @@
-name: Azure Static Web Apps CI/CD
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - master
-
-jobs:
-  build_and_deploy_job:
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
-    runs-on: ubuntu-latest
-    name: Build and Deploy Job
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          submodules: true
-          lfs: false
-
-      - name: Build And Deploy
-        id: builddeploy
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_MUSHROOM_08ECC5D1E }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
-          action: "upload"
-          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
-          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
-          app_location: "/" # App source code path
-          api_location: "" # Api source code path - optional
-          output_location: "dist" # Built app content directory - optional
-          ###### End of Repository/Build Configurations ######
-
-  close_pull_request_job:
-    if: github.event_name == 'pull_request' && github.event.action == 'closed'
-    runs-on: ubuntu-latest
-    name: Close Pull Request Job
-    steps:
-      - name: Close Pull Request
-        id: closepullrequest
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_MUSHROOM_08ECC5D1E }}
-          action: "close"
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - master
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+          lfs: false
+
+      - name: Fix git config permissions
+        run: |
+          sudo chown -R $(whoami) .git
+          sudo chmod -R u+w .git
+
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_MUSHROOM_08ECC5D1E }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: 'upload'
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: '/' # App source code path
+          api_location: '' # Api source code path - optional
+          output_location: 'dist' # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_MUSHROOM_08ECC5D1E }}
+          action: 'close'

.github/workflows/build.yml

@@ -0,0 +1,36 @@
+name: CI Checks and Build
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  validate-and-build:
+    name: Validate and Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x' # Matches @tsconfig/node20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check formatting
+        run: npm run format:check
+
+      - name: Lint code
+        run: npm run lint -- --no-fix # Ensure lint fails on error, not trying to fix in CI
+
+      - name: Type check
+        run: npm run type-check
+
+      - name: Build project
+        run: npm run build

.github/workflows/ci.yml

@@ -30,9 +30,9 @@ name: SonarCloud analysis
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request:
-    branches: [ "master" ]
+    branches: ['master']
   workflow_dispatch:
 
 permissions:
@@ -49,7 +49,7 @@ jobs:
         # uses: SonarSource/sonarcloud-github-action@v2.2.0
         uses: SonarSource/sonarcloud-github-action@4006f663ecaf1f8093e8e4abb9227f6041f52216
         env:
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}   # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
         with:
           # Additional arguments for the SonarScanner CLI
           args:

.github/workflows/sonarcloud.yml

@@ -7,5 +7,5 @@
   "trailingComma": "none",
   "htmlWhitespaceSensitivity": "ignore",
   "bracketSameLine": true,
-  "no-bracket-spacing": true
-}
+  "bracketSpacing": false
+}

.prettierrc.json

@@ -1,8 +1,5 @@
 {
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-standard-scss"
-  ],
+  "extends": ["stylelint-config-recommended", "stylelint-config-standard-scss"],
   "rules": {
     "scss/no-global-function-names": {
       "ignoreFunctions": ["darken"]

.stylelintrc.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

.vscode/extensions.json

@@ -0,0 +1,135 @@
+# Future Work & Roadmap for Bleedy.py
+
+This document outlines planned enhancements, refactoring tasks, and feature ideas for the Bleedy.py application. It consolidates items from previous analysis, `TODO.md`, and user requests.
+
+## Phase 1 Completion Notes
+
+Phase 1 focused on initial stabilization:
+
+- PyScript modernized to `2025.5.1`, Pyodide pinned to `0.26.1`.
+- PyScript loading splashscreen added.
+- Placeholder for PyScript version check hook created.
+- JS-PyScript communication refactored (event-based, no DOM polling for results).
+- Basic code cleanup (default bleed, removed dead components/deps).
+- Initial plan for sketchy UI library overhaul documented in `TODO.md`.
+- CI pipeline now runs lint, format check, type check, and build.
+- Local ESLint config updated to flat config, Prettier config corrected.
+
+## I. Core Infrastructure & Stability
+
+### 1. Sketchy UI Libraries Overhaul (High Priority)
+
+- **Objective:** Stabilize or replace the aging sketchy UI libraries to ensure long-term maintainability and remove current patching needs.
+- **Tasks (details in `TODO.md`):**
+  - **Fork `wired-elements`:** Create an internal, maintained fork (`bleedy-wired-elements`).
+    - Apply existing patch: `patches/wired-elements@3.0.0-rc.6.patch`.
+    - Audit and refactor components to use `Rough.js 4.6.6+` API correctly.
+    - Goal: Eliminate the need for `patches/roughjs@4.6.6.patch`.
+    - Review and update Lit/LitElement dependencies if outdated.
+  - **Address `DoodleCSS` and `paper-css`:**
+    - Manually verify current maintenance status.
+    - If unmaintained/problematic: Absorb styles into project, find alternatives, or replicate effects.
+  - **Ultimate Goal:** Remove all files from `patches/` and the `npm.patchedDependencies` section in `package.json`.
+
+### 2. PyScript Enhancements
+
+- **Full Pre-commit Hook:** Implement and test `scripts/check-pyscript-version.sh` with Husky for robust PyScript version management.
+- **Zipping in Python:** Research and potentially implement image zipping using Python within PyScript (`zipfile` module) if it offers significant advantages over client-side JS `jszip` (e.g., performance, bundle size reduction).
+
+### 3. Comprehensive Testing Strategy (Very High Priority)
+
+- **Objective:** Achieve robust test coverage to ensure code quality and prevent regressions.
+- **Tasks:**
+  - **Unit Testing (Vitest):**
+    - Write comprehensive unit tests for all Vue components (props, events, slots, logic).
+    - Test all composables (`useImageDownload`, any new ones).
+    - Test utility functions and configurations.
+    - Configure and enforce code coverage reporting in CI.
+  - **Integration Testing (Vitest):** Test interactions between key components (e.g., `ImageProcessor` and its steps, JS-PyScript interop mocks).
+  - **E2E Testing (Playwright or Cypress - select one):**
+    - Set up the chosen framework.
+    - Create E2E tests for all critical user flows.
+  - **Python Code Testing:**
+    - Research and implement best practices for testing PyScript's Python code (e.g., `add_bleed` function). This might involve extracting logic or using Pyodide's testing utilities if available.
+  - **Visual Regression Testing:** Implement tools (e.g., Percy, Applitools, or Playwright-based) to catch unintended UI changes, especially important for the sketchy aesthetic.
+  - **CI Integration:** Ensure all test suites run in CI (`ci.yml`) and fail the build on test failures.
+
+## II. Documentation & Developer Experience
+
+### 1. Enhanced Project Documentation
+
+- **Themed README.md:**
+  - Rebuild `README.md` using `othneildrew/Best-README-Template` as a structural base.
+  - Apply hand-drawn/sketchy styling using embedded HTML/CSS (if feasible and renders well on GitHub).
+  - Content: Detailed project description, features, full tech stack overview, File System Access API usage (privacy benefits), PyScript interaction model, clear setup/build/run/test instructions, license.
+- **`ARCHITECTURE.md`:** Create a detailed document (or merge into README) covering:
+  - Vue component hierarchy and data flow.
+  - PyScript integration details (event system, `bleedy_interop.js`).
+  - Strategy and current status of sketchy UI libraries.
+- **`LICENSE`:** Ensure MIT license file is present and correctly referenced.
+- **`CONTRIBUTING.md`:** Generate and customize guidelines for contributions.
+- **Inline Comments:** Continue to enhance comments for complex logic, public APIs of components/modules.
+
+## III. UI/UX Refinements & Features
+
+### 1. UI Consistency & Bug Fixing
+
+- Address any identified UI bugs, quirks, or inconsistencies (e.g., stepper button states, visual harmony between Element Plus and sketchy elements after sketchy library overhaul).
+- Ensure all interactive elements are highly responsive and provide clear feedback.
+
+### 2. Accessibility (A11y)
+
+- Conduct a full A11y audit against WCAG guidelines.
+- Remediate all identified issues: keyboard navigation, focus states, ARIA attributes, color contrast, screen reader compatibility for all components, including custom/sketchy ones.
+
+### 3. PWA (Progressive Web App)
+
+- Investigate feasibility and implement basic PWA features:
+  - Web App Manifest.
+  - Service Worker for caching assets and basic offline capabilities (app shell).
+  - Refer to PyScript documentation on offline usage.
+
+### 4. User-Facing Error Handling
+
+- Implement a system for clear, user-friendly, and thematically styled error messages for:
+  - PyScript initialization failures.
+  - Python processing errors.
+  - File validation issues.
+  - Network issues (if any parts become network-dependent).
+
+### 5. File Handling Enhancements
+
+- **Image Previews:** Verify and enhance image previews in the `ImageSelection.vue` step.
+- **Advanced File Validation:**
+  - Client-side: Prevent selection of non-image files more robustly.
+  - Client-side: Detect and warn about animated GIFs (which might process unexpectedly).
+  - Client-side: Warn about excessively large file sizes or too many files, suggesting potential performance issues.
+- **Session Persistence:**
+  - Use File System Access API and IndexedDB to store `FileSystemFileHandle` objects of selected files.
+  - Allow users to resume previous sessions or quickly re-select files.
+
+### 6. Processing Enhancements
+
+- **Cancel Processing:** Implement a robust cancellation mechanism for ongoing image processing.
+  - Define behavior: Cancel current image and continue? Cancel all remaining?
+  - Ensure progress is correctly updated and potentially allow retry for skipped/failed images.
+
+## IV. Future Feature Exploration (Longer Term)
+
+These items require more research and design before implementation.
+
+- **Advanced Bleed Options:**
+  - Different bleed generation techniques (e.g., pixel stretch, content-aware fill via AI APIs, solid color).
+  - Per-edge bleed amounts.
+  - Intuitive unit conversions for bleed (mm, inches, pixels) based on target DPI.
+- **Image Transformations:** Pre-bleed options like resize, crop.
+- **Image Management:**
+  - Deduplication of selected images.
+  - OCR on filenames or image content for pattern recognition and auto-sorting/batching.
+- **Technology Watch:**
+  - Keep updated on new PyScript versions and features.
+  - Monitor for new/better sketchy UI libraries or techniques.
+  - Explore potential for AI-assisted image manipulation (e.g., generative fill for bleed).
+  - Investigate further uses of the File System Access API (e.g., saving back to original file handle with permissions).
+
+This list will be reviewed and prioritized as the project evolves.