diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..f17874e --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,53 @@ +name: CI + +on: + pull_request: + push: + branches: [main] + +permissions: + contents: read + +jobs: + validate: + runs-on: ubuntu-latest + timeout-minutes: 20 + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-python@v5 + with: + python-version: "3.11" + cache: pip + cache-dependency-path: backend/requirements-dev.txt + + - uses: actions/setup-node@v4 + with: + node-version: "20" + + - name: Enable Corepack + run: corepack enable + + - name: Install backend dependencies + run: python -m pip install -r backend/requirements-dev.txt + + - name: Install frontend dependencies + working-directory: frontend + run: corepack pnpm@9.15.9 install --frozen-lockfile + + - name: Install Playwright browser + working-directory: frontend + run: corepack pnpm@9.15.9 exec playwright install --with-deps chromium + + - name: Run complete validation + run: python check.py + + - name: Upload browser diagnostics + if: failure() + uses: actions/upload-artifact@v4 + with: + name: playwright-diagnostics + path: | + frontend/playwright-report + frontend/test-results + if-no-files-found: ignore diff --git a/.gitignore b/.gitignore index c7a33a9..6b7ed02 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ venv/ .venv*/ ENV/ *.egg-info/ +.coverage dist/ build/ *.log @@ -24,6 +25,10 @@ pnpm-debug.log* # Frontend build frontend/dist/ frontend/.vite/ +frontend/coverage/ +frontend/playwright-report/ +frontend/test-results/ +.tmp/ # IDE .vscode/ diff --git a/README.md b/README.md index c222e5c..ac51c85 100644 --- a/README.md +++ b/README.md @@ -1,1085 +1,87 @@ # ColorCraft -![ColorCraft Banner](./colorcraft-banner.png) +

+ ColorCraft mark +

