@inwink-mcp/backoffice-extension-helpers 1.0.0

package/templates/vite-extension/AGENTS.md.tpl

@@ -0,0 +1,132 @@
+# __DISPLAY_NAME__ — Guide pour les agents IA
+
+> Ce fichier documente l'architecture du projet et les contraintes à respecter pour tout agent IA (Claude Code, Copilot, etc.) qui contribue à cette extension inwink.
+
+## Objectif du projet
+
+`__DISPLAY_NAME__` (`__NAME__`) est une **extension backoffice inwink** : __DESCRIPTION__
+
+C'est une SPA React/TypeScript **100 % client-side** (zéro code serveur) qui s'authentifie via OIDC (Authorization Code + PKCE) et communique avec les API inwink en Bearer token.
+
+## Stack technique
+
+- **React 19** + **TypeScript** (strict)
+- **Vite** (build/bundling) — `base: './'` obligatoire
+- **react-router-dom** avec **HashRouter** (routage dans le fragment `#`)
+- **oidc-client-ts** pour l'authentification OIDC
+- **react-icons** pour les icônes
+
+## Structure des dossiers
+
+```
+__NAME__/
+├── extension.manifest.json   # Identité + permissions de l'extension (obligatoire)
+├── index.html                # Point d'entrée HTML
+├── vite.config.ts            # Config Vite (base: './' + copie du manifest)
+├── scripts/zip-build.mjs     # Packaging zip {name}-{version}.zip
+└── src/
+    ├── main.tsx              # Bootstrap React (HashRouter + AuthProvider)
+    ├── App.tsx               # Routes
+    ├── styles.css            # Styles
+    ├── pages/
+    │   └── HomePage.tsx      # Page d'accueil (logique métier / UI)
+    ├── api/
+    │   └── endpoints.ts      # URLs de base des API inwink (injectées au bootstrap)
+    ├── auth/
+    │   ├── config.ts         # Configuration OIDC (UserManager)
+    │   ├── AuthProvider.tsx  # Contexte d'auth (callback OIDC inline + renewToken)
+    │   └── ProtectedRoute.tsx
+    └── hooks/
+        ├── useAuth.ts                # Hook d'accès au contexte auth
+        ├── useInwinkApi.ts           # Hook générique d'appel API (Bearer + renouvellement 401)
+        ├── useInwinkEventApi.ts      # Hook API Event
+        ├── useInwinkCommunityApi.ts  # Hook API Community
+        └── useInwinkCustomerApi.ts   # Hook API Customer
+```
+
+## Découverte des API inwink (obligatoire)
+
+Avant d'écrire **tout** appel API, utilise les outils MCP inwink pour découvrir dynamiquement endpoints, méthodes, payloads et entités :
+
+1. `inwink_mcp_find_api_endpoint` avec une requête sémantique précise et le bon `targetApi` (`eventapi`, `communityapi` ou `customerapi`).
+2. `inwink_mcp_get_entity_description` pour comprendre les entités, champs, payloads, filtres et DTOs.
+3. Code ensuite l'appel via le hook API approprié, uniquement à partir du résultat de ces outils.
+
+**Ne devine jamais une route ou un format de payload.** Le MCP est un outil de développement : l'extension n'appelle jamais le serveur MCP en runtime.
+
+## Appeler l'API inwink
+
+**N'appelle jamais `fetch` directement.** Utilise les hooks dédiés (`useInwinkEventApi`, `useInwinkCommunityApi`, `useInwinkCustomerApi`). Ils encapsulent l'envoi du Bearer token, le renouvellement automatique sur 401 (`signinSilent` puis rejeu, sinon login interactif) et la gestion d'erreurs (`InwinkApiError`).
+
+```typescript
+import { useInwinkEventApi } from './hooks/useInwinkEventApi';
+
+function MonComposant() {
+  const eventApi = useInwinkEventApi();
+
+  async function charger() {
+    // GET — le chemin est relatif à la base de l'API Event (déjà configurée)
+    const data = await eventApi.get<MaReponse>('/v1/...');
+
+    // POST avec corps JSON
+    await eventApi.post('/v1/...', { champ: 'valeur' });
+  }
+}
+```
+
+Méthodes disponibles sur chaque hook : `request<T>(path, init?)`, `get<T>`, `post<T>(path, body?)`, `put<T>(path, body?)`, `del<T>`.
+
+Pour appeler un **hôte externe déclaré** (hors API inwink), utilise le hook générique `useInwinkApi(baseUrl)`.
+
+Bonnes pratiques :
+- Toujours passer par un hook `useInwink*Api` — jamais de `fetch` direct.
+- Le 401 est géré automatiquement (renouvellement puis reconnexion) ; ne pas le ré-implémenter.
+- Gérer le 429 (rate limiting) avec un backoff exponentiel côté appelant si nécessaire.
+- Ne déclarer dans `permissions.platform` que les scopes réellement utilisés.
+- Déclarer les hôtes externes dans `permissions.externalHosts` (HTTPS uniquement).
+
+## Règles et contraintes
+
+| Règle | Détail |
+|-------|--------|
+| Pas de code serveur | L'extension est 100 % client-side (SPA statique) |
+| Pas d'`eval()` / `new Function()` | Interdit pour raisons de sécurité |
+| Pas de tokens dans `localStorage` manuellement | Utiliser uniquement le `WebStorageStateStore` d'`oidc-client-ts` |
+| Pas de tokens dans les URLs | Ne jamais passer de token en query string |
+| Pas d'imports Node.js | `fs`, `path`, `http`, `child_process`, etc. interdits dans le code source |
+| Pas de `fetch` direct | Toujours passer par `useInwinkEventApi` / `useInwinkCommunityApi` / `useInwinkCustomerApi` (ou `useInwinkApi` pour un hôte externe déclaré) |
+| Icônes via `react-icons` | Ne pas embarquer de SVG inline ni d'images d'icônes |
+| `HashRouter` obligatoire | Pour compatibilité avec l'hébergement versionné |
+| `base: './'` obligatoire | Dans `vite.config.ts`, pour les chemins d'assets relatifs |
+| `response_type: 'code'` | PKCE obligatoire, pas de flux implicit |
+| HTTPS uniquement | Pour les `externalHosts` déclarés dans le manifest |
+| `redirect_uri` = pathname courant | Toujours `${window.location.origin}${window.location.pathname}` |
+| `post_logout_redirect_uri` | Ne pas l'envoyer par défaut ; uniquement si l'URL exacte est enregistrée côté IdP |
+| Pas de `CallbackPage` séparée | Le callback est détecté inline dans `AuthProvider` via `?code=&state=` |
+| `authority` en dur | `'https://auth.inwink.com/inwink'` — ne pas utiliser `import.meta.env` (non substitué par Vite) |
+
+## Commandes
+
+```powershell
+npm install        # Installer les dépendances
+npm run dev        # Serveur de développement Vite
+npm run build      # Vérification TypeScript + build dans dist/
+npm run package    # Build + zip {name}-{version}.zip
+npm run preview    # Prévisualiser le build
+```
+
+Packaging et vérification via la CLI helper :
+
+```powershell
+npx @inwink-mcp/backoffice-extension-helpers@latest package   # build + zip + vérification de conformité
+npx @inwink-mcp/backoffice-extension-helpers@latest verify    # vérification de conformité seule
+```
+
+## Conventions de code
+
+- TypeScript strict ; pas de `any` implicite.
+- Composants fonctionnels React + hooks.
+- L'auth passe **toujours** par `useAuth()` ; ne pas appeler `userManager` directement hors de `auth/`.
+- Les appels API passent **toujours** par un hook `useInwink*Api` ; jamais de `fetch` direct dans les composants.
+- Les icônes proviennent de **`react-icons`** (ex. `react-icons/fi`, `react-icons/md`) ; pas de SVG inline ni d'images d'icônes.
+- Le squelette (auth, api, config, structure) est généré par la CLI helper — ne pas le régénérer à la main. Ajouter la logique métier dans `App.tsx` et de nouveaux composants/hooks.

