feat(ui): new index page

apps/web/package.json

@@ -48,6 +48,7 @@
     "clsx": "^2.1.0",
     "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
     "hls-video-element": "^1.5.0",
     "hls.js": "^1.6.15",
     "lucia": "^3.2.2",

apps/web/src/app/(ui)/(public)/page.tsx

@@ -1,10 +1,8 @@
 import LandingPage from '@/components/app/LandingPage/LandingPage';
-import { Card, CardContent } from '@/components/ui/card';
+import StreamGrid from '@/components/app/StreamGrid/StreamGrid';
 import ConfusedDino from '@/components/ui/confuseddino';
 import { validateRequest } from '@/lib/auth/validate';
 import { prisma } from '@hctv/db';
-import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
-import Image from 'next/image';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
@@ -13,67 +11,45 @@ export default async function Home() {
   if (user && !user?.hasOnboarded) {
     redirect('/onboarding');
   }
-  const streams = await prisma.streamInfo.findMany({
-    where: {
-      isLive: true,
-    },
-    include: {
-      channel: true,
-    },
-  });
+
+  const [liveStreams, offlineStreams] = await Promise.all([
+    prisma.streamInfo.findMany({
+      where: { isLive: true },
+      include: { channel: true },
+    }),
+    prisma.streamInfo.findMany({
+      where: { isLive: false },
+      include: { channel: true },
+    }),
+  ]);
+
   if (!user) {
     return <LandingPage />;
   }
-  if (!streams.length) {
+
+  if (!liveStreams.length && !offlineStreams.length) {
     return (
-      <div className="flex justify-center items-center text-center flex-col pt-4 gap-2">
-        <h2>No streams found!</h2>
-        <p>...maybe start one?</p>
-        <ConfusedDino className='w-40 h-40' />
+      <div className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 text-center">
+        <ConfusedDino className="h-28 w-28 opacity-80" />
+        <div className="space-y-1.5">
+          <h2 className="pb-0 text-2xl font-semibold tracking-tight">Nothing live right now</h2>
+          <p className="text-sm text-muted-foreground">
+            Nobody&apos;s streaming yet — why not be the first?
+          </p>
+        </div>
+        <Link
+          href="/settings/channel"
+          className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Start streaming
+        </Link>
       </div>
     );
   }
 
   return (
-    <div className="p-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        {streams.map((stream) => (
-          <Link href={`/${stream.username}`} key={stream.id}>
-            <Card className="overflow-hidden hover:shadow-lg transition-shadow">
-              <CardContent className="p-0">
-                <div className="relative">
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
-                    src={`/api/stream/thumb/${stream.channel.name}`}
-                    width={512}
-                    height={512}
-                    alt={stream.title}
-                    className="w-full h-48 object-cover"
-                  />
-                  <div className="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
-                    LIVE
-                  </div>
-                  <div className="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
-                    {stream.viewers} viewers
-                  </div>
-                </div>
-                <div className="p-4">
-                  <div className="flex items-start">
-                    <Avatar className="h-10 w-10 mr-3">
-                      <AvatarImage src={stream.channel.pfpUrl} />
-                      <AvatarFallback>{stream.channel.name}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <h3 className="font-semibold line-clamp-1">{stream.title}</h3>
-                      <p className="text-sm text-muted-foreground">{stream.category}</p>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
+    <div className="p-4 md:p-6">
+      <StreamGrid liveStreams={liveStreams} offlineStreams={offlineStreams} />
     </div>
   );
 }

apps/web/src/components/app/StreamGrid/StreamGrid.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import Link from 'next/link';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import ConfusedDino from '@/components/ui/confuseddino';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel';
+import type { Channel, StreamInfo } from '@hctv/db';
+
+type StreamWithChannel = StreamInfo & { channel: Channel };
+
+interface StreamGridProps {
+  liveStreams: StreamWithChannel[];
+  offlineStreams: StreamWithChannel[];
+}
+
+export default function StreamGrid({ liveStreams, offlineStreams }: StreamGridProps) {
+  const sorted = [...liveStreams].sort((a, b) => b.viewers - a.viewers);
+  const [featured, ...rest] = sorted;
+
+  return (
+    <div className="space-y-10">
+      {!featured && (
+        <div className="flex flex-col items-center gap-4 py-10 text-center">
+          <ConfusedDino className="h-24 w-24 opacity-70" />
+          <div className="space-y-1">
+            <p className="font-semibold">Nobody&apos;s live right now</p>
+            <p className="text-sm text-muted-foreground">Why not be the first?</p>
+          </div>
+          <Link
+            href="/settings/channel"
+            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
+          >
+            Start streaming
+          </Link>
+        </div>
+      )}
+
+      {featured && (
+        <section>
+          <SectionHeading label="Featured" />
+          <Link href={`/${featured.username}`} className="group block max-w-2xl">
+            <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-shadow duration-200 group-hover:shadow-md">
+              <div className="relative aspect-video overflow-hidden bg-muted">
+                <img
+                  src={`/api/stream/thumb/${featured.channel.name}`}
+                  alt={featured.title}
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
+                <div className="absolute bottom-3 left-3 flex items-center gap-2">
+                  <LiveBadge />
+                  {featured.category && (
+                    <span className="rounded-full bg-black/60 px-2.5 py-0.5 text-xs font-medium text-white backdrop-blur-sm">
+                      {featured.category}
+                    </span>
+                  )}
+                </div>
+                <div className="absolute bottom-3 right-3">
+                  <ViewerCount count={featured.viewers} />
+                </div>
+              </div>
+              <div className="flex items-start gap-4 p-4">
+                <Avatar className="h-10 w-10 shrink-0 ring-2 ring-primary/30">
+                  <AvatarImage src={featured.channel.pfpUrl} alt={featured.channel.name} />
+                  <AvatarFallback className="text-sm font-semibold">
+                    {featured.channel.name.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate font-semibold leading-snug">{featured.title}</p>
+                  <p className="mt-0.5 text-sm text-muted-foreground">{featured.channel.name}</p>
+                </div>
+              </div>
+            </div>
+          </Link>
+        </section>
+      )}
+
+      {rest.length > 0 && (
+        <section>
+          <SectionHeading label="Live now" count={rest.length} />
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {rest.map((stream) => (
+              <StreamCard key={stream.id} stream={stream} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {offlineStreams.length > 0 && (
+        <section>
+          <SectionHeading label="Offline channels" count={offlineStreams.length} />
+          <div className="px-8">
+            <Carousel opts={{ align: 'start', dragFree: true }}>
+              <CarouselContent>
+                {offlineStreams.map((stream) => (
+                  <CarouselItem
+                    key={stream.id}
+                    className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6"
+                  >
+                    <OfflineCard stream={stream} />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function StreamCard({ stream }: { stream: StreamWithChannel }) {
+  return (
+    <Link href={`/${stream.username}`} className="group block">
+      <div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-shadow duration-200 group-hover:shadow-md">
+        <div className="relative aspect-video overflow-hidden bg-muted">
+          <img
+            src={`/api/stream/thumb/${stream.channel.name}`}
+            alt={stream.title}
+            className="h-full w-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+          <div className="absolute bottom-2 left-2">
+            <LiveBadge small />
+          </div>
+          <div className="absolute bottom-2 right-2">
+            <ViewerCount count={stream.viewers} small />
+          </div>
+        </div>
+        <div className="flex items-start gap-3 p-3">
+          <Avatar className="h-8 w-8 shrink-0 ring-1 ring-primary/20">
+            <AvatarImage src={stream.channel.pfpUrl} alt={stream.channel.name} />
+            <AvatarFallback className="text-xs">
+              {stream.channel.name.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium leading-snug">{stream.title}</p>
+            <p className="truncate text-xs text-muted-foreground">{stream.channel.name}</p>
+            {stream.category && (
+              <Badge
+                variant="secondary"
+                className="mt-1.5 rounded-full px-2 py-0 text-[10px] font-medium"
+              >
+                {stream.category}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function OfflineCard({ stream }: { stream: StreamWithChannel }) {
+  return (
+    <Link href={`/${stream.username}`} className="group block">
+      <div className="flex flex-col items-center gap-2 rounded-lg p-3 transition-colors duration-150 hover:bg-muted/50">
+        <div className="relative">
+          <Avatar className="h-16 w-16 ring-2 ring-border transition-colors duration-150 group-hover:ring-border/60">
+            <AvatarImage src={stream.channel.pfpUrl} alt={stream.channel.name} />
+            <AvatarFallback className="text-lg font-semibold">
+              {stream.channel.name.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <span className="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-background bg-muted-foreground/40" />
+        </div>
+        <p className="w-full truncate text-center text-xs font-medium">{stream.channel.name}</p>
+      </div>
+    </Link>
+  );
+}
+
+function LiveBadge({ small }: { small?: boolean }) {
+  return (
+    <span
+      className={`flex items-center gap-1 rounded-full bg-red-600 font-bold uppercase tracking-wide text-white ${small ? 'px-1.5 py-0.5 text-[9px]' : 'px-2 py-0.5 text-[10px]'}`}
+    >
+      <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-white" />
+      Live
+    </span>
+  );
+}
+
+function ViewerCount({ count, small }: { count: number; small?: boolean }) {
+  return (
+    <span
+      className={`flex items-center gap-1 rounded-full bg-black/70 font-medium text-white backdrop-blur-sm ${small ? 'px-1.5 py-0.5 text-[9px]' : 'px-2 py-0.5 text-xs'}`}
+    >
+      <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-400" />
+      {count.toLocaleString()}
+    </span>
+  );
+}
+
+function SectionHeading({ label, count }: { label: string; count?: number }) {
+  return (
+    <div className="mb-3 flex items-center gap-2">
+      <h2 className="pb-0 text-base font-semibold tracking-tight">{label}</h2>
+      {count !== undefined && (
+        <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+          {count}
+        </span>
+      )}
+      <div className="ml-2 h-px flex-1 bg-border" />
+    </div>
+  );
+}

apps/web/src/components/ui/carousel.tsx

@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

dev/mediamtx.yml

@@ -6,7 +6,6 @@ srt: yes
 srtAddress: :8890
 
 hls: yes
-hlsAddress: :8891
 
 authMethod: http
 authHTTPAddress: http://host.docker.internal:3000/api/mediamtx/publish

pnpm-lock.yaml

@@ -183,6 +183,9 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@19.2.3)
       hls-video-element:
         specifier: ^1.5.0
         version: 1.5.10
@@ -4595,6 +4598,19 @@ packages:
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -5143,11 +5159,12 @@ packages:
 
   glob@10.5.0:
     resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
@@ -13053,6 +13070,18 @@ snapshots:
 
   electron-to-chromium@1.5.267: {}
 
+  embla-carousel-react@8.6.0(react@19.2.3):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.3
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
+
   emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
@@ -13284,8 +13313,8 @@ snapshots:
       '@typescript-eslint/parser': 8.51.0(eslint@8.57.1)(typescript@5.9.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.2.0(eslint@8.57.1)
@@ -13304,7 +13333,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3
@@ -13315,22 +13344,22 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.51.0(eslint@8.57.1)(typescript@5.9.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -13341,7 +13370,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.51.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3