Implement video feed feature with components, hooks, and utility functions

- Implemented VideoFeed component to display sightings.
- Created useSightingList and useVideoFeed hooks for data fetching and state management.
- Added AppProviders for context management.
- Updated Dashboard to include VideoFeed.
- Introduced types for sightings in utils/types.tsx.
- Added Header and Footer components for layout.
- Configured React Query for data handling.

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package.json

@@ -14,9 +14,14 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "^1.141.6",
+    "clsx": "^2.1.1",
+    "country-flag-icons": "^1.6.4",
+    "konva": "^10.0.12",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-konva": "^19.2.1",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

src/app/config.ts

@@ -0,0 +1 @@
+export const cambase = import.meta.env.VITE_LOCAL_CAMBASE;

src/app/providers/AppProviders.tsx

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from "react";
+import { QueryProvider } from "./QueryProvider";
+
+const AppProviders = ({ children }: PropsWithChildren) => {
+  return <QueryProvider>{children}</QueryProvider>;
+};
+
+export default AppProviders;

src/app/providers/QueryProvider.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "../queryClient";
+
+export function QueryProvider({ children }: PropsWithChildren) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

src/app/queryClient.ts

@@ -0,0 +1,10 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

src/components/CardHeader.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+type CardHeaderProps = {
+  title: string;
+};
+
+const CardHeader = ({ title }: CardHeaderProps) => {
+  return (
+    <div
+      className={clsx(
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
+      )}
+    >
+      <div className="flex flex-row items-center w-full justify-between">
+        <h2 className="flex flex-row text-xl items-center">{title}</h2>
+      </div>
+    </div>
+  );
+};
+
+export default CardHeader;

src/components/ui/Card.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import clsx from "clsx";
+
+type CardProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Card = ({ children, className }: CardProps) => {
+  return (
+    <div
+      className={clsx(
+        "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

src/features/dashboard/Dashboard.tsx

@@ -0,0 +1,17 @@
+import SightingStack from "./components/sightingStack/SightingStack";
+import VideoFeed from "./components/videoFeed/VideoFeed";
+import { useSightingList } from "./hooks/useSightingList";
+
+const Dashboard = () => {
+  const { sightingList, isLoading } = useSightingList();
+  const mostRecent = sightingList[0];
+
+  return (
+    <div className="grid gird-cols-1 md:grid-cols-2 gap-20">
+      <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+      <SightingStack sightings={sightingList} />
+    </div>
+  );
+};
+
+export default Dashboard;

src/features/dashboard/components/platePatch/NumberPlate.tsx

@@ -0,0 +1,57 @@
+import { GB } from "country-flag-icons/react/3x2";
+import { formatNumberPlate } from "../../../../utils/utils";
+
+type NumberPlateProps = {
+  vrm?: string | undefined;
+  motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+};
+
+const NumberPlate = ({ vrm, motion, size }: NumberPlateProps) => {
+  let options = {
+    plateWidth: "w-[14rem]",
+    textSize: "text-2xl",
+    borderWidth: "border-6",
+  };
+
+  switch (size) {
+    case "xs":
+      options = {
+        plateWidth: "w-[8rem]",
+        textSize: "text-md",
+        borderWidth: "border-4",
+      };
+      break;
+    case "sm":
+      options = {
+        plateWidth: "w-[10rem]",
+        textSize: "text-lg",
+        borderWidth: "border-4",
+      };
+      break;
+    case "lg":
+      options = {
+        plateWidth: "w-[16rem]",
+        textSize: "text-3xl",
+        borderWidth: "border-6",
+      };
+      break;
+  }
+
+  return (
+    <div
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
+        text-black px-6 py-2 text-monospace font-mono flex items-center justify-center
+        ${motion ? "bg-yellow-400" : "bg-white"}`}
+    >
+      <div>
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
+          <GB />
+        </div>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default NumberPlate;

src/features/dashboard/components/sightingStack/SightingItem.tsx

@@ -0,0 +1,23 @@
+import type { SightingType } from "../../../../utils/types";
+import NumberPlate from "../platePatch/NumberPlate";
+
+type SightingItemProps = {
+  sighting: SightingType;
+};
+
+const SightingItem = ({ sighting }: SightingItemProps) => {
+  console.log(sighting);
+  const motion = sighting.motion.toLowerCase() === "away" ? true : false;
+  return (
+    <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">
+      <div>
+        <div>Ref: {sighting.ref}</div>
+        <div>vrm: {sighting.vrm}</div>
+      </div>
+
+      <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
+    </div>
+  );
+};
+
+export default SightingItem;

src/features/dashboard/components/sightingStack/SightingStack.tsx

@@ -0,0 +1,20 @@
+import CardHeader from "../../../../components/CardHeader";
+import Card from "../../../../components/ui/Card";
+import type { SightingType } from "../../../../utils/types";
+import SightingItem from "./SightingItem";
+
+type SightingStackProps = {
+  sightings: SightingType[];
+};
+const SightingStack = ({ sightings }: SightingStackProps) => {
+  return (
+    <Card className="p-4 w-full">
+      <CardHeader title="Sightings" />
+      {sightings.map((sighting) => (
+        <SightingItem key={sighting.ref} sighting={sighting} />
+      ))}
+    </Card>
+  );
+};
+
+export default SightingStack;

src/features/dashboard/components/videoFeed/VideoFeed.tsx

@@ -0,0 +1,88 @@
+import { Stage, Layer, Image, Rect } from "react-konva";
+import type { SightingType } from "../../../../utils/types";
+import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
+import { useEffect, useState } from "react";
+
+type VideoFeedProps = {
+  mostRecentSighting: SightingType;
+  isLoading: boolean;
+};
+
+const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 1280, height: 960 });
+  const [mode, setMode] = useState<number>(0);
+  const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);
+
+  const handleModeChange = (newMode: number) => {
+    if (newMode > 2) setMode(0);
+    else setMode(newMode);
+  };
+
+  useEffect(() => {
+    const updateSize = () => {
+      const width = window.innerWidth * 0.5;
+      const height = (width * 3) / 4;
+      setSize({ width, height });
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+
+  if (isLoading) return <>Loading...</>;
+
+  return (
+    <div className="w-[70%] mt-[2%]">
+      <Stage width={size.width} height={size.height} onClick={() => handleModeChange(mode + 1)}>
+        <Layer>
+          <Image
+            image={image}
+            height={size.height}
+            width={size.width}
+            onMouseEnter={(e) => {
+              const container = e.target.getStage()?.container();
+              if (container) container.style.cursor = "pointer";
+            }}
+            onMouseLeave={(e) => {
+              const container = e.target.getStage()?.container();
+              if (container) container.style.cursor = "default";
+            }}
+            cornerRadius={10}
+          />
+        </Layer>
+        {plateRect && mode === 1 && (
+          <Layer>
+            <Rect
+              x={plateRect?.[0] * size.width}
+              y={plateRect?.[1] * size.height}
+              width={plateRect?.[2] * size.width}
+              height={plateRect?.[3] * size.height}
+              stroke="blue"
+              strokeWidth={4}
+              zIndex={1}
+            />
+          </Layer>
+        )}
+
+        {plateTrack && mode === 2 && (
+          <Layer>
+            {plateTrack.map((rect, index) => (
+              <Rect
+                key={index}
+                x={rect[0] * size.width}
+                y={rect[1] * size.height}
+                width={rect[2] * size.width}
+                height={rect[3] * size.height}
+                stroke="red"
+                strokeWidth={2}
+                zIndex={1}
+              />
+            ))}
+          </Layer>
+        )}
+      </Stage>
+    </div>
+  );
+};
+
+export default VideoFeed;

src/features/dashboard/hooks/useCreateVideoSnapshot.ts

@@ -0,0 +1,19 @@
+import { useRef } from "react";
+import type { SightingType } from "../../../utils/types";
+
+export const useCreateVideoSnapshot = (mostRecentSighting: SightingType) => {
+  const latestBitMapRef = useRef<ImageBitmap | null>(null);
+  const snapshotUrl = mostRecentSighting?.overviewUrl;
+
+  const image = new Image();
+
+  image.src = snapshotUrl;
+
+  console.log(mostRecentSighting);
+
+  const plateRect = mostRecentSighting?.overviewPlateRect;
+
+  const plateTrack = mostRecentSighting?.plateTrack;
+
+  return { snapshotUrl, latestBitMapRef, image, plateRect, plateTrack };
+};

src/features/dashboard/hooks/useSightingList.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+import { useVideoFeed } from "./useVideoFeed";
+import type { SightingType } from "../../../utils/types";
+
+export const useSightingList = () => {
+  const [sightingList, setSightingList] = useState<SightingType[]>([]);
+  const { videoFeedQuery } = useVideoFeed();
+  const latestSighting = videoFeedQuery?.data;
+  const lastProcessedRef = useRef<number>(-1);
+  const isLoading = videoFeedQuery?.isPending;
+
+  useEffect(() => {
+    if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;
+
+    if (latestSighting.ref !== lastProcessedRef.current) {
+      lastProcessedRef.current = latestSighting.ref;
+
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setSightingList((prevList) => {
+        if (prevList[0]?.ref === latestSighting.ref) return prevList;
+        const dedupPrev = prevList.filter((s) => s.ref !== latestSighting.ref);
+        return [latestSighting, ...dedupPrev].slice(0, 10);
+      });
+    }
+  }, [latestSighting, latestSighting?.ref]);
+  return { sightingList, isLoading };
+};

src/features/dashboard/hooks/useVideoFeed.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+import { useEffect, useRef } from "react";
+
+const fetchVideoFeed = async (refId: number) => {
+  const response = await fetch(`${cambase}/mergedHistory/sightingSummary?mostRecentRef=${refId}`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useVideoFeed = () => {
+  const currentRefId = useRef<number>(-1);
+
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoFeed"],
+    queryFn: () => fetchVideoFeed(currentRefId.current),
+    refetchInterval: 1000,
+    refetchOnWindowFocus: false,
+    retry: false,
+    staleTime: 0,
+  });
+
+  useEffect(() => {
+    if (videoFeedQuery.data?.ref !== -1) {
+      currentRefId.current = videoFeedQuery?.data?.ref;
+    }
+  }, [videoFeedQuery.data]);
+
+  return { videoFeedQuery };
+};

src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
+import AppProviders from "./app/providers/AppProviders.tsx";
 
 const router = createRouter({
   routeTree,
@@ -17,6 +18,8 @@ declare module "@tanstack/react-router" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
+    <AppProviders>
       <RouterProvider router={router} />
-  </StrictMode>
+    </AppProviders>
+  </StrictMode>,
 );

src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import Header from "../ui/Header";
+import Header from "../components/ui/Header";
-import Footer from "../ui/Footer";
+import Footer from "../components/ui/Footer";
 
 const RootLayout = () => {
   return (

src/routes/index.tsx

@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import Dashboard from "../features/dashboard/Dashboard";
 
 export const Route = createFileRoute("/")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return <div className="">Hello "/"!</div>;
+  return <Dashboard />;
 }

src/utils/types.ts

@@ -0,0 +1,53 @@
+export type SightingType = {
+  ref: number;
+  SaFID: string;
+  overviewUrl: string;
+  plateUrlInfrared: string;
+  plateUrlColour: string;
+  vrm: string;
+  vrmSecondary: string;
+  countryCode: string;
+  timeStamp: string;
+  detailsUrl: string;
+  overviewPlateRect?: [number, number, number, number];
+  plateTrack?: [number, number, number, number][];
+  make: string;
+  model: string;
+  color: string;
+  category: string;
+  charHeight: string;
+  seenCount: string;
+  timeStampMillis: number;
+  motion: string;
+  debug: string;
+  srcCam: number;
+  locationName: string;
+  laneID: string;
+  plateSize: string;
+  overviewSize: string;
+  radarSpeed: string;
+  trackSpeed: string;
+  metadata?: Metadata;
+};
+
+export type Metadata = {
+  npedJSON: NpedJSON;
+  "hotlist-matches": HotlistMatches;
+  hotlistMatches: HotlistMatches;
+};
+
+export type HotlistMatches = {
+  Hotlist0: boolean;
+  Hotlist1: boolean;
+  Hotlist2: boolean;
+};
+
+export type NpedJSON = {
+  status_code: number;
+  reason_phrase: string;
+  "NPED CATEGORY": "A" | "B" | "C" | "D";
+  "MOT STATUS": boolean;
+  "TAX STATUS": boolean;
+  vrm: string;
+  "INSURANCE STATUS": string;
+};

src/utils/utils.ts

@@ -0,0 +1,6 @@
+export const formatNumberPlate = (plate: string) => {
+  const splittedPlate = plate?.split("");
+  splittedPlate?.splice(4, 0, " ");
+  const formattedPlate = splittedPlate?.join("");
+  return formattedPlate;
+};

yarn.lock

@@ -793,6 +793,18 @@
   resolved "https://registry.yarnpkg.com/@tanstack/history/-/history-1.141.0.tgz#6fa5119dd870f1617943903d30e799222a21f6c2"
   integrity sha512-LS54XNyxyTs5m/pl1lkwlg7uZM3lvsv2FIIV1rsJgnfwVCnI+n4ZGZ2CcjNT13BPu/3hPP+iHmliBSscJxW5FQ==
 
+"@tanstack/query-core@5.90.12":
+  version "5.90.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.90.12.tgz#e1f5f47e72ef7d0fc794325936921c700352515e"
+  integrity sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg==
+
+"@tanstack/react-query@^5.90.12":
+  version "5.90.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.90.12.tgz#49536842eff6487a9e645a453fea2642d8f4f209"
+  integrity sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg==
+  dependencies:
+    "@tanstack/query-core" "5.90.12"
+
 "@tanstack/react-router@^1.141.6":
   version "1.141.6"
   resolved "https://registry.yarnpkg.com/@tanstack/react-router/-/react-router-1.141.6.tgz#295a278c377a2d49f385f3f5a4cb53566caf53e2"
@@ -953,6 +965,16 @@
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
   integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==
 
+"@types/react-reconciler@^0.28.9":
+  version "0.28.9"
+  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.9.tgz#d24b4864c384e770c83275b3fe73fba00269c83b"
+  integrity sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==
+
+"@types/react-reconciler@^0.32.3":
+  version "0.32.3"
+  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.32.3.tgz#eb4b346f367f29f07628032934d30a4f3f9eaba7"
+  integrity sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==
+
 "@types/react@^19.2.5":
   version "19.2.7"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.7.tgz#84e62c0f23e8e4e5ac2cadcea1ffeacccae7f62f"
@@ -1211,6 +1233,11 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -1238,6 +1265,11 @@ cookie-es@^2.0.0:
   resolved "https://registry.yarnpkg.com/cookie-es/-/cookie-es-2.0.0.tgz#ca6163d7ef8686ea6bbdd551f1de575569c1ed69"
   integrity sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==
 
+country-flag-icons@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.6.4.tgz#ddf9d07465678ab0a5b04b0d2f60717c2f46cd6f"
+  integrity sha512-Z3Zi419FI889tlElMsVhCIS5eRkiLDWixr576J5DPiTe5RGxpbRi+enMpHdYVp5iK5WFjr8P/RgyIFAGhFsiFg==
+
 cross-spawn@^7.0.6:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
@@ -1616,6 +1648,13 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+its-fine@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/its-fine/-/its-fine-2.0.0.tgz#a90b18a3ee4c211a1fb6faac2abcc2b682ce1f21"
+  integrity sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==
+  dependencies:
+    "@types/react-reconciler" "^0.28.9"
+
 jiti@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.6.1.tgz#178ef2fc9a1a594248c20627cd820187a4d78d92"
@@ -1665,6 +1704,11 @@ keyv@^4.5.4:
   dependencies:
     json-buffer "3.0.1"
 
+konva@^10.0.12:
+  version "10.0.12"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-10.0.12.tgz#4d0c8d94b007c67b73630ea6369bc272f86d7e29"
+  integrity sha512-DHmkeG5FbW6tLCkbMQTi1ihWycfzljrn0V7umUUuewxx7aoINcI71ksgBX9fTPNXhlsK4/JoMgKwI/iCde+BRw==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -1906,6 +1950,23 @@ react-dom@^19.2.0:
   dependencies:
     scheduler "^0.27.0"
 
+react-konva@^19.2.1:
+  version "19.2.1"
+  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-19.2.1.tgz#a8009c884d29ad5806adcc99ca83804e13f5ef76"
+  integrity sha512-sqZWCzQGpdMrU5aeunR0oxUY8UeCPbU8gnAYxMtAn6BT4coeSpiATKOctsoxRu6F56TAcF+s0c6Lul9ansNqQA==
+  dependencies:
+    "@types/react-reconciler" "^0.32.3"
+    its-fine "^2.0.0"
+    react-reconciler "0.33.0"
+    scheduler "0.27.0"
+
+react-reconciler@0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.33.0.tgz#9dd20208d45baa5b0b4701781f858236657f15e1"
+  integrity sha512-KetWRytFv1epdpJc3J4G75I4WrplZE5jOL7Yq0p34+OVOKF4Se7WrdIdVC45XsSSmUTlht2FM/fM1FZb1mfQeA==
+  dependencies:
+    scheduler "^0.27.0"
+
 react-refresh@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.18.0.tgz#2dce97f4fe932a4d8142fa1630e475c1729c8062"
@@ -1975,7 +2036,7 @@ rollup@^4.43.0:
     "@rollup/rollup-win32-x64-msvc" "4.53.5"
     fsevents "~2.3.2"
 
-scheduler@^0.27.0:
+scheduler@0.27.0, scheduler@^0.27.0:
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
   integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==