/**
 * Vite config for the UI component.
 *
 * Kazzle owns HOST/PORT (`kazzleAppVite`) and production PWA (`kazzleAppPwa`)
 * in `@kazzle/app/vite`. This file only declares app plugins and spreads those
 * helpers. Do not import `vite-plugin-pwa` or `virtual:pwa-register` here —
 * browser entry calls `registerAppSW()` from `@kazzle/app/pwa`.
 *
 * This template has no backend component, so no proxy options are passed; if
 * you add one later, pass `{ apiComponent, proxyPaths }` (see @kazzle/app/vite).
 */

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(),
    // Tailwind v4 — scans your JSX for utility classes and emits CSS. No
    // tailwind.config.js or PostCSS setup needed; tokens/primitives live in
    // src/styles/theme.css.
    tailwindcss(),
    ...kazzleAppPwa({
      workbox: {
        runtimeCaching: [
          {
            // External API responses get cached briefly and revalidated in
            // the background. Edit this matcher if your app calls a
            // different API host.
            urlPattern: /^https:\/\/api\./i,
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: { maxEntries: 50, maxAgeSeconds: 300 },
            },
          },
        ],
      },
    }),
  ],
  // HOST/PORT/strictPort/allowedHosts — the port contract. See @kazzle/app/vite.
  ...kazzleAppVite(command),
}));