-[![ColorCraft Badge](https://img.shields.io/badge/ColorCraft-Color_Theory_Analysis-purple?style=for-the-badge)](https://github.com/Artsen/ColorCraft) +

A local-first workspace for extracting, refining, reviewing, saving, and exporting color palettes.

-ColorCraft is an intelligent visual design companion that transforms images into actionable color insights. Upload a photo, extract dominant colors using perceptual clustering, and analyze geometric color relationships and WCAG contrast. Relationship fit describes angular structure; it is not an objective judgment of aesthetic quality. +

+ CI + MIT license + Local-first +

-## Table of Contents -- [Overview](#overview) -- [What's New](#whats-new) -- [Plain-English Tour](#plain-english-tour) -- [Repository Layout](#repository-layout) -- [Key Capabilities](#key-capabilities) - - [Backend](#backend) - - [Frontend](#frontend) -- [Architecture](#architecture) -- [Prerequisites](#prerequisites) -- [Environment Setup](#environment-setup) -- [Backend Setup](#backend-setup) -- [Frontend Setup](#frontend-setup) -- [Running the Stack](#running-the-stack) -- [Using ColorCraft](#using-colorcraft) - - [Workflow Options](#workflow-options) - - [Controls Reference](#controls-reference) - - [Exploration Tips](#exploration-tips) -- [Color Extraction Algorithm](#color-extraction-algorithm) -- [Color Theory Engine](#color-theory-engine) -- [Accessibility Analysis](#accessibility-analysis) -- [API Endpoints](#api-endpoints) -- [Data Flow & Processing](#data-flow--processing) -- [Troubleshooting](#troubleshooting) -- [Roadmap & Next Steps](#roadmap--next-steps) -- [Contributing](#contributing) -- [License](#license) -- [Mermaid Diagrams](#mermaid-diagrams) +![ColorCraft review workspace](./docs/assets/screenshots/review-dark.png) -## Overview +ColorCraft turns an image or a hand-built set of colors into practical design evidence. It extracts representative colors, detects geometric harmony relationships, checks WCAG contrast, suggests additions, and exports reusable values. Saved palettes stay in the current browser. Uploaded source images are processed for the active session and are not placed in persistent browser storage. -ColorCraft bridges the gap between subjective color choices and objective color science. Instead of manually checking contrast ratios or guessing at harmony relationships, you upload an image or build a palette manually, and ColorCraft does the heavy lifting: perceptual color extraction in LAB space, multi-dimensional harmony detection (complementary, triadic, analogous, split-complementary, tetradic, monochromatic), WCAG 2.1 accessibility validation, and interactive D3.js visualization showing exactly how your colors relate on the color wheel. +## Quick start -## What's New +Use Python 3.11 and Node.js 20 or newer. From the repository root: -- **Windows compatibility fix**: Removed UMAP dependency to eliminate numba/coverage conflicts on Windows systems -- **Manual-only workflow**: Skip image upload entirely and start with custom colors using the "Skip & Add Colors Manually" button -- **IPv4 proxy fix**: Explicit 127.0.0.1 targeting for Windows Node.js compatibility -- **Start Over functionality**: Reset and try different images or workflows without page reload -- **LAB color space clustering**: Deterministic clustering with a seeded sample and processed-sample medoid representatives -- **Default starter palette**: Beautiful gradient colors (#667eea, #764ba2, #f093fb) when skipping upload -- **Enhanced UX flow**: Seamless transitions between upload and manual workflows - -## Plain-English Tour - -Think of ColorCraft as your color theory assistant. Here's the journey without jargon: - -1. **Choose your starting point.** Upload an image to extract its colors, or skip and add colors manually. -2. **Extract dominant colors.** If you uploaded an image, select how many colors (3-10) you want to extract. ColorCraft analyzes the image in perceptual LAB color space and finds the most representative colors using KMeans clustering. -3. **Refine your palette.** Add, remove, or edit colors. Click any color swatch to change it with the color picker, or type HEX values directly. -4. **Analyze color relationships.** Click "Apply Color Theory" and ColorCraft examines your palette for: - - **Harmony patterns**: Complementary pairs, triadic triangles, analogous neighbors, split-complementary schemes, tetradic squares, and monochromatic variations - - **Temperature balance**: Warm vs. cool color distribution - - **Accessibility**: WCAG AA/AAA contrast ratios for every color pair - - **Palette metrics**: Circular hue diversity, average saturation, and lightness range -5. **Explore the color wheel.** See every palette color and detected geometric relationship. The center displays relationship fit (0-100), not an aesthetic rating. -6. **Review detailed insights.** Scroll down to see harmony tags, temperature analysis, accessibility warnings, and a complete contrast ratio table. - -If you remember only one thing: ColorCraft turns subjective color choices into objective, measurable insights. - -## Repository Layout - -```text -. -├── README.md # This guide -├── LICENSE # MIT License -├── CONTRIBUTING.md # Contribution guidelines -├── backend/ # Python FastAPI backend -│ ├── main.py # FastAPI application entry point -│ ├── color_extractor.py # KMeans clustering in LAB color space -│ ├── color_theory.py # Harmony detection algorithms -│ ├── accessibility.py # WCAG 2.1 contrast calculations -│ └── requirements.txt # Python dependencies -├── frontend/ # React + TypeScript frontend -│ ├── src/ -│ │ ├── components/ # React components -│ │ │ ├── ImageUpload.tsx # File upload and extraction UI -│ │ │ ├── ColorPalette.tsx # Color grid with editing -│ │ │ ├── ColorWheel.tsx # D3.js visualization -│ │ │ └── AnalysisResults.tsx # Harmony and accessibility display -│ │ ├── App.tsx # Main application component -│ │ ├── main.tsx # React entry point -│ │ └── index.css # Global styles with Tailwind -│ ├── package.json # Frontend dependencies -│ ├── vite.config.ts # Vite configuration -│ ├── tailwind.config.js # Tailwind CSS configuration -│ └── tsconfig.json # TypeScript configuration -└── .gitignore # Git ignore patterns -``` - -## Key Capabilities - -### Backend - -- **Perceptual color extraction**: Converts RGB to LAB color space for human-vision-aligned clustering -- **KMeans clustering**: Seeded clustering and sampling with an effective cluster count based on usable unique pixels -- **LAB ↔ RGB conversion**: High-precision color space transformations with D65 white point -- **Color theory engine**: Hue angle mathematics for harmony detection with configurable tolerance -- **Harmony detection**: Complementary (180°), analogous (30-60°), triadic (120°), tetradic (90°), split-complementary, and monochromatic patterns -- **Temperature analysis**: Warm vs. cool color classification and ratio calculation -- **WCAG 2.1 compliance**: Relative luminance calculation and contrast ratio formulas -- **Accessibility validation**: AA/AAA compliance checking for normal and large text -- **Relationship fit**: Explainable 0-100 fit based on measured angular deviation, confidence, and meaningful-hue coverage -- **FastAPI framework**: RESTful API with automatic OpenAPI documentation -- **CORS support**: Configured for local development and production deployment - -### Frontend - -- **Dual workflow support**: Image upload with extraction OR manual color creation -- **Interactive color editing**: Click-to-edit swatches with native color picker -- **HEX input validation**: Real-time validation and RGB/HSL conversion -- **D3.js color wheel**: Interactive visualization with harmony connections and hover effects -- **Harmony visualization**: Pattern-distinguished geometry for every detected relationship type, with an accessible text summary -- **Relationship fit**: Compact geometric-fit display with contributing factors and an explicit non-aesthetic disclaimer -- **Responsive design**: Tailwind CSS with mobile-first approach -- **State management**: React hooks for efficient re-rendering -- **Color format conversion**: Seamless HEX ↔ RGB ↔ HSL transformations -- **Accessibility-first UI**: High contrast, semantic HTML, keyboard navigation -- **TypeScript safety**: Full type coverage for color objects and API responses - -## Architecture - -ColorCraft follows a clean client-server architecture: - -``` -┌─────────────────────────────────────────────────────────────┐ -│ Frontend (React) │ -│ ┌────────────┐ ┌────────────┐ ┌──────────────────────┐ │ -│ │ Image │ │ Color │ │ Color Wheel │ │ -│ │ Upload │→ │ Palette │→ │ Visualization │ │ -│ └────────────┘ └────────────┘ └──────────────────────┘ │ -│ │ │ ↑ │ -│ └───────────────┴─────────────────────┘ │ -│ │ │ -│ API Calls (REST) │ -└─────────────────────────┼───────────────────────────────────┘ - │ - ↓ -┌─────────────────────────────────────────────────────────────┐ -│ Backend (FastAPI) │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │ -│ │ Color │ │ Color │ │ Accessibility │ │ -│ │ Extractor │ │ Theory │ │ Engine │ │ -│ │ (LAB+KMeans)│ │ Engine │ │ (WCAG 2.1) │ │ -│ └──────────────┘ └──────────────┘ └──────────────────┘ │ -└─────────────────────────────────────────────────────────────┘ -``` - -## Prerequisites - -- **Python 3.11+** (3.11 recommended for best compatibility) -- **Node.js 18+** (LTS version recommended) -- **Corepack** (included with supported Node.js releases) -- **pip** (Python package installer) - -**Platform Support:** -- ✅ Windows 10/11 -- ✅ macOS 11+ -- ✅ Linux (Ubuntu 20.04+, Debian 11+) - -## Environment Setup - -### Windows - -```powershell -# Check Python version -python --version # Should be 3.11+ - -# Check Node version -node --version # Should be 18+ - -# Upgrade pip -python -m pip install --upgrade pip -``` - -### macOS / Linux - -```bash -# Check Python version -python3 --version # Should be 3.11+ - -# Check Node version -node --version # Should be 18+ - -# Upgrade pip -python3 -m pip install --upgrade pip -``` - -## Backend Setup - -### Option A: Virtual Environment (Recommended) - -**Windows:** ```powershell -cd backend -py -3.11 -m venv .venv311 -.\.venv311\Scripts\python.exe -m pip install -r requirements-dev.txt -``` - -**macOS / Linux:** -```bash -cd backend -python3.11 -m venv .venv -.venv/bin/python -m pip install -r requirements-dev.txt -``` - -### Option B: Global Installation - -```bash -cd backend -pip install -r requirements.txt -``` - -### Dependencies Installed - -- **fastapi** (0.104.1): Modern web framework for building APIs -- **uvicorn** (0.24.0): ASGI server for FastAPI -- **python-multipart** (0.0.6): File upload support -- **pillow** (10.1.0): Image processing library -- **numpy** (1.26.2): Numerical computing -- **scikit-learn** (1.3.2): KMeans clustering and metrics -- **pydantic** (2.5.0): Data validation and settings management - -## Frontend Setup - -```bash +py -3.11 -m venv backend\.venv311 +.\backend\.venv311\Scripts\python.exe -m pip install -r backend\requirements-dev.txt cd frontend corepack pnpm@9.15.9 install +cd .. +.\backend\.venv311\Scripts\python.exe dev.py ``` -### Dependencies Installed - -- **react** (18.3.1): UI component library -- **react-dom** (18.3.1): React DOM rendering -- **typescript** (5.9.3): Type-safe JavaScript -- **vite** (5.4.20): Fast build tool and dev server -- **tailwindcss** (3.4.18): Utility-first CSS framework -- **d3** (7.9.0): Data visualization library -- **zod** (3.25): Runtime validation for API contracts - -## Running the Stack - -### One terminal (recommended) - -**Windows:** -```powershell -cd D:\path\to\ColorCraft -.\dev.cmd -``` - -**macOS / Linux:** -```bash -cd /path/to/ColorCraft -backend/.venv/bin/python dev.py -``` - -The launcher finds the backend virtual environment, starts FastAPI and Vite, -checks for obvious port conflicts, waits for API readiness, and keeps both -services attached to the same terminal. If either service exits unexpectedly, -the launcher stops the sibling process and returns a nonzero exit status. -Press `Ctrl+C` to stop both. - -- App: http://127.0.0.1:5174 -- API: http://127.0.0.1:4100 -- Health: http://127.0.0.1:4100/health -- Readiness: http://127.0.0.1:4100/ready - -These defaults do not conflict with Web Video Optimizer, which uses ports 5173 -and 4000. - -### Runtime configuration - -ColorCraft binds only to the local loopback interface by default. The launcher, -API, and Vite read these environment variables: - -| Variable | Default | Purpose | -| --- | --- | --- | -| `COLORCRAFT_WEB_HOST` | `127.0.0.1` | Vite bind host | -| `COLORCRAFT_WEB_PORT` | `5174` | Vite port | -| `COLORCRAFT_API_HOST` | `127.0.0.1` | FastAPI bind host | -| `COLORCRAFT_API_PORT` | `4100` | FastAPI port | -| `COLORCRAFT_ALLOW_LAN_ACCESS` | `false` | Explicitly permits non-loopback binding and LAN CORS origins | -| `COLORCRAFT_ALLOWED_ORIGINS` | Resolved frontend origin | Comma-separated exact CORS origins | -| `VITE_COLORCRAFT_API_URL` | Resolved API origin | Optional direct frontend API origin | - -Vite uses `strictPort`, so startup fails instead of silently moving to another -port. Non-loopback hosts and LAN origins are rejected unless -`COLORCRAFT_ALLOW_LAN_ACCESS=true`. - -Trusted LAN example: - -```powershell -$env:COLORCRAFT_ALLOW_LAN_ACCESS = "true" -$env:COLORCRAFT_WEB_HOST = "0.0.0.0" -$env:COLORCRAFT_API_HOST = "0.0.0.0" -$env:COLORCRAFT_ALLOWED_ORIGINS = "http://192.168.1.20:5174" -.\dev.cmd -``` - -Replace the example address with the host computer's LAN address. ColorCraft -has no authentication and is intended only for trusted local or explicitly -enabled trusted LAN use, not public hosting. - -### Two terminals (manual alternative) - -#### Terminal 1: Backend - -**Windows:** -```powershell -cd backend -.\.venv311\Scripts\python.exe -m uvicorn main:app --host 127.0.0.1 --port 4100 -``` - -**macOS / Linux:** -```bash -cd backend -./.venv/bin/python -m uvicorn main:app --host 127.0.0.1 --port 4100 -``` - -**Expected output:** -``` -INFO: Started server process [XXXX] -INFO: Waiting for application startup. -INFO: Application startup complete. -INFO: Uvicorn running on http://127.0.0.1:4100 (Press CTRL+C to quit) -``` - -**Verify:** Visit http://127.0.0.1:4100/ready and confirm the status is -`ready`. - -#### Terminal 2: Frontend - -```powershell -cd frontend -corepack pnpm@9.15.9 dev -``` - -**Expected output:** -``` - VITE v5.4.20 ready in XXX ms - - ➜ Local: http://127.0.0.1:5174/ - ➜ Network: use --host to expose - ➜ press h + enter to show help -``` - -**Access:** Open http://127.0.0.1:5174 in your browser - -## Using ColorCraft - -### Workflow Options - -#### Option 1: Image Upload & Extraction - -1. **Upload an image**: Click the upload area or drag and drop a JPG, PNG, or WebP file -2. **Select color count**: Use the slider to choose 3-10 colors -3. **Extract colors**: Click "Find Colors" button -4. **Wait for processing**: Typically 1-2 seconds for standard images -5. **Review extracted colors**: See swatches with HEX, RGB, and HSL values -6. **Optional refinement**: Add, remove, or edit colors manually -7. **Analyze**: Click "Apply Color Theory" to see harmony and accessibility analysis - -#### Option 2: Manual Color Creation +On macOS or Linux, create `backend/.venv`, install the same requirements, then run `backend/.venv/bin/python dev.py`. One launcher starts both services and opens the app: -1. **Skip upload**: Click "Skip & Add Colors Manually" button -2. **Start with defaults**: Begin with 3 gradient colors -3. **Edit colors**: Click any swatch to open color picker -4. **Type HEX values**: Edit HEX codes directly in the input field -5. **Add more colors**: Click the "+" button to add additional colors -6. **Remove colors**: Click the "×" button on any color to remove it -7. **Analyze**: Click "Apply Color Theory" when you have 2+ colors +- Web: `http://127.0.0.1:5174` +- API: `http://127.0.0.1:4100` +- Runtime metadata: `http://127.0.0.1:4100/metadata` -### Controls Reference - -| Control | Action | Location | -|---------|--------|----------| -| **Upload Area** | Click or drag-drop to select image | Top of page | -| **Color Slider** | Adjust number of colors to extract (3-10) | Below upload area | -| **Find Colors** | Extract colors from uploaded image | Below slider | -| **Skip & Add Manually** | Bypass upload and start with default colors | Below upload area | -| **Color Swatch** | Click to open color picker | Color palette grid | -| **HEX Input** | Type HEX code directly | Below each swatch | -| **+ Button** | Add new color to palette | End of color grid | -| **× Button** | Remove color from palette | Top-right of each swatch | -| **Apply Color Theory** | Analyze color relationships | Below color palette | -| **Start Over** | Reset and return to upload screen | Top-right of palette | - -### Exploration Tips - -- **Minimum colors**: You need at least 2 colors for analysis -- **Optimal range**: 3-7 colors typically produce the clearest harmony patterns -- **Image selection**: Photos with distinct color regions work best for extraction -- **Manual refinement**: Extracted colors can be edited after extraction -- **Harmony connections**: Look for colored lines on the color wheel showing detected relationships -- **Accessibility focus**: Red ✗ marks in the contrast table indicate potential issues -- **Temperature balance**: Check if your palette skews warm, cool, or balanced -- **Relationship fit**: Higher values mean detected hue geometry more closely matches the documented structures; this is not an aesthetic rating - -## Color Extraction Algorithm - -ColorCraft uses a sophisticated perceptual color extraction pipeline: - -### Step 1: Image Preprocessing -```python -# Resize to max 400px for performance -# Ignore fully transparent pixels; composite partial alpha over white -# Sample up to 10,000 pixels with a seeded generator -``` - -### Step 2: RGB → LAB Conversion -```python -# LAB color space is perceptually uniform -# Distances in LAB space match human vision -# Uses D65 white point (standard daylight) -# Gamma correction for sRGB → linear RGB -# XYZ intermediate transformation -``` - -### Step 3: KMeans Clustering -```python -# Effective clusters = min(requested colors, usable unique sampled pixels) -# Seeded initialization for deterministic output -# 300 max iterations for convergence -# Clusters directly in LAB space -# No dimensionality reduction needed -``` - -### Step 4: Representative Selection -```python -# Select the sampled RGB pixel nearest each LAB cluster center (a medoid) -# Sort representatives by sampled population, largest first -# Report population ratio and sampled pixel count -``` +See [Getting started](./docs/getting-started.md) for setup and recovery details. -### Step 5: Output Validation +## Product workflow -Representatives are processed-sample RGB values, so conversion cannot create -NaN-derived or malformed HEX values. The API returns the actual number of -colors found, which can be lower than the requested maximum. - -**Why LAB instead of RGB?** -- RGB distances don't match perceived color differences -- LAB is designed for human vision (CIE 1976) -- Equal distances in LAB = equal perceptual differences -- Better clustering results for color palettes - -## Color Theory Engine - -ColorCraft detects multiple harmony patterns using hue angle mathematics: - -### Harmony Detection Methods - -| Harmony Type | Hue Relationship | Tolerance | Visual Pattern | -|--------------|------------------|-----------|----------------| -| **Complementary** | 180° apart | ±12° | Opposite sides of wheel | -| **Analogous** | 30° apart | ±15° | Adjacent neighbors | -| **Triadic** | Three 120° gaps | ±12° per gap | Equilateral triangle | -| **Tetradic** | Four 90° gaps | ±10° per gap | Square | -| **Split-Complementary** | 150°, 150°, and 60° | ±12° | Y-shape pattern | -| **Monochromatic** | Same meaningful hue, varied S/L | ±10° hue | Single color family | - -### Temperature Analysis - -**Warm Colors** (0-60°, 300-360°): -- Reds, oranges, yellows -- Associated with energy, passion, warmth - -**Cool Colors** (120-300°): -- Greens, blues, purples -- Associated with calm, professionalism, nature - -**Neutral** (60-120°): -- Yellow-greens, chartreuse -- Transitional colors - -### Geometric relationship fit - -Relationship fit combines the best measured confidence for each detected -relationship type with the share of meaningful, chromatic hues involved. -Every relationship reports expected angles, measured angles, deviation, and -confidence. Colors below 10% saturation do not count as hue evidence, and -duplicate hues cannot manufacture a relationship. This metric describes -geometry only—not whether a palette is attractive or suitable for a design. - -## Accessibility Analysis - -ColorCraft implements full WCAG 2.1 contrast ratio calculations: - -### Contrast Ratio Formula - -```python -# 1. Calculate relative luminance for each color -L = 0.2126 * R + 0.7152 * G + 0.0722 * B -# (where R, G, B are gamma-corrected) - -# 2. Compute contrast ratio -ratio = (lighter_L + 0.05) / (darker_L + 0.05) -# Range: 1:1 (no contrast) to 21:1 (black on white) -``` - -### WCAG Compliance Levels - -| Level | Normal Text | Large Text | Use Case | -|-------|-------------|------------|----------| -| **AA** | 4.5:1 | 3:1 | Minimum for body text | -| **AAA** | 7:1 | 4.5:1 | Enhanced accessibility | - -**Large Text Definition:** -- 18pt+ regular weight -- 14pt+ bold weight - -### Accessibility Features - -- ✅ Pairwise contrast analysis for all color combinations -- ✅ AA/AAA compliance badges for normal and large text -- ✅ Automatic issue flagging with severity levels -- ✅ Visual indicators (✓/✗) in contrast table -- ✅ Summary statistics (total pairs, compliant count) -- ✅ Specific warnings with color pairs and ratios - -## API Endpoints - -### Service Metadata -```http -GET / -``` -**Response:** -```json -{ - "status": "ok", - "service": "colorcraft-api", - "version": "1.0.0" -} -``` - -### Health and Readiness - -```http -GET /health -GET /ready -``` - -`/health` indicates that the API process is alive. `/ready` returns `ready` -after color extraction, palette analysis, and color suggestions have -initialized. The single-terminal launcher waits for this readiness response. - -Request and response validation details, including the canonical color-input -strategy, are documented in [API Contracts](docs/api-contracts.md). - -### Extract Colors -```http -POST /api/extract-colors?n_colors=5 -Content-Type: multipart/form-data - -file: -``` -**Parameters:** -- `n_colors` (query): Maximum number of colors to extract (3-10) -- `file` (form): Image file (JPG, PNG, WebP), up to 10 MB and 40 million decoded pixels - -**Response:** -```json -{ - "success": true, - "colors": [ - { - "hex": "#667eea", - "rgb": {"r": 102, "g": 126, "b": 234}, - "hsl": {"h": 229, "s": 75, "l": 66}, - "population": 0.52, - "pixelCount": 5200 - }, - { - "hex": "#f093fb", - "rgb": {"r": 240, "g": 147, "b": 251}, - "hsl": {"h": 294, "s": 92, "l": 78}, - "population": 0.31, - "pixelCount": 3100 - }, - { - "hex": "#764ba2", - "rgb": {"r": 118, "g": 75, "b": 162}, - "hsl": {"h": 270, "s": 37, "l": 46}, - "population": 0.17, - "pixelCount": 1700 - } - ], - "count": 3 -} -``` - -### Analyze Colors -```http -POST /api/analyze-colors -Content-Type: application/json - -{ - "colors": [ - { - "hex": "#667eea", - "rgb": {"r": 102, "g": 126, "b": 234}, - "hsl": {"h": 229, "s": 75, "l": 66} - }, - { - "hex": "#f093fb", - "rgb": {"r": 240, "g": 147, "b": 251}, - "hsl": {"h": 294, "s": 92, "l": 78} - } - ] -} -``` - -**Response:** -```json -{ - "success": true, - "analysis": { - "colorTheory": { - "harmonies": { - "complementary": [{ - "type": "complementary", - "colorIndexes": [0, 1], - "expectedAngles": [180.0], - "measuredAngles": [178.0], - "deviation": 2.0, - "confidence": 0.889 - }], - "triadic": [], - "analogous": [], - "tetradic": [], - "splitComplementary": [], - "monochromatic": [] - }, - "temperatureBalance": { - "balance": "cool", - "warmCount": 1, - "coolCount": 4, - "warmRatio": 0.2, - "coolRatio": 0.8 - }, - "relationshipFit": 75, - "relationshipSummary": "Strong geometric relationship", - "relationshipFactors": ["Best complementary pair deviation: 2.0 degrees."], - "tags": [ - "Complementary Harmony Detected", - "Triadic Harmony Detected", - "Cool Color Palette", - "Balanced Saturation" - ], - "metrics": { - "hueDiversity": 45.2, - "saturationAvg": 68.4, - "lightnessRange": 42 - } - }, - "accessibility": { - "pairs": [ - { - "color1": "#667eea", - "color2": "#ffffff", - "ratio": 4.52, - "aaNormal": true, - "aaLarge": true, - "aaaNormal": false, - "aaaLarge": true - } - ], - "issues": [ - { - "type": "low_contrast", - "message": "Low contrast detected between #f1f1f1 and #aaaaaa (ratio: 2.1)", - "severity": "warning", - "color1": "#f1f1f1", - "color2": "#aaaaaa", - "ratio": 2.1 - } - ], - "summary": { - "totalPairs": 10, - "aaNormalPasses": 7, - "aaLargePasses": 8, - "aaaNormalPasses": 3, - "aaaLargePasses": 7 - } - } - } -} -``` - -## Data Flow & Processing - -### Image Upload Flow ```mermaid -graph TD - A[User Uploads Image] --> B[Frontend: File Validation] - B --> C[API: POST /extract-colors] - C --> D[Backend: Load Image with Pillow] - D --> E[Resize to 400px max] - E --> F[Sample up to 10k pixels] - F --> G[Convert RGB → LAB] - G --> H[KMeans Clustering 20 inits] - H --> I[Select Median Colors] - I --> J[Convert LAB → RGB/HEX/HSL] - J --> K[Return Color Array] - K --> L[Frontend: Display Color Palette] +flowchart LR + Start[Upload image or start manually] --> Edit[Refine palette] + Edit --> Save[Save locally] + Save --> Review[Review harmony and contrast] + Review --> Export[Copy or download exports] + Save --> Library[Search, reopen, rename, duplicate, or delete] ``` -### Color Analysis Flow -```mermaid -graph TD - A[User Clicks Apply Color Theory] --> B[Frontend: Validate 2+ Colors] - B --> C[API: POST /analyze-colors] - C --> D[Backend: Extract Hues] - D --> E[Detect Complementary 180°] - D --> F[Detect Triadic 120°] - D --> G[Detect Analogous 30-60°] - D --> H[Detect Tetradic 90°] - D --> I[Detect Split-Complementary] - D --> J[Detect Monochromatic] - E --> K[Calculate Temperature Balance] - F --> K - G --> K - H --> K - I --> K - J --> K - K --> L[Compute Relationship Fit] - L --> M[Calculate WCAG Ratios] - M --> N[Generate Tags & Metrics] - N --> O[Return Analysis Object] - O --> P[Frontend: Render Visualizations] -``` +The application makes state explicit: **Unsaved** means no local record exists, **Saved** means the open palette matches its record, and **Modified** means local edits need **Save changes**. Starting another palette or opening a saved palette prompts before meaningful unsaved work is discarded. -### Color Wheel Rendering -```mermaid -graph LR - A[Analysis Results] --> B[D3.js Initialize SVG] - B --> C[Draw 360° Color Wheel] - C --> D[Plot Color Points by Hue] - D --> E[Draw Harmony Connections] - E --> F[Add Hover Interactions] - F --> G[Display Relationship Fit] - G --> H[Render Complete Wheel] -``` - -## Troubleshooting - -### Backend Issues +## Capabilities -**Problem: `ModuleNotFoundError: No module named 'fastapi'`** -```bash -# Solution: Install dependencies -cd backend -pip install -r requirements.txt -``` +- Deterministic LAB-space image color extraction +- Manual palette creation and direct HEX editing +- Harmony visualization and explainable relationship fit +- WCAG contrast-role review and color suggestions +- CSS, JSON, Tailwind, and token export +- IndexedDB palette library with search and recent items +- Light, dark, and system themes with responsive navigation +- Dashboard discovery through a static manifest and runtime metadata endpoint -**Problem: `Address already in use` (port 4100)** -```bash -# Windows: Find and kill process -netstat -ano | findstr :4100 -taskkill /PID /F +## Validation -# macOS/Linux: Find and kill process -lsof -ti:4100 | xargs kill -9 -``` +After installing the development dependencies and Playwright Chromium: -**Problem: `ImportError: DLL load failed` (Windows)** -```bash -# Solution: Reinstall numpy with proper binaries -pip uninstall numpy -pip install numpy==1.26.2 -``` - -### Frontend Issues - -**Problem: `ECONNREFUSED 127.0.0.1:4100`** -```bash -# Solution 1: Ensure backend is running -cd backend -python -m uvicorn main:app --host 127.0.0.1 --port 4100 - -# Solution 2: Restart frontend after backend starts -cd frontend -# Press Ctrl+C to stop -corepack pnpm@9.15.9 dev -``` - -**Problem: `pnpm: command not found`** -```bash -# Solution: Run pnpm through Corepack -corepack pnpm@9.15.9 install -``` - -**Problem: Frontend won't start after `git pull`** -```bash -# Solution: Clean reinstall +```powershell cd frontend -rm -rf node_modules pnpm-lock.yaml -corepack pnpm@9.15.9 install -corepack pnpm@9.15.9 dev +corepack pnpm@9.15.9 exec playwright install chromium +cd .. +.\backend\.venv311\Scripts\python.exe check.py ``` -### Image Upload Issues - -**Problem: "Invalid file type" error** -- **Solution**: Ensure file is JPG, PNG, or WebP format -- Check file extension matches actual format - -**Problem: Colors extraction takes too long** -- **Solution**: Image is likely very large -- Try resizing image to under 2000px before upload -- App auto-resizes to 400px but large images take time to load +`check.py` runs formatting, linting, frontend and backend typing, unit and integration coverage, production build, Playwright workflow coverage, and automated accessibility checks. CI runs the same command. See [Testing](./docs/testing.md). -**Problem: Extracted colors don't match image** -- **Solution**: Image may have too many similar colors -- Try increasing number of colors to extract (up to 10) -- Or manually adjust colors after extraction +## Documentation -### Analysis Issues +The [documentation index](./docs/README.md) links setup, workflow, runtime configuration, architecture, API, persistence and privacy, dashboard manifest, brand, testing, screenshot review, and troubleshooting guides. -**Problem: "Please add at least 2 colors to analyze"** -- **Solution**: Add more colors using the "+" button -- Or extract colors from an image first +## Privacy and security -**Problem: Low relationship fit despite a good-looking palette** -- **Explanation**: Relationship fit measures angular geometry, not aesthetics -- Beautiful palettes may intentionally avoid strict geometric relationships -- Treat the measured factors, accessibility, and intended use as separate evidence - -**Problem: All contrast ratios fail AA/AAA** -- **Solution**: Your colors may be too similar in lightness -- Add darker or lighter colors for better contrast -- Use the contrast table to identify which pairs need adjustment - -## Roadmap & Next Steps - -### Planned Features (Post-MVP) - -- [ ] **Palette Export**: Save palettes as .ASE, .JSON, .SVG, .PNG -- [ ] **AI Palette Naming**: Generate descriptive names like "Autumn Glow" or "Ocean Breeze" -- [ ] **Batch Analysis**: Upload multiple images and compare color consistency -- [ ] **Color Blindness Simulation**: Preview palette for deuteranopia, protanopia, tritanopia -- [ ] **Gradient Generator**: Create smooth gradients between selected colors -- [ ] **Palette History**: Save and revisit previous analyses -- [ ] **Shareable Links**: Generate URLs to share palettes with collaborators -- [ ] **Plugin Integration**: Figma, Photoshop, Canva plugins -- [ ] **API Key System**: Rate limiting and usage tracking -- [ ] **Advanced Clustering**: DBSCAN, hierarchical clustering options -- [ ] **Color Mood Analysis**: Emotional associations and psychological impact -- [ ] **Brand Palette Validation**: Upload brand guidelines and validate compliance - -### Technical Improvements - -- [ ] **Database Integration**: PostgreSQL for multi-user support -- [ ] **Caching Layer**: Redis for frequently extracted color palettes -- [ ] **WebSocket Support**: Real-time progress updates during extraction -- [ ] **Docker Deployment**: Containerized stack for easy deployment -- [ ] **CI/CD Pipeline**: Automated testing and deployment -- [ ] **Performance Monitoring**: Sentry integration for error tracking -- [ ] **API Documentation**: Interactive Swagger UI -- [ ] **Unit Tests**: Comprehensive test coverage for backend and frontend -- [ ] **E2E Tests**: Playwright or Cypress for user flow testing - -## Contributing - -Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines. - -### Quick Start for Contributors - -1. **Fork the repository** -2. **Clone your fork**: `git clone https://github.com/YOUR_USERNAME/ColorCraft.git` -3. **Create a branch**: `git checkout -b feature/your-feature-name` -4. **Make changes** and test thoroughly -5. **Commit**: `git commit -m "Add your feature"` -6. **Push**: `git push origin feature/your-feature-name` -7. **Create Pull Request** on GitHub - -### Development Guidelines - -- **Backend**: Follow PEP 8, use type hints, add docstrings -- **Frontend**: Use TypeScript, follow React best practices, use functional components -- **Commits**: Use conventional commits (feat:, fix:, docs:, etc.) -- **Testing**: Add tests for new features -- **Documentation**: Update README and inline comments +ColorCraft binds to loopback addresses by default. Palette records are stored in the browser's IndexedDB database; theme preference is the only application preference stored in LocalStorage. Source images are sent to the local API for extraction but are not retained by ColorCraft after processing. Clearing site data removes saved palettes. Read [Persistence and privacy](./docs/persistence-and-privacy.md) before enabling LAN access. ## License -MIT License - See [LICENSE](LICENSE) file for details. - -Copyright (c) 2025 ColorCraft - -## Mermaid Diagrams - -### System Architecture - -```mermaid -graph TB - subgraph Frontend["Frontend (React + TypeScript)"] - UI[User Interface] - Upload[ImageUpload Component] - Palette[ColorPalette Component] - Wheel[ColorWheel Component D3.js] - Results[AnalysisResults Component] - end - - subgraph Backend["Backend (Python FastAPI)"] - API[FastAPI Router] - Extractor[Color Extractor
LAB + KMeans] - Theory[Color Theory Engine
Harmony Detection] - Access[Accessibility Engine
WCAG 2.1] - end - - subgraph Processing["Processing Pipeline"] - LAB[RGB → LAB Conversion] - KMeans[KMeans Clustering
20 Initializations] - Median[Median Selection] - RGB[LAB → RGB/HEX/HSL] - end - - UI --> Upload - UI --> Palette - Upload -->|Image File| API - Palette -->|Color Array| API - - API --> Extractor - API --> Theory - API --> Access - - Extractor --> LAB - LAB --> KMeans - KMeans --> Median - Median --> RGB - RGB -->|Colors| Palette - - Theory -->|Harmonies| Results - Access -->|WCAG Ratios| Results - Results --> Wheel -``` - -### Color Extraction Pipeline - -```mermaid -sequenceDiagram - autonumber - actor User - participant UI as ImageUpload UI - participant API as FastAPI /extract-colors - participant Img as Image Processor - participant LAB as LAB Converter - participant KM as KMeans Clusterer - participant Conv as Color Converter - - User->>UI: Upload image (JPG/PNG/WebP) - UI->>UI: Validate file type - UI->>API: POST /extract-colors?n_colors=5 - API->>Img: Load image with Pillow - Img->>Img: Convert to RGB if needed - Img->>Img: Resize to max 400px - Img->>Img: Extract pixel array - Img->>Img: Sample 10k pixels if large - - Img->>LAB: Convert RGB pixels → LAB - LAB->>LAB: Gamma correction - LAB->>LAB: RGB → XYZ → LAB (D65) - LAB-->>KM: LAB pixel array - - KM->>KM: KMeans fit (20 inits, 300 iters) - KM->>KM: Assign cluster labels - KM->>KM: Select nearest sampled RGB medoid - KM-->>Conv: LAB cluster colors - - Conv->>Conv: LAB → XYZ → RGB - Conv->>Conv: Gamma inverse correction - Conv->>Conv: Clip to [0, 255] - Conv->>Conv: RGB → HEX - Conv->>Conv: RGB → HSL - Conv-->>API: Color array (HEX, RGB, HSL) - - API-->>UI: JSON response with colors - UI-->>User: Display color palette -``` - -### Color Analysis Pipeline - -```mermaid -sequenceDiagram - autonumber - actor User - participant UI as App UI - participant API as FastAPI /analyze-colors - participant Theory as Color Theory Engine - participant Access as Accessibility Engine - participant Wheel as D3.js Color Wheel - - User->>UI: Click "Apply Color Theory" - UI->>UI: Validate 2+ colors - UI->>API: POST /analyze-colors {colors} - - API->>Theory: Extract hue angles - Theory->>Theory: Detect complementary (180°±30°) - Theory->>Theory: Detect triadic (120°±30°) - Theory->>Theory: Detect analogous (30-60°±30°) - Theory->>Theory: Detect tetradic (90°±30°) - Theory->>Theory: Detect split-complementary - Theory->>Theory: Detect monochromatic (±15° hue) - Theory->>Theory: Analyze temperature (warm/cool) - Theory->>Theory: Calculate geometric relationship fit (0-100) - Theory->>Theory: Generate harmony tags - Theory-->>API: Color theory analysis - - API->>Access: Calculate pairwise contrasts - Access->>Access: Compute relative luminance - Access->>Access: Calculate contrast ratios - Access->>Access: Check AA/AAA compliance - Access->>Access: Flag accessibility issues - Access-->>API: Accessibility analysis - - API-->>UI: Combined analysis JSON - UI->>Wheel: Render color wheel - Wheel->>Wheel: Draw 360° wheel background - Wheel->>Wheel: Plot colors by hue angle - Wheel->>Wheel: Draw harmony connections - Wheel->>Wheel: Add compact relationship-fit annotation - Wheel-->>UI: Interactive visualization - - UI-->>User: Display analysis results -``` - -### Data Model - -```mermaid -erDiagram - COLOR { - string hex PK - object rgb - object hsl - } - - HARMONY_ANALYSIS { - uuid id PK - array complementary_pairs - array triadic_groups - array analogous_groups - array tetradic_groups - array split_complementary - boolean monochromatic - object temperature_balance - int relationship_fit - array tags - object metrics - } - - ACCESSIBILITY_ANALYSIS { - uuid id PK - array contrast_pairs - array issues - object summary - } - - CONTRAST_PAIR { - string color1 FK - string color2 FK - float ratio - boolean aa_normal - boolean aa_large - boolean aaa_normal - boolean aaa_large - } - - COLOR ||--o{ CONTRAST_PAIR : "participates in" - HARMONY_ANALYSIS ||--o{ COLOR : "analyzes" - ACCESSIBILITY_ANALYSIS ||--o{ CONTRAST_PAIR : "contains" -``` - ---- - -**Built with ❤️ for designers, developers, and artists who care about color.** - +[MIT](./LICENSE) diff --git a/app-manifest.json b/app-manifest.json new file mode 100644 index 0000000..092843c --- /dev/null +++ b/app-manifest.json @@ -0,0 +1,25 @@ +{ + "schemaVersion": 1, + "id": "colorcraft", + "name": "ColorCraft", + "descriptor": "Local color utility", + "version": "1.0.0", + "icon": "/colorcraft-mark.svg", + "defaults": { + "webAddress": "http://127.0.0.1:5174", + "apiAddress": "http://127.0.0.1:4100" + }, + "endpoints": { + "metadata": "/metadata", + "health": "/health", + "readiness": "/ready" + }, + "capabilities": [ + "image-color-extraction", + "palette-editing", + "harmony-analysis", + "contrast-review", + "palette-export", + "local-palette-library" + ] +} diff --git a/backend/accessibility.py b/backend/accessibility.py index 34f926d..c28cf1e 100644 --- a/backend/accessibility.py +++ b/backend/accessibility.py @@ -8,18 +8,19 @@ def hex_to_rgb(hex_color): """Convert hex color to RGB.""" - hex_color = hex_color.lstrip('#') - return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4)) + hex_color = hex_color.lstrip("#") + return tuple(int(hex_color[i : i + 2], 16) for i in (0, 2, 4)) def relative_luminance(rgb): """Calculate relative luminance using the current sRGB breakpoint.""" + def adjust(channel): channel = channel / 255.0 if channel <= 0.04045: return channel / 12.92 return ((channel + 0.055) / 1.055) ** 2.4 - + r, g, b = [adjust(c) for c in rgb] return 0.2126 * r + 0.7152 * g + 0.0722 * b @@ -27,11 +28,11 @@ def adjust(channel): def contrast_ratio(color1, color2): """ Calculate WCAG contrast ratio between two colors. - + Args: color1: RGB tuple or hex string color2: RGB tuple or hex string - + Returns: Contrast ratio (1-21) """ @@ -39,95 +40,96 @@ def contrast_ratio(color1, color2): color1 = hex_to_rgb(color1) if isinstance(color2, str): color2 = hex_to_rgb(color2) - + l1 = relative_luminance(color1) l2 = relative_luminance(color2) - + lighter = max(l1, l2) darker = min(l1, l2) - + return (lighter + 0.05) / (darker + 0.05) def wcag_rating(ratio): """ Get WCAG rating for a contrast ratio. - + Returns: Dictionary with AA and AAA compliance for normal and large text """ return { - 'ratio': round(ratio, 2), - 'aa_normal': ratio >= AA_NORMAL_MINIMUM, - 'aa_large': ratio >= AA_LARGE_MINIMUM, - 'aaa_normal': ratio >= AAA_NORMAL_MINIMUM, - 'aaa_large': ratio >= AAA_LARGE_MINIMUM + "ratio": round(ratio, 2), + "aa_normal": ratio >= AA_NORMAL_MINIMUM, + "aa_large": ratio >= AA_LARGE_MINIMUM, + "aaa_normal": ratio >= AAA_NORMAL_MINIMUM, + "aaa_large": ratio >= AAA_LARGE_MINIMUM, } def analyze_accessibility(colors): """ Analyze accessibility for all color pairs. - + Args: colors: List of color dictionaries with 'hex' key - + Returns: Dictionary with accessibility analysis """ results = { - 'pairs': [], - 'issues': [], - 'summary': { - 'total_pairs': 0, - 'aa_normal_passes': 0, - 'aa_large_passes': 0, - 'aaa_normal_passes': 0, - 'aaa_large_passes': 0 - } + "pairs": [], + "issues": [], + "summary": { + "total_pairs": 0, + "aa_normal_passes": 0, + "aa_large_passes": 0, + "aaa_normal_passes": 0, + "aaa_large_passes": 0, + }, } - + # Analyze all pairs for i, color1 in enumerate(colors): for j, color2 in enumerate(colors): if i >= j: continue - - ratio = contrast_ratio(color1['hex'], color2['hex']) + + ratio = contrast_ratio(color1["hex"], color2["hex"]) rating = wcag_rating(ratio) - + pair_result = { - 'color1': color1['hex'], - 'color2': color2['hex'], - 'ratio': rating['ratio'], - 'aa_normal': rating['aa_normal'], - 'aa_large': rating['aa_large'], - 'aaa_normal': rating['aaa_normal'], - 'aaa_large': rating['aaa_large'] + "color1": color1["hex"], + "color2": color2["hex"], + "ratio": rating["ratio"], + "aa_normal": rating["aa_normal"], + "aa_large": rating["aa_large"], + "aaa_normal": rating["aaa_normal"], + "aaa_large": rating["aaa_large"], } - - results['pairs'].append(pair_result) - results['summary']['total_pairs'] += 1 - - if rating['aa_normal']: - results['summary']['aa_normal_passes'] += 1 - if rating['aa_large']: - results['summary']['aa_large_passes'] += 1 - if rating['aaa_normal']: - results['summary']['aaa_normal_passes'] += 1 - if rating['aaa_large']: - results['summary']['aaa_large_passes'] += 1 - + + results["pairs"].append(pair_result) + results["summary"]["total_pairs"] += 1 + + if rating["aa_normal"]: + results["summary"]["aa_normal_passes"] += 1 + if rating["aa_large"]: + results["summary"]["aa_large_passes"] += 1 + if rating["aaa_normal"]: + results["summary"]["aaa_normal_passes"] += 1 + if rating["aaa_large"]: + results["summary"]["aaa_large_passes"] += 1 + # Flag potential issues - if not rating['aa_large']: - results['issues'].append({ - 'type': 'low_contrast', - 'message': f"Low contrast detected between {color1['hex']} and {color2['hex']} (ratio: {rating['ratio']})", - 'severity': 'warning', - 'color1': color1['hex'], - 'color2': color2['hex'], - 'ratio': rating['ratio'] - }) - - return results + if not rating["aa_large"]: + results["issues"].append( + { + "type": "low_contrast", + "message": f"Low contrast detected between {color1['hex']} and {color2['hex']} (ratio: {rating['ratio']})", + "severity": "warning", + "color1": color1["hex"], + "color2": color2["hex"], + "ratio": rating["ratio"], + } + ) + return results diff --git a/backend/color_extractor.py b/backend/color_extractor.py index de41a5a..6633802 100644 --- a/backend/color_extractor.py +++ b/backend/color_extractor.py @@ -13,7 +13,6 @@ from PIL import Image, UnidentifiedImageError from sklearn.cluster import KMeans - MAX_IMAGE_PIXELS = 40_000_000 MAX_SAMPLE_PIXELS = 10_000 SAMPLE_SEED = 42 @@ -47,11 +46,7 @@ def rgb_to_lab(rgb: list[int] | tuple[int, int, int] | np.ndarray) -> list[float delta = 6 / 29 def transform(value: float) -> float: - return ( - value ** (1 / 3) - if value > delta**3 - else value / (3 * delta**2) + 4 / 29 - ) + return value ** (1 / 3) if value > delta**3 else value / (3 * delta**2) + 4 / 29 fx = transform(x / 95.047) fy = transform(y / 100) @@ -133,6 +128,7 @@ def hsl_to_rgb(hsl: list[int] | tuple[int, int, int]) -> list[int]: if saturation == 0: red = green = blue = lightness else: + def hue_to_rgb(p: float, q: float, value: float) -> float: value %= 1 if value < 1 / 6: @@ -162,9 +158,7 @@ def _visible_rgb_pixels(image: Image.Image) -> np.ndarray: raise NoUsablePixelsError("The image contains no visible pixels.") alpha = visible[:, 3:4].astype(np.float64) / 255.0 - composited = ( - visible[:, :3].astype(np.float64) * alpha + 255.0 * (1.0 - alpha) - ) + composited = visible[:, :3].astype(np.float64) * alpha + 255.0 * (1.0 - alpha) return np.rint(composited).clip(0, 255).astype(np.uint8) @@ -172,9 +166,7 @@ def _sample_pixels(pixels: np.ndarray) -> np.ndarray: if len(pixels) <= MAX_SAMPLE_PIXELS: return pixels generator = np.random.default_rng(SAMPLE_SEED) - indexes = generator.choice( - len(pixels), size=MAX_SAMPLE_PIXELS, replace=False - ) + indexes = generator.choice(len(pixels), size=MAX_SAMPLE_PIXELS, replace=False) return pixels[indexes] @@ -260,6 +252,9 @@ def extract_colors(image_bytes: bytes, n_colors: int = 5) -> list[dict[str, obje ) extracted.sort( - key=lambda color: (-int(color["pixelCount"]), str(color["hex"])) + key=lambda color: ( + -color["pixelCount"] if isinstance(color["pixelCount"], int) else 0, + str(color["hex"]), + ) ) return extracted diff --git a/backend/color_suggestions.py b/backend/color_suggestions.py index 2e0a2fe..0790f70 100644 --- a/backend/color_suggestions.py +++ b/backend/color_suggestions.py @@ -1,8 +1,8 @@ """ Color suggestion engine for generating harmonious color recommendations. """ + from color_extractor import hsl_to_rgb, rgb_to_hsl -import math def normalize_hue(hue): @@ -17,461 +17,475 @@ def normalize_hue(hue): def generate_complementary(base_color): """ Generate complementary color (180° opposite). - + Creates maximum contrast and visual tension. Perfect for call-to-action buttons and emphasis. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + comp_hue = normalize_hue(h + 180) - + suggestions = [ { - 'hue': comp_hue, - 'saturation': s, - 'lightness': l, - 'name': 'Direct Complement', - 'description': 'Exact opposite on the color wheel' + "hue": comp_hue, + "saturation": s, + "lightness": l, + "name": "Direct Complement", + "description": "Exact opposite on the color wheel", }, { - 'hue': comp_hue, - 'saturation': min(100, s + 15), - 'lightness': max(20, l - 20), - 'name': 'Rich Complement', - 'description': 'More saturated and darker for depth' + "hue": comp_hue, + "saturation": min(100, s + 15), + "lightness": max(20, l - 20), + "name": "Rich Complement", + "description": "More saturated and darker for depth", }, { - 'hue': comp_hue, - 'saturation': max(30, s - 20), - 'lightness': min(90, l + 20), - 'name': 'Soft Complement', - 'description': 'Lighter and less saturated for subtlety' - } + "hue": comp_hue, + "saturation": max(30, s - 20), + "lightness": min(90, l + 20), + "name": "Soft Complement", + "description": "Lighter and less saturated for subtlety", + }, ] - + return { - 'type': 'Complementary', - 'angle': '180°', - 'description': 'Complementary colors sit opposite each other on the color wheel, creating maximum contrast and visual energy.', - 'use_cases': [ - 'Call-to-action buttons that need to stand out', - 'Highlighting important UI elements', - 'Creating vibrant, attention-grabbing designs', - 'Logos that need strong visual impact' + "type": "Complementary", + "angle": "180°", + "description": "Complementary colors sit opposite each other on the color wheel, creating maximum contrast and visual energy.", + "use_cases": [ + "Call-to-action buttons that need to stand out", + "Highlighting important UI elements", + "Creating vibrant, attention-grabbing designs", + "Logos that need strong visual impact", ], - 'mood': 'Energetic, bold, dynamic, attention-grabbing', - 'examples': 'Red & Green, Blue & Orange, Yellow & Purple', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Energetic, bold, dynamic, attention-grabbing", + "examples": "Red & Green, Blue & Orange, Yellow & Purple", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_triadic(base_color): """ Generate triadic colors (120° apart). - + Creates balanced, vibrant palettes with strong visual interest. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [] - + # Two triadic partners for offset in [120, 240]: tri_hue = normalize_hue(h + offset) - suggestions.extend([ - { - 'hue': tri_hue, - 'saturation': s, - 'lightness': l, - 'name': f'Triadic Partner {offset}°', - 'description': 'Equal spacing for balance' - }, - { - 'hue': tri_hue, - 'saturation': min(100, s + 10), - 'lightness': l, - 'name': f'Vibrant Triadic {offset}°', - 'description': 'Boosted saturation for impact' - } - ]) - + suggestions.extend( + [ + { + "hue": tri_hue, + "saturation": s, + "lightness": l, + "name": f"Triadic Partner {offset}°", + "description": "Equal spacing for balance", + }, + { + "hue": tri_hue, + "saturation": min(100, s + 10), + "lightness": l, + "name": f"Vibrant Triadic {offset}°", + "description": "Boosted saturation for impact", + }, + ] + ) + return { - 'type': 'Triadic', - 'angle': '120°', - 'description': 'Triadic colors are evenly spaced around the color wheel, forming an equilateral triangle. This creates balanced, vibrant palettes.', - 'use_cases': [ - 'Playful, energetic designs', - 'Children\'s products and educational materials', - 'Brand identities that need to feel dynamic', - 'Infographics and data visualizations' + "type": "Triadic", + "angle": "120°", + "description": "Triadic colors are evenly spaced around the color wheel, forming an equilateral triangle. This creates balanced, vibrant palettes.", + "use_cases": [ + "Playful, energetic designs", + "Children's products and educational materials", + "Brand identities that need to feel dynamic", + "Infographics and data visualizations", ], - 'mood': 'Balanced, vibrant, playful, harmonious', - 'examples': 'Red-Yellow-Blue (primary colors), Orange-Green-Purple (secondary colors)', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Balanced, vibrant, playful, harmonious", + "examples": "Red-Yellow-Blue (primary colors), Orange-Green-Purple (secondary colors)", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_analogous(base_color): """ Generate analogous colors (30-60° adjacent). - + Creates harmonious, cohesive palettes that feel natural. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [] - + # Neighbors on both sides for offset in [-60, -30, 30, 60]: ana_hue = normalize_hue(h + offset) - suggestions.append({ - 'hue': ana_hue, - 'saturation': s, - 'lightness': l, - 'name': f'Analogous {abs(offset)}° {"Left" if offset < 0 else "Right"}', - 'description': f'Adjacent color {abs(offset)}° away' - }) - + suggestions.append( + { + "hue": ana_hue, + "saturation": s, + "lightness": l, + "name": f"Analogous {abs(offset)}° {'Left' if offset < 0 else 'Right'}", + "description": f"Adjacent color {abs(offset)}° away", + } + ) + return { - 'type': 'Analogous', - 'angle': '30-60°', - 'description': 'Analogous colors sit next to each other on the color wheel, creating harmonious, cohesive palettes that feel natural and pleasing.', - 'use_cases': [ - 'Backgrounds and gradients', - 'Nature-inspired designs', - 'Calming, serene interfaces', - 'Photography and art portfolios' + "type": "Analogous", + "angle": "30-60°", + "description": "Analogous colors sit next to each other on the color wheel, creating harmonious, cohesive palettes that feel natural and pleasing.", + "use_cases": [ + "Backgrounds and gradients", + "Nature-inspired designs", + "Calming, serene interfaces", + "Photography and art portfolios", ], - 'mood': 'Harmonious, serene, cohesive, natural', - 'examples': 'Blue-Blue/Green-Green, Red-Orange-Yellow', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Harmonious, serene, cohesive, natural", + "examples": "Blue-Blue/Green-Green, Red-Orange-Yellow", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_split_complementary(base_color): """ Generate split-complementary colors. - + Similar to complementary but with two colors flanking the complement. More nuanced than pure complementary. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + comp_hue = normalize_hue(h + 180) - + suggestions = [] - + # Split complement: 150° and 210° (or 180° ± 30°) for offset in [-30, 30]: split_hue = normalize_hue(comp_hue + offset) - suggestions.extend([ - { - 'hue': split_hue, - 'saturation': s, - 'lightness': l, - 'name': f'Split Complement {"+30°" if offset > 0 else "-30°"}', - 'description': f'Flanking the complement by {abs(offset)}°' - }, - { - 'hue': split_hue, - 'saturation': max(40, s - 15), - 'lightness': min(85, l + 15), - 'name': f'Soft Split {"+30°" if offset > 0 else "-30°"}', - 'description': 'Muted variation for subtlety' - } - ]) - + suggestions.extend( + [ + { + "hue": split_hue, + "saturation": s, + "lightness": l, + "name": f"Split Complement {'+30°' if offset > 0 else '-30°'}", + "description": f"Flanking the complement by {abs(offset)}°", + }, + { + "hue": split_hue, + "saturation": max(40, s - 15), + "lightness": min(85, l + 15), + "name": f"Soft Split {'+30°' if offset > 0 else '-30°'}", + "description": "Muted variation for subtlety", + }, + ] + ) + return { - 'type': 'Split-Complementary', - 'angle': '150° & 210°', - 'description': 'Split-complementary uses a base color and two colors adjacent to its complement, offering contrast with more nuance than pure complementary.', - 'use_cases': [ - 'Sophisticated brand palettes', - 'Web designs needing contrast without harshness', - 'Editorial layouts and magazines', - 'Product packaging with visual interest' + "type": "Split-Complementary", + "angle": "150° & 210°", + "description": "Split-complementary uses a base color and two colors adjacent to its complement, offering contrast with more nuance than pure complementary.", + "use_cases": [ + "Sophisticated brand palettes", + "Web designs needing contrast without harshness", + "Editorial layouts and magazines", + "Product packaging with visual interest", ], - 'mood': 'Sophisticated, balanced, nuanced, refined', - 'examples': 'Blue with Yellow-Orange and Red-Orange', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Sophisticated, balanced, nuanced, refined", + "examples": "Blue with Yellow-Orange and Red-Orange", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_tetradic(base_color): """ Generate tetradic/square colors (90° apart). - + Creates rich, complex palettes with four distinct colors. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [] - + # Three partners at 90°, 180°, 270° for offset in [90, 180, 270]: tet_hue = normalize_hue(h + offset) - suggestions.append({ - 'hue': tet_hue, - 'saturation': s, - 'lightness': l, - 'name': f'Tetradic {offset}°', - 'description': f'Square harmony partner at {offset}°' - }) - + suggestions.append( + { + "hue": tet_hue, + "saturation": s, + "lightness": l, + "name": f"Tetradic {offset}°", + "description": f"Square harmony partner at {offset}°", + } + ) + return { - 'type': 'Tetradic (Square)', - 'angle': '90°', - 'description': 'Tetradic colors form a square on the color wheel, evenly spaced at 90° intervals. This creates rich, complex palettes with maximum variety.', - 'use_cases': [ - 'Complex brand systems with multiple sub-brands', - 'Data visualizations with many categories', - 'Festive, celebratory designs', - 'Gaming interfaces and entertainment' + "type": "Tetradic (Square)", + "angle": "90°", + "description": "Tetradic colors form a square on the color wheel, evenly spaced at 90° intervals. This creates rich, complex palettes with maximum variety.", + "use_cases": [ + "Complex brand systems with multiple sub-brands", + "Data visualizations with many categories", + "Festive, celebratory designs", + "Gaming interfaces and entertainment", ], - 'mood': 'Rich, complex, diverse, energetic', - 'examples': 'Red-Yellow-Green-Blue, Orange-Chartreuse-Cyan-Violet', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Rich, complex, diverse, energetic", + "examples": "Red-Yellow-Green-Blue, Orange-Chartreuse-Cyan-Violet", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_rectangular(base_color): """ Generate rectangular/compound colors. - + Two complementary pairs that form a rectangle on the wheel. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [] - + # Rectangular: 60°, 180°, 240° (or other rectangle configurations) for offset in [60, 180, 240]: rect_hue = normalize_hue(h + offset) - suggestions.append({ - 'hue': rect_hue, - 'saturation': s, - 'lightness': l, - 'name': f'Rectangular {offset}°', - 'description': f'Rectangle harmony at {offset}°' - }) - + suggestions.append( + { + "hue": rect_hue, + "saturation": s, + "lightness": l, + "name": f"Rectangular {offset}°", + "description": f"Rectangle harmony at {offset}°", + } + ) + return { - 'type': 'Rectangular (Compound)', - 'angle': '60° & 180°', - 'description': 'Rectangular harmony uses two complementary pairs that form a rectangle on the color wheel, offering rich contrast with balance.', - 'use_cases': [ - 'Editorial designs with multiple sections', - 'Dashboard interfaces with distinct zones', - 'Marketing materials with varied content', - 'Presentation templates' + "type": "Rectangular (Compound)", + "angle": "60° & 180°", + "description": "Rectangular harmony uses two complementary pairs that form a rectangle on the color wheel, offering rich contrast with balance.", + "use_cases": [ + "Editorial designs with multiple sections", + "Dashboard interfaces with distinct zones", + "Marketing materials with varied content", + "Presentation templates", ], - 'mood': 'Balanced, sophisticated, varied, professional', - 'examples': 'Blue-Orange paired with Yellow-Violet', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Balanced, sophisticated, varied, professional", + "examples": "Blue-Orange paired with Yellow-Violet", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_monochromatic(base_color): """ Generate monochromatic variations (same hue, different S/L). - + Creates cohesive, elegant palettes with subtle variation. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [ { - 'hue': h, - 'saturation': max(10, s - 30), - 'lightness': min(95, l + 30), - 'name': 'Lighter Tint', - 'description': 'Pastel variation for backgrounds' + "hue": h, + "saturation": max(10, s - 30), + "lightness": min(95, l + 30), + "name": "Lighter Tint", + "description": "Pastel variation for backgrounds", }, { - 'hue': h, - 'saturation': max(5, s - 40), - 'lightness': min(98, l + 40), - 'name': 'Very Light Tint', - 'description': 'Nearly white for subtle accents' + "hue": h, + "saturation": max(5, s - 40), + "lightness": min(98, l + 40), + "name": "Very Light Tint", + "description": "Nearly white for subtle accents", }, { - 'hue': h, - 'saturation': min(100, s + 20), - 'lightness': max(15, l - 30), - 'name': 'Darker Shade', - 'description': 'Rich, deep variation for text' + "hue": h, + "saturation": min(100, s + 20), + "lightness": max(15, l - 30), + "name": "Darker Shade", + "description": "Rich, deep variation for text", }, { - 'hue': h, - 'saturation': min(100, s + 10), - 'lightness': max(10, l - 40), - 'name': 'Very Dark Shade', - 'description': 'Nearly black for strong contrast' + "hue": h, + "saturation": min(100, s + 10), + "lightness": max(10, l - 40), + "name": "Very Dark Shade", + "description": "Nearly black for strong contrast", }, { - 'hue': h, - 'saturation': max(15, s - 25), - 'lightness': l, - 'name': 'Desaturated Tone', - 'description': 'Muted variation for sophistication' + "hue": h, + "saturation": max(15, s - 25), + "lightness": l, + "name": "Desaturated Tone", + "description": "Muted variation for sophistication", }, { - 'hue': h, - 'saturation': min(100, s + 30), - 'lightness': l, - 'name': 'Vibrant Tone', - 'description': 'Boosted saturation for impact' - } + "hue": h, + "saturation": min(100, s + 30), + "lightness": l, + "name": "Vibrant Tone", + "description": "Boosted saturation for impact", + }, ] - + return { - 'type': 'Monochromatic', - 'angle': '0° (same hue)', - 'description': 'Monochromatic palettes use variations of a single hue with different saturation and lightness levels, creating cohesive, elegant designs.', - 'use_cases': [ - 'Minimalist, elegant interfaces', - 'Professional corporate designs', - 'Photography portfolios', - 'Luxury brand materials' + "type": "Monochromatic", + "angle": "0° (same hue)", + "description": "Monochromatic palettes use variations of a single hue with different saturation and lightness levels, creating cohesive, elegant designs.", + "use_cases": [ + "Minimalist, elegant interfaces", + "Professional corporate designs", + "Photography portfolios", + "Luxury brand materials", ], - 'mood': 'Cohesive, elegant, sophisticated, calm', - 'examples': 'Navy-Blue-Sky Blue-Powder Blue, Forest-Sage-Mint Green', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Cohesive, elegant, sophisticated, calm", + "examples": "Navy-Blue-Sky Blue-Powder Blue, Forest-Sage-Mint Green", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_double_complementary(base_color): """ Generate double-complementary (two sets of complements). - + Also known as tetradic rectangle. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [] - + # Pick a second base 30° away, then both complements second_base = normalize_hue(h + 30) - + for base_hue in [second_base]: comp_hue = normalize_hue(base_hue + 180) - suggestions.extend([ - { - 'hue': base_hue, - 'saturation': s, - 'lightness': l, - 'name': 'Second Base', - 'description': '30° from original' - }, - { - 'hue': comp_hue, - 'saturation': s, - 'lightness': l, - 'name': 'Second Complement', - 'description': 'Complement of second base' - } - ]) - + suggestions.extend( + [ + { + "hue": base_hue, + "saturation": s, + "lightness": l, + "name": "Second Base", + "description": "30° from original", + }, + { + "hue": comp_hue, + "saturation": s, + "lightness": l, + "name": "Second Complement", + "description": "Complement of second base", + }, + ] + ) + # Original complement - suggestions.append({ - 'hue': normalize_hue(h + 180), - 'saturation': s, - 'lightness': l, - 'name': 'Original Complement', - 'description': 'Complement of base color' - }) - + suggestions.append( + { + "hue": normalize_hue(h + 180), + "saturation": s, + "lightness": l, + "name": "Original Complement", + "description": "Complement of base color", + } + ) + return { - 'type': 'Double-Complementary', - 'angle': 'Two 180° pairs', - 'description': 'Double-complementary uses two pairs of complementary colors, creating rich, dynamic palettes with strong contrast.', - 'use_cases': [ - 'Bold, energetic brand identities', - 'Sports team colors and jerseys', - 'Festival and event materials', - 'Attention-grabbing advertisements' + "type": "Double-Complementary", + "angle": "Two 180° pairs", + "description": "Double-complementary uses two pairs of complementary colors, creating rich, dynamic palettes with strong contrast.", + "use_cases": [ + "Bold, energetic brand identities", + "Sports team colors and jerseys", + "Festival and event materials", + "Attention-grabbing advertisements", ], - 'mood': 'Bold, energetic, dynamic, striking', - 'examples': 'Red-Green paired with Blue-Orange', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Bold, energetic, dynamic, striking", + "examples": "Red-Green paired with Blue-Orange", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def generate_shades_tints(base_color): """ Generate pure shades (darker) and tints (lighter). - + Essential for creating depth and hierarchy. """ - h, s, l = base_color['hsl']['h'], base_color['hsl']['s'], base_color['hsl']['l'] - + h, s, l = base_color["hsl"]["h"], base_color["hsl"]["s"], base_color["hsl"]["l"] + suggestions = [] - + # Tints (lighter) for i, lightness_offset in enumerate([15, 30, 45], 1): - suggestions.append({ - 'hue': h, - 'saturation': s, - 'lightness': min(98, l + lightness_offset), - 'name': f'Tint {i}', - 'description': f'{lightness_offset}% lighter' - }) - + suggestions.append( + { + "hue": h, + "saturation": s, + "lightness": min(98, l + lightness_offset), + "name": f"Tint {i}", + "description": f"{lightness_offset}% lighter", + } + ) + # Shades (darker) for i, lightness_offset in enumerate([15, 30, 45], 1): - suggestions.append({ - 'hue': h, - 'saturation': s, - 'lightness': max(5, l - lightness_offset), - 'name': f'Shade {i}', - 'description': f'{lightness_offset}% darker' - }) - + suggestions.append( + { + "hue": h, + "saturation": s, + "lightness": max(5, l - lightness_offset), + "name": f"Shade {i}", + "description": f"{lightness_offset}% darker", + } + ) + return { - 'type': 'Shades & Tints', - 'angle': 'Same hue, varied lightness', - 'description': 'Shades (darker) and tints (lighter) of the same color create depth, hierarchy, and visual interest while maintaining color identity.', - 'use_cases': [ - 'UI states (hover, active, disabled)', - 'Text hierarchy (headings, body, captions)', - 'Shadows and highlights', - 'Depth and layering in designs' + "type": "Shades & Tints", + "angle": "Same hue, varied lightness", + "description": "Shades (darker) and tints (lighter) of the same color create depth, hierarchy, and visual interest while maintaining color identity.", + "use_cases": [ + "UI states (hover, active, disabled)", + "Text hierarchy (headings, body, captions)", + "Shadows and highlights", + "Depth and layering in designs", ], - 'mood': 'Structured, hierarchical, organized, clear', - 'examples': 'Light Blue → Blue → Navy, Pink → Red → Maroon', - 'suggestions': [convert_hsl_to_color(s) for s in suggestions] + "mood": "Structured, hierarchical, organized, clear", + "examples": "Light Blue → Blue → Navy, Pink → Red → Maroon", + "suggestions": [convert_hsl_to_color(s) for s in suggestions], } def convert_hsl_to_color(hsl_obj): """Convert HSL suggestion object to full color object.""" - h, s, l = hsl_obj['hue'], hsl_obj['saturation'], hsl_obj['lightness'] + h, s, l = hsl_obj["hue"], hsl_obj["saturation"], hsl_obj["lightness"] rgb = hsl_to_rgb([h, s, l]) canonical_hsl = rgb_to_hsl(rgb) - hex_color = '#{:02x}{:02x}{:02x}'.format(*rgb) - + hex_color = "#{:02x}{:02x}{:02x}".format(*rgb) + return { - 'hex': hex_color, - 'rgb': {'r': rgb[0], 'g': rgb[1], 'b': rgb[2]}, - 'hsl': { - 'h': canonical_hsl[0], - 's': canonical_hsl[1], - 'l': canonical_hsl[2] - }, - 'name': hsl_obj['name'], - 'description': hsl_obj['description'] + "hex": hex_color, + "rgb": {"r": rgb[0], "g": rgb[1], "b": rgb[2]}, + "hsl": {"h": canonical_hsl[0], "s": canonical_hsl[1], "l": canonical_hsl[2]}, + "name": hsl_obj["name"], + "description": hsl_obj["description"], } def generate_all_suggestions(base_color): """ Generate all harmony-based suggestions for a base color. - + Returns a comprehensive list of color suggestions organized by harmony type. """ return { - 'base_color': base_color, - 'harmonies': [ + "base_color": base_color, + "harmonies": [ generate_complementary(base_color), generate_analogous(base_color), generate_triadic(base_color), @@ -480,7 +494,6 @@ def generate_all_suggestions(base_color): generate_rectangular(base_color), generate_monochromatic(base_color), generate_double_complementary(base_color), - generate_shades_tints(base_color) - ] + generate_shades_tints(base_color), + ], } - diff --git a/backend/color_theory.py b/backend/color_theory.py index ccbeeeb..80ee6b8 100644 --- a/backend/color_theory.py +++ b/backend/color_theory.py @@ -2,13 +2,12 @@ from __future__ import annotations -from itertools import combinations import math +from itertools import combinations from typing import Iterable import numpy as np - MIN_MEANINGFUL_SATURATION = 10 COMPLEMENTARY_TOLERANCE = 12.0 ANALOGOUS_EXPECTED_ANGLE = 30.0 @@ -73,8 +72,7 @@ def _relationship( expected_angles = [round(value, 2) for value in expected] measured_angles = [round(value, 2) for value in measured] deviation = max( - abs(actual - target) - for actual, target in zip(measured_angles, expected_angles) + abs(actual - target) for actual, target in zip(measured_angles, expected_angles) ) return { "type": relationship_type, @@ -203,11 +201,7 @@ def detect_split_complementary( relationships = [] seen: set[tuple[int, int, int]] = set() for base_index, base_hue in evidence: - others = [ - (index, hue) - for index, hue in evidence - if index != base_index - ] + others = [(index, hue) for index, hue in evidence if index != base_index] for (first_index, first), (second_index, second) in combinations(others, 2): measured = [ hue_distance(base_hue, first), @@ -216,8 +210,7 @@ def detect_split_complementary( ] expected = [150.0, 150.0, 60.0] deviation = max( - abs(actual - target) - for actual, target in zip(measured, expected) + abs(actual - target) for actual, target in zip(measured, expected) ) key = (base_index, *sorted((first_index, second_index))) if deviation <= tolerance and key not in seen: @@ -250,18 +243,14 @@ def detect_monochromatic( if values[1] < MIN_MEANINGFUL_SATURATION or values in seen: continue seen.add(values) - distinct.append( - (index, {"h": values[0], "s": values[1], "l": values[2]}) - ) + distinct.append((index, {"h": values[0], "s": values[1], "l": values[2]})) if len(distinct) < 2: return [] mean_hue = circular_mean(item["h"] for _, item in distinct) if mean_hue is None: return [] - measured = [ - hue_distance(item["h"], mean_hue) for _, item in distinct - ] + measured = [hue_distance(item["h"], mean_hue) for _, item in distinct] deviation = max(measured) saturation_range = max(item["s"] for _, item in distinct) - min( item["s"] for _, item in distinct @@ -269,10 +258,7 @@ def detect_monochromatic( lightness_range = max(item["l"] for _, item in distinct) - min( item["l"] for _, item in distinct ) - if ( - deviation > tolerance - or (saturation_range <= 10 and lightness_range <= 10) - ): + if deviation > tolerance or (saturation_range <= 10 and lightness_range <= 10): return [] return [ _relationship( @@ -309,13 +295,7 @@ def analyze_warm_cool_balance(colors: list[dict[str, object]]) -> dict[str, obje } warm_ratio = warm_count / categorized cool_ratio = cool_count / categorized - balance = ( - "warm" - if warm_ratio > 0.7 - else "cool" - if cool_ratio > 0.7 - else "balanced" - ) + balance = "warm" if warm_ratio > 0.7 else "cool" if cool_ratio > 0.7 else "balanced" return { "balance": balance, "warm_count": warm_count, @@ -346,11 +326,9 @@ def calculate_relationship_fit( involved: set[int] = set() for relationship in detected: relationship_type = str(relationship["type"]) - if ( - relationship_type not in best_by_type - or float(relationship["confidence"]) - > float(best_by_type[relationship_type]["confidence"]) - ): + if relationship_type not in best_by_type or float( + relationship["confidence"] + ) > float(best_by_type[relationship_type]["confidence"]): best_by_type[relationship_type] = relationship involved.update(int(index) for index in relationship["color_indexes"]) @@ -400,8 +378,8 @@ def analyze_color_theory(colors: list[dict[str, object]]) -> dict[str, object]: "split_complementary": detect_split_complementary(evidence), "monochromatic": detect_monochromatic(colors), } - relationship_fit, relationship_summary, factors = ( - calculate_relationship_fit(harmonies, len(evidence)) + relationship_fit, relationship_summary, factors = calculate_relationship_fit( + harmonies, len(evidence) ) temperature_balance = analyze_warm_cool_balance(colors) @@ -413,9 +391,7 @@ def analyze_color_theory(colors: list[dict[str, object]]) -> dict[str, object]: "split_complementary": "Split-Complementary Relationship Detected", "monochromatic": "Monochromatic Relationship Detected", } - tags = [ - labels[name] for name, relationships in harmonies.items() if relationships - ] + tags = [labels[name] for name, relationships in harmonies.items() if relationships] balance = temperature_balance["balance"] tags.append( "Neutral Palette" diff --git a/backend/config.py b/backend/config.py index 842b94f..da35995 100644 --- a/backend/config.py +++ b/backend/config.py @@ -2,15 +2,14 @@ from __future__ import annotations -from dataclasses import dataclass import ipaddress import json import os +from dataclasses import dataclass from pathlib import Path from typing import Mapping from urllib.parse import urlparse - ROOT = Path(__file__).resolve().parent.parent RUNTIME_CONFIG_PATH = ROOT / "runtime-config.json" @@ -129,12 +128,8 @@ def from_env( if not isinstance(defaults, dict): raise ConfigurationError("runtime-config.json defaults must be an object.") - web_host = env.get( - "COLORCRAFT_WEB_HOST", str(defaults["webHost"]) - ).strip() - api_host = env.get( - "COLORCRAFT_API_HOST", str(defaults["apiHost"]) - ).strip() + web_host = env.get("COLORCRAFT_WEB_HOST", str(defaults["webHost"])).strip() + api_host = env.get("COLORCRAFT_API_HOST", str(defaults["apiHost"])).strip() allow_lan_access = parse_boolean( env.get("COLORCRAFT_ALLOW_LAN_ACCESS"), name="COLORCRAFT_ALLOW_LAN_ACCESS", @@ -149,8 +144,7 @@ def from_env( ): if not is_loopback_host(host): raise ConfigurationError( - f"{name}={host} requires " - "COLORCRAFT_ALLOW_LAN_ACCESS=true." + f"{name}={host} requires COLORCRAFT_ALLOW_LAN_ACCESS=true." ) web_port = parse_port( diff --git a/backend/main.py b/backend/main.py index a51109d..a6f73ab 100644 --- a/backend/main.py +++ b/backend/main.py @@ -5,14 +5,7 @@ from contextlib import asynccontextmanager from typing import Annotated -from fastapi import FastAPI, File, Query, Request, UploadFile -from fastapi.exceptions import RequestValidationError -from fastapi.middleware.cors import CORSMiddleware -from fastapi.responses import JSONResponse -from PIL import Image, UnidentifiedImageError -from starlette.concurrency import run_in_threadpool import uvicorn - from accessibility import analyze_accessibility from color_extractor import ( ImageDimensionError, @@ -22,10 +15,15 @@ from color_suggestions import generate_all_suggestions from color_theory import analyze_color_theory from config import RuntimeSettings +from fastapi import FastAPI, File, Query, Request, UploadFile +from fastapi.exceptions import RequestValidationError +from fastapi.middleware.cors import CORSMiddleware +from fastapi.responses import JSONResponse from models import ( - APIError, AnalysisResponse, AnalysisResult, + APIError, + ApplicationMetadata, ErrorResponse, ExtractedColor, ExtractionResponse, @@ -37,14 +35,18 @@ SuggestionResponse, ValidationIssue, ) - +from PIL import Image, UnidentifiedImageError +from starlette.concurrency import run_in_threadpool ALLOWED_IMAGE_TYPES = {"image/jpeg", "image/png", "image/webp"} MAX_UPLOAD_BYTES = 10 * 1024 * 1024 CAPABILITIES = [ - "color extraction", - "palette analysis", - "color suggestions", + "image-color-extraction", + "palette-editing", + "harmony-analysis", + "contrast-review", + "palette-export", + "local-palette-library", ] ColorCount = Annotated[int, Query(ge=3, le=10)] @@ -64,9 +66,7 @@ def error_response( message: str, details: list[ValidationIssue] | None = None, ) -> JSONResponse: - payload = ErrorResponse( - error=APIError(code=code, message=message, details=details) - ) + payload = ErrorResponse(error=APIError(code=code, message=message, details=details)) return JSONResponse( status_code=status_code, content=payload.model_dump(by_alias=True, exclude_none=True), @@ -154,6 +154,22 @@ async def health() -> ServiceResponse: version=runtime.application_version, ) + @application.get("/metadata", response_model=ApplicationMetadata) + async def metadata() -> ApplicationMetadata: + return ApplicationMetadata( + schema_version=1, + id="colorcraft", + name="ColorCraft", + descriptor="Local color utility", + version=runtime.application_version, + icon=f"{runtime.web_url}/colorcraft-mark.svg", + web_url=runtime.web_url, + api_url=runtime.client_api_url, + health_url=f"{runtime.client_api_url}/health", + readiness_url=f"{runtime.client_api_url}/ready", + capabilities=CAPABILITIES, + ) + @application.get("/ready", response_model=ReadinessResponse) async def ready(request: Request) -> ReadinessResponse | JSONResponse: is_ready = bool(request.app.state.ready) @@ -200,9 +216,7 @@ async def extract_uploaded_colors( extracted = await run_in_threadpool( extract_colors, image_bytes, color_count ) - return [ - ExtractedColor.model_validate(color) for color in extracted - ] + return [ExtractedColor.model_validate(color) for color in extracted] except ImageDimensionError: raise APIException( 413, @@ -249,9 +263,7 @@ async def extract_colors_endpoint( ) def analyze_palette(request: PaletteAnalysisRequest) -> AnalysisResult: - colors = [ - color.model_dump(by_alias=False) for color in request.colors - ] + colors = [color.model_dump(by_alias=False) for color in request.colors] return AnalysisResult( color_theory=analyze_color_theory(colors), accessibility=analyze_accessibility(colors), @@ -278,14 +290,10 @@ async def analyze_colors_endpoint( async def suggest_colors_endpoint( request: SuggestionRequest, ) -> SuggestionResponse: - colors = [ - color.model_dump(by_alias=False) for color in request.colors - ] + colors = [color.model_dump(by_alias=False) for color in request.colors] return SuggestionResponse( success=True, - suggestions=[ - generate_all_suggestions(color) for color in colors - ], + suggestions=[generate_all_suggestions(color) for color in colors], ) @application.post( diff --git a/backend/models.py b/backend/models.py index 87611f6..cc46373 100644 --- a/backend/models.py +++ b/backend/models.py @@ -28,6 +28,8 @@ class ContractModel(BaseModel): HexColor = Annotated[str, StringConstraints(pattern=r"^#[0-9A-Fa-f]{6}$")] + + class RGB(ContractModel): r: int = Field(ge=0, le=255) g: int = Field(ge=0, le=255) @@ -68,9 +70,7 @@ def representations_must_agree(self) -> "ColorInput": **dict( zip( ("h", "s", "l"), - rgb_to_hsl( - [expected_rgb.r, expected_rgb.g, expected_rgb.b] - ), + rgb_to_hsl([expected_rgb.r, expected_rgb.g, expected_rgb.b]), ) ) ) @@ -105,6 +105,20 @@ class ReadinessResponse(ContractModel): capabilities: list[str] +class ApplicationMetadata(ContractModel): + schema_version: Literal[1] + id: Literal["colorcraft"] + name: Literal["ColorCraft"] + descriptor: Literal["Local color utility"] + version: str + icon: str + web_url: str + api_url: str + health_url: str + readiness_url: str + capabilities: list[str] + + class ExtractionResponse(ContractModel): success: Literal[True] colors: list[ExtractedColor] = Field(min_length=1, max_length=10) diff --git a/backend/requirements-dev.txt b/backend/requirements-dev.txt index 871467b..3b0f6b4 100644 --- a/backend/requirements-dev.txt +++ b/backend/requirements-dev.txt @@ -1,3 +1,6 @@ -r requirements.txt httpx==0.25.2 pytest==8.3.5 +pytest-cov==6.2.1 +ruff==0.12.5 +mypy==1.17.0 diff --git a/check.cmd b/check.cmd new file mode 100644 index 0000000..19b1325 --- /dev/null +++ b/check.cmd @@ -0,0 +1,17 @@ +@echo off +setlocal +set "COLORCRAFT_ROOT=%~dp0" + +if exist "%COLORCRAFT_ROOT%backend\.venv311\Scripts\python.exe" ( + "%COLORCRAFT_ROOT%backend\.venv311\Scripts\python.exe" "%COLORCRAFT_ROOT%check.py" %* + exit /b %errorlevel% +) + +if exist "%COLORCRAFT_ROOT%backend\.venv\Scripts\python.exe" ( + "%COLORCRAFT_ROOT%backend\.venv\Scripts\python.exe" "%COLORCRAFT_ROOT%check.py" %* + exit /b %errorlevel% +) + +echo ColorCraft could not find a backend development environment. +echo Create one and install backend\requirements-dev.txt, then try again. +exit /b 1 diff --git a/check.py b/check.py new file mode 100644 index 0000000..838f37b --- /dev/null +++ b/check.py @@ -0,0 +1,118 @@ +"""Run ColorCraft's complete repository validation workflow.""" + +from __future__ import annotations + +import argparse +import shutil +import subprocess +import sys +from dataclasses import dataclass +from pathlib import Path + +ROOT = Path(__file__).resolve().parent +FRONTEND = ROOT / "frontend" +BACKEND = ROOT / "backend" + + +@dataclass(frozen=True) +class CheckStep: + label: str + command: tuple[str, ...] + cwd: Path + + +def validation_steps( + python: str, + corepack: str, + *, + include_e2e: bool = True, +) -> tuple[CheckStep, ...]: + pnpm = (corepack, "pnpm@9.15.9") + steps = [ + CheckStep("frontend format", (*pnpm, "format:check"), FRONTEND), + CheckStep("frontend lint", (*pnpm, "lint"), FRONTEND), + CheckStep("frontend typecheck", (*pnpm, "typecheck"), FRONTEND), + CheckStep("frontend coverage", (*pnpm, "test:coverage"), FRONTEND), + CheckStep("frontend build", (*pnpm, "build"), FRONTEND), + CheckStep( + "backend format", + ( + python, + "-m", + "ruff", + "format", + "--check", + "backend", + "tests", + "dev.py", + "check.py", + ), + ROOT, + ), + CheckStep( + "backend lint", + (python, "-m", "ruff", "check", "backend", "tests", "dev.py", "check.py"), + ROOT, + ), + CheckStep( + "backend typecheck", + ( + python, + "-m", + "mypy", + "backend/config.py", + "backend/models.py", + "check.py", + ), + ROOT, + ), + CheckStep( + "backend tests and coverage", + ( + python, + "-m", + "pytest", + "tests", + "--cov=backend", + "--cov=dev", + "--cov-report=term-missing", + "--cov-report=xml:.tmp/backend-coverage.xml", + ), + ROOT, + ), + ] + if include_e2e: + steps.append( + CheckStep("browser E2E and accessibility", (*pnpm, "test:e2e"), FRONTEND) + ) + return tuple(steps) + + +def main() -> int: + parser = argparse.ArgumentParser(description=__doc__) + parser.add_argument( + "--skip-e2e", + action="store_true", + help="Run the fast validation layers without Playwright.", + ) + arguments = parser.parse_args() + corepack = shutil.which("corepack.cmd") or shutil.which("corepack") + if not corepack: + print("ColorCraft validation requires Corepack.", file=sys.stderr) + return 1 + + for index, step in enumerate( + validation_steps(sys.executable, corepack, include_e2e=not arguments.skip_e2e), + start=1, + ): + print(f"[{index}] {step.label}") + result = subprocess.run(step.command, cwd=step.cwd, check=False) + if result.returncode: + print(f"Validation stopped: {step.label} failed.", file=sys.stderr) + return result.returncode + print("ColorCraft validation passed.") + return 0 + + +if __name__ == "__main__": + raise SystemExit(main()) diff --git a/dev.py b/dev.py index 6b2eb94..b8c397b 100644 --- a/dev.py +++ b/dev.py @@ -2,21 +2,20 @@ from __future__ import annotations -from dataclasses import dataclass import json import os -from pathlib import Path import shutil import signal import socket import subprocess import sys import time +from dataclasses import dataclass +from pathlib import Path from typing import Callable, Sequence from urllib.error import HTTPError, URLError from urllib.request import urlopen - ROOT = Path(__file__).resolve().parent BACKEND_DIR = ROOT / "backend" FRONTEND_DIR = ROOT / "frontend" @@ -228,6 +227,10 @@ def readiness_url(settings: RuntimeSettings) -> str: return f"{settings.client_api_url}/ready" +def metadata_url(settings: RuntimeSettings) -> str: + return f"{settings.client_api_url}/metadata" + + def wait_for_readiness( settings: RuntimeSettings, processes: Sequence[tuple[ProcessStep, subprocess.Popen[bytes]]], @@ -248,7 +251,13 @@ def wait_for_readiness( if response.status == 200 and payload.get("status") == "ready": return last_error = f"readiness returned status {response.status}" - except (HTTPError, URLError, OSError, TimeoutError, json.JSONDecodeError) as error: + except ( + HTTPError, + URLError, + OSError, + TimeoutError, + json.JSONDecodeError, + ) as error: last_error = str(error) sleep(0.2) @@ -295,6 +304,7 @@ def run_dev_launcher( print(f" API: {runtime.client_api_url}") print(f" Health: {runtime.client_api_url}/health") print(f" Readiness: {readiness_url(runtime)}") + print(f" Metadata: {metadata_url(runtime)}") print("Waiting for API readiness...") for step in plan.steps: diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..e85fa55 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,15 @@ +# ColorCraft documentation + +Start with [Getting started](./getting-started.md), then use the guide that matches your task: + +- [User workflow](./user-workflow.md) — create, save, review, export, and manage palettes. +- [Runtime configuration](./runtime-configuration.md) — ports, hosts, CORS, LAN opt-in, and launcher behavior. +- [Architecture](./architecture.md) — application boundaries and data flow. +- [API](./api.md) — endpoints, request shapes, metadata, readiness, and errors. +- [Persistence and privacy](./persistence-and-privacy.md) — IndexedDB schema, migration, retention, and deletion. +- [Dashboard manifest](./dashboard-manifest.md) — static discovery defaults and runtime resolution. +- [Testing](./testing.md) — local and CI quality gates. +- [Screenshot review](./screenshot-review.md) — deterministic fixtures, temporary output, and curation. +- [Troubleshooting](./troubleshooting.md) — common Python, pnpm, port, and browser failures. +- [Brand system](./brand-system.md) — identity, tokens, themes, and shell conventions. +- [API contract rationale](./api-contracts.md) — compatibility and validation design notes. diff --git a/docs/api.md b/docs/api.md new file mode 100644 index 0000000..5977f71 --- /dev/null +++ b/docs/api.md @@ -0,0 +1,49 @@ +# API + +The default base URL is `http://127.0.0.1:4100`. Interactive OpenAPI documentation is available at `/docs`. + +| Method | Path | Purpose | +| --- | --- | --- | +| `GET` | `/` | Service identity | +| `GET` | `/health` | Liveness | +| `GET` | `/ready` | Readiness and capability slugs | +| `GET` | `/metadata` | Runtime-resolved dashboard metadata | +| `POST` | `/api/extract-colors?n_colors=5` | Multipart image extraction | +| `POST` | `/api/analyze-colors` | Analyze 2–10 normalized colors | +| `POST` | `/api/suggest-colors` | Suggest colors for 1–10 normalized colors | +| `POST` | `/api/full-analysis?n_colors=5` | Extract and analyze in one request | + +Analysis and suggestion requests wrap colors in an object: + +```json +{ + "colors": [ + { + "hex": "#6A5BCF", + "rgb": { "r": 106, "g": 91, "b": 207 }, + "hsl": { "h": 248, "s": 53, "l": 58 } + }, + { + "hex": "#F5F0E8", + "rgb": { "r": 245, "g": 240, "b": 232 }, + "hsl": { "h": 37, "s": 39, "l": 94 } + } + ] +} +``` + +Passing a bare array produces `422 validation_error`. Error responses are stable envelopes: + +```json +{ + "error": { + "code": "validation_error", + "message": "Request validation failed.", + "details": [] + } +} +``` + +Extraction accepts JPEG, PNG, and WebP files up to 10 MB, limits decoded dimensions, and ignores fully transparent pixels. `n_colors` must be 3–10. Expected client errors use 413, 415, or 422 rather than an unstructured server exception. + +`/metadata` reports the resolved web, API, health, readiness, icon, version, and capabilities. `/ready` returns `503` with `not_ready` until application startup completes. See [Dashboard manifest](./dashboard-manifest.md). diff --git a/docs/architecture.md b/docs/architecture.md new file mode 100644 index 0000000..bce7456 --- /dev/null +++ b/docs/architecture.md @@ -0,0 +1,26 @@ +# Architecture + +```mermaid +flowchart TD + Browser[React + TypeScript browser app] + IDB[(IndexedDB palette records)] + LS[(LocalStorage theme preference)] + API[FastAPI service] + Extract[LAB extraction] + Theory[Harmony and suggestions] + Contrast[WCAG contrast] + Browser <--> IDB + Browser <--> LS + Browser -->|JSON and multipart HTTP| API + API --> Extract + API --> Theory + API --> Contrast +``` + +The frontend owns navigation, transient image preview state, explicit save state, role assignments, exports, and the local palette repository. `persistence.ts` validates every stored record with Zod, migrates legacy version-0 records to schema version 1, and ignores malformed or unknown future records without crashing the Library. + +The backend is stateless. It validates contract models with Pydantic and delegates CPU-heavy extraction to a thread pool. Color extraction uses deterministic sampling, LAB conversion, KMeans clustering, and representative processed pixels. Theory, suggestions, and contrast operate on normalized color contracts. + +`dev.py` is a process supervisor rather than an application server. It resolves configuration once, starts the API and Vite with consistent values, checks `/ready`, optionally opens the browser, and forwards shutdown to both processes. + +Dashboard integration has two layers: the checked-in static manifest advertises stable defaults, while `/metadata` reports the runtime-resolved addresses. See [API](./api.md) and [Persistence and privacy](./persistence-and-privacy.md). diff --git a/docs/assets/screenshots/create-light.png b/docs/assets/screenshots/create-light.png new file mode 100644 index 0000000..32c0321 Binary files /dev/null and b/docs/assets/screenshots/create-light.png differ diff --git a/docs/assets/screenshots/library-dark.png b/docs/assets/screenshots/library-dark.png new file mode 100644 index 0000000..3aa4e1d Binary files /dev/null and b/docs/assets/screenshots/library-dark.png differ diff --git a/docs/assets/screenshots/mobile-create.png b/docs/assets/screenshots/mobile-create.png new file mode 100644 index 0000000..307e052 Binary files /dev/null and b/docs/assets/screenshots/mobile-create.png differ diff --git a/docs/assets/screenshots/review-dark.png b/docs/assets/screenshots/review-dark.png new file mode 100644 index 0000000..1dea84a Binary files /dev/null and b/docs/assets/screenshots/review-dark.png differ diff --git a/docs/brand-system.md b/docs/brand-system.md index 684bdfc..734cfb5 100644 --- a/docs/brand-system.md +++ b/docs/brand-system.md @@ -8,10 +8,10 @@ compact information density, restrained radii, semantic controls, and a narrow iris-to-ember accent. ColorCraft remains its own product. It does not reuse the Web Video Optimizer monogram, video metaphors, or video-specific navigation. -The product uses the family application-shell grammar for three real workflow -stages: Create, Review, and Export. It remains a focused local utility rather -than a dashboard. Library, recent-palette, account, and persistence surfaces -must not appear until the corresponding product capabilities exist. +The product uses the family application-shell grammar for four real workflow +destinations: Create, Review, Export, and Library. Library and recent-palette +surfaces represent browser-local IndexedDB records. ColorCraft remains a focused +local utility rather than a dashboard and does not imply accounts or cloud sync. ## Voice diff --git a/docs/dashboard-manifest.md b/docs/dashboard-manifest.md new file mode 100644 index 0000000..9452634 --- /dev/null +++ b/docs/dashboard-manifest.md @@ -0,0 +1,23 @@ +# Dashboard manifest + +[`app-manifest.json`](../app-manifest.json) is ColorCraft's static discovery contract. The identical file under `frontend/public` makes it available in the built web application. + +The manifest contains schema version 1, a stable `colorcraft` ID, product name and descriptor, version, icon path, default web/API addresses, health and metadata paths, and machine-readable capability slugs. + +Static addresses are defaults only. Environment variables can change ports or hosts at launch, so a dashboard should: + +1. Discover the application from `app-manifest.json`. +2. Query the manifest's metadata path on the candidate API address. +3. Treat `/metadata` as authoritative for runtime-resolved URLs. +4. Use `/ready` for dependency readiness and `/health` for liveness. + +Current capability slugs are: + +- `image-color-extraction` +- `palette-editing` +- `harmony-analysis` +- `contrast-review` +- `palette-export` +- `local-palette-library` + +The manifest contract and public copy are tested for equality. Runtime tests verify that metadata respects configuration overrides. diff --git a/docs/getting-started.md b/docs/getting-started.md new file mode 100644 index 0000000..b4b106d --- /dev/null +++ b/docs/getting-started.md @@ -0,0 +1,49 @@ +# Getting started + +## Requirements + +- Python 3.11 (recommended; pinned Pillow wheels are not available for every newer Python release) +- Node.js 20 or newer +- Corepack +- Git + +## Windows + +From the repository root: + +```powershell +py -3.11 -m venv backend\.venv311 +.\backend\.venv311\Scripts\python.exe -m pip install --upgrade pip +.\backend\.venv311\Scripts\python.exe -m pip install -r backend\requirements-dev.txt +cd frontend +corepack pnpm@9.15.9 install +cd .. +.\backend\.venv311\Scripts\python.exe dev.py +``` + +The launcher supervises the FastAPI and Vite processes, waits for readiness, prints every URL, and shuts both down when you press `Ctrl+C`. + +## macOS and Linux + +```bash +python3.11 -m venv backend/.venv +backend/.venv/bin/python -m pip install --upgrade pip +backend/.venv/bin/python -m pip install -r backend/requirements-dev.txt +cd frontend +corepack pnpm@9.15.9 install +cd .. +backend/.venv/bin/python dev.py +``` + +If the browser does not open, visit `http://127.0.0.1:5174`. The API docs are at `http://127.0.0.1:4100/docs`. + +## Production build + +```powershell +cd frontend +corepack pnpm@9.15.9 build +``` + +The output is written to `frontend/dist`. This repository's launcher is a development workflow; choose a production web server and API process manager for deployment. + +For configuration overrides, see [Runtime configuration](./runtime-configuration.md). For setup errors, see [Troubleshooting](./troubleshooting.md). diff --git a/docs/persistence-and-privacy.md b/docs/persistence-and-privacy.md new file mode 100644 index 0000000..741a8c8 --- /dev/null +++ b/docs/persistence-and-privacy.md @@ -0,0 +1,30 @@ +# Persistence and privacy + +ColorCraft is local-first, not account-backed. There is no synchronization service or server-side palette database. + +## What is stored + +The `colorcraft` IndexedDB database contains `palettes` records with: + +- schema version, ID, name, and created/updated timestamps +- manual or image source type and an optional source filename +- 1–10 normalized colors with optional population and pixel-count metadata +- semantic contrast-role assignments + +Schema version 1 is validated with Zod whenever records are read. Legacy records with no version or version 0 are migrated in memory and become version 1 when next saved. Corrupt records and unknown future versions are skipped so one bad record cannot prevent the Library from opening. + +LocalStorage contains only the theme preference. Uploaded image bytes, object URLs, analysis responses, and suggestions are not written to LocalStorage or IndexedDB. + +## Image processing + +An uploaded file is previewed in browser memory and sent to the configured FastAPI service. The service reads it for that request and does not write it to disk or a database. If LAN access is enabled, image traffic crosses that network path; use a trusted network or HTTPS termination. + +## Retention and deletion + +Palette records remain until the user deletes them or clears site data for the ColorCraft origin. Library deletion is confirmed and cannot be undone. Different browser profiles, origins, and port combinations have separate browser storage. + +To remove all ColorCraft browser data, use the browser's site-data controls for the web origin. Uninstalling the repository does not necessarily clear browser data. + +## Security posture + +Defaults bind both services to loopback. Non-loopback hosts and CORS origins require explicit `COLORCRAFT_ALLOW_LAN_ACCESS=true`; wildcard CORS is rejected. ColorCraft does not provide authentication, so do not expose it directly to an untrusted network. diff --git a/docs/runtime-configuration.md b/docs/runtime-configuration.md new file mode 100644 index 0000000..e1a4330 --- /dev/null +++ b/docs/runtime-configuration.md @@ -0,0 +1,30 @@ +# Runtime configuration + +ColorCraft defaults to loopback-only services: + +| Variable | Default | Purpose | +| --- | --- | --- | +| `COLORCRAFT_WEB_HOST` | `127.0.0.1` | Vite bind host | +| `COLORCRAFT_WEB_PORT` | `5174` | Web port | +| `COLORCRAFT_API_HOST` | `127.0.0.1` | FastAPI bind host | +| `COLORCRAFT_API_PORT` | `4100` | API port | +| `COLORCRAFT_READINESS_TIMEOUT_SECONDS` | `30` | Launcher startup deadline | +| `COLORCRAFT_ALLOWED_ORIGINS` | resolved web origin | Comma-separated exact CORS origins | +| `VITE_API_URL` | resolved API origin | Browser-visible API base URL | +| `COLORCRAFT_ALLOW_LAN_ACCESS` | `false` | Required opt-in for non-loopback hosts/origins | +| `COLORCRAFT_NO_BROWSER` | `false` | Prevent automatic browser launch | + +Example PowerShell override: + +```powershell +$env:COLORCRAFT_WEB_PORT = "5184" +$env:COLORCRAFT_API_PORT = "4110" +$env:COLORCRAFT_NO_BROWSER = "true" +.\backend\.venv311\Scripts\python.exe dev.py +``` + +Ports must be valid and distinct. The launcher checks availability before starting either child process and reports a focused error if a port is occupied. Wildcard CORS origins are rejected. + +LAN binding expands the trust boundary. Set `COLORCRAFT_ALLOW_LAN_ACCESS=true`, configure explicit hosts and origins, and use a firewall appropriate to the network. Uploaded images traverse the configured network path to the API. + +Static dashboard defaults stay in [`app-manifest.json`](../app-manifest.json). Consumers that need overrides must read `/metadata`; see [Dashboard manifest](./dashboard-manifest.md). diff --git a/docs/screenshot-review.md b/docs/screenshot-review.md new file mode 100644 index 0000000..6be5f32 --- /dev/null +++ b/docs/screenshot-review.md @@ -0,0 +1,16 @@ +# Screenshot review + +Run the deterministic review workflow: + +```powershell +cd frontend +corepack pnpm@9.15.9 review:screenshots +``` + +It creates 16 fixture-driven PNGs under `.tmp/ui-review`: empty Create in both themes, extraction progress, image and manual palettes, selected and modified states, four Review surfaces, Export, Library, two mobile surfaces, and an API error. Network-dependent extraction is mocked; analysis uses fixed palette data. + +`.tmp` is intentionally ignored. Review those files locally for clipping, hierarchy, contrast, focus, error placement, and responsive behavior. Temporary test artifacts must not be linked from documentation. + +When a screenshot is representative and stable, copy only that file to `docs/assets/screenshots`, give it a semantic name, and reference it from documentation. Curated images are reviewable product documentation; the complete temporary set is disposable diagnostic output. + +The current curated set shows light Create, dark Review, dark Library, and mobile Create. Regenerate it only when a deliberate interface change makes the existing image inaccurate. diff --git a/docs/testing.md b/docs/testing.md new file mode 100644 index 0000000..66567b9 --- /dev/null +++ b/docs/testing.md @@ -0,0 +1,46 @@ +# Testing + +## Complete validation + +Install the browser once: + +```powershell +cd frontend +corepack pnpm@9.15.9 exec playwright install chromium +cd .. +``` + +Then run the same gate used by CI: + +```powershell +.\backend\.venv311\Scripts\python.exe check.py +``` + +On Unix, use the Python executable from `backend/.venv`. `check.cmd` is a Windows convenience wrapper. + +The gate runs: + +1. Prettier format verification +2. ESLint +3. TypeScript checking +4. Vitest unit/integration tests with V8 coverage +5. Vite production build +6. Ruff format and lint checks +7. mypy on stable backend contracts and the validation runner +8. pytest with backend and launcher coverage +9. Playwright Chromium workflow and axe accessibility checks + +Use `python check.py --skip-e2e` for a fast local loop. CI always runs the complete gate. + +## Focused commands + +```powershell +cd frontend +corepack pnpm@9.15.9 test +corepack pnpm@9.15.9 test:e2e +corepack pnpm@9.15.9 review:screenshots +cd .. +.\backend\.venv311\Scripts\python.exe -m pytest tests +``` + +Persistence tests use an in-memory IndexedDB implementation and cover migration, malformed data, identity-preserving save updates, sorting, rename, duplicate, and delete. Browser tests cover create → save → analyze → contrast → export → reopen → delete plus representative accessibility states. Backend tests cover contracts, upload defenses, analysis, suggestions, metadata, readiness, runtime parsing, and launcher supervision. diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md new file mode 100644 index 0000000..2b990e4 --- /dev/null +++ b/docs/troubleshooting.md @@ -0,0 +1,46 @@ +# Troubleshooting + +## Pillow fails to install on Python 3.13 + +The pinned Pillow version may not provide a compatible wheel. Install Python 3.11 and create the environment explicitly: + +```powershell +py -3.11 -m venv backend\.venv311 +.\backend\.venv311\Scripts\python.exe -m pip install -r backend\requirements-dev.txt +``` + +If virtual-environment creation reports that `venvlauncher.exe` cannot be copied, close processes using that environment, choose a new directory name, and verify the Python installation outside the Microsoft Store alias. + +## pnpm reports “packages field missing or empty” + +Run pnpm inside `frontend`, not the repository root: + +```powershell +cd frontend +corepack pnpm@9.15.9 install +``` + +The repository pins pnpm 9 for reproducibility. If pnpm blocks an `esbuild` lifecycle script, use the pinned version and the checked-in lockfile rather than approving an unrelated global pnpm policy. + +## A port is already in use + +ColorCraft defaults to 5174/4100. Stop the conflicting process or set `COLORCRAFT_WEB_PORT` and `COLORCRAFT_API_PORT`; see [Runtime configuration](./runtime-configuration.md). The launcher prints which address is occupied. + +## The frontend cannot reach the API + +Check `/ready`, confirm the printed API URL, and ensure `VITE_API_URL` matches the browser-reachable address. Custom web origins must appear exactly in `COLORCRAFT_ALLOWED_ORIGINS`. + +## Saved palettes disappeared + +Palettes are scoped to the exact browser profile and origin. Changing the web port, using private browsing, or clearing site data creates an empty Library. ColorCraft has no cloud recovery. + +## Playwright cannot find Chromium + +```powershell +cd frontend +corepack pnpm@9.15.9 exec playwright install chromium +``` + +## A 422 response appears for analysis or suggestions + +Send `{ "colors": [...] }`, not a bare array, and include consistent HEX, RGB, and HSL values. Read the structured `error.details` entries or use `/docs`. diff --git a/docs/user-workflow.md b/docs/user-workflow.md new file mode 100644 index 0000000..54a197e --- /dev/null +++ b/docs/user-workflow.md @@ -0,0 +1,36 @@ +# User workflow + +## Create and refine + +Choose **Upload image** for PNG, JPEG, or WebP files up to 10 MB, or choose **Start manually**. Extraction returns 3–10 representative colors. Select a palette row, type a six-digit HEX value, use the native picker, duplicate a color, or remove it. + +Uploaded image previews exist only for the active page session. Saving an image-derived palette records its filename, colors, population data, and pixel counts—not the image bytes. + +## Save states + +- **Unsaved**: the open palette has no IndexedDB record. **Save palette** creates one. +- **Saved**: the current palette matches its record. The save action is disabled. +- **Modified**: colors, roles, name, or source metadata differ. **Save changes** updates the same record. + +ColorCraft confirms before opening another record or starting over when doing so would discard meaningful unsaved or modified work. + +## Review + +Choose **Analyze palette** to enter Review: + +- **Overview** summarizes temperature, saturation, lightness, geometric relationships, and next actions. +- **Harmony** explains detected relationships on the color wheel. +- **Contrast** assigns semantic interface roles and reports WCAG ratios. +- **Suggestions** proposes complementary, triadic, analogous, split-complementary, tetradic, monochromatic, or accessibility-oriented colors. + +Relationship fit measures geometric hue structure; it is not a judgment of aesthetic quality. + +## Export + +Export the current palette as CSS custom properties, JSON, Tailwind configuration, or design tokens. Copy uses the Clipboard API; download creates a local file. Export does not upload the palette. + +## Library + +The Library lists browser-local records most recently updated first. Search by palette name or source filename. Open, inline rename, duplicate, or delete a record. Deletion always asks for confirmation; deleting the active record returns to the empty Library state and disables Review and Export until another palette opens. + +The sidebar shows recent palettes only when records exist. Clearing browser site data permanently removes the Library. diff --git a/frontend/.prettierignore b/frontend/.prettierignore new file mode 100644 index 0000000..1ece1a9 --- /dev/null +++ b/frontend/.prettierignore @@ -0,0 +1,6 @@ +coverage +dist +node_modules +playwright-report +test-results +pnpm-lock.yaml diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json new file mode 100644 index 0000000..e3b414c --- /dev/null +++ b/frontend/.prettierrc.json @@ -0,0 +1,5 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/frontend/e2e/capture-screenshots.mjs b/frontend/e2e/capture-screenshots.mjs new file mode 100644 index 0000000..6b6b742 --- /dev/null +++ b/frontend/e2e/capture-screenshots.mjs @@ -0,0 +1,23 @@ +import { rm, mkdir } from 'node:fs/promises' +import path from 'node:path' +import { spawn } from 'node:child_process' + +const frontendRoot = path.resolve(import.meta.dirname, '..') +const outputDirectory = path.resolve(frontendRoot, '..', '.tmp', 'ui-review') +await rm(outputDirectory, { recursive: true, force: true }) +await mkdir(outputDirectory, { recursive: true }) + +const isWindows = process.platform === 'win32' +const executable = isWindows + ? 'corepack pnpm@9.15.9 exec playwright test --grep @screenshots' + : 'corepack' +const arguments_ = isWindows + ? [] + : ['pnpm@9.15.9', 'exec', 'playwright', 'test', '--grep', '@screenshots'] +const child = spawn(executable, arguments_, { + cwd: frontendRoot, + stdio: 'inherit', + env: { ...process.env, COLORCRAFT_SCREENSHOTS: '1' }, + shell: isWindows, +}) +child.on('exit', (code) => process.exit(code ?? 1)) diff --git a/frontend/e2e/screenshot-review.spec.ts b/frontend/e2e/screenshot-review.spec.ts new file mode 100644 index 0000000..417bfc8 --- /dev/null +++ b/frontend/e2e/screenshot-review.spec.ts @@ -0,0 +1,179 @@ +import { expect, test, type Page } from '@playwright/test' +import path from 'node:path' + +test.describe.configure({ mode: 'serial' }) + +const outputDirectory = path.resolve( + import.meta.dirname, + '..', + '..', + '.tmp', + 'ui-review', +) +const png = Buffer.from( + 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAARElEQVR4nGP8z8AARLJgFIyCUUBPAAA2QQE/7iZ8GAAAAABJRU5ErkJggg==', + 'base64', +) + +async function capture(page: Page, name: string) { + await page.screenshot({ + path: path.join(outputDirectory, `${name}.png`), + fullPage: true, + animations: 'disabled', + }) +} + +async function setPalette(page: Page) { + await page.getByRole('button', { name: 'Start manually' }).click() + for (let index = 0; index < 4; index += 1) { + await page.getByRole('button', { name: 'Add color' }).click() + } + const colors = ['#6A5BCF', '#F2763F', '#141D29', '#F5F0E8', '#41A37A'] + for (let index = 0; index < colors.length; index += 1) { + const input = page.getByRole('textbox', { + name: `Color ${index + 1}`, + exact: true, + }) + await input.fill(colors[index]) + await input.blur() + } +} + +test('@screenshots fixture-driven UI review', async ({ page }) => { + test.skip( + !process.env.COLORCRAFT_SCREENSHOTS, + 'Run through pnpm review:screenshots.', + ) + await page.goto('/?view=create') + await page.locator('.sidebar-theme select').selectOption('dark') + await capture(page, '01-create-empty-dark') + await page.locator('.sidebar-theme select').selectOption('light') + await capture(page, '02-create-empty-light') + + await page.route('**/api/extract-colors?*', async (route) => { + await new Promise((resolve) => setTimeout(resolve, 700)) + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + success: true, + count: 3, + colors: [ + { + hex: '#6A5BCF', + rgb: { r: 106, g: 91, b: 207 }, + hsl: { h: 248, s: 53, l: 58 }, + population: 0.5, + pixelCount: 50, + }, + { + hex: '#F2763F', + rgb: { r: 242, g: 118, b: 63 }, + hsl: { h: 18, s: 87, l: 60 }, + population: 0.3, + pixelCount: 30, + }, + { + hex: '#141D29', + rgb: { r: 20, g: 29, b: 41 }, + hsl: { h: 214, s: 34, l: 12 }, + population: 0.2, + pixelCount: 20, + }, + ], + }), + }) + }) + await page.locator('#source-image').setInputFiles({ + name: 'fixture-palette.png', + mimeType: 'image/png', + buffer: png, + }) + await expect(page.getByRole('button', { name: /^Extracting/ })).toBeVisible() + await capture(page, '03-extraction-progress') + await expect(page.getByText(/3 distinct colors were/)).toBeVisible() + await capture(page, '04-image-palette-workspace') + await page.locator('[aria-label="Palette color 2"]').click() + await capture(page, '05-selected-palette-color') + + await page.getByRole('button', { name: 'New palette' }).click() + await page.getByRole('button', { name: 'Discard and start new' }).click() + await setPalette(page) + await capture(page, '06-manual-palette-workspace') + await page.getByRole('button', { name: 'Save palette' }).click() + await expect(page.getByText('Saved', { exact: true })).toBeVisible() + const firstColor = page.getByRole('textbox', { + name: 'Color 1', + exact: true, + }) + await firstColor.fill('#725FD6') + await firstColor.blur() + await capture(page, '07-modified-state') + await page.getByRole('button', { name: 'Save changes' }).click() + + await page.getByRole('button', { name: 'Analyze palette' }).click() + await expect(page.getByText('Palette summary')).toBeVisible() + await page.locator('.sidebar-theme select').selectOption('dark') + await capture(page, '08-review-overview') + await page.getByRole('tab', { name: 'Harmony' }).click() + await capture(page, '09-review-harmony') + await page.getByRole('tab', { name: 'Contrast' }).click() + await page.getByLabel('Page background').selectOption('#F5F0E8') + await page.getByLabel('Primary text').selectOption('#141D29') + await capture(page, '10-contrast-roles') + await page.getByRole('tab', { name: 'Suggestions' }).click() + await page.getByRole('button', { name: 'Generate suggestions' }).click() + await expect(page.locator('.compact-suggestion-list')).toBeVisible() + await capture(page, '11-suggestions') + + await page + .getByRole('navigation', { name: 'Primary' }) + .getByRole('button', { name: 'Export' }) + .click() + await capture(page, '12-export') + await page + .getByRole('navigation', { name: 'Primary' }) + .getByRole('button', { name: 'Library' }) + .click() + await capture(page, '13-library') + + await page.setViewportSize({ width: 390, height: 844 }) + await page + .getByRole('navigation', { name: 'Mobile primary' }) + .getByRole('button', { name: 'Create' }) + .click() + await capture(page, '14-mobile-create') + await page + .getByRole('navigation', { name: 'Mobile primary' }) + .getByRole('button', { name: 'Review' }) + .click() + await capture(page, '15-mobile-review') + + await page.setViewportSize({ width: 1440, height: 900 }) + await page.getByRole('button', { name: 'New palette' }).click() + const discardButton = page.getByRole('button', { + name: 'Discard and start new', + }) + if (await discardButton.isVisible()) { + await discardButton.click() + } + await page.unroute('**/api/extract-colors?*') + await page.route('**/api/extract-colors?*', (route) => + route.fulfill({ + status: 500, + contentType: 'application/json', + body: JSON.stringify({ + error: { code: 'fixture_error', message: 'Fixture extraction failed.' }, + }), + }), + ) + await page.locator('#source-image').setInputFiles({ + name: 'fixture-error.png', + mimeType: 'image/png', + buffer: png, + }) + await expect(page.getByRole('alert')).toContainText( + 'Fixture extraction failed.', + ) + await capture(page, '16-error-notice') +}) diff --git a/frontend/e2e/workflow.spec.ts b/frontend/e2e/workflow.spec.ts new file mode 100644 index 0000000..a3cb67d --- /dev/null +++ b/frontend/e2e/workflow.spec.ts @@ -0,0 +1,86 @@ +import AxeBuilder from '@axe-core/playwright' +import { expect, test, type Page } from '@playwright/test' + +async function createManualPalette(page: Page) { + await page.goto('/?view=create') + await page.getByRole('button', { name: 'Start manually' }).click() + await page.getByRole('button', { name: 'Add color' }).click() + await page + .getByRole('textbox', { name: 'Color 1', exact: true }) + .fill('#6A5BCF') + await page.getByRole('textbox', { name: 'Color 1', exact: true }).blur() + await page + .getByRole('textbox', { name: 'Color 2', exact: true }) + .fill('#F5F0E8') + await page.getByRole('textbox', { name: 'Color 2', exact: true }).blur() +} + +test('creation through save, review, export, reopen, and delete', async ({ + page, + context, +}) => { + await context.grantPermissions(['clipboard-read', 'clipboard-write']) + await createManualPalette(page) + await expect(page.getByText('Unsaved')).toBeVisible() + await page.getByRole('button', { name: 'Save palette' }).click() + await expect(page.getByText('Saved', { exact: true })).toBeVisible() + + await page.getByRole('button', { name: 'Analyze palette' }).click() + await expect(page.getByText('Palette summary')).toBeVisible() + await page.getByRole('tab', { name: 'Contrast' }).click() + await page.getByLabel('Page background').selectOption('#F5F0E8') + await page.getByLabel('Primary text').selectOption('#6A5BCF') + await expect(page.getByText('Primary text on page background')).toBeVisible() + + await page + .getByRole('navigation', { name: 'Primary' }) + .getByRole('button', { name: 'Export' }) + .click() + await expect( + page.getByLabel(/Generated CSS custom properties preview/), + ).toContainText('--color-palette-1') + await page.getByRole('button', { name: 'Copy' }).click() + await expect(page.getByText(/copied to the clipboard/)).toBeVisible() + + await page + .getByRole('navigation', { name: 'Primary' }) + .getByRole('button', { name: 'Library' }) + .click() + await expect( + page.getByRole('button', { name: 'Open Untitled palette' }), + ).toBeVisible() + await page.getByRole('button', { name: 'Open Untitled palette' }).click() + await expect(page.locator('input[value="#6A5BCF"]').first()).toBeVisible() + + await page + .getByRole('navigation', { name: 'Primary' }) + .getByRole('button', { name: 'Library' }) + .click() + await page.getByRole('button', { name: 'Delete Untitled palette' }).click() + await page.getByRole('button', { name: 'Delete palette' }).click() + await expect(page.getByText('No saved palettes')).toBeVisible() +}) + +test('representative Create, Review, and Library states have no serious axe violations', async ({ + page, +}) => { + await createManualPalette(page) + for (const destination of ['create', 'review', 'library'] as const) { + if (destination === 'review') { + await page.getByRole('button', { name: 'Analyze palette' }).click() + await expect(page.getByText('Palette summary')).toBeVisible() + } else { + await page + .getByRole('navigation', { name: 'Primary' }) + .getByRole('button', { + name: destination === 'create' ? 'Create' : 'Library', + }) + .click() + } + const results = await new AxeBuilder({ page }).analyze() + const serious = results.violations.filter((violation) => + ['serious', 'critical'].includes(violation.impact ?? ''), + ) + expect(serious).toEqual([]) + } +}) diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js new file mode 100644 index 0000000..416c06c --- /dev/null +++ b/frontend/eslint.config.js @@ -0,0 +1,41 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' + +export default tseslint.config( + { + ignores: [ + 'coverage/**', + 'dist/**', + 'node_modules/**', + 'playwright-report/**', + 'test-results/**', + ], + }, + js.configs.recommended, + ...tseslint.configs.recommended, + { + files: ['*.js', 'e2e/**/*.mjs'], + languageOptions: { globals: globals.node }, + }, + { + files: ['src/**/*.{ts,tsx}', 'e2e/**/*.ts'], + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + }, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + 'react-hooks/rules-of-hooks': 'error', + 'react-refresh/only-export-components': 'off', + '@typescript-eslint/no-explicit-any': 'off', + }, + }, +) diff --git a/frontend/index.html b/frontend/index.html index 3e3655f..e333467 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,9 +5,10 @@ - diff --git a/frontend/package.json b/frontend/package.json index ebf2321..629e5ef 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,8 +6,15 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", + "format": "prettier --write .", + "format:check": "prettier --check .", + "lint": "eslint . --max-warnings 0", "typecheck": "tsc --noEmit", "test": "vitest run", + "test:coverage": "vitest run --coverage", + "test:e2e": "playwright test --grep-invert @screenshots", + "review:screenshots": "node e2e/capture-screenshots.mjs", + "check": "pnpm format:check && pnpm lint && pnpm typecheck && pnpm test:coverage && pnpm build", "preview": "vite preview" }, "dependencies": { @@ -18,6 +25,9 @@ "zod": "^3.24.2" }, "devDependencies": { + "@axe-core/playwright": "^4.12.1", + "@eslint/js": "^10.0.1", + "@playwright/test": "^1.62.0", "@testing-library/jest-dom": "6.9.1", "@testing-library/react": "^16.2.0", "@types/d3": "^7.4.3", @@ -25,11 +35,19 @@ "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@vitejs/plugin-react": "^4.2.1", + "@vitest/coverage-v8": "^2.1.9", "autoprefixer": "^10.4.16", + "eslint": "^10.8.0", + "eslint-plugin-react-hooks": "^7.1.1", + "eslint-plugin-react-refresh": "^0.5.3", + "fake-indexeddb": "^6.2.5", + "globals": "^17.7.0", "jsdom": "^26.0.0", "postcss": "^8.4.32", + "prettier": "^3.9.6", "tailwindcss": "^3.4.0", "typescript": "^5.3.3", + "typescript-eslint": "^8.65.0", "vite": "^5.0.8", "vitest": "^2.1.9" } diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts new file mode 100644 index 0000000..6defe0a --- /dev/null +++ b/frontend/playwright.config.ts @@ -0,0 +1,61 @@ +import { defineConfig, devices } from '@playwright/test' +import path from 'node:path' + +const repositoryRoot = path.resolve(import.meta.dirname, '..') +const windowsPython = path.join( + repositoryRoot, + 'backend', + '.venv311', + 'Scripts', + 'python.exe', +) +const python = + process.env.COLORCRAFT_PYTHON ?? + (process.platform === 'win32' ? `"${windowsPython}"` : 'python3') +const reuseExistingServer = !process.env.CI + +export default defineConfig({ + testDir: './e2e', + fullyParallel: false, + forbidOnly: Boolean(process.env.CI), + retries: process.env.CI ? 1 : 0, + workers: 1, + reporter: [['list'], ['html', { open: 'never' }]], + timeout: 60_000, + expect: { timeout: 10_000 }, + use: { + baseURL: 'http://127.0.0.1:5174', + trace: 'retain-on-failure', + screenshot: 'only-on-failure', + video: 'retain-on-failure', + }, + webServer: [ + { + command: `${python} -m uvicorn main:app --host 127.0.0.1 --port 4100`, + cwd: path.join(repositoryRoot, 'backend'), + url: 'http://127.0.0.1:4100/ready', + reuseExistingServer, + timeout: 60_000, + stdout: 'pipe', + stderr: 'pipe', + }, + { + command: 'corepack pnpm@9.15.9 dev --host 127.0.0.1 --port 5174', + cwd: path.join(repositoryRoot, 'frontend'), + url: 'http://127.0.0.1:5174', + reuseExistingServer, + timeout: 60_000, + stdout: 'pipe', + stderr: 'pipe', + }, + ], + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + viewport: { width: 1440, height: 900 }, + }, + }, + ], +}) diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index be56282..f74ff7c 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -24,6 +24,15 @@ importers: specifier: ^3.24.2 version: 3.25.76 devDependencies: + '@axe-core/playwright': + specifier: ^4.12.1 + version: 4.12.1(playwright-core@1.62.0) + '@eslint/js': + specifier: ^10.0.1 + version: 10.0.1(eslint@10.8.0(jiti@1.21.7)) + '@playwright/test': + specifier: ^1.62.0 + version: 1.62.0 '@testing-library/jest-dom': specifier: 6.9.1 version: 6.9.1 @@ -45,21 +54,45 @@ importers: '@vitejs/plugin-react': specifier: ^4.2.1 version: 4.7.0(vite@5.4.20(@types/node@22.20.1)) + '@vitest/coverage-v8': + specifier: ^2.1.9 + version: 2.1.9(vitest@2.1.9(@types/node@22.20.1)(jsdom@26.1.0)) autoprefixer: specifier: ^10.4.16 version: 10.4.21(postcss@8.5.6) + eslint: + specifier: ^10.8.0 + version: 10.8.0(jiti@1.21.7) + eslint-plugin-react-hooks: + specifier: ^7.1.1 + version: 7.1.1(eslint@10.8.0(jiti@1.21.7)) + eslint-plugin-react-refresh: + specifier: ^0.5.3 + version: 0.5.3(eslint@10.8.0(jiti@1.21.7)) + fake-indexeddb: + specifier: ^6.2.5 + version: 6.2.5 + globals: + specifier: ^17.7.0 + version: 17.7.0 jsdom: specifier: ^26.0.0 version: 26.1.0 postcss: specifier: ^8.4.32 version: 8.5.6 + prettier: + specifier: ^3.9.6 + version: 3.9.6 tailwindcss: specifier: ^3.4.0 version: 3.4.18 typescript: specifier: ^5.3.3 version: 5.9.3 + typescript-eslint: + specifier: ^8.65.0 + version: 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) vite: specifier: ^5.0.8 version: 5.4.20(@types/node@22.20.1) @@ -76,9 +109,18 @@ packages: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} + '@ampproject/remapping@2.3.0': + resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} + engines: {node: '>=6.0.0'} + '@asamuzakjp/css-color@3.2.0': resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==} + '@axe-core/playwright@4.12.1': + resolution: {integrity: sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==} + peerDependencies: + playwright-core: '>= 1.0.0' + '@babel/code-frame@7.27.1': resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==} engines: {node: '>=6.9.0'} @@ -121,10 +163,18 @@ packages: resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} engines: {node: '>=6.9.0'} + '@babel/helper-string-parser@7.29.7': + resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.27.1': resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==} engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.29.7': + resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-option@7.27.1': resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==} engines: {node: '>=6.9.0'} @@ -138,6 +188,11 @@ packages: engines: {node: '>=6.0.0'} hasBin: true + '@babel/parser@7.29.7': + resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==} + engines: {node: '>=6.0.0'} + hasBin: true + '@babel/plugin-transform-react-jsx-self@7.27.1': resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==} engines: {node: '>=6.9.0'} @@ -166,6 +221,13 @@ packages: resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==} engines: {node: '>=6.9.0'} + '@babel/types@7.29.7': + resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==} + engines: {node: '>=6.9.0'} + + '@bcoe/v8-coverage@0.2.3': + resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} + '@csstools/color-helpers@5.1.0': resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==} engines: {node: '>=18'} @@ -332,10 +394,73 @@ packages: cpu: [x64] os: [win32] + '@eslint-community/eslint-utils@4.10.1': + resolution: {integrity: sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 + + '@eslint-community/regexpp@4.12.2': + resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==} + engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} + + '@eslint/config-array@0.23.5': + resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + '@eslint/config-helpers@0.7.0': + resolution: {integrity: sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + '@eslint/core@1.2.1': + resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + '@eslint/js@10.0.1': + resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + peerDependencies: + eslint: ^10.0.0 + peerDependenciesMeta: + eslint: + optional: true + + '@eslint/object-schema@3.0.5': + resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + '@eslint/plugin-kit@0.7.2': + resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + '@humanfs/core@0.19.2': + resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==} + engines: {node: '>=18.18.0'} + + '@humanfs/node@0.16.8': + resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==} + engines: {node: '>=18.18.0'} + + '@humanfs/types@0.15.0': + resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==} + engines: {node: '>=18.18.0'} + + '@humanwhocodes/module-importer@1.0.1': + resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} + engines: {node: '>=12.22'} + + '@humanwhocodes/retry@0.4.3': + resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==} + engines: {node: '>=18.18'} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} + '@istanbuljs/schema@0.1.6': + resolution: {integrity: sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==} + engines: {node: '>=8'} + '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} @@ -368,6 +493,11 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@playwright/test@1.62.0': + resolution: {integrity: sha512-9zOJ6ZQRAena31MpOH9VSzIz8Ou3YJ/wtY/eQm5T2uhfhG7/U3COrMS8xOtUrZrp9OgdmzEnIYODye3nY1VqzA==} + engines: {node: '>=20'} + hasBin: true + '@rolldown/pluginutils@1.0.0-beta.27': resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==} @@ -612,12 +742,18 @@ packages: '@types/d3@7.4.3': resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==} + '@types/esrecurse@4.3.1': + resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==} + '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} '@types/geojson@7946.0.16': resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==} + '@types/json-schema@7.0.15': + resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + '@types/node@22.20.1': resolution: {integrity: sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==} @@ -632,12 +768,80 @@ packages: '@types/react@18.3.26': resolution: {integrity: sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==} + '@typescript-eslint/eslint-plugin@8.65.0': + resolution: {integrity: sha512-IEgob78X12rHpUmtcwFsXhZdVGJtwTVP8FiCLZkR6GlYVrl2PcuB+KhCE5BlVC/eQpQnu8WXRtkHZuPar+gCRA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + '@typescript-eslint/parser': ^8.65.0 + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/parser@8.65.0': + resolution: {integrity: sha512-CZ4nMxWwgu1HEEFNkeaCptra9QCtkmKdgf3sWh1rl1trIhmxLilgTV4cwcbQ4wemnT4sWQN8CaKOmdYx+g2gMA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/project-service@8.65.0': + resolution: {integrity: sha512-SxnPhbTsGahizDgbu7oqFH/xVtzIqMd/s+WtnSxNxJZJpLbdT5IPdzg8EZxO3+PoKahXmwJLeNQOpKJb3/bi7Q==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/scope-manager@8.65.0': + resolution: {integrity: sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/tsconfig-utils@8.65.0': + resolution: {integrity: sha512-j6GzGqCiRdA7Qhur2VVmKZAkBLfnHFQfx4TaJGL9RMveZqCo48jSHHO0DTgizEnGhtWnqmbtCUSrqSkdiY/0Hg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/type-utils@8.65.0': + resolution: {integrity: sha512-YjaZ7PRI5qY7ax2L3PbvX0rRyGtipAReCWs0mhhDBHjH/vl0g0BonaGXrKdKpMbIIsMIwDgbk/xzkBTyAltS5g==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/types@8.65.0': + resolution: {integrity: sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/typescript-estree@8.65.0': + resolution: {integrity: sha512-JboAE2swaYt4tb1fHhHTABE2K+OLy09XfcTbhnk4Pw96f9dd2e9iYsJ28gBggHlo5z5x1rkyWvcPoTuNTd4oGg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/utils@8.65.0': + resolution: {integrity: sha512-gXiwIHsYreboxeJucHKPvgwl7dXt50mF8s1/c00cP/WoVTyWKFdtfhRWwZiXYFU5H2O8vVoSLNrexFZjYS/SGA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.1.0' + + '@typescript-eslint/visitor-keys@8.65.0': + resolution: {integrity: sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@vitejs/plugin-react@4.7.0': resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + '@vitest/coverage-v8@2.1.9': + resolution: {integrity: sha512-Z2cOr0ksM00MpEfyVE8KXIYPEcBFxdbLSs56L8PO0QQMxt/6bDj45uQfxoc96v05KW3clk7vvgP0qfDit9DmfQ==} + peerDependencies: + '@vitest/browser': 2.1.9 + vitest: 2.1.9 + peerDependenciesMeta: + '@vitest/browser': + optional: true + '@vitest/expect@2.1.9': resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==} @@ -667,10 +871,23 @@ packages: '@vitest/utils@2.1.9': resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==} + acorn-jsx@5.3.2: + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + acorn@8.17.0: + resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==} + engines: {node: '>=0.4.0'} + hasBin: true + agent-base@7.1.4: resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==} engines: {node: '>= 14'} + ajv@6.15.0: + resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==} + ansi-regex@5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -719,9 +936,17 @@ packages: peerDependencies: postcss: ^8.1.0 + axe-core@4.12.1: + resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==} + engines: {node: '>=4'} + balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + balanced-match@4.0.4: + resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} + engines: {node: 18 || 20 || >=22} + baseline-browser-mapping@2.8.17: resolution: {integrity: sha512-j5zJcx6golJYTG6c05LUZ3Z8Gi+M62zRT/ycz4Xq4iCOdpcxwg7ngEYD4KA0eWZC7U17qh/Smq8bYbACJ0ipBA==} hasBin: true @@ -733,6 +958,10 @@ packages: brace-expansion@2.0.2: resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==} + brace-expansion@5.0.8: + resolution: {integrity: sha512-JZyDyq3D4AUifKTPOB7DELf6XsB3WdPuNxCtob1vFXPsSXhdAiHBWJ/tJ8HAc9aH84BK+5JFZLNkJKx3G9kzQg==} + engines: {node: 20 || >=22} + braces@3.0.3: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} @@ -949,6 +1178,9 @@ packages: resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==} engines: {node: '>=6'} + deep-is@0.1.4: + resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + delaunator@5.0.1: resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==} @@ -996,24 +1228,118 @@ packages: resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} engines: {node: '>=6'} + escape-string-regexp@4.0.0: + resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} + engines: {node: '>=10'} + + eslint-plugin-react-hooks@7.1.1: + resolution: {integrity: sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==} + engines: {node: '>=18'} + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0 + + eslint-plugin-react-refresh@0.5.3: + resolution: {integrity: sha512-5EMmLCV98Pi4o/f/3DP/v/tNqLHMIc9I8LKClNDWhZ9JTho89/kQcitCXQBMG7sAfVRK0Ie3T2EDOzp1YXYiVA==} + peerDependencies: + eslint: ^9 || ^10 + + eslint-scope@9.1.2: + resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + eslint-visitor-keys@3.4.3: + resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + + eslint-visitor-keys@5.0.1: + resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + eslint@10.8.0: + resolution: {integrity: sha512-nuKKvN+oIBO0koN7Tm7dlkmnkc21mtt0QJLwAKzjLq14y6lRTdVG36MZHJ8eQHwdJMwZbQNMlPOYedMq/oVJvQ==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + hasBin: true + peerDependencies: + jiti: '*' + peerDependenciesMeta: + jiti: + optional: true + + espree@11.2.0: + resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + esquery@1.7.0: + resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==} + engines: {node: '>=0.10'} + + esrecurse@4.3.0: + resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} + engines: {node: '>=4.0'} + + estraverse@5.3.0: + resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} + engines: {node: '>=4.0'} + estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + esutils@2.0.3: + resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} + engines: {node: '>=0.10.0'} + expect-type@1.4.0: resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==} engines: {node: '>=12.0.0'} + fake-indexeddb@6.2.5: + resolution: {integrity: sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==} + engines: {node: '>=18'} + + fast-deep-equal@3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-glob@3.3.3: resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==} engines: {node: '>=8.6.0'} + fast-json-stable-stringify@2.1.0: + resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} + + fast-levenshtein@2.0.6: + resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} + fastq@1.19.1: resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==} + fdir@6.5.0: + resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} + engines: {node: '>=12.0.0'} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + + file-entry-cache@8.0.0: + resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==} + engines: {node: '>=16.0.0'} + fill-range@7.1.1: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} + find-up@5.0.0: + resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} + engines: {node: '>=10'} + + flat-cache@4.0.1: + resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} + engines: {node: '>=16'} + + flatted@3.4.3: + resolution: {integrity: sha512-/zipXxyO6rGvuNGDiULY9MvEGSkb2gaG4GGH4ygMi0ZZzyMHdUZBmntJmx5x1G2VuPytCwGN4xsJP6cw+sK+vQ==} + foreground-child@3.3.1: resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==} engines: {node: '>=14'} @@ -1021,6 +1347,11 @@ packages: fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + fsevents@2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -1045,14 +1376,31 @@ packages: resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} hasBin: true + globals@17.7.0: + resolution: {integrity: sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==} + engines: {node: '>=18'} + + has-flag@4.0.0: + resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} + engines: {node: '>=8'} + hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + hermes-estree@0.25.1: + resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==} + + hermes-parser@0.25.1: + resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==} + html-encoding-sniffer@4.0.0: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} + html-escaper@2.0.2: + resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} + http-proxy-agent@7.0.2: resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} engines: {node: '>= 14'} @@ -1065,6 +1413,18 @@ packages: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} engines: {node: '>=0.10.0'} + ignore@5.3.2: + resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} + engines: {node: '>= 4'} + + ignore@7.0.6: + resolution: {integrity: sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==} + engines: {node: '>= 4'} + + imurmurhash@0.1.4: + resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} + engines: {node: '>=0.8.19'} + indent-string@4.0.0: resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} engines: {node: '>=8'} @@ -1103,6 +1463,22 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + istanbul-lib-coverage@3.2.2: + resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==} + engines: {node: '>=8'} + + istanbul-lib-report@3.0.1: + resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==} + engines: {node: '>=10'} + + istanbul-lib-source-maps@5.0.6: + resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==} + engines: {node: '>=10'} + + istanbul-reports@3.2.0: + resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==} + engines: {node: '>=8'} + jackspeak@3.4.3: resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} @@ -1127,11 +1503,27 @@ packages: engines: {node: '>=6'} hasBin: true + json-buffer@3.0.1: + resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} + + json-schema-traverse@0.4.1: + resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} + + json-stable-stringify-without-jsonify@1.0.1: + resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} hasBin: true + keyv@4.5.4: + resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + + levn@0.4.1: + resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} + engines: {node: '>= 0.8.0'} + lilconfig@3.1.3: resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} engines: {node: '>=14'} @@ -1139,6 +1531,10 @@ packages: lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} + locate-path@6.0.0: + resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} + engines: {node: '>=10'} + loose-envify@1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true @@ -1164,6 +1560,13 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + magicast@0.3.5: + resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==} + + make-dir@4.0.0: + resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} + engines: {node: '>=10'} + merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -1176,6 +1579,10 @@ packages: resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} engines: {node: '>=4'} + minimatch@10.2.5: + resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==} + engines: {node: 18 || 20 || >=22} + minimatch@9.0.5: resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} engines: {node: '>=16 || 14 >=14.17'} @@ -1195,6 +1602,9 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + natural-compare@1.4.0: + resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} + node-releases@2.0.25: resolution: {integrity: sha512-4auku8B/vw5psvTiiN9j1dAOsXvMoGqJuKJcR+dTdqiXEK20mMTk1UEo3HS16LeGQsVG6+qKTPM9u/qQ2LqATA==} @@ -1217,12 +1627,28 @@ packages: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} + optionator@0.9.4: + resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} + engines: {node: '>= 0.8.0'} + + p-limit@3.1.0: + resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} + engines: {node: '>=10'} + + p-locate@5.0.0: + resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} + engines: {node: '>=10'} + package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} parse5@7.3.0: resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + path-exists@4.0.0: + resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} + engines: {node: '>=8'} + path-key@3.1.1: resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} engines: {node: '>=8'} @@ -1248,6 +1674,10 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} + picomatch@4.0.5: + resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==} + engines: {node: '>=12'} + pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} engines: {node: '>=0.10.0'} @@ -1256,6 +1686,16 @@ packages: resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==} engines: {node: '>= 6'} + playwright-core@1.62.0: + resolution: {integrity: sha512-nsNRyq0r2zsG8AcRHWknc9QRA5XCueC7gWMrs+Gx2tlZn9hcl8zudfh00lhJPY1DE7NmZ6bDsT9g2yey8mXljA==} + engines: {node: '>=20'} + hasBin: true + + playwright@1.62.0: + resolution: {integrity: sha512-Z14dG305dgaLu6foB1TXQagFiW8JfSUIUaUuPaKQ6NtBPKF1P/qXcqfh6c6K/icPqdy37JmjbiBXf6JNg6Sylw==} + engines: {node: '>=20'} + hasBin: true + postcss-import@15.1.0: resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -1303,6 +1743,15 @@ packages: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} + prelude-ls@1.2.1: + resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} + engines: {node: '>= 0.8.0'} + + prettier@3.9.6: + resolution: {integrity: sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==} + engines: {node: '>=14'} + hasBin: true + pretty-format@27.5.1: resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} @@ -1381,6 +1830,11 @@ packages: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true + semver@7.8.5: + resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==} + engines: {node: '>=10'} + hasBin: true + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -1431,6 +1885,10 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + supports-color@7.2.0: + resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} + engines: {node: '>=8'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -1443,6 +1901,10 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + test-exclude@7.0.2: + resolution: {integrity: sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw==} + engines: {node: '>=18'} + thenify-all@1.6.0: resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} engines: {node: '>=0.8'} @@ -1456,6 +1918,10 @@ packages: tinyexec@0.3.2: resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + tinyglobby@0.2.17: + resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==} + engines: {node: '>=12.0.0'} + tinypool@1.1.1: resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==} engines: {node: ^18.0.0 || >=20.0.0} @@ -1487,9 +1953,26 @@ packages: resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==} engines: {node: '>=18'} + ts-api-utils@2.5.0: + resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==} + engines: {node: '>=18.12'} + peerDependencies: + typescript: '>=4.8.4' + ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + type-check@0.4.0: + resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} + engines: {node: '>= 0.8.0'} + + typescript-eslint@8.65.0: + resolution: {integrity: sha512-/ggrHAwyjENDusvyxbuqxAC2dTnZg/Z8F+fgQtYIz+L6n/9HfSlEZcFGV/NsMNa6CkGk0xUjUAFwC0vHOflvIA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.1.0' + typescript@5.9.3: resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==} engines: {node: '>=14.17'} @@ -1504,6 +1987,9 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + uri-js@4.4.1: + resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -1599,6 +2085,10 @@ packages: engines: {node: '>=8'} hasBin: true + word-wrap@1.2.5: + resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} + engines: {node: '>=0.10.0'} + wrap-ansi@7.0.0: resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} engines: {node: '>=10'} @@ -1629,6 +2119,16 @@ packages: yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + yocto-queue@0.1.0: + resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} + engines: {node: '>=10'} + + zod-validation-error@4.0.2: + resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + zod: ^3.25.0 || ^4.0.0 + zod@3.25.76: resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==} @@ -1638,6 +2138,11 @@ snapshots: '@alloc/quick-lru@5.2.0': {} + '@ampproject/remapping@2.3.0': + dependencies: + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.31 + '@asamuzakjp/css-color@3.2.0': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) @@ -1646,6 +2151,11 @@ snapshots: '@csstools/css-tokenizer': 3.0.4 lru-cache: 10.4.3 + '@axe-core/playwright@4.12.1(playwright-core@1.62.0)': + dependencies: + axe-core: 4.12.1 + playwright-core: 1.62.0 + '@babel/code-frame@7.27.1': dependencies: '@babel/helper-validator-identifier': 7.27.1 @@ -1712,8 +2222,12 @@ snapshots: '@babel/helper-string-parser@7.27.1': {} + '@babel/helper-string-parser@7.29.7': {} + '@babel/helper-validator-identifier@7.27.1': {} + '@babel/helper-validator-identifier@7.29.7': {} + '@babel/helper-validator-option@7.27.1': {} '@babel/helpers@7.28.4': @@ -1725,6 +2239,10 @@ snapshots: dependencies: '@babel/types': 7.28.4 + '@babel/parser@7.29.7': + dependencies: + '@babel/types': 7.29.7 + '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.4)': dependencies: '@babel/core': 7.28.4 @@ -1760,6 +2278,13 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 + '@babel/types@7.29.7': + dependencies: + '@babel/helper-string-parser': 7.29.7 + '@babel/helper-validator-identifier': 7.29.7 + + '@bcoe/v8-coverage@0.2.3': {} + '@csstools/color-helpers@5.1.0': {} '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': @@ -1849,6 +2374,56 @@ snapshots: '@esbuild/win32-x64@0.21.5': optional: true + '@eslint-community/eslint-utils@4.10.1(eslint@10.8.0(jiti@1.21.7))': + dependencies: + eslint: 10.8.0(jiti@1.21.7) + eslint-visitor-keys: 3.4.3 + + '@eslint-community/regexpp@4.12.2': {} + + '@eslint/config-array@0.23.5': + dependencies: + '@eslint/object-schema': 3.0.5 + debug: 4.4.3 + minimatch: 10.2.5 + transitivePeerDependencies: + - supports-color + + '@eslint/config-helpers@0.7.0': + dependencies: + '@eslint/core': 1.2.1 + + '@eslint/core@1.2.1': + dependencies: + '@types/json-schema': 7.0.15 + + '@eslint/js@10.0.1(eslint@10.8.0(jiti@1.21.7))': + optionalDependencies: + eslint: 10.8.0(jiti@1.21.7) + + '@eslint/object-schema@3.0.5': {} + + '@eslint/plugin-kit@0.7.2': + dependencies: + '@eslint/core': 1.2.1 + levn: 0.4.1 + + '@humanfs/core@0.19.2': + dependencies: + '@humanfs/types': 0.15.0 + + '@humanfs/node@0.16.8': + dependencies: + '@humanfs/core': 0.19.2 + '@humanfs/types': 0.15.0 + '@humanwhocodes/retry': 0.4.3 + + '@humanfs/types@0.15.0': {} + + '@humanwhocodes/module-importer@1.0.1': {} + + '@humanwhocodes/retry@0.4.3': {} + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -1858,6 +2433,8 @@ snapshots: wrap-ansi: 8.1.0 wrap-ansi-cjs: wrap-ansi@7.0.0 + '@istanbuljs/schema@0.1.6': {} + '@jridgewell/gen-mapping@0.3.13': dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -1892,6 +2469,10 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@playwright/test@1.62.0': + dependencies: + playwright: 1.62.0 + '@rolldown/pluginutils@1.0.0-beta.27': {} '@rollup/rollup-android-arm-eabi@4.52.4': @@ -2130,10 +2711,14 @@ snapshots: '@types/d3-transition': 3.0.9 '@types/d3-zoom': 3.0.8 + '@types/esrecurse@4.3.1': {} + '@types/estree@1.0.8': {} '@types/geojson@7946.0.16': {} + '@types/json-schema@7.0.15': {} + '@types/node@22.20.1': dependencies: undici-types: 6.21.0 @@ -2149,6 +2734,97 @@ snapshots: '@types/prop-types': 15.7.15 csstype: 3.1.3 + '@typescript-eslint/eslint-plugin@8.65.0(@typescript-eslint/parser@8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3))(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3)': + dependencies: + '@eslint-community/regexpp': 4.12.2 + '@typescript-eslint/parser': 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/scope-manager': 8.65.0 + '@typescript-eslint/type-utils': 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/utils': 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/visitor-keys': 8.65.0 + eslint: 10.8.0(jiti@1.21.7) + ignore: 7.0.6 + natural-compare: 1.4.0 + ts-api-utils: 2.5.0(typescript@5.9.3) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/parser@8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3)': + dependencies: + '@typescript-eslint/scope-manager': 8.65.0 + '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/typescript-estree': 8.65.0(typescript@5.9.3) + '@typescript-eslint/visitor-keys': 8.65.0 + debug: 4.4.3 + eslint: 10.8.0(jiti@1.21.7) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/project-service@8.65.0(typescript@5.9.3)': + dependencies: + '@typescript-eslint/tsconfig-utils': 8.65.0(typescript@5.9.3) + '@typescript-eslint/types': 8.65.0 + debug: 4.4.3 + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/scope-manager@8.65.0': + dependencies: + '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/visitor-keys': 8.65.0 + + '@typescript-eslint/tsconfig-utils@8.65.0(typescript@5.9.3)': + dependencies: + typescript: 5.9.3 + + '@typescript-eslint/type-utils@8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3)': + dependencies: + '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/typescript-estree': 8.65.0(typescript@5.9.3) + '@typescript-eslint/utils': 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + debug: 4.4.3 + eslint: 10.8.0(jiti@1.21.7) + ts-api-utils: 2.5.0(typescript@5.9.3) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/types@8.65.0': {} + + '@typescript-eslint/typescript-estree@8.65.0(typescript@5.9.3)': + dependencies: + '@typescript-eslint/project-service': 8.65.0(typescript@5.9.3) + '@typescript-eslint/tsconfig-utils': 8.65.0(typescript@5.9.3) + '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/visitor-keys': 8.65.0 + debug: 4.4.3 + minimatch: 10.2.5 + semver: 7.8.5 + tinyglobby: 0.2.17 + ts-api-utils: 2.5.0(typescript@5.9.3) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/utils@8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3)': + dependencies: + '@eslint-community/eslint-utils': 4.10.1(eslint@10.8.0(jiti@1.21.7)) + '@typescript-eslint/scope-manager': 8.65.0 + '@typescript-eslint/types': 8.65.0 + '@typescript-eslint/typescript-estree': 8.65.0(typescript@5.9.3) + eslint: 10.8.0(jiti@1.21.7) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/visitor-keys@8.65.0': + dependencies: + '@typescript-eslint/types': 8.65.0 + eslint-visitor-keys: 5.0.1 + '@vitejs/plugin-react@4.7.0(vite@5.4.20(@types/node@22.20.1))': dependencies: '@babel/core': 7.28.4 @@ -2161,6 +2837,24 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@22.20.1)(jsdom@26.1.0))': + dependencies: + '@ampproject/remapping': 2.3.0 + '@bcoe/v8-coverage': 0.2.3 + debug: 4.4.3 + istanbul-lib-coverage: 3.2.2 + istanbul-lib-report: 3.0.1 + istanbul-lib-source-maps: 5.0.6 + istanbul-reports: 3.2.0 + magic-string: 0.30.21 + magicast: 0.3.5 + std-env: 3.10.0 + test-exclude: 7.0.2 + tinyrainbow: 1.2.0 + vitest: 2.1.9(@types/node@22.20.1)(jsdom@26.1.0) + transitivePeerDependencies: + - supports-color + '@vitest/expect@2.1.9': dependencies: '@vitest/spy': 2.1.9 @@ -2201,8 +2895,21 @@ snapshots: loupe: 3.2.1 tinyrainbow: 1.2.0 + acorn-jsx@5.3.2(acorn@8.17.0): + dependencies: + acorn: 8.17.0 + + acorn@8.17.0: {} + agent-base@7.1.4: {} + ajv@6.15.0: + dependencies: + fast-deep-equal: 3.1.3 + fast-json-stable-stringify: 2.1.0 + json-schema-traverse: 0.4.1 + uri-js: 4.4.1 + ansi-regex@5.0.1: {} ansi-regex@6.2.2: {} @@ -2242,8 +2949,12 @@ snapshots: postcss: 8.5.6 postcss-value-parser: 4.2.0 + axe-core@4.12.1: {} + balanced-match@1.0.2: {} + balanced-match@4.0.4: {} + baseline-browser-mapping@2.8.17: {} binary-extensions@2.3.0: {} @@ -2252,6 +2963,10 @@ snapshots: dependencies: balanced-match: 1.0.2 + brace-expansion@5.0.8: + dependencies: + balanced-match: 4.0.4 + braces@3.0.3: dependencies: fill-range: 7.1.1 @@ -2486,6 +3201,8 @@ snapshots: deep-eql@5.0.2: {} + deep-is@0.1.4: {} + delaunator@5.0.1: dependencies: robust-predicates: 3.0.2 @@ -2540,12 +3257,99 @@ snapshots: escalade@3.2.0: {} + escape-string-regexp@4.0.0: {} + + eslint-plugin-react-hooks@7.1.1(eslint@10.8.0(jiti@1.21.7)): + dependencies: + '@babel/core': 7.28.4 + '@babel/parser': 7.28.4 + eslint: 10.8.0(jiti@1.21.7) + hermes-parser: 0.25.1 + zod: 3.25.76 + zod-validation-error: 4.0.2(zod@3.25.76) + transitivePeerDependencies: + - supports-color + + eslint-plugin-react-refresh@0.5.3(eslint@10.8.0(jiti@1.21.7)): + dependencies: + eslint: 10.8.0(jiti@1.21.7) + + eslint-scope@9.1.2: + dependencies: + '@types/esrecurse': 4.3.1 + '@types/estree': 1.0.8 + esrecurse: 4.3.0 + estraverse: 5.3.0 + + eslint-visitor-keys@3.4.3: {} + + eslint-visitor-keys@5.0.1: {} + + eslint@10.8.0(jiti@1.21.7): + dependencies: + '@eslint-community/eslint-utils': 4.10.1(eslint@10.8.0(jiti@1.21.7)) + '@eslint-community/regexpp': 4.12.2 + '@eslint/config-array': 0.23.5 + '@eslint/config-helpers': 0.7.0 + '@eslint/core': 1.2.1 + '@eslint/plugin-kit': 0.7.2 + '@humanfs/node': 0.16.8 + '@humanwhocodes/module-importer': 1.0.1 + '@humanwhocodes/retry': 0.4.3 + '@types/estree': 1.0.8 + ajv: 6.15.0 + cross-spawn: 7.0.6 + debug: 4.4.3 + escape-string-regexp: 4.0.0 + eslint-scope: 9.1.2 + eslint-visitor-keys: 5.0.1 + espree: 11.2.0 + esquery: 1.7.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 8.0.0 + find-up: 5.0.0 + glob-parent: 6.0.2 + ignore: 5.3.2 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + json-stable-stringify-without-jsonify: 1.0.1 + minimatch: 10.2.5 + natural-compare: 1.4.0 + optionator: 0.9.4 + optionalDependencies: + jiti: 1.21.7 + transitivePeerDependencies: + - supports-color + + espree@11.2.0: + dependencies: + acorn: 8.17.0 + acorn-jsx: 5.3.2(acorn@8.17.0) + eslint-visitor-keys: 5.0.1 + + esquery@1.7.0: + dependencies: + estraverse: 5.3.0 + + esrecurse@4.3.0: + dependencies: + estraverse: 5.3.0 + + estraverse@5.3.0: {} + estree-walker@3.0.3: dependencies: '@types/estree': 1.0.8 + esutils@2.0.3: {} + expect-type@1.4.0: {} + fake-indexeddb@6.2.5: {} + + fast-deep-equal@3.1.3: {} + fast-glob@3.3.3: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -2554,14 +3358,38 @@ snapshots: merge2: 1.4.1 micromatch: 4.0.8 + fast-json-stable-stringify@2.1.0: {} + + fast-levenshtein@2.0.6: {} + fastq@1.19.1: dependencies: reusify: 1.1.0 + fdir@6.5.0(picomatch@4.0.5): + optionalDependencies: + picomatch: 4.0.5 + + file-entry-cache@8.0.0: + dependencies: + flat-cache: 4.0.1 + fill-range@7.1.1: dependencies: to-regex-range: 5.0.1 + find-up@5.0.0: + dependencies: + locate-path: 6.0.0 + path-exists: 4.0.0 + + flat-cache@4.0.1: + dependencies: + flatted: 3.4.3 + keyv: 4.5.4 + + flatted@3.4.3: {} + foreground-child@3.3.1: dependencies: cross-spawn: 7.0.6 @@ -2569,6 +3397,9 @@ snapshots: fraction.js@4.3.7: {} + fsevents@2.3.2: + optional: true + fsevents@2.3.3: optional: true @@ -2593,14 +3424,26 @@ snapshots: package-json-from-dist: 1.0.1 path-scurry: 1.11.1 + globals@17.7.0: {} + + has-flag@4.0.0: {} + hasown@2.0.2: dependencies: function-bind: 1.1.2 + hermes-estree@0.25.1: {} + + hermes-parser@0.25.1: + dependencies: + hermes-estree: 0.25.1 + html-encoding-sniffer@4.0.0: dependencies: whatwg-encoding: 3.1.1 + html-escaper@2.0.2: {} + http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.4 @@ -2619,6 +3462,12 @@ snapshots: dependencies: safer-buffer: 2.1.2 + ignore@5.3.2: {} + + ignore@7.0.6: {} + + imurmurhash@0.1.4: {} + indent-string@4.0.0: {} internmap@2.0.3: {} @@ -2645,6 +3494,27 @@ snapshots: isexe@2.0.0: {} + istanbul-lib-coverage@3.2.2: {} + + istanbul-lib-report@3.0.1: + dependencies: + istanbul-lib-coverage: 3.2.2 + make-dir: 4.0.0 + supports-color: 7.2.0 + + istanbul-lib-source-maps@5.0.6: + dependencies: + '@jridgewell/trace-mapping': 0.3.31 + debug: 4.4.3 + istanbul-lib-coverage: 3.2.2 + transitivePeerDependencies: + - supports-color + + istanbul-reports@3.2.0: + dependencies: + html-escaper: 2.0.2 + istanbul-lib-report: 3.0.1 + jackspeak@3.4.3: dependencies: '@isaacs/cliui': 8.0.2 @@ -2684,12 +3554,31 @@ snapshots: jsesc@3.1.0: {} + json-buffer@3.0.1: {} + + json-schema-traverse@0.4.1: {} + + json-stable-stringify-without-jsonify@1.0.1: {} + json5@2.2.3: {} + keyv@4.5.4: + dependencies: + json-buffer: 3.0.1 + + levn@0.4.1: + dependencies: + prelude-ls: 1.2.1 + type-check: 0.4.0 + lilconfig@3.1.3: {} lines-and-columns@1.2.4: {} + locate-path@6.0.0: + dependencies: + p-locate: 5.0.0 + loose-envify@1.4.0: dependencies: js-tokens: 4.0.0 @@ -2712,6 +3601,16 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + magicast@0.3.5: + dependencies: + '@babel/parser': 7.29.7 + '@babel/types': 7.29.7 + source-map-js: 1.2.1 + + make-dir@4.0.0: + dependencies: + semver: 7.8.5 + merge2@1.4.1: {} micromatch@4.0.8: @@ -2721,6 +3620,10 @@ snapshots: min-indent@1.0.1: {} + minimatch@10.2.5: + dependencies: + brace-expansion: 5.0.8 + minimatch@9.0.5: dependencies: brace-expansion: 2.0.2 @@ -2737,6 +3640,8 @@ snapshots: nanoid@3.3.11: {} + natural-compare@1.4.0: {} + node-releases@2.0.25: {} normalize-path@3.0.0: {} @@ -2749,12 +3654,31 @@ snapshots: object-hash@3.0.0: {} + optionator@0.9.4: + dependencies: + deep-is: 0.1.4 + fast-levenshtein: 2.0.6 + levn: 0.4.1 + prelude-ls: 1.2.1 + type-check: 0.4.0 + word-wrap: 1.2.5 + + p-limit@3.1.0: + dependencies: + yocto-queue: 0.1.0 + + p-locate@5.0.0: + dependencies: + p-limit: 3.1.0 + package-json-from-dist@1.0.1: {} parse5@7.3.0: dependencies: entities: 6.0.1 + path-exists@4.0.0: {} + path-key@3.1.1: {} path-parse@1.0.7: {} @@ -2772,10 +3696,20 @@ snapshots: picomatch@2.3.1: {} + picomatch@4.0.5: {} + pify@2.3.0: {} pirates@4.0.7: {} + playwright-core@1.62.0: {} + + playwright@1.62.0: + dependencies: + playwright-core: 1.62.0 + optionalDependencies: + fsevents: 2.3.2 + postcss-import@15.1.0(postcss@8.5.6): dependencies: postcss: 8.5.6 @@ -2813,6 +3747,10 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 + prelude-ls@1.2.1: {} + + prettier@3.9.6: {} + pretty-format@27.5.1: dependencies: ansi-regex: 5.0.1 @@ -2908,6 +3846,8 @@ snapshots: semver@6.3.1: {} + semver@7.8.5: {} + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -2958,6 +3898,10 @@ snapshots: pirates: 4.0.7 ts-interface-checker: 0.1.13 + supports-color@7.2.0: + dependencies: + has-flag: 4.0.0 + supports-preserve-symlinks-flag@1.0.0: {} symbol-tree@3.2.4: {} @@ -2990,6 +3934,12 @@ snapshots: - tsx - yaml + test-exclude@7.0.2: + dependencies: + '@istanbuljs/schema': 0.1.6 + glob: 10.4.5 + minimatch: 10.2.5 + thenify-all@1.6.0: dependencies: thenify: 3.3.1 @@ -3002,6 +3952,11 @@ snapshots: tinyexec@0.3.2: {} + tinyglobby@0.2.17: + dependencies: + fdir: 6.5.0(picomatch@4.0.5) + picomatch: 4.0.5 + tinypool@1.1.1: {} tinyrainbow@1.2.0: {} @@ -3026,8 +3981,27 @@ snapshots: dependencies: punycode: 2.3.1 + ts-api-utils@2.5.0(typescript@5.9.3): + dependencies: + typescript: 5.9.3 + ts-interface-checker@0.1.13: {} + type-check@0.4.0: + dependencies: + prelude-ls: 1.2.1 + + typescript-eslint@8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3): + dependencies: + '@typescript-eslint/eslint-plugin': 8.65.0(@typescript-eslint/parser@8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3))(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/parser': 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/typescript-estree': 8.65.0(typescript@5.9.3) + '@typescript-eslint/utils': 8.65.0(eslint@10.8.0(jiti@1.21.7))(typescript@5.9.3) + eslint: 10.8.0(jiti@1.21.7) + typescript: 5.9.3 + transitivePeerDependencies: + - supports-color + typescript@5.9.3: {} undici-types@6.21.0: {} @@ -3038,6 +4012,10 @@ snapshots: escalade: 3.2.0 picocolors: 1.1.1 + uri-js@4.4.1: + dependencies: + punycode: 2.3.1 + util-deprecate@1.0.2: {} vite-node@2.1.9(@types/node@22.20.1): @@ -3129,6 +4107,8 @@ snapshots: siginfo: 2.0.0 stackback: 0.0.2 + word-wrap@1.2.5: {} + wrap-ansi@7.0.0: dependencies: ansi-styles: 4.3.0 @@ -3149,4 +4129,10 @@ snapshots: yallist@3.1.1: {} + yocto-queue@0.1.0: {} + + zod-validation-error@4.0.2(zod@3.25.76): + dependencies: + zod: 3.25.76 + zod@3.25.76: {} diff --git a/frontend/pnpm-workspace.yaml b/frontend/pnpm-workspace.yaml index 9af1dfc..7f5dfdd 100644 --- a/frontend/pnpm-workspace.yaml +++ b/frontend/pnpm-workspace.yaml @@ -1,5 +1,5 @@ packages: - - "." + - '.' allowBuilds: esbuild: true diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index b4a6220..2e7af2b 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -4,4 +4,3 @@ export default { autoprefixer: {}, }, } - diff --git a/frontend/public/app-manifest.json b/frontend/public/app-manifest.json new file mode 100644 index 0000000..092843c --- /dev/null +++ b/frontend/public/app-manifest.json @@ -0,0 +1,25 @@ +{ + "schemaVersion": 1, + "id": "colorcraft", + "name": "ColorCraft", + "descriptor": "Local color utility", + "version": "1.0.0", + "icon": "/colorcraft-mark.svg", + "defaults": { + "webAddress": "http://127.0.0.1:5174", + "apiAddress": "http://127.0.0.1:4100" + }, + "endpoints": { + "metadata": "/metadata", + "health": "/health", + "readiness": "/ready" + }, + "capabilities": [ + "image-color-extraction", + "palette-editing", + "harmony-analysis", + "contrast-review", + "palette-export", + "local-palette-library" + ] +} diff --git a/frontend/public/colorcraft-mark.svg b/frontend/public/colorcraft-mark.svg new file mode 100644 index 0000000..c9cf12e --- /dev/null +++ b/frontend/public/colorcraft-mark.svg @@ -0,0 +1,7 @@ + + ColorCraft + + + + + diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx index 055c86e..4ec035c 100644 --- a/frontend/src/App.test.tsx +++ b/frontend/src/App.test.tsx @@ -1,7 +1,15 @@ -import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react' +import { + act, + fireEvent, + render, + screen, + waitFor, + within, +} from '@testing-library/react' import { beforeEach, describe, expect, it, vi } from 'vitest' import { analyzeColors, extractColors, suggestColors } from './api/client' import { analysis, red } from './test/fixtures' +import { savePalette } from './persistence' import App from './App' vi.mock('./api/client', () => ({ @@ -18,12 +26,15 @@ describe('ColorCraft workspace', () => { beforeEach(() => { window.history.replaceState({}, '', '/?view=create') localStorage.clear() - vi.stubGlobal('matchMedia', vi.fn(() => ({ - matches: false, - media: '(prefers-color-scheme: dark)', - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - }))) + vi.stubGlobal( + 'matchMedia', + vi.fn(() => ({ + matches: false, + media: '(prefers-color-scheme: dark)', + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + })), + ) Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: vi.fn(() => 'blob:source'), @@ -36,30 +47,47 @@ describe('ColorCraft workspace', () => { vi.mocked(analyzeColors).mockReset() vi.mocked(suggestColors).mockReset() vi.mocked(analyzeColors).mockResolvedValue({ success: true, analysis }) - vi.mocked(suggestColors).mockResolvedValue({ success: true, suggestions: [] }) + vi.mocked(suggestColors).mockResolvedValue({ + success: true, + suggestions: [], + }) }) it('enables views from real palette prerequisites and writes URL state', async () => { render() - expect(within(desktopNavigation()).getByRole('button', { name: 'Review' })).toBeDisabled() - expect(within(desktopNavigation()).getByRole('button', { name: 'Export' })).toBeDisabled() + expect( + within(desktopNavigation()).getByRole('button', { name: 'Review' }), + ).toBeDisabled() + expect( + within(desktopNavigation()).getByRole('button', { name: 'Export' }), + ).toBeDisabled() fireEvent.click(screen.getByRole('button', { name: 'Start manually' })) - expect(within(desktopNavigation()).getByRole('button', { name: 'Export' })).toBeEnabled() - expect(within(desktopNavigation()).getByRole('button', { name: 'Review' })).toBeDisabled() + expect( + within(desktopNavigation()).getByRole('button', { name: 'Export' }), + ).toBeEnabled() + expect( + within(desktopNavigation()).getByRole('button', { name: 'Review' }), + ).toBeDisabled() fireEvent.click(screen.getByRole('button', { name: 'Add color' })) - const review = within(desktopNavigation()).getByRole('button', { name: 'Review' }) + const review = within(desktopNavigation()).getByRole('button', { + name: 'Review', + }) expect(review).toBeEnabled() fireEvent.click(review) expect(window.location.search).toBe('?view=review&review=overview') expect(screen.getByText('Analyze this palette')).toBeInTheDocument() - fireEvent.click(within(desktopNavigation()).getByRole('button', { name: 'Create' })) + fireEvent.click( + within(desktopNavigation()).getByRole('button', { name: 'Create' }), + ) expect(screen.getByText('Palette')).toBeInTheDocument() act(() => window.history.back()) - await waitFor(() => expect(window.location.search).toBe('?view=review&review=overview')) + await waitFor(() => + expect(window.location.search).toBe('?view=review&review=overview'), + ) expect(screen.getByText('Analyze this palette')).toBeInTheDocument() act(() => window.history.forward()) @@ -71,12 +99,16 @@ describe('ColorCraft workspace', () => { render() fireEvent.click(screen.getByRole('button', { name: 'Start manually' })) fireEvent.click(screen.getByRole('button', { name: 'New palette' })) - expect(screen.getByRole('dialog', { name: 'Start a new palette?' })).toBeInTheDocument() + expect( + screen.getByRole('dialog', { name: 'Start a new palette?' }), + ).toBeInTheDocument() fireEvent.click(screen.getByRole('button', { name: 'Keep working' })) expect(screen.getByText('Untitled palette')).toBeInTheDocument() fireEvent.click(screen.getByRole('button', { name: 'New palette' })) - fireEvent.click(screen.getByRole('button', { name: 'Discard and start new' })) + fireEvent.click( + screen.getByRole('button', { name: 'Discard and start new' }), + ) expect(screen.getByText('Create a palette')).toBeInTheDocument() }) @@ -89,13 +121,19 @@ describe('ColorCraft workspace', () => { const { container } = render() const input = container.querySelector('#source-image')! fireEvent.change(input, { - target: { files: [new File(['image'], 'sample.png', { type: 'image/png' })] }, + target: { + files: [new File(['image'], 'sample.png', { type: 'image/png' })], + }, }) expect((await screen.findAllByText('sample.png')).length).toBeGreaterThan(0) fireEvent.click(screen.getByRole('button', { name: 'New palette' })) - fireEvent.click(screen.getByRole('button', { name: 'Discard and start new' })) - await waitFor(() => expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:source')) + fireEvent.click( + screen.getByRole('button', { name: 'Discard and start new' }), + ) + await waitFor(() => + expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:source'), + ) }) it('restores an unavailable refreshed view to Create', async () => { @@ -111,10 +149,9 @@ describe('ColorCraft workspace', () => { fireEvent.click(screen.getByRole('button', { name: 'Add color' })) window.history.pushState({}, '', '/?view=review&review=contrast') act(() => window.dispatchEvent(new PopStateEvent('popstate'))) - expect(await screen.findByRole('tab', { name: 'Contrast' })).toHaveAttribute( - 'aria-selected', - 'true', - ) + expect( + await screen.findByRole('tab', { name: 'Contrast' }), + ).toHaveAttribute('aria-selected', 'true') }) it('withholds stale analysis after the palette changes', async () => { @@ -123,12 +160,83 @@ describe('ColorCraft workspace', () => { fireEvent.click(screen.getByRole('button', { name: 'Add color' })) fireEvent.click(screen.getByRole('button', { name: 'Analyze palette' })) expect(await screen.findByText('Palette summary')).toBeInTheDocument() - fireEvent.click(within(desktopNavigation()).getByRole('button', { name: 'Create' })) + fireEvent.click( + within(desktopNavigation()).getByRole('button', { name: 'Create' }), + ) const input = screen.getByLabelText('Color 1') fireEvent.change(input, { target: { value: '#121212' } }) fireEvent.blur(input) - fireEvent.click(within(desktopNavigation()).getByRole('button', { name: 'Review' })) - expect(screen.getByText('Analysis is stale because the palette changed.')).toBeInTheDocument() + fireEvent.click( + within(desktopNavigation()).getByRole('button', { name: 'Review' }), + ) + expect( + screen.getByText('Analysis is stale because the palette changed.'), + ).toBeInTheDocument() expect(screen.queryByText('Palette summary')).not.toBeInTheDocument() }) + + it('shows unsaved, saved, and modified states around explicit saves', async () => { + render() + fireEvent.click(screen.getByRole('button', { name: 'Start manually' })) + expect(screen.getByText('Unsaved')).toBeInTheDocument() + fireEvent.click(screen.getByRole('button', { name: 'Save palette' })) + expect(await screen.findByText('Saved')).toBeInTheDocument() + + const input = screen.getByLabelText('Color 1') + fireEvent.change(input, { target: { value: '#121212' } }) + fireEvent.blur(input) + expect(screen.getByText('Modified')).toBeInTheDocument() + fireEvent.click(screen.getByRole('button', { name: 'Save changes' })) + await waitFor(() => expect(screen.getByText('Saved')).toBeInTheDocument()) + }) + + it('opens a saved palette and confirms before discarding another unsaved palette', async () => { + await savePalette({ + name: 'Stored palette', + sourceType: 'manual', + colors: [red], + roles: {}, + }) + render() + fireEvent.click(screen.getByRole('button', { name: 'Start manually' })) + fireEvent.click( + within(desktopNavigation()).getByRole('button', { name: 'Library' }), + ) + fireEvent.click( + await screen.findByRole('button', { name: 'Open Stored palette' }), + ) + expect( + screen.getByRole('dialog', { name: 'Open another palette?' }), + ).toBeInTheDocument() + fireEvent.click( + screen.getByRole('button', { name: 'Discard changes and open' }), + ) + expect(await screen.findByDisplayValue('#FF0000')).toBeInTheDocument() + expect(screen.getByText('Saved')).toBeInTheDocument() + }) + + it('leaves a predictable empty Library after deleting the active palette', async () => { + await savePalette({ + name: 'Delete me', + sourceType: 'manual', + colors: [red], + roles: {}, + }) + render() + fireEvent.click( + within(desktopNavigation()).getByRole('button', { name: 'Library' }), + ) + fireEvent.click( + await screen.findByRole('button', { name: 'Open Delete me' }), + ) + fireEvent.click( + within(desktopNavigation()).getByRole('button', { name: 'Library' }), + ) + fireEvent.click(screen.getByRole('button', { name: 'Delete Delete me' })) + fireEvent.click(screen.getByRole('button', { name: 'Delete palette' })) + expect(await screen.findByText('No saved palettes')).toBeInTheDocument() + expect( + within(desktopNavigation()).getByRole('button', { name: 'Review' }), + ).toBeDisabled() + }) }) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 997855a..fc132c6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,11 @@ -import { Pipette, RefreshCw, Upload } from 'lucide-react' +import { + CheckCircle2, + CircleDotDashed, + Pipette, + RefreshCw, + Save, + Upload, +} from 'lucide-react' import { useEffect, useRef, useState } from 'react' import { analyzeColors, extractColors } from './api/client' import type { Analysis, Color } from './api/contracts' @@ -9,14 +16,26 @@ import ExportWorkspace from './components/ExportWorkspace' import ImageColorPicker from './components/ImageColorPicker' import ImageUpload, { validateImageFile } from './components/ImageUpload' import InlineNotice, { type NoticeState } from './components/InlineNotice' +import PaletteLibrary from './components/PaletteLibrary' import ReviewWorkspace from './components/ReviewWorkspace' import Button from './components/ui/Button' import Dialog from './components/ui/Dialog' +import StatusBadge from './components/ui/StatusBadge' import { pruneRoleAssignments, type PaletteRole, type RoleAssignments, } from './contrast' +import { + deleteSavedPalette, + duplicateSavedPalette, + listSavedPalettes, + paletteSnapshotFingerprint, + renameSavedPalette, + savePalette, + type PaletteDraft, + type SavedPalette, +} from './persistence' import { colorFromHex, type PaletteColor, @@ -45,6 +64,10 @@ function App() { const [view, setView] = useState(() => viewFromLocation()) const [source, setSource] = useState(null) const [manualPalette, setManualPalette] = useState(false) + const [paletteSourceType, setPaletteSourceType] = useState< + 'image' | 'manual' | null + >(null) + const [sourceFilename, setSourceFilename] = useState() const [colors, setColors] = useState([]) const [selectedIndex, setSelectedIndex] = useState(null) const [requestedColors, setRequestedColors] = useState(6) @@ -55,9 +78,18 @@ function App() { const [notice, setNotice] = useState(null) const [confirmNewPalette, setConfirmNewPalette] = useState(false) const [pickerTarget, setPickerTarget] = useState(null) - const [reviewTab, setReviewTab] = useState(() => reviewFromLocation()) + const [reviewTab, setReviewTab] = useState(() => + reviewFromLocation(), + ) const [roles, setRoles] = useState({}) const [paletteName, setPaletteName] = useState('Untitled palette') + const [savedPalettes, setSavedPalettes] = useState([]) + const [libraryLoading, setLibraryLoading] = useState(true) + const [activePaletteId, setActivePaletteId] = useState(null) + const [savedFingerprint, setSavedFingerprint] = useState(null) + const [pendingOpenPalette, setPendingOpenPalette] = + useState(null) + const [deleteTarget, setDeleteTarget] = useState(null) const changeImageInputRef = useRef(null) const sourceUrlRef = useRef(null) const analysisRequestRef = useRef(0) @@ -67,11 +99,32 @@ function App() { const reviewAvailable = colors.length >= 2 const exportAvailable = colors.length >= 1 - const hasUnsavedWork = Boolean(source || manualPalette || colors.length) const paletteActive = Boolean(source || manualPalette) + const paletteDraft: PaletteDraft | null = + paletteActive && colors.length && paletteSourceType + ? { + name: paletteName, + sourceType: paletteSourceType, + ...(sourceFilename ? { sourceFilename } : {}), + colors, + roles, + } + : null + const currentFingerprint = paletteDraft + ? paletteSnapshotFingerprint(paletteDraft) + : null + const saveState = !paletteDraft + ? null + : !activePaletteId + ? 'unsaved' + : currentFingerprint === savedFingerprint + ? 'saved' + : 'modified' + const hasPendingChanges = saveState === 'unsaved' || saveState === 'modified' const canOpenView = (target: WorkspaceView) => target === 'create' || + target === 'library' || (target === 'review' && reviewAvailable) || (target === 'export' && exportAvailable) @@ -81,14 +134,22 @@ function App() { ) => { if (!canOpenView(target)) return const method = options.replace ? 'replaceState' : 'pushState' - const url = target === 'review' ? urlForReview(reviewTab) : urlForView(target) + const url = + target === 'review' ? urlForReview(reviewTab) : urlForView(target) window.history[method]({ view: target, review: reviewTab }, '', url) setView(target) } - const navigateReview = (target: ReviewView, options: { replace?: boolean } = {}) => { + const navigateReview = ( + target: ReviewView, + options: { replace?: boolean } = {}, + ) => { const method = options.replace ? 'replaceState' : 'pushState' - window.history[method]({ view: 'review', review: target }, '', urlForReview(target)) + window.history[method]( + { view: 'review', review: target }, + '', + urlForReview(target), + ) setReviewTab(target) setView('review') } @@ -111,8 +172,7 @@ function App() { if (canOpenView(target)) { setView(target) setReviewTab(targetReview) - } - else navigate('create', { replace: true }) + } else navigate('create', { replace: true }) } window.addEventListener('popstate', onPopState) return () => window.removeEventListener('popstate', onPopState) @@ -126,6 +186,24 @@ function App() { setRoles((current) => pruneRoleAssignments(current, colors)) }, [colors]) + const refreshLibrary = async () => { + try { + setSavedPalettes(await listSavedPalettes()) + } catch (error) { + console.error('Could not load saved palettes:', error) + setNotice({ + variant: 'error', + message: 'Saved palettes could not be read from this browser.', + }) + } finally { + setLibraryLoading(false) + } + } + + useEffect(() => { + void refreshLibrary() + }, []) + useEffect( () => () => { analysisControllerRef.current?.abort() @@ -190,6 +268,10 @@ function App() { setSource({ file, previewUrl, width: null, height: null }) setPaletteName(file.name.replace(/\.[^.]+$/, '') || 'Untitled palette') setManualPalette(false) + setPaletteSourceType('image') + setSourceFilename(file.name) + setActivePaletteId(null) + setSavedFingerprint(null) setColors([]) setSelectedIndex(null) setAnalysis(null) @@ -202,6 +284,10 @@ function App() { revokeSource() setSource(null) setManualPalette(true) + setPaletteSourceType('manual') + setSourceFilename(undefined) + setActivePaletteId(null) + setSavedFingerprint(null) setColors([manualStarter]) setSelectedIndex(0) setAnalysis(null) @@ -210,7 +296,7 @@ function App() { navigate('create') } - const resetPalette = () => { + const resetPalette = (target: WorkspaceView = 'create') => { analysisRequestRef.current += 1 extractionRequestRef.current += 1 analysisControllerRef.current?.abort() @@ -220,35 +306,42 @@ function App() { revokeSource() setSource(null) setManualPalette(false) + setPaletteSourceType(null) + setSourceFilename(undefined) setColors([]) setSelectedIndex(null) setAnalysis(null) setAnalysisStale(false) setRoles({}) setPaletteName('Untitled palette') + setActivePaletteId(null) + setSavedFingerprint(null) setAnalyzing(false) setExtracting(false) setNotice(null) setPickerTarget(null) setConfirmNewPalette(false) - navigate('create') + navigate(target) } const requestNewPalette = () => { - if (hasUnsavedWork) setConfirmNewPalette(true) + if (hasPendingChanges) setConfirmNewPalette(true) else resetPalette() } const updateColor = (index: number, color: Color) => { - setColors((current) => current.map((item, itemIndex) => ( - itemIndex === index ? color : item - ))) + setColors((current) => + current.map((item, itemIndex) => (itemIndex === index ? color : item)), + ) invalidateAnalysis() } const addColor = (color: Color = manualStarter) => { if (colors.length >= 10) { - setNotice({ variant: 'warning', message: 'A palette can contain at most 10 colors.' }) + setNotice({ + variant: 'warning', + message: 'A palette can contain at most 10 colors.', + }) return } setColors((current) => [...current, color]) @@ -260,7 +353,10 @@ function App() { const sourceColor = colors[index] if (!sourceColor || colors.length >= 10) { if (colors.length >= 10) { - setNotice({ variant: 'warning', message: 'A palette can contain at most 10 colors.' }) + setNotice({ + variant: 'warning', + message: 'A palette can contain at most 10 colors.', + }) } return } @@ -279,7 +375,9 @@ function App() { } const removeColor = (index: number) => { - setColors((current) => current.filter((_, itemIndex) => itemIndex !== index)) + setColors((current) => + current.filter((_, itemIndex) => itemIndex !== index), + ) setSelectedIndex((current) => { if (current === null) return null if (colors.length <= 1) return null @@ -334,22 +432,144 @@ function App() { void beginImagePalette(file) } - const headerTitle = paletteActive ? 'Current palette' : 'ColorCraft' - const headerSource = source - ? source.file.name - : manualPalette - ? 'Untitled palette' - : 'Local color utility' - const headerSummary = source - ? `${colorCountLabel(colors.length)} · extracted from image` - : manualPalette - ? `${colorCountLabel(colors.length)} · created manually` - : 'Extract, refine, and validate color palettes from images.' + const openPalette = (palette: SavedPalette) => { + analysisRequestRef.current += 1 + extractionRequestRef.current += 1 + analysisControllerRef.current?.abort() + extractionControllerRef.current?.abort() + revokeSource() + setSource(null) + setManualPalette(true) + setPaletteSourceType(palette.sourceType) + setSourceFilename(palette.sourceFilename) + setPaletteName(palette.name) + setColors(palette.colors) + setRoles(palette.roles) + setSelectedIndex(palette.colors.length ? 0 : null) + setAnalysis(null) + setAnalysisStale(false) + setActivePaletteId(palette.id) + setSavedFingerprint(paletteSnapshotFingerprint(palette)) + setNotice(null) + setPendingOpenPalette(null) + navigate('create') + } + + const requestOpenPalette = (palette: SavedPalette) => { + if (hasPendingChanges && palette.id !== activePaletteId) { + setPendingOpenPalette(palette) + } else { + openPalette(palette) + } + } + + const saveCurrentPalette = async () => { + if (!paletteDraft) return + try { + const existing = activePaletteId + ? savedPalettes.find((palette) => palette.id === activePaletteId) + : undefined + const saved = await savePalette(paletteDraft, existing) + setActivePaletteId(saved.id) + setPaletteName(saved.name) + setSavedFingerprint(paletteSnapshotFingerprint(saved)) + await refreshLibrary() + setNotice({ + variant: 'success', + message: existing + ? 'Palette changes saved locally.' + : 'Palette saved locally.', + }) + } catch (error) { + console.error('Could not save palette:', error) + setNotice({ + variant: 'error', + message: 'The palette could not be saved in this browser.', + retry: () => void saveCurrentPalette(), + }) + } + } + + const handleRenamePalette = async (palette: SavedPalette, name: string) => { + try { + const renamed = await renameSavedPalette(palette.id, name) + if (palette.id === activePaletteId) { + setPaletteName(renamed.name) + setSavedFingerprint(paletteSnapshotFingerprint(renamed)) + } + await refreshLibrary() + } catch (error) { + console.error('Could not rename palette:', error) + setNotice({ + variant: 'error', + message: 'The saved palette could not be renamed.', + }) + } + } + + const handleDuplicatePalette = async (palette: SavedPalette) => { + try { + await duplicateSavedPalette(palette) + await refreshLibrary() + setNotice({ + variant: 'success', + message: `${palette.name} was duplicated.`, + }) + } catch (error) { + console.error('Could not duplicate palette:', error) + setNotice({ + variant: 'error', + message: 'The saved palette could not be duplicated.', + }) + } + } + + const confirmDeletePalette = async () => { + if (!deleteTarget) return + const palette = deleteTarget + try { + await deleteSavedPalette(palette.id) + setDeleteTarget(null) + if (palette.id === activePaletteId) resetPalette('library') + await refreshLibrary() + setNotice({ variant: 'success', message: `${palette.name} was deleted.` }) + } catch (error) { + console.error('Could not delete palette:', error) + setNotice({ + variant: 'error', + message: 'The saved palette could not be deleted.', + }) + } + } + + const headerTitle = + view === 'library' + ? 'Palette Library' + : paletteActive + ? 'Current palette' + : 'ColorCraft' + const headerSource = + view === 'library' + ? 'Local palette storage' + : paletteActive + ? paletteName + : 'Local color utility' + const headerSummary = + view === 'library' + ? `${savedPalettes.length} saved ${savedPalettes.length === 1 ? 'palette' : 'palettes'} · stored in this browser` + : paletteActive + ? `${colorCountLabel(colors.length)} · ${paletteSourceType === 'image' ? 'created from an image' : 'created manually'}` + : 'Extract, refine, and validate color palettes from images.' const createView = !paletteActive ? ( - + ) : ( -
+
{source && (
@@ -380,19 +600,35 @@ function App() { alt={`Source ${source.file.name}`} onLoad={(event) => { const image = event.currentTarget - setSource((current) => current && current.previewUrl === source.previewUrl - ? { ...current, width: image.naturalWidth, height: image.naturalHeight } - : current) + setSource((current) => + current && current.previewUrl === source.previewUrl + ? { + ...current, + width: image.naturalWidth, + height: image.naturalHeight, + } + : current, + ) }} />
-
File
{source.file.name}
+
+
File
+
{source.file.name}
+
Dimensions
-
{source.width && source.height ? `${source.width} × ${source.height}` : 'Reading…'}
+
+ {source.width && source.height + ? `${source.width} × ${source.height}` + : 'Reading…'} +
+
+
+
Size
+
{(source.file.size / 1024 / 1024).toFixed(2)} MB
-
Size
{(source.file.size / 1024 / 1024).toFixed(2)} MB
)} @@ -400,7 +636,13 @@ function App() {
-

{source ? 'Extracted palette' : 'Manual palette'}

+

+ {source + ? 'Extracted palette' + : paletteSourceType === 'image' + ? 'Saved image palette' + : 'Manual palette'} +

Palette

{source && ( @@ -415,6 +657,13 @@ function App() { )}
+ {!source && paletteSourceType === 'image' && ( +

+ Source: {sourceFilename ?? 'image'} · The source image itself was + not retained. +

+ )} + {source && (
@@ -424,11 +673,14 @@ function App() { min="3" max="10" value={requestedColors} - onChange={(event) => setRequestedColors(Number(event.target.value))} + onChange={(event) => + setRequestedColors(Number(event.target.value)) + } /> {requestedColors} - Actual returned: {colors.length} · Distinct colors may be fewer than requested. + Actual returned: {colors.length} · Distinct colors may be fewer + than requested.
)} @@ -453,7 +705,9 @@ function App() { > {analyzing ? 'Analyzing…' : 'Analyze palette'} - {!reviewAvailable && Add one more valid color to enable analysis.} + {!reviewAvailable && ( + Add one more valid color to enable analysis. + )}
@@ -490,6 +744,52 @@ function App() { /> ) + const libraryView = ( + void handleRenamePalette(palette, name)} + onDuplicate={(palette) => void handleDuplicatePalette(palette)} + onDelete={setDeleteTarget} + /> + ) + + const headerActions = paletteDraft ? ( +
+ + {saveState === 'saved' ? ( + + +
+ ) : undefined + return ( <> ({ id, name }))} + onOpenRecent={(id) => { + const palette = savedPalettes.find((item) => item.id === id) + if (palette) requestOpenPalette(palette) + }} + headerActions={headerActions} > {notice && ( setNotice(null)} /> @@ -516,9 +822,12 @@ function App() { {view === 'create' && createView} {view === 'review' && reviewView} {view === 'export' && exportView} + {view === 'library' && libraryView} - + setConfirmNewPalette(false)} > -

Your current unsaved palette will be cleared from this browser session.

+

+ Your current {saveState === 'modified' ? 'modified' : 'unsaved'}{' '} + palette changes will be cleared from this browser session. +

+
+ + +
+ + + setPendingOpenPalette(null)} + > +

+ Your current {saveState === 'modified' ? 'modified' : 'unsaved'}{' '} + palette changes will be discarded. +

- - + + +
+ + + setDeleteTarget(null)} + > +

+ {deleteTarget?.name} will be removed from this browser. This cannot be + undone. +

+
+ +
diff --git a/frontend/src/api/client.test.ts b/frontend/src/api/client.test.ts index ec7de81..b741367 100644 --- a/frontend/src/api/client.test.ts +++ b/frontend/src/api/client.test.ts @@ -106,7 +106,10 @@ describe('ColorCraft API client', () => { vi.stubGlobal( 'fetch', vi.fn().mockResolvedValue( - jsonResponse({ success: true, analysis: { ...analysis, accessibility: {} } }), + jsonResponse({ + success: true, + analysis: { ...analysis, accessibility: {} }, + }), ), ) @@ -118,12 +121,8 @@ describe('ColorCraft API client', () => { it('strips extraction metadata from strict palette requests', async () => { const fetchMock = vi .fn() - .mockResolvedValueOnce( - jsonResponse({ success: true, analysis }), - ) - .mockResolvedValueOnce( - jsonResponse({ success: true, suggestions: [] }), - ) + .mockResolvedValueOnce(jsonResponse({ success: true, analysis })) + .mockResolvedValueOnce(jsonResponse({ success: true, suggestions: [] })) vi.stubGlobal('fetch', fetchMock) const extractedColor = { ...red, diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts index 77feb84..98724ef 100644 --- a/frontend/src/api/client.ts +++ b/frontend/src/api/client.ts @@ -15,7 +15,9 @@ import { ColorCraftApiError, } from './errors' -const configuredBaseUrl = (import.meta.env.VITE_COLORCRAFT_API_URL || '').replace(/\/$/, '') +const configuredBaseUrl = ( + import.meta.env.VITE_COLORCRAFT_API_URL || '' +).replace(/\/$/, '') function apiUrl(path: string): string { return `${configuredBaseUrl}${path}` diff --git a/frontend/src/api/errors.ts b/frontend/src/api/errors.ts index 91efebd..e1e04a8 100644 --- a/frontend/src/api/errors.ts +++ b/frontend/src/api/errors.ts @@ -25,7 +25,10 @@ export class ColorCraftApiError extends Error { } } -export function backendError(status: number, payload: unknown): ColorCraftApiError { +export function backendError( + status: number, + payload: unknown, +): ColorCraftApiError { const parsed = errorResponseSchema.safeParse(payload) if (parsed.success) { return new ColorCraftApiError(parsed.data.error.message, { diff --git a/frontend/src/components/AnalysisResults.test.tsx b/frontend/src/components/AnalysisResults.test.tsx index c19bd4b..d7b293c 100644 --- a/frontend/src/components/AnalysisResults.test.tsx +++ b/frontend/src/components/AnalysisResults.test.tsx @@ -22,6 +22,8 @@ describe('AnalysisResults', () => { ), ).toBeInTheDocument() expect(screen.queryByText('Harmony Score')).not.toBeInTheDocument() - expect(screen.getByText('#ff0000 + #0000ff • Ratio: 2.15')).toBeInTheDocument() + expect( + screen.getByText('#ff0000 + #0000ff • Ratio: 2.15'), + ).toBeInTheDocument() }) }) diff --git a/frontend/src/components/AnalysisResults.tsx b/frontend/src/components/AnalysisResults.tsx index 9d56627..72f04e2 100644 --- a/frontend/src/components/AnalysisResults.tsx +++ b/frontend/src/components/AnalysisResults.tsx @@ -24,7 +24,11 @@ export default function AnalysisResults({ analysis }: AnalysisResultsProps) { />
- {colorTheory.tags.map((tag) => {tag})} + {colorTheory.tags.map((tag) => ( + + {tag} + + ))}
@@ -43,13 +47,19 @@ export default function AnalysisResults({ analysis }: AnalysisResultsProps) { aria-valuemax={100} aria-valuenow={colorTheory.relationshipFit} > -
+
    - {colorTheory.relationshipFactors.map((factor) =>
  • {factor}
    • )} + {colorTheory.relationshipFactors.map((factor) => ( +
  • {factor}
    • + ))}

- This measures geometric color relationships, not subjective design quality. + This measures geometric color relationships, not subjective design + quality.

@@ -57,23 +67,43 @@ export default function AnalysisResults({ analysis }: AnalysisResultsProps) {

Temperature balance

-
Balance{colorTheory.temperatureBalance.balance}
+
+ Balance + {colorTheory.temperatureBalance.balance} +
Warm colors - {colorTheory.temperatureBalance.warmCount} ({(colorTheory.temperatureBalance.warmRatio * 100).toFixed(0)}%) + + {colorTheory.temperatureBalance.warmCount} ( + {(colorTheory.temperatureBalance.warmRatio * 100).toFixed(0)} + %) +
Cool colors - {colorTheory.temperatureBalance.coolCount} ({(colorTheory.temperatureBalance.coolRatio * 100).toFixed(0)}%) + + {colorTheory.temperatureBalance.coolCount} ( + {(colorTheory.temperatureBalance.coolRatio * 100).toFixed(0)} + %) +

Color metrics

-
Hue diversity{colorTheory.metrics.hueDiversity}°
-
Average saturation{colorTheory.metrics.saturationAvg}%
-
Lightness range{colorTheory.metrics.lightnessRange}%
+
+ Hue diversity + {colorTheory.metrics.hueDiversity}° +
+
+ Average saturation + {colorTheory.metrics.saturationAvg}% +
+
+ Lightness range + {colorTheory.metrics.lightnessRange}% +
@@ -87,11 +117,26 @@ export default function AnalysisResults({ analysis }: AnalysisResultsProps) { />
- - - - - + + + + +
{accessibility.issues.length > 0 && ( @@ -99,10 +144,14 @@ export default function AnalysisResults({ analysis }: AnalysisResultsProps) {

Issues found

{accessibility.issues.map((issue) => ( - +

{issue.message}

- {issue.color1} + {issue.color2} • Ratio: {issue.ratio?.toFixed(2) ?? 'N/A'} + {issue.color1} + {issue.color2} • Ratio:{' '} + {issue.ratio?.toFixed(2) ?? 'N/A'} ))} @@ -114,20 +163,37 @@ export default function AnalysisResults({ analysis }: AnalysisResultsProps) {

Color pair contrast

{accessibility.pairs.map((pair) => ( -
+
- + - +
{pair.ratio?.toFixed(2) ?? 'N/A'}:1
- AA Normal - AA Large - AAA Normal - AAA Large + + AA Normal + + + AA Large + + + AAA Normal + + + AAA Large +
))} diff --git a/frontend/src/components/AppShell.test.tsx b/frontend/src/components/AppShell.test.tsx index 3e46ea2..3b38895 100644 --- a/frontend/src/components/AppShell.test.tsx +++ b/frontend/src/components/AppShell.test.tsx @@ -5,12 +5,15 @@ import AppShell from './AppShell' describe('AppShell navigation', () => { beforeEach(() => { localStorage.clear() - vi.stubGlobal('matchMedia', vi.fn(() => ({ - matches: false, - media: '(prefers-color-scheme: dark)', - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - }))) + vi.stubGlobal( + 'matchMedia', + vi.fn(() => ({ + matches: false, + media: '(prefers-color-scheme: dark)', + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + })), + ) }) it('explains unavailable Review and Export views', () => { @@ -31,13 +34,18 @@ describe('AppShell navigation', () => { , ) const desktop = screen.getByRole('navigation', { name: 'Primary' }) - expect(within(desktop).getByRole('button', { name: 'Create' })).toBeEnabled() - expect(within(desktop).getByRole('button', { name: 'Review' })).toBeDisabled() - expect(within(desktop).getByRole('button', { name: 'Review' })).toHaveAttribute( - 'title', - 'Add two colors.', - ) - expect(within(desktop).getByRole('button', { name: 'Export' })).toBeDisabled() + expect( + within(desktop).getByRole('button', { name: 'Create' }), + ).toBeEnabled() + expect( + within(desktop).getByRole('button', { name: 'Review' }), + ).toBeDisabled() + expect( + within(desktop).getByRole('button', { name: 'Review' }), + ).toHaveAttribute('title', 'Add two colors.') + expect( + within(desktop).getByRole('button', { name: 'Export' }), + ).toBeDisabled() }) it('provides equivalent mobile navigation and shell theme control', () => { diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx index 9e031ae..ed4b06c 100644 --- a/frontend/src/components/AppShell.tsx +++ b/frontend/src/components/AppShell.tsx @@ -1,4 +1,11 @@ -import { Download, FilePlus2, FlaskConical, Palette, Plus } from 'lucide-react' +import { + Download, + FilePlus2, + FlaskConical, + Library, + Palette, + Plus, +} from 'lucide-react' import type { ReactNode } from 'react' import type { WorkspaceView } from '../workspace' import AppMark from './ui/AppMark' @@ -19,6 +26,9 @@ interface AppShellProps { summary: string onNavigate: (view: WorkspaceView) => void onNewPalette: () => void + recentPalettes?: Array<{ id: string; name: string }> + onOpenRecent?: (id: string) => void + headerActions?: ReactNode children: ReactNode } @@ -26,6 +36,7 @@ const navigationItems = [ { view: 'create' as const, label: 'Create', icon: Palette }, { view: 'review' as const, label: 'Review', icon: FlaskConical }, { view: 'export' as const, label: 'Export', icon: Download }, + { view: 'library' as const, label: 'Library', icon: Library }, ] export default function AppShell({ @@ -36,16 +47,22 @@ export default function AppShell({ summary, onNavigate, onNewPalette, + recentPalettes = [], + onOpenRecent, + headerActions, children, }: AppShellProps) { const availability = (target: WorkspaceView) => { if (target === 'create') return { available: true, reason: '' } + if (target === 'library') return { available: true, reason: '' } return navigation[target] } const navigationContent = (location: 'sidebar' | 'mobile') => (
- Local only +
+ {headerActions} + Local only +
{children}
diff --git a/frontend/src/components/ColorSuggestions.test.tsx b/frontend/src/components/ColorSuggestions.test.tsx index a5f9c4f..724e4ca 100644 --- a/frontend/src/components/ColorSuggestions.test.tsx +++ b/frontend/src/components/ColorSuggestions.test.tsx @@ -21,7 +21,10 @@ function deferred() { return { promise, resolve } } -function response(colors: Color[], label = 'Complementary'): SuggestionResponse { +function response( + colors: Color[], + label = 'Complementary', +): SuggestionResponse { const suggested: SuggestionColor = { ...blue, name: `${label} blue`, @@ -48,14 +51,8 @@ function response(colors: Color[], label = 'Complementary'): SuggestionResponse async function loadSuggestions(colors: Color[]) { vi.mocked(suggestColors).mockResolvedValueOnce(response(colors)) - fireEvent.click( - screen.getByRole('button', { name: 'Generate suggestions' }), - ) - await screen.findByRole('heading', { name: labelFor(colors) }) -} - -function labelFor(_colors: Color[]) { - return 'Complementary' + fireEvent.click(screen.getByRole('button', { name: 'Generate suggestions' })) + await screen.findByRole('heading', { name: 'Complementary' }) } describe('ColorSuggestions palette lifecycle', () => { @@ -122,9 +119,7 @@ describe('ColorSuggestions palette lifecycle', () => { fireEvent.click( screen.getByRole('button', { name: 'Generate suggestions' }), ) - view.rerender( - , - ) + view.rerender() await waitFor(() => expect( screen.getByRole('button', { name: 'Generate suggestions' }), @@ -135,9 +130,13 @@ describe('ColorSuggestions palette lifecycle', () => { ) await act(async () => second.resolve(response([blue], 'Newest'))) - expect(await screen.findByRole('heading', { name: 'Newest' })).toBeInTheDocument() + expect( + await screen.findByRole('heading', { name: 'Newest' }), + ).toBeInTheDocument() await act(async () => first.resolve(response([red], 'Stale'))) - expect(screen.queryByRole('heading', { name: 'Stale' })).not.toBeInTheDocument() + expect( + screen.queryByRole('heading', { name: 'Stale' }), + ).not.toBeInTheDocument() expect(screen.getByRole('heading', { name: 'Newest' })).toBeInTheDocument() }) @@ -152,7 +151,9 @@ describe('ColorSuggestions palette lifecycle', () => { ) view.rerender() await act(async () => pending.resolve(response([red], 'Stale'))) - expect(screen.queryByRole('heading', { name: 'Stale' })).not.toBeInTheDocument() + expect( + screen.queryByRole('heading', { name: 'Stale' }), + ).not.toBeInTheDocument() expect( screen.getByRole('button', { name: 'Generate suggestions' }), ).toBeDisabled() @@ -161,6 +162,8 @@ describe('ColorSuggestions palette lifecycle', () => { it('marks duplicate suggestions without adding them', async () => { render() await loadSuggestions([red, blue]) - expect(screen.getByRole('button', { name: 'Already in palette #0000ff' })).toBeDisabled() + expect( + screen.getByRole('button', { name: 'Already in palette #0000ff' }), + ).toBeDisabled() }) }) diff --git a/frontend/src/components/ColorSuggestions.tsx b/frontend/src/components/ColorSuggestions.tsx index d9178bf..479e8c9 100644 --- a/frontend/src/components/ColorSuggestions.tsx +++ b/frontend/src/components/ColorSuggestions.tsx @@ -20,14 +20,19 @@ function oneSentence(value: string): string { return match?.[0].trim() ?? value.trim() } -export default function ColorSuggestions({ colors, onAddColor }: ColorSuggestionsProps) { +export default function ColorSuggestions({ + colors, + onAddColor, +}: ColorSuggestionsProps) { const [loading, setLoading] = useState(false) const [suggestions, setSuggestions] = useState([]) const [selectedColorIndex, setSelectedColorIndex] = useState(0) const [showAll, setShowAll] = useState(false) const [addedHexes, setAddedHexes] = useState>(new Set()) const [notice, setNotice] = useState(null) - const [suggestionsFingerprint, setSuggestionsFingerprint] = useState(null) + const [suggestionsFingerprint, setSuggestionsFingerprint] = useState< + string | null + >(null) const requestIdRef = useRef(0) const controllerRef = useRef(null) const fingerprint = paletteFingerprint(colors) @@ -44,7 +49,9 @@ export default function ColorSuggestions({ colors, onAddColor }: ColorSuggestion setAddedHexes(new Set()) setLoading(false) setNotice(null) - setSelectedColorIndex((current) => Math.max(0, Math.min(current, colors.length - 1))) + setSelectedColorIndex((current) => + Math.max(0, Math.min(current, colors.length - 1)), + ) }, [fingerprint, colors.length]) useEffect( @@ -73,13 +80,17 @@ export default function ColorSuggestions({ colors, onAddColor }: ColorSuggestion if ( requestId !== requestIdRef.current || requestedFingerprint !== fingerprintRef.current - ) return + ) + return setSuggestions(data.suggestions) setSuggestionsFingerprint(requestedFingerprint) } catch (error) { if (controller.signal.aborted) return console.error('Error fetching suggestions:', error) - setNotice({ message: errorMessage(error), retry: () => void fetchSuggestions() }) + setNotice({ + message: errorMessage(error), + retry: () => void fetchSuggestions(), + }) } finally { if (requestId === requestIdRef.current) setLoading(false) } @@ -88,7 +99,11 @@ export default function ColorSuggestions({ colors, onAddColor }: ColorSuggestion const addSuggestion = (suggestion: SuggestionColor) => { const key = suggestion.hex.toLowerCase() setAddedHexes((current) => new Set(current).add(key)) - onAddColor({ hex: suggestion.hex, rgb: suggestion.rgb, hsl: suggestion.hsl }) + onAddColor({ + hex: suggestion.hex, + rgb: suggestion.rgb, + hsl: suggestion.hsl, + }) } const paletteHexes = new Set(colors.map((color) => color.hex.toLowerCase())) @@ -100,18 +115,22 @@ export default function ColorSuggestions({ colors, onAddColor }: ColorSuggestion