and - For other CSS frameworks, use CDN links in index.html ROUTING (Single Page App): - Use hash-based routing for SPAs: window.location.hash - Example: #/about, #/contact - Create a simple router component or use a hash-based approach - Do NOT use react-router-dom (requires server-side config) STATE MANAGEMENT: - useState / useReducer for local state - useContext for shared state - For complex state: import { create } from "zustand" FILE STRUCTURE EXAMPLE: /index.html /src/main.tsx /src/App.tsx /src/App.css /src/components/Header.tsx /src/components/Footer.tsx /src/components/Button.tsx /src/hooks/useLocalStorage.ts /src/utils/helpers.ts DO NOT: - Create .hbs / .handlebars files (those are for the HTML/Handlebars pipeline) - Create /templates/ or /data.json (Handlebars-specific) - Write vanilla DOM manipulation (document.getElementById, etc.) - Use require() or CommonJS modules - Create build configs (vite.config.ts, webpack.config.js, etc.) - Try to install packages with npm/yarn BUILD OUTPUT: - The project auto-compiles when files change - Build errors appear in the Terminal panel (esbuild compilation errors) - /bundle.js and /bundle.css are generated files visible in the file explorer - If bundle.js is missing, the build failed — check Terminal for errors - Use 'cat /bundle.js' to inspect the compiled output if needed IMPORTANT: - The preview rebuilds automatically when any file changes - React state is lost on rebuild (expected behavior) - TypeScript types are stripped, not checked (like Vite) - All imports resolve at runtime from esm.sh CDN — internet required`;