kerf-engine/app
jlightner 31f78727e0 feat: Added B&W/grayscale/color conversion modes, invert toggle, 10+ mode-aware sliders, mask regions, turnpolicy, and white preview background
Engine:
- preprocess() accepts conversion_mode (bw/grayscale/color), invert, mask_regions
- B&W: full pipeline → binary; Grayscale: skip threshold → 8-bit; Color: skip grayscale → BGR
- routes.py forces VTracer for non-binary modes, sets colormode appropriately
- potrace_trace() accepts turnpolicy param mapped to potrace constants
- 27 new tests in test_modes.py (modes, invert, masks, params, vectorization)

App:
- Mode selector tabs (B&W | Grayscale | Color) in ImportConvert
- Invert toggle (B&W only)
- ParameterSliders rewritten: grouped sections, 10+ mode-aware controls
- Debounce reduced from 300ms to 100ms
- Preview background changed to white
- Preset JSONs updated with turnpolicy, color_precision, layer_difference defaults

Tests: 126 app + 234 engine = 360 total, all pass. Zero TypeScript errors.
2026-03-26 08:41:30 +00:00
..
dist-embed feat: Added setEngineBaseUrl() to engine API client, created <kerf-embe… 2026-03-26 06:59:49 +00:00
public test: Built fontService with opentype.js font loading, caching, text-to… 2026-03-26 05:53:04 +00:00
src feat: Added B&W/grayscale/color conversion modes, invert toggle, 10+ mode-aware sliders, mask regions, turnpolicy, and white preview background 2026-03-26 08:41:30 +00:00
.gitignore test: Added CORSMiddleware to engine, scaffolded Vite+React+TS app with… 2026-03-26 05:05:31 +00:00
eslint.config.js test: Added CORSMiddleware to engine, scaffolded Vite+React+TS app with… 2026-03-26 05:05:31 +00:00
index.html test: Added CORSMiddleware to engine, scaffolded Vite+React+TS app with… 2026-03-26 05:05:31 +00:00
package-lock.json test: Built fontService with opentype.js font loading, caching, text-to… 2026-03-26 05:53:04 +00:00
package.json test: Built fontService with opentype.js font loading, caching, text-to… 2026-03-26 05:53:04 +00:00
README.md test: Added CORSMiddleware to engine, scaffolded Vite+React+TS app with… 2026-03-26 05:05:31 +00:00
tsconfig.app.json test: Added CORSMiddleware to engine, scaffolded Vite+React+TS app with… 2026-03-26 05:05:31 +00:00
tsconfig.json test: Added CORSMiddleware to engine, scaffolded Vite+React+TS app with… 2026-03-26 05:05:31 +00:00
tsconfig.node.json feat: Added setEngineBaseUrl() to engine API client, created <kerf-embe… 2026-03-26 06:59:49 +00:00
vite.config.ts test: Created exportService.ts with composeCanvasSVG(), validateForExpo… 2026-03-26 06:26:09 +00:00
vite.embed.config.ts feat: Added setEngineBaseUrl() to engine API client, created <kerf-embe… 2026-03-26 06:59:49 +00:00

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])