Merge branch 'develop' into feature/cameraControls-2

Reviewed-on: #18

package.json

@@ -21,13 +21,15 @@
     "clsx": "^2.1.1",
     "formik": "^2.4.9",
     "konva": "^10.0.11",
+    "rc-slider": "^11.1.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-konva": "^19.2.0",
     "react-modal": "^3.16.3",
     "react-tabs": "^6.1.0",
     "react-use-websocket": "3.0.0",
-    "sonner": "^2.0.7"
+    "sonner": "^2.0.7",
+    "use-debounce": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/app/providers/CameraFeedProvider.tsx

@@ -3,9 +3,14 @@ import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
 import { useBlackBoard } from "../../hooks/useBlackBoard";
 import type { CameraFeedState } from "../../types/types";
+import { useCameraZoom } from "../../features/cameras/hooks/useCameraZoom";
 
 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
   const { blackboardMutation } = useBlackBoard();
+  const { cameraZoomQuery: cameraZoomQueryA } = useCameraZoom("A");
+  const { cameraZoomQuery: cameraZoomQueryB } = useCameraZoom("B");
+  const { cameraZoomQuery: cameraZoomQueryC } = useCameraZoom("C");
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
@@ -29,5 +34,42 @@ export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
     fetchBlackBoardData();
   }, []);
 
+  useEffect(() => {
+    const fetchZoomLevels = async () => {
+      const [resultA, resultB, resultC] = await Promise.all([
+        cameraZoomQueryA.refetch(),
+        cameraZoomQueryB.refetch(),
+        cameraZoomQueryC.refetch(),
+      ]);
+
+      console.log(resultA?.data);
+      const zoomLevelAnumber = parseFloat(resultA.data?.propPhysCurrent?.value);
+      const zoomLevelBnumber = parseFloat(resultB.data?.propPhysCurrent?.value);
+      const zoomLevelCnumber = parseFloat(resultC.data?.propPhysCurrent?.value);
+
+      if (resultA.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "A", zoomLevel: zoomLevelAnumber },
+        });
+      }
+
+      if (resultB.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "B", zoomLevel: zoomLevelBnumber },
+        });
+      }
+
+      if (resultC.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "C", zoomLevel: zoomLevelCnumber },
+        });
+      }
+    };
+    fetchZoomLevels();
+  }, []);
+
   return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
 };

src/app/reducers/cameraFeedReducer.ts

@@ -37,6 +37,11 @@ export const initialState: CameraFeedState = {
     B: "painter",
     C: "painter",
   },
+  zoomLevel: {
+    A: 1,
+    B: 1,
+    C: 1,
+  },
 };
 
 export function reducer(state: CameraFeedState, action: CameraFeedAction) {
@@ -106,7 +111,14 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
       return {
         ...initialState,
       };
-
+    case "SET_ZOOM_LEVEL":
+      return {
+        ...state,
+        zoomLevel: {
+          ...state.zoomLevel,
+          [action.payload.cameraFeedID]: action.payload.zoomLevel,
+        },
+      };
     default:
       return state;
   }

src/features/cameras/components/CameraGrid.tsx

@@ -4,22 +4,33 @@ import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
 
 import PlatePatch from "./PlatePatch/SightingPatch";
+import ResetAllModal from "./CameraSettings/resetAllModal/ResetAllModal";
 
 const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
-      <div className="col-span-2 flex flex-col gap-4">
-        <div className="">
-          <VideoFeedGridPainter />
-        </div>
-        <div className="overflow-hidden">
-          <PlatePatch />
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
+        <div className="col-span-2 flex flex-col gap-4">
+          <div className="">
+            <VideoFeedGridPainter />
+          </div>
+          <div className="overflow-hidden">
+            <PlatePatch />
+          </div>
         </div>
+        <CameraSettings
+          tabIndex={tabIndex}
+          setTabIndex={setTabIndex}
+          isResetAllModalOpen={isResetModalOpen}
+          handleClose={() => setIsResetModalOpen(false)}
+          setIsResetModalOpen={setIsResetModalOpen}
+        />
       </div>
-      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
-    </div>
+      <ResetAllModal isResetAllModalOpen={isResetModalOpen} handleClose={() => setIsResetModalOpen(false)} />
+    </>
   );
 };
 

src/features/cameras/components/CameraSettings/CameraPanel.tsx

@@ -2,12 +2,16 @@ import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
+import CameraControls from "./cameraControls/CameraControls";
 
 type CameraPanelProps = {
   tabIndex: number;
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
+const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: CameraPanelProps) => {
   const { state, dispatch } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
   const regions = state.regionsByCamera[cameraFeedID];
@@ -45,13 +49,13 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
           selectedRegionIndex={selectedRegionIndex}
           mode={mode}
           cameraFeedID={cameraFeedID}
+          isResetAllModalOpen={isResetAllModalOpen}
+          handleClose={handleClose}
+          setIsResetModalOpen={setIsResetModalOpen}
         />
       </TabPanel>
       <TabPanel>
-        <div className="p-4">
-          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
-          <p>Controls for camera {cameraFeedID} will go here.</p>
-        </div>
+        <CameraControls cameraFeedID={cameraFeedID} />
       </TabPanel>
     </Tabs>
   );

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -6,9 +6,18 @@ import CameraPanel from "./CameraPanel";
 type CameraSettingsProps = {
   setTabIndex: (tabIndex: number) => void;
   tabIndex: number;
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
+const CameraSettings = ({
+  tabIndex,
+  setTabIndex,
+  isResetAllModalOpen,
+  handleClose,
+  setIsResetModalOpen,
+}: CameraSettingsProps) => {
   return (
     <Card className="p-4 w-full h-full max-h-screen">
       <Tabs
@@ -22,13 +31,28 @@ const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
           <Tab>Camera C</Tab>
         </TabList>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
       </Tabs>
     </Card>

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -10,9 +10,20 @@ type RegionSelectorProps = {
   selectedRegionIndex: number;
   mode: string;
   cameraFeedID: "A" | "B" | "C";
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
+const RegionSelector = ({
+  regions,
+  selectedRegionIndex,
+  mode,
+  cameraFeedID,
+  isResetAllModalOpen,
+
+  setIsResetModalOpen,
+}: RegionSelectorProps) => {
   const { colourMutation } = useColourDectection();
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
@@ -61,8 +72,9 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  const handleResetAll = () => {
-    dispatch({ type: "RESET_CAMERA_FEED" });
+  const openResetModal = () => {
+    if (isResetAllModalOpen) return;
+    setIsResetModalOpen(true);
   };
 
   const handleSaveclick = () => {
@@ -228,7 +240,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             Reset Region
           </button>
           <button
-            onClick={handleResetAll}
+            onClick={openResetModal}
             className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
           >
             Reset All

src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx

@@ -0,0 +1,42 @@
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import SliderComponent from "../../../../../ui/SliderComponent";
+import { useCameraZoom } from "../../../hooks/useCameraZoom";
+import { useDebouncedCallback } from "use-debounce";
+
+type CameraControlsProps = {
+  cameraFeedID: "A" | "B" | "C";
+};
+
+const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
+
+  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
+  const debouncedMutation = useDebouncedCallback(async (value) => {
+    await cameraZoomMutation.mutateAsync({
+      cameraFeedID,
+      zoomLevel: value as number,
+    });
+  }, 1000);
+
+  const handleChange = (value: number | number[]) => {
+    const newZoom = value as number;
+    dispatch({
+      type: "SET_ZOOM_LEVEL",
+      payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
+    });
+    debouncedMutation(newZoom);
+  };
+
+  return (
+    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
+      <div className="w-[70%] ">
+        <label htmlFor="zoom">Zoom {zoomLevel} </label>
+        <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
+      </div>
+    </div>
+  );
+};
+
+export default CameraControls;

src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx

@@ -0,0 +1,55 @@
+import { toast } from "sonner";
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import { useBlackBoard } from "../../../../../hooks/useBlackBoard";
+import ModalComponent from "../../../../../ui/ModalComponent";
+
+type ResetAllModalProps = {
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+};
+
+const ResetAllModal = ({ isResetAllModalOpen, handleClose }: ResetAllModalProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { blackboardMutation } = useBlackBoard();
+
+  const handleResetAll = async () => {
+    dispatch({ type: "RESET_CAMERA_FEED" });
+
+    handleClose();
+    const result = await blackboardMutation.mutateAsync({
+      operation: "INSERT",
+      path: `cameraFeed`,
+      value: state,
+    });
+    //  Need endpoint to reset all target detection painted cells
+    if (result?.reason === "OK") {
+      toast.success("All camera settings have been reset to default values.");
+    }
+  };
+  return (
+    <ModalComponent isModalOpen={isResetAllModalOpen} close={handleClose}>
+      <div>
+        <h2 className="text-xl font-bold mb-4">Reset All Camera Settings</h2>
+        <p className="mb-4">
+          Are you sure you want to reset all camera settings to their default values? This action cannot be undone.
+        </p>
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={handleResetAll}
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleClose}
+            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default ResetAllModal;

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -93,7 +93,6 @@ const VideoFeedGridPainter = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      console.log(window.innerWidth);
       if (width < 768) {
         const newWidth = width * 0.8;
         const newHeight = newWidth / aspectRatio;

src/features/cameras/hooks/useCameraZoom.ts

@@ -0,0 +1,48 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { CameraZoomConfig } from "../../../types/types";
+
+const fetchZoomLevel = async (cameraFeedID: string) => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Camera${cameraFeedID}-onvif-controller`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
+  const fields = [
+    { property: "propPhysCurrent", value: zoomConfig.zoomLevel },
+    { property: "propCameraHost", value: "192.168.0.101" },
+    { property: "propCameraPort", value: 80 },
+    { property: "propCameraUsername", value: "administrator" },
+    { property: "propCameraPassword", value: "MAV12345" },
+  ];
+  const zoomPayload = {
+    id: `Camera${zoomConfig.cameraFeedID}-onvif-controller`,
+    fields,
+  };
+  console.log(zoomPayload);
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(zoomPayload),
+  });
+
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useCameraZoom = (cameraFeedID: "A" | "B" | "C") => {
+  const cameraZoomQuery = useQuery({
+    queryKey: ["cameraZoom", cameraFeedID],
+    queryFn: () => fetchZoomLevel(cameraFeedID),
+  });
+
+  const cameraZoomMutation = useMutation({
+    mutationKey: ["postCameraZoom"],
+    mutationFn: (zoomConfig: CameraZoomConfig) => postZoomLevel(zoomConfig),
+  });
+  return { cameraZoomQuery, cameraZoomMutation };
+};

src/features/output/components/ChannelCard.tsx

@@ -23,7 +23,7 @@ const ChannelCard = () => {
         type="submit"
         className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
       >
-        {"Save Changes"}
+        {"Save Settings"}
       </button>
     </Card>
   );

src/features/output/components/OSDFields.tsx

@@ -29,7 +29,6 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
     <div>
       <div className="flex flex-col space-y-4">
         <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
-          <h2 className="text-2xl mb-4">OSD Options</h2>
           <div className="flex flex-col space-y-4">
             {includeKeys.map((key) => (
               <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
@@ -62,7 +61,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
             onClick={() => handleSubmit(values)}
             className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
           >
-            Submit
+            Save Settings
           </button>
         </div>
       </div>

src/features/output/components/OSDOptionsCard.tsx

@@ -1,6 +1,8 @@
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import OSDFields from "./OSDFields";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
 
 type OSDOptionsCardProps = {
   isOSDLoading: boolean;
@@ -10,7 +12,18 @@ const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
   return (
     <Card className="p-4 flex-1">
       <CardHeader title="OSD Payload Options" />
-      <OSDFields isOSDLoading={isOSDLoading} />
+      <Tabs>
+        <TabList>
+          <Tab>OSD Settings</Tab>
+          <Tab>payload Settings</Tab>
+        </TabList>
+        <TabPanel>
+          <OSDFields isOSDLoading={isOSDLoading} />
+        </TabPanel>
+        <TabPanel>
+          <div>payload settings</div>
+        </TabPanel>
+      </Tabs>
     </Card>
   );
 };

src/index.css

@@ -5,3 +5,33 @@ body {
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Modal animations */
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+  transition: all 200ms ease-in-out;
+}
+
+.ReactModal__Content--after-open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.ReactModal__Content--before-close {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+}

src/types/types.ts

@@ -143,6 +143,11 @@ export type CameraFeedState = {
   };
 
   tabIndex?: number;
+  zoomLevel: {
+    A: number;
+    B: number;
+    C: number;
+  };
 };
 
 export type CameraFeedAction =
@@ -177,6 +182,10 @@ export type CameraFeedAction =
     }
   | {
       type: "RESET_CAMERA_FEED";
+    }
+  | {
+      type: "SET_ZOOM_LEVEL";
+      payload: { cameraFeedID: "A" | "B" | "C"; zoomLevel: number };
     };
 
 export type DecodeReading = {
@@ -227,3 +236,5 @@ export type BlackBoardOptions = {
   path?: string;
   value?: object | string | number | (string | number)[] | null;
 };
+
+export type CameraZoomConfig = { cameraFeedID: string; zoomLevel: number };

src/ui/ModalComponent.tsx

@@ -13,6 +13,15 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
       onRequestClose={close}
       className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+      closeTimeoutMS={200}
+      style={{
+        overlay: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
     >
       {children}
     </Modal>

src/ui/SliderComponent.tsx

@@ -0,0 +1,24 @@
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+
+type SliderComponentProps = {
+  id: string;
+  onChange: (value: number | number[]) => void;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+const SliderComponent = ({ id, onChange, value = 0, min = 0, max = 100, step = 1 }: SliderComponentProps) => {
+  const handleChange = (val: number | number[]) => {
+    onChange(val);
+  };
+  return (
+    <>
+      <Slider id={id} onChange={handleChange} value={value} min={min} max={max} step={step} />
+    </>
+  );
+};
+
+export default SliderComponent;

yarn.lock

@@ -226,6 +226,11 @@
     "@babel/plugin-transform-modules-commonjs" "^7.27.1"
     "@babel/plugin-transform-typescript" "^7.28.5"
 
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
+  integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
+
 "@babel/template@^7.27.2":
   version "7.27.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
@@ -1314,6 +1319,11 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -2142,6 +2152,23 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+rc-slider@^11.1.9:
+  version "11.1.9"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
+  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.36.0"
+
+rc-util@^5.36.0:
+  version "5.44.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
+  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
 react-dom@^19.2.0:
   version "19.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
@@ -2159,6 +2186,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-konva@^19.2.0:
   version "19.2.0"
   resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-19.2.0.tgz#b4cc5d73cd6d642569e4df36a0139996c3dcf8e6"
@@ -2461,6 +2493,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
+  integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
+
 use-sync-external-store@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"