hunk.code_window: 	useRef,
   	useState,
   	type ReactNode
   } from 'react';
   import { useMatch } from 'react-router';
   import Selecto from 'react-selecto';
   import { useKey } from 'rooks';
   import { type ExplorerItem } from '@sd/client';
   import { GridList, useGridList } from '~/components';
  
hunk.labels: keep keep keep keep replace keep keep keep keep
hunk.file_path: interface/app/$libraryId/Explorer/View/GridList.tsx
hunk.type: replace
file: // @ts-check
  const { withContentlayer } = require('next-contentlayer');
  const withBundleAnalyzer = require('@next/bundle-analyzer')({
  	enabled: process.env.ANALYZE === 'true'
  });
  
  // Validate env on build // TODO: I wish we could do this so Vercel can warn us when we are wrong but it's too hard.
  // import './src/env.mjs';
  
  /** @type {import('next').NextConfig} */
  const nextConfig = {
  	reactStrictMode: true,
  	swcMinify: true,
  	transpilePackages: ['@sd/ui'],
  	eslint: {
  		ignoreDuringBuilds: true
  	},
  	typescript: {
  		ignoreBuildErrors: true
  	},
  	experimental: {
  		optimizePackageImports: ['@sd/ui']
  	},
  	headers: async () => [
  		{
  			source: '/api/:path*',
  			headers: [
  				{
  					key: 'Access-Control-Allow-Origin',
  					value: '*'
  				},
  				{
  					key: 'Access-Control-Allow-Methods',
  					value: 'GET, HEAD, OPTIONS'
  				},
  				{
  					key: 'Access-Control-Allow-Headers',
  					value: 'Content-Type'
  				}
  			]
  		}
  	],
  	webpack(config) {
  		// Grab the existing rule that handles SVG imports
  		const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
  
  		config.module.rules.push(
  			// Reapply the existing rule, but only for svg imports ending in ?url
  			{
  				...fileLoaderRule,
  				test: /\.svg$/i,
  				resourceQuery: /url/ // *.svg?url
  			},
  			// Convert all other *.svg imports to React components so it's compatible with Vite's plugin.
  			{
  				test: /\.svg$/i,
  				issuer: /\.[jt]sx?$/,
  				resourceQuery: { not: /url/ }, // exclude if *.svg?url
  				use: [
  					{
  						loader: '@svgr/webpack',
  						options: {
  							icon: true,
  							exportType: 'named',
  							typescript: true,
  							svgProps: { fill: 'currentColor' }
  						}
  					}
  				]
  			}
  		);
  
  		// Modify the file loader rule to ignore *.svg, since we have it handled now.
  		fileLoaderRule.exclude = /\.svg$/i;
  
  		return config;
  	}
  };
  
  module.exports = withBundleAnalyzer(withContentlayer(nextConfig));
  