Initial commit

Kenteken-Gen-1-main/.github/workflows/release.yml

@@ -0,0 +1,43 @@
+name: Build Windows Release
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: windows-latest
+    permissions:
+      contents: write
+    env:
+      CSC_LINK_BASE64: ${{ secrets.CSC_LINK_BASE64 }}
+      CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+      - run: npm ci
+      # Optioneel: code signing (alleen uitvoeren als secrets bestaan)
+      - name: Setup code signing
+        if: ${{ env.CSC_LINK_BASE64 != '' }}
+        shell: pwsh
+        run: |
+          $pfxPath = "$env:RUNNER_TEMP\signing.pfx"
+          [IO.File]::WriteAllBytes($pfxPath, [Convert]::FromBase64String($env:CSC_LINK_BASE64))
+          "CSC_LINK=$pfxPath" | Out-File -FilePath $env:GITHUB_ENV -Append
+          "CSC_KEY_PASSWORD=$env:CSC_KEY_PASSWORD" | Out-File -FilePath $env:GITHUB_ENV -Append
+      # Bouw én publiceer ALTIJD naar de GitHub Release
+      - name: Build & publish Windows package
+        run: npm run publish:win
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # (optioneel) ook als Actions artifact
+      - uses: actions/upload-artifact@v4
+        with:
+          name: release
+          path: release/**

Kenteken-Gen-1-main/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log
+dist
+release
+.vite
+.env
+
+

Kenteken-Gen-1-main/AGENTS.md

@@ -0,0 +1,29 @@
+# AGENTS
+
+This repository contains the Kenteken Generator desktop app built with Electron and React.
+
+## Project layout
+- `src/frontend` – React components and styles for the UI.
+- `electron` – main Electron process and preload scripts.
+- `src/kenteken_gen` – backend utilities (currently minimal).
+- `docs` – extra documentation.
+- `build` – packaging assets such as icons.
+
+## Conventions
+- React component files use **PascalCase** (`CarManager.jsx`).
+- Functions and variables use **camelCase**.
+- Keep functions small and add brief comments to explain non-obvious logic.
+
+## Scripts
+- `npm run dev` – start the Vite dev server.
+- `npm run build` – build the frontend for production.
+- `npm run start` – launch Electron with the built assets.
+- `npm run dist` – build and package the app.
+- `make lint` – run lint checks (placeholder).
+- `make test` – run tests (placeholder).
+
+## Tips
+- License plate generation and rendering lives in `src/frontend/LicensePlateApp.jsx`.
+- Car preset management is implemented in `src/frontend/CarManager.jsx`.
+- IPC helpers are exposed via `electron/preload.cjs` and handled in `electron/main.js`.
+- Use `rg` (ripgrep) to search the codebase, e.g. `rg saveCars`.

Kenteken-Gen-1-main/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## 1.1.1 - 2024-06-10
+- Persist child car data to JSON via IPC with file debouncing.
+- Added spacing and left-aligned layout for exports and printing.
+- Added home navigation and clickable logo.
+- Fixed dimension inputs and saving feedback in car manager.

Kenteken-Gen-1-main/Makefile

@@ -0,0 +1,7 @@
+.PHONY: test lint
+
+test:
+	npm test
+
+lint:
+	npm run lint

Kenteken-Gen-1-main/README.md

@@ -0,0 +1,50 @@
+# Kenteken-Gen-1
+
+Projectstructuur voor Kenteken Gen 1. De broncode bevindt zich in `src/kenteken_gen`, tests in `tests` en documentatie in `docs`.
+
+Voor uitgebreide documentatie zie [docs/README.md](docs/README.md).
+Wanneer een kinderauto verschillende afmetingen voor en achter heeft, genereert de app automatisch twee kentekens.
+
+## Design system
+
+De frontend gebruikt een eenvoudig Apple-achtig designsysteem met CSS-variabelen:
+
+```css
+:root{
+  --bg:#F7F7F8;
+  --card:#FFFFFF;
+  --ink:#0B0B0C;
+  --muted:#70757D;
+  --line:#E7E8EA;
+  --accent:#FFD000;
+  --accent-dark:#111113;
+}
+```
+
+De basistypografie maakt gebruik van het **Inter**-font. Buttons en kaarten hebben afgeronde hoeken en een subtiele schaduw (`0 6px 24px rgba(0,0,0,.06)`).
+
+### Thema aanpassen
+
+Alle kleuren en globale spacing zijn gedefinieerd als CSS-variabelen in `src/frontend/styles.css`. Pas deze variabelen aan om het thema te wijzigen.
+
+## Deployen
+
+De app is nu een webapp. Gebruik `npm run build` om een productiebuild te maken en host de inhoud van de `dist` map op je webserver.
+
+
+## Ontwikkeling
+
+Gebruik de onderstaande scripts voor lokale ontwikkeling:
+
+- `npm run dev` start de Vite development server.
+- `npm run build` bouwt de frontend.
+- `make lint` voert een eenvoudige lint-check uit (placeholder).
+- `make test` draait de tests (placeholder).
+
+Projectindeling:
+
+- `src/frontend` bevat de React componenten en styles.
+- `electron` bevat legacy Electron scripts (niet meer gebruikt).
+- `src/kenteken_gen` is gereserveerd voor back-end utilities.
+
+React componentbestanden gebruiken PascalCase; functies en variabelen gebruiken camelCase.

Kenteken-Gen-1-main/build/README.md

@@ -0,0 +1,3 @@
+# Build resources
+
+Place the Windows icon file `icon.ico` in this directory. It will be packaged by electron-builder.

Kenteken-Gen-1-main/docs/README.md

@@ -0,0 +1,36 @@
+# Kenteken-Gen-1
+Kenteken Gen 1
+
+## Frontend
+A small React frontend lives in `src/frontend` and is powered by [Vite](https://vitejs.dev/).
+
+Exported license plate images are generated at 180 DPI. This matches the
+resolution used in our Photoshop documents, so the centimeter values entered in
+the app correspond to the real-world dimensions when those images are opened or
+pasted there.
+
+### Running the frontend
+1. Install dependencies:
+   ```sh
+   npm install
+   ```
+2. Start the development server:
+   ```sh
+   npm run dev
+   ```
+   Visit http://localhost:5173/ to view the app.
+3. Create a production build:
+   ```sh
+   npm run build
+   ```
+
+### Kinderauto toevoegen
+
+In de frontend kan een gebruiker een eigen *Kinderauto* toevoegen. Hierbij worden
+de afmetingen van het kenteken voor ingevoerd en optioneel andere maten voor
+achter. De opgegeven opties worden in `localStorage` bewaard zodat ze bij een
+volgende sessie weer beschikbaar zijn.
+
+Als er voor een kinderauto ook achterafmetingen zijn opgegeven, toont de app
+automatisch twee kentekens: één voor en één achter. Zonder achterafmetingen wordt
+er slechts één kenteken gegenereerd.

Kenteken-Gen-1-main/electron/main.js

@@ -0,0 +1,183 @@
+import { app, BrowserWindow, ipcMain, dialog } from 'electron';
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
+import { existsSync, readFileSync, writeFile, writeFileSync } from 'fs';
+import pkg from 'electron-updater';
+
+const { autoUpdater } = pkg;
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+function getCarOptionsPath() {
+  return app.isPackaged
+    ? join(process.resourcesPath, 'carOptions.json')
+    : resolve(__dirname, '..', 'src', 'frontend', 'carOptions.json');
+}
+
+function getSharedCarsPath() {
+  return join(getDefaultCarsFolder(), 'shared-cars.json');
+}
+
+function getSettingsPath() {
+  return join(app.getPath('userData'), 'kenteken-settings.json');
+}
+
+function getDefaultCarsFolder() {
+  return app.isPackaged
+    ? app.getPath('userData')
+    : resolve(__dirname, '..');
+}
+
+function normalizeCarsFolder(folder) {
+  if (!folder || typeof folder !== 'string') {
+    return '';
+  }
+  if (!existsSync(folder)) {
+    return '';
+  }
+  return folder;
+}
+
+function loadSettings() {
+  // Persist the chosen cars folder so users can keep using the same location.
+  try {
+    const raw = readFileSync(getSettingsPath(), 'utf-8');
+    const parsed = JSON.parse(raw);
+    const carsFolder = normalizeCarsFolder(parsed?.carsFolder);
+    return { carsFolder };
+  } catch {
+    return { carsFolder: '' };
+  }
+}
+
+function saveSettings(nextSettings) {
+  writeFileSync(getSettingsPath(), JSON.stringify(nextSettings, null, 2));
+}
+
+function getCarsFolder() {
+  return settings.carsFolder || getDefaultCarsFolder();
+}
+
+function setCarsFolder(folder) {
+  const normalized = normalizeCarsFolder(folder);
+  settings.carsFolder = normalized;
+  saveSettings(settings);
+  storeFile = join(getCarsFolder(), 'shared-cars.json');
+}
+
+function loadBaseCarOptions() {
+  const p = getCarOptionsPath();
+  const json = readFileSync(p, 'utf-8');
+  return JSON.parse(json);
+}
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1024,
+    height: 768,
+    webPreferences: {
+      contextIsolation: true,
+      nodeIntegration: false,
+      preload: join(__dirname, 'preload.cjs'),
+    },
+  });
+
+  if (app.isPackaged) {
+    win.loadFile(join(__dirname, '../dist/index.html'));
+  } else {
+    win.loadURL('http://localhost:5173');
+    win.webContents.openDevTools();
+  }
+}
+
+let storeFile;
+let cars = [];
+let saveTimer;
+let settings = { carsFolder: '' };
+
+function loadCars() {
+  try {
+    const data = JSON.parse(readFileSync(storeFile, 'utf-8'));
+    if (!Array.isArray(data)) throw new Error('Invalid data');
+    if (
+      !data.every(
+        (c) =>
+          typeof c.name === 'string' &&
+          typeof c.width === 'number' &&
+          typeof c.height === 'number'
+      )
+    ) {
+      throw new Error('Invalid schema');
+    }
+    cars = data;
+  } catch {
+    cars = loadBaseCarOptions();
+    saveCars(cars, true);
+  }
+  return cars;
+}
+
+function saveCars(newCars, immediate = false) {
+  cars = newCars;
+  const write = () =>
+    writeFile(storeFile, JSON.stringify(cars, null, 2), () => {});
+  if (immediate) {
+    write();
+  } else {
+    clearTimeout(saveTimer);
+    saveTimer = setTimeout(write, 250);
+  }
+}
+
+ipcMain.handle('cars:load', () => loadCars());
+ipcMain.handle('cars:save', (_e, newCars) => {
+  saveCars(newCars);
+  return cars;
+});
+ipcMain.handle('cars:folder:get', () => getCarsFolder());
+ipcMain.handle('cars:folder:select', async () => {
+  const result = await dialog.showOpenDialog({
+    properties: ['openDirectory', 'createDirectory'],
+  });
+  if (result.canceled || !result.filePaths?.[0]) {
+    return { canceled: true, folder: getCarsFolder(), cars };
+  }
+  setCarsFolder(result.filePaths[0]);
+  const updatedCars = loadCars();
+  return { canceled: false, folder: getCarsFolder(), cars: updatedCars };
+});
+ipcMain.handle('cars:folder:reset', () => {
+  settings.carsFolder = '';
+  saveSettings(settings);
+  storeFile = getSharedCarsPath();
+  const updatedCars = loadCars();
+  return { folder: getCarsFolder(), cars: updatedCars };
+});
+
+app.whenReady().then(() => {
+  settings = loadSettings();
+  storeFile = settings.carsFolder
+    ? join(getCarsFolder(), 'shared-cars.json')
+    : getSharedCarsPath();
+  loadCars();
+  createWindow();
+
+  try {
+    autoUpdater.checkForUpdatesAndNotify();
+  } catch (e) {
+    // fail silently
+  }
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});

Kenteken-Gen-1-main/electron/preload.cjs

@@ -0,0 +1,13 @@
+// CommonJS preload
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('api', {
+  loadCars: () => ipcRenderer.invoke('cars:load'),
+  saveCars: (cars) => ipcRenderer.invoke('cars:save', cars),
+  getCarsFolder: () => ipcRenderer.invoke('cars:folder:get'),
+  selectCarsFolder: () => ipcRenderer.invoke('cars:folder:select'),
+  resetCarsFolder: () => ipcRenderer.invoke('cars:folder:reset'),
+
+  // Handig als je print via main wilt aanroepen:
+  // print: (opts) => ipcRenderer.invoke('print', opts),
+});

Kenteken-Gen-1-main/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "kenteken-gen-frontend",
+  "version": "1.2.0",
+  "description": "Kenteken generator web app",
+  "author": "Anis el Youzghi",
+  "repository": "https://github.com/anis010/Kenteken-Gen-1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "echo \"No lint configured\" && exit 0",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "framer-motion": "^12.23.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.1.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.4",
+    "vite": "^5.2.0"
+  }
+}

Kenteken-Gen-1-main/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

Kenteken-Gen-1-main/shared-cars.json

@@ -0,0 +1,498 @@
+[
+  {
+    "name": "Aprilia",
+    "width": 10,
+    "height": 6.5
+  },
+  {
+    "name": "AUDI E-TRON",
+    "width": 15,
+    "height": 3.3
+  },
+  {
+    "name": "AUDI HORCH",
+    "width": 22.5,
+    "height": 3.6
+  },
+  {
+    "name": "AUDI Q5 GROOT",
+    "width": 21.1,
+    "height": 4.7
+  },
+  {
+    "name": "AUDI R8",
+    "width": 12.7,
+    "height": 2.7
+  },
+  {
+    "name": "Audi R8 GROOT",
+    "width": 14.5,
+    "height": 3.7
+  },
+  {
+    "name": "AUDI RS-GT",
+    "width": 11,
+    "height": 2.6
+  },
+  {
+    "name": "AUDI RS6",
+    "width": 13.1,
+    "height": 2.9
+  },
+  {
+    "name": "Audi RSQ8",
+    "width": 13,
+    "height": 2.9
+  },
+  {
+    "name": "Bentley bentayga",
+    "width": 16.6,
+    "height": 3
+  },
+  {
+    "name": "BENTLEY BENTAYGA",
+    "width": 16.3,
+    "height": 3
+  },
+  {
+    "name": "Bentley Continental",
+    "width": 16.8,
+    "height": 4.2
+  },
+  {
+    "name": "Bentley EXP12",
+    "width": 14.4,
+    "height": 3.5
+  },
+  {
+    "name": "BMW I4 1 Persoons",
+    "width": 14.7,
+    "height": 2
+  },
+  {
+    "name": "BMW M5",
+    "width": 17.2,
+    "height": 3.5
+  },
+  {
+    "name": "BMW M5 Loopauto",
+    "width": 7.8,
+    "height": 1.6
+  },
+  {
+    "name": "BMW MOTOR",
+    "width": 13.5,
+    "height": 6
+  },
+  {
+    "name": "BMW POLITIE MOTOR",
+    "width": 10,
+    "height": 2.8
+  },
+  {
+    "name": "BMW X6 2-persoons",
+    "width": 19.3,
+    "height": 4.5
+  },
+  {
+    "name": "Brandweer/Politie Loopauto",
+    "width": 8,
+    "height": 3
+  },
+  {
+    "name": "Brandweerauto",
+    "width": 10,
+    "height": 2.5
+  },
+  {
+    "name": "BROTHERS JEEP",
+    "width": 16,
+    "height": 2.8
+  },
+  {
+    "name": "BUGATTI DIVO",
+    "width": 16.7,
+    "height": 3.8
+  },
+  {
+    "name": "BUGGY ALPHA 24V",
+    "width": 16,
+    "height": 4.7
+  },
+  {
+    "name": "BUGGY POLTIE/ZWART",
+    "width": 13.9,
+    "height": 9
+  },
+  {
+    "name": "Camo Buggy Groot",
+    "width": 14.2,
+    "height": 3.6
+  },
+  {
+    "name": "CAN-AM Maverick",
+    "width": 14,
+    "height": 2.5
+  },
+  {
+    "name": "CHINO tractor",
+    "width": 11.5,
+    "height": 2.5
+  },
+  {
+    "name": "DODGE POLITIE",
+    "width": 11,
+    "height": 4.5
+  },
+  {
+    "name": "Driftkart",
+    "width": 8,
+    "height": 2.9
+  },
+  {
+    "name": "Ducati crossmotor",
+    "width": 14.3,
+    "height": 5.9
+  },
+  {
+    "name": "FIAT 500C loopauto",
+    "width": 9,
+    "height": 2.5
+  },
+  {
+    "name": "FORD LOOPAUTO",
+    "width": 10,
+    "height": 2.6
+  },
+  {
+    "name": "g",
+    "width": 14.5,
+    "height": 3.5
+  },
+  {
+    "name": "G63 1-pers XL 24V",
+    "width": 15.1,
+    "height": 3.5
+  },
+  {
+    "name": "G63 2-persoon CHROOM",
+    "width": 16.8,
+    "height": 3.6
+  },
+  {
+    "name": "G63 XXL 2-p",
+    "width": 20.8,
+    "height": 4.2
+  },
+  {
+    "name": "GLADIATOR jeep",
+    "width": 12.3,
+    "height": 3.7
+  },
+  {
+    "name": "Heftruck",
+    "width": 17.5,
+    "height": 3.5
+  },
+  {
+    "name": "High SPEED BUGGY",
+    "width": 22,
+    "height": 5.2
+  },
+  {
+    "name": "Jaguar SVR",
+    "width": 14.2,
+    "height": 3
+  },
+  {
+    "name": "John Deere Ground Loader",
+    "width": 12,
+    "height": 3
+  },
+  {
+    "name": "Kleine G650 Nieuw mini",
+    "width": 13.8,
+    "height": 3
+  },
+  {
+    "name": "KLEINE Maybach G650",
+    "width": 15.1,
+    "height": 2.6
+  },
+  {
+    "name": "LAMBO Aventador 2-persoons",
+    "width": 15.2,
+    "height": 3.9
+  },
+  {
+    "name": "Lamborghin Aventador",
+    "width": 12.5,
+    "height": 3
+  },
+  {
+    "name": "LAMBORGHINI GT",
+    "width": 8,
+    "height": 1.8
+  },
+  {
+    "name": "LAMBORGHINI HURACAN",
+    "width": 12,
+    "height": 3
+  },
+  {
+    "name": "Lamborghini Huracan 2-persoons",
+    "width": 15.2,
+    "height": 3.1
+  },
+  {
+    "name": "Lamborghini Sian",
+    "width": 9.8,
+    "height": 2.7
+  },
+  {
+    "name": "LAMBORGHINI STO",
+    "width": 14.5,
+    "height": 2.6
+  },
+  {
+    "name": "Lamborghini SV",
+    "width": 12.5,
+    "height": 3
+  },
+  {
+    "name": "Lamborghini Urus",
+    "width": 20.2,
+    "height": 3.2,
+    "rearWidth": 15.4,
+    "rearHeight": 3.6
+  },
+  {
+    "name": "Lamborghini Urus KLEIN",
+    "width": 9.4,
+    "height": 2.6,
+    "rearWidth": 12,
+    "rearHeight": 2.9
+  },
+  {
+    "name": "LAMBORGHINI VENENO",
+    "width": 15,
+    "height": 2.5
+  },
+  {
+    "name": "LOOPAUTO C63",
+    "width": 6.6,
+    "height": 1.6
+  },
+  {
+    "name": "MACLAREN",
+    "width": 15.1,
+    "height": 3.9
+  },
+  {
+    "name": "Maseratti",
+    "width": 13.7,
+    "height": 2.6
+  },
+  {
+    "name": "MCLAREN QUAD",
+    "width": 10,
+    "height": 2.5
+  },
+  {
+    "name": "Mercedes 300S",
+    "width": 14,
+    "height": 4.4
+  },
+  {
+    "name": "Mercedes 300s loopauto",
+    "width": 11,
+    "height": 2.8
+  },
+  {
+    "name": "Mercedes 6x6 klein",
+    "width": 12,
+    "height": 2.2
+  },
+  {
+    "name": "Mercedes Actros",
+    "width": 10.8,
+    "height": 2.3,
+    "rearWidth": 20,
+    "rearHeight": 4
+  },
+  {
+    "name": "Mercedes C63s",
+    "width": 13.8,
+    "height": 2.9
+  },
+  {
+    "name": "Mercedes G63 24V 1 Persoons",
+    "width": 15.3,
+    "height": 3.5
+  },
+  {
+    "name": "Mercedes G63 6X6",
+    "width": 15.8,
+    "height": 3.8
+  },
+  {
+    "name": "Mercedes G63 6x6 2-Persoons",
+    "width": 18.7,
+    "height": 3.8
+  },
+  {
+    "name": "Mercedes G63 KLEIN",
+    "width": 13.3,
+    "height": 3.2
+  },
+  {
+    "name": "Mercedes G650 Maybach BIG",
+    "width": 23.2,
+    "height": 4.3
+  },
+  {
+    "name": "MERCEDES GLC 2-zits",
+    "width": 19,
+    "height": 4.2
+  },
+  {
+    "name": "Mercedes GLC63",
+    "width": 15.6,
+    "height": 3.2
+  },
+  {
+    "name": "Mercedes GTR",
+    "width": 13.1,
+    "height": 2.7,
+    "rearWidth": 13.3,
+    "rearHeight": 2.9
+  },
+  {
+    "name": "Mercedes Loopauto",
+    "width": 7.35,
+    "height": 1.65,
+    "rearWidth": 9.6,
+    "rearHeight": 1.5
+  },
+  {
+    "name": "Mercedes M-CLASS",
+    "width": 15.6,
+    "height": 3.2
+  },
+  {
+    "name": "Mercedes S klasse",
+    "width": 16,
+    "height": 3.35
+  },
+  {
+    "name": "Mercedes Unimog",
+    "width": 15,
+    "height": 3.5
+  },
+  {
+    "name": "Miniquad 6V",
+    "width": 10,
+    "height": 3
+  },
+  {
+    "name": "Monster truck",
+    "width": 15,
+    "height": 3
+  },
+  {
+    "name": "NEW HOLLAND TRACTOR",
+    "width": 16.5,
+    "height": 4.5,
+    "rearWidth": 9.5,
+    "rearHeight": 4.5
+  },
+  {
+    "name": "Politie Dodge Charger SRT",
+    "width": 9.9,
+    "height": 4.2
+  },
+  {
+    "name": "QUAD 1000W",
+    "width": 8.2,
+    "height": 2.8
+  },
+  {
+    "name": "QUAD 800W ACHTER",
+    "width": 8.5,
+    "height": 3.2
+  },
+  {
+    "name": "RANGE ROVER 2-PERSOONS",
+    "width": 17.8,
+    "height": 5
+  },
+  {
+    "name": "Range Rover EVOQUE",
+    "width": 14.1,
+    "height": 3.1
+  },
+  {
+    "name": "Range Rover Velar",
+    "width": 15.3,
+    "height": 3.4
+  },
+  {
+    "name": "SIAN 2-P",
+    "width": 13.4,
+    "height": 3.4
+  },
+  {
+    "name": "Super truck",
+    "width": 13.7,
+    "height": 3.5
+  },
+  {
+    "name": "TOYOTA HILUX",
+    "width": 14.8,
+    "height": 4.1
+  },
+  {
+    "name": "Tractor Loopauto",
+    "width": 9.5,
+    "height": 2
+  },
+  {
+    "name": "TRIKE",
+    "width": 12,
+    "height": 7
+  },
+  {
+    "name": "UTV",
+    "width": 14.5,
+    "height": 3,
+    "rearWidth": 10,
+    "rearHeight": 3
+  },
+  {
+    "name": "UTV BUGGY",
+    "width": 13.8,
+    "height": 3.5,
+    "rearWidth": 21.5,
+    "rearHeight": 3.5
+  },
+  {
+    "name": "Vespa",
+    "width": 10.5,
+    "height": 3
+  },
+  {
+    "name": "VOLVO S90",
+    "width": 17,
+    "height": 3.9
+  },
+  {
+    "name": "WILLY 1-PERSOON",
+    "width": 15,
+    "height": 3.5
+  },
+  {
+    "name": "Willy's jeep",
+    "width": 20,
+    "height": 4
+  }
+]

Kenteken-Gen-1-main/src/frontend/CarManager.jsx

@@ -0,0 +1,402 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from './components/Header.jsx';
+import { Card } from './components/Card.jsx';
+import { Button } from './components/Button.jsx';
+import { PageTransition } from './components/PageTransition.jsx';
+import {
+  loadCars,
+  addCar,
+  updateCar,
+  deleteCarById,
+  verifyPassword,
+} from './carStorage.js';
+
+export default function CarManager() {
+  const navigate = useNavigate();
+  const [options, setOptions] = useState([]);
+  const [addForm, setAddForm] = useState({
+    name: '',
+    width: '',
+    height: '',
+    hasRear: false,
+    rearWidth: '',
+    rearHeight: '',
+  });
+  const [editName, setEditName] = useState('');
+  const [editForm, setEditForm] = useState({
+    name: '',
+    width: '',
+    height: '',
+    hasRear: false,
+    rearWidth: '',
+    rearHeight: '',
+  });
+  const [deleteName, setDeleteName] = useState('');
+  const [password, setPassword] = useState('');
+  const [authenticated, setAuthenticated] = useState(false);
+  const [error, setError] = useState('');
+  const [toast, setToast] = useState(false);
+
+  const applyCars = (cars) => {
+    const sorted = [...cars].sort((a, b) => a.name.localeCompare(b.name));
+    setOptions(sorted);
+    setEditName(sorted[0]?.name || '');
+    setDeleteName(sorted[0]?.name || '');
+  };
+
+  useEffect(() => {
+    loadCars().then((opts) => {
+      applyCars(opts);
+    });
+  }, []);
+
+  useEffect(() => {
+    const car = options.find((o) => o.name === editName);
+    if (car) {
+      setEditForm({
+        name: car.name,
+        width: String(car.width),
+        height: String(car.height),
+        hasRear: Boolean(car.rearWidth && car.rearHeight),
+        rearWidth: car.rearWidth ? String(car.rearWidth) : '',
+        rearHeight: car.rearHeight ? String(car.rearHeight) : '',
+      });
+    }
+  }, [editName, options]);
+
+  useEffect(() => {
+    setDeleteName((dn) =>
+      options.find((o) => o.name === dn) ? dn : options[0]?.name || ''
+    );
+  }, [options]);
+
+  useEffect(() => {
+    if (toast) {
+      const t = setTimeout(() => setToast(false), 2000);
+      return () => clearTimeout(t);
+    }
+  }, [toast]);
+
+  const handleAddChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setAddForm((fd) => ({
+      ...fd,
+      [name]: type === 'checkbox' ? checked : value,
+    }));
+  };
+
+  const handleEditChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setEditForm((fd) => ({
+      ...fd,
+      [name]: type === 'checkbox' ? checked : value,
+    }));
+  };
+
+  const handleAddSubmit = async (e) => {
+    e.preventDefault();
+    const newCar = {
+      name: addForm.name,
+      width: parseFloat(addForm.width),
+      height: parseFloat(addForm.height),
+    };
+    if (addForm.hasRear) {
+      newCar.rearWidth = parseFloat(addForm.rearWidth);
+      newCar.rearHeight = parseFloat(addForm.rearHeight);
+    }
+    await addCar(newCar);
+    const refreshed = await loadCars();
+    applyCars(refreshed);
+    setAddForm({
+      name: '',
+      width: '',
+      height: '',
+      hasRear: false,
+      rearWidth: '',
+      rearHeight: '',
+    });
+    setToast(true);
+  };
+
+  const handleEditSubmit = async (e) => {
+    e.preventDefault();
+    const car = options.find((o) => o.name === editName);
+    if (!car) return;
+    const updatedCar = {
+      name: editForm.name,
+      width: parseFloat(editForm.width),
+      height: parseFloat(editForm.height),
+    };
+    if (editForm.hasRear) {
+      updatedCar.rearWidth = parseFloat(editForm.rearWidth);
+      updatedCar.rearHeight = parseFloat(editForm.rearHeight);
+    }
+    await updateCar(car.id, updatedCar);
+    const refreshed = await loadCars();
+    applyCars(refreshed);
+    setEditName(updatedCar.name);
+    setToast(true);
+  };
+
+  const handleDeleteSubmit = async (e) => {
+    e.preventDefault();
+    const car = options.find((o) => o.name === deleteName);
+    if (!car) return;
+    await deleteCarById(car.id);
+    const refreshed = await loadCars();
+    applyCars(refreshed);
+    setToast(true);
+  };
+
+  const handleAuthSubmit = async (e) => {
+    e.preventDefault();
+    const valid = await verifyPassword(password);
+    if (valid) {
+      setAuthenticated(true);
+      setPassword('');
+      setError('');
+    } else {
+      setError('Onjuist wachtwoord');
+    }
+  };
+
+  return (
+    <PageTransition>
+      <Header
+        count={options.length}
+        title="Kinderauto's beheren"
+        onHome={() => navigate('/')}
+      />
+      {!authenticated ? (
+        <div className="container mt-6">
+          <Card title="Toegang vereist">
+            <form onSubmit={handleAuthSubmit} className="mb-lg">
+              <div className="form-row">
+                <label htmlFor="managerPassword">Wachtwoord:</label>
+                <input
+                  id="managerPassword"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+              {error && <p className="text-sm text-red-500">{error}</p>}
+              <Button type="submit" variant="primary" className="mt">Inloggen</Button>
+            </form>
+          </Card>
+        </div>
+      ) : (
+        <div className="container mt-6">
+          <aside className="side-cards">
+            <Card title="Kinderauto toevoegen">
+              <form onSubmit={handleAddSubmit} className="mb-lg">
+                <div className="form-row">
+                  <label htmlFor="addName">Naam:</label>
+                  <input
+                    id="addName"
+                    name="name"
+                    value={addForm.name}
+                    onChange={handleAddChange}
+                    required
+                  />
+                </div>
+                <div className="form-row">
+                  <label htmlFor="addWidth">Breedte (cm):</label>
+                  <input
+                    id="addWidth"
+                    type="number"
+                    step="0.1"
+                    min="0"
+                    name="width"
+                    value={addForm.width}
+                    onChange={handleAddChange}
+                    required
+                  />
+                </div>
+                <div className="form-row">
+                  <label htmlFor="addHeight">Hoogte (cm):</label>
+                  <input
+                    id="addHeight"
+                    type="number"
+                    step="0.1"
+                    min="0"
+                    name="height"
+                    value={addForm.height}
+                    onChange={handleAddChange}
+                    required
+                  />
+                </div>
+                <div className="form-row checkbox">
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="hasRear"
+                      checked={addForm.hasRear}
+                      onChange={handleAddChange}
+                    />
+                    Achter heeft andere maat
+                  </label>
+                </div>
+                {addForm.hasRear && (
+                  <>
+                    <div className="form-row">
+                      <label htmlFor="addRearWidth">Breedte achter (cm):</label>
+                      <input
+                        id="addRearWidth"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        name="rearWidth"
+                        value={addForm.rearWidth}
+                        onChange={handleAddChange}
+                        required
+                      />
+                    </div>
+                    <div className="form-row">
+                      <label htmlFor="addRearHeight">Hoogte achter (cm):</label>
+                      <input
+                        id="addRearHeight"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        name="rearHeight"
+                        value={addForm.rearHeight}
+                        onChange={handleAddChange}
+                        required
+                      />
+                    </div>
+                  </>
+                )}
+                <Button type="submit" variant="primary" className="mt">
+                  Opslaan
+                </Button>
+              </form>
+            </Card>
+            <Card title="Kinderauto bewerken">
+              <form onSubmit={handleEditSubmit} className="mb-lg">
+                <div className="form-row">
+                  <label htmlFor="editSelect">Selecteer:</label>
+                  <select
+                    id="editSelect"
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                  >
+                    {options.map((opt) => (
+                      <option key={opt.name} value={opt.name}>
+                        {opt.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="form-row">
+                  <label htmlFor="editName">Naam:</label>
+                  <input
+                    id="editName"
+                    name="name"
+                    value={editForm.name}
+                    onChange={handleEditChange}
+                    required
+                  />
+                </div>
+                <div className="form-row">
+                  <label htmlFor="editWidth">Breedte (cm):</label>
+                  <input
+                    id="editWidth"
+                    type="number"
+                    step="0.1"
+                    min="0"
+                    name="width"
+                    value={editForm.width}
+                    onChange={handleEditChange}
+                    required
+                  />
+                </div>
+                <div className="form-row">
+                  <label htmlFor="editHeight">Hoogte (cm):</label>
+                  <input
+                    id="editHeight"
+                    type="number"
+                    step="0.1"
+                    min="0"
+                    name="height"
+                    value={editForm.height}
+                    onChange={handleEditChange}
+                    required
+                  />
+                </div>
+                <div className="form-row checkbox">
+                  <label>
+                    <input
+                      type="checkbox"
+                      name="hasRear"
+                      checked={editForm.hasRear}
+                      onChange={handleEditChange}
+                    />
+                    Achter heeft andere maat
+                  </label>
+                </div>
+                {editForm.hasRear && (
+                  <>
+                    <div className="form-row">
+                      <label htmlFor="editRearWidth">Breedte achter (cm):</label>
+                      <input
+                        id="editRearWidth"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        name="rearWidth"
+                        value={editForm.rearWidth}
+                        onChange={handleEditChange}
+                        required
+                      />
+                    </div>
+                    <div className="form-row">
+                      <label htmlFor="editRearHeight">Hoogte achter (cm):</label>
+                      <input
+                        id="editRearHeight"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        name="rearHeight"
+                        value={editForm.rearHeight}
+                        onChange={handleEditChange}
+                        required
+                      />
+                    </div>
+                  </>
+                )}
+                <Button type="submit" variant="primary" className="mt">
+                  Bijwerken
+                </Button>
+              </form>
+            </Card>
+            <Card title="Kinderauto verwijderen">
+              <form onSubmit={handleDeleteSubmit} className="mb-lg">
+                <div className="form-row">
+                  <label htmlFor="deleteSelect">Selecteer:</label>
+                  <select
+                    id="deleteSelect"
+                    value={deleteName}
+                    onChange={(e) => setDeleteName(e.target.value)}
+                  >
+                    {options.map((opt) => (
+                      <option key={opt.name} value={opt.name}>
+                        {opt.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <Button type="submit" variant="ghost" className="mt">
+                  Verwijder
+                </Button>
+              </form>
+            </Card>
+          </aside>
+        </div>
+      )}
+      {toast && <div className="toast">Opgeslagen</div>}
+    </PageTransition>
+  );
+}

Kenteken-Gen-1-main/src/frontend/LandingPage.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from './components/Header.jsx';
+import { Button } from './components/Button.jsx';
+import { PageTransition } from './components/PageTransition.jsx';
+import { loadCars } from './carStorage.js';
+import { motion, useReducedMotion } from 'framer-motion';
+import logo from './assets/CarKiddologo.png';
+
+export default function LandingPage() {
+  const navigate = useNavigate();
+  const [count, setCount] = useState(0);
+  const reduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    loadCars().then((opts) => setCount(opts.length));
+  }, []);
+
+  return (
+    <PageTransition>
+      <div className="hero-bg" />
+      <Header count={count} />
+      <div className="start-container">
+        <div className="start-card">
+          <motion.img
+            src={logo}
+            alt="CarKiddo"
+            className="w-20 h-20 sm:w-24 sm:h-24 mx-auto rounded-2xl"
+            initial={reduceMotion ? false : { scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.4, type: 'spring', stiffness: 200 }}
+          />
+          <motion.h1
+            className="text-2xl sm:text-3xl font-bold tracking-tight"
+            initial={reduceMotion ? false : { y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.1, duration: 0.3 }}
+          >
+            Kenteken Generator
+          </motion.h1>
+          <motion.p
+            className="subtle text-sm sm:text-base -mt-1"
+            initial={reduceMotion ? false : { y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.2, duration: 0.3 }}
+          >
+            Genereer kentekens voor {count} kinderauto's
+          </motion.p>
+          <motion.div
+            className="flex flex-col gap-3 mt-2"
+            initial={reduceMotion ? false : { y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.3, duration: 0.3 }}
+          >
+            <Button onClick={() => navigate('/generate')} variant="primary">
+              Kentekens genereren
+            </Button>
+            <Button onClick={() => navigate('/manage')} variant="ghost">
+              Kinderauto's beheren
+            </Button>
+          </motion.div>
+        </div>
+      </div>
+    </PageTransition>
+  );
+}

Kenteken-Gen-1-main/src/frontend/LicensePlateApp.jsx

@@ -0,0 +1,630 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Header } from './components/Header.jsx';
+import { Button } from './components/Button.jsx';
+import { PageTransition } from './components/PageTransition.jsx';
+import { useNavigate } from 'react-router-dom';
+import dutchPlate from './assets/kentekentv.png';
+import belgianPlate from './assets/belgischekentekenv2.png';
+import germanPlate from './assets/duitskenteken.png';
+import dutchFlag from './assets/dutchflag.png';
+import belgiumFlag from './assets/belgiumflag.png';
+import germanFlag from './assets/duitsevlag.svg';
+import logolangLogo from './assets/logolang.png';
+import kentekenFontUrl from './assets/Kenteken.ttf';
+import { loadCars } from './carStorage.js';
+
+// Browsers assume 96 DPI when printing images on A4 paper. Converting
+// centimeters with this resolution ensures the generated plates have the
+// intended physical dimensions when downloaded or printed.
+export const DEFAULT_DPI = 96;
+
+export function mmToPx(mm, dpi = DEFAULT_DPI) {
+  return (mm / 25.4) * dpi;
+}
+
+export function cmToPx(cm, dpi = DEFAULT_DPI) {
+  return mmToPx(cm * 10, dpi);
+}
+
+export default function LicensePlateApp() {
+  const [options, setOptions] = useState([]);
+  const [plates, setPlates] = useState([]);
+  const [previews, setPreviews] = useState([]);
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+  const frontRefs = useRef([]);
+  const rearRefs = useRef([]);
+  const frontTextConfigs = useRef([]);
+  const rearTextConfigs = useRef([]);
+  const navigate = useNavigate();
+  const countryOptions = [
+    { code: 'NL', label: 'Nederland', flag: dutchFlag, alt: 'Nederlandse vlag' },
+    { code: 'BE', label: 'België', flag: belgiumFlag, alt: 'Belgische vlag' },
+    { code: 'DE', label: 'Duitsland', flag: germanFlag, alt: 'Duitse vlag' },
+  ];
+
+  useEffect(() => {
+    loadCars().then((opts) => {
+      const sorted = [...opts].sort((a, b) => a.name.localeCompare(b.name));
+      setOptions(sorted);
+      setPlates([
+        {
+          carName: sorted[0]?.name || '',
+          front: 'AB-123-CD',
+          rear: 'AB-123-CD',
+          country: 'NL',
+        },
+      ]);
+      setPreviews([{ front: '', rear: '' }]);
+    });
+  }, []);
+
+  useEffect(() => {
+    document.fonts.load('bold 50px KentekenFont').then(() => setFontsLoaded(true));
+  }, []);
+
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  const measureTextWidth = (text, size, fontWeightValue) => {
+    ctx.font = `${fontWeightValue} ${size}px KentekenFont, monospace`;
+    return ctx.measureText(text).width;
+  };
+
+  const getFontSize = (text, baseFontSize, maxTextWidth, fontWeightValue) => {
+    let size = baseFontSize;
+    const processed = text.replace(/ /g, '\u00A0');
+    while (
+      measureTextWidth(processed, size, fontWeightValue) > maxTextWidth &&
+      size > 1
+    ) {
+      size -= 1;
+    }
+    return size;
+  };
+
+  const svgToPng = async (svg, textConfig = null) => {
+    if (!svg) return '';
+    await document.fonts.ready;
+    // Explicitly load KentekenFont for canvas use (document.fonts.ready
+    // only covers fonts currently in use in the DOM layout)
+    if (textConfig) {
+      try {
+        await document.fonts.load(`${textConfig.fontWeight} ${textConfig.fontSize}px KentekenFont`);
+      } catch (_) { /* ignore */ }
+    }
+    const clone = svg.cloneNode(true);
+    const images = clone.querySelectorAll('image');
+    await Promise.all(
+      Array.from(images).map(async (img) => {
+        const href = img.getAttribute('href');
+        const response = await fetch(href);
+        const blob = await response.blob();
+        const dataUrl = await new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result);
+          reader.readAsDataURL(blob);
+        });
+        img.setAttribute('href', dataUrl);
+      })
+    );
+    const fontResponse = await fetch(kentekenFontUrl);
+    const fontBlob = await fontResponse.blob();
+    const fontDataUrl = await new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(fontBlob);
+    });
+    const style = document.createElement('style');
+    style.textContent = `@font-face { font-family: 'KentekenFont'; src: url(${fontDataUrl}) format('truetype'); }`;
+    clone.insertBefore(style, clone.firstChild);
+    const xml = new XMLSerializer().serializeToString(clone);
+    const svg64 = btoa(unescape(encodeURIComponent(xml)));
+    const image64 = `data:image/svg+xml;base64,${svg64}`;
+    return await new Promise((resolve) => {
+      const imgEl = new Image();
+      imgEl.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = imgEl.width;
+        canvas.height = imgEl.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(imgEl, 0, 0);
+        if (textConfig) {
+          // The SVG uses preserveAspectRatio="xMidYMid meet" (default), so the
+          // plate image is scaled uniformly and centred within the canvas.
+          // Use that same uniform scale for text so it stays inside the plate.
+          const renderW = textConfig.renderWidth || imgEl.width;
+          const renderH = textConfig.renderHeight || imgEl.height;
+          const scaleX = renderW / textConfig.baseWidth;
+          const scaleY = renderH / textConfig.baseHeight;
+          const uniformScale = Math.min(scaleX, scaleY);
+          const offsetX = (renderW - textConfig.baseWidth * uniformScale) / 2;
+          const offsetY = (renderH - textConfig.baseHeight * uniformScale) / 2;
+          const canvasFontSize = textConfig.fontSize * uniformScale;
+          const canvasX = textConfig.x * uniformScale + offsetX;
+          const canvasY = textConfig.y * uniformScale + offsetY;
+          ctx.font = `${textConfig.fontWeight} ${canvasFontSize}px KentekenFont, monospace`;
+          ctx.fillStyle = textConfig.textColor;
+          ctx.textAlign = textConfig.textAnchor === 'middle' ? 'center' : 'left';
+          ctx.textBaseline = 'middle';
+          if (textConfig.dropShadow.stdDeviation > 0) {
+            ctx.shadowOffsetX = textConfig.dropShadow.dx * uniformScale;
+            ctx.shadowOffsetY = textConfig.dropShadow.dy * uniformScale;
+            ctx.shadowBlur = textConfig.dropShadow.stdDeviation * uniformScale;
+            ctx.shadowColor = textConfig.shadowColor;
+          }
+          ctx.fillText(textConfig.text, canvasX, canvasY);
+        }
+        resolve(canvas.toDataURL('image/png'));
+      };
+      imgEl.src = image64;
+    });
+  };
+
+  const downloadCombinedPlates = async () => {
+    const frontUrls = [];
+    const rearUrls = [];
+    const dims = [];
+    for (let i = 0; i < plates.length; i++) {
+      const car =
+        options.find((o) => o.name === plates[i].carName) || options[0];
+      const hasRear = car.rearWidth && car.rearHeight;
+      const frontWidth = cmToPx(car.width);
+      const frontHeight = cmToPx(car.height);
+      const rearWidth = hasRear ? cmToPx(car.rearWidth) : frontWidth;
+      const rearHeight = hasRear ? cmToPx(car.rearHeight) : frontHeight;
+      frontUrls.push(await svgToPng(frontRefs.current[i], frontTextConfigs.current[i]));
+      rearUrls.push(await svgToPng(rearRefs.current[i], rearTextConfigs.current[i]));
+      dims.push({ frontWidth, frontHeight, rearWidth, rearHeight });
+    }
+
+    const a4Width = cmToPx(21);
+    const a4Height = cmToPx(29.7);
+    const margin = cmToPx(1.5);
+    const gap = 15;
+    const maxWidth = Math.max(
+      ...dims.map((d) => Math.max(d.frontWidth, d.rearWidth))
+    );
+    const totalHeight = dims.reduce(
+      (sum, d) => sum + d.frontHeight + d.rearHeight,
+      0
+    );
+    const nImages = dims.length * 2;
+    const scale = Math.min(
+      1,
+      (a4Width - margin) / maxWidth,
+      (a4Height - gap * (nImages - 1)) / totalHeight
+    );
+
+    const canvas = document.createElement('canvas');
+    canvas.width = a4Width;
+    canvas.height = a4Height;
+    const ctx = canvas.getContext('2d');
+
+    const loadImage = (url) =>
+      new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.src = url;
+      });
+
+    let y = 0;
+    for (let i = 0; i < plates.length; i++) {
+      const fImg = await loadImage(frontUrls[i]);
+      ctx.drawImage(
+        fImg,
+        margin,
+        y,
+        fImg.width * scale,
+        fImg.height * scale
+      );
+      y += dims[i].frontHeight * scale + gap;
+      const rImg = await loadImage(rearUrls[i]);
+      ctx.drawImage(
+        rImg,
+        margin,
+        y,
+        rImg.width * scale,
+        rImg.height * scale
+      );
+      y += dims[i].rearHeight * scale;
+      if (i < plates.length - 1) y += gap;
+    }
+
+    const dataUrl = canvas.toDataURL('image/png');
+    const a = document.createElement('a');
+    a.download = 'kentekens.png';
+    a.href = dataUrl;
+    a.click();
+  };
+
+  const openPrintPreview = async () => {
+    const items = [];
+    for (let i = 0; i < plates.length; i++) {
+      const car =
+        options.find((o) => o.name === plates[i].carName) || options[0];
+      const hasRear = car.rearWidth && car.rearHeight;
+      const frontWidth = car.width * 10;
+      const frontHeight = car.height * 10;
+      const rearWidth = hasRear ? car.rearWidth * 10 : frontWidth;
+      const rearHeight = hasRear ? car.rearHeight * 10 : frontHeight;
+      const frontUrl = await svgToPng(frontRefs.current[i], frontTextConfigs.current[i]);
+      const rearUrl = await svgToPng(rearRefs.current[i], rearTextConfigs.current[i]);
+      items.push({ src: frontUrl, width: frontWidth, height: frontHeight });
+      items.push({ src: rearUrl, width: rearWidth, height: rearHeight });
+    }
+    navigate('/print', { state: { items } });
+  };
+
+  useEffect(() => {
+    if (!fontsLoaded) return;
+    const renderPreviews = async () => {
+      const newPreviews = [];
+      for (let i = 0; i < plates.length; i++) {
+        const frontUrl = frontRefs.current[i]
+          ? await svgToPng(frontRefs.current[i], frontTextConfigs.current[i])
+          : '';
+        const rearUrl = rearRefs.current[i]
+          ? await svgToPng(rearRefs.current[i], rearTextConfigs.current[i])
+          : '';
+        newPreviews.push({ front: frontUrl, rear: rearUrl });
+      }
+      setPreviews(newPreviews);
+    };
+    renderPreviews();
+  }, [plates, options, fontsLoaded]);
+
+  const addPlate = () => {
+    setPlates((pls) => [
+      ...pls,
+      {
+        carName: options[0]?.name || '',
+        front: 'AB-123-CD',
+        rear: 'AB-123-CD',
+        country: 'NL',
+      },
+    ]);
+    setPreviews((prv) => [...prv, { front: '', rear: '' }]);
+  };
+
+  const updatePlate = (index, field, value) => {
+    setPlates((pls) => {
+      const updated = [...pls];
+      updated[index] = { ...updated[index], [field]: value };
+      return updated;
+    });
+  };
+
+  const removePlate = (index) => {
+    setPlates((pls) => pls.filter((_, i) => i !== index));
+    setPreviews((prv) => prv.filter((_, i) => i !== index));
+    frontRefs.current.splice(index, 1);
+    rearRefs.current.splice(index, 1);
+  };
+
+  return (
+    <PageTransition>
+      <Header
+        count={options.length}
+        onRestart={() => window.location.reload()}
+        onHome={() => navigate('/')}
+      />
+      <div className="container dashboard">
+        <div className="card">
+          {plates.map((plate, i) => {
+            const car = options.find((o) => o.name === plate.carName) || options[0];
+            const hasRear = car.rearWidth && car.rearHeight;
+            const frontWidth = cmToPx(car.width);
+            const frontHeight = cmToPx(car.height);
+            const rearWidthPx = hasRear ? cmToPx(car.rearWidth) : frontWidth;
+            const rearHeightPx = hasRear ? cmToPx(car.rearHeight) : frontHeight;
+            const country = plate.country;
+            const countryConfig = {
+              NL: {
+                baseWidth: 624,
+                baseHeight: 139,
+                plateImage: dutchPlate,
+                flag: dutchFlag,
+                euWidthRatio: 0.096,
+                fontWeight: 'bold',
+                textColor: '#000',
+                shadowColor: '#ffeb3b',
+                dropShadow: { dx: 3, dy: 3, stdDeviation: 1 },
+                hasBottomBar: true,
+                allowsCentering: true,
+              },
+              BE: {
+                baseWidth: 1848,
+                baseHeight: 382,
+                plateImage: belgianPlate,
+                flag: belgiumFlag,
+                euWidthRatio: 0.098,
+                fontWeight: 'normal',
+                textColor: '#a51f1f',
+                shadowColor: '#a51f1f',
+                dropShadow: { dx: 0.5, dy: 0.5, stdDeviation: 0.2 },
+                hasBottomBar: false,
+                allowsCentering: true,
+              },
+              DE: {
+                baseWidth: 1668,
+                baseHeight: 360,
+                plateImage: germanPlate,
+                flag: germanFlag,
+                euWidthRatio: 0.11,
+                fontWeight: 'bold',
+                textColor: '#000',
+                shadowColor: 'transparent',
+                dropShadow: { dx: 0, dy: 0, stdDeviation: 0 },
+                hasBottomBar: false,
+                allowsCentering: true,
+              },
+            };
+            const selectedCountry = countryConfig[country] || countryConfig.NL;
+            const {
+              baseWidth,
+              baseHeight,
+              plateImage,
+              euWidthRatio,
+              fontWeight,
+              textColor,
+              shadowColor,
+              dropShadow,
+              hasBottomBar,
+              allowsCentering,
+            } = selectedCountry;
+            const euWidth = baseWidth * euWidthRatio;
+            // 0.52 ≈ 0.6 * 0.87: compensates for KentekenFont's glyph-height/em ratio
+            // being 0.906, vs the old SVG fallback font's ~0.716. Slightly increased
+            // from 0.47 per user feedback ("iets te klein").
+            const baseFontSize = baseHeight * 0.56;
+            const blackHeight = hasBottomBar ? baseHeight * 0.1 : 0;
+            const logoHeight = blackHeight * 0.9;
+            const logoWidth = logoHeight * (1481 / 240);
+            const logoX = (baseWidth - logoWidth) / 2;
+            const logoY =
+              baseHeight - blackHeight + (blackHeight - logoHeight) / 2;
+            const maxTextWidth = baseWidth - euWidth - 20;
+            const fontWeightValue = fontWeight;
+            const textCenterY = hasBottomBar
+              ? (baseHeight - blackHeight) / 2
+              : baseHeight / 2;
+            // Shift text slightly down: KentekenFont cap-height center sits
+            // slightly above the canvas em-midpoint.
+            const textY = textCenterY + baseFontSize * 0.13;
+            // Centered if text fits between the EU strip and the right edge.
+            const maxCenteredTextWidth = maxTextWidth;
+            const frontFontSize = getFontSize(
+              plate.front,
+              baseFontSize,
+              maxTextWidth,
+              fontWeightValue
+            );
+            const rearFontSize = getFontSize(
+              plate.rear,
+              baseFontSize,
+              maxTextWidth,
+              fontWeightValue
+            );
+            const frontTextWidth = measureTextWidth(
+              plate.front.replace(/ /g, '\u00A0'),
+              frontFontSize,
+              fontWeightValue
+            );
+            const rearTextWidth = measureTextWidth(
+              plate.rear.replace(/ /g, '\u00A0'),
+              rearFontSize,
+              fontWeightValue
+            );
+            const shouldCenterFront =
+              allowsCentering && frontTextWidth <= maxCenteredTextWidth;
+            const shouldCenterRear =
+              allowsCentering && rearTextWidth <= maxCenteredTextWidth;
+            const frontTextAnchor = shouldCenterFront ? 'middle' : 'start';
+            const rearTextAnchor = shouldCenterRear ? 'middle' : 'start';
+            const frontTextX = shouldCenterFront
+              ? euWidth + (baseWidth - euWidth) / 2
+              : euWidth + 10;
+            const rearTextX = shouldCenterRear
+              ? euWidth + (baseWidth - euWidth) / 2
+              : euWidth + 10;
+            const bottomBarRatio = hasBottomBar ? 0.1 : 0;
+            frontTextConfigs.current[i] = {
+              text: plate.front.replace(/ /g, '\u00A0'),
+              x: frontTextX,
+              y: textY,
+              textAnchor: frontTextAnchor,
+              fontSize: frontFontSize,
+              fontWeight: fontWeightValue,
+              textColor,
+              shadowColor,
+              dropShadow,
+              baseWidth,
+              baseHeight,
+              renderWidth: frontWidth,
+              renderHeight: frontHeight,
+              bottomBarRatio,
+            };
+            rearTextConfigs.current[i] = {
+              text: plate.rear.replace(/ /g, '\u00A0'),
+              x: rearTextX,
+              y: textY,
+              textAnchor: rearTextAnchor,
+              fontSize: rearFontSize,
+              fontWeight: fontWeightValue,
+              textColor,
+              shadowColor,
+              dropShadow,
+              baseWidth,
+              baseHeight,
+              renderWidth: rearWidthPx,
+              renderHeight: rearHeightPx,
+              bottomBarRatio,
+            };
+            return (
+              <div key={i} className="plate-block">
+                <div className="flex-1">
+                  <div
+                    className="flag-selector mb"
+                    role="group"
+                    aria-label="Kies land voor kenteken"
+                  >
+                    {countryOptions.map((option) => (
+                      <button
+                        key={option.code}
+                        type="button"
+                        onClick={() => updatePlate(i, 'country', option.code)}
+                        className={`flag-option ${
+                          country === option.code ? 'selected' : ''
+                        }`}
+                      >
+                        <img src={option.flag} alt={option.alt} />
+                        <span>{option.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                  <div className="form-row mb">
+                    <label htmlFor={`car-${i}`}>Kinderauto:</label>
+                    <select
+                      id={`car-${i}`}
+                      value={plate.carName}
+                      onChange={(e) =>
+                        updatePlate(i, 'carName', e.target.value)
+                      }
+                    >
+                      {options.map((opt) => (
+                        <option key={opt.name} value={opt.name}>
+                          {opt.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="form-row mb">
+                    <label htmlFor={`front-${i}`}>{`Kenteken voor ${i + 1}:`}</label>
+                    <input
+                      id={`front-${i}`}
+                      value={plate.front}
+                      onChange={(e) =>
+                        updatePlate(i, 'front', e.target.value.toUpperCase())
+                      }
+                      aria-label={`Plate text front ${i + 1}`}
+                      className="font-[KentekenFont] uppercase"
+                    />
+                  </div>
+                  <div className="form-row mb">
+                    <label htmlFor={`rear-${i}`}>{`Kenteken achter ${i + 1}:`}</label>
+                    <input
+                      id={`rear-${i}`}
+                      value={plate.rear}
+                      onChange={(e) =>
+                        updatePlate(i, 'rear', e.target.value.toUpperCase())
+                      }
+                      aria-label={`Plate text rear ${i + 1}`}
+                      className="font-[KentekenFont] uppercase"
+                    />
+                  </div>
+                  {plates.length > 1 && (
+                    <Button
+                      type="button"
+                      onClick={() => removePlate(i)}
+                      variant="ghost"
+                      className="mt"
+                    >
+                      Verwijder kenteken
+                    </Button>
+                  )}
+                </div>
+                <div className="flex-1 flex flex-col items-center">
+                  <svg
+                    ref={(el) => (frontRefs.current[i] = el)}
+                    width={frontWidth}
+                    height={frontHeight}
+                    className="hidden"
+                    viewBox={`0 0 ${baseWidth} ${baseHeight}`}
+                  >
+                    <image href={plateImage} width={baseWidth} height={baseHeight} />
+                    {country === 'NL' && (
+                      <>
+                        <rect
+                          x="0"
+                          y={baseHeight - blackHeight}
+                          width={baseWidth}
+                          height={blackHeight}
+                          fill="#000"
+                        />
+                        <image
+                          href={logolangLogo}
+                          x={logoX}
+                          y={logoY}
+                          width={logoWidth}
+                          height={logoHeight}
+                        />
+                      </>
+                    )}
+                  </svg>
+                  {previews[i] && previews[i].front && (
+                    <motion.img
+                      src={previews[i].front}
+                      alt={`Kenteken voor ${i + 1}`}
+                      className="plate-preview"
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.25 }}
+                    />
+                  )}
+                  <svg
+                    ref={(el) => (rearRefs.current[i] = el)}
+                    width={rearWidthPx}
+                    height={rearHeightPx}
+                    className="hidden"
+                    viewBox={`0 0 ${baseWidth} ${baseHeight}`}
+                  >
+                    <image href={plateImage} width={baseWidth} height={baseHeight} />
+                    {country === 'NL' && (
+                      <>
+                        <rect
+                          x="0"
+                          y={baseHeight - blackHeight}
+                          width={baseWidth}
+                          height={blackHeight}
+                          fill="#000"
+                        />
+                        <image
+                          href={logolangLogo}
+                          x={logoX}
+                          y={logoY}
+                          width={logoWidth}
+                          height={logoHeight}
+                        />
+                      </>
+                    )}
+                  </svg>
+                  {previews[i] && previews[i].rear && (
+                    <motion.img
+                      src={previews[i].rear}
+                      alt={`Kenteken achter ${i + 1}`}
+                      className="plate-preview"
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.25 }}
+                    />
+                  )}
+                </div>
+              </div>
+            );
+          })}
+          <Button type="button" onClick={addPlate} variant="primary" className="mt">
+            Nog een kenteken
+          </Button>
+          <div className="button-row">
+            <Button type="button" onClick={downloadCombinedPlates} variant="ghost">
+              Download kentekens
+            </Button>
+            <Button type="button" onClick={openPrintPreview} variant="ghost">
+              Print kentekens
+            </Button>
+          </div>
+        </div>
+      </div>
+    </PageTransition>
+  );
+}

Kenteken-Gen-1-main/src/frontend/assets/duitsevlag.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
+	<desc>Flag of Germany</desc>
+	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
+	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
+	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
+</svg>

Kenteken-Gen-1-main/src/frontend/assets/license_plate.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="120" viewBox="0 0 512 120">
+  <rect x="4.8" y="4.8" width="502.4" height="110.4" rx="21.6" ry="21.6" fill="#FCD116" stroke="#000" stroke-width="9.6"/>
+  <rect width="24" height="120" fill="#003399"/>
+  <g transform="translate(12,60)">
+    <g id="star">
+      <polygon points="0,-4 1.2,-1.236 3.804,-1.236 1.636,0.471 2.4,3.236 0,1.6 -2.4,3.236 -1.636,0.471 -3.804,-1.236 -1.2,-1.236" fill="#FFCC00"/>
+    </g>
+    <use href="#star" transform="rotate(0) translate(0,-8)"/>
+    <use href="#star" transform="rotate(30) translate(0,-8)"/>
+    <use href="#star" transform="rotate(60) translate(0,-8)"/>
+    <use href="#star" transform="rotate(90) translate(0,-8)"/>
+    <use href="#star" transform="rotate(120) translate(0,-8)"/>
+    <use href="#star" transform="rotate(150) translate(0,-8)"/>
+    <use href="#star" transform="rotate(180) translate(0,-8)"/>
+    <use href="#star" transform="rotate(210) translate(0,-8)"/>
+    <use href="#star" transform="rotate(240) translate(0,-8)"/>
+    <use href="#star" transform="rotate(270) translate(0,-8)"/>
+    <use href="#star" transform="rotate(300) translate(0,-8)"/>
+    <use href="#star" transform="rotate(330) translate(0,-8)"/>
+  </g>
+  <text x="12" y="96" font-family="sans-serif" font-size="42" font-weight="bold" fill="#ffffff" text-anchor="middle">NL</text>
+</svg>

Kenteken-Gen-1-main/src/frontend/carOptions.json

@@ -0,0 +1,498 @@
+[
+  {
+    "name": "Aprilia",
+    "width": 10,
+    "height": 6.5
+  },
+  {
+    "name": "AUDI E-TRON",
+    "width": 15,
+    "height": 3.3
+  },
+  {
+    "name": "AUDI HORCH",
+    "width": 22.5,
+    "height": 3.6
+  },
+  {
+    "name": "AUDI Q5 GROOT",
+    "width": 21.1,
+    "height": 4.7
+  },
+  {
+    "name": "AUDI R8",
+    "width": 12.7,
+    "height": 2.7
+  },
+  {
+    "name": "Audi R8 GROOT",
+    "width": 14.5,
+    "height": 3.7
+  },
+  {
+    "name": "AUDI RS-GT",
+    "width": 11,
+    "height": 2.6
+  },
+  {
+    "name": "AUDI RS6",
+    "width": 13.1,
+    "height": 2.9
+  },
+  {
+    "name": "Audi RSQ8",
+    "width": 13,
+    "height": 2.9
+  },
+  {
+    "name": "Bentley bentayga",
+    "width": 16.6,
+    "height": 3
+  },
+  {
+    "name": "BENTLEY BENTAYGA",
+    "width": 16.3,
+    "height": 3
+  },
+  {
+    "name": "Bentley Continental",
+    "width": 16.8,
+    "height": 4.2
+  },
+  {
+    "name": "Bentley EXP12",
+    "width": 14.4,
+    "height": 3.5
+  },
+  {
+    "name": "BMW I4 1 Persoons",
+    "width": 14.7,
+    "height": 2
+  },
+  {
+    "name": "BMW M5",
+    "width": 17.2,
+    "height": 3.5
+  },
+  {
+    "name": "BMW M5 Loopauto",
+    "width": 7.8,
+    "height": 1.6
+  },
+  {
+    "name": "BMW MOTOR",
+    "width": 13.5,
+    "height": 6
+  },
+  {
+    "name": "BMW POLITIE MOTOR",
+    "width": 10,
+    "height": 2.8
+  },
+  {
+    "name": "BMW X6 2-persoons",
+    "width": 19.3,
+    "height": 4.5
+  },
+  {
+    "name": "Brandweer/Politie Loopauto",
+    "width": 8,
+    "height": 3
+  },
+  {
+    "name": "Brandweerauto",
+    "width": 10,
+    "height": 2.5
+  },
+  {
+    "name": "BROTHERS JEEP",
+    "width": 16,
+    "height": 2.8
+  },
+  {
+    "name": "BUGATTI DIVO",
+    "width": 16.7,
+    "height": 3.8
+  },
+  {
+    "name": "BUGGY ALPHA 24V",
+    "width": 16,
+    "height": 4.7
+  },
+  {
+    "name": "BUGGY POLTIE/ZWART",
+    "width": 13.9,
+    "height": 9
+  },
+  {
+    "name": "Camo Buggy Groot",
+    "width": 14.2,
+    "height": 3.6
+  },
+  {
+    "name": "CAN-AM Maverick",
+    "width": 14,
+    "height": 2.5
+  },
+  {
+    "name": "CHINO tractor",
+    "width": 11.5,
+    "height": 2.5
+  },
+  {
+    "name": "DODGE POLITIE",
+    "width": 11,
+    "height": 4.5
+  },
+  {
+    "name": "Driftkart",
+    "width": 8,
+    "height": 2.9
+  },
+  {
+    "name": "Ducati crossmotor",
+    "width": 14.3,
+    "height": 5.9
+  },
+  {
+    "name": "FIAT 500C loopauto",
+    "width": 9,
+    "height": 2.5
+  },
+  {
+    "name": "FORD LOOPAUTO",
+    "width": 10,
+    "height": 2.6
+  },
+  {
+    "name": "g",
+    "width": 14.5,
+    "height": 3.5
+  },
+  {
+    "name": "G63 1-pers XL 24V",
+    "width": 15.1,
+    "height": 3.5
+  },
+  {
+    "name": "G63 2-persoon CHROOM",
+    "width": 16.8,
+    "height": 3.6
+  },
+  {
+    "name": "G63 XXL 2-p",
+    "width": 20.8,
+    "height": 4.2
+  },
+  {
+    "name": "GLADIATOR jeep",
+    "width": 12.3,
+    "height": 3.7
+  },
+  {
+    "name": "Heftruck",
+    "width": 17.5,
+    "height": 3.5
+  },
+  {
+    "name": "High SPEED BUGGY",
+    "width": 22,
+    "height": 5.2
+  },
+  {
+    "name": "Jaguar SVR",
+    "width": 14.2,
+    "height": 3
+  },
+  {
+    "name": "John Deere Ground Loader",
+    "width": 12,
+    "height": 3
+  },
+  {
+    "name": "Kleine G650 Nieuw mini",
+    "width": 13.8,
+    "height": 3
+  },
+  {
+    "name": "KLEINE Maybach G650",
+    "width": 15.1,
+    "height": 2.6
+  },
+  {
+    "name": "LAMBO Aventador 2-persoons",
+    "width": 15.2,
+    "height": 3.9
+  },
+  {
+    "name": "Lamborghin Aventador",
+    "width": 12.5,
+    "height": 3
+  },
+  {
+    "name": "LAMBORGHINI GT",
+    "width": 8,
+    "height": 1.8
+  },
+  {
+    "name": "LAMBORGHINI HURACAN",
+    "width": 12,
+    "height": 3
+  },
+  {
+    "name": "Lamborghini Huracan 2-persoons",
+    "width": 15.2,
+    "height": 3.1
+  },
+  {
+    "name": "Lamborghini Sian",
+    "width": 9.8,
+    "height": 2.7
+  },
+  {
+    "name": "LAMBORGHINI STO",
+    "width": 14.5,
+    "height": 2.6
+  },
+  {
+    "name": "Lamborghini SV",
+    "width": 12.5,
+    "height": 3
+  },
+  {
+    "name": "Lamborghini Urus",
+    "width": 20.2,
+    "height": 3.2,
+    "rearWidth": 15.4,
+    "rearHeight": 3.6
+  },
+  {
+    "name": "Lamborghini Urus KLEIN",
+    "width": 9.4,
+    "height": 2.6,
+    "rearWidth": 12,
+    "rearHeight": 2.9
+  },
+  {
+    "name": "LAMBORGHINI VENENO",
+    "width": 15,
+    "height": 2.5
+  },
+  {
+    "name": "LOOPAUTO C63",
+    "width": 6.6,
+    "height": 1.6
+  },
+  {
+    "name": "MACLAREN",
+    "width": 15.1,
+    "height": 3.9
+  },
+  {
+    "name": "Maseratti",
+    "width": 13.7,
+    "height": 2.6
+  },
+  {
+    "name": "MCLAREN QUAD",
+    "width": 10,
+    "height": 2.5
+  },
+  {
+    "name": "Mercedes 300S",
+    "width": 14,
+    "height": 4.4
+  },
+  {
+    "name": "Mercedes 300s loopauto",
+    "width": 11,
+    "height": 2.8
+  },
+  {
+    "name": "Mercedes 6x6 klein",
+    "width": 12,
+    "height": 2.2
+  },
+  {
+    "name": "Mercedes Actros",
+    "width": 10.8,
+    "height": 2.3,
+    "rearWidth": 20,
+    "rearHeight": 4
+  },
+  {
+    "name": "Mercedes C63s",
+    "width": 13.8,
+    "height": 2.9
+  },
+  {
+    "name": "Mercedes G63 24V 1 Persoons",
+    "width": 15.3,
+    "height": 3.5
+  },
+  {
+    "name": "Mercedes G63 6X6",
+    "width": 15.8,
+    "height": 3.8
+  },
+  {
+    "name": "Mercedes G63 6x6 2-Persoons",
+    "width": 18.7,
+    "height": 3.8
+  },
+  {
+    "name": "Mercedes G63 KLEIN",
+    "width": 13.3,
+    "height": 3.2
+  },
+  {
+    "name": "Mercedes G650 Maybach BIG",
+    "width": 23.2,
+    "height": 4.3
+  },
+  {
+    "name": "MERCEDES GLC 2-zits",
+    "width": 19,
+    "height": 4.2
+  },
+  {
+    "name": "Mercedes GLC63",
+    "width": 15.6,
+    "height": 3.2
+  },
+  {
+    "name": "Mercedes GTR",
+    "width": 13.1,
+    "height": 2.7,
+    "rearWidth": 13.3,
+    "rearHeight": 2.9
+  },
+  {
+    "name": "Mercedes Loopauto",
+    "width": 7.35,
+    "height": 1.65,
+    "rearWidth": 9.6,
+    "rearHeight": 1.5
+  },
+  {
+    "name": "Mercedes M-CLASS",
+    "width": 15.6,
+    "height": 3.2
+  },
+  {
+    "name": "Mercedes S klasse",
+    "width": 16,
+    "height": 3.35
+  },
+  {
+    "name": "Mercedes Unimog",
+    "width": 15,
+    "height": 3.5
+  },
+  {
+    "name": "Miniquad 6V",
+    "width": 10,
+    "height": 3
+  },
+  {
+    "name": "Monster truck",
+    "width": 15,
+    "height": 3
+  },
+  {
+    "name": "NEW HOLLAND TRACTOR",
+    "width": 16.5,
+    "height": 4.5,
+    "rearWidth": 9.5,
+    "rearHeight": 4.5
+  },
+  {
+    "name": "Politie Dodge Charger SRT",
+    "width": 9.9,
+    "height": 4.2
+  },
+  {
+    "name": "QUAD 1000W",
+    "width": 8.2,
+    "height": 2.8
+  },
+  {
+    "name": "QUAD 800W ACHTER",
+    "width": 8.5,
+    "height": 3.2
+  },
+  {
+    "name": "RANGE ROVER 2-PERSOONS",
+    "width": 17.8,
+    "height": 5
+  },
+  {
+    "name": "Range Rover EVOQUE",
+    "width": 14.1,
+    "height": 3.1
+  },
+  {
+    "name": "Range Rover Velar",
+    "width": 15.3,
+    "height": 3.4
+  },
+  {
+    "name": "SIAN 2-P",
+    "width": 13.4,
+    "height": 3.4
+  },
+  {
+    "name": "Super truck",
+    "width": 13.7,
+    "height": 3.5
+  },
+  {
+    "name": "TOYOTA HILUX",
+    "width": 14.8,
+    "height": 4.1
+  },
+  {
+    "name": "Tractor Loopauto",
+    "width": 9.5,
+    "height": 2
+  },
+  {
+    "name": "TRIKE",
+    "width": 12,
+    "height": 7
+  },
+  {
+    "name": "UTV",
+    "width": 14.5,
+    "height": 3,
+    "rearWidth": 10,
+    "rearHeight": 3
+  },
+  {
+    "name": "UTV BUGGY",
+    "width": 13.8,
+    "height": 3.5,
+    "rearWidth": 21.5,
+    "rearHeight": 3.5
+  },
+  {
+    "name": "Vespa",
+    "width": 10.5,
+    "height": 3
+  },
+  {
+    "name": "VOLVO S90",
+    "width": 17,
+    "height": 3.9
+  },
+  {
+    "name": "WILLY 1-PERSOON",
+    "width": 15,
+    "height": 3.5
+  },
+  {
+    "name": "Willy's jeep",
+    "width": 20,
+    "height": 4
+  }
+]

Kenteken-Gen-1-main/src/frontend/carStorage.js

@@ -0,0 +1,67 @@
+import defaultCars from './carOptions.json';
+
+const normalizeCars = (cars) =>
+  Array.isArray(cars) && cars.length ? cars : defaultCars;
+
+export const loadCars = async () => {
+  try {
+    const res = await fetch('/api/cars');
+    if (!res.ok) throw new Error('Failed to load cars');
+    const cars = await res.json();
+    return normalizeCars(cars);
+  } catch {
+    return normalizeCars(defaultCars);
+  }
+};
+
+export const saveCars = async (cars) => {
+  const normalized = normalizeCars(cars);
+  try {
+    await fetch('/api/cars', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(normalized),
+    });
+  } catch {
+    // silently fail
+  }
+};
+
+export const addCar = async (car) => {
+  const res = await fetch('/api/cars', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(car),
+  });
+  if (!res.ok) throw new Error('Failed to add car');
+  return res.json();
+};
+
+export const updateCar = async (id, car) => {
+  const res = await fetch(`/api/cars/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(car),
+  });
+  if (!res.ok) throw new Error('Failed to update car');
+  return res.json();
+};
+
+export const deleteCarById = async (id) => {
+  const res = await fetch(`/api/cars/${id}`, {
+    method: 'DELETE',
+  });
+  if (!res.ok) throw new Error('Failed to delete car');
+  return res.json();
+};
+
+export const verifyPassword = async (password) => {
+  const res = await fetch('/api/auth/verify', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) return false;
+  const data = await res.json();
+  return data.authenticated;
+};

Kenteken-Gen-1-main/src/frontend/components/Button.jsx

@@ -0,0 +1,18 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+export function Button({ variant = 'primary', className = '', children, ...props }) {
+  const reduceMotion = useReducedMotion();
+  const variantClass =
+    variant === 'ghost' ? 'btn-ghost' : variant === 'primary' ? 'btn-primary' : '';
+  const combined = ['btn', variantClass, className].filter(Boolean).join(' ');
+  return (
+    <motion.button
+      className={combined}
+      whileHover={reduceMotion ? undefined : { y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.2)' }}
+      whileTap={reduceMotion ? undefined : { scale: 0.98 }}
+      {...props}
+    >
+      {children}
+    </motion.button>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/Card.jsx

@@ -0,0 +1,9 @@
+export function Card({ title, subtitle, children }) {
+  return (
+    <div className="card space-y-2">
+      {title && <h2 className="text-lg font-semibold">{title}</h2>}
+      {subtitle && <p className="subtle">{subtitle}</p>}
+      {children}
+    </div>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/CountUp.jsx

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+export function CountUp({ value }) {
+  const [v, setV] = useState(0);
+  useEffect(() => {
+    const start = v;
+    const end = value;
+    const dur = 600;
+    const t0 = performance.now();
+    let raf;
+    const step = (t) => {
+      const p = Math.min(1, (t - t0) / dur);
+      setV(Math.round(start + (end - start) * p));
+      if (p < 1) raf = requestAnimationFrame(step);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [value]);
+  return <span>{v}</span>;
+}

Kenteken-Gen-1-main/src/frontend/components/Header.jsx

@@ -0,0 +1,69 @@
+import { CountUp } from './CountUp.jsx';
+import { ArrowPathIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { motion, useReducedMotion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import logo from '../assets/logolang.png';
+import { Button } from './Button.jsx';
+
+export function Header({ count, title = 'Kenteken Generator', onRestart, onHome }) {
+  const navigate = useNavigate();
+  const reduceMotion = useReducedMotion();
+  return (
+    <motion.header
+      className="header"
+      initial={reduceMotion ? { opacity: 1 } : { y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: reduceMotion ? 0 : 0.28 }}
+    >
+      <div className="header-inner">
+        <div
+          className="flex items-center gap-2 sm:gap-3 cursor-pointer min-w-0"
+          onClick={() => navigate('/generate')}
+        >
+          <motion.img
+            src={logo}
+            alt="CarKiddo"
+            className="header-logo"
+            whileHover={reduceMotion ? undefined : { rotate: 2, y: -1 }}
+            transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+          />
+          <motion.div
+            className="header-title truncate"
+            initial={reduceMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            {title}
+          </motion.div>
+        </div>
+        <div className="header-right">
+          <div className="header-stat">
+            <CountUp value={count} /> auto's
+          </div>
+          {onHome && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="header-btn"
+              onClick={onHome}
+            >
+              <HomeIcon className="w-4 h-4" />
+              <span className="hidden sm:inline">Home</span>
+            </Button>
+          )}
+          {onRestart && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="header-btn"
+              onClick={onRestart}
+            >
+              <ArrowPathIcon className="w-4 h-4" />
+              <span className="hidden sm:inline">Opnieuw</span>
+            </Button>
+          )}
+        </div>
+      </div>
+    </motion.header>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/PageTransition.jsx

@@ -0,0 +1,15 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+export function PageTransition({ children }) {
+  const reduce = useReducedMotion();
+  return (
+    <motion.div
+      initial={reduce ? { opacity: 1 } : { opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={reduce ? { opacity: 1 } : { opacity: 0, y: -8 }}
+      transition={{ duration: reduce ? 0 : 0.28 }}
+    >
+      {children}
+    </motion.div>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/PlateForm.jsx

@@ -0,0 +1,7 @@
+export function PlateForm({ children, onSubmit }) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      {children}
+    </form>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/PreviewCard.jsx

@@ -0,0 +1,14 @@
+import { motion } from 'framer-motion';
+
+export function PreviewCard({ children }) {
+  return (
+    <motion.div
+      className="preview-card"
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.25 }}
+    >
+      {children}
+    </motion.div>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/StatCard.jsx

@@ -0,0 +1,10 @@
+import { CountUp } from './CountUp.jsx';
+
+export function StatCard({ value, label }) {
+  return (
+    <div className="card stat-card">
+      <div className="stat-value"><CountUp value={value} /></div>
+      <div className="stat-label subtle">{label}</div>
+    </div>
+  );
+}

Kenteken-Gen-1-main/src/frontend/components/Toast.jsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export function Toast({ message, onClose }) {
+  useEffect(() => {
+    if (!message) return;
+    const t = setTimeout(() => onClose && onClose(), 3000);
+    return () => clearTimeout(t);
+  }, [message, onClose]);
+  return (
+    <AnimatePresence>
+      {message && (
+        <motion.div
+          className="toast"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+        >
+          {message}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

Kenteken-Gen-1-main/src/frontend/fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "KentekenFont";
+  src: url("./assets/Kenteken.ttf") format("truetype");
+}

Kenteken-Gen-1-main/src/frontend/index.css

@@ -0,0 +1,275 @@
+@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html, body, #root {
+    @apply h-full;
+  }
+  body {
+    @apply antialiased;
+    background-color: rgb(var(--bg));
+    color: rgb(var(--text));
+    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  /* ── Layout ── */
+  .container {
+    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  /* ── Cards ── */
+  .card {
+    @apply rounded-2xl border p-5 sm:p-6;
+    background-color: rgb(var(--surface));
+    border-color: rgb(var(--border));
+    box-shadow: var(--shadow);
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .card:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow), 0 0 0 1px rgb(var(--border));
+  }
+
+  /* ── Buttons ── */
+  .btn {
+    @apply inline-flex items-center justify-center rounded-xl px-5 py-2.5 font-semibold transition-all duration-200 focus:outline-none focus:ring-2 text-sm sm:text-base cursor-pointer select-none;
+    min-height: 44px;
+  }
+  .btn-primary {
+    background-color: rgb(var(--accent));
+    color: rgb(var(--accent-contrast));
+    box-shadow: 0 0 20px rgba(var(--glow) / 0.25);
+  }
+  .btn-primary:hover {
+    background-color: rgb(var(--accent-hover));
+    box-shadow: 0 0 30px rgba(var(--glow) / 0.4);
+    transform: translateY(-1px);
+  }
+  .btn-primary:focus {
+    --tw-ring-color: rgb(var(--ring) / 0.5);
+  }
+  .btn-ghost {
+    color: rgb(var(--text));
+    background-color: rgb(var(--surface));
+    border: 1px solid rgb(var(--border));
+  }
+  .btn-ghost:hover {
+    background-color: rgb(var(--border));
+    transform: translateY(-1px);
+  }
+  .btn-ghost:focus {
+    --tw-ring-color: rgb(var(--ring) / 0.5);
+  }
+
+  /* ── Inputs - CRUCIAAL: specifieke selectors om browser defaults te overriden ── */
+  input[type="text"],
+  input[type="password"],
+  input[type="number"],
+  input[type="email"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="url"],
+  input:not([type]),
+  select,
+  textarea {
+    @apply w-full rounded-xl px-4 py-3 transition-all duration-200 focus:outline-none;
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: rgb(var(--surface-input)) !important;
+    border: 1px solid rgb(var(--border));
+    color: rgb(var(--text-input)) !important;
+    min-height: 48px;
+    font-size: 16px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
+  }
+  input[type="text"]:focus,
+  input[type="password"]:focus,
+  input[type="number"]:focus,
+  input[type="email"]:focus,
+  input[type="search"]:focus,
+  input[type="tel"]:focus,
+  input[type="url"]:focus,
+  input:not([type]):focus,
+  select:focus,
+  textarea:focus {
+    border-color: rgb(var(--accent));
+    box-shadow: 0 0 0 3px rgba(var(--ring) / 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.06);
+    outline: none;
+  }
+  input::placeholder, textarea::placeholder {
+    color: rgb(var(--muted));
+    opacity: 0.7;
+  }
+  select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    padding-right: 40px;
+  }
+  input[type="checkbox"] {
+    @apply w-5 h-5 rounded;
+    appearance: auto;
+    -webkit-appearance: auto;
+    accent-color: rgb(var(--accent));
+    min-height: auto;
+  }
+  label {
+    @apply block text-sm font-medium mb-1.5;
+    color: rgb(var(--muted));
+    letter-spacing: 0.01em;
+  }
+
+  /* ── Typography ── */
+  .subtle {
+    color: rgb(var(--muted));
+  }
+
+  /* ── Header ── */
+  .header {
+    @apply sticky top-0 z-30 border-b;
+    background-color: rgba(var(--bg) / 0.8);
+    border-color: rgb(var(--border));
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+  }
+  .header-inner {
+    @apply container flex items-center justify-between py-3 gap-3;
+  }
+  .header-title {
+    @apply text-xs sm:text-sm font-semibold tracking-tight;
+  }
+  .header-logo {
+    @apply h-8 sm:h-10 w-auto;
+  }
+  .header-right {
+    @apply flex items-center gap-1.5 sm:gap-3 flex-shrink-0;
+  }
+  .header-stat {
+    @apply hidden sm:flex items-center gap-1.5 text-sm;
+    color: rgb(var(--muted));
+  }
+  .header-btn {
+    @apply px-2.5 sm:px-3 py-1.5 text-xs flex items-center gap-1 rounded-lg;
+    min-height: 36px;
+    border: 1px solid rgb(var(--border));
+    background-color: rgb(var(--surface));
+    color: rgb(var(--text));
+    transition: all 0.15s;
+  }
+  .header-btn:hover {
+    background-color: rgb(var(--border));
+  }
+
+  /* ── Flag Selector ── */
+  .flag-selector {
+    @apply flex justify-center items-stretch gap-2 sm:gap-3 mb-5;
+  }
+  .flag-option {
+    @apply flex flex-col items-center gap-1.5 sm:gap-2 rounded-xl px-3 sm:px-4 py-2.5 text-xs font-medium transition-all duration-200;
+    color: rgb(var(--muted));
+    background: rgb(var(--surface));
+    border: 1px solid rgb(var(--border));
+    cursor: pointer;
+    flex: 1;
+    max-width: 120px;
+  }
+  .flag-option img {
+    @apply w-12 sm:w-16 rounded-md transition-transform duration-200;
+  }
+  .flag-option:hover {
+    border-color: rgb(var(--muted));
+    transform: translateY(-1px);
+  }
+  .flag-option:hover img {
+    @apply scale-105;
+  }
+  .flag-option.selected {
+    border-color: rgb(var(--accent));
+    box-shadow: 0 0 16px rgba(var(--glow) / 0.2);
+    color: rgb(var(--text));
+    background: rgba(var(--accent) / 0.08);
+  }
+
+  /* ── Dashboard / Grid ── */
+  .dashboard {
+    @apply grid gap-4 sm:gap-6 mt-5 sm:mt-6 grid-cols-1;
+    padding-bottom: 2rem;
+  }
+  .side-cards {
+    @apply grid gap-4 sm:gap-5 grid-cols-1 md:grid-cols-3;
+  }
+
+  /* ── Misc Components ── */
+  .preview-card {
+    @apply rounded-2xl p-4 sm:p-8 text-center;
+    background-color: rgba(var(--surface) / 0.6);
+    backdrop-filter: blur(12px);
+  }
+  .toast {
+    @apply fixed bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 px-5 py-3 rounded-xl shadow-lg z-50 text-sm font-medium;
+    background-color: rgb(var(--accent));
+    color: rgb(var(--accent-contrast));
+    box-shadow: 0 8px 24px rgba(var(--glow) / 0.3);
+  }
+  .stat-card {
+    @apply text-center;
+  }
+  .stat-value {
+    @apply text-3xl font-bold text-accent;
+  }
+  .stat-label {
+    @apply mt-1 text-sm;
+    color: rgb(var(--muted));
+  }
+  .button-row {
+    @apply flex gap-3 flex-wrap mt-5;
+  }
+  .plate-block {
+    @apply mb-5 sm:mb-6 pb-5 sm:pb-6 border-b last:border-b-0 flex flex-col gap-5 md:flex-row md:gap-8;
+    border-color: rgb(var(--border));
+  }
+
+  /* ── Spacing ── */
+  .mt { @apply mt-4; }
+  .mb { @apply mb-2; }
+  .mb-lg { @apply mb-6; }
+  .ml { @apply ml-2; }
+
+  /* ── Forms ── */
+  .form-row {
+    @apply flex flex-col gap-1.5 mb-3;
+  }
+  .form-row.checkbox {
+    @apply flex-row items-center gap-3;
+  }
+
+  /* ── Landing Page ── */
+  .start-container {
+    @apply flex items-center justify-center px-4;
+    height: calc(100vh - 4rem);
+    height: calc(100dvh - 4rem);
+  }
+  .start-card {
+    @apply flex flex-col gap-4 w-full max-w-sm text-center;
+  }
+
+  /* ── Hero Background Pattern ── */
+  .hero-bg {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background-color: rgb(var(--bg));
+    background-image: radial-gradient(rgba(var(--border)) 1px, transparent 1px);
+    background-size: 24px 24px;
+  }
+
+  /* ── Preview images ── */
+  .plate-preview {
+    @apply block mt-3 sm:mt-4 w-full h-auto rounded-lg;
+    max-width: 100%;
+  }
+}

Kenteken-Gen-1-main/src/frontend/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="nl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f3f3f3" media="(prefers-color-scheme: light)" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="icon" type="image/png" href="./assets/CarKiddologo.png" />
+    <link rel="apple-touch-icon" href="./assets/CarKiddologo.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Kenteken Generator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>

Kenteken-Gen-1-main/src/frontend/main.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
+import LicensePlateApp from './LicensePlateApp.jsx';
+import CarManager from './CarManager.jsx';
+import LandingPage from './LandingPage.jsx';
+import PrintPage from './routes/PrintPage.jsx';
+import './fonts.css';
+import './index.css';
+
+function AnimatedRoutes() {
+  const location = useLocation();
+  return (
+    <AnimatePresence mode="wait">
+      <Routes location={location} key={location.pathname}>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/generate" element={<LicensePlateApp />} />
+        <Route path="/manage" element={<CarManager />} />
+        <Route path="/print" element={<PrintPage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </AnimatePresence>
+  );
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <AnimatedRoutes />
+    </BrowserRouter>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

Kenteken-Gen-1-main/src/frontend/print.css

@@ -0,0 +1,76 @@
+@page {
+  size: A4;
+  margin: 10mm;
+}
+
+.a4-preview {
+  width: 100%;
+  max-width: 210mm;
+  min-height: 297mm;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  padding: 5mm;
+  box-sizing: border-box;
+  background: white;
+  overflow-x: auto;
+}
+
+@media (min-width: 800px) {
+  .a4-preview {
+    width: 210mm;
+    padding: 10mm;
+  }
+}
+
+.print-grid {
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(var(--plate-width, 100mm), 1fr));
+  gap: 8mm;
+  justify-content: flex-start;
+  align-content: flex-start;
+  justify-items: start;
+}
+
+.plate {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  display: block;
+}
+
+@media print {
+  html, body, #root {
+    height: auto !important;
+    min-height: 0 !important;
+    overflow: visible !important;
+  }
+  body {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .print-grid {
+    gap: 8mm;
+    justify-content: flex-start;
+    align-content: flex-start;
+  }
+  .plate {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+  header,
+  .no-print {
+    display: none !important;
+  }
+  .a4-preview {
+    width: auto;
+    height: auto;
+    min-height: 0;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  .container {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+}

Kenteken-Gen-1-main/src/frontend/routes/PrintPage.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Button } from '../components/Button.jsx';
+import { PageTransition } from '../components/PageTransition.jsx';
+import '../print.css';
+
+export default function PrintPage() {
+  const { state } = useLocation();
+  const items = state?.items || [];
+  const navigate = useNavigate();
+  const maxWidth = items.reduce((max, i) => Math.max(max, i.width), 0) || 100;
+
+  const handlePrint = () => {
+    const prev = document.title;
+    document.title = ' ';
+    window.print();
+    document.title = prev;
+  };
+
+  return (
+    <PageTransition>
+      <div className="container py-4">
+        <div className="no-print mb-4 flex gap-2">
+          <Button variant="ghost" onClick={() => navigate('/generate')}>Terug</Button>
+          <Button variant="primary" onClick={handlePrint}>Print</Button>
+        </div>
+        <div className="a4-preview">
+          <div className="print-grid" style={{ '--plate-width': `${maxWidth}mm` }}>
+            {items.map((item, idx) => (
+              <img
+                key={idx}
+                src={item.src}
+                alt={`plate-${idx}`}
+                className="plate"
+                style={{ width: `${item.width}mm`, height: `${item.height}mm` }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </PageTransition>
+  );
+}

Kenteken-Gen-1-main/src/frontend/tokens.css

@@ -0,0 +1,33 @@
+:root {
+  --bg: 10 10 10;
+  --surface: 23 23 23;
+  --surface-input: 30 30 30;
+  --muted: 161 161 161;
+  --accent: 59 130 246;
+  --accent-hover: 37 99 235;
+  --accent-contrast: 255 255 255;
+  --border: 38 38 38;
+  --ring: 59 130 246;
+  --shadow: 0 8px 32px rgba(0,0,0,0.4);
+  --text: 250 250 250;
+  --text-input: 250 250 250;
+  --glow: 59 130 246;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: 250 250 250;
+    --surface: 255 255 255;
+    --surface-input: 245 245 245;
+    --muted: 115 115 115;
+    --accent: 59 130 246;
+    --accent-hover: 37 99 235;
+    --accent-contrast: 255 255 255;
+    --border: 237 237 237;
+    --ring: 59 130 246;
+    --shadow: 0 8px 32px rgba(0,0,0,0.08);
+    --text: 23 23 23;
+    --text-input: 23 23 23;
+    --glow: 59 130 246;
+  }
+}

Kenteken-Gen-1-main/tailwind.config.js

@@ -0,0 +1,28 @@
+export default {
+  content: ['./src/frontend/**/*.{html,js,jsx,ts,tsx}'],
+  darkMode: 'media',
+  theme: {
+    extend: {
+      colors: {
+        accent: 'rgb(var(--accent) / <alpha-value>)',
+        'accent-hover': 'rgb(var(--accent-hover) / <alpha-value>)',
+        surface: 'rgb(var(--surface) / <alpha-value>)',
+        border: 'rgb(var(--border) / <alpha-value>)',
+        ring: 'rgb(var(--ring) / <alpha-value>)',
+        glow: 'rgb(var(--glow) / <alpha-value>)',
+      },
+      borderRadius: {
+        '2xl': '1rem',
+      },
+      boxShadow: {
+        fluent: '0 8px 32px rgba(0,0,0,0.25)',
+        glow: '0 0 20px rgba(59,130,246,0.3)',
+        'glow-lg': '0 0 40px rgba(59,130,246,0.4)',
+      },
+      fontSize: {
+        base: ['clamp(1rem,0.9rem+0.2vw,1.125rem)', { lineHeight: '1.5' }],
+      },
+    },
+  },
+  plugins: [],
+};

Kenteken-Gen-1-main/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  root: 'src/frontend',
+  base: '/',
+  build: {
+    outDir: '../../../dist',
+    emptyOutDir: true
+  },
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:3456'
+    }
+  }
+});

dist/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="nl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f3f3f3" media="(prefers-color-scheme: light)" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="icon" type="image/png" href="/assets/CarKiddologo-BJqJBuzL.png" />
+    <link rel="apple-touch-icon" href="/assets/CarKiddologo-BJqJBuzL.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Kenteken Generator</title>
+    <script type="module" crossorigin src="/assets/index-C-B8BNDb.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BGqLSz--.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

kenteken-gen.service

@@ -0,0 +1,16 @@
+[Unit]
+Description=Kenteken Generator Web App
+After=network.target
+
+[Service]
+Type=simple
+User=anisy
+WorkingDirectory=/home/anisy/projects/kentekengen/server
+ExecStart=/usr/bin/node /home/anisy/projects/kentekengen/server/index.js
+Restart=on-failure
+RestartSec=5
+Environment=NODE_ENV=production
+Environment=PORT=3456
+
+[Install]
+WantedBy=multi-user.target

kenteken.youztech.nl.nginx

@@ -0,0 +1,36 @@
+server {
+    listen 80;
+    listen [::]:80;
+    server_name kenteken.youztech.nl;
+
+    location /.well-known/acme-challenge/ {
+        root /var/www/html;
+    }
+
+    location / {
+        return 301 https://$host$request_uri;
+    }
+}
+
+server {
+    listen 443 ssl;
+    listen [::]:443 ssl;
+    server_name kenteken.youztech.nl;
+
+    ssl_certificate /etc/letsencrypt/live/kenteken.youztech.nl/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/kenteken.youztech.nl/privkey.pem;
+    include /etc/letsencrypt/options-ssl-nginx.conf;
+    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
+
+    location / {
+        proxy_pass http://127.0.0.1:3456;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+}

kenteken.youztech.nl.temp.nginx

@@ -0,0 +1,18 @@
+server {
+    listen 80;
+    listen [::]:80;
+    server_name kenteken.youztech.nl;
+
+    location /.well-known/acme-challenge/ {
+        root /var/www/html;
+    }
+
+    location / {
+        proxy_pass http://127.0.0.1:3456;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}

server/db.js

@@ -0,0 +1,124 @@
+import Database from 'better-sqlite3';
+import bcrypt from 'bcrypt';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { readFileSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const DB_PATH = join(__dirname, 'kenteken.db');
+
+let db;
+
+export function initDb() {
+  db = new Database(DB_PATH);
+  db.pragma('journal_mode = WAL');
+  db.pragma('foreign_keys = ON');
+
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS cars (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      name TEXT NOT NULL,
+      width REAL NOT NULL,
+      height REAL NOT NULL,
+      rearWidth REAL,
+      rearHeight REAL
+    )
+  `);
+
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS settings (
+      key TEXT PRIMARY KEY,
+      value TEXT NOT NULL
+    )
+  `);
+
+  // Seed the database with default cars if empty
+  const count = db.prepare('SELECT COUNT(*) as cnt FROM cars').get();
+  if (count.cnt === 0) {
+    seedDefaultCars();
+  }
+
+  // Set default admin password if not set
+  const pwd = db.prepare("SELECT value FROM settings WHERE key = 'admin_password'").get();
+  if (!pwd) {
+    const hash = bcrypt.hashSync('Rotterdam-010', 10);
+    db.prepare("INSERT INTO settings (key, value) VALUES ('admin_password', ?)").run(hash);
+  }
+}
+
+function seedDefaultCars() {
+  const defaultCarsPath = join(__dirname, '..', 'Kenteken-Gen-1-main', 'src', 'frontend', 'carOptions.json');
+  let defaultCars;
+  try {
+    defaultCars = JSON.parse(readFileSync(defaultCarsPath, 'utf-8'));
+  } catch {
+    // Fallback: try from shared-cars.json
+    try {
+      const sharedPath = join(__dirname, '..', 'Kenteken-Gen-1-main', 'shared-cars.json');
+      defaultCars = JSON.parse(readFileSync(sharedPath, 'utf-8'));
+    } catch {
+      defaultCars = [];
+    }
+  }
+
+  const insert = db.prepare(
+    'INSERT INTO cars (name, width, height, rearWidth, rearHeight) VALUES (?, ?, ?, ?, ?)'
+  );
+  const insertMany = db.transaction((cars) => {
+    for (const car of cars) {
+      insert.run(car.name, car.width, car.height, car.rearWidth || null, car.rearHeight || null);
+    }
+  });
+  insertMany(defaultCars);
+}
+
+export function getAllCars() {
+  return db.prepare('SELECT * FROM cars ORDER BY name COLLATE NOCASE').all();
+}
+
+export function addCar({ name, width, height, rearWidth, rearHeight }) {
+  const result = db.prepare(
+    'INSERT INTO cars (name, width, height, rearWidth, rearHeight) VALUES (?, ?, ?, ?, ?)'
+  ).run(name, width, height, rearWidth, rearHeight);
+  return db.prepare('SELECT * FROM cars WHERE id = ?').get(result.lastInsertRowid);
+}
+
+export function updateCar(id, { name, width, height, rearWidth, rearHeight }) {
+  const result = db.prepare(
+    'UPDATE cars SET name = ?, width = ?, height = ?, rearWidth = ?, rearHeight = ? WHERE id = ?'
+  ).run(name, width, height, rearWidth, rearHeight, id);
+  if (result.changes === 0) return null;
+  return db.prepare('SELECT * FROM cars WHERE id = ?').get(id);
+}
+
+export function deleteCar(id) {
+  const result = db.prepare('DELETE FROM cars WHERE id = ?').run(id);
+  return result.changes > 0;
+}
+
+export function replaceAllCars(cars) {
+  const tx = db.transaction(() => {
+    db.prepare('DELETE FROM cars').run();
+    const insert = db.prepare(
+      'INSERT INTO cars (name, width, height, rearWidth, rearHeight) VALUES (?, ?, ?, ?, ?)'
+    );
+    for (const car of cars) {
+      insert.run(
+        String(car.name || '').trim(),
+        Number(car.width) || 0,
+        Number(car.height) || 0,
+        car.rearWidth ? Number(car.rearWidth) : null,
+        car.rearHeight ? Number(car.rearHeight) : null
+      );
+    }
+  });
+  tx();
+}
+
+export function verifyPassword(password) {
+  const row = db.prepare("SELECT value FROM settings WHERE key = 'admin_password'").get();
+  if (!row) return false;
+  return bcrypt.compareSync(password, row.value);
+}

server/index.js

@@ -0,0 +1,122 @@
+import express from 'express';
+import helmet from 'helmet';
+import cors from 'cors';
+import rateLimit from 'express-rate-limit';
+import { initDb, getAllCars, addCar, updateCar, deleteCar, replaceAllCars, verifyPassword } from './db.js';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3456;
+
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+      fontSrc: ["'self'", "https://fonts.gstatic.com", "data:"],
+      imgSrc: ["'self'", "data:", "blob:"],
+      connectSrc: ["'self'"],
+    },
+  },
+}));
+app.use(cors());
+app.use(express.json({ limit: '1mb' }));
+
+const apiLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 200,
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+app.use('/api/', apiLimiter);
+
+const authLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 10,
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+initDb();
+
+// Serve static frontend files
+const distPath = join(__dirname, '..', 'dist');
+app.use(express.static(distPath));
+
+// API routes
+app.get('/api/cars', (_req, res) => {
+  const cars = getAllCars();
+  res.json(cars);
+});
+
+app.post('/api/cars', (req, res) => {
+  const { name, width, height, rearWidth, rearHeight } = req.body;
+  if (!name || typeof width !== 'number' || typeof height !== 'number') {
+    return res.status(400).json({ error: 'name, width en height zijn verplicht' });
+  }
+  if (width <= 0 || height <= 0) {
+    return res.status(400).json({ error: 'width en height moeten positief zijn' });
+  }
+  if (rearWidth !== undefined && (typeof rearWidth !== 'number' || rearWidth <= 0)) {
+    return res.status(400).json({ error: 'rearWidth moet een positief getal zijn' });
+  }
+  if (rearHeight !== undefined && (typeof rearHeight !== 'number' || rearHeight <= 0)) {
+    return res.status(400).json({ error: 'rearHeight moet een positief getal zijn' });
+  }
+  const car = addCar({ name: String(name).trim(), width, height, rearWidth: rearWidth || null, rearHeight: rearHeight || null });
+  res.status(201).json(car);
+});
+
+app.put('/api/cars/:id', (req, res) => {
+  const id = parseInt(req.params.id, 10);
+  const { name, width, height, rearWidth, rearHeight } = req.body;
+  if (!name || typeof width !== 'number' || typeof height !== 'number') {
+    return res.status(400).json({ error: 'name, width en height zijn verplicht' });
+  }
+  const car = updateCar(id, { name: String(name).trim(), width, height, rearWidth: rearWidth || null, rearHeight: rearHeight || null });
+  if (!car) {
+    return res.status(404).json({ error: 'Auto niet gevonden' });
+  }
+  res.json(car);
+});
+
+app.delete('/api/cars/:id', (req, res) => {
+  const id = parseInt(req.params.id, 10);
+  const deleted = deleteCar(id);
+  if (!deleted) {
+    return res.status(404).json({ error: 'Auto niet gevonden' });
+  }
+  res.json({ success: true });
+});
+
+app.put('/api/cars', (req, res) => {
+  const cars = req.body;
+  if (!Array.isArray(cars)) {
+    return res.status(400).json({ error: 'Array van auto\'s verwacht' });
+  }
+  replaceAllCars(cars);
+  res.json(getAllCars());
+});
+
+app.post('/api/auth/verify', authLimiter, (req, res) => {
+  const { password } = req.body;
+  if (!password) {
+    return res.status(400).json({ error: 'Wachtwoord is verplicht' });
+  }
+  const valid = verifyPassword(password);
+  res.json({ authenticated: valid });
+});
+
+// SPA fallback - serve index.html for all non-API routes
+app.get('*', (_req, res) => {
+  res.sendFile(join(distPath, 'index.html'));
+});
+
+app.listen(PORT, '127.0.0.1', () => {
+  console.log(`Kenteken Gen server draait op poort ${PORT}`);
+});

server/node_modules/.bin/color-support

@@ -0,0 +1 @@
+../color-support/bin.js

server/node_modules/.bin/mime

@@ -0,0 +1 @@
+../mime/cli.js

server/node_modules/.bin/mkdirp

@@ -0,0 +1 @@
+../mkdirp/bin/cmd.js

server/node_modules/.bin/node-pre-gyp

@@ -0,0 +1 @@
+../@mapbox/node-pre-gyp/bin/node-pre-gyp

server/node_modules/.bin/nopt

@@ -0,0 +1 @@
+../nopt/bin/nopt.js

server/node_modules/.bin/prebuild-install

@@ -0,0 +1 @@
+../prebuild-install/bin.js

server/node_modules/.bin/rc

@@ -0,0 +1 @@
+../rc/cli.js

server/node_modules/.bin/rimraf

@@ -0,0 +1 @@
+../rimraf/bin.js

server/node_modules/.bin/semver

@@ -0,0 +1 @@
+../semver/bin/semver.js

server/node_modules/@mapbox/node-pre-gyp/.github/workflows/codeql.yml

@@ -0,0 +1,74 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master" ]
+  schedule:
+    - cron: '24 5 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

server/node_modules/@mapbox/node-pre-gyp/CHANGELOG.md

@@ -0,0 +1,510 @@
+# node-pre-gyp changelog
+
+## 1.0.11
+- Fixes dependabot alert [CVE-2021-44906](https://nvd.nist.gov/vuln/detail/CVE-2021-44906)
+
+## 1.0.10
+- Upgraded minimist to 1.2.6 to address dependabot alert [CVE-2021-44906](https://nvd.nist.gov/vuln/detail/CVE-2021-44906)
+
+## 1.0.9
+- Upgraded node-fetch to 2.6.7 to address [CVE-2022-0235](https://www.cve.org/CVERecord?id=CVE-2022-0235)
+- Upgraded detect-libc to 2.0.0 to use non-blocking NodeJS(>=12) Report API
+
+## 1.0.8
+- Downgraded npmlog to maintain node v10 and v8 support (https://github.com/mapbox/node-pre-gyp/pull/624)
+
+## 1.0.7
+- Upgraded nyc and npmlog to address https://github.com/advisories/GHSA-93q8-gq69-wqmw
+
+## 1.0.6
+- Added node v17 to the internal node releases listing
+- Upgraded various dependencies declared in package.json to latest major versions (node-fetch from 2.6.1 to 2.6.5, npmlog from 4.1.2 to 5.01, semver from 7.3.4 to 7.3.5, and tar from 6.1.0 to 6.1.11)
+- Fixed bug in `staging_host` parameter (https://github.com/mapbox/node-pre-gyp/pull/590)
+
+
+## 1.0.5
+- Fix circular reference warning with node >= v14
+
+## 1.0.4
+- Added node v16 to the internal node releases listing
+
+## 1.0.3
+- Improved support configuring s3 uploads (solves https://github.com/mapbox/node-pre-gyp/issues/571)
+  - New options added in https://github.com/mapbox/node-pre-gyp/pull/576: 'bucket', 'region', and `s3ForcePathStyle`
+
+## 1.0.2
+- Fixed regression in proxy support (https://github.com/mapbox/node-pre-gyp/issues/572)
+
+## 1.0.1
+- Switched from mkdirp@1.0.4 to make-dir@3.1.0 to avoid this bug: https://github.com/isaacs/node-mkdirp/issues/31
+
+## 1.0.0
+- Module is now name-spaced at `@mapbox/node-pre-gyp` and the original `node-pre-gyp` is deprecated.
+- New: support for staging and production s3 targets (see README.md)
+- BREAKING: no longer supporting `node_pre_gyp_accessKeyId` & `node_pre_gyp_secretAccessKey`, use `AWS_ACCESS_KEY_ID` & `AWS_SECRET_ACCESS_KEY` instead to authenticate against s3 for `info`, `publish`, and `unpublish` commands.
+- Dropped node v6 support, added node v14 support
+- Switched tests to use mapbox-owned bucket for testing
+- Added coverage tracking and linting with eslint
+- Added back support for symlinks inside the tarball
+- Upgraded all test apps to N-API/node-addon-api
+- New: support for staging and production s3 targets (see README.md)
+- Added `node_pre_gyp_s3_host` env var which has priority over the `--s3_host` option or default.
+- Replaced needle with node-fetch
+- Added proxy support for node-fetch
+- Upgraded to mkdirp@1.x
+
+## 0.17.0
+- Got travis + appveyor green again
+- Added support for more node versions
+
+## 0.16.0
+
+- Added Node 15 support in the local database (https://github.com/mapbox/node-pre-gyp/pull/520)
+
+## 0.15.0
+
+- Bump dependency on `mkdirp` from `^0.5.1` to `^0.5.3` (https://github.com/mapbox/node-pre-gyp/pull/492)
+- Bump dependency on `needle` from `^2.2.1` to `^2.5.0` (https://github.com/mapbox/node-pre-gyp/pull/502)
+- Added Node 14 support in the local database (https://github.com/mapbox/node-pre-gyp/pull/501)
+
+## 0.14.0
+
+- Defer modules requires in napi.js (https://github.com/mapbox/node-pre-gyp/pull/434)
+- Bump dependency on `tar` from `^4` to `^4.4.2` (https://github.com/mapbox/node-pre-gyp/pull/454)
+- Support extracting compiled binary from local offline mirror (https://github.com/mapbox/node-pre-gyp/pull/459)
+- Added Node 13 support in the local database (https://github.com/mapbox/node-pre-gyp/pull/483)
+
+## 0.13.0
+
+- Added Node 12 support in the local database (https://github.com/mapbox/node-pre-gyp/pull/449)
+
+## 0.12.0
+
+- Fixed double-build problem with node v10 (https://github.com/mapbox/node-pre-gyp/pull/428)
+- Added node 11 support in the local database (https://github.com/mapbox/node-pre-gyp/pull/422)
+
+## 0.11.0
+
+- Fixed double-install problem with node v10
+- Significant N-API improvements (https://github.com/mapbox/node-pre-gyp/pull/405)
+
+## 0.10.3
+
+- Now will use `request` over `needle` if request is installed. By default `needle` is used for `https`. This should unbreak proxy support that regressed in v0.9.0
+
+## 0.10.2
+
+- Fixed rc/deep-extent security vulnerability
+- Fixed broken reinstall script do to incorrectly named get_best_napi_version
+
+## 0.10.1
+
+- Fix needle error event (@medns)
+
+## 0.10.0
+
+- Allow for a single-level module path when packing @allenluce (https://github.com/mapbox/node-pre-gyp/pull/371)
+- Log warnings instead of errors when falling back @xzyfer (https://github.com/mapbox/node-pre-gyp/pull/366)
+- Add Node.js v10 support to tests (https://github.com/mapbox/node-pre-gyp/pull/372)
+- Remove retire.js from CI (https://github.com/mapbox/node-pre-gyp/pull/372)
+- Remove support for Node.js v4 due to [EOL on April 30th, 2018](https://github.com/nodejs/Release/blob/7dd52354049cae99eed0e9fe01345b0722a86fde/schedule.json#L14)
+- Update appveyor tests to install default NPM version instead of NPM v2.x for all Windows builds (https://github.com/mapbox/node-pre-gyp/pull/375)
+
+## 0.9.1
+
+- Fixed regression (in v0.9.0) with support for http redirects @allenluce (https://github.com/mapbox/node-pre-gyp/pull/361)
+
+## 0.9.0
+
+- Switched from using `request` to `needle` to reduce size of module deps (https://github.com/mapbox/node-pre-gyp/pull/350)
+
+## 0.8.0
+
+- N-API support (@inspiredware)
+
+## 0.7.1
+
+- Upgraded to tar v4.x
+
+## 0.7.0
+
+ - Updated request and hawk (#347)
+ - Dropped node v0.10.x support
+
+## 0.6.40
+
+ - Improved error reporting if an install fails
+
+## 0.6.39
+
+ - Support for node v9
+ - Support for versioning on `{libc}` to allow binaries to work on non-glic linux systems like alpine linux
+
+
+## 0.6.38
+
+ - Maintaining compatibility (for v0.6.x series) with node v0.10.x
+
+## 0.6.37
+
+ - Solved one part of #276: now now deduce the node ABI from the major version for node >= 2 even when not stored in the abi_crosswalk.json
+ - Fixed docs to avoid mentioning the deprecated and dangerous `prepublish` in package.json (#291)
+ - Add new node versions to crosswalk
+ - Ported tests to use tape instead of mocha
+ - Got appveyor tests passing by downgrading npm and node-gyp
+
+## 0.6.36
+
+ - Removed the running of `testbinary` during install. Because this was regressed for so long, it is too dangerous to re-enable by default. Developers needing validation can call `node-pre-gyp testbinary` directory.
+ - Fixed regression in v0.6.35 for electron installs (now skipping binary validation which is not yet supported for electron)
+
+## 0.6.35
+
+ - No longer recommending `npm ls` in `prepublish` (#291)
+ - Fixed testbinary command (#283) @szdavid92
+
+## 0.6.34
+
+ - Added new node versions to crosswalk, including v8
+ - Upgraded deps to latest versions, started using `^` instead of `~` for all deps.
+
+## 0.6.33
+
+ - Improved support for yarn
+
+## 0.6.32
+
+ - Honor npm configuration for CA bundles (@heikkipora)
+ - Add node-pre-gyp and npm versions to user agent (@addaleax)
+ - Updated various deps
+ - Add known node version for v7.x
+
+## 0.6.31
+
+ - Updated various deps
+
+## 0.6.30
+
+ - Update to npmlog@4.x and semver@5.3.x
+ - Add known node version for v6.5.0
+
+## 0.6.29
+
+ - Add known node versions for v0.10.45, v0.12.14, v4.4.4, v5.11.1, and v6.1.0
+
+## 0.6.28
+
+ - Now more verbose when remote binaries are not available. This is needed since npm is increasingly more quiet by default
+   and users need to know why builds are falling back to source compiles that might then error out.
+
+## 0.6.27
+
+ - Add known node version for node v6
+ - Stopped bundling dependencies
+ - Documented method for module authors to avoid bundling node-pre-gyp
+   - See https://github.com/mapbox/node-pre-gyp/tree/master#configuring for details
+
+## 0.6.26
+
+ - Skip validation for nw runtime (https://github.com/mapbox/node-pre-gyp/pull/181) via @fleg
+
+## 0.6.25
+
+ - Improved support for auto-detection of electron runtime in `node-pre-gyp.find()`
+   - Pull request from @enlight - https://github.com/mapbox/node-pre-gyp/pull/187
+ - Add known node version for 4.4.1 and 5.9.1
+
+## 0.6.24
+
+ - Add known node version for 5.8.0, 5.9.0, and 4.4.0.
+
+## 0.6.23
+
+ - Add known node version for 0.10.43, 0.12.11, 4.3.2, and 5.7.1.
+
+## 0.6.22
+
+ - Add known node version for 4.3.1, and 5.7.0.
+
+## 0.6.21
+
+ - Add known node version for 0.10.42, 0.12.10, 4.3.0, and 5.6.0.
+
+## 0.6.20
+
+ - Add known node version for 4.2.5, 4.2.6, 5.4.0, 5.4.1,and 5.5.0.
+
+## 0.6.19
+
+ - Add known node version for 4.2.4
+
+## 0.6.18
+
+ - Add new known node versions for 0.10.x, 0.12.x, 4.x, and 5.x
+
+## 0.6.17
+
+ - Re-tagged to fix packaging problem of `Error: Cannot find module 'isarray'`
+
+## 0.6.16
+
+ - Added known version in crosswalk for 5.1.0.
+
+## 0.6.15
+
+ - Upgraded tar-pack (https://github.com/mapbox/node-pre-gyp/issues/182)
+ - Support custom binary hosting mirror (https://github.com/mapbox/node-pre-gyp/pull/170)
+ - Added known version in crosswalk for 4.2.2.
+
+## 0.6.14
+
+ - Added node 5.x version
+
+## 0.6.13
+
+ - Added more known node 4.x versions
+
+## 0.6.12
+
+ - Added support for [Electron](http://electron.atom.io/). Just pass the `--runtime=electron` flag when building/installing. Thanks @zcbenz
+
+## 0.6.11
+
+ - Added known node and io.js versions including more 3.x and 4.x versions
+
+## 0.6.10
+
+ - Added known node and io.js versions including 3.x and 4.x versions
+ - Upgraded `tar` dep
+
+## 0.6.9
+
+ - Upgraded `rc` dep
+ - Updated known io.js version: v2.4.0
+
+## 0.6.8
+
+ - Upgraded `semver` and `rimraf` deps
+ - Updated known node and io.js versions
+
+## 0.6.7
+
+ - Fixed `node_abi` versions for io.js 1.1.x -> 1.8.x (should be 43, but was stored as 42) (refs https://github.com/iojs/build/issues/94)
+
+## 0.6.6
+
+ - Updated with known io.js 2.0.0 version
+
+## 0.6.5
+
+ - Now respecting `npm_config_node_gyp` (https://github.com/npm/npm/pull/4887)
+ - Updated to semver@4.3.2
+ - Updated known node v0.12.x versions and io.js 1.x versions.
+
+## 0.6.4
+
+ - Improved support for `io.js` (@fengmk2)
+ - Test coverage improvements (@mikemorris)
+ - Fixed support for `--dist-url` that regressed in 0.6.3
+
+## 0.6.3
+
+ - Added support for passing raw options to node-gyp using `--` separator. Flags passed after
+   the `--` to `node-pre-gyp configure` will be passed directly to gyp while flags passed
+   after the `--` will be passed directly to make/visual studio.
+ - Added `node-pre-gyp configure` command to be able to call `node-gyp configure` directly
+ - Fix issue with require validation not working on windows 7 (@edgarsilva)
+
+## 0.6.2
+
+ - Support for io.js >= v1.0.2
+ - Deferred require of `request` and `tar` to help speed up command line usage of `node-pre-gyp`.
+
+## 0.6.1
+
+ - Fixed bundled `tar` version
+
+## 0.6.0
+
+ - BREAKING: node odd releases like v0.11.x now use `major.minor.patch` for `{node_abi}` instead of `NODE_MODULE_VERSION` (#124)
+ - Added support for `toolset` option in versioning. By default is an empty string but `--toolset` can be passed to publish or install to select alternative binaries that target a custom toolset like C++11. For example to target Visual Studio 2014 modules like node-sqlite3 use `--toolset=v140`.
+ - Added support for `--no-rollback` option to request that a failed binary test does not remove the binary module leaves it in place.
+ - Added support for `--update-binary` option to request an existing binary be re-installed and the check for a valid local module be skipped.
+ - Added support for passing build options from `npm` through `node-pre-gyp` to `node-gyp`: `--nodedir`, `--disturl`, `--python`, and `--msvs_version`
+
+## 0.5.31
+
+ - Added support for deducing node_abi for node.js runtime from previous release if the series is even
+ - Added support for --target=0.10.33
+
+## 0.5.30
+
+ - Repackaged with latest bundled deps
+
+## 0.5.29
+
+ - Added support for semver `build`.
+ - Fixed support for downloading from urls that include `+`.
+
+## 0.5.28
+
+ - Now reporting unix style paths only in reveal command
+
+## 0.5.27
+
+ - Fixed support for auto-detecting s3 bucket name when it contains `.` - @taavo
+ - Fixed support for installing when path contains a `'` - @halfdan
+ - Ported tests to mocha
+
+## 0.5.26
+
+ - Fix node-webkit support when `--target` option is not provided
+
+## 0.5.25
+
+ - Fix bundling of deps
+
+## 0.5.24
+
+ - Updated ABI crosswalk to incldue node v0.10.30 and v0.10.31
+
+## 0.5.23
+
+ - Added `reveal` command. Pass no options to get all versioning data as json. Pass a second arg to grab a single versioned property value
+ - Added support for `--silent` (shortcut for `--loglevel=silent`)
+
+## 0.5.22
+
+ - Fixed node-webkit versioning name (NOTE: node-webkit support still experimental)
+
+## 0.5.21
+
+ - New package to fix `shasum check failed` error with v0.5.20
+
+## 0.5.20
+
+ - Now versioning node-webkit binaries based on major.minor.patch - assuming no compatible ABI across versions (#90)
+
+## 0.5.19
+
+ - Updated to know about more node-webkit releases
+
+## 0.5.18
+
+ - Updated to know about more node-webkit releases
+
+## 0.5.17
+
+ - Updated to know about node v0.10.29 release
+
+## 0.5.16
+
+ - Now supporting all aws-sdk configuration parameters (http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/node-configuring.html) (#86)
+
+## 0.5.15
+
+ - Fixed installation of windows packages sub directories on unix systems (#84)
+
+## 0.5.14
+
+ - Finished support for cross building using `--target_platform` option (#82)
+ - Now skipping binary validation on install if target arch/platform do not match the host.
+ - Removed multi-arch validing for OS X since it required a FAT node.js binary
+
+## 0.5.13
+
+ - Fix problem in 0.5.12 whereby the wrong versions of mkdirp and semver where bundled.
+
+## 0.5.12
+
+ - Improved support for node-webkit (@Mithgol)
+
+## 0.5.11
+
+ - Updated target versions listing
+
+## 0.5.10
+
+ - Fixed handling of `-debug` flag passed directory to node-pre-gyp (#72)
+ - Added optional second arg to `node_pre_gyp.find` to customize the default versioning options used to locate the runtime binary
+ - Failed install due to `testbinary` check failure no longer leaves behind binary (#70)
+
+## 0.5.9
+
+ - Fixed regression in `testbinary` command causing installs to fail on windows with 0.5.7 (#60)
+
+## 0.5.8
+
+ - Started bundling deps
+
+## 0.5.7
+
+ - Fixed the `testbinary` check, which is used to determine whether to re-download or source compile, to work even in complex dependency situations (#63)
+ - Exposed the internal `testbinary` command in node-pre-gyp command line tool
+ - Fixed minor bug so that `fallback_to_build` option is always respected
+
+## 0.5.6
+
+ - Added support for versioning on the `name` value in `package.json` (#57).
+ - Moved to using streams for reading tarball when publishing (#52)
+
+## 0.5.5
+
+ - Improved binary validation that also now works with node-webkit (@Mithgol)
+ - Upgraded test apps to work with node v0.11.x
+ - Improved test coverage
+
+## 0.5.4
+
+ - No longer depends on external install of node-gyp for compiling builds.
+
+## 0.5.3
+
+ - Reverted fix for debian/nodejs since it broke windows (#45)
+
+## 0.5.2
+
+ - Support for debian systems where the node binary is named `nodejs` (#45)
+ - Added `bin/node-pre-gyp.cmd` to be able to run command on windows locally (npm creates an .npm automatically when globally installed)
+ - Updated abi-crosswalk with node v0.10.26 entry.
+
+## 0.5.1
+
+ - Various minor bug fixes, several improving windows support for publishing.
+
+## 0.5.0
+
+ - Changed property names in `binary` object: now required are `module_name`, `module_path`, and `host`.
+ - Now `module_path` supports versioning, which allows developers to opt-in to using a versioned install path (#18).
+ - Added `remote_path` which also supports versioning.
+ - Changed `remote_uri` to `host`.
+
+## 0.4.2
+
+ - Added support for `--target` flag to request cross-compile against a specific node/node-webkit version.
+ - Added preliminary support for node-webkit
+ - Fixed support for `--target_arch` option being respected in all cases.
+
+## 0.4.1
+
+ - Fixed exception when only stderr is available in binary test (@bendi / #31)
+
+## 0.4.0
+
+ - Enforce only `https:` based remote publishing access.
+ - Added `node-pre-gyp info` command to display listing of published binaries
+ - Added support for changing the directory node-pre-gyp should build in with the `-C/--directory` option.
+ - Added support for S3 prefixes.
+
+## 0.3.1
+
+ - Added `unpublish` command.
+ - Fixed module path construction in tests.
+ - Added ability to disable falling back to build behavior via `npm install --fallback-to-build=false` which overrides setting in a depedencies package.json `install` target.
+
+## 0.3.0
+
+ - Support for packaging all files in `module_path` directory - see `app4` for example
+ - Added `testpackage` command.
+ - Changed `clean` command to only delete `.node` not entire `build` directory since node-gyp will handle that.
+ - `.node` modules must be in a folder of there own since tar-pack will remove everything when it unpacks.

server/node_modules/@mapbox/node-pre-gyp/LICENSE

@@ -0,0 +1,27 @@
+Copyright (c), Mapbox
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright notice,
+      this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+    * Neither the name of node-pre-gyp nor the names of its contributors
+      may be used to endorse or promote products derived from this software
+      without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

server/node_modules/@mapbox/node-pre-gyp/README.md

@@ -0,0 +1,742 @@
+# @mapbox/node-pre-gyp
+
+#### @mapbox/node-pre-gyp makes it easy to publish and install Node.js C++ addons from binaries
+
+[![Build Status](https://travis-ci.com/mapbox/node-pre-gyp.svg?branch=master)](https://travis-ci.com/mapbox/node-pre-gyp)
+[![Build status](https://ci.appveyor.com/api/projects/status/3nxewb425y83c0gv)](https://ci.appveyor.com/project/Mapbox/node-pre-gyp)
+
+`@mapbox/node-pre-gyp` stands between [npm](https://github.com/npm/npm) and [node-gyp](https://github.com/Tootallnate/node-gyp) and offers a cross-platform method of binary deployment.
+
+### Special note on previous package
+
+On Feb 9th, 2021 `@mapbox/node-pre-gyp@1.0.0` was [released](./CHANGELOG.md). Older, unscoped versions that are not part of the `@mapbox` org are deprecated and only `@mapbox/node-pre-gyp` will see updates going forward. To upgrade to the new package do:
+
+```
+npm uninstall node-pre-gyp --save
+npm install @mapbox/node-pre-gyp --save
+```
+
+### Features
+
+ - A command line tool called `node-pre-gyp` that can install your package's C++ module from a binary.
+ - A variety of developer targeted commands for packaging, testing, and publishing binaries.
+ - A JavaScript module that can dynamically require your installed binary: `require('@mapbox/node-pre-gyp').find`
+
+For a hello world example of a module packaged with `node-pre-gyp` see <https://github.com/springmeyer/node-addon-example> and [the wiki ](https://github.com/mapbox/node-pre-gyp/wiki/Modules-using-node-pre-gyp) for real world examples.
+
+## Credits
+
+ - The module is modeled after [node-gyp](https://github.com/Tootallnate/node-gyp) by [@Tootallnate](https://github.com/Tootallnate)
+ - Motivation for initial development came from [@ErisDS](https://github.com/ErisDS) and the [Ghost Project](https://github.com/TryGhost/Ghost).
+ - Development is sponsored by [Mapbox](https://www.mapbox.com/)
+
+## FAQ
+
+See the [Frequently Ask Questions](https://github.com/mapbox/node-pre-gyp/wiki/FAQ).
+
+## Depends
+
+ - Node.js >= node v8.x
+
+## Install
+
+`node-pre-gyp` is designed to be installed as a local dependency of your Node.js C++ addon and accessed like:
+
+    ./node_modules/.bin/node-pre-gyp --help
+
+But you can also install it globally:
+
+    npm install @mapbox/node-pre-gyp -g
+
+## Usage
+
+### Commands
+
+View all possible commands:
+
+    node-pre-gyp --help
+
+- clean - Remove the entire folder containing the compiled .node module
+- install - Install pre-built binary for module
+- reinstall - Run "clean" and "install" at once
+- build - Compile the module by dispatching to node-gyp or nw-gyp
+- rebuild - Run "clean" and "build" at once
+- package - Pack binary into tarball
+- testpackage - Test that the staged package is valid
+- publish - Publish pre-built binary
+- unpublish - Unpublish pre-built binary
+- info - Fetch info on published binaries
+
+You can also chain commands:
+
+    node-pre-gyp clean build unpublish publish info
+
+### Options
+
+Options include:
+
+ - `-C/--directory`: run the command in this directory
+ - `--build-from-source`: build from source instead of using pre-built binary
+ - `--update-binary`: reinstall by replacing previously installed local binary with remote binary
+ - `--runtime=node-webkit`: customize the runtime: `node`, `electron` and `node-webkit` are the valid options
+ - `--fallback-to-build`: fallback to building from source if pre-built binary is not available
+ - `--target=0.4.0`: Pass the target node or node-webkit version to compile against
+ - `--target_arch=ia32`: Pass the target arch and override the host `arch`. Any value that is [supported by Node.js](https://nodejs.org/api/os.html#osarch) is valid.
+ - `--target_platform=win32`: Pass the target platform and override the host `platform`. Valid values are `linux`, `darwin`, `win32`, `sunos`, `freebsd`, `openbsd`, and `aix`.
+
+Both `--build-from-source` and `--fallback-to-build` can be passed alone or they can provide values. You can pass `--fallback-to-build=false` to override the option as declared in package.json. In addition to being able to pass `--build-from-source` you can also pass `--build-from-source=myapp` where `myapp` is the name of your module.
+
+For example: `npm install --build-from-source=myapp`. This is useful if:
+
+ - `myapp` is referenced in the package.json of a larger app and therefore `myapp` is being installed as a dependency with `npm install`.
+ - The larger app also depends on other modules installed with `node-pre-gyp`
+ - You only want to trigger a source compile for `myapp` and the other modules.
+
+### Configuring
+
+This is a guide to configuring your module to use node-pre-gyp.
+
+#### 1) Add new entries to your `package.json`
+
+ - Add `@mapbox/node-pre-gyp` to `dependencies`
+ - Add `aws-sdk` as a `devDependency`
+ - Add a custom `install` script
+ - Declare a `binary` object
+
+This looks like:
+
+```js
+    "dependencies"  : {
+      "@mapbox/node-pre-gyp": "1.x"
+    },
+    "devDependencies": {
+      "aws-sdk": "2.x"
+    }
+    "scripts": {
+        "install": "node-pre-gyp install --fallback-to-build"
+    },
+    "binary": {
+        "module_name": "your_module",
+        "module_path": "./lib/binding/",
+        "host": "https://your_module.s3-us-west-1.amazonaws.com"
+    }
+```
+
+For a full example see [node-addon-examples's package.json](https://github.com/springmeyer/node-addon-example/blob/master/package.json).
+
+Let's break this down:
+
+ - Dependencies need to list `node-pre-gyp`
+ - Your devDependencies should list `aws-sdk` so that you can run `node-pre-gyp publish` locally or a CI system. We recommend using `devDependencies` only since `aws-sdk` is large and not needed for `node-pre-gyp install` since it only uses http to fetch binaries
+ - Your `scripts` section should override the `install` target with `"install": "node-pre-gyp install --fallback-to-build"`. This allows node-pre-gyp to be used instead of the default npm behavior of always source compiling with `node-gyp` directly.
+ - Your package.json should contain a `binary` section describing key properties you provide to allow node-pre-gyp to package optimally. They are detailed below.
+
+Note: in the past we recommended putting `@mapbox/node-pre-gyp` in the `bundledDependencies`, but we no longer recommend this. In the past there were npm bugs (with node versions 0.10.x) that could lead to node-pre-gyp not being available at the right time during install (unless we bundled). This should no longer be the case. Also, for a time we recommended using `"preinstall": "npm install @mapbox/node-pre-gyp"` as an alternative method to avoid needing to bundle. But this did not behave predictably across all npm versions - see https://github.com/mapbox/node-pre-gyp/issues/260 for the details. So we do not recommend using `preinstall` to install `@mapbox/node-pre-gyp`. More history on this at https://github.com/strongloop/fsevents/issues/157#issuecomment-265545908.
+
+##### The `binary` object has three required properties
+
+###### module_name
+
+The name of your native node module. This value must:
+
+ - Match the name passed to [the NODE_MODULE macro](http://nodejs.org/api/addons.html#addons_hello_world)
+ - Must be a valid C variable name (e.g. it cannot contain `-`)
+ - Should not include the `.node` extension.
+
+###### module_path
+
+The location your native module is placed after a build. This should be an empty directory without other Javascript files. This entire directory will be packaged in the binary tarball. When installing from a remote package this directory will be overwritten with the contents of the tarball.
+
+Note: This property supports variables based on [Versioning](#versioning).
+
+###### host
+
+A url to the remote location where you've published tarball binaries (must be `https` not `http`).
+
+It is highly recommended that you use Amazon S3. The reasons are:
+
+  - Various node-pre-gyp commands like `publish` and `info` only work with an S3 host.
+  - S3 is a very solid hosting platform for distributing large files.
+  - We provide detail documentation for using [S3 hosting](#s3-hosting) with node-pre-gyp.
+
+Why then not require S3? Because while some applications using node-pre-gyp need to distribute binaries as large as 20-30 MB, others might have very small binaries and might wish to store them in a GitHub repo. This is not recommended, but if an author really wants to host in a non-S3 location then it should be possible.
+
+It should also be mentioned that there is an optional and entirely separate npm module called [node-pre-gyp-github](https://github.com/bchr02/node-pre-gyp-github) which is intended to complement node-pre-gyp and be installed along with it. It provides the ability to store and publish your binaries within your repositories GitHub Releases if you would rather not use S3 directly. Installation and usage instructions can be found [here](https://github.com/bchr02/node-pre-gyp-github), but the basic premise is that instead of using the ```node-pre-gyp publish``` command you would use ```node-pre-gyp-github publish```.
+
+##### The `binary` object other optional S3 properties
+
+If you are not using a standard s3 path like `bucket_name.s3(.-)region.amazonaws.com`, you might get an error on `publish` because node-pre-gyp extracts the region and bucket from the `host` url. For example, you may have an on-premises s3-compatible storage  server, or may have configured a specific dns redirecting to an s3  endpoint. In these cases, you can explicitly set the `region` and `bucket` properties to tell node-pre-gyp to use these values instead of guessing from the `host` property. The following values can be used in the `binary` section:
+
+###### host
+
+The url to the remote server root location (must be `https` not `http`).
+
+###### bucket
+
+The bucket name where your tarball binaries should be located.
+
+###### region
+
+Your S3 server region.
+
+###### s3ForcePathStyle
+
+Set `s3ForcePathStyle` to true if the endpoint url should not be prefixed with the bucket name. If false (default), the server endpoint would be  constructed as `bucket_name.your_server.com`.
+
+##### The `binary` object has optional properties
+
+###### remote_path
+
+It **is recommended** that you customize this property. This is an extra path to use for publishing and finding remote tarballs. The default value for `remote_path` is `""` meaning that if you do not provide it then all packages will be published at the base of the `host`. It is recommended to provide a value like `./{name}/v{version}` to help organize remote packages in the case that you choose to publish multiple node addons to the same `host`.
+
+Note: This property supports variables based on [Versioning](#versioning).
+
+###### package_name
+
+It is **not recommended** to override this property unless you are also overriding the `remote_path`. This is the versioned name of the remote tarball containing the binary `.node` module and any supporting files you've placed inside the `module_path` directory. Unless you specify `package_name` in your `package.json` then it defaults to `{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz` which allows your binary to work across node versions, platforms, and architectures. If you are using `remote_path` that is also versioned by `./{module_name}/v{version}` then you could remove these variables from the `package_name` and just use: `{node_abi}-{platform}-{arch}.tar.gz`. Then your remote tarball will be looked up at, for example, `https://example.com/your-module/v0.1.0/node-v11-linux-x64.tar.gz`.
+
+Avoiding the version of your module in the `package_name` and instead only embedding in a directory name can be useful when you want to make a quick tag of your module that does not change any C++ code. In this case you can just copy binaries to the new version behind the scenes like:
+
+```sh
+aws s3 sync --acl public-read s3://mapbox-node-binary/sqlite3/v3.0.3/ s3://mapbox-node-binary/sqlite3/v3.0.4/
+```
+
+Note: This property supports variables based on [Versioning](#versioning).
+
+#### 2) Add a new target to binding.gyp
+
+`node-pre-gyp` calls out to `node-gyp` to compile the module and passes variables along like [module_name](#module_name) and [module_path](#module_path).
+
+A new target must be added to `binding.gyp` that moves the compiled `.node` module from `./build/Release/module_name.node` into the directory specified by `module_path`.
+
+Add a target like this at the end of your `targets` list:
+
+```js
+    {
+      "target_name": "action_after_build",
+      "type": "none",
+      "dependencies": [ "<(module_name)" ],
+      "copies": [
+        {
+          "files": [ "<(PRODUCT_DIR)/<(module_name).node" ],
+          "destination": "<(module_path)"
+        }
+      ]
+    }
+```
+
+For a full example see [node-addon-example's binding.gyp](https://github.com/springmeyer/node-addon-example/blob/2ff60a8ded7f042864ad21db00c3a5a06cf47075/binding.gyp).
+
+#### 3) Dynamically require your `.node`
+
+Inside the main js file that requires your addon module you are likely currently doing:
+
+```js
+var binding = require('../build/Release/binding.node');
+```
+
+or:
+
+```js
+var bindings = require('./bindings')
+```
+
+Change those lines to:
+
+```js
+var binary = require('@mapbox/node-pre-gyp');
+var path = require('path');
+var binding_path = binary.find(path.resolve(path.join(__dirname,'./package.json')));
+var binding = require(binding_path);
+```
+
+For a full example see [node-addon-example's index.js](https://github.com/springmeyer/node-addon-example/blob/2ff60a8ded7f042864ad21db00c3a5a06cf47075/index.js#L1-L4)
+
+#### 4) Build and package your app
+
+Now build your module from source:
+
+    npm install --build-from-source
+
+The `--build-from-source` tells `node-pre-gyp` to not look for a remote package and instead dispatch to node-gyp to build.
+
+Now `node-pre-gyp` should now also be installed as a local dependency so the command line tool it offers can be found at `./node_modules/.bin/node-pre-gyp`.
+
+#### 5) Test
+
+Now `npm test` should work just as it did before.
+
+#### 6) Publish the tarball
+
+Then package your app:
+
+    ./node_modules/.bin/node-pre-gyp package
+
+Once packaged, now you can publish:
+
+    ./node_modules/.bin/node-pre-gyp publish
+
+Currently the `publish` command pushes your binary to S3. This requires:
+
+ - You have installed `aws-sdk` with `npm install aws-sdk`
+ - You have created a bucket already.
+ - The `host` points to an S3 http or https endpoint.
+ - You have configured node-pre-gyp to read your S3 credentials (see [S3 hosting](#s3-hosting) for details).
+
+You can also host your binaries elsewhere. To do this requires:
+
+ - You manually publish the binary created by the `package` command to an `https` endpoint
+ - Ensure that the `host` value points to your custom `https` endpoint.
+
+#### 7) Automate builds
+
+Now you need to publish builds for all the platforms and node versions you wish to support. This is best automated.
+
+ - See [Appveyor Automation](#appveyor-automation) for how to auto-publish builds on Windows.
+ - See [Travis Automation](#travis-automation) for how to auto-publish builds on OS X and Linux.
+
+#### 8) You're done!
+
+Now publish your module to the npm registry. Users will now be able to install your module from a binary.
+
+What will happen is this:
+
+1. `npm install <your package>` will pull from the npm registry
+2. npm will run the `install` script which will call out to `node-pre-gyp`
+3. `node-pre-gyp` will fetch the binary `.node` module and unpack in the right place
+4. Assuming that all worked, you are done
+
+If a a binary was not available for a given platform and `--fallback-to-build` was used then `node-gyp rebuild` will be called to try to source compile the module.
+
+#### 9) One more option
+
+It may be that you want to work with two s3 buckets, one for staging and one for production; this
+arrangement makes it less likely to accidentally overwrite a production binary. It also allows the production
+environment to have more restrictive permissions than staging while still enabling publishing when
+developing and testing.
+
+The binary.host property can be set at execution time. In order to do so all of the following conditions
+must be true.
+
+- binary.host is falsey or not present
+- binary.staging_host is not empty
+- binary.production_host is not empty
+
+If any of these checks fail then the operation will not perform execution time determination of the s3 target.
+
+If the command being executed is either "publish" or "unpublish" then the default is set to `binary.staging_host`. In all other cases
+the default is `binary.production_host`.
+
+The command-line options `--s3_host=staging` or `--s3_host=production` override the default. If `s3_host`
+is present and not `staging` or `production` an exception is thrown.
+
+This allows installing from staging by specifying `--s3_host=staging`. And it requires specifying
+`--s3_option=production` in order to publish to, or unpublish from, production, making accidental errors less likely.
+
+## Node-API Considerations
+
+[Node-API](https://nodejs.org/api/n-api.html#n_api_node_api), which was previously known as N-API, is an ABI-stable alternative to previous technologies such as [nan](https://github.com/nodejs/nan) which are tied to a specific Node runtime engine. Node-API is Node runtime engine agnostic and guarantees modules created today will continue to run, without changes, into the future.
+
+Using `node-pre-gyp` with Node-API projects requires a handful of additional configuration values and imposes some additional requirements.
+
+The most significant difference is that an Node-API module can be coded to target multiple  Node-API versions. Therefore, an Node-API module must declare in its `package.json` file which Node-API versions the module is designed to run against. In addition, since multiple builds may be required for a single module, path and file names must be specified in way that avoids naming conflicts.
+
+### The `napi_versions` array property
+
+A Node-API module must declare in its `package.json` file, the Node-API versions the module is intended to support. This is accomplished by including an `napi-versions` array property in the `binary` object. For example:
+
+```js
+"binary": {
+    "module_name": "your_module",
+    "module_path": "your_module_path",
+    "host": "https://your_bucket.s3-us-west-1.amazonaws.com",
+    "napi_versions": [1,3]
+  }
+```
+
+If the `napi_versions` array property is *not* present, `node-pre-gyp` operates as it always has. Including the `napi_versions` array property instructs `node-pre-gyp` that this is a Node-API module build.
+
+When the `napi_versions` array property is present, `node-pre-gyp` fires off multiple operations, one for each of the Node-API versions in the array. In the example above, two operations are initiated, one for Node-API version 1 and second for Node-API version 3. How this version number is communicated is described next.
+
+### The `napi_build_version` value
+
+For each of the Node-API module operations `node-pre-gyp` initiates, it ensures that the `napi_build_version` is set appropriately.
+
+This value is of importance in two areas:
+
+1. The C/C++ code which needs to know against which Node-API version it should compile.
+2. `node-pre-gyp` itself which must assign appropriate path and file names to avoid collisions.
+
+### Defining `NAPI_VERSION` for the C/C++ code
+
+The `napi_build_version` value is communicated to the C/C++ code by adding this code to the `binding.gyp` file:
+
+```
+"defines": [
+    "NAPI_VERSION=<(napi_build_version)",
+]
+```
+
+This ensures that `NAPI_VERSION`, an integer value, is declared appropriately to the C/C++ code for each build.
+
+> Note that earlier versions of this document recommended defining the symbol `NAPI_BUILD_VERSION`. `NAPI_VERSION` is preferred because it used by the Node-API C/C++ headers to configure the specific Node-API versions being requested.
+
+### Path and file naming requirements in `package.json`
+
+Since `node-pre-gyp` fires off multiple operations for each request, it is essential that path and file names be created in such a way as to avoid collisions. This is accomplished by imposing additional path and file naming requirements.
+
+Specifically, when performing Node-API builds, the `{napi_build_version}` text configuration value  *must* be present in the `module_path` property. In addition, the `{napi_build_version}` text configuration value  *must* be present in either the `remote_path` or `package_name` property. (No problem if it's in both.)
+
+Here's an example:
+
+```js
+"binary": {
+    "module_name": "your_module",
+    "module_path": "./lib/binding/napi-v{napi_build_version}",
+    "remote_path": "./{module_name}/v{version}/{configuration}/",
+    "package_name": "{platform}-{arch}-napi-v{napi_build_version}.tar.gz",
+    "host": "https://your_bucket.s3-us-west-1.amazonaws.com",
+    "napi_versions": [1,3]
+  }
+```
+
+## Supporting both Node-API and NAN builds
+
+You may have a legacy native add-on that you wish to continue supporting for those versions of Node that do not support Node-API, as you add Node-API support for later Node versions. This can be accomplished by specifying the `node_napi_label` configuration value in the package.json `binary.package_name` property.
+
+Placing the configuration value `node_napi_label` in the package.json `binary.package_name` property instructs `node-pre-gyp` to build all viable Node-API binaries supported by the current Node instance. If the current Node instance does not support Node-API, `node-pre-gyp` will request a traditional, non-Node-API build.
+
+The configuration value `node_napi_label` is set by `node-pre-gyp` to the type of build created, `napi` or `node`, and the version number. For Node-API builds, the string contains the Node-API version nad has values like `napi-v3`. For traditional, non-Node-API builds, the string contains the ABI version with values like `node-v46`.
+
+Here's how the `binary` configuration above might be changed to support both Node-API and NAN builds:
+
+```js
+"binary": {
+    "module_name": "your_module",
+    "module_path": "./lib/binding/{node_napi_label}",
+    "remote_path": "./{module_name}/v{version}/{configuration}/",
+    "package_name": "{platform}-{arch}-{node_napi_label}.tar.gz",
+    "host": "https://your_bucket.s3-us-west-1.amazonaws.com",
+    "napi_versions": [1,3]
+  }
+```
+
+The C/C++ symbol `NAPI_VERSION` can be used to distinguish Node-API and non-Node-API builds. The value of `NAPI_VERSION` is set to the integer Node-API version for Node-API builds and is set to `0` for non-Node-API builds.
+
+For example:
+
+```C
+#if NAPI_VERSION
+// Node-API code goes here
+#else
+// NAN code goes here
+#endif
+```
+
+### Two additional configuration values
+
+The following two configuration values, which were implemented in previous versions of `node-pre-gyp`, continue to exist, but have been replaced by the `node_napi_label` configuration value described above.
+
+1. `napi_version` If Node-API is supported by the currently executing Node instance, this value is the Node-API version number supported by Node. If Node-API is not supported, this value is an empty string.
+
+2. `node_abi_napi` If the value returned for `napi_version` is non empty, this value is `'napi'`. If the value returned for `napi_version` is empty, this value is the value returned for `node_abi`.
+
+These values are present for use in the `binding.gyp` file and may be used as `{napi_version}` and `{node_abi_napi}` for text substituion in the `binary` properties of the `package.json` file.
+
+## S3 Hosting
+
+You can host wherever you choose but S3 is cheap, `node-pre-gyp publish` expects it, and S3 can be integrated well with [Travis.ci](http://travis-ci.org) to automate builds for OS X and Ubuntu, and with [Appveyor](http://appveyor.com) to automate builds for Windows. Here is an approach to do this:
+
+First, get setup locally and test the workflow:
+
+#### 1) Create an S3 bucket
+
+And have your **key** and **secret key** ready for writing to the bucket.
+
+It is recommended to create a IAM user with a policy that only gives permissions to the specific bucket you plan to publish to. This can be done in the [IAM console](https://console.aws.amazon.com/iam/) by: 1) adding a new user, 2) choosing `Attach User Policy`, 3) Using the `Policy Generator`, 4) selecting `Amazon S3` for the service, 5) adding the actions: `DeleteObject`, `GetObject`, `GetObjectAcl`, `ListBucket`, `HeadBucket`, `PutObject`, `PutObjectAcl`, 6) adding an ARN of `arn:aws:s3:::bucket/*` (replacing `bucket` with your bucket name), and finally 7) clicking `Add Statement` and saving the policy. It should generate a policy like:
+
+```js
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "objects",
+            "Effect": "Allow",
+            "Action": [
+                "s3:PutObject",
+                "s3:GetObjectAcl",
+                "s3:GetObject",
+                "s3:DeleteObject",
+                "s3:PutObjectAcl"
+            ],
+            "Resource": "arn:aws:s3:::your-bucket-name/*"
+        },
+        {
+            "Sid": "bucket",
+            "Effect": "Allow",
+            "Action": "s3:ListBucket",
+            "Resource": "arn:aws:s3:::your-bucket-name"
+        },
+        {
+            "Sid": "buckets",
+            "Effect": "Allow",
+            "Action": "s3:HeadBucket",
+            "Resource": "*"
+        }
+    ]
+}
+```
+
+#### 2) Install node-pre-gyp
+
+Either install it globally:
+
+    npm install node-pre-gyp -g
+
+Or put the local version on your PATH
+
+    export PATH=`pwd`/node_modules/.bin/:$PATH
+
+#### 3) Configure AWS credentials
+
+It is recommended to configure the AWS JS SDK v2 used internally by `node-pre-gyp` by setting these environment variables:
+
+- AWS_ACCESS_KEY_ID
+- AWS_SECRET_ACCESS_KEY
+
+But also you can also use the `Shared Config File` mentioned [in the AWS JS SDK v2 docs](https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/configuring-the-jssdk.html)
+
+#### 4) Package and publish your build
+
+Install the `aws-sdk`:
+
+    npm install aws-sdk
+
+Then publish:
+
+    node-pre-gyp package publish
+
+Note: if you hit an error like `Hostname/IP doesn't match certificate's altnames` it may mean that you need to provide the `region` option in your config.
+
+## Appveyor Automation
+
+[Appveyor](http://www.appveyor.com/) can build binaries and publish the results per commit and supports:
+
+ - Windows Visual Studio 2013 and related compilers
+ - Both 64 bit (x64) and 32 bit (x86) build configurations
+ - Multiple Node.js versions
+
+For an example of doing this see [node-sqlite3's appveyor.yml](https://github.com/mapbox/node-sqlite3/blob/master/appveyor.yml).
+
+Below is a guide to getting set up:
+
+#### 1) Create a free Appveyor account
+
+Go to https://ci.appveyor.com/signup/free and sign in with your GitHub account.
+
+#### 2) Create a new project
+
+Go to https://ci.appveyor.com/projects/new and select the GitHub repo for your module
+
+#### 3) Add appveyor.yml and push it
+
+Once you have committed an `appveyor.yml` ([appveyor.yml reference](http://www.appveyor.com/docs/appveyor-yml)) to your GitHub repo and pushed it AppVeyor should automatically start building your project.
+
+#### 4) Create secure variables
+
+Encrypt your S3 AWS keys by going to <https://ci.appveyor.com/tools/encrypt> and hitting the `encrypt` button.
+
+Then paste the result into your `appveyor.yml`
+
+```yml
+environment:
+  AWS_ACCESS_KEY_ID:
+    secure: Dn9HKdLNYvDgPdQOzRq/DqZ/MPhjknRHB1o+/lVU8MA=
+  AWS_SECRET_ACCESS_KEY:
+    secure: W1rwNoSnOku1r+28gnoufO8UA8iWADmL1LiiwH9IOkIVhDTNGdGPJqAlLjNqwLnL
+```
+
+NOTE: keys are per account but not per repo (this is difference than Travis where keys are per repo but not related to the account used to encrypt them).
+
+#### 5) Hook up publishing
+
+Just put `node-pre-gyp package publish` in your `appveyor.yml` after `npm install`.
+
+#### 6) Publish when you want
+
+You might wish to publish binaries only on a specific commit. To do this you could borrow from the [Travis CI idea of commit keywords](http://about.travis-ci.org/docs/user/how-to-skip-a-build/) and add special handling for commit messages with `[publish binary]`:
+
+    SET CM=%APPVEYOR_REPO_COMMIT_MESSAGE%
+    if not "%CM%" == "%CM:[publish binary]=%" node-pre-gyp --msvs_version=2013 publish
+
+If your commit message contains special characters (e.g. `&`) this method might fail. An alternative is to use PowerShell, which gives you additional possibilities, like ignoring case by using `ToLower()`:
+
+    ps: if($env:APPVEYOR_REPO_COMMIT_MESSAGE.ToLower().Contains('[publish binary]')) { node-pre-gyp --msvs_version=2013 publish }
+
+Remember this publishing is not the same as `npm publish`. We're just talking about the binary module here and not your entire npm package.
+
+## Travis Automation
+
+[Travis](https://travis-ci.org/) can push to S3 after a successful build and supports both:
+
+ - Ubuntu Precise and OS X (64 bit)
+ - Multiple Node.js versions
+
+For an example of doing this see [node-add-example's .travis.yml](https://github.com/springmeyer/node-addon-example/blob/2ff60a8ded7f042864ad21db00c3a5a06cf47075/.travis.yml).
+
+Note: if you need 32 bit binaries, this can be done from a 64 bit Travis machine. See [the node-sqlite3 scripts for an example of doing this](https://github.com/mapbox/node-sqlite3/blob/bae122aa6a2b8a45f6b717fab24e207740e32b5d/scripts/build_against_node.sh#L54-L74).
+
+Below is a guide to getting set up:
+
+#### 1) Install the Travis gem
+
+    gem install travis
+
+#### 2) Create secure variables
+
+Make sure you run this command from within the directory of your module.
+
+Use `travis-encrypt` like:
+
+    travis encrypt AWS_ACCESS_KEY_ID=${node_pre_gyp_accessKeyId}
+    travis encrypt AWS_SECRET_ACCESS_KEY=${node_pre_gyp_secretAccessKey}
+
+Then put those values in your `.travis.yml` like:
+
+```yaml
+env:
+  global:
+    - secure: F+sEL/v56CzHqmCSSES4pEyC9NeQlkoR0Gs/ZuZxX1ytrj8SKtp3MKqBj7zhIclSdXBz4Ev966Da5ctmcTd410p0b240MV6BVOkLUtkjZJyErMBOkeb8n8yVfSoeMx8RiIhBmIvEn+rlQq+bSFis61/JkE9rxsjkGRZi14hHr4M=
+    - secure: o2nkUQIiABD139XS6L8pxq3XO5gch27hvm/gOdV+dzNKc/s2KomVPWcOyXNxtJGhtecAkABzaW8KHDDi5QL1kNEFx6BxFVMLO8rjFPsMVaBG9Ks6JiDQkkmrGNcnVdxI/6EKTLHTH5WLsz8+J7caDBzvKbEfTux5EamEhxIWgrI=
+```
+
+More details on Travis encryption at http://about.travis-ci.org/docs/user/encryption-keys/.
+
+#### 3) Hook up publishing
+
+Just put `node-pre-gyp package publish` in your `.travis.yml` after `npm install`.
+
+##### OS X publishing
+
+If you want binaries for OS X in addition to linux you can enable [multi-os for Travis](http://docs.travis-ci.com/user/multi-os/#Setting-.travis.yml)
+
+Use a configuration like:
+
+```yml
+
+language: cpp
+
+os:
+- linux
+- osx
+
+env:
+  matrix:
+    - NODE_VERSION="4"
+    - NODE_VERSION="6"
+
+before_install:
+- rm -rf ~/.nvm/ && git clone --depth 1 https://github.com/creationix/nvm.git ~/.nvm
+- source ~/.nvm/nvm.sh
+- nvm install $NODE_VERSION
+- nvm use $NODE_VERSION
+```
+
+See [Travis OS X Gotchas](#travis-os-x-gotchas) for why we replace `language: node_js` and `node_js:` sections with `language: cpp` and a custom matrix.
+
+Also create platform specific sections for any deps that need install. For example if you need libpng:
+
+```yml
+- if [ $(uname -s) == 'Linux' ]; then apt-get install libpng-dev; fi;
+- if [ $(uname -s) == 'Darwin' ]; then brew install libpng; fi;
+```
+
+For detailed multi-OS examples see [node-mapnik](https://github.com/mapnik/node-mapnik/blob/master/.travis.yml) and [node-sqlite3](https://github.com/mapbox/node-sqlite3/blob/master/.travis.yml).
+
+##### Travis OS X Gotchas
+
+First, unlike the Travis Linux machines, the OS X machines do not put `node-pre-gyp` on PATH by default. To do so you will need to:
+
+```sh
+export PATH=$(pwd)/node_modules/.bin:${PATH}
+```
+
+Second, the OS X machines do not support using a matrix for installing different Node.js versions. So you need to bootstrap the installation of Node.js in a cross platform way.
+
+By doing:
+
+```yml
+env:
+  matrix:
+    - NODE_VERSION="4"
+    - NODE_VERSION="6"
+
+before_install:
+ - rm -rf ~/.nvm/ && git clone --depth 1 https://github.com/creationix/nvm.git ~/.nvm
+ - source ~/.nvm/nvm.sh
+ - nvm install $NODE_VERSION
+ - nvm use $NODE_VERSION
+```
+
+You can easily recreate the previous behavior of this matrix:
+
+```yml
+node_js:
+  - "4"
+  - "6"
+```
+
+#### 4) Publish when you want
+
+You might wish to publish binaries only on a specific commit. To do this you could borrow from the [Travis CI idea of commit keywords](http://about.travis-ci.org/docs/user/how-to-skip-a-build/) and add special handling for commit messages with `[publish binary]`:
+
+    COMMIT_MESSAGE=$(git log --format=%B --no-merges -n 1 | tr -d '\n')
+    if [[ ${COMMIT_MESSAGE} =~ "[publish binary]" ]]; then node-pre-gyp publish; fi;
+
+Then you can trigger new binaries to be built like:
+
+    git commit -a -m "[publish binary]"
+
+Or, if you don't have any changes to make simply run:
+
+    git commit --allow-empty -m "[publish binary]"
+
+WARNING: if you are working in a pull request and publishing binaries from there then you will want to avoid double publishing when Travis CI builds both the `push` and `pr`. You only want to run the publish on the `push` commit. See https://github.com/Project-OSRM/node-osrm/blob/8eb837abe2e2e30e595093d16e5354bc5c573575/scripts/is_pr_merge.sh which is called from https://github.com/Project-OSRM/node-osrm/blob/8eb837abe2e2e30e595093d16e5354bc5c573575/scripts/publish.sh for an example of how to do this.
+
+Remember this publishing is not the same as `npm publish`. We're just talking about the binary module here and not your entire npm package. To automate the publishing of your entire package to npm on Travis see http://about.travis-ci.org/docs/user/deployment/npm/
+
+# Versioning
+
+The `binary` properties of `module_path`, `remote_path`, and `package_name` support variable substitution. The strings are evaluated by `node-pre-gyp` depending on your system and any custom build flags you passed.
+
+ - `node_abi`: The node C++ `ABI` number. This value is available in Javascript as `process.versions.modules` as of [`>= v0.10.4 >= v0.11.7`](https://github.com/joyent/node/commit/ccabd4a6fa8a6eb79d29bc3bbe9fe2b6531c2d8e) and in C++ as the `NODE_MODULE_VERSION` define much earlier. For versions of Node before this was available we fallback to the V8 major and minor version.
+ - `platform` matches node's `process.platform` like `linux`, `darwin`, and `win32` unless the user passed the `--target_platform` option to override.
+ - `arch` matches node's `process.arch` like `x64` or `ia32` unless the user passes the `--target_arch` option to override.
+ - `libc` matches `require('detect-libc').family` like `glibc` or `musl` unless the user passes the `--target_libc` option to override.
+ - `configuration` - Either 'Release' or 'Debug' depending on if `--debug` is passed during the build.
+ - `module_name` - the `binary.module_name` attribute from `package.json`.
+ - `version` - the semver `version` value for your module from `package.json` (NOTE: ignores the `semver.build` property).
+ - `major`, `minor`, `patch`, and `prelease` match the individual semver values for your module's `version`
+ - `build` - the sevmer `build` value. For example it would be `this.that` if your package.json `version` was `v1.0.0+this.that`
+ - `prerelease` - the semver `prerelease` value. For example it would be `alpha.beta` if your package.json `version` was `v1.0.0-alpha.beta`
+
+
+The options are visible in the code at <https://github.com/mapbox/node-pre-gyp/blob/612b7bca2604508d881e1187614870ba19a7f0c5/lib/util/versioning.js#L114-L127>
+
+# Download binary files from a mirror
+
+S3 is broken in China for the well known reason.
+
+Using the `npm` config argument: `--{module_name}_binary_host_mirror` can download binary files through a mirror, `-` in `module_name` will be replaced with `_`.
+
+e.g.: Install [v8-profiler](https://www.npmjs.com/package/v8-profiler) from `npm`.
+
+```bash
+$ npm install v8-profiler --profiler_binary_host_mirror=https://npm.taobao.org/mirrors/node-inspector/
+```
+
+e.g.: Install [canvas-prebuilt](https://www.npmjs.com/package/canvas-prebuilt) from `npm`.
+
+```bash
+$ npm install canvas-prebuilt --canvas_prebuilt_binary_host_mirror=https://npm.taobao.org/mirrors/canvas-prebuilt/
+```

server/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+'use strict';
+
+require('../lib/main');

server/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp.cmd

@@ -0,0 +1,2 @@
+@echo off
+node  "%~dp0\node-pre-gyp" %*

server/node_modules/@mapbox/node-pre-gyp/contributing.md

@@ -0,0 +1,10 @@
+# Contributing
+
+
+### Releasing a new version:
+
+- Ensure tests are passing on travis and appveyor
+- Run `node scripts/abi_crosswalk.js` and commit any changes
+- Update the changelog
+- Tag a new release like: `git tag -a v0.6.34 -m "tagging v0.6.34" && git push --tags`
+- Run `npm publish`

server/node_modules/@mapbox/node-pre-gyp/lib/build.js

@@ -0,0 +1,51 @@
+'use strict';
+
+module.exports = exports = build;
+
+exports.usage = 'Attempts to compile the module by dispatching to node-gyp or nw-gyp';
+
+const napi = require('./util/napi.js');
+const compile = require('./util/compile.js');
+const handle_gyp_opts = require('./util/handle_gyp_opts.js');
+const configure = require('./configure.js');
+
+function do_build(gyp, argv, callback) {
+  handle_gyp_opts(gyp, argv, (err, result) => {
+    let final_args = ['build'].concat(result.gyp).concat(result.pre);
+    if (result.unparsed.length > 0) {
+      final_args = final_args.
+        concat(['--']).
+        concat(result.unparsed);
+    }
+    if (!err && result.opts.napi_build_version) {
+      napi.swap_build_dir_in(result.opts.napi_build_version);
+    }
+    compile.run_gyp(final_args, result.opts, (err2) => {
+      if (result.opts.napi_build_version) {
+        napi.swap_build_dir_out(result.opts.napi_build_version);
+      }
+      return callback(err2);
+    });
+  });
+}
+
+function build(gyp, argv, callback) {
+
+  // Form up commands to pass to node-gyp:
+  // We map `node-pre-gyp build` to `node-gyp configure build` so that we do not
+  // trigger a clean and therefore do not pay the penalty of a full recompile
+  if (argv.length && (argv.indexOf('rebuild') > -1)) {
+    argv.shift(); // remove `rebuild`
+    // here we map `node-pre-gyp rebuild` to `node-gyp rebuild` which internally means
+    // "clean + configure + build" and triggers a full recompile
+    compile.run_gyp(['clean'], {}, (err3) => {
+      if (err3) return callback(err3);
+      configure(gyp, argv, (err4) => {
+        if (err4) return callback(err4);
+        return do_build(gyp, argv, callback);
+      });
+    });
+  } else {
+    return do_build(gyp, argv, callback);
+  }
+}

server/node_modules/@mapbox/node-pre-gyp/lib/clean.js

@@ -0,0 +1,31 @@
+'use strict';
+
+module.exports = exports = clean;
+
+exports.usage = 'Removes the entire folder containing the compiled .node module';
+
+const rm = require('rimraf');
+const exists = require('fs').exists || require('path').exists;
+const versioning = require('./util/versioning.js');
+const napi = require('./util/napi.js');
+const path = require('path');
+
+function clean(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  const napi_build_version = napi.get_napi_build_version_from_command_args(argv);
+  const opts = versioning.evaluate(package_json, gyp.opts, napi_build_version);
+  const to_delete = opts.module_path;
+  if (!to_delete) {
+    return callback(new Error('module_path is empty, refusing to delete'));
+  } else if (path.normalize(to_delete) === path.normalize(process.cwd())) {
+    return callback(new Error('module_path is not set, refusing to delete'));
+  } else {
+    exists(to_delete, (found) => {
+      if (found) {
+        if (!gyp.opts.silent_clean) console.log('[' + package_json.name + '] Removing "%s"', to_delete);
+        return rm(to_delete, callback);
+      }
+      return callback();
+    });
+  }
+}

server/node_modules/@mapbox/node-pre-gyp/lib/configure.js

@@ -0,0 +1,52 @@
+'use strict';
+
+module.exports = exports = configure;
+
+exports.usage = 'Attempts to configure node-gyp or nw-gyp build';
+
+const napi = require('./util/napi.js');
+const compile = require('./util/compile.js');
+const handle_gyp_opts = require('./util/handle_gyp_opts.js');
+
+function configure(gyp, argv, callback) {
+  handle_gyp_opts(gyp, argv, (err, result) => {
+    let final_args = result.gyp.concat(result.pre);
+    // pull select node-gyp configure options out of the npm environ
+    const known_gyp_args = ['dist-url', 'python', 'nodedir', 'msvs_version'];
+    known_gyp_args.forEach((key) => {
+      const val = gyp.opts[key] || gyp.opts[key.replace('-', '_')];
+      if (val) {
+        final_args.push('--' + key + '=' + val);
+      }
+    });
+    // --ensure=false tell node-gyp to re-install node development headers
+    // but it is only respected by node-gyp install, so we have to call install
+    // as a separate step if the user passes it
+    if (gyp.opts.ensure === false) {
+      const install_args = final_args.concat(['install', '--ensure=false']);
+      compile.run_gyp(install_args, result.opts, (err2) => {
+        if (err2) return callback(err2);
+        if (result.unparsed.length > 0) {
+          final_args = final_args.
+            concat(['--']).
+            concat(result.unparsed);
+        }
+        compile.run_gyp(['configure'].concat(final_args), result.opts, (err3) => {
+          return callback(err3);
+        });
+      });
+    } else {
+      if (result.unparsed.length > 0) {
+        final_args = final_args.
+          concat(['--']).
+          concat(result.unparsed);
+      }
+      compile.run_gyp(['configure'].concat(final_args), result.opts, (err4) => {
+        if (!err4 && result.opts.napi_build_version) {
+          napi.swap_build_dir_out(result.opts.napi_build_version);
+        }
+        return callback(err4);
+      });
+    }
+  });
+}

server/node_modules/@mapbox/node-pre-gyp/lib/info.js

@@ -0,0 +1,38 @@
+'use strict';
+
+module.exports = exports = info;
+
+exports.usage = 'Lists all published binaries (requires aws-sdk)';
+
+const log = require('npmlog');
+const versioning = require('./util/versioning.js');
+const s3_setup = require('./util/s3_setup.js');
+
+function info(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  const opts = versioning.evaluate(package_json, gyp.opts);
+  const config = {};
+  s3_setup.detect(opts, config);
+  const s3 = s3_setup.get_s3(config);
+  const s3_opts = {
+    Bucket: config.bucket,
+    Prefix: config.prefix
+  };
+  s3.listObjects(s3_opts, (err, meta) => {
+    if (err && err.code === 'NotFound') {
+      return callback(new Error('[' + package_json.name + '] Not found: https://' + s3_opts.Bucket + '.s3.amazonaws.com/' + config.prefix));
+    } else if (err) {
+      return callback(err);
+    } else {
+      log.verbose(JSON.stringify(meta, null, 1));
+      if (meta && meta.Contents) {
+        meta.Contents.forEach((obj) => {
+          console.log(obj.Key);
+        });
+      } else {
+        console.error('[' + package_json.name + '] No objects found at https://' + s3_opts.Bucket + '.s3.amazonaws.com/' + config.prefix);
+      }
+      return callback();
+    }
+  });
+}

server/node_modules/@mapbox/node-pre-gyp/lib/install.js

@@ -0,0 +1,235 @@
+'use strict';
+
+module.exports = exports = install;
+
+exports.usage = 'Attempts to install pre-built binary for module';
+
+const fs = require('fs');
+const path = require('path');
+const log = require('npmlog');
+const existsAsync = fs.exists || path.exists;
+const versioning = require('./util/versioning.js');
+const napi = require('./util/napi.js');
+const makeDir = require('make-dir');
+// for fetching binaries
+const fetch = require('node-fetch');
+const tar = require('tar');
+
+let npgVersion = 'unknown';
+try {
+  // Read own package.json to get the current node-pre-pyp version.
+  const ownPackageJSON = fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8');
+  npgVersion = JSON.parse(ownPackageJSON).version;
+} catch (e) {
+  // do nothing
+}
+
+function place_binary(uri, targetDir, opts, callback) {
+  log.http('GET', uri);
+
+  // Try getting version info from the currently running npm.
+  const envVersionInfo = process.env.npm_config_user_agent ||
+        'node ' + process.version;
+
+  const sanitized = uri.replace('+', '%2B');
+  const requestOpts = {
+    uri: sanitized,
+    headers: {
+      'User-Agent': 'node-pre-gyp (v' + npgVersion + ', ' + envVersionInfo + ')'
+    },
+    follow_max: 10
+  };
+
+  if (opts.cafile) {
+    try {
+      requestOpts.ca = fs.readFileSync(opts.cafile);
+    } catch (e) {
+      return callback(e);
+    }
+  } else if (opts.ca) {
+    requestOpts.ca = opts.ca;
+  }
+
+  const proxyUrl = opts.proxy ||
+                    process.env.http_proxy ||
+                    process.env.HTTP_PROXY ||
+                    process.env.npm_config_proxy;
+  let agent;
+  if (proxyUrl) {
+    const ProxyAgent = require('https-proxy-agent');
+    agent = new ProxyAgent(proxyUrl);
+    log.http('download', 'proxy agent configured using: "%s"', proxyUrl);
+  }
+
+  fetch(sanitized, { agent })
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error(`response status ${res.status} ${res.statusText} on ${sanitized}`);
+      }
+      const dataStream = res.body;
+
+      return new Promise((resolve, reject) => {
+        let extractions = 0;
+        const countExtractions = (entry) => {
+          extractions += 1;
+          log.info('install', 'unpacking %s', entry.path);
+        };
+
+        dataStream.pipe(extract(targetDir, countExtractions))
+          .on('error', (e) => {
+            reject(e);
+          });
+        dataStream.on('end', () => {
+          resolve(`extracted file count: ${extractions}`);
+        });
+        dataStream.on('error', (e) => {
+          reject(e);
+        });
+      });
+    })
+    .then((text) => {
+      log.info(text);
+      callback();
+    })
+    .catch((e) => {
+      log.error(`install ${e.message}`);
+      callback(e);
+    });
+}
+
+function extract(to, onentry) {
+  return tar.extract({
+    cwd: to,
+    strip: 1,
+    onentry
+  });
+}
+
+function extract_from_local(from, targetDir, callback) {
+  if (!fs.existsSync(from)) {
+    return callback(new Error('Cannot find file ' + from));
+  }
+  log.info('Found local file to extract from ' + from);
+
+  // extract helpers
+  let extractCount = 0;
+  function countExtractions(entry) {
+    extractCount += 1;
+    log.info('install', 'unpacking ' + entry.path);
+  }
+  function afterExtract(err) {
+    if (err) return callback(err);
+    if (extractCount === 0) {
+      return callback(new Error('There was a fatal problem while extracting the tarball'));
+    }
+    log.info('tarball', 'done parsing tarball');
+    callback();
+  }
+
+  fs.createReadStream(from).pipe(extract(targetDir, countExtractions))
+    .on('close', afterExtract)
+    .on('error', afterExtract);
+}
+
+function do_build(gyp, argv, callback) {
+  const args = ['rebuild'].concat(argv);
+  gyp.todo.push({ name: 'build', args: args });
+  process.nextTick(callback);
+}
+
+function print_fallback_error(err, opts, package_json) {
+  const fallback_message = ' (falling back to source compile with node-gyp)';
+  let full_message = '';
+  if (err.statusCode !== undefined) {
+    // If we got a network response it but failed to download
+    // it means remote binaries are not available, so let's try to help
+    // the user/developer with the info to debug why
+    full_message = 'Pre-built binaries not found for ' + package_json.name + '@' + package_json.version;
+    full_message += ' and ' + opts.runtime + '@' + (opts.target || process.versions.node) + ' (' + opts.node_abi + ' ABI, ' + opts.libc + ')';
+    full_message += fallback_message;
+    log.warn('Tried to download(' + err.statusCode + '): ' + opts.hosted_tarball);
+    log.warn(full_message);
+    log.http(err.message);
+  } else {
+    // If we do not have a statusCode that means an unexpected error
+    // happened and prevented an http response, so we output the exact error
+    full_message = 'Pre-built binaries not installable for ' + package_json.name + '@' + package_json.version;
+    full_message += ' and ' + opts.runtime + '@' + (opts.target || process.versions.node) + ' (' + opts.node_abi + ' ABI, ' + opts.libc + ')';
+    full_message += fallback_message;
+    log.warn(full_message);
+    log.warn('Hit error ' + err.message);
+  }
+}
+
+//
+// install
+//
+function install(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  const napi_build_version = napi.get_napi_build_version_from_command_args(argv);
+  const source_build = gyp.opts['build-from-source'] || gyp.opts.build_from_source;
+  const update_binary = gyp.opts['update-binary'] || gyp.opts.update_binary;
+  const should_do_source_build = source_build === package_json.name || (source_build === true || source_build === 'true');
+  if (should_do_source_build) {
+    log.info('build', 'requesting source compile');
+    return do_build(gyp, argv, callback);
+  } else {
+    const fallback_to_build = gyp.opts['fallback-to-build'] || gyp.opts.fallback_to_build;
+    let should_do_fallback_build = fallback_to_build === package_json.name || (fallback_to_build === true || fallback_to_build === 'true');
+    // but allow override from npm
+    if (process.env.npm_config_argv) {
+      const cooked = JSON.parse(process.env.npm_config_argv).cooked;
+      const match = cooked.indexOf('--fallback-to-build');
+      if (match > -1 && cooked.length > match && cooked[match + 1] === 'false') {
+        should_do_fallback_build = false;
+        log.info('install', 'Build fallback disabled via npm flag: --fallback-to-build=false');
+      }
+    }
+    let opts;
+    try {
+      opts = versioning.evaluate(package_json, gyp.opts, napi_build_version);
+    } catch (err) {
+      return callback(err);
+    }
+
+    opts.ca = gyp.opts.ca;
+    opts.cafile = gyp.opts.cafile;
+
+    const from = opts.hosted_tarball;
+    const to = opts.module_path;
+    const binary_module = path.join(to, opts.module_name + '.node');
+    existsAsync(binary_module, (found) => {
+      if (!update_binary) {
+        if (found) {
+          console.log('[' + package_json.name + '] Success: "' + binary_module + '" already installed');
+          console.log('Pass --update-binary to reinstall or --build-from-source to recompile');
+          return callback();
+        }
+        log.info('check', 'checked for "' + binary_module + '" (not found)');
+      }
+
+      makeDir(to).then(() => {
+        const fileName = from.startsWith('file://') && from.slice('file://'.length);
+        if (fileName) {
+          extract_from_local(fileName, to, after_place);
+        } else {
+          place_binary(from, to, opts, after_place);
+        }
+      }).catch((err) => {
+        after_place(err);
+      });
+
+      function after_place(err) {
+        if (err && should_do_fallback_build) {
+          print_fallback_error(err, opts, package_json);
+          return do_build(gyp, argv, callback);
+        } else if (err) {
+          return callback(err);
+        } else {
+          console.log('[' + package_json.name + '] Success: "' + binary_module + '" is installed via remote');
+          return callback();
+        }
+      }
+    });
+  }
+}

server/node_modules/@mapbox/node-pre-gyp/lib/main.js

@@ -0,0 +1,125 @@
+'use strict';
+
+/**
+ * Set the title.
+ */
+
+process.title = 'node-pre-gyp';
+
+const node_pre_gyp = require('../');
+const log = require('npmlog');
+
+/**
+ * Process and execute the selected commands.
+ */
+
+const prog = new node_pre_gyp.Run({ argv: process.argv });
+let completed = false;
+
+if (prog.todo.length === 0) {
+  if (~process.argv.indexOf('-v') || ~process.argv.indexOf('--version')) {
+    console.log('v%s', prog.version);
+    process.exit(0);
+  } else if (~process.argv.indexOf('-h') || ~process.argv.indexOf('--help')) {
+    console.log('%s', prog.usage());
+    process.exit(0);
+  }
+  console.log('%s', prog.usage());
+  process.exit(1);
+}
+
+// if --no-color is passed
+if (prog.opts && Object.hasOwnProperty.call(prog, 'color') && !prog.opts.color) {
+  log.disableColor();
+}
+
+log.info('it worked if it ends with', 'ok');
+log.verbose('cli', process.argv);
+log.info('using', process.title + '@%s', prog.version);
+log.info('using', 'node@%s | %s | %s', process.versions.node, process.platform, process.arch);
+
+
+/**
+ * Change dir if -C/--directory was passed.
+ */
+
+const dir = prog.opts.directory;
+if (dir) {
+  const fs = require('fs');
+  try {
+    const stat = fs.statSync(dir);
+    if (stat.isDirectory()) {
+      log.info('chdir', dir);
+      process.chdir(dir);
+    } else {
+      log.warn('chdir', dir + ' is not a directory');
+    }
+  } catch (e) {
+    if (e.code === 'ENOENT') {
+      log.warn('chdir', dir + ' is not a directory');
+    } else {
+      log.warn('chdir', 'error during chdir() "%s"', e.message);
+    }
+  }
+}
+
+function run() {
+  const command = prog.todo.shift();
+  if (!command) {
+    // done!
+    completed = true;
+    log.info('ok');
+    return;
+  }
+
+  // set binary.host when appropriate. host determines the s3 target bucket.
+  const target = prog.setBinaryHostProperty(command.name);
+  if (target && ['install', 'publish', 'unpublish', 'info'].indexOf(command.name) >= 0) {
+    log.info('using binary.host: ' + prog.package_json.binary.host);
+  }
+
+  prog.commands[command.name](command.args, function(err) {
+    if (err) {
+      log.error(command.name + ' error');
+      log.error('stack', err.stack);
+      errorMessage();
+      log.error('not ok');
+      console.log(err.message);
+      return process.exit(1);
+    }
+    const args_array = [].slice.call(arguments, 1);
+    if (args_array.length) {
+      console.log.apply(console, args_array);
+    }
+    // now run the next command in the queue
+    process.nextTick(run);
+  });
+}
+
+process.on('exit', (code) => {
+  if (!completed && !code) {
+    log.error('Completion callback never invoked!');
+    errorMessage();
+    process.exit(6);
+  }
+});
+
+process.on('uncaughtException', (err) => {
+  log.error('UNCAUGHT EXCEPTION');
+  log.error('stack', err.stack);
+  errorMessage();
+  process.exit(7);
+});
+
+function errorMessage() {
+  // copied from npm's lib/util/error-handler.js
+  const os = require('os');
+  log.error('System', os.type() + ' ' + os.release());
+  log.error('command', process.argv.map(JSON.stringify).join(' '));
+  log.error('cwd', process.cwd());
+  log.error('node -v', process.version);
+  log.error(process.title + ' -v', 'v' + prog.package.version);
+}
+
+// start running the given commands!
+run();

server/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js

@@ -0,0 +1,309 @@
+'use strict';
+
+/**
+ * Module exports.
+ */
+
+module.exports = exports;
+
+/**
+ * Module dependencies.
+ */
+
+// load mocking control function for accessing s3 via https. the function is a noop always returning
+// false if not mocking.
+exports.mockS3Http = require('./util/s3_setup').get_mockS3Http();
+exports.mockS3Http('on');
+const mocking = exports.mockS3Http('get');
+
+
+const fs = require('fs');
+const path = require('path');
+const nopt = require('nopt');
+const log = require('npmlog');
+log.disableProgress();
+const napi = require('./util/napi.js');
+
+const EE = require('events').EventEmitter;
+const inherits = require('util').inherits;
+const cli_commands = [
+  'clean',
+  'install',
+  'reinstall',
+  'build',
+  'rebuild',
+  'package',
+  'testpackage',
+  'publish',
+  'unpublish',
+  'info',
+  'testbinary',
+  'reveal',
+  'configure'
+];
+const aliases = {};
+
+// differentiate node-pre-gyp's logs from npm's
+log.heading = 'node-pre-gyp';
+
+if (mocking) {
+  log.warn(`mocking s3 to ${process.env.node_pre_gyp_mock_s3}`);
+}
+
+// this is a getter to avoid circular reference warnings with node v14.
+Object.defineProperty(exports, 'find', {
+  get: function() {
+    return require('./pre-binding').find;
+  },
+  enumerable: true
+});
+
+// in the following, "my_module" is using node-pre-gyp to
+// prebuild and install pre-built binaries. "main_module"
+// is using "my_module".
+//
+// "bin/node-pre-gyp" invokes Run() without a path. the
+// expectation is that the working directory is the package
+// root "my_module". this is true because in all cases npm is
+// executing a script in the context of "my_module".
+//
+// "pre-binding.find()" is executed by "my_module" but in the
+// context of "main_module". this is because "main_module" is
+// executing and requires "my_module" which is then executing
+// "pre-binding.find()" via "node-pre-gyp.find()", so the working
+// directory is that of "main_module".
+//
+// that's why "find()" must pass the path to package.json.
+//
+function Run({ package_json_path = './package.json', argv }) {
+  this.package_json_path = package_json_path;
+  this.commands = {};
+
+  const self = this;
+  cli_commands.forEach((command) => {
+    self.commands[command] = function(argvx, callback) {
+      log.verbose('command', command, argvx);
+      return require('./' + command)(self, argvx, callback);
+    };
+  });
+
+  this.parseArgv(argv);
+
+  // this is set to true after the binary.host property was set to
+  // either staging_host or production_host.
+  this.binaryHostSet = false;
+}
+inherits(Run, EE);
+exports.Run = Run;
+const proto = Run.prototype;
+
+/**
+ * Export the contents of the package.json.
+ */
+
+proto.package = require('../package.json');
+
+/**
+ * nopt configuration definitions
+ */
+
+proto.configDefs = {
+  help: Boolean,     // everywhere
+  arch: String,      // 'configure'
+  debug: Boolean,    // 'build'
+  directory: String, // bin
+  proxy: String,     // 'install'
+  loglevel: String  // everywhere
+};
+
+/**
+ * nopt shorthands
+ */
+
+proto.shorthands = {
+  release: '--no-debug',
+  C: '--directory',
+  debug: '--debug',
+  j: '--jobs',
+  silent: '--loglevel=silent',
+  silly: '--loglevel=silly',
+  verbose: '--loglevel=verbose'
+};
+
+/**
+ * expose the command aliases for the bin file to use.
+ */
+
+proto.aliases = aliases;
+
+/**
+ * Parses the given argv array and sets the 'opts', 'argv',
+ * 'command', and 'package_json' properties.
+ */
+
+proto.parseArgv = function parseOpts(argv) {
+  this.opts = nopt(this.configDefs, this.shorthands, argv);
+  this.argv = this.opts.argv.remain.slice();
+  const commands = this.todo = [];
+
+  // create a copy of the argv array with aliases mapped
+  argv = this.argv.map((arg) => {
+    // is this an alias?
+    if (arg in this.aliases) {
+      arg = this.aliases[arg];
+    }
+    return arg;
+  });
+
+  // process the mapped args into "command" objects ("name" and "args" props)
+  argv.slice().forEach((arg) => {
+    if (arg in this.commands) {
+      const args = argv.splice(0, argv.indexOf(arg));
+      argv.shift();
+      if (commands.length > 0) {
+        commands[commands.length - 1].args = args;
+      }
+      commands.push({ name: arg, args: [] });
+    }
+  });
+  if (commands.length > 0) {
+    commands[commands.length - 1].args = argv.splice(0);
+  }
+
+
+  // if a directory was specified package.json is assumed to be relative
+  // to it.
+  let package_json_path = this.package_json_path;
+  if (this.opts.directory) {
+    package_json_path = path.join(this.opts.directory, package_json_path);
+  }
+
+  this.package_json = JSON.parse(fs.readFileSync(package_json_path));
+
+  // expand commands entries for multiple napi builds
+  this.todo = napi.expand_commands(this.package_json, this.opts, commands);
+
+  // support for inheriting config env variables from npm
+  const npm_config_prefix = 'npm_config_';
+  Object.keys(process.env).forEach((name) => {
+    if (name.indexOf(npm_config_prefix) !== 0) return;
+    const val = process.env[name];
+    if (name === npm_config_prefix + 'loglevel') {
+      log.level = val;
+    } else {
+      // add the user-defined options to the config
+      name = name.substring(npm_config_prefix.length);
+      // avoid npm argv clobber already present args
+      // which avoids problem of 'npm test' calling
+      // script that runs unique npm install commands
+      if (name === 'argv') {
+        if (this.opts.argv &&
+             this.opts.argv.remain &&
+             this.opts.argv.remain.length) {
+          // do nothing
+        } else {
+          this.opts[name] = val;
+        }
+      } else {
+        this.opts[name] = val;
+      }
+    }
+  });
+
+  if (this.opts.loglevel) {
+    log.level = this.opts.loglevel;
+  }
+  log.resume();
+};
+
+/**
+ * allow the binary.host property to be set at execution time.
+ *
+ * for this to take effect requires all the following to be true.
+ * - binary is a property in package.json
+ * - binary.host is falsey
+ * - binary.staging_host is not empty
+ * - binary.production_host is not empty
+ *
+ * if any of the previous checks fail then the function returns an empty string
+ * and makes no changes to package.json's binary property.
+ *
+ *
+ * if command is "publish" then the default is set to "binary.staging_host"
+ * if command is not "publish" the the default is set to "binary.production_host"
+ *
+ * if the command-line option '--s3_host' is set to "staging" or "production" then
+ * "binary.host" is set to the specified "staging_host" or "production_host". if
+ * '--s3_host' is any other value an exception is thrown.
+ *
+ * if '--s3_host' is not present then "binary.host" is set to the default as above.
+ *
+ * this strategy was chosen so that any command other than "publish" or "unpublish" uses "production"
+ * as the default without requiring any command-line options but that "publish" and "unpublish" require
+ * '--s3_host production_host' to be specified in order to *really* publish (or unpublish). publishing
+ * to staging can be done freely without worrying about disturbing any production releases.
+ */
+proto.setBinaryHostProperty = function(command) {
+  if (this.binaryHostSet) {
+    return this.package_json.binary.host;
+  }
+  const p = this.package_json;
+  // don't set anything if host is present. it must be left blank to trigger this.
+  if (!p || !p.binary || p.binary.host) {
+    return '';
+  }
+  // and both staging and production must be present. errors will be reported later.
+  if (!p.binary.staging_host || !p.binary.production_host) {
+    return '';
+  }
+  let target = 'production_host';
+  if (command === 'publish' || command === 'unpublish') {
+    target = 'staging_host';
+  }
+  // the environment variable has priority over the default or the command line. if
+  // either the env var or the command line option are invalid throw an error.
+  const npg_s3_host = process.env.node_pre_gyp_s3_host;
+  if (npg_s3_host === 'staging' || npg_s3_host === 'production') {
+    target = `${npg_s3_host}_host`;
+  } else if (this.opts['s3_host'] === 'staging' || this.opts['s3_host'] === 'production') {
+    target = `${this.opts['s3_host']}_host`;
+  } else if (this.opts['s3_host'] || npg_s3_host) {
+    throw new Error(`invalid s3_host ${this.opts['s3_host'] || npg_s3_host}`);
+  }
+
+  p.binary.host = p.binary[target];
+  this.binaryHostSet = true;
+
+  return p.binary.host;
+};
+
+/**
+ * Returns the usage instructions for node-pre-gyp.
+ */
+
+proto.usage = function usage() {
+  const str = [
+    '',
+    '  Usage: node-pre-gyp <command> [options]',
+    '',
+    '  where <command> is one of:',
+    cli_commands.map((c) => {
+      return '    - ' + c + ' - ' + require('./' + c).usage;
+    }).join('\n'),
+    '',
+    'node-pre-gyp@' + this.version + '  ' + path.resolve(__dirname, '..'),
+    'node@' + process.versions.node
+  ].join('\n');
+  return str;
+};
+
+/**
+ * Version number getter.
+ */
+
+Object.defineProperty(proto, 'version', {
+  get: function() {
+    return this.package.version;
+  },
+  enumerable: true
+});

server/node_modules/@mapbox/node-pre-gyp/lib/package.js

@@ -0,0 +1,73 @@
+'use strict';
+
+module.exports = exports = _package;
+
+exports.usage = 'Packs binary (and enclosing directory) into locally staged tarball';
+
+const fs = require('fs');
+const path = require('path');
+const log = require('npmlog');
+const versioning = require('./util/versioning.js');
+const napi = require('./util/napi.js');
+const existsAsync = fs.exists || path.exists;
+const makeDir = require('make-dir');
+const tar = require('tar');
+
+function readdirSync(dir) {
+  let list = [];
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const stats = fs.lstatSync(path.join(dir, file));
+    if (stats.isDirectory()) {
+      list = list.concat(readdirSync(path.join(dir, file)));
+    } else {
+      list.push(path.join(dir, file));
+    }
+  });
+  return list;
+}
+
+function _package(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  const napi_build_version = napi.get_napi_build_version_from_command_args(argv);
+  const opts = versioning.evaluate(package_json, gyp.opts, napi_build_version);
+  const from = opts.module_path;
+  const binary_module = path.join(from, opts.module_name + '.node');
+  existsAsync(binary_module, (found) => {
+    if (!found) {
+      return callback(new Error('Cannot package because ' + binary_module + ' missing: run `node-pre-gyp rebuild` first'));
+    }
+    const tarball = opts.staged_tarball;
+    const filter_func = function(entry) {
+      const basename = path.basename(entry);
+      if (basename.length && basename[0] !== '.') {
+        console.log('packing ' + entry);
+        return true;
+      } else {
+        console.log('skipping ' + entry);
+      }
+      return false;
+    };
+    makeDir(path.dirname(tarball)).then(() => {
+      let files = readdirSync(from);
+      const base = path.basename(from);
+      files = files.map((file) => {
+        return path.join(base, path.relative(from, file));
+      });
+      tar.create({
+        portable: false,
+        gzip: true,
+        filter: filter_func,
+        file: tarball,
+        cwd: path.dirname(from)
+      }, files, (err2) => {
+        if (err2)  console.error('[' + package_json.name + '] ' + err2.message);
+        else log.info('package', 'Binary staged at "' + tarball + '"');
+        return callback(err2);
+      });
+    }).catch((err) => {
+      return callback(err);
+    });
+  });
+}

server/node_modules/@mapbox/node-pre-gyp/lib/pre-binding.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const npg = require('..');
+const versioning = require('../lib/util/versioning.js');
+const napi = require('../lib/util/napi.js');
+const existsSync = require('fs').existsSync || require('path').existsSync;
+const path = require('path');
+
+module.exports = exports;
+
+exports.usage = 'Finds the require path for the node-pre-gyp installed module';
+
+exports.validate = function(package_json, opts) {
+  versioning.validate_config(package_json, opts);
+};
+
+exports.find = function(package_json_path, opts) {
+  if (!existsSync(package_json_path)) {
+    throw new Error(package_json_path + 'does not exist');
+  }
+  const prog = new npg.Run({ package_json_path, argv: process.argv });
+  prog.setBinaryHostProperty();
+  const package_json = prog.package_json;
+
+  versioning.validate_config(package_json, opts);
+  let napi_build_version;
+  if (napi.get_napi_build_versions(package_json, opts)) {
+    napi_build_version = napi.get_best_napi_build_version(package_json, opts);
+  }
+  opts = opts || {};
+  if (!opts.module_root) opts.module_root = path.dirname(package_json_path);
+  const meta = versioning.evaluate(package_json, opts, napi_build_version);
+  return meta.module;
+};

server/node_modules/@mapbox/node-pre-gyp/lib/publish.js

@@ -0,0 +1,81 @@
+'use strict';
+
+module.exports = exports = publish;
+
+exports.usage = 'Publishes pre-built binary (requires aws-sdk)';
+
+const fs = require('fs');
+const path = require('path');
+const log = require('npmlog');
+const versioning = require('./util/versioning.js');
+const napi = require('./util/napi.js');
+const s3_setup = require('./util/s3_setup.js');
+const existsAsync = fs.exists || path.exists;
+const url = require('url');
+
+function publish(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  const napi_build_version = napi.get_napi_build_version_from_command_args(argv);
+  const opts = versioning.evaluate(package_json, gyp.opts, napi_build_version);
+  const tarball = opts.staged_tarball;
+  existsAsync(tarball, (found) => {
+    if (!found) {
+      return callback(new Error('Cannot publish because ' + tarball + ' missing: run `node-pre-gyp package` first'));
+    }
+
+    log.info('publish', 'Detecting s3 credentials');
+    const config = {};
+    s3_setup.detect(opts, config);
+    const s3 = s3_setup.get_s3(config);
+
+    const key_name = url.resolve(config.prefix, opts.package_name);
+    const s3_opts = {
+      Bucket: config.bucket,
+      Key: key_name
+    };
+    log.info('publish', 'Authenticating with s3');
+    log.info('publish', config);
+
+    log.info('publish', 'Checking for existing binary at ' + opts.hosted_path);
+    s3.headObject(s3_opts, (err, meta) => {
+      if (meta) log.info('publish', JSON.stringify(meta));
+      if (err && err.code === 'NotFound') {
+        // we are safe to publish because
+        // the object does not already exist
+        log.info('publish', 'Preparing to put object');
+        const s3_put_opts = {
+          ACL: 'public-read',
+          Body: fs.createReadStream(tarball),
+          Key: key_name,
+          Bucket: config.bucket
+        };
+        log.info('publish', 'Putting object', s3_put_opts.ACL, s3_put_opts.Bucket, s3_put_opts.Key);
+        try {
+          s3.putObject(s3_put_opts, (err2, resp) => {
+            log.info('publish', 'returned from putting object');
+            if (err2) {
+              log.info('publish', 's3 putObject error: "' + err2 + '"');
+              return callback(err2);
+            }
+            if (resp) log.info('publish', 's3 putObject response: "' + JSON.stringify(resp) + '"');
+            log.info('publish', 'successfully put object');
+            console.log('[' + package_json.name + '] published to ' + opts.hosted_path);
+            return callback();
+          });
+        } catch (err3) {
+          log.info('publish', 's3 putObject error: "' + err3 + '"');
+          return callback(err3);
+        }
+      } else if (err) {
+        log.info('publish', 's3 headObject error: "' + err + '"');
+        return callback(err);
+      } else {
+        log.error('publish', 'Cannot publish over existing version');
+        log.error('publish', "Update the 'version' field in package.json and try again");
+        log.error('publish', 'If the previous version was published in error see:');
+        log.error('publish', '\t node-pre-gyp unpublish');
+        return callback(new Error('Failed publishing to ' + opts.hosted_path));
+      }
+    });
+  });
+}

server/node_modules/@mapbox/node-pre-gyp/lib/rebuild.js

@@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = exports = rebuild;
+
+exports.usage = 'Runs "clean" and "build" at once';
+
+const napi = require('./util/napi.js');
+
+function rebuild(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  let commands = [
+    { name: 'clean', args: [] },
+    { name: 'build', args: ['rebuild'] }
+  ];
+  commands = napi.expand_commands(package_json, gyp.opts, commands);
+  for (let i = commands.length; i !== 0; i--) {
+    gyp.todo.unshift(commands[i - 1]);
+  }
+  process.nextTick(callback);
+}

server/node_modules/@mapbox/node-pre-gyp/lib/reinstall.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = exports = rebuild;
+
+exports.usage = 'Runs "clean" and "install" at once';
+
+const napi = require('./util/napi.js');
+
+function rebuild(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  let installArgs = [];
+  const napi_build_version = napi.get_best_napi_build_version(package_json, gyp.opts);
+  if (napi_build_version != null) installArgs = [napi.get_command_arg(napi_build_version)];
+  gyp.todo.unshift(
+    { name: 'clean', args: [] },
+    { name: 'install', args: installArgs }
+  );
+  process.nextTick(callback);
+}

server/node_modules/@mapbox/node-pre-gyp/lib/reveal.js

@@ -0,0 +1,32 @@
+'use strict';
+
+module.exports = exports = reveal;
+
+exports.usage = 'Reveals data on the versioned binary';
+
+const versioning = require('./util/versioning.js');
+const napi = require('./util/napi.js');
+
+function unix_paths(key, val) {
+  return val && val.replace ? val.replace(/\\/g, '/') : val;
+}
+
+function reveal(gyp, argv, callback) {
+  const package_json = gyp.package_json;
+  const napi_build_version = napi.get_napi_build_version_from_command_args(argv);
+  const opts = versioning.evaluate(package_json, gyp.opts, napi_build_version);
+  let hit = false;
+  // if a second arg is passed look to see
+  // if it is a known option
+  // console.log(JSON.stringify(gyp.opts,null,1))
+  const remain = gyp.opts.argv.remain[gyp.opts.argv.remain.length - 1];
+  if (remain && Object.hasOwnProperty.call(opts, remain)) {
+    console.log(opts[remain].replace(/\\/g, '/'));
+    hit = true;
+  }
+  // otherwise return all options as json
+  if (!hit) {
+    console.log(JSON.stringify(opts, unix_paths, 2));
+  }
+  return callback();
+}

server/node_modules/@mapbox/node-pre-gyp/lib/testbinary.js

@@ -0,0 +1,79 @@
+'use strict';
+
+module.exports = exports = testbinary;
+
+exports.usage = 'Tests that the binary.node can be required';
+
+const path = require('path');
+const log = require('npmlog');
+const cp = require('child_process');
+const versioning = require('./util/versioning.js');
+const napi = require('./util/napi.js');
+
+function testbinary(gyp, argv, callback) {
+  const args = [];
+  const options = {};
+  let shell_cmd = process.execPath;
+  const package_json = gyp.package_json;
+  const napi_build_version = napi.get_napi_build_version_from_command_args(argv);
+  const opts = versioning.evaluate(package_json, gyp.opts, napi_build_version);
+  // skip validation for runtimes we don't explicitly support (like electron)
+  if (opts.runtime &&
+        opts.runtime !== 'node-webkit' &&
+        opts.runtime !== 'node') {
+    return callback();
+  }
+  const nw = (opts.runtime && opts.runtime === 'node-webkit');
+  // ensure on windows that / are used for require path
+  const binary_module = opts.module.replace(/\\/g, '/');
+  if ((process.arch !== opts.target_arch) ||
+        (process.platform !== opts.target_platform)) {
+    let msg = 'skipping validation since host platform/arch (';
+    msg += process.platform + '/' + process.arch + ')';
+    msg += ' does not match target (';
+    msg += opts.target_platform + '/' + opts.target_arch + ')';
+    log.info('validate', msg);
+    return callback();
+  }
+  if (nw) {
+    options.timeout = 5000;
+    if (process.platform === 'darwin') {
+      shell_cmd = 'node-webkit';
+    } else if (process.platform === 'win32') {
+      shell_cmd = 'nw.exe';
+    } else {
+      shell_cmd = 'nw';
+    }
+    const modulePath = path.resolve(binary_module);
+    const appDir = path.join(__dirname, 'util', 'nw-pre-gyp');
+    args.push(appDir);
+    args.push(modulePath);
+    log.info('validate', "Running test command: '" + shell_cmd + ' ' + args.join(' ') + "'");
+    cp.execFile(shell_cmd, args, options, (err, stdout, stderr) => {
+      // check for normal timeout for node-webkit
+      if (err) {
+        if (err.killed === true && err.signal && err.signal.indexOf('SIG') > -1) {
+          return callback();
+        }
+        const stderrLog = stderr.toString();
+        log.info('stderr', stderrLog);
+        if (/^\s*Xlib:\s*extension\s*"RANDR"\s*missing\s*on\s*display\s*":\d+\.\d+"\.\s*$/.test(stderrLog)) {
+          log.info('RANDR', 'stderr contains only RANDR error, ignored');
+          return callback();
+        }
+        return callback(err);
+      }
+      return callback();
+    });
+    return;
+  }
+  args.push('--eval');
+  args.push("require('" + binary_module.replace(/'/g, '\'') + "')");
+  log.info('validate', "Running test command: '" + shell_cmd + ' ' + args.join(' ') + "'");
+  cp.execFile(shell_cmd, args, options, (err, stdout, stderr) => {
+    if (err) {
+      return callback(err, { stdout: stdout, stderr: stderr });
+    }
+    return callback();
+  });
+}