vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import path from "node:path";
import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";

const plugins = [
  react(),
  tailwindcss(),
  VitePWA({
    registerType: "autoUpdate",
    injectRegister: "auto",
    manifest: {
      name: "Math Tiles",
      short_name: "MathTiles",
      description: "Real-time computer vision math game for kids",
      theme_color: "#00f5ff",
      background_color: "#050510",
      display: "standalone",
      orientation: "landscape",
      scope: "/",
      start_url: "/",
      icons: [
        { src: "/icon.svg", sizes: "any", type: "image/svg+xml", purpose: "any maskable" },
      ],
    },
    workbox: {
      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB — needed for TF.js bundle
      navigateFallback: "/index.html",
      navigateFallbackDenylist: [/^\/api\//, /^\/camera-test/],
      runtimeCaching: [
        {
          // API calls — always fresh
          urlPattern: /^\/api\/trpc\/.*/,
          handler: "NetworkFirst",
          options: { cacheName: "trpc-api-cache", networkTimeoutSeconds: 5 },
        },
        {
          // TensorFlow.js model files — large, cache-first
          urlPattern: /tfjs-model|\.bin$|model\.json/,
          handler: "CacheFirst",
          options: { cacheName: "tf-model-cache", expiration: { maxAgeSeconds: 30 * 24 * 60 * 60 } },
        },
        {
          // Static assets (JS, CSS, images)
          urlPattern: /\.(js|css|woff2?|png|svg|ico|webp)$/,
          handler: "CacheFirst",
          options: { cacheName: "static-assets-cache", expiration: { maxAgeSeconds: 7 * 24 * 60 * 60 } },
        },
      ],
    },
  }),
];

export default defineConfig({
  plugins,
  resolve: {
    alias: {
      "@": path.resolve(import.meta.dirname, "client", "src"),
      "@shared": path.resolve(import.meta.dirname, "shared"),
      "@assets": path.resolve(import.meta.dirname, "attached_assets"),
    },
  },
  envDir: path.resolve(import.meta.dirname),
  root: path.resolve(import.meta.dirname, "client"),
  publicDir: path.resolve(import.meta.dirname, "client", "public"),
  build: {
    outDir: path.resolve(import.meta.dirname, "dist/public"),
    emptyOutDir: true,
  },
  server: {
    host: true,
    fs: {
      strict: true,
      deny: ["**/.*"],
    },
  },
});