/**
 * Vite config for the UI component.
 *
 * Kazzle owns HOST/PORT (`kazzleAppVite`) and production PWA (`kazzleAppPwa`)
 * in `@kazzle/app/vite`. This template declares a backend `server` component
 * (PowerSync sync endpoint); we proxy `/sync` to it via the helper. Add new
 * backend routes to `proxyPaths`.
 *
 * Offline-first extras (manifest, worker format) stay here on top of the
 * shared PWA + port contract. Do not import `vite-plugin-pwa` directly.
 */

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import { kazzleAppVite, kazzleAppPwa } from '@kazzle/app/vite';

export default defineConfig(({ command }) => ({
  plugins: [
    react(),
    tailwindcss(),
    ...kazzleAppPwa({
      workbox: { globPatterns: ['**/*.{js,css,html,svg,png,ico}'] },
      manifest: {
        name: 'Kazzle App',
        short_name: 'Kazzle',
        display: 'standalone',
        start_url: '/',
      },
    }),
  ],
  // HOST/PORT/strictPort/allowedHosts + /sync proxy. See @kazzle/app/vite.
  ...kazzleAppVite(command, { apiComponent: 'server', proxyPaths: ['/sync'] }),
  optimizeDeps: {
    exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
  },
  worker: {
    format: 'es',
  },
}));