refactor: reorganize the app around DDD layers

Author: ciembor

.gitignore

@@ -1,5 +1,7 @@
 *.swp
 node_modules
+dist
+coverage
 js/compiled.js
 css/_compiled_main.css
 css/merged.css

README.md

@@ -1,9 +1,10 @@
 [4bit](https://ciembor.github.io/4bit) Terminal Color Scheme Designer
 =========
 
-[![Tests and build](https://img.shields.io/github/actions/workflow/status/ciembor/4bit/pages.yml?branch=master&label=tests%20%26%20build&style=flat-square)](https://github.com/ciembor/4bit/actions/workflows/pages.yml)
 [![Live site](https://img.shields.io/badge/live%20site-ciembor.github.io%2F4bit-2ea44f?style=flat-square)](https://ciembor.github.io/4bit/)
 [![License: GPL v3](https://img.shields.io/badge/license-GPLv3-blue.svg?style=flat-square)](LICENSE.md)
+[![Tests and build](https://img.shields.io/github/actions/workflow/status/ciembor/4bit/pages.yml?branch=master&label=tests%20%26%20build&style=flat-square)](https://github.com/ciembor/4bit/actions/workflows/pages.yml)
+[![Coverage](https://img.shields.io/badge/coverage-95.27%25-brightgreen?style=flat-square)](#coverage)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ciembor/4bit/pulls)
 
 [![4bit Terminal Color Scheme Designer](4bit-terminal-color-scheme-designer.webp)](https://ciembor.github.io/4bit)
@@ -63,17 +64,27 @@ Useful commands:
 3. Build production assets with `npm run build`
 4. Preview the production build with `npm run preview`
 5. Run the test suite with `npm test`
-6. Run lint fixes with `npm run lint`
+6. Measure unit-test coverage with `npm run test:coverage`
+7. Refresh the README coverage badge with `npm run coverage:badge`
+8. Run lint fixes with `npm run lint`
 
 Project structure:
 
-* `src/components` - UI components
-* `src/stores` - Pinia stores for editable scheme state and calculated colors
-* `src/services` - color calculation and export logic
-* `src/lib/jquery.ui.colorPicker.js` - wrapped legacy color picker plugin
-* `src/assets/styles` - global base styles and imported third-party CSS
+* `src/domain` - pure scheme rules, defaults, color naming, and color-mode logic
+* `src/application` - synchronization/use-case layer that applies domain logic to app state
+* `src/infrastructure` - URL/query codecs, export serializers, browser sync, and wrapped legacy vendor code
+* `src/presentation` - Vue components, Pinia stores, fonts, and styles
 * `public` - static assets copied to the final build, including images and SEO files
 
+Coverage
+---------
+
+`npm run test:coverage` writes HTML, LCOV, and JSON summary reports to `coverage/`.
+
+The coverage badge above is generated from the line coverage in `coverage/coverage-summary.json` by `npm run coverage:badge`.
+
+Coverage is measured for `src/**/*.js`, excluding `src/main.js` and the vendored jQuery color picker wrapper in `src/infrastructure/vendor`.
+
 Author
 ---------
 

package-lock.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vitest/coverage-v8": "^4.1.5",
     "eslint": "^10.2.1",
     "eslint-plugin-vue": "^10.9.0",
     "globals": "^17.5.0",
@@ -25,6 +26,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest run --pool=threads",
+    "test:coverage": "vitest run --pool=threads --coverage",
+    "coverage:badge": "node scripts/update-coverage-badge.mjs",
     "lint": "eslint src --fix"
   }
 }

package.json

@@ -0,0 +1,57 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+const README_PATH = new URL('../README.md', import.meta.url);
+const SUMMARY_PATH = new URL('../coverage/coverage-summary.json', import.meta.url);
+
+const BADGE_START = '<!-- coverage-badge:start -->';
+const BADGE_END = '<!-- coverage-badge:end -->';
+
+function badgeColor(percentage) {
+  if (percentage >= 90) {
+    return 'brightgreen';
+  }
+
+  if (percentage >= 80) {
+    return 'green';
+  }
+
+  if (percentage >= 70) {
+    return 'yellowgreen';
+  }
+
+  if (percentage >= 60) {
+    return 'yellow';
+  }
+
+  if (percentage >= 50) {
+    return 'orange';
+  }
+
+  return 'red';
+}
+
+function formatPercentage(value) {
+  return Number(value.toFixed(2)).toString();
+}
+
+const coverageSummary = JSON.parse(readFileSync(SUMMARY_PATH, 'utf8'));
+const lineCoverage = Number(coverageSummary.total.lines.pct);
+const formattedCoverage = formatPercentage(lineCoverage);
+const color = badgeColor(lineCoverage);
+const badge = `[![Coverage](https://img.shields.io/badge/coverage-${encodeURIComponent(`${formattedCoverage}%`)}-${color}?style=flat-square)](#coverage)`;
+
+const readme = readFileSync(README_PATH, 'utf8');
+const startIndex = readme.indexOf(BADGE_START);
+const endIndex = readme.indexOf(BADGE_END);
+
+if (startIndex === -1 || endIndex === -1 || startIndex > endIndex) {
+  throw new Error('Coverage badge markers not found in README.md');
+}
+
+const updatedReadme = [
+  readme.slice(0, startIndex + BADGE_START.length),
+  `\n${badge}\n`,
+  readme.slice(endIndex),
+].join('');
+
+writeFileSync(README_PATH, updatedReadme);