package/templates/vite-extension/CLAUDE.md

@@ -0,0 +1,5 @@
+# Instructions projet (Claude Code)
+
+La documentation d'architecture, la stack, les règles et contraintes, et les conventions de ce projet vivent dans `AGENTS.md`. Claude Code ne lit pas `AGENTS.md` nativement, donc ce fichier l'importe ci-dessous.
+
+@AGENTS.md

package/templates/vite-extension/extension.manifest.json.tpl

@@ -0,0 +1,18 @@
+{
+  "name": "__NAME__",
+  "version": "0.1.0",
+  "displayName": "__DISPLAY_NAME__",
+  "description": "__DESCRIPTION__",
+  "author": "__AUTHOR__",
+  "permissions": {
+    "platform": [],
+    "externalHosts": []
+  },
+  "auth": {
+    "scopes": ["openid", "profile", "email"]
+  },
+  "entrypoint": "./dist/index.html",
+  "platform": {
+    "minVersion": "1.0.0"
+  }
+}

package/templates/vite-extension/index.html.tpl

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__DISPLAY_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/vite-extension/package.json.tpl

@@ -0,0 +1,29 @@
+{
+  "name": "__NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "package": "npm run build && npm run zip",
+    "preview": "vite preview",
+    "zip": "node ./scripts/zip-build.mjs"
+  },
+  "dependencies": {
+    "oidc-client-ts": "^3.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.4.0",
+    "react-router-dom": "^7.5.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "adm-zip": "^0.5.16",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
+  }
+}

package/templates/vite-extension/scripts/zip-build.mjs

@@ -0,0 +1,36 @@
+import AdmZip from 'adm-zip';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(currentDir, '..');
+const distDir = path.join(projectRoot, 'dist');
+const manifestPath = path.join(projectRoot, 'extension.manifest.json');
+
+if (!fs.existsSync(distDir)) {
+  throw new Error('dist directory not found. Run "npm run build" before "npm run zip".');
+}
+
+if (!fs.existsSync(manifestPath)) {
+  throw new Error('extension.manifest.json not found.');
+}
+
+const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+
+if (typeof manifest.name !== 'string' || !manifest.name.trim()) {
+  throw new Error('extension.manifest.json must define a non-empty name.');
+}
+
+if (typeof manifest.version !== 'string' || !manifest.version.trim()) {
+  throw new Error('extension.manifest.json must define a non-empty version.');
+}
+
+const zipFileName = `${manifest.name}-${manifest.version}.zip`;
+const zipFilePath = path.join(projectRoot, zipFileName);
+const zip = new AdmZip();
+
+zip.addLocalFolder(distDir);
+zip.writeZip(zipFilePath);
+
+process.stdout.write(`${zipFileName}\n`);

package/templates/vite-extension/src/App.tsx.tpl

@@ -0,0 +1,23 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import ProtectedRoute from './auth/ProtectedRoute';
+import HomePage from './pages/HomePage';
+// Pour appeler une API inwink, utilisez un hook dédié (jamais fetch directement) :
+//   import { useInwinkEventApi } from './hooks/useInwinkEventApi';
+//   const eventApi = useInwinkEventApi();
+//   const data = await eventApi.get('/v1/...');
+
+export default function App() {
+  return (
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <HomePage />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/templates/vite-extension/src/api/endpoints.ts.tpl

@@ -0,0 +1,5 @@
+// URLs de base des API inwink, injectées au bootstrap de l'extension.
+// Ne pas modifier à la main : régénérées par la CLI selon les flags --*-api-url.
+export const EVENT_API_URL = '__EVENT_API_URL__';
+export const COMMUNITY_API_URL = '__COMMUNITY_API_URL__';
+export const CUSTOMER_API_URL = '__CUSTOMER_API_URL__';

package/templates/vite-extension/src/auth/AuthProvider.tsx

@@ -0,0 +1,80 @@
+// src/auth/AuthProvider.tsx
+import { createContext, useEffect, useState, type PropsWithChildren } from 'react';
+import type { User } from 'oidc-client-ts';
+import { userManager } from './config';
+
+type AuthContextValue = {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: () => Promise<void>;
+  logout: () => Promise<void>;
+  user: User | null;
+  getAccessToken: () => string | null;
+  /** Renouvelle le token silencieusement. Retourne le nouvel access_token, ou null si échec. */
+  renewToken: () => Promise<string | null>;
+};
+
+export const AuthContext = createContext<AuthContextValue | null>(null);
+
+function isOidcCallback(): boolean {
+  const params = new URLSearchParams(window.location.search);
+  return params.has('code') && params.has('state');
+}
+
+export function AuthProvider({ children }: PropsWithChildren) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function init() {
+      try {
+        if (isOidcCallback()) {
+          const callbackUser = await userManager.signinCallback(window.location.href);
+          window.history.replaceState({}, '', window.location.pathname);
+          if (isMounted) { setUser(callbackUser ?? null); setIsLoading(false); }
+          return;
+        }
+        const loadedUser = await userManager.getUser();
+        if (isMounted) { setUser(loadedUser); setIsLoading(false); }
+      } catch {
+        if (isMounted) { setUser(null); setIsLoading(false); }
+      }
+    }
+
+    void init();
+
+    const handleUserLoaded = (u: User) => { setUser(u); setIsLoading(false); };
+    const handleUserUnloaded = () => { setUser(null); setIsLoading(false); };
+    userManager.events.addUserLoaded(handleUserLoaded);
+    userManager.events.addUserUnloaded(handleUserUnloaded);
+    return () => {
+      isMounted = false;
+      userManager.events.removeUserLoaded(handleUserLoaded);
+      userManager.events.removeUserUnloaded(handleUserUnloaded);
+    };
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{
+      isAuthenticated: Boolean(user && !user.expired),
+      isLoading,
+      login: async () => { setIsLoading(true); await userManager.signinRedirect(); },
+      logout: async () => { await userManager.removeUser(); setUser(null); },
+      user,
+      getAccessToken: () => user?.access_token ?? null,
+      renewToken: async () => {
+        try {
+          const renewed = await userManager.signinSilent();
+          setUser(renewed);
+          return renewed?.access_token ?? null;
+        } catch {
+          return null;
+        }
+      },
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}

package/templates/vite-extension/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import { useAuth } from '../hooks/useAuth';
+
+export default function ProtectedRoute({ children }: PropsWithChildren) {
+  const { isLoading } = useAuth();
+
+  if (isLoading) {
+    return <p>Chargement...</p>;
+  }
+
+  return <>{children}</>;
+}

package/templates/vite-extension/src/auth/config.ts

@@ -0,0 +1,16 @@
+// src/auth/config.ts
+import { UserManager, WebStorageStateStore } from 'oidc-client-ts';
+
+const redirectUri = `${window.location.origin}${window.location.pathname}`;
+
+export const userManager = new UserManager({
+  authority: 'https://auth.inwink.com/inwink',
+  client_id: 'inwink-extensions',
+  redirect_uri: redirectUri,
+  response_type: 'code',
+  scope: 'openid profile email',
+  loadUserInfo: true,
+  monitorSession: false,
+  automaticSilentRenew: false,
+  userStore: new WebStorageStateStore({ store: localStorage }),
+});

package/templates/vite-extension/src/hooks/useAuth.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AuthContext } from '../auth/AuthProvider';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider.');
+  }
+
+  return context;
+}

package/templates/vite-extension/src/hooks/useInwinkApi.ts

@@ -0,0 +1,101 @@
+import { useAuth } from './useAuth';
+
+/** Erreur levée lorsqu'une réponse API n'est pas OK (hors 401 géré par renouvellement). */
+export class InwinkApiError extends Error {
+  constructor(
+    public readonly status: number,
+    public readonly body: unknown,
+  ) {
+    super(`Inwink API error ${status}`);
+    this.name = 'InwinkApiError';
+  }
+}
+
+export interface InwinkApi {
+  request: <T = unknown>(path: string, init?: RequestInit) => Promise<T>;
+  get: <T = unknown>(path: string, init?: RequestInit) => Promise<T>;
+  post: <T = unknown>(path: string, body?: unknown, init?: RequestInit) => Promise<T>;
+  put: <T = unknown>(path: string, body?: unknown, init?: RequestInit) => Promise<T>;
+  del: <T = unknown>(path: string, init?: RequestInit) => Promise<T>;
+}
+
+async function safeBody(response: Response): Promise<unknown> {
+  try {
+    return await response.json();
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Hook générique d'appel aux API inwink. Encapsule l'envoi du Bearer token,
+ * le renouvellement automatique sur 401 (signinSilent puis rejeu), et le
+ * fallback sur login interactif si le renouvellement échoue.
+ *
+ * Préférez les hooks dédiés (`useInwinkEventApi`, etc.) ; ce hook générique
+ * sert aux hôtes externes déclarés ou à des bases d'URL spécifiques.
+ */
+export function useInwinkApi(baseUrl: string): InwinkApi {
+  const { getAccessToken, renewToken, login } = useAuth();
+
+  async function doFetch(path: string, token: string, init?: RequestInit): Promise<Response> {
+    return fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        ...(init?.headers as Record<string, string> | undefined),
+      },
+    });
+  }
+
+  async function request<T = unknown>(path: string, init?: RequestInit): Promise<T> {
+    let token = getAccessToken();
+    if (!token) {
+      await login();
+      throw new InwinkApiError(401, 'Non authentifié.');
+    }
+
+    let response = await doFetch(path, token, init);
+
+    if (response.status === 401) {
+      const renewed = await renewToken();
+      if (renewed) {
+        token = renewed;
+        response = await doFetch(path, token, init);
+      }
+      if (response.status === 401) {
+        await login();
+        throw new InwinkApiError(401, 'Session expirée, reconnexion requise.');
+      }
+    }
+
+    if (!response.ok) {
+      throw new InwinkApiError(response.status, await safeBody(response));
+    }
+
+    if (response.status === 204) {
+      return undefined as T;
+    }
+    return (await response.json()) as T;
+  }
+
+  const withBody =
+    (method: string) =>
+    <T = unknown>(path: string, body?: unknown, init?: RequestInit): Promise<T> =>
+      request<T>(path, {
+        ...init,
+        method,
+        body: body === undefined ? init?.body : JSON.stringify(body),
+      });
+
+  return {
+    request,
+    get: <T = unknown>(path: string, init?: RequestInit) =>
+      request<T>(path, { ...init, method: 'GET' }),
+    post: withBody('POST'),
+    put: withBody('PUT'),
+    del: <T = unknown>(path: string, init?: RequestInit) =>
+      request<T>(path, { ...init, method: 'DELETE' }),
+  };
+}

package/templates/vite-extension/src/hooks/useInwinkCommunityApi.ts

@@ -0,0 +1,7 @@
+import { COMMUNITY_API_URL } from '../api/endpoints';
+import { useInwinkApi, type InwinkApi } from './useInwinkApi';
+
+/** Accès à l'API Community inwink (Bearer token + renouvellement 401 gérés). */
+export function useInwinkCommunityApi(): InwinkApi {
+  return useInwinkApi(COMMUNITY_API_URL);
+}

package/templates/vite-extension/src/hooks/useInwinkCustomerApi.ts

@@ -0,0 +1,7 @@
+import { CUSTOMER_API_URL } from '../api/endpoints';
+import { useInwinkApi, type InwinkApi } from './useInwinkApi';
+
+/** Accès à l'API Customer inwink (Bearer token + renouvellement 401 gérés). */
+export function useInwinkCustomerApi(): InwinkApi {
+  return useInwinkApi(CUSTOMER_API_URL);
+}

package/templates/vite-extension/src/hooks/useInwinkEventApi.ts

@@ -0,0 +1,7 @@
+import { EVENT_API_URL } from '../api/endpoints';
+import { useInwinkApi, type InwinkApi } from './useInwinkApi';
+
+/** Accès à l'API Event inwink (Bearer token + renouvellement 401 gérés). */
+export function useInwinkEventApi(): InwinkApi {
+  return useInwinkApi(EVENT_API_URL);
+}

package/templates/vite-extension/src/main.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+import App from './App';
+import { AuthProvider } from './auth/AuthProvider';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <HashRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </HashRouter>
+  </React.StrictMode>,
+);

package/templates/vite-extension/src/pages/HomePage.tsx.tpl

@@ -0,0 +1,26 @@
+import { FiLogIn, FiLogOut } from 'react-icons/fi';
+import { useAuth } from '../hooks/useAuth';
+
+export default function HomePage() {
+  const { isAuthenticated, isLoading, login, logout, user } = useAuth();
+
+  return (
+    <main>
+      <h1>__DISPLAY_NAME__</h1>
+      {!isAuthenticated ? (
+        <button disabled={isLoading} onClick={() => void login()}>
+          <FiLogIn aria-hidden />
+          {isLoading ? 'Initialisation...' : 'Se connecter'}
+        </button>
+      ) : (
+        <>
+          <p>Connecté en tant que : {user?.profile.email ?? 'Inconnu'}</p>
+          <button onClick={() => void logout()}>
+            <FiLogOut aria-hidden />
+            Se déconnecter
+          </button>
+        </>
+      )}
+    </main>
+  );
+}

package/templates/vite-extension/src/styles.css

@@ -0,0 +1,32 @@
+:root {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.5;
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  padding: 2rem;
+}
+
+main {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+button {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: 1px solid currentColor;
+  background: transparent;
+  font: inherit;
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.6;
+}

package/templates/vite-extension/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/vite-extension/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/templates/vite-extension/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/vite-extension/vite.config.ts

@@ -0,0 +1,30 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const projectRoot = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    react(),
+    {
+      name: 'emit-extension-manifest',
+      generateBundle() {
+        const manifestPath = path.resolve(projectRoot, 'extension.manifest.json');
+        const source = fs.readFileSync(manifestPath, 'utf8');
+
+        this.emitFile({
+          fileName: 'extension.manifest.json',
+          source,
+          type: 'asset',
+        });
+      },
+    },
+  ],
+  build: {
+    outDir: 'dist',
+  },
+});