From 9eaec866976d764246a20c03cf0ae0cbaa890b9c Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Sun, 29 Dec 2024 13:58:09 -0500
Subject: [PATCH 01/11] save work for after react 19 migration

---
 frontend/app/element/iconbutton.tsx |  2 +-
 frontend/app/hook/useLongClick.tsx  | 76 ++++++++++++++++-------------
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/frontend/app/element/iconbutton.tsx b/frontend/app/element/iconbutton.tsx
index 85986314e4..dfabc895bf 100644
--- a/frontend/app/element/iconbutton.tsx
+++ b/frontend/app/element/iconbutton.tsx
@@ -10,7 +10,7 @@ import "./iconbutton.scss";
 type IconButtonProps = { decl: IconButtonDecl; className?: string };
 export const IconButton = memo(
     forwardRef<HTMLButtonElement, IconButtonProps>(({ decl, className }, ref) => {
-        ref = ref ?? useRef<HTMLButtonElement>(null);
+        const localRef = ref ?? useRef<HTMLButtonElement>(null);
         const spin = decl.iconSpin ?? false;
         useLongClick(ref, decl.click, decl.longClick, decl.disabled);
         return (
diff --git a/frontend/app/hook/useLongClick.tsx b/frontend/app/hook/useLongClick.tsx
index 5b71563fdd..9a8a5fb80b 100644
--- a/frontend/app/hook/useLongClick.tsx
+++ b/frontend/app/hook/useLongClick.tsx
@@ -1,40 +1,45 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
-export const useLongClick = (ref, onClick, onLongClick, disabled = false, ms = 300) => {
-    const timerRef = useRef(null);
-    const [longClickTriggered, setLongClickTriggered] = useState(false);
+export function useLongClick<T extends HTMLElement>(
+    ref: React.MutableRefObject<T>,
+    onClick?: React.PointerEventHandler<T>,
+    onLongClick?: React.PointerEventHandler<T>,
+    disabled = false,
+    ms = 300
+) {
+    const clickStartRef = useRef<number>(0);
 
     const startPress = useCallback(
-        (e: React.MouseEvent<any>) => {
-            if (onLongClick == null) {
-                return;
+        (e: React.PointerEvent<T>) => {
+            if (!onLongClick) {
+                onClick?.(e);
+            } else {
+                clickStartRef.current = Date.now();
             }
-            setLongClickTriggered(false);
-            timerRef.current = setTimeout(() => {
-                setLongClickTriggered(true);
-                onLongClick?.(e);
-            }, ms);
         },
-        [onLongClick, ms]
+        [onLongClick, onClick]
     );
 
-    const stopPress = useCallback(() => {
-        clearTimeout(timerRef.current);
-    }, []);
-
-    const handleClick = useCallback(
-        (e: React.MouseEvent<any>) => {
-            if (longClickTriggered) {
-                e.preventDefault();
-                e.stopPropagation();
-                return;
+    const stopPress = useCallback(
+        (e: React.PointerEvent<T>) => {
+            const clickStart = clickStartRef.current;
+            clickStartRef.current = 0;
+            if (clickStart !== 0) {
+                const now = Date.now();
+                const longClickTriggered = now - clickStart > ms;
+                if (longClickTriggered && onLongClick) {
+                    onLongClick?.(e);
+                } else {
+                    onClick?.(e);
+                }
+            } else {
+                onClick?.(e);
             }
-            onClick?.(e);
         },
-        [longClickTriggered, onClick]
+        [ms, onClick, onLongClick]
     );
 
     useEffect(() => {
@@ -42,18 +47,19 @@ export const useLongClick = (ref, onClick, onLongClick, disabled = false, ms = 3
 
         if (!element || disabled) return;
 
-        element.addEventListener("mousedown", startPress);
-        element.addEventListener("mouseup", stopPress);
-        element.addEventListener("mouseleave", stopPress);
-        element.addEventListener("click", handleClick);
+        const startPressBound = startPress.bind(element);
+        const stopPressBound = stopPress.bind(element);
+
+        element.addEventListener("pointerdown", startPressBound);
+        element.addEventListener("pointerup", stopPressBound);
+        element.addEventListener("pointerleave", stopPressBound);
 
         return () => {
-            element.removeEventListener("mousedown", startPress);
-            element.removeEventListener("mouseup", stopPress);
-            element.removeEventListener("mouseleave", stopPress);
-            element.removeEventListener("click", handleClick);
+            element.removeEventListener("pointerdown", startPressBound);
+            element.removeEventListener("pointerup", stopPressBound);
+            element.removeEventListener("pointerleave", stopPressBound);
         };
-    }, [ref.current, startPress, stopPress, handleClick]);
+    }, [ref.current, startPress, stopPress]);
 
     return ref;
-};
+}

From 8916d7d3cc0a46575ea59129a86c10b79de87695 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Sun, 29 Dec 2024 14:27:47 -0500
Subject: [PATCH 02/11] Upgrade to React 19

---
 docs/package.json                             |   6 +-
 frontend/app/block/blockframe.tsx             |   3 +-
 frontend/app/block/blockutil.tsx              | 155 +++---
 frontend/app/element/button.tsx               |  59 +--
 frontend/app/element/expandablemenu.tsx       |   7 +-
 frontend/app/element/flyoutmenu.tsx           |   2 +-
 frontend/app/element/iconbutton.tsx           |  42 +-
 frontend/app/element/input.tsx                | 191 ++++---
 frontend/app/element/multilineinput.tsx       | 225 ++++----
 frontend/app/element/popover.tsx              | 227 ++++-----
 frontend/app/element/windowdrag.tsx           |   7 +-
 frontend/app/modals/modal.tsx                 |  88 ++--
 frontend/app/modals/typeaheadmodal.tsx        | 104 ++--
 frontend/app/modals/userinputmodal.tsx        |   2 +-
 frontend/app/tab/tab.tsx                      | 413 ++++++++-------
 frontend/app/tab/updatebanner.tsx             |   6 +-
 frontend/app/tab/workspaceswitcher.tsx        |   6 +-
 frontend/app/view/plotview/plotview.tsx       |   2 +-
 frontend/app/view/preview/csvview.tsx         |   9 +-
 .../app/view/preview/directorypreview.tsx     |  20 +-
 frontend/app/view/sysinfo/sysinfo.tsx         |   4 +-
 frontend/app/view/vdom/vdom.tsx               |   1 +
 frontend/app/view/waveai/waveai.tsx           | 272 +++++-----
 package.json                                  |  16 +-
 yarn.lock                                     | 479 ++++++++++++++----
 25 files changed, 1311 insertions(+), 1035 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 7921826464..5f621e622d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -26,8 +26,8 @@
         "@waveterm/docusaurus-og": "https://github.com/wavetermdev/docusaurus-og",
         "clsx": "^2.1.1",
         "prism-react-renderer": "^2.3.0",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "remark-gfm": "^4.0.0",
         "remark-typescript-code-import": "^1.0.1",
         "ua-parser-js": "^2.0.0"
@@ -53,7 +53,7 @@
         "remark-preset-lint-consistent": "^6.0.0",
         "remark-preset-lint-recommended": "^7.0.0",
         "typescript": "^5.7.2",
-        "typescript-eslint": "^8.18.0"
+        "typescript-eslint": "^8.18.2"
     },
     "resolutions": {
         "path-to-regexp@npm:2.2.1": "^3",
diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
index cf17849d50..1ccbe99133 100644
--- a/frontend/app/block/blockframe.tsx
+++ b/frontend/app/block/blockframe.tsx
@@ -39,6 +39,7 @@ import * as util from "@/util/util";
 import clsx from "clsx";
 import * as jotai from "jotai";
 import * as React from "react";
+import { JSX } from "react";
 import { BlockFrameProps } from "./blocktypes";
 
 const NumActiveConnColors = 8;
@@ -513,7 +514,7 @@ const BlockFrame_Default_Component = (props: BlockFrameProps) => {
     const magnifiedBlockBlur = jotai.useAtomValue(magnifiedBlockBlurAtom);
     const [magnifiedBlockOpacityAtom] = React.useState(() => getSettingsKeyAtom("window:magnifiedblockopacity"));
     const magnifiedBlockOpacity = jotai.useAtomValue(magnifiedBlockOpacityAtom);
-    const connBtnRef = React.useRef<HTMLDivElement>();
+    const connBtnRef = React.useRef<HTMLDivElement>(null);
     React.useEffect(() => {
         if (!manageConnection) {
             return;
diff --git a/frontend/app/block/blockutil.tsx b/frontend/app/block/blockutil.tsx
index cdf0bc51fe..c8710b233c 100644
--- a/frontend/app/block/blockutil.tsx
+++ b/frontend/app/block/blockutil.tsx
@@ -145,6 +145,7 @@ export function getBlockHeaderIcon(blockIcon: string, blockData: Block): React.R
 interface ConnectionButtonProps {
     connection: string;
     changeConnModalAtom: jotai.PrimitiveAtom<boolean>;
+    ref?: React.RefObject<HTMLDivElement>;
 }
 
 export function computeConnColorNum(connStatus: ConnStatus): number {
@@ -156,88 +157,84 @@ export function computeConnColorNum(connStatus: ConnStatus): number {
     return connColorNum;
 }
 
-export const ConnectionButton = React.memo(
-    React.forwardRef<HTMLDivElement, ConnectionButtonProps>(
-        ({ connection, changeConnModalAtom }: ConnectionButtonProps, ref) => {
-            const [connModalOpen, setConnModalOpen] = jotai.useAtom(changeConnModalAtom);
-            const isLocal = util.isBlank(connection);
-            const connStatusAtom = getConnStatusAtom(connection);
-            const connStatus = jotai.useAtomValue(connStatusAtom);
-            let showDisconnectedSlash = false;
-            let connIconElem: React.ReactNode = null;
-            const connColorNum = computeConnColorNum(connStatus);
-            let color = `var(--conn-icon-color-${connColorNum})`;
-            const clickHandler = function () {
-                setConnModalOpen(true);
-            };
-            let titleText = null;
-            let shouldSpin = false;
-            if (isLocal) {
-                color = "var(--grey-text-color)";
-                titleText = "Connected to Local Machine";
-                connIconElem = (
-                    <i
-                        className={clsx(util.makeIconClass("laptop", false), "fa-stack-1x")}
-                        style={{ color: color, marginRight: 2 }}
-                    />
-                );
-            } else {
-                titleText = "Connected to " + connection;
-                let iconName = "arrow-right-arrow-left";
-                let iconSvg = null;
-                if (connStatus?.status == "connecting") {
-                    color = "var(--warning-color)";
-                    titleText = "Connecting to " + connection;
-                    shouldSpin = false;
-                    iconSvg = (
-                        <div className="connecting-svg">
-                            <DotsSvg />
-                        </div>
-                    );
-                } else if (connStatus?.status == "error") {
-                    color = "var(--error-color)";
-                    titleText = "Error connecting to " + connection;
-                    if (connStatus?.error != null) {
-                        titleText += " (" + connStatus.error + ")";
-                    }
-                    showDisconnectedSlash = true;
-                } else if (!connStatus?.connected) {
-                    color = "var(--grey-text-color)";
-                    titleText = "Disconnected from " + connection;
-                    showDisconnectedSlash = true;
-                }
-                if (iconSvg != null) {
-                    connIconElem = iconSvg;
-                } else {
-                    connIconElem = (
-                        <i
-                            className={clsx(util.makeIconClass(iconName, false), "fa-stack-1x")}
-                            style={{ color: color, marginRight: 2 }}
-                        />
-                    );
-                }
-            }
-
-            return (
-                <div ref={ref} className={clsx("connection-button")} onClick={clickHandler} title={titleText}>
-                    <span className={clsx("fa-stack connection-icon-box", shouldSpin ? "fa-spin" : null)}>
-                        {connIconElem}
-                        <i
-                            className="fa-slash fa-solid fa-stack-1x"
-                            style={{
-                                color: color,
-                                marginRight: "2px",
-                                textShadow: "0 1px black, 0 1.5px black",
-                                opacity: showDisconnectedSlash ? 1 : 0,
-                            }}
-                        />
-                    </span>
-                    {isLocal ? null : <div className="connection-name">{connection}</div>}
+export const ConnectionButton = React.memo(({ connection, changeConnModalAtom, ref }: ConnectionButtonProps) => {
+    const setConnModalOpen = jotai.useSetAtom(changeConnModalAtom);
+    const isLocal = util.isBlank(connection);
+    const connStatusAtom = getConnStatusAtom(connection);
+    const connStatus = jotai.useAtomValue(connStatusAtom);
+    let showDisconnectedSlash = false;
+    let connIconElem: React.ReactNode = null;
+    const connColorNum = computeConnColorNum(connStatus);
+    let color = `var(--conn-icon-color-${connColorNum})`;
+    const clickHandler = function () {
+        setConnModalOpen(true);
+    };
+    let titleText = null;
+    let shouldSpin = false;
+    if (isLocal) {
+        color = "var(--grey-text-color)";
+        titleText = "Connected to Local Machine";
+        connIconElem = (
+            <i
+                className={clsx(util.makeIconClass("laptop", false), "fa-stack-1x")}
+                style={{ color: color, marginRight: 2 }}
+            />
+        );
+    } else {
+        titleText = "Connected to " + connection;
+        let iconName = "arrow-right-arrow-left";
+        let iconSvg = null;
+        if (connStatus?.status == "connecting") {
+            color = "var(--warning-color)";
+            titleText = "Connecting to " + connection;
+            shouldSpin = false;
+            iconSvg = (
+                <div className="connecting-svg">
+                    <DotsSvg />
                 </div>
             );
+        } else if (connStatus?.status == "error") {
+            color = "var(--error-color)";
+            titleText = "Error connecting to " + connection;
+            if (connStatus?.error != null) {
+                titleText += " (" + connStatus.error + ")";
+            }
+            showDisconnectedSlash = true;
+        } else if (!connStatus?.connected) {
+            color = "var(--grey-text-color)";
+            titleText = "Disconnected from " + connection;
+            showDisconnectedSlash = true;
+        }
+        if (iconSvg != null) {
+            connIconElem = iconSvg;
+        } else {
+            connIconElem = (
+                <i
+                    className={clsx(util.makeIconClass(iconName, false), "fa-stack-1x")}
+                    style={{ color: color, marginRight: 2 }}
+                />
+            );
         }
-    )
-);
+    }
+
+    return (
+        <div ref={ref} className={clsx("connection-button")} onClick={clickHandler} title={titleText}>
+            <span className={clsx("fa-stack connection-icon-box", shouldSpin ? "fa-spin" : null)}>
+                {connIconElem}
+                <i
+                    className="fa-slash fa-solid fa-stack-1x"
+                    style={{
+                        color: color,
+                        marginRight: "2px",
+                        textShadow: "0 1px black, 0 1.5px black",
+                        opacity: showDisconnectedSlash ? 1 : 0,
+                    }}
+                />
+            </span>
+            {isLocal ? null : <div className="connection-name">{connection}</div>}
+        </div>
+    );
+});
 
 export const Input = React.memo(
     ({ decl, className, preview }: { decl: HeaderInput; className: string; preview: boolean }) => {
diff --git a/frontend/app/element/button.tsx b/frontend/app/element/button.tsx
index 7cf501c869..eb642b3d89 100644
--- a/frontend/app/element/button.tsx
+++ b/frontend/app/element/button.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import clsx from "clsx";
-import { forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
+import { JSX, memo, ReactNode, useImperativeHandle, useRef } from "react";
 
 import "./button.scss";
 
@@ -10,38 +10,35 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     children?: ReactNode;
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    ref?: React.RefObject<HTMLButtonElement>;
 }
 
-const Button = memo(
-    forwardRef<HTMLButtonElement, ButtonProps>(
-        ({ children, disabled, className = "", as: Component = "button", ...props }: ButtonProps, ref) => {
-            const btnRef = useRef<HTMLButtonElement>(null);
-            useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
-
-            // Check if the className contains any of the categories: solid, outlined, or ghost
-            const containsButtonCategory = /(solid|outline|ghost)/.test(className);
-            // If no category is present, default to 'solid'
-            const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
-
-            // Check if the className contains any of the color options: green, grey, red, or yellow
-            const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
-            // If no color is present, default to 'green'
-            const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
-
-            return (
-                <Component
-                    ref={btnRef}
-                    tabIndex={disabled ? -1 : 0}
-                    className={clsx("wave-button", finalClassName)}
-                    disabled={disabled}
-                    {...props}
-                >
-                    {children}
-                </Component>
-            );
-        }
-    )
-);
+const Button = memo(({ children, disabled, className = "", as: Component = "button", ref, ...props }: ButtonProps) => {
+    const btnRef = useRef<HTMLButtonElement>(null);
+    useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
+
+    // Check if the className contains any of the categories: solid, outlined, or ghost
+    const containsButtonCategory = /(solid|outline|ghost)/.test(className);
+    // If no category is present, default to 'solid'
+    const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
+
+    // Check if the className contains any of the color options: green, grey, red, or yellow
+    const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
+    // If no color is present, default to 'green'
+    const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
+
+    return (
+        <Component
+            ref={btnRef}
+            tabIndex={disabled ? -1 : 0}
+            className={clsx("wave-button", finalClassName)}
+            disabled={disabled}
+            {...props}
+        >
+            {children}
+        </Component>
+    );
+});
 
 Button.displayName = "Button";
 
diff --git a/frontend/app/element/expandablemenu.tsx b/frontend/app/element/expandablemenu.tsx
index a6367bacb7..bca29acdfe 100644
--- a/frontend/app/element/expandablemenu.tsx
+++ b/frontend/app/element/expandablemenu.tsx
@@ -3,7 +3,7 @@
 
 import { clsx } from "clsx";
 import { atom, useAtom } from "jotai";
-import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useRef } from "react";
+import { Children, ReactNode, cloneElement, isValidElement, useRef } from "react";
 
 import "./expandablemenu.scss";
 
@@ -109,7 +109,7 @@ const ExpandableMenuItemGroup = ({
     const [openGroups, setOpenGroups] = useAtom(openGroupsAtom);
 
     // Generate a unique ID for this group using useRef
-    const idRef = useRef<string>();
+    const idRef = useRef<string>(null);
 
     if (!idRef.current) {
         // Generate a unique ID when the component is first rendered
@@ -144,7 +144,8 @@ const ExpandableMenuItemGroup = ({
         }
     };
 
-    const renderChildren = Children.map(children, (child: ReactElement) => {
+    // TODO: As of React 19, this is bad practice and considered unsound. See https://react.dev/blog/2024/04/25/react-19-upgrade-guide#changes-to-the-reactelement-typescript-type
+    const renderChildren = Children.map(children, (child: any) => {
         if (child && child.type === ExpandableMenuItemGroupTitle) {
             return cloneElement(child, {
                 ...child.props,
diff --git a/frontend/app/element/flyoutmenu.tsx b/frontend/app/element/flyoutmenu.tsx
index 8dcde7ff97..d78940ff84 100644
--- a/frontend/app/element/flyoutmenu.tsx
+++ b/frontend/app/element/flyoutmenu.tsx
@@ -3,7 +3,7 @@
 
 import { FloatingPortal, type Placement, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import clsx from "clsx";
-import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
+import { createRef, Fragment, JSX, memo, ReactNode, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
 import "./flyoutmenu.scss";
diff --git a/frontend/app/element/iconbutton.tsx b/frontend/app/element/iconbutton.tsx
index 85986314e4..cd333e8048 100644
--- a/frontend/app/element/iconbutton.tsx
+++ b/frontend/app/element/iconbutton.tsx
@@ -4,27 +4,25 @@
 import { useLongClick } from "@/app/hook/useLongClick";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
-import { forwardRef, memo, useRef } from "react";
+import { memo, useRef } from "react";
 import "./iconbutton.scss";
 
-type IconButtonProps = { decl: IconButtonDecl; className?: string };
-export const IconButton = memo(
-    forwardRef<HTMLButtonElement, IconButtonProps>(({ decl, className }, ref) => {
-        ref = ref ?? useRef<HTMLButtonElement>(null);
-        const spin = decl.iconSpin ?? false;
-        useLongClick(ref, decl.click, decl.longClick, decl.disabled);
-        return (
-            <button
-                ref={ref}
-                className={clsx("wave-iconbutton", className, decl.className, {
-                    disabled: decl.disabled,
-                    "no-action": decl.noAction,
-                })}
-                title={decl.title}
-                style={{ color: decl.iconColor ?? "inherit" }}
-            >
-                {typeof decl.icon === "string" ? <i className={makeIconClass(decl.icon, true, { spin })} /> : decl.icon}
-            </button>
-        );
-    })
-);
+type IconButtonProps = { decl: IconButtonDecl; className?: string; ref?: React.RefObject<HTMLButtonElement> };
+export const IconButton = memo(({ decl, className, ref }: IconButtonProps) => {
+    ref = ref ?? useRef<HTMLButtonElement>(null);
+    const spin = decl.iconSpin ?? false;
+    useLongClick(ref, decl.click, decl.longClick, decl.disabled);
+    return (
+        <button
+            ref={ref}
+            className={clsx("wave-iconbutton", className, decl.className, {
+                disabled: decl.disabled,
+                "no-action": decl.noAction,
+            })}
+            title={decl.title}
+            style={{ color: decl.iconColor ?? "inherit" }}
+        >
+            {typeof decl.icon === "string" ? <i className={makeIconClass(decl.icon, true, { spin })} /> : decl.icon}
+        </button>
+    );
+});
diff --git a/frontend/app/element/input.tsx b/frontend/app/element/input.tsx
index ed2b820b1c..4c4603de68 100644
--- a/frontend/app/element/input.tsx
+++ b/frontend/app/element/input.tsx
@@ -2,40 +2,39 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import clsx from "clsx";
-import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
+import React, { memo, useImperativeHandle, useRef, useState } from "react";
 
 import "./input.scss";
 
 interface InputGroupProps {
     children: React.ReactNode;
     className?: string;
+    ref: React.RefObject<HTMLDivElement>;
 }
 
-const InputGroup = memo(
-    forwardRef<HTMLDivElement, InputGroupProps>(({ children, className }: InputGroupProps, ref) => {
-        const [isFocused, setIsFocused] = useState(false);
-
-        const manageFocus = (focused: boolean) => {
-            setIsFocused(focused);
-        };
-
-        return (
-            <div
-                ref={ref}
-                className={clsx("input-group", className, {
-                    focused: isFocused,
-                })}
-            >
-                {React.Children.map(children, (child) => {
-                    if (React.isValidElement(child)) {
-                        return React.cloneElement(child as any, { manageFocus });
-                    }
-                    return child;
-                })}
-            </div>
-        );
-    })
-);
+const InputGroup = memo(({ children, className, ref }: InputGroupProps) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const manageFocus = (focused: boolean) => {
+        setIsFocused(focused);
+    };
+
+    return (
+        <div
+            ref={ref}
+            className={clsx("input-group", className, {
+                focused: isFocused,
+            })}
+        >
+            {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child as any, { manageFocus });
+                }
+                return child;
+            })}
+        </div>
+    );
+});
 
 interface InputLeftElementProps {
     children: React.ReactNode;
@@ -70,85 +69,81 @@ interface InputProps {
     autoSelect?: boolean;
     disabled?: boolean;
     isNumber?: boolean;
-    inputRef?: React.MutableRefObject<any>;
     manageFocus?: (isFocused: boolean) => void;
+    ref?: React.RefObject<HTMLInputElement>;
 }
 
 const Input = memo(
-    forwardRef<HTMLInputElement, InputProps>(
-        (
-            {
-                value,
-                className,
-                onChange,
-                onKeyDown,
-                onFocus,
-                onBlur,
-                placeholder,
-                defaultValue = "",
-                required,
-                maxLength,
-                autoFocus,
-                autoSelect,
-                disabled,
-                isNumber,
-                manageFocus,
-            }: InputProps,
-            ref
-        ) => {
-            const [internalValue, setInternalValue] = useState(defaultValue);
-            const inputRef = useRef<HTMLInputElement>(null);
-
-            useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
-
-            const handleInputChange = (e: React.ChangeEvent<any>) => {
-                const inputValue = e.target.value;
-
-                if (isNumber && inputValue !== "" && !/^\d*$/.test(inputValue)) {
-                    return;
-                }
+    ({
+        value,
+        className,
+        onChange,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        placeholder,
+        defaultValue = "",
+        required,
+        maxLength,
+        autoFocus,
+        autoSelect,
+        disabled,
+        isNumber,
+        manageFocus,
+        ref,
+    }: InputProps) => {
+        const [internalValue, setInternalValue] = useState(defaultValue);
+        const inputRef = useRef<HTMLInputElement>(null);
+
+        useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+        const handleInputChange = (e: React.ChangeEvent<any>) => {
+            const inputValue = e.target.value;
+
+            if (isNumber && inputValue !== "" && !/^\d*$/.test(inputValue)) {
+                return;
+            }
+
+            if (value === undefined) {
+                setInternalValue(inputValue);
+            }
+
+            onChange && onChange(inputValue);
+        };
 
-                if (value === undefined) {
-                    setInternalValue(inputValue);
-                }
+        const handleFocus = () => {
+            if (autoSelect) {
+                inputRef.current?.select();
+            }
+            manageFocus?.(true);
+            onFocus?.();
+        };
+
+        const handleBlur = () => {
+            manageFocus?.(false);
+            onBlur?.();
+        };
 
-                onChange && onChange(inputValue);
-            };
+        const inputValue = value ?? internalValue;
 
-            const handleFocus = () => {
-                if (autoSelect) {
-                    inputRef.current?.select();
-                }
-                manageFocus?.(true);
-                onFocus?.();
-            };
-
-            const handleBlur = () => {
-                manageFocus?.(false);
-                onBlur?.();
-            };
-
-            const inputValue = value ?? internalValue;
-
-            return (
-                <input
-                    className={clsx("input", className, {
-                        disabled: disabled,
-                    })}
-                    ref={inputRef}
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onKeyDown={onKeyDown}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
-                    placeholder={placeholder}
-                    maxLength={maxLength}
-                    autoFocus={autoFocus}
-                    disabled={disabled}
-                />
-            );
-        }
-    )
+        return (
+            <input
+                className={clsx("input", className, {
+                    disabled: disabled,
+                })}
+                ref={inputRef}
+                value={inputValue}
+                onChange={handleInputChange}
+                onKeyDown={onKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                placeholder={placeholder}
+                maxLength={maxLength}
+                autoFocus={autoFocus}
+                disabled={disabled}
+            />
+        );
+    }
 );
 
 export { Input, InputGroup, InputLeftElement, InputRightElement };
diff --git a/frontend/app/element/multilineinput.tsx b/frontend/app/element/multilineinput.tsx
index fe54259a99..93f56c7392 100644
--- a/frontend/app/element/multilineinput.tsx
+++ b/frontend/app/element/multilineinput.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import clsx from "clsx";
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 
 import "./multilineinput.scss";
 
@@ -21,122 +21,119 @@ interface MultiLineInputProps {
     rows?: number;
     maxRows?: number;
     manageFocus?: (isFocused: boolean) => void;
+    ref?: React.RefObject<HTMLTextAreaElement>;
 }
 
 const MultiLineInput = memo(
-    forwardRef<HTMLTextAreaElement, MultiLineInputProps>(
-        (
-            {
-                value,
-                className,
-                onChange,
-                onKeyDown,
-                onFocus,
-                onBlur,
-                placeholder,
-                defaultValue = "",
-                maxLength,
-                autoFocus,
-                disabled,
-                rows = 1,
-                maxRows = 5,
-                manageFocus,
-            }: MultiLineInputProps,
-            ref
-        ) => {
-            const textareaRef = useRef<HTMLTextAreaElement>(null);
-            const [internalValue, setInternalValue] = useState(defaultValue);
-            const [lineHeight, setLineHeight] = useState(24); // Default line height fallback of 24px
-            const [paddingTop, setPaddingTop] = useState(0);
-            const [paddingBottom, setPaddingBottom] = useState(0);
-
-            useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);
-
-            // Function to count the number of lines in the textarea value
-            const countLines = (text: string) => {
-                return text.split("\n").length;
-            };
-
-            const adjustTextareaHeight = () => {
-                if (textareaRef.current) {
-                    textareaRef.current.style.height = "auto"; // Reset height to auto first
-
-                    const maxHeight = maxRows * lineHeight + paddingTop + paddingBottom; // Max height based on maxRows
-                    const currentLines = countLines(textareaRef.current.value); // Count the number of lines
-                    const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight); // Calculate new height
-
-                    // If the number of lines is less than or equal to maxRows, set height accordingly
-                    const calculatedHeight =
-                        currentLines <= maxRows
-                            ? `${lineHeight * currentLines + paddingTop + paddingBottom}px`
-                            : `${newHeight}px`;
-
-                    textareaRef.current.style.height = calculatedHeight;
-                }
-            };
-
-            const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                setInternalValue(e.target.value);
-                onChange?.(e);
-
-                // Adjust the height of the textarea after text change
-                adjustTextareaHeight();
-            };
-
-            const handleFocus = () => {
-                manageFocus?.(true);
-                onFocus?.();
-            };
-
-            const handleBlur = () => {
-                manageFocus?.(false);
-                onBlur?.();
-            };
-
-            useEffect(() => {
-                if (textareaRef.current) {
-                    const computedStyle = window.getComputedStyle(textareaRef.current);
-                    const detectedLineHeight = parseFloat(computedStyle.lineHeight);
-                    const detectedPaddingTop = parseFloat(computedStyle.paddingTop);
-                    const detectedPaddingBottom = parseFloat(computedStyle.paddingBottom);
-
-                    setLineHeight(detectedLineHeight);
-                    setPaddingTop(detectedPaddingTop);
-                    setPaddingBottom(detectedPaddingBottom);
-                }
-            }, [textareaRef]);
-
-            useEffect(() => {
-                adjustTextareaHeight();
-            }, [value, maxRows, lineHeight, paddingTop, paddingBottom]);
-
-            const inputValue = value ?? internalValue;
-
-            return (
-                <textarea
-                    className={clsx("multiline-input", className)}
-                    ref={textareaRef}
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onKeyDown={onKeyDown}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
-                    placeholder={placeholder}
-                    maxLength={maxLength}
-                    autoFocus={autoFocus}
-                    disabled={disabled}
-                    rows={rows}
-                    style={{
-                        overflowY:
-                            textareaRef.current &&
-                            textareaRef.current.scrollHeight > maxRows * lineHeight + paddingTop + paddingBottom
-                                ? "auto"
-                                : "hidden",
-                    }}
-                />
-            );
-        }
-    )
+    ({
+        value,
+        className,
+        onChange,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        placeholder,
+        defaultValue = "",
+        maxLength,
+        autoFocus,
+        disabled,
+        rows = 1,
+        maxRows = 5,
+        manageFocus,
+        ref,
+    }: MultiLineInputProps) => {
+        const textareaRef = useRef<HTMLTextAreaElement>(null);
+        const [internalValue, setInternalValue] = useState(defaultValue);
+        const [lineHeight, setLineHeight] = useState(24); // Default line height fallback of 24px
+        const [paddingTop, setPaddingTop] = useState(0);
+        const [paddingBottom, setPaddingBottom] = useState(0);
+
+        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);
+
+        // Function to count the number of lines in the textarea value
+        const countLines = (text: string) => {
+            return text.split("\n").length;
+        };
+
+        const adjustTextareaHeight = () => {
+            if (textareaRef.current) {
+                textareaRef.current.style.height = "auto"; // Reset height to auto first
+
+                const maxHeight = maxRows * lineHeight + paddingTop + paddingBottom; // Max height based on maxRows
+                const currentLines = countLines(textareaRef.current.value); // Count the number of lines
+                const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight); // Calculate new height
+
+                // If the number of lines is less than or equal to maxRows, set height accordingly
+                const calculatedHeight =
+                    currentLines <= maxRows
+                        ? `${lineHeight * currentLines + paddingTop + paddingBottom}px`
+                        : `${newHeight}px`;
+
+                textareaRef.current.style.height = calculatedHeight;
+            }
+        };
+
+        const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setInternalValue(e.target.value);
+            onChange?.(e);
+
+            // Adjust the height of the textarea after text change
+            adjustTextareaHeight();
+        };
+
+        const handleFocus = () => {
+            manageFocus?.(true);
+            onFocus?.();
+        };
+
+        const handleBlur = () => {
+            manageFocus?.(false);
+            onBlur?.();
+        };
+
+        useEffect(() => {
+            if (textareaRef.current) {
+                const computedStyle = window.getComputedStyle(textareaRef.current);
+                const detectedLineHeight = parseFloat(computedStyle.lineHeight);
+                const detectedPaddingTop = parseFloat(computedStyle.paddingTop);
+                const detectedPaddingBottom = parseFloat(computedStyle.paddingBottom);
+
+                setLineHeight(detectedLineHeight);
+                setPaddingTop(detectedPaddingTop);
+                setPaddingBottom(detectedPaddingBottom);
+            }
+        }, [textareaRef]);
+
+        useEffect(() => {
+            adjustTextareaHeight();
+        }, [value, maxRows, lineHeight, paddingTop, paddingBottom]);
+
+        const inputValue = value ?? internalValue;
+
+        return (
+            <textarea
+                className={clsx("multiline-input", className)}
+                ref={textareaRef}
+                value={inputValue}
+                onChange={handleInputChange}
+                onKeyDown={onKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                placeholder={placeholder}
+                maxLength={maxLength}
+                autoFocus={autoFocus}
+                disabled={disabled}
+                rows={rows}
+                style={{
+                    overflowY:
+                        textareaRef.current &&
+                        textareaRef.current.scrollHeight > maxRows * lineHeight + paddingTop + paddingBottom
+                            ? "auto"
+                            : "hidden",
+                }}
+            />
+        );
+    }
 );
 
 export { MultiLineInput };
diff --git a/frontend/app/element/popover.tsx b/frontend/app/element/popover.tsx
index 385f894980..bff4ea1cd4 100644
--- a/frontend/app/element/popover.tsx
+++ b/frontend/app/element/popover.tsx
@@ -18,8 +18,8 @@ import clsx from "clsx";
 import {
     Children,
     cloneElement,
-    forwardRef,
     isValidElement,
+    JSX,
     JSXElementConstructor,
     memo,
     ReactElement,
@@ -36,6 +36,7 @@ interface PopoverProps {
     offset?: OffsetOptions;
     onDismiss?: () => void;
     middleware?: Middleware[];
+    ref?: React.RefObject<HTMLDivElement>;
 }
 
 const isPopoverButton = (
@@ -51,67 +52,65 @@ const isPopoverContent = (
 };
 
 const Popover = memo(
-    forwardRef<HTMLDivElement, PopoverProps>(
-        ({ children, className, placement = "bottom-start", offset = 3, onDismiss, middleware }, ref) => {
-            const [isOpen, setIsOpen] = useState(false);
-
-            const handleOpenChange = (open: boolean) => {
-                setIsOpen(open);
-                if (!open && onDismiss) {
-                    onDismiss();
-                }
-            };
+    ({ children, className, placement = "bottom-start", offset = 3, onDismiss, middleware, ref }: PopoverProps) => {
+        const [isOpen, setIsOpen] = useState(false);
 
-            if (offset === undefined) {
-                offset = 3;
+        const handleOpenChange = (open: boolean) => {
+            setIsOpen(open);
+            if (!open && onDismiss) {
+                onDismiss();
             }
+        };
 
-            middleware ??= [];
-            middleware.push(offsetMiddleware(offset));
-
-            const { refs, floatingStyles, context } = useFloating({
-                placement,
-                open: isOpen,
-                onOpenChange: handleOpenChange,
-                middleware: middleware,
-                whileElementsMounted: autoUpdate,
-            });
-
-            const click = useClick(context);
-            const dismiss = useDismiss(context);
-            const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
-
-            const renderChildren = Children.map(children, (child) => {
-                if (isValidElement(child)) {
-                    if (isPopoverButton(child)) {
-                        return cloneElement(child as any, {
-                            isActive: isOpen,
-                            ref: refs.setReference,
-                            getReferenceProps,
-                            // Do not overwrite onClick
-                        });
-                    }
-
-                    if (isPopoverContent(child)) {
-                        return isOpen
-                            ? cloneElement(child as any, {
-                                  ref: refs.setFloating,
-                                  style: floatingStyles,
-                                  getFloatingProps,
-                              })
-                            : null;
-                    }
-                }
-                return child;
-            });
-
-            return (
-                <div ref={ref} className={clsx("popover", className)}>
-                    {renderChildren}
-                </div>
-            );
+        if (offset === undefined) {
+            offset = 3;
         }
-    )
+
+        middleware ??= [];
+        middleware.push(offsetMiddleware(offset));
+
+        const { refs, floatingStyles, context } = useFloating({
+            placement,
+            open: isOpen,
+            onOpenChange: handleOpenChange,
+            middleware: middleware,
+            whileElementsMounted: autoUpdate,
+        });
+
+        const click = useClick(context);
+        const dismiss = useDismiss(context);
+        const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+
+        const renderChildren = Children.map(children, (child) => {
+            if (isValidElement(child)) {
+                if (isPopoverButton(child)) {
+                    return cloneElement(child as any, {
+                        isActive: isOpen,
+                        ref: refs.setReference,
+                        getReferenceProps,
+                        // Do not overwrite onClick
+                    });
+                }
+
+                if (isPopoverContent(child)) {
+                    return isOpen
+                        ? cloneElement(child as any, {
+                              ref: refs.setFloating,
+                              style: floatingStyles,
+                              getFloatingProps,
+                          })
+                        : null;
+                }
+            }
+            return child;
+        });
+
+        return (
+            <div ref={ref} className={clsx("popover", className)}>
+                {renderChildren}
+            </div>
+        );
+    }
 );
 
 Popover.displayName = "Popover";
@@ -121,72 +120,68 @@ interface PopoverButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     children: React.ReactNode;
     getReferenceProps?: () => any;
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    ref?: React.RefObject<HTMLButtonElement | HTMLInputElement>;
 }
 
-const PopoverButton = forwardRef<HTMLButtonElement | HTMLDivElement, PopoverButtonProps>(
-    (
-        {
-            isActive,
-            children,
-            onClick: userOnClick, // Destructured from props
-            getReferenceProps,
-            className,
-            as: Component = "button",
-            ...props // The rest of the props, without onClick
-        },
-        ref
-    ) => {
-        const referenceProps = getReferenceProps?.() || {};
-        const popoverOnClick = referenceProps.onClick;
-
-        // Remove onClick from referenceProps to prevent it from overwriting our combinedOnClick
-        const { onClick: refOnClick, ...restReferenceProps } = referenceProps;
-
-        const combinedOnClick = (event: React.MouseEvent) => {
-            if (userOnClick) {
-                userOnClick(event as any); // Our custom onClick logic
-            }
-            if (popoverOnClick) {
-                popoverOnClick(event); // Popover's onClick logic
-            }
-        };
-
-        return (
-            <Button
-                ref={ref}
-                className={clsx("popover-button", className, { "is-active": isActive })}
-                {...props} // Spread the rest of the props
-                {...restReferenceProps} // Spread referenceProps without onClick
-                onClick={combinedOnClick} // Assign combined onClick after spreading
-            >
-                {children}
-            </Button>
-        );
-    }
-);
+const PopoverButton = ({
+    isActive,
+    children,
+    onClick: userOnClick, // Destructured from props
+    getReferenceProps,
+    className,
+    as: Component = "button",
+    ref,
+    ...props // The rest of the props, without onClick
+}: PopoverButtonProps) => {
+    const referenceProps = getReferenceProps?.() || {};
+    const popoverOnClick = referenceProps.onClick;
+
+    // Remove onClick from referenceProps to prevent it from overwriting our combinedOnClick
+    const { onClick: refOnClick, ...restReferenceProps } = referenceProps;
+
+    const combinedOnClick = (event: React.MouseEvent) => {
+        if (userOnClick) {
+            userOnClick(event as any); // Our custom onClick logic
+        }
+        if (popoverOnClick) {
+            popoverOnClick(event); // Popover's onClick logic
+        }
+    };
+
+    return (
+        <Button
+            ref={ref}
+            className={clsx("popover-button", className, { "is-active": isActive })}
+            {...props} // Spread the rest of the props
+            {...restReferenceProps} // Spread referenceProps without onClick
+            onClick={combinedOnClick} // Assign combined onClick after spreading
+        >
+            {children}
+        </Button>
+    );
+};
 
 interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     getFloatingProps?: () => any;
+    ref?: React.RefObject<HTMLDivElement>;
 }
 
-const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
-    ({ children, className, getFloatingProps, style, ...props }, ref) => {
-        return (
-            <FloatingPortal>
-                <div
-                    ref={ref}
-                    className={clsx("popover-content", className)}
-                    style={style}
-                    {...getFloatingProps?.()}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </FloatingPortal>
-        );
-    }
-);
+const PopoverContent = ({ children, className, getFloatingProps, style, ref, ...props }: PopoverContentProps) => {
+    return (
+        <FloatingPortal>
+            <div
+                ref={ref}
+                className={clsx("popover-content", className)}
+                style={style}
+                {...getFloatingProps?.()}
+                {...props}
+            >
+                {children}
+            </div>
+        </FloatingPortal>
+    );
+};
 
 Popover.displayName = "Popover";
 PopoverButton.displayName = "PopoverButton";
diff --git a/frontend/app/element/windowdrag.tsx b/frontend/app/element/windowdrag.tsx
index 472b30ab64..9c589604c6 100644
--- a/frontend/app/element/windowdrag.tsx
+++ b/frontend/app/element/windowdrag.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { clsx } from "clsx";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import "./windowdrag.scss";
 
@@ -10,14 +10,15 @@ interface WindowDragProps {
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
+    ref: React.RefObject<HTMLDivElement>;
 }
 
-const WindowDrag = forwardRef<HTMLDivElement, WindowDragProps>(({ children, className, style }, ref) => {
+const WindowDrag = ({ children, className, style, ref }: WindowDragProps) => {
     return (
         <div ref={ref} className={clsx(`window-drag`, className)} style={style}>
             {children}
         </div>
     );
-});
+};
 
 export { WindowDrag };
diff --git a/frontend/app/modals/modal.tsx b/frontend/app/modals/modal.tsx
index a0964733c3..4e1f752f4c 100644
--- a/frontend/app/modals/modal.tsx
+++ b/frontend/app/modals/modal.tsx
@@ -3,7 +3,6 @@
 
 import { Button } from "@/app/element/button";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import ReactDOM from "react-dom";
 
 import "./modal.scss";
@@ -17,36 +16,45 @@ interface ModalProps {
     onOk?: () => void;
     onCancel?: () => void;
     onClose?: () => void;
+    ref?: React.RefObject<HTMLDivElement>;
 }
 
-const Modal = forwardRef<HTMLDivElement, ModalProps>(
-    ({ children, className, cancelLabel, okLabel, onCancel, onOk, onClose, onClickBackdrop }: ModalProps, ref) => {
-        const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>;
-
-        const renderFooter = () => {
-            return onOk || onCancel;
-        };
-
-        const renderModal = () => (
-            <div className="modal-wrapper">
-                {renderBackdrop(onClickBackdrop)}
-                <div ref={ref} className={clsx(`modal`, className)}>
-                    <Button className="grey ghost modal-close-btn" onClick={onClose} title="Close (ESC)">
-                        <i className="fa-sharp fa-solid fa-xmark"></i>
-                    </Button>
-                    <div className="content-wrapper">
-                        <ModalContent>{children}</ModalContent>
-                    </div>
-                    {renderFooter() && (
-                        <ModalFooter onCancel={onCancel} onOk={onOk} cancelLabel={cancelLabel} okLabel={okLabel} />
-                    )}
+const Modal = ({
+    children,
+    className,
+    cancelLabel,
+    okLabel,
+    onCancel,
+    onOk,
+    onClose,
+    onClickBackdrop,
+    ref,
+}: ModalProps) => {
+    const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>;
+
+    const renderFooter = () => {
+        return onOk || onCancel;
+    };
+
+    const renderModal = () => (
+        <div className="modal-wrapper">
+            {renderBackdrop(onClickBackdrop)}
+            <div ref={ref} className={clsx(`modal`, className)}>
+                <Button className="grey ghost modal-close-btn" onClick={onClose} title="Close (ESC)">
+                    <i className="fa-sharp fa-solid fa-xmark"></i>
+                </Button>
+                <div className="content-wrapper">
+                    <ModalContent>{children}</ModalContent>
                 </div>
+                {renderFooter() && (
+                    <ModalFooter onCancel={onCancel} onOk={onOk} cancelLabel={cancelLabel} okLabel={okLabel} />
+                )}
             </div>
-        );
+        </div>
+    );
 
-        return ReactDOM.createPortal(renderModal(), document.getElementById("main"));
-    }
-);
+    return ReactDOM.createPortal(renderModal(), document.getElementById("main"));
+};
 
 interface ModalContentProps {
     children: React.ReactNode;
@@ -80,30 +88,28 @@ interface FlexiModalProps {
     children?: React.ReactNode;
     className?: string;
     onClickBackdrop?: () => void;
+    ref: React.RefObject<HTMLDivElement>;
 }
 
-interface FlexiModalComponent
-    extends React.ForwardRefExoticComponent<FlexiModalProps & React.RefAttributes<HTMLDivElement>> {
+interface FlexiModalComponent extends React.FC<FlexiModalProps> {
     Content: typeof ModalContent;
     Footer: typeof ModalFooter;
 }
 
-const FlexiModal = forwardRef<HTMLDivElement, FlexiModalProps>(
-    ({ children, className, onClickBackdrop }: FlexiModalProps, ref) => {
-        const renderBackdrop = (onClick: () => void) => <div className="modal-backdrop" onClick={onClick}></div>;
+const FlexiModal = ({ children, className, onClickBackdrop, ref }: FlexiModalProps) => {
+    const renderBackdrop = (onClick: () => void) => <div className="modal-backdrop" onClick={onClick}></div>;
 
-        const renderModal = () => (
-            <div className="modal-wrapper">
-                {renderBackdrop(onClickBackdrop)}
-                <div className={`modal ${className}`} ref={ref}>
-                    {children}
-                </div>
+    const renderModal = () => (
+        <div className="modal-wrapper">
+            {renderBackdrop(onClickBackdrop)}
+            <div className={`modal ${className}`} ref={ref}>
+                {children}
             </div>
-        );
+        </div>
+    );
 
-        return ReactDOM.createPortal(renderModal(), document.getElementById("main")!);
-    }
-);
+    return ReactDOM.createPortal(renderModal(), document.getElementById("main")!);
+};
 
 (FlexiModal as FlexiModalComponent).Content = ModalContent;
 (FlexiModal as FlexiModalComponent).Footer = ModalFooter;
diff --git a/frontend/app/modals/typeaheadmodal.tsx b/frontend/app/modals/typeaheadmodal.tsx
index 772894f339..50f2f18cb6 100644
--- a/frontend/app/modals/typeaheadmodal.tsx
+++ b/frontend/app/modals/typeaheadmodal.tsx
@@ -5,7 +5,7 @@ import { Input, InputGroup, InputRightElement } from "@/app/element/input";
 import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
-import React, { forwardRef, useLayoutEffect, useRef } from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 
 import "./typeaheadmodal.scss";
@@ -14,62 +14,60 @@ interface SuggestionsProps {
     suggestions?: SuggestionsType[];
     onSelect?: (_: string) => void;
     selectIndex: number;
+    ref: React.RefObject<HTMLDivElement>;
 }
 
-const Suggestions = forwardRef<HTMLDivElement, SuggestionsProps>(
-    ({ suggestions, onSelect, selectIndex }: SuggestionsProps, ref) => {
-        const renderIcon = (icon: string | React.ReactNode, color: string) => {
-            if (typeof icon === "string") {
-                return <i className={makeIconClass(icon, false)} style={{ color: color }}></i>;
-            }
-            return icon;
-        };
+const Suggestions = ({ suggestions, onSelect, selectIndex, ref }: SuggestionsProps) => {
+    const renderIcon = (icon: string | React.ReactNode, color: string) => {
+        if (typeof icon === "string") {
+            return <i className={makeIconClass(icon, false)} style={{ color: color }}></i>;
+        }
+        return icon;
+    };
 
-        const renderItem = (item: SuggestionBaseItem | SuggestionConnectionItem, index: number) => (
-            <div
-                key={index}
-                onClick={() => {
-                    if ("onSelect" in item && item.onSelect) {
-                        item.onSelect(item.value);
-                    } else {
-                        onSelect(item.value);
-                    }
-                }}
-                className={clsx("suggestion-item", { selected: selectIndex === index })}
-            >
-                <div className="typeahead-item-name">
-                    {item.icon &&
-                        renderIcon(item.icon, "iconColor" in item && item.iconColor ? item.iconColor : "inherit")}
-                    {item.label}
-                </div>
-                {"current" in item && item.current && (
-                    <i className={clsx(makeIconClass("check", false), "typeahead-current-checkbox")} />
-                )}
-            </div>
-        );
-
-        let fullIndex = -1;
-        return (
-            <div ref={ref} className="suggestions">
-                {suggestions.map((item, index) => {
-                    if ("headerText" in item) {
-                        return (
-                            <div key={index}>
-                                {item.headerText && <div className="suggestion-header">{item.headerText}</div>}
-                                {item.items.map((subItem, subIndex) => {
-                                    fullIndex += 1;
-                                    return renderItem(subItem, fullIndex);
-                                })}
-                            </div>
-                        );
-                    }
-                    fullIndex += 1;
-                    return renderItem(item as SuggestionBaseItem, fullIndex);
-                })}
+    const renderItem = (item: SuggestionBaseItem | SuggestionConnectionItem, index: number) => (
+        <div
+            key={index}
+            onClick={() => {
+                if ("onSelect" in item && item.onSelect) {
+                    item.onSelect(item.value);
+                } else {
+                    onSelect(item.value);
+                }
+            }}
+            className={clsx("suggestion-item", { selected: selectIndex === index })}
+        >
+            <div className="typeahead-item-name">
+                {item.icon && renderIcon(item.icon, "iconColor" in item && item.iconColor ? item.iconColor : "inherit")}
+                {item.label}
             </div>
-        );
-    }
-);
+            {"current" in item && item.current && (
+                <i className={clsx(makeIconClass("check", false), "typeahead-current-checkbox")} />
+            )}
+        </div>
+    );
+
+    let fullIndex = -1;
+    return (
+        <div ref={ref} className="suggestions">
+            {suggestions.map((item, index) => {
+                if ("headerText" in item) {
+                    return (
+                        <div key={index}>
+                            {item.headerText && <div className="suggestion-header">{item.headerText}</div>}
+                            {item.items.map((subItem, subIndex) => {
+                                fullIndex += 1;
+                                return renderItem(subItem, fullIndex);
+                            })}
+                        </div>
+                    );
+                }
+                fullIndex += 1;
+                return renderItem(item as SuggestionBaseItem, fullIndex);
+            })}
+        </div>
+    );
+};
 
 interface TypeAheadModalProps {
     anchorRef: React.RefObject<HTMLElement>;
diff --git a/frontend/app/modals/userinputmodal.tsx b/frontend/app/modals/userinputmodal.tsx
index 7a3a839f0f..6f24104489 100644
--- a/frontend/app/modals/userinputmodal.tsx
+++ b/frontend/app/modals/userinputmodal.tsx
@@ -13,7 +13,7 @@ import "./userinputmodal.scss";
 const UserInputModal = (userInputRequest: UserInputRequest) => {
     const [responseText, setResponseText] = useState("");
     const [countdown, setCountdown] = useState(Math.floor(userInputRequest.timeoutms / 1000));
-    const checkboxRef = useRef<HTMLInputElement>();
+    const checkboxRef = useRef<HTMLInputElement>(null);
 
     const handleSendErrResponse = useCallback(() => {
         fireAndForget(() =>
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 3f0d818aef..77e61bd0a8 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/element/button";
 import { ContextMenuModel } from "@/store/contextmenu";
 import { fireAndForget } from "@/util/util";
 import { clsx } from "clsx";
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { ObjectService } from "../store/services";
 import { makeORef, useWaveObjectValue } from "../store/wos";
 import "./tab.scss";
@@ -27,226 +27,223 @@ interface TabProps {
     onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onLoaded: () => void;
     onPinChange: () => void;
+    ref: React.RefObject<HTMLDivElement>;
 }
 
 const Tab = memo(
-    forwardRef<HTMLDivElement, TabProps>(
-        (
-            {
-                id,
-                active,
-                isPinned,
-                isBeforeActive,
-                isDragging,
-                tabWidth,
-                isNew,
-                onLoaded,
-                onSelect,
-                onClose,
-                onDragStart,
-                onPinChange,
-            },
-            ref
-        ) => {
-            const [tabData, _] = useWaveObjectValue<Tab>(makeORef("tab", id));
-            const [originalName, setOriginalName] = useState("");
-            const [isEditable, setIsEditable] = useState(false);
-
-            const editableRef = useRef<HTMLDivElement>(null);
-            const editableTimeoutRef = useRef<NodeJS.Timeout>();
-            const loadedRef = useRef(false);
-            const tabRef = useRef<HTMLDivElement>(null);
-
-            useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);
-
-            useEffect(() => {
-                if (tabData?.name) {
-                    setOriginalName(tabData.name);
-                }
-            }, [tabData]);
-
-            useEffect(() => {
-                return () => {
-                    if (editableTimeoutRef.current) {
-                        clearTimeout(editableTimeoutRef.current);
-                    }
-                };
-            }, []);
-
-            const selectEditableText = useCallback(() => {
-                if (editableRef.current) {
-                    const range = document.createRange();
-                    const selection = window.getSelection();
-                    range.selectNodeContents(editableRef.current);
-                    selection.removeAllRanges();
-                    selection.addRange(range);
+    ({
+        id,
+        active,
+        isPinned,
+        isBeforeActive,
+        isDragging,
+        tabWidth,
+        isNew,
+        onLoaded,
+        onSelect,
+        onClose,
+        onDragStart,
+        onPinChange,
+        ref,
+    }: TabProps) => {
+        const [tabData, _] = useWaveObjectValue<Tab>(makeORef("tab", id));
+        const [originalName, setOriginalName] = useState("");
+        const [isEditable, setIsEditable] = useState(false);
+
+        const editableRef = useRef<HTMLDivElement>(null);
+        const editableTimeoutRef = useRef<NodeJS.Timeout>(null);
+        const loadedRef = useRef(false);
+        const tabRef = useRef<HTMLDivElement>(null);
+
+        useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);
+
+        useEffect(() => {
+            if (tabData?.name) {
+                setOriginalName(tabData.name);
+            }
+        }, [tabData]);
+
+        useEffect(() => {
+            return () => {
+                if (editableTimeoutRef.current) {
+                    clearTimeout(editableTimeoutRef.current);
                 }
-            }, []);
-
-            const handleRenameTab: React.MouseEventHandler<HTMLDivElement> = (event) => {
-                event?.stopPropagation();
-                setIsEditable(true);
-                editableTimeoutRef.current = setTimeout(() => {
-                    selectEditableText();
-                }, 0);
             };
-
-            const handleBlur = () => {
-                let newText = editableRef.current.innerText.trim();
-                newText = newText || originalName;
-                editableRef.current.innerText = newText;
-                setIsEditable(false);
-                fireAndForget(() => ObjectService.UpdateTabName(id, newText));
-                setTimeout(() => refocusNode(null), 10);
-            };
-
-            const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-                if ((event.metaKey || event.ctrlKey) && event.key === "a") {
-                    event.preventDefault();
-                    selectEditableText();
-                    return;
-                }
-                // this counts glyphs, not characters
-                const curLen = Array.from(editableRef.current.innerText).length;
-                if (event.key === "Enter") {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (editableRef.current.innerText.trim() === "") {
-                        editableRef.current.innerText = originalName;
-                    }
-                    editableRef.current.blur();
-                } else if (event.key === "Escape") {
+        }, []);
+
+        const selectEditableText = useCallback(() => {
+            if (editableRef.current) {
+                const range = document.createRange();
+                const selection = window.getSelection();
+                range.selectNodeContents(editableRef.current);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }, []);
+
+        const handleRenameTab: React.MouseEventHandler<HTMLDivElement> = (event) => {
+            event?.stopPropagation();
+            setIsEditable(true);
+            editableTimeoutRef.current = setTimeout(() => {
+                selectEditableText();
+            }, 0);
+        };
+
+        const handleBlur = () => {
+            let newText = editableRef.current.innerText.trim();
+            newText = newText || originalName;
+            editableRef.current.innerText = newText;
+            setIsEditable(false);
+            fireAndForget(() => ObjectService.UpdateTabName(id, newText));
+            setTimeout(() => refocusNode(null), 10);
+        };
+
+        const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === "a") {
+                event.preventDefault();
+                selectEditableText();
+                return;
+            }
+            // this counts glyphs, not characters
+            const curLen = Array.from(editableRef.current.innerText).length;
+            if (event.key === "Enter") {
+                event.preventDefault();
+                event.stopPropagation();
+                if (editableRef.current.innerText.trim() === "") {
                     editableRef.current.innerText = originalName;
-                    editableRef.current.blur();
-                    event.preventDefault();
-                    event.stopPropagation();
-                } else if (curLen >= 14 && !["Backspace", "Delete", "ArrowLeft", "ArrowRight"].includes(event.key)) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            };
-
-            useEffect(() => {
-                if (!loadedRef.current) {
-                    onLoaded();
-                    loadedRef.current = true;
                 }
-            }, [onLoaded]);
-
-            useEffect(() => {
-                if (tabRef.current && isNew) {
-                    const initialWidth = `${(tabWidth / 3) * 2}px`;
-                    tabRef.current.style.setProperty("--initial-tab-width", initialWidth);
-                    tabRef.current.style.setProperty("--final-tab-width", `${tabWidth}px`);
-                }
-            }, [isNew, tabWidth]);
-
-            // Prevent drag from being triggered on mousedown
-            const handleMouseDownOnClose = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                editableRef.current.blur();
+            } else if (event.key === "Escape") {
+                editableRef.current.innerText = originalName;
+                editableRef.current.blur();
+                event.preventDefault();
                 event.stopPropagation();
-            };
-
-            const handleContextMenu = useCallback(
-                (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-                    e.preventDefault();
-                    let menu: ContextMenuItem[] = [
-                        { label: isPinned ? "Unpin Tab" : "Pin Tab", click: () => onPinChange() },
-                        { label: "Rename Tab", click: () => handleRenameTab(null) },
-                        {
-                            label: "Copy TabId",
-                            click: () => fireAndForget(() => navigator.clipboard.writeText(id)),
-                        },
-                        { type: "separator" },
-                    ];
-                    const fullConfig = globalStore.get(atoms.fullConfigAtom);
-                    const bgPresets: string[] = [];
-                    for (const key in fullConfig?.presets ?? {}) {
-                        if (key.startsWith("bg@")) {
-                            bgPresets.push(key);
-                        }
+            } else if (curLen >= 14 && !["Backspace", "Delete", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        useEffect(() => {
+            if (!loadedRef.current) {
+                onLoaded();
+                loadedRef.current = true;
+            }
+        }, [onLoaded]);
+
+        useEffect(() => {
+            if (tabRef.current && isNew) {
+                const initialWidth = `${(tabWidth / 3) * 2}px`;
+                tabRef.current.style.setProperty("--initial-tab-width", initialWidth);
+                tabRef.current.style.setProperty("--final-tab-width", `${tabWidth}px`);
+            }
+        }, [isNew, tabWidth]);
+
+        // Prevent drag from being triggered on mousedown
+        const handleMouseDownOnClose = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            event.stopPropagation();
+        };
+
+        const handleContextMenu = useCallback(
+            (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+                e.preventDefault();
+                let menu: ContextMenuItem[] = [
+                    { label: isPinned ? "Unpin Tab" : "Pin Tab", click: () => onPinChange() },
+                    { label: "Rename Tab", click: () => handleRenameTab(null) },
+                    {
+                        label: "Copy TabId",
+                        click: () => fireAndForget(() => navigator.clipboard.writeText(id)),
+                    },
+                    { type: "separator" },
+                ];
+                const fullConfig = globalStore.get(atoms.fullConfigAtom);
+                const bgPresets: string[] = [];
+                for (const key in fullConfig?.presets ?? {}) {
+                    if (key.startsWith("bg@")) {
+                        bgPresets.push(key);
                     }
-                    bgPresets.sort((a, b) => {
-                        const aOrder = fullConfig.presets[a]["display:order"] ?? 0;
-                        const bOrder = fullConfig.presets[b]["display:order"] ?? 0;
-                        return aOrder - bOrder;
-                    });
-                    if (bgPresets.length > 0) {
-                        const submenu: ContextMenuItem[] = [];
-                        const oref = makeORef("tab", id);
-                        for (const presetName of bgPresets) {
-                            const preset = fullConfig.presets[presetName];
-                            if (preset == null) {
-                                continue;
-                            }
-                            submenu.push({
-                                label: preset["display:name"] ?? presetName,
-                                click: () =>
-                                    fireAndForget(async () => {
-                                        await ObjectService.UpdateObjectMeta(oref, preset);
-                                        await RpcApi.ActivityCommand(TabRpcClient, { settabtheme: 1 });
-                                    }),
-                            });
+                }
+                bgPresets.sort((a, b) => {
+                    const aOrder = fullConfig.presets[a]["display:order"] ?? 0;
+                    const bOrder = fullConfig.presets[b]["display:order"] ?? 0;
+                    return aOrder - bOrder;
+                });
+                if (bgPresets.length > 0) {
+                    const submenu: ContextMenuItem[] = [];
+                    const oref = makeORef("tab", id);
+                    for (const presetName of bgPresets) {
+                        const preset = fullConfig.presets[presetName];
+                        if (preset == null) {
+                            continue;
                         }
-                        menu.push({ label: "Backgrounds", type: "submenu", submenu }, { type: "separator" });
+                        submenu.push({
+                            label: preset["display:name"] ?? presetName,
+                            click: () =>
+                                fireAndForget(async () => {
+                                    await ObjectService.UpdateObjectMeta(oref, preset);
+                                    await RpcApi.ActivityCommand(TabRpcClient, { settabtheme: 1 });
+                                }),
+                        });
                     }
-                    menu.push({ label: "Close Tab", click: () => onClose(null) });
-                    ContextMenuModel.showContextMenu(menu, e);
-                },
-                [onPinChange, handleRenameTab, id, onClose, isPinned]
-            );
-
-            return (
-                <div
-                    ref={tabRef}
-                    className={clsx("tab", {
-                        active,
-                        dragging: isDragging,
-                        "before-active": isBeforeActive,
-                        "new-tab": isNew,
-                    })}
-                    onMouseDown={onDragStart}
-                    onClick={onSelect}
-                    onContextMenu={handleContextMenu}
-                    data-tab-id={id}
-                >
-                    <div className="tab-inner">
-                        <div
-                            ref={editableRef}
-                            className={clsx("name", { focused: isEditable })}
-                            contentEditable={isEditable}
-                            onDoubleClick={handleRenameTab}
-                            onBlur={handleBlur}
-                            onKeyDown={handleKeyDown}
-                            suppressContentEditableWarning={true}
-                        >
-                            {tabData?.name}
-                        </div>
-                        {isPinned ? (
-                            <Button
-                                className="ghost grey pin"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    onPinChange();
-                                }}
-                                title="Unpin Tab"
-                            >
-                                <i className="fa fa-solid fa-thumbtack" />
-                            </Button>
-                        ) : (
-                            <Button
-                                className="ghost grey close"
-                                onClick={onClose}
-                                onMouseDown={handleMouseDownOnClose}
-                                title="Close Tab"
-                            >
-                                <i className="fa fa-solid fa-xmark" />
-                            </Button>
-                        )}
+                    menu.push({ label: "Backgrounds", type: "submenu", submenu }, { type: "separator" });
+                }
+                menu.push({ label: "Close Tab", click: () => onClose(null) });
+                ContextMenuModel.showContextMenu(menu, e);
+            },
+            [onPinChange, handleRenameTab, id, onClose, isPinned]
+        );
+
+        return (
+            <div
+                ref={tabRef}
+                className={clsx("tab", {
+                    active,
+                    dragging: isDragging,
+                    "before-active": isBeforeActive,
+                    "new-tab": isNew,
+                })}
+                onMouseDown={onDragStart}
+                onClick={onSelect}
+                onContextMenu={handleContextMenu}
+                data-tab-id={id}
+            >
+                <div className="tab-inner">
+                    <div
+                        ref={editableRef}
+                        className={clsx("name", { focused: isEditable })}
+                        contentEditable={isEditable}
+                        onDoubleClick={handleRenameTab}
+                        onBlur={handleBlur}
+                        onKeyDown={handleKeyDown}
+                        suppressContentEditableWarning={true}
+                    >
+                        {tabData?.name}
                     </div>
+                    {isPinned ? (
+                        <Button
+                            className="ghost grey pin"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onPinChange();
+                            }}
+                            title="Unpin Tab"
+                        >
+                            <i className="fa fa-solid fa-thumbtack" />
+                        </Button>
+                    ) : (
+                        <Button
+                            className="ghost grey close"
+                            onClick={onClose}
+                            onMouseDown={handleMouseDownOnClose}
+                            title="Close Tab"
+                        >
+                            <i className="fa fa-solid fa-xmark" />
+                        </Button>
+                    )}
                 </div>
-            );
-        }
-    )
+            </div>
+        );
+    }
 );
 
 export { Tab };
diff --git a/frontend/app/tab/updatebanner.tsx b/frontend/app/tab/updatebanner.tsx
index f4b74685f8..cef3fcb0ec 100644
--- a/frontend/app/tab/updatebanner.tsx
+++ b/frontend/app/tab/updatebanner.tsx
@@ -1,10 +1,10 @@
 import { Button } from "@/element/button";
 import { atoms, getApi } from "@/store/global";
 import { useAtomValue } from "jotai";
-import { forwardRef, memo, useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import "./updatebanner.scss";
 
-const UpdateStatusBannerComponent = forwardRef<HTMLButtonElement>((_, ref) => {
+const UpdateStatusBannerComponent = (ref: React.RefObject<HTMLButtonElement>) => {
     const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
     let [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
     const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
@@ -65,6 +65,6 @@ const UpdateStatusBannerComponent = forwardRef<HTMLButtonElement>((_, ref) => {
             </Button>
         );
     }
-});
+};
 
 export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;
diff --git a/frontend/app/tab/workspaceswitcher.tsx b/frontend/app/tab/workspaceswitcher.tsx
index 018a9e50ca..060675fc31 100644
--- a/frontend/app/tab/workspaceswitcher.tsx
+++ b/frontend/app/tab/workspaceswitcher.tsx
@@ -15,7 +15,7 @@ import clsx from "clsx";
 import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { splitAtom } from "jotai/utils";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
-import { CSSProperties, forwardRef, useCallback, useEffect } from "react";
+import { CSSProperties, useCallback, useEffect } from "react";
 import WorkspaceSVG from "../asset/workspace.svg";
 import { IconButton } from "../element/iconbutton";
 import { atoms, getApi } from "../store/global";
@@ -34,7 +34,7 @@ type WorkspaceList = WorkspaceListEntry[];
 const workspaceMapAtom = atom<WorkspaceList>([]);
 const workspaceSplitAtom = splitAtom(workspaceMapAtom);
 const editingWorkspaceAtom = atom<string>();
-const WorkspaceSwitcher = forwardRef<HTMLDivElement>((_, ref) => {
+const WorkspaceSwitcher = (ref: React.RefObject<HTMLDivElement>) => {
     const setWorkspaceList = useSetAtom(workspaceMapAtom);
     const activeWorkspace = useAtomValueSafe(atoms.workspace);
     const workspaceList = useAtomValue(workspaceSplitAtom);
@@ -136,7 +136,7 @@ const WorkspaceSwitcher = forwardRef<HTMLDivElement>((_, ref) => {
             </PopoverContent>
         </Popover>
     );
-});
+};
 
 const WorkspaceSwitcherItem = ({
     entryAtom,
diff --git a/frontend/app/view/plotview/plotview.tsx b/frontend/app/view/plotview/plotview.tsx
index 9b46a821ed..1a05a6a904 100644
--- a/frontend/app/view/plotview/plotview.tsx
+++ b/frontend/app/view/plotview/plotview.tsx
@@ -32,7 +32,7 @@ function evalAsync(Plot: any, d3: any, funcText: string): Promise<unknown> {
 }
 
 function PlotView() {
-    const containerRef = React.useRef<HTMLInputElement>();
+    const containerRef = React.useRef<HTMLInputElement>(null);
     const [plotDef, setPlotDef] = React.useState<string>();
     const [savedDef, setSavedDef] = React.useState<string>();
     const [modalUp, setModalUp] = React.useState(false);
diff --git a/frontend/app/view/preview/csvview.tsx b/frontend/app/view/preview/csvview.tsx
index ca2b223f91..de6df37a6d 100644
--- a/frontend/app/view/preview/csvview.tsx
+++ b/frontend/app/view/preview/csvview.tsx
@@ -193,7 +193,14 @@ const CSVView = ({ parentRef, filename, content }: CSVViewProps) => {
                 </thead>
                 <tbody style={{ height: `${state.tbodyHeight}px` }} ref={tbodyRef}>
                     {table.getRowModel().rows.map((row, index) => (
-                        <tr key={row.id} ref={(el) => (rowRef.current[index] = el)} id={row.id} tabIndex={index}>
+                        <tr
+                            key={row.id}
+                            ref={(el) => {
+                                rowRef.current[index] = el;
+                            }}
+                            id={row.id}
+                            tabIndex={index}
+                        >
                             {row.getVisibleCells().map((cell) => (
                                 <td key={cell.id} id={cell.id} tabIndex={index}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/frontend/app/view/preview/directorypreview.tsx b/frontend/app/view/preview/directorypreview.tsx
index e0fce8a83b..9616524c5e 100644
--- a/frontend/app/view/preview/directorypreview.tsx
+++ b/frontend/app/view/preview/directorypreview.tsx
@@ -143,7 +143,7 @@ enum EntryManagerType {
 }
 
 type EntryManagerOverlayProps = {
-    forwardRef?: React.Ref<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement>;
     entryManagerType: EntryManagerType;
     startingValue?: string;
     onSave: (newValue: string) => void;
@@ -158,13 +158,13 @@ const EntryManagerOverlay = memo(
         startingValue,
         onSave,
         onCancel,
-        forwardRef,
+        ref,
         style,
         getReferenceProps,
     }: EntryManagerOverlayProps) => {
         const [value, setValue] = useState(startingValue);
         return (
-            <div className="entry-manager-overlay" ref={forwardRef} style={style} {...getReferenceProps()}>
+            <div className="entry-manager-overlay" ref={ref} style={style} {...getReferenceProps()}>
                 <div className="entry-manager-type">{entryManagerType}</div>
                 <div className="entry-manager-input">
                     <Input
@@ -358,8 +358,8 @@ function DirectoryTable({
         return colSizes;
     }, [table.getState().columnSizingInfo]);
 
-    const osRef = useRef<OverlayScrollbarsComponentRef>();
-    const bodyRef = useRef<HTMLDivElement>();
+    const osRef = useRef<OverlayScrollbarsComponentRef>(null);
+    const bodyRef = useRef<HTMLDivElement>(null);
     const [scrollHeight, setScrollHeight] = useState(0);
 
     const onScroll = useCallback(
@@ -472,8 +472,8 @@ function TableBody({
     setRefreshVersion,
     osRef,
 }: TableBodyProps) {
-    const dummyLineRef = useRef<HTMLDivElement>();
-    const warningBoxRef = useRef<HTMLDivElement>();
+    const dummyLineRef = useRef<HTMLDivElement>(null);
+    const warningBoxRef = useRef<HTMLDivElement>(null);
     const rowRefs = useRef<HTMLDivElement[]>([]);
     const conn = useAtomValue(model.connection);
 
@@ -632,7 +632,9 @@ function TableBody({
     const displayRow = useCallback(
         (row: Row<FileInfo>, idx: number) => (
             <div
-                ref={(el) => (rowRefs.current[idx] = el)}
+                ref={(el) => {
+                    rowRefs.current[idx] = el;
+                }}
                 className={clsx("dir-table-body-row", { focused: focusIndex === idx })}
                 key={row.id}
                 onDoubleClick={() => {
@@ -914,7 +916,7 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
             {entryManagerProps && (
                 <EntryManagerOverlay
                     {...entryManagerProps}
-                    forwardRef={refs.setFloating}
+                    ref={refs.setFloating}
                     style={floatingStyles}
                     getReferenceProps={getFloatingProps}
                     onCancel={() => setEntryManagerProps(undefined)}
diff --git a/frontend/app/view/sysinfo/sysinfo.tsx b/frontend/app/view/sysinfo/sysinfo.tsx
index ec2ba93be8..6817e5b1ce 100644
--- a/frontend/app/view/sysinfo/sysinfo.tsx
+++ b/frontend/app/view/sysinfo/sysinfo.tsx
@@ -409,7 +409,7 @@ function SingleLinePlot({
     sparkline = false,
     targetLen,
 }: SingleLinePlotProps) {
-    const containerRef = React.useRef<HTMLInputElement>();
+    const containerRef = React.useRef<HTMLInputElement>(null);
     const domRect = useDimensionsWithExistingRef(containerRef, 300);
     const plotHeight = domRect?.height ?? 0;
     const plotWidth = domRect?.width ?? 0;
@@ -521,7 +521,7 @@ const SysinfoViewInner = React.memo(({ model }: SysinfoViewProps) => {
     const plotData = jotai.useAtomValue(model.dataAtom);
     const yvals = jotai.useAtomValue(model.metrics);
     const plotMeta = jotai.useAtomValue(model.plotMetaAtom);
-    const osRef = React.useRef<OverlayScrollbarsComponentRef>();
+    const osRef = React.useRef<OverlayScrollbarsComponentRef>(null);
     const targetLen = jotai.useAtomValue(model.numPoints) + 1;
     let title = false;
     let cols2 = false;
diff --git a/frontend/app/view/vdom/vdom.tsx b/frontend/app/view/vdom/vdom.tsx
index e1cd414f42..bcb2f71f7b 100644
--- a/frontend/app/view/vdom/vdom.tsx
+++ b/frontend/app/view/vdom/vdom.tsx
@@ -16,6 +16,7 @@ import {
     validateAndWrapCss,
     validateAndWrapReactStyle,
 } from "@/app/view/vdom/vdom-utils";
+import { JSX } from "react";
 import "./vdom.scss";
 
 const TextTag = "#text";
diff --git a/frontend/app/view/waveai/waveai.tsx b/frontend/app/view/waveai/waveai.tsx
index d20a2c9207..6d8282a94f 100644
--- a/frontend/app/view/waveai/waveai.tsx
+++ b/frontend/app/view/waveai/waveai.tsx
@@ -16,7 +16,7 @@ import { atom, Atom, PrimitiveAtom, useAtomValue, WritableAtom } from "jotai";
 import { splitAtom } from "jotai/utils";
 import type { OverlayScrollbars } from "overlayscrollbars";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { debounce, throttle } from "throttle-debounce";
 import "./waveai.scss";
 
@@ -508,108 +508,107 @@ interface ChatWindowProps {
     chatWindowRef: React.RefObject<HTMLDivElement>;
     msgWidths: Object;
     model: WaveAiModel;
+    ref: React.RefObject<OverlayScrollbarsComponentRef>;
 }
 
-const ChatWindow = memo(
-    forwardRef<OverlayScrollbarsComponentRef, ChatWindowProps>(({ chatWindowRef, msgWidths, model }, ref) => {
-        const isUserScrolling = useRef(false);
-        const osRef = useRef<OverlayScrollbarsComponentRef>(null);
-        const splitMessages = useAtomValue(model.messagesSplitAtom) as Atom<ChatMessageType>[];
-        const latestMessage = useAtomValue(model.latestMessageAtom);
-        const prevMessagesLenRef = useRef(splitMessages.length);
-
-        useImperativeHandle(ref, () => osRef.current as OverlayScrollbarsComponentRef);
-
-        const handleNewMessage = useCallback(
-            throttle(100, (messagesLen: number) => {
-                if (osRef.current?.osInstance()) {
-                    console.log("handleNewMessage", messagesLen, isUserScrolling.current);
-                    const { viewport } = osRef.current.osInstance().elements();
-                    if (prevMessagesLenRef.current !== messagesLen || !isUserScrolling.current) {
-                        viewport.scrollTo({
-                            behavior: "auto",
-                            top: chatWindowRef.current?.scrollHeight || 0,
-                        });
-                    }
-
-                    prevMessagesLenRef.current = messagesLen;
-                }
-            }),
-            []
-        );
+const ChatWindow = memo(({ chatWindowRef, msgWidths, model, ref }: ChatWindowProps) => {
+    const isUserScrolling = useRef(false);
+    const osRef = useRef<OverlayScrollbarsComponentRef>(null);
+    const splitMessages = useAtomValue(model.messagesSplitAtom) as Atom<ChatMessageType>[];
+    const latestMessage = useAtomValue(model.latestMessageAtom);
+    const prevMessagesLenRef = useRef(splitMessages.length);
 
-        useEffect(() => {
-            handleNewMessage(splitMessages.length);
-        }, [splitMessages, latestMessage]);
+    useImperativeHandle(ref, () => osRef.current as OverlayScrollbarsComponentRef);
 
-        // Wait 300 ms after the user stops scrolling to determine if the user is within 300px of the bottom of the chat window.
-        // If so, unset the user scrolling flag.
-        const determineUnsetScroll = useCallback(
-            debounce(300, () => {
+    const handleNewMessage = useCallback(
+        throttle(100, (messagesLen: number) => {
+            if (osRef.current?.osInstance()) {
+                console.log("handleNewMessage", messagesLen, isUserScrolling.current);
                 const { viewport } = osRef.current.osInstance().elements();
-                if (viewport.scrollTop > chatWindowRef.current?.clientHeight - viewport.clientHeight - 100) {
-                    isUserScrolling.current = false;
+                if (prevMessagesLenRef.current !== messagesLen || !isUserScrolling.current) {
+                    viewport.scrollTo({
+                        behavior: "auto",
+                        top: chatWindowRef.current?.scrollHeight || 0,
+                    });
                 }
-            }),
-            []
-        );
 
-        const handleUserScroll = useCallback(
-            throttle(100, () => {
-                isUserScrolling.current = true;
-                determineUnsetScroll();
-            }),
-            []
-        );
+                prevMessagesLenRef.current = messagesLen;
+            }
+        }),
+        []
+    );
 
-        useEffect(() => {
-            if (osRef.current?.osInstance()) {
-                const { viewport } = osRef.current.osInstance().elements();
+    useEffect(() => {
+        handleNewMessage(splitMessages.length);
+    }, [splitMessages, latestMessage]);
+
+    // Wait 300 ms after the user stops scrolling to determine if the user is within 300px of the bottom of the chat window.
+    // If so, unset the user scrolling flag.
+    const determineUnsetScroll = useCallback(
+        debounce(300, () => {
+            const { viewport } = osRef.current.osInstance().elements();
+            if (viewport.scrollTop > chatWindowRef.current?.clientHeight - viewport.clientHeight - 100) {
+                isUserScrolling.current = false;
+            }
+        }),
+        []
+    );
 
-                viewport.addEventListener("wheel", handleUserScroll, { passive: true });
-                viewport.addEventListener("touchmove", handleUserScroll, { passive: true });
+    const handleUserScroll = useCallback(
+        throttle(100, () => {
+            isUserScrolling.current = true;
+            determineUnsetScroll();
+        }),
+        []
+    );
 
-                return () => {
-                    viewport.removeEventListener("wheel", handleUserScroll);
-                    viewport.removeEventListener("touchmove", handleUserScroll);
-                    if (osRef.current && osRef.current.osInstance()) {
-                        osRef.current.osInstance().destroy();
-                    }
-                };
-            }
-        }, []);
+    useEffect(() => {
+        if (osRef.current?.osInstance()) {
+            const { viewport } = osRef.current.osInstance().elements();
 
-        const handleScrollbarInitialized = (instance: OverlayScrollbars) => {
-            const { viewport } = instance.elements();
-            viewport.removeAttribute("tabindex");
-            viewport.scrollTo({
-                behavior: "auto",
-                top: chatWindowRef.current?.scrollHeight || 0,
-            });
-        };
+            viewport.addEventListener("wheel", handleUserScroll, { passive: true });
+            viewport.addEventListener("touchmove", handleUserScroll, { passive: true });
 
-        const handleScrollbarUpdated = (instance: OverlayScrollbars) => {
-            const { viewport } = instance.elements();
-            viewport.removeAttribute("tabindex");
-        };
+            return () => {
+                viewport.removeEventListener("wheel", handleUserScroll);
+                viewport.removeEventListener("touchmove", handleUserScroll);
+                if (osRef.current && osRef.current.osInstance()) {
+                    osRef.current.osInstance().destroy();
+                }
+            };
+        }
+    }, []);
 
-        return (
-            <OverlayScrollbarsComponent
-                ref={osRef}
-                className="chat-window-container"
-                options={{ scrollbars: { autoHide: "leave" } }}
-                events={{ initialized: handleScrollbarInitialized, updated: handleScrollbarUpdated }}
-            >
-                <div ref={chatWindowRef} className="chat-window" style={msgWidths}>
-                    <div className="filler"></div>
-                    {splitMessages.map((chitem, idx) => (
-                        <ChatItem key={idx} chatItemAtom={chitem} model={model} />
-                    ))}
-                </div>
-            </OverlayScrollbarsComponent>
-        );
-    })
-);
+    const handleScrollbarInitialized = (instance: OverlayScrollbars) => {
+        const { viewport } = instance.elements();
+        viewport.removeAttribute("tabindex");
+        viewport.scrollTo({
+            behavior: "auto",
+            top: chatWindowRef.current?.scrollHeight || 0,
+        });
+    };
+
+    const handleScrollbarUpdated = (instance: OverlayScrollbars) => {
+        const { viewport } = instance.elements();
+        viewport.removeAttribute("tabindex");
+    };
+
+    return (
+        <OverlayScrollbarsComponent
+            ref={osRef}
+            className="chat-window-container"
+            options={{ scrollbars: { autoHide: "leave" } }}
+            events={{ initialized: handleScrollbarInitialized, updated: handleScrollbarUpdated }}
+        >
+            <div ref={chatWindowRef} className="chat-window" style={msgWidths}>
+                <div className="filler"></div>
+                {splitMessages.map((chitem, idx) => (
+                    <ChatItem key={idx} chatItemAtom={chitem} model={model} />
+                ))}
+            </div>
+        </OverlayScrollbarsComponent>
+    );
+});
 
 interface ChatInputProps {
     value: string;
@@ -618,63 +617,62 @@ interface ChatInputProps {
     onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onMouseDown: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
     model: WaveAiModel;
+    ref: React.RefObject<HTMLTextAreaElement>;
 }
 
-const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
-    ({ value, onChange, onKeyDown, onMouseDown, baseFontSize, model }, ref) => {
-        const textAreaRef = useRef<HTMLTextAreaElement>(null);
+const ChatInput = ({ value, onChange, onKeyDown, onMouseDown, baseFontSize, model, ref }: ChatInputProps) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
-        useImperativeHandle(ref, () => textAreaRef.current as HTMLTextAreaElement);
+    useImperativeHandle(ref, () => textAreaRef.current as HTMLTextAreaElement);
 
-        useEffect(() => {
-            model.textAreaRef = textAreaRef;
-        }, []);
-
-        const adjustTextAreaHeight = useCallback(
-            (value: string) => {
-                if (textAreaRef.current == null) {
-                    return;
-                }
+    useEffect(() => {
+        model.textAreaRef = textAreaRef;
+    }, []);
 
-                // Adjust the height of the textarea to fit the text
-                const textAreaMaxLines = 5;
-                const textAreaLineHeight = baseFontSize * 1.5;
-                const textAreaMinHeight = textAreaLineHeight;
-                const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
+    const adjustTextAreaHeight = useCallback(
+        (value: string) => {
+            if (textAreaRef.current == null) {
+                return;
+            }
 
-                if (value === "") {
-                    textAreaRef.current.style.height = `${textAreaLineHeight}px`;
-                    return;
-                }
+            // Adjust the height of the textarea to fit the text
+            const textAreaMaxLines = 5;
+            const textAreaLineHeight = baseFontSize * 1.5;
+            const textAreaMinHeight = textAreaLineHeight;
+            const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
 
+            if (value === "") {
                 textAreaRef.current.style.height = `${textAreaLineHeight}px`;
-                const scrollHeight = textAreaRef.current.scrollHeight;
-                const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
-                textAreaRef.current.style.height = newHeight + "px";
-            },
-            [baseFontSize]
-        );
+                return;
+            }
 
-        useEffect(() => {
-            adjustTextAreaHeight(value);
-        }, [value]);
+            textAreaRef.current.style.height = `${textAreaLineHeight}px`;
+            const scrollHeight = textAreaRef.current.scrollHeight;
+            const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
+            textAreaRef.current.style.height = newHeight + "px";
+        },
+        [baseFontSize]
+    );
 
-        return (
-            <textarea
-                ref={textAreaRef}
-                autoComplete="off"
-                autoCorrect="off"
-                className="waveai-input"
-                onMouseDown={onMouseDown} // When the user clicks on the textarea
-                onChange={onChange}
-                onKeyDown={onKeyDown}
-                style={{ fontSize: baseFontSize }}
-                placeholder="Ask anything..."
-                value={value}
-            ></textarea>
-        );
-    }
-);
+    useEffect(() => {
+        adjustTextAreaHeight(value);
+    }, [value]);
+
+    return (
+        <textarea
+            ref={textAreaRef}
+            autoComplete="off"
+            autoCorrect="off"
+            className="waveai-input"
+            onMouseDown={onMouseDown} // When the user clicks on the textarea
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            style={{ fontSize: baseFontSize }}
+            placeholder="Ask anything..."
+            value={value}
+        ></textarea>
+    );
+};
 
 const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
     const { sendMessage } = model.useWaveAi();
diff --git a/package.json b/package.json
index eadcdb21d2..ee22a60b3a 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "devDependencies": {
         "@chromatic-com/storybook": "^3.2.2",
         "@eslint/js": "^9.16.0",
-        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-node-resolve": "^16.0.0",
         "@storybook/addon-essentials": "^8.4.7",
         "@storybook/addon-interactions": "^8.4.7",
         "@storybook/addon-links": "^8.4.7",
@@ -47,8 +47,8 @@
         "@types/papaparse": "^5",
         "@types/pngjs": "^6.0.5",
         "@types/prop-types": "^15",
-        "@types/react": "^18.3.13",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "@types/semver": "^7",
         "@types/shell-quote": "^1",
         "@types/sprintf-js": "^1",
@@ -75,8 +75,8 @@
         "tslib": "^2.8.1",
         "tsx": "^4.19.2",
         "typescript": "^5.7.2",
-        "typescript-eslint": "^8.18.0",
-        "vite": "^6.0.3",
+        "typescript-eslint": "^8.18.2",
+        "vite": "^6.0.6",
         "vite-plugin-image-optimizer": "^1.1.8",
         "vite-plugin-static-copy": "^2.2.0",
         "vite-plugin-svgr": "^4.3.0",
@@ -84,7 +84,7 @@
         "vitest": "^2.1.8"
     },
     "dependencies": {
-        "@floating-ui/react": "^0.26.28",
+        "@floating-ui/react": "^0.27.2",
         "@monaco-editor/loader": "^1.4.0",
         "@monaco-editor/react": "^4.6.0",
         "@observablehq/plot": "^0.6.16",
@@ -119,10 +119,10 @@
         "parse-srcset": "^1.0.2",
         "pngjs": "^7.0.0",
         "prop-types": "^15.8.1",
-        "react": "^18.3.1",
+        "react": "^19.0.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.0.0",
         "react-frame-component": "^5.2.7",
         "react-gauge-chart": "^0.5.1",
         "react-markdown": "^9.0.1",
diff --git a/yarn.lock b/yarn.lock
index c6abd67872..d46bb8ed4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3181,6 +3181,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/aix-ppc64@npm:0.24.2"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-arm64@npm:0.21.5"
@@ -3202,6 +3209,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/android-arm64@npm:0.24.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-arm@npm:0.21.5"
@@ -3223,6 +3237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/android-arm@npm:0.24.2"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/android-x64@npm:0.21.5"
@@ -3244,6 +3265,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/android-x64@npm:0.24.2"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/darwin-arm64@npm:0.21.5"
@@ -3265,6 +3293,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/darwin-arm64@npm:0.24.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/darwin-x64@npm:0.21.5"
@@ -3286,6 +3321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/darwin-x64@npm:0.24.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
@@ -3307,6 +3349,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/freebsd-arm64@npm:0.24.2"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/freebsd-x64@npm:0.21.5"
@@ -3328,6 +3377,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/freebsd-x64@npm:0.24.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-arm64@npm:0.21.5"
@@ -3349,6 +3405,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-arm64@npm:0.24.2"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-arm@npm:0.21.5"
@@ -3370,6 +3433,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-arm@npm:0.24.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-ia32@npm:0.21.5"
@@ -3391,6 +3461,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-ia32@npm:0.24.2"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-loong64@npm:0.21.5"
@@ -3412,6 +3489,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-loong64@npm:0.24.2"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-mips64el@npm:0.21.5"
@@ -3433,6 +3517,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-mips64el@npm:0.24.2"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-ppc64@npm:0.21.5"
@@ -3454,6 +3545,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-ppc64@npm:0.24.2"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-riscv64@npm:0.21.5"
@@ -3475,6 +3573,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-riscv64@npm:0.24.2"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-s390x@npm:0.21.5"
@@ -3496,6 +3601,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-s390x@npm:0.24.2"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/linux-x64@npm:0.21.5"
@@ -3517,6 +3629,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/linux-x64@npm:0.24.2"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/netbsd-arm64@npm:0.24.2"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/netbsd-x64@npm:0.21.5"
@@ -3538,6 +3664,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/netbsd-x64@npm:0.24.2"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-arm64@npm:0.23.1":
   version: 0.23.1
   resolution: "@esbuild/openbsd-arm64@npm:0.23.1"
@@ -3552,6 +3685,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/openbsd-arm64@npm:0.24.2"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/openbsd-x64@npm:0.21.5"
@@ -3573,6 +3713,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/openbsd-x64@npm:0.24.2"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/sunos-x64@npm:0.21.5"
@@ -3594,6 +3741,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/sunos-x64@npm:0.24.2"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-arm64@npm:0.21.5"
@@ -3615,6 +3769,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/win32-arm64@npm:0.24.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-ia32@npm:0.21.5"
@@ -3636,6 +3797,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/win32-ia32@npm:0.24.2"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/win32-x64@npm:0.21.5"
@@ -3657,6 +3825,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@esbuild/win32-x64@npm:0.24.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.1
   resolution: "@eslint-community/eslint-utils@npm:4.4.1"
@@ -3764,17 +3939,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:^0.26.28":
-  version: 0.26.28
-  resolution: "@floating-ui/react@npm:0.26.28"
+"@floating-ui/react@npm:^0.27.2":
+  version: 0.27.2
+  resolution: "@floating-ui/react@npm:0.27.2"
   dependencies:
     "@floating-ui/react-dom": "npm:^2.1.2"
     "@floating-ui/utils": "npm:^0.2.8"
     tabbable: "npm:^6.0.0"
   peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10c0/a42df129e1e976fe8ba3f4c8efdda265a0196c1b66b83f2b9b27423d08dcc765406f893aeff9d830e70e3f14a9d4c490867eb4c32983317cbaa33863b0fae6f6
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: 10c0/7de7810b501422a12e4d4089042dc8ab9de8a95f53003a4a5e2b25fd8b2ee0dddcfab996a26558ec4614c2e15ce1b68d2e06f188bec55de7346c904610d50837
   languageName: node
   linkType: hard
 
@@ -4803,9 +4978,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-node-resolve@npm:^15.3.0":
-  version: 15.3.0
-  resolution: "@rollup/plugin-node-resolve@npm:15.3.0"
+"@rollup/plugin-node-resolve@npm:^16.0.0":
+  version: 16.0.0
+  resolution: "@rollup/plugin-node-resolve@npm:16.0.0"
   dependencies:
     "@rollup/pluginutils": "npm:^5.0.1"
     "@types/resolve": "npm:1.20.2"
@@ -4817,7 +4992,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: 10c0/5f3b11f9f6d00fe9fd3fe1977cc71f6a99c2b13d0ee82ad6822c4c4ecfc98854791c5a505798762f7e2332d9d67568a561e89aa8268ed3b1668563be1845109e
+  checksum: 10c0/b63deb6fc14b37070ccaffacc8c10c9720f28ce7632f4fe2ee77064c0c79bcc3fe060fb77160e673c9fd847307252f25a2983030bd54f1888324063c69ae1399
   languageName: node
   linkType: hard
 
@@ -6522,12 +6697,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "@types/react-dom@npm:18.3.1"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/8b416551c60bb6bd8ec10e198c957910cfb271bc3922463040b0d57cf4739cdcd24b13224f8d68f10318926e1ec3cd69af0af79f0291b599a992f8c80d47f1eb
+"@types/react-dom@npm:^19.0.2":
+  version: 19.0.2
+  resolution: "@types/react-dom@npm:19.0.2"
+  peerDependencies:
+    "@types/react": ^19.0.0
+  checksum: 10c0/3d0c7b78dbe8df64ea769f30af990a5950173a8321c745fe11094d765423f7964c3519dca6e7cd36b4be6521c8efc690bdd3b79b327b229dd1e9d5a8bad677dd
   languageName: node
   linkType: hard
 
@@ -6573,13 +6748,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.3.13":
-  version: 18.3.13
-  resolution: "@types/react@npm:18.3.13"
+"@types/react@npm:^19.0.2":
+  version: 19.0.2
+  resolution: "@types/react@npm:19.0.2"
   dependencies:
-    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/91815e00157deb179fa670aa2dfc491952698b7743ffddca0e3e0f16e7a18454f3f5ef72321a07386c49e721563b9d280dbbdfae039face764e2fdd8ad949d4b
+  checksum: 10c0/8992f39701fcf1bf893ef8f94a56196445667baf08fe4f6050a14e229a17aad3265ad3efc01595ff3b4d5d5c69da885f9aa4ff80f164a613018734efcff1eb8f
   languageName: node
   linkType: hard
 
@@ -6793,15 +6967,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.18.0"
+"@typescript-eslint/eslint-plugin@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.18.2"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.18.0"
-    "@typescript-eslint/type-utils": "npm:8.18.0"
-    "@typescript-eslint/utils": "npm:8.18.0"
-    "@typescript-eslint/visitor-keys": "npm:8.18.0"
+    "@typescript-eslint/scope-manager": "npm:8.18.2"
+    "@typescript-eslint/type-utils": "npm:8.18.2"
+    "@typescript-eslint/utils": "npm:8.18.2"
+    "@typescript-eslint/visitor-keys": "npm:8.18.2"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^5.3.1"
     natural-compare: "npm:^1.4.0"
@@ -6810,64 +6984,64 @@ __metadata:
     "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <5.8.0"
-  checksum: 10c0/c338da1b96c41d7b94401a6711659d0fef3acb691eff7a958f9d3aa0442a858830daad67e3575288a4f4669572e2b690517a513519b404a465ad68fe0a82d3ec
+  checksum: 10c0/ce854835a12747cd8efea5b70921e1a80b62af2a2d311b09343862a6af225b821a6729784547d37eb5f8eb286d1f086f41f305445adc3a054e37cc8c71561ccd
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/parser@npm:8.18.0"
+"@typescript-eslint/parser@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/parser@npm:8.18.2"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.18.0"
-    "@typescript-eslint/types": "npm:8.18.0"
-    "@typescript-eslint/typescript-estree": "npm:8.18.0"
-    "@typescript-eslint/visitor-keys": "npm:8.18.0"
+    "@typescript-eslint/scope-manager": "npm:8.18.2"
+    "@typescript-eslint/types": "npm:8.18.2"
+    "@typescript-eslint/typescript-estree": "npm:8.18.2"
+    "@typescript-eslint/visitor-keys": "npm:8.18.2"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <5.8.0"
-  checksum: 10c0/d3a062511c24dfcf522a645db1153022d49aa3bb05e288c22474cf04dc1d836f877eb9d2733947e448981ffb16e4de50d4ebe7570a268733a641f228ca6c4849
+  checksum: 10c0/ea28130e0a2733e3e40708ddfbb7b6522d9644e49cae2c3dc3faddd7ac7e7f73ed9775f19463ca0deca55edb52f5d9d522c206bb2a14fe3c9c6eef03d144b41f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.18.0"
+"@typescript-eslint/scope-manager@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/scope-manager@npm:8.18.2"
   dependencies:
-    "@typescript-eslint/types": "npm:8.18.0"
-    "@typescript-eslint/visitor-keys": "npm:8.18.0"
-  checksum: 10c0/6bf6532fd43f2b55b9b47fa8b0217c5b5a03f022e869a6a21228fc3ae04c0ac6c5ae5d6026866d189ba424d2f98cc6fbd2a34f909d241c9b86c031afd808f90c
+    "@typescript-eslint/types": "npm:8.18.2"
+    "@typescript-eslint/visitor-keys": "npm:8.18.2"
+  checksum: 10c0/2c05f5361e84d687555717bfb15988d5c11601c1094edeaafc8db5c961359982d7aeb192d775d348ab65ac43c5a6c968f3e8503ee1e6bf875aca27588907139f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/type-utils@npm:8.18.0"
+"@typescript-eslint/type-utils@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/type-utils@npm:8.18.2"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:8.18.0"
-    "@typescript-eslint/utils": "npm:8.18.0"
+    "@typescript-eslint/typescript-estree": "npm:8.18.2"
+    "@typescript-eslint/utils": "npm:8.18.2"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^1.3.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <5.8.0"
-  checksum: 10c0/c0fcf201c3b53f9374c0571198a639c81536170141caa08fd0f47094a596b1f82f839a849eac5832f954345c567dccb45b2ee1c0872c513331165f7bcb812396
+  checksum: 10c0/0441ca33f7381abae559e188bd7b2844159806e8bf5ab8d6f6d9b3a7a6bf9f9d0babf8452e83565da0e9841f656b25f44fd96f40bda1006c934535e37a997c6a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/types@npm:8.18.0"
-  checksum: 10c0/2dd7468c3f1c305545268b72c3a333488e6ab1b628c5f65081d895866422b9376c21634a7aac437805f84b22e352b6a8fc4dcf925ef4a8fd7d1898b8359f71be
+"@typescript-eslint/types@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/types@npm:8.18.2"
+  checksum: 10c0/4abf252671dd7c3a5c9b7ae2f523d91b04d937dbb601f3bc0182c234d50e4958be67248c1bb37833584ff0128844243145753614c7e80615b6cd6813f0713872
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.18.0"
+"@typescript-eslint/typescript-estree@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/typescript-estree@npm:8.18.2"
   dependencies:
-    "@typescript-eslint/types": "npm:8.18.0"
-    "@typescript-eslint/visitor-keys": "npm:8.18.0"
+    "@typescript-eslint/types": "npm:8.18.2"
+    "@typescript-eslint/visitor-keys": "npm:8.18.2"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
@@ -6876,32 +7050,32 @@ __metadata:
     ts-api-utils: "npm:^1.3.0"
   peerDependencies:
     typescript: ">=4.8.4 <5.8.0"
-  checksum: 10c0/87b432b190b627314f007b17b2371898db78baaa3df67a0d9a94d080d88a7a307906b54a735084cacef37f6421e2b9c3320040617e73fe54eac2bf22c610f1ec
+  checksum: 10c0/648296d6c95d80d37bdb5ee6662554af425ff85f1c4805ea344234a1c386c91a36b05cddf52c80264912b29693d3e1b9a45d84414a3aee1393ace2d0babc9e95
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/utils@npm:8.18.0"
+"@typescript-eslint/utils@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/utils@npm:8.18.2"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:8.18.0"
-    "@typescript-eslint/types": "npm:8.18.0"
-    "@typescript-eslint/typescript-estree": "npm:8.18.0"
+    "@typescript-eslint/scope-manager": "npm:8.18.2"
+    "@typescript-eslint/types": "npm:8.18.2"
+    "@typescript-eslint/typescript-estree": "npm:8.18.2"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <5.8.0"
-  checksum: 10c0/58a2fc1e404d1f905c2a958d995824eb4abc6e73836b186717550677f8b1d17954acc369feddb83277350915388bc3d8b721423c37777b8b8017fc29c89ec6ee
+  checksum: 10c0/1cb86e2e4f4e29cbaebe4272c15d98f6193b1476f65dd028d77bf4fd09e715b01d82619509c466b95056148db8d3e04f0a3ef27dc2f034a7c7ab4b2d429e58bb
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.18.0":
-  version: 8.18.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.18.0"
+"@typescript-eslint/visitor-keys@npm:8.18.2":
+  version: 8.18.2
+  resolution: "@typescript-eslint/visitor-keys@npm:8.18.2"
   dependencies:
-    "@typescript-eslint/types": "npm:8.18.0"
+    "@typescript-eslint/types": "npm:8.18.2"
     eslint-visitor-keys: "npm:^4.2.0"
-  checksum: 10c0/d4cdc2adab553098b5be7117fb7df76fb66cfd380528881a0a8c2a9eee03bf8baddda07d15ca0bd3ed8b35c379b3f449292183df18e3e81898dbcadafcb708b8
+  checksum: 10c0/b8fe05bc3bafa7930d6671c2e1807ae47788060eb573e6a000c9597690dfaff6a4eb9f6f934719a18bae631d238ca32847510aeecc61032170e58ab45244e869
   languageName: node
   linkType: hard
 
@@ -10711,7 +10885,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0, esbuild@npm:^0.24.0":
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0":
   version: 0.24.0
   resolution: "esbuild@npm:0.24.0"
   dependencies:
@@ -10874,6 +11048,92 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.24.2":
+  version: 0.24.2
+  resolution: "esbuild@npm:0.24.2"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.24.2"
+    "@esbuild/android-arm": "npm:0.24.2"
+    "@esbuild/android-arm64": "npm:0.24.2"
+    "@esbuild/android-x64": "npm:0.24.2"
+    "@esbuild/darwin-arm64": "npm:0.24.2"
+    "@esbuild/darwin-x64": "npm:0.24.2"
+    "@esbuild/freebsd-arm64": "npm:0.24.2"
+    "@esbuild/freebsd-x64": "npm:0.24.2"
+    "@esbuild/linux-arm": "npm:0.24.2"
+    "@esbuild/linux-arm64": "npm:0.24.2"
+    "@esbuild/linux-ia32": "npm:0.24.2"
+    "@esbuild/linux-loong64": "npm:0.24.2"
+    "@esbuild/linux-mips64el": "npm:0.24.2"
+    "@esbuild/linux-ppc64": "npm:0.24.2"
+    "@esbuild/linux-riscv64": "npm:0.24.2"
+    "@esbuild/linux-s390x": "npm:0.24.2"
+    "@esbuild/linux-x64": "npm:0.24.2"
+    "@esbuild/netbsd-arm64": "npm:0.24.2"
+    "@esbuild/netbsd-x64": "npm:0.24.2"
+    "@esbuild/openbsd-arm64": "npm:0.24.2"
+    "@esbuild/openbsd-x64": "npm:0.24.2"
+    "@esbuild/sunos-x64": "npm:0.24.2"
+    "@esbuild/win32-arm64": "npm:0.24.2"
+    "@esbuild/win32-ia32": "npm:0.24.2"
+    "@esbuild/win32-x64": "npm:0.24.2"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/5a25bb08b6ba23db6e66851828d848bd3ff87c005a48c02d83e38879058929878a6baa5a414e1141faee0d1dece3f32b5fbc2a87b82ed6a7aa857cf40359aeb5
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:~0.23.0":
   version: 0.23.1
   resolution: "esbuild@npm:0.23.1"
@@ -17805,7 +18065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.0.0, react-dom@npm:^18.3.1":
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -17817,6 +18077,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^19.0.0":
+  version: 19.0.0
+  resolution: "react-dom@npm:19.0.0"
+  dependencies:
+    scheduler: "npm:^0.25.0"
+  peerDependencies:
+    react: ^19.0.0
+  checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9
+  languageName: node
+  linkType: hard
+
 "react-error-overlay@npm:^6.0.11":
   version: 6.0.11
   resolution: "react-error-overlay@npm:6.0.11"
@@ -18019,7 +18290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.0.0, react@npm:^18.3.1":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -18028,6 +18299,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^19.0.0":
+  version: 19.0.0
+  resolution: "react@npm:19.0.0"
+  checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471
+  languageName: node
+  linkType: hard
+
 "read-binary-file-arch@npm:^1.0.6":
   version: 1.0.6
   resolution: "read-binary-file-arch@npm:1.0.6"
@@ -19404,6 +19682,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.25.0":
+  version: 0.25.0
+  resolution: "scheduler@npm:0.25.0"
+  checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:2.7.0":
   version: 2.7.0
   resolution: "schema-utils@npm:2.7.0"
@@ -20960,17 +21245,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript-eslint@npm:^8.18.0":
-  version: 8.18.0
-  resolution: "typescript-eslint@npm:8.18.0"
+"typescript-eslint@npm:^8.18.2":
+  version: 8.18.2
+  resolution: "typescript-eslint@npm:8.18.2"
   dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.18.0"
-    "@typescript-eslint/parser": "npm:8.18.0"
-    "@typescript-eslint/utils": "npm:8.18.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.18.2"
+    "@typescript-eslint/parser": "npm:8.18.2"
+    "@typescript-eslint/utils": "npm:8.18.2"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <5.8.0"
-  checksum: 10c0/dda882cbfc1ebad6903864571bc69bfd7e32e17fec67d98fdfab2bd652348d425c6a1c3697734d59cd5dd15d26d496db3c3808c1de5840fa29b9e76184fa1865
+  checksum: 10c0/30a0314a2484bcbe286fc6eda55784d9954605c7e60ddd35281da90c6fcb75a40bd3abd84617814dff4e1504d762234407c99153fdd812dce712cef11bbb9b3f
   languageName: node
   linkType: hard
 
@@ -21730,11 +22015,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^6.0.3":
-  version: 6.0.3
-  resolution: "vite@npm:6.0.3"
+"vite@npm:^6.0.6":
+  version: 6.0.6
+  resolution: "vite@npm:6.0.6"
   dependencies:
-    esbuild: "npm:^0.24.0"
+    esbuild: "npm:^0.24.2"
     fsevents: "npm:~2.3.3"
     postcss: "npm:^8.4.49"
     rollup: "npm:^4.23.0"
@@ -21778,7 +22063,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/764ebed14770426a638575b23a51127c630ace873999ab896b0184484d8107e7255cdf64cfb36c65c1ef1d583e44b70a1d14c0f05b89612e834a5806e3964475
+  checksum: 10c0/144c3f80a7920a4b2fa14f00f99b58ece246455ca9313561a67a227b45dadac3343e406d3c1dbfafa79992ac88f54cb2b040b229997e432daf47594fe8cacec2
   languageName: node
   linkType: hard
 
@@ -21923,8 +22208,8 @@ __metadata:
     prettier-plugin-jsdoc: "npm:^1.3.0"
     prettier-plugin-organize-imports: "npm:^4.1.0"
     prism-react-renderer: "npm:^2.3.0"
-    react: "npm:^18.0.0"
-    react-dom: "npm:^18.0.0"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
     remark-cli: "npm:^12.0.1"
     remark-frontmatter: "npm:^5.0.0"
     remark-gfm: "npm:^4.0.0"
@@ -21933,7 +22218,7 @@ __metadata:
     remark-preset-lint-recommended: "npm:^7.0.0"
     remark-typescript-code-import: "npm:^1.0.1"
     typescript: "npm:^5.7.2"
-    typescript-eslint: "npm:^8.18.0"
+    typescript-eslint: "npm:^8.18.2"
     ua-parser-js: "npm:^2.0.0"
   languageName: unknown
   linkType: soft
@@ -21944,12 +22229,12 @@ __metadata:
   dependencies:
     "@chromatic-com/storybook": "npm:^3.2.2"
     "@eslint/js": "npm:^9.16.0"
-    "@floating-ui/react": "npm:^0.26.28"
+    "@floating-ui/react": "npm:^0.27.2"
     "@monaco-editor/loader": "npm:^1.4.0"
     "@monaco-editor/react": "npm:^4.6.0"
     "@observablehq/plot": "npm:^0.6.16"
     "@react-hook/resize-observer": "npm:^2.0.2"
-    "@rollup/plugin-node-resolve": "npm:^15.3.0"
+    "@rollup/plugin-node-resolve": "npm:^16.0.0"
     "@storybook/addon-essentials": "npm:^8.4.7"
     "@storybook/addon-interactions": "npm:^8.4.7"
     "@storybook/addon-links": "npm:^8.4.7"
@@ -21970,8 +22255,8 @@ __metadata:
     "@types/papaparse": "npm:^5"
     "@types/pngjs": "npm:^6.0.5"
     "@types/prop-types": "npm:^15"
-    "@types/react": "npm:^18.3.13"
-    "@types/react-dom": "npm:^18.3.1"
+    "@types/react": "npm:^19.0.2"
+    "@types/react-dom": "npm:^19.0.2"
     "@types/semver": "npm:^7"
     "@types/shell-quote": "npm:^1"
     "@types/sprintf-js": "npm:^1"
@@ -22016,10 +22301,10 @@ __metadata:
     prettier-plugin-jsdoc: "npm:^1.3.0"
     prettier-plugin-organize-imports: "npm:^4.1.0"
     prop-types: "npm:^15.8.1"
-    react: "npm:^18.3.1"
+    react: "npm:^19.0.0"
     react-dnd: "npm:^16.0.1"
     react-dnd-html5-backend: "npm:^16.0.1"
-    react-dom: "npm:^18.3.1"
+    react-dom: "npm:^19.0.0"
     react-frame-component: "npm:^5.2.7"
     react-gauge-chart: "npm:^0.5.1"
     react-markdown: "npm:^9.0.1"
@@ -22045,9 +22330,9 @@ __metadata:
     tslib: "npm:^2.8.1"
     tsx: "npm:^4.19.2"
     typescript: "npm:^5.7.2"
-    typescript-eslint: "npm:^8.18.0"
+    typescript-eslint: "npm:^8.18.2"
     use-device-pixel-ratio: "npm:^1.1.2"
-    vite: "npm:^6.0.3"
+    vite: "npm:^6.0.6"
     vite-plugin-image-optimizer: "npm:^1.1.8"
     vite-plugin-static-copy: "npm:^2.2.0"
     vite-plugin-svgr: "npm:^4.3.0"

From 30007a67b27574b821ab1c55837108aed8bf642f Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Sun, 29 Dec 2024 14:36:48 -0500
Subject: [PATCH 03/11] fix runtime errs

---
 docs/package.json                      |  8 +++++---
 frontend/app/element/input.tsx         |  2 +-
 frontend/app/tab/updatebanner.tsx      |  6 +++++-
 frontend/app/tab/workspaceswitcher.tsx |  6 +++++-
 package.json                           |  2 +-
 yarn.lock                              | 18 +++++++++---------
 6 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 5f621e622d..f80a0a7d04 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -26,8 +26,8 @@
         "@waveterm/docusaurus-og": "https://github.com/wavetermdev/docusaurus-og",
         "clsx": "^2.1.1",
         "prism-react-renderer": "^2.3.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "remark-gfm": "^4.0.0",
         "remark-typescript-code-import": "^1.0.1",
         "ua-parser-js": "^2.0.0"
@@ -57,7 +57,9 @@
     },
     "resolutions": {
         "path-to-regexp@npm:2.2.1": "^3",
-        "cookie@0.6.0": "^0.7.0"
+        "cookie@0.6.0": "^0.7.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
     },
     "browserslist": {
         "production": [
diff --git a/frontend/app/element/input.tsx b/frontend/app/element/input.tsx
index 4c4603de68..2c92accbb1 100644
--- a/frontend/app/element/input.tsx
+++ b/frontend/app/element/input.tsx
@@ -9,7 +9,7 @@ import "./input.scss";
 interface InputGroupProps {
     children: React.ReactNode;
     className?: string;
-    ref: React.RefObject<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement>;
 }
 
 const InputGroup = memo(({ children, className, ref }: InputGroupProps) => {
diff --git a/frontend/app/tab/updatebanner.tsx b/frontend/app/tab/updatebanner.tsx
index cef3fcb0ec..0aafbbe8a3 100644
--- a/frontend/app/tab/updatebanner.tsx
+++ b/frontend/app/tab/updatebanner.tsx
@@ -4,7 +4,11 @@ import { useAtomValue } from "jotai";
 import { memo, useEffect, useState } from "react";
 import "./updatebanner.scss";
 
-const UpdateStatusBannerComponent = (ref: React.RefObject<HTMLButtonElement>) => {
+type UpdateStatusBannerProps = {
+    ref: React.RefObject<HTMLButtonElement>;
+};
+
+const UpdateStatusBannerComponent = ({ ref }: UpdateStatusBannerProps) => {
     const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
     let [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
     const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
diff --git a/frontend/app/tab/workspaceswitcher.tsx b/frontend/app/tab/workspaceswitcher.tsx
index 060675fc31..1b2accdae7 100644
--- a/frontend/app/tab/workspaceswitcher.tsx
+++ b/frontend/app/tab/workspaceswitcher.tsx
@@ -30,11 +30,15 @@ type WorkspaceListEntry = {
     workspace: Workspace;
 };
 
+type WorkspaceSwitcherProps = {
+    ref: React.RefObject<HTMLDivElement>;
+};
+
 type WorkspaceList = WorkspaceListEntry[];
 const workspaceMapAtom = atom<WorkspaceList>([]);
 const workspaceSplitAtom = splitAtom(workspaceMapAtom);
 const editingWorkspaceAtom = atom<string>();
-const WorkspaceSwitcher = (ref: React.RefObject<HTMLDivElement>) => {
+const WorkspaceSwitcher = ({ ref }: WorkspaceSwitcherProps) => {
     const setWorkspaceList = useSetAtom(workspaceMapAtom);
     const activeWorkspace = useAtomValueSafe(atoms.workspace);
     const workspaceList = useAtomValue(workspaceSplitAtom);
diff --git a/package.json b/package.json
index ee22a60b3a..1ddcfb76cd 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
         "postinstall": "electron-builder install-app-deps"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^3.2.2",
+        "@chromatic-com/storybook": "^3.2.3",
         "@eslint/js": "^9.16.0",
         "@rollup/plugin-node-resolve": "^16.0.0",
         "@storybook/addon-essentials": "^8.4.7",
diff --git a/yarn.lock b/yarn.lock
index d46bb8ed4c..5aa57802d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1644,9 +1644,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "@chromatic-com/storybook@npm:3.2.2"
+"@chromatic-com/storybook@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "@chromatic-com/storybook@npm:3.2.3"
   dependencies:
     chromatic: "npm:^11.15.0"
     filesize: "npm:^10.0.12"
@@ -1655,7 +1655,7 @@ __metadata:
     strip-ansi: "npm:^7.1.0"
   peerDependencies:
     storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 10c0/7b8da1ddb399c804337ff28a28594b548392b7bead52f66615b98e201cdeb4d31184b9e355791ba5d0d8cfdd2bea7d38355ecd0058f26f4790f9a887107bde0f
+  checksum: 10c0/23c59b7d225347d4af8cb6a7596da3417dc3abc2d5036c4ef5cee2852b994a16b5996a1bd1a584bb56e97266d85ce9ae7daeeac296b3060d6b80b14cad10d9d1
   languageName: node
   linkType: hard
 
@@ -18065,7 +18065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -18290,7 +18290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -22208,8 +22208,8 @@ __metadata:
     prettier-plugin-jsdoc: "npm:^1.3.0"
     prettier-plugin-organize-imports: "npm:^4.1.0"
     prism-react-renderer: "npm:^2.3.0"
-    react: "npm:^19.0.0"
-    react-dom: "npm:^19.0.0"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
     remark-cli: "npm:^12.0.1"
     remark-frontmatter: "npm:^5.0.0"
     remark-gfm: "npm:^4.0.0"
@@ -22227,7 +22227,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "waveterm@workspace:."
   dependencies:
-    "@chromatic-com/storybook": "npm:^3.2.2"
+    "@chromatic-com/storybook": "npm:^3.2.3"
     "@eslint/js": "npm:^9.16.0"
     "@floating-ui/react": "npm:^0.27.2"
     "@monaco-editor/loader": "npm:^1.4.0"

From 5e83596098f06e895abf69d57af395ab6a3ddd06 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Sun, 29 Dec 2024 15:08:25 -0500
Subject: [PATCH 04/11] remove pointerleave handler

---
 frontend/app/hook/useLongClick.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/app/hook/useLongClick.tsx b/frontend/app/hook/useLongClick.tsx
index 09a9733450..97604a4148 100644
--- a/frontend/app/hook/useLongClick.tsx
+++ b/frontend/app/hook/useLongClick.tsx
@@ -43,12 +43,10 @@ export function useLongClick<T extends HTMLElement>(
 
         element.addEventListener("pointerdown", startPressBound);
         element.addEventListener("pointerup", stopPressBound);
-        element.addEventListener("pointerleave", stopPressBound);
 
         return () => {
             element.removeEventListener("pointerdown", startPressBound);
             element.removeEventListener("pointerup", stopPressBound);
-            element.removeEventListener("pointerleave", stopPressBound);
         };
     }, [ref.current, startPress, stopPress]);
 

From ea8702102d29c6f84f710e7246629ffc553cefbf Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 30 Dec 2024 10:55:14 -0500
Subject: [PATCH 05/11] add back onclick

---
 frontend/app/hook/useLongClick.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/app/hook/useLongClick.tsx b/frontend/app/hook/useLongClick.tsx
index 97604a4148..71e5da4eb4 100644
--- a/frontend/app/hook/useLongClick.tsx
+++ b/frontend/app/hook/useLongClick.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef } from "react";
 
 export function useLongClick<T extends HTMLElement>(
     ref: React.RefObject<T>,
-    onClick?: React.PointerEventHandler<T>,
+    onClick?: React.MouseEventHandler<T>,
     onLongClick?: React.PointerEventHandler<T>,
     disabled = false,
     ms = 300
@@ -25,12 +25,10 @@ export function useLongClick<T extends HTMLElement>(
                 const longClickTriggered = now - clickStart > ms;
                 if (longClickTriggered && onLongClick) {
                     onLongClick?.(e);
-                } else {
-                    onClick?.(e);
                 }
             }
         },
-        [ms, onClick, onLongClick]
+        [ms, onLongClick]
     );
 
     useEffect(() => {
@@ -40,15 +38,18 @@ export function useLongClick<T extends HTMLElement>(
 
         const startPressBound = startPress.bind(element);
         const stopPressBound = stopPress.bind(element);
+        const onClickBound = onClick.bind(element);
 
         element.addEventListener("pointerdown", startPressBound);
         element.addEventListener("pointerup", stopPressBound);
+        element.addEventListener("click", onClickBound);
 
         return () => {
             element.removeEventListener("pointerdown", startPressBound);
             element.removeEventListener("pointerup", stopPressBound);
+            element.removeEventListener("click", onClickBound);
         };
-    }, [ref.current, startPress, stopPress]);
+    }, [ref.current, startPress, stopPress, onClick]);
 
     return ref;
 }

From 4b657d0bd8732334277fea120428bb2f84675867 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 30 Dec 2024 10:55:51 -0500
Subject: [PATCH 06/11] mouseevent

---
 frontend/types/custom.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts
index 011a2a04ed..01119d7d3c 100644
--- a/frontend/types/custom.d.ts
+++ b/frontend/types/custom.d.ts
@@ -157,7 +157,7 @@ declare global {
         iconSpin?: boolean;
         className?: string;
         title?: string;
-        click?: (e: React.PointerEvent<any>) => void;
+        click?: (e: React.MouseEvent<any>) => void;
         longClick?: (e: React.PointerEvent<any>) => void;
         disabled?: boolean;
         noAction?: boolean;

From e825b5d4b009615d274175a12c13ff7628272610 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 21 Jan 2025 13:51:21 -0800
Subject: [PATCH 07/11] Upgrade docsite to react 19

---
 docs/package.json |  10 ++--
 package.json      |  10 ++--
 yarn.lock         | 127 +++++++++++++++++++++++-----------------------
 3 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index e29346756a..65ddd3fa68 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,13 +23,13 @@
         "@docusaurus/plugin-svgr": "^3.7.0",
         "@docusaurus/theme-classic": "^3.7.0",
         "@docusaurus/theme-search-algolia": "^3.7.0",
-        "@mdx-js/react": "^3.0.0",
+        "@mdx-js/react": "^3.1.0",
         "@waveterm/docusaurus-og": "https://github.com/wavetermdev/docusaurus-og.git#commit=243b4a7feffde0cbb7c0bf29fe7a2f74ee655c0c",
         "clsx": "^2.1.1",
         "docusaurus-plugin-sass": "^0.2.6",
-        "prism-react-renderer": "^2.3.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "prism-react-renderer": "^2.4.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "remark-gfm": "^4.0.0",
         "remark-typescript-code-import": "^1.0.1",
         "sass": "^1.83.4",
@@ -40,7 +40,7 @@
         "@docusaurus/tsconfig": "3.7.0",
         "@docusaurus/types": "3.7.0",
         "@eslint/js": "^9.18.0",
-        "@mdx-js/typescript-plugin": "^0.0.6",
+        "@mdx-js/typescript-plugin": "^0.0.8",
         "@types/eslint": "^9.6.1",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/ua-parser-js": "^0.7.39",
diff --git a/package.json b/package.json
index e2816780af..dfdc1aadd0 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,8 @@
         "@types/papaparse": "^5",
         "@types/pngjs": "^6.0.5",
         "@types/prop-types": "^15",
-        "@types/react": "^19.0.2",
-        "@types/react-dom": "^19.0.2",
+        "@types/react": "^19.0.7",
+        "@types/react-dom": "^19.0.3",
         "@types/semver": "^7",
         "@types/shell-quote": "^1",
         "@types/sprintf-js": "^1",
@@ -84,14 +84,14 @@
         "vitest": "^3.0.3"
     },
     "dependencies": {
-        "@floating-ui/react": "^0.27.2",
+        "@floating-ui/react": "^0.27.3",
         "@monaco-editor/loader": "^1.4.0",
         "@monaco-editor/react": "^4.6.0",
         "@observablehq/plot": "^0.6.16",
         "@react-hook/resize-observer": "^2.0.2",
         "@table-nav/core": "^0.0.7",
         "@table-nav/react": "^0.0.7",
-        "@tanstack/react-table": "^8.20.5",
+        "@tanstack/react-table": "^8.20.6",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/addon-search": "^0.15.0",
         "@xterm/addon-serialize": "^0.13.0",
@@ -126,7 +126,7 @@
         "react-dom": "^19.0.0",
         "react-frame-component": "^5.2.7",
         "react-gauge-chart": "^0.5.1",
-        "react-markdown": "^9.0.1",
+        "react-markdown": "^9.0.3",
         "rehype-highlight": "^7.0.1",
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index 75f01f3959..19bcbc6e43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3532,17 +3532,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:^0.27.2":
-  version: 0.27.2
-  resolution: "@floating-ui/react@npm:0.27.2"
+"@floating-ui/react@npm:^0.27.3":
+  version: 0.27.3
+  resolution: "@floating-ui/react@npm:0.27.3"
   dependencies:
     "@floating-ui/react-dom": "npm:^2.1.2"
-    "@floating-ui/utils": "npm:^0.2.8"
+    "@floating-ui/utils": "npm:^0.2.9"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=17.0.0"
     react-dom: ">=17.0.0"
-  checksum: 10c0/7de7810b501422a12e4d4089042dc8ab9de8a95f53003a4a5e2b25fd8b2ee0dddcfab996a26558ec4614c2e15ce1b68d2e06f188bec55de7346c904610d50837
+  checksum: 10c0/9ebc4e82af905cfafeb5cde1dfbc15a2541d4eaaf1e13fb6b8acbb9f0c3535a7c331b8dee3ab5bb03acb21716ee2ab155629a6c14c3227cf959bf8ad92594539
   languageName: node
   linkType: hard
 
@@ -3553,6 +3553,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/utils@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@floating-ui/utils@npm:0.2.9"
+  checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -3939,18 +3946,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/language-service@npm:0.6.0":
-  version: 0.6.0
-  resolution: "@mdx-js/language-service@npm:0.6.0"
+"@mdx-js/language-service@npm:0.6.2":
+  version: 0.6.2
+  resolution: "@mdx-js/language-service@npm:0.6.2"
   dependencies:
     "@types/estree": "npm:^1.0.0"
     "@types/mdast": "npm:^4.0.0"
     "@types/unist": "npm:^3.0.0"
     "@volar/language-service": "npm:~2.4.0"
+    estree-util-scope: "npm:^1.0.0"
     estree-walker: "npm:^3.0.0"
     mdast-util-mdxjs-esm: "npm:^2.0.0"
     mdast-util-to-markdown: "npm:^2.0.0"
-    periscopic: "npm:^3.0.0"
     remark-mdx: "npm:^3.0.0"
     remark-parse: "npm:^11.0.0"
     unified: "npm:^11.0.0"
@@ -3958,7 +3965,7 @@ __metadata:
     unist-util-visit-parents: "npm:^6.0.0"
     vfile-message: "npm:^4.0.0"
     vscode-uri: "npm:^3.0.0"
-  checksum: 10c0/c7b3627ca8b5b431c71578a9d251d4b5248b14a53543395488ee9646d9234178dbb4e5ddb3b2cdae1e7855c89436554409a9f2e4ece124955d28cf1ad814112d
+  checksum: 10c0/6ca784acc434a4b236cae58cf540a805de682b9fa01248fa8d35b10403b122c519ccc82eda601b3ca11041c431f7a963a09a6a25260e9f71ff6cec0976ffc0d5
   languageName: node
   linkType: hard
 
@@ -3994,7 +4001,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/react@npm:^3.0.0":
+"@mdx-js/react@npm:^3.0.0, @mdx-js/react@npm:^3.1.0":
   version: 3.1.0
   resolution: "@mdx-js/react@npm:3.1.0"
   dependencies:
@@ -4006,16 +4013,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/typescript-plugin@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "@mdx-js/typescript-plugin@npm:0.0.6"
+"@mdx-js/typescript-plugin@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "@mdx-js/typescript-plugin@npm:0.0.8"
   dependencies:
-    "@mdx-js/language-service": "npm:0.6.0"
+    "@mdx-js/language-service": "npm:0.6.2"
     "@volar/typescript": "npm:~2.4.0"
     load-plugin: "npm:^6.0.0"
     remark-frontmatter: "npm:^5.0.0"
     remark-gfm: "npm:^4.0.0"
-  checksum: 10c0/2df5191da23e86b7bbab172a6a6ac65dd5d35e6b0869ef68a6ecd4d57402bc1df714f043087f8c049d30ff7193108699fd14da9d741194863f1d7dd1fbfab8ae
+  checksum: 10c0/9c2ef45420746d123052694e829f714092e0b3e18c13f79cdc11bac91308d8af3ea849f09cdb437e8e1dfd9beba66bfbf0fecaf3c4954044bbc8325e9e6807cd
   languageName: node
   linkType: hard
 
@@ -5554,15 +5561,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:^8.20.5":
-  version: 8.20.5
-  resolution: "@tanstack/react-table@npm:8.20.5"
+"@tanstack/react-table@npm:^8.20.6":
+  version: 8.20.6
+  resolution: "@tanstack/react-table@npm:8.20.6"
   dependencies:
     "@tanstack/table-core": "npm:8.20.5"
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 10c0/574fa62fc6868a3b1113dbd043323f8b73aeb60555609caa164d5137a14636d4502784a961191afde2ec46f33f8c2bbfc4561d27a701c3d084e899a632dda3c8
+  checksum: 10c0/3213dc146f647fbd571f4e347007b969320819e588439b2ee95dd3a65efcbe30d097c24426dd82617041ed1e186182a5b303382bcebed5d61a1c6045a55c58d3
   languageName: node
   linkType: hard
 
@@ -6167,12 +6174,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^19.0.2":
-  version: 19.0.2
-  resolution: "@types/react-dom@npm:19.0.2"
+"@types/react-dom@npm:^19.0.3":
+  version: 19.0.3
+  resolution: "@types/react-dom@npm:19.0.3"
   peerDependencies:
     "@types/react": ^19.0.0
-  checksum: 10c0/3d0c7b78dbe8df64ea769f30af990a5950173a8321c745fe11094d765423f7964c3519dca6e7cd36b4be6521c8efc690bdd3b79b327b229dd1e9d5a8bad677dd
+  checksum: 10c0/3867427b333cbe8cbba496d7cc20ec9676d32c25ae44f4d1263a4129d42e57cf4adf0039ad263432f1215b88075c27d326e7eb4ed646128235d01a76e661d48f
   languageName: node
   linkType: hard
 
@@ -6218,12 +6225,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^19.0.2":
-  version: 19.0.2
-  resolution: "@types/react@npm:19.0.2"
+"@types/react@npm:^19.0.7":
+  version: 19.0.7
+  resolution: "@types/react@npm:19.0.7"
   dependencies:
     csstype: "npm:^3.0.2"
-  checksum: 10c0/8992f39701fcf1bf893ef8f94a56196445667baf08fe4f6050a14e229a17aad3265ad3efc01595ff3b4d5d5c69da885f9aa4ff80f164a613018734efcff1eb8f
+  checksum: 10c0/818e546fa03a2a65ac2652fc472891ac96684211e8967bc25e1da6a8a09e2301ad972b1b038d128f8b4cbbd7691f6f57fee274db568169e9b6b01556abbb5bee
   languageName: node
   linkType: hard
 
@@ -13184,15 +13191,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-reference@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "is-reference@npm:3.0.2"
-  dependencies:
-    "@types/estree": "npm:*"
-  checksum: 10c0/652d31b405e8e8269071cee78fe874b072745012eba202c6dc86880fd603a65ae043e3160990ab4a0a4b33567cbf662eecf3bc6b3c2c1550e6c2b6cf885ce5aa
-  languageName: node
-  linkType: hard
-
 "is-regexp@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-regexp@npm:1.0.0"
@@ -16220,17 +16218,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"periscopic@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "periscopic@npm:3.1.0"
-  dependencies:
-    "@types/estree": "npm:^1.0.0"
-    estree-walker: "npm:^3.0.0"
-    is-reference: "npm:^3.0.0"
-  checksum: 10c0/fb5ce7cd810c49254cdf1cd3892811e6dd1a1dfbdf5f10a0a33fb7141baac36443c4cad4f0e2b30abd4eac613f6ab845c2bc1b7ce66ae9694c7321e6ada5bd96
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -17253,6 +17240,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prism-react-renderer@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "prism-react-renderer@npm:2.4.1"
+  dependencies:
+    "@types/prismjs": "npm:^1.26.0"
+    clsx: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: 10c0/ebbe8feb975224344bbdd046b3a937d121592dbe4b8f22ba0be31f5af37b9a8219f441138ef6cab1c5b96f2aa6b529015200959f7e5e85b60ca69c81d35edcd4
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.29.0":
   version: 1.29.0
   resolution: "prismjs@npm:1.29.0"
@@ -17568,7 +17567,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.3.1":
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -17697,9 +17696,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-markdown@npm:^9.0.1":
-  version: 9.0.1
-  resolution: "react-markdown@npm:9.0.1"
+"react-markdown@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "react-markdown@npm:9.0.3"
   dependencies:
     "@types/hast": "npm:^3.0.0"
     devlop: "npm:^1.0.0"
@@ -17714,7 +17713,7 @@ __metadata:
   peerDependencies:
     "@types/react": ">=18"
     react: ">=18"
-  checksum: 10c0/3a3895dbd56647bc864b8da46dd575e71a9e609eb1e43fea8e8e6209d86e208eddd5b07bf8d7b5306a194b405440760a8d134aebd5a4ce5dc7dee4299e84db96
+  checksum: 10c0/7f1aef171b49af9b84896917c033cbc0f45d0d2b4a5db5a339bf96977a143ae19f21cb7a69a6878b718d5578db021e96372fa33621b79bf57a87efb9b3c84166
   languageName: node
   linkType: hard
 
@@ -17780,7 +17779,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -21599,8 +21598,8 @@ __metadata:
     "@docusaurus/tsconfig": "npm:3.7.0"
     "@docusaurus/types": "npm:3.7.0"
     "@eslint/js": "npm:^9.18.0"
-    "@mdx-js/react": "npm:^3.0.0"
-    "@mdx-js/typescript-plugin": "npm:^0.0.6"
+    "@mdx-js/react": "npm:^3.1.0"
+    "@mdx-js/typescript-plugin": "npm:^0.0.8"
     "@types/eslint": "npm:^9.6.1"
     "@types/eslint-config-prettier": "npm:^6.11.3"
     "@types/ua-parser-js": "npm:^0.7.39"
@@ -21613,9 +21612,9 @@ __metadata:
     prettier: "npm:^3.4.2"
     prettier-plugin-jsdoc: "npm:^1.3.0"
     prettier-plugin-organize-imports: "npm:^4.1.0"
-    prism-react-renderer: "npm:^2.3.0"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
+    prism-react-renderer: "npm:^2.4.1"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
     remark-cli: "npm:^12.0.1"
     remark-frontmatter: "npm:^5.0.0"
     remark-gfm: "npm:^4.0.0"
@@ -21636,7 +21635,7 @@ __metadata:
   dependencies:
     "@chromatic-com/storybook": "npm:^3.2.4"
     "@eslint/js": "npm:^9.18.0"
-    "@floating-ui/react": "npm:^0.27.2"
+    "@floating-ui/react": "npm:^0.27.3"
     "@monaco-editor/loader": "npm:^1.4.0"
     "@monaco-editor/react": "npm:^4.6.0"
     "@observablehq/plot": "npm:^0.6.16"
@@ -21653,7 +21652,7 @@ __metadata:
     "@storybook/theming": "npm:^8.5.0"
     "@table-nav/core": "npm:^0.0.7"
     "@table-nav/react": "npm:^0.0.7"
-    "@tanstack/react-table": "npm:^8.20.5"
+    "@tanstack/react-table": "npm:^8.20.6"
     "@types/color": "npm:^4.2.0"
     "@types/css-tree": "npm:^2"
     "@types/debug": "npm:^4"
@@ -21662,8 +21661,8 @@ __metadata:
     "@types/papaparse": "npm:^5"
     "@types/pngjs": "npm:^6.0.5"
     "@types/prop-types": "npm:^15"
-    "@types/react": "npm:^19.0.2"
-    "@types/react-dom": "npm:^19.0.2"
+    "@types/react": "npm:^19.0.7"
+    "@types/react-dom": "npm:^19.0.3"
     "@types/semver": "npm:^7"
     "@types/shell-quote": "npm:^1"
     "@types/sprintf-js": "npm:^1"
@@ -21715,7 +21714,7 @@ __metadata:
     react-dom: "npm:^19.0.0"
     react-frame-component: "npm:^5.2.7"
     react-gauge-chart: "npm:^0.5.1"
-    react-markdown: "npm:^9.0.1"
+    react-markdown: "npm:^9.0.3"
     rehype-highlight: "npm:^7.0.1"
     rehype-raw: "npm:^7.0.0"
     rehype-sanitize: "npm:^6.0.0"

From 070c2debfd7d041336110e05caae0510d3aac5e2 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 21 Jan 2025 13:52:17 -0800
Subject: [PATCH 08/11] remove resolution override

---
 docs/package.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 65ddd3fa68..10f60a971b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -60,9 +60,7 @@
     },
     "resolutions": {
         "path-to-regexp@npm:2.2.1": "^3",
-        "cookie@0.6.0": "^0.7.0",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "cookie@0.6.0": "^0.7.0"
     },
     "browserslist": {
         "production": [

From 0d3805d228c3ad026738f060547294d92669ab2b Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 7 Feb 2025 10:35:01 -0800
Subject: [PATCH 09/11] fix lockfile

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index aebf64490d..0caa08a70f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18216,7 +18216,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.0.0, react@npm:^18.3.1":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -22113,7 +22113,7 @@ __metadata:
     "@docusaurus/tsconfig": "npm:3.7.0"
     "@docusaurus/types": "npm:3.7.0"
     "@eslint/js": "npm:^9.19.0"
-    "@mdx-js/react": "npm:^3.0.0"
+    "@mdx-js/react": "npm:^3.1.0"
     "@mdx-js/typescript-plugin": "npm:^0.0.8"
     "@types/eslint": "npm:^9.6.1"
     "@types/eslint-config-prettier": "npm:^6.11.3"
@@ -22128,8 +22128,8 @@ __metadata:
     prettier-plugin-jsdoc: "npm:^1.3.2"
     prettier-plugin-organize-imports: "npm:^4.1.0"
     prism-react-renderer: "npm:^2.4.1"
-    react: "npm:^18.0.0"
-    react-dom: "npm:^18.0.0"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
     rehype-highlight: "npm:^7.0.1"
     remark-cli: "npm:^12.0.1"
     remark-frontmatter: "npm:^5.0.0"

From a0724677b5e1eb3701c1a7c78f949c7ef7f06a19 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 7 Feb 2025 10:37:13 -0800
Subject: [PATCH 10/11] fix bad merge

---
 frontend/app/view/preview/directorypreview.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/app/view/preview/directorypreview.tsx b/frontend/app/view/preview/directorypreview.tsx
index 048fbef790..6265b5e4af 100644
--- a/frontend/app/view/preview/directorypreview.tsx
+++ b/frontend/app/view/preview/directorypreview.tsx
@@ -690,7 +690,9 @@ function TableBody({
                         setSearch={setSearch}
                         idx={idx + table.getTopRows().length}
                         handleFileContextMenu={handleFileContextMenu}
-                        ref={(el) => (rowRefs.current[idx] = el)}
+                        ref={(el) => {
+                            rowRefs.current[idx] = el;
+                        }}
                         key={idx}
                     />
                 ))}
@@ -757,7 +759,9 @@ const TableRow = React.forwardRef(function (
             }}
             onClick={() => setFocusIndex(idx)}
             onContextMenu={(e) => handleFileContextMenu(e, row.original)}
-            ref={drag}
+            ref={(el) => {
+                drag(el);
+            }}
         >
             {row.getVisibleCells().map((cell) => (
                 <div

From 3d41925b7793e8c60699e9f55f11fdafabaaf749 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 7 Feb 2025 10:40:38 -0800
Subject: [PATCH 11/11] upgrade react types

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a2bd497b2d..8f569abbc9 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
         "@types/papaparse": "^5",
         "@types/pngjs": "^6.0.5",
         "@types/prop-types": "^15",
-        "@types/react": "^19.0.7",
+        "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.3",
         "@types/semver": "^7",
         "@types/shell-quote": "^1",
diff --git a/yarn.lock b/yarn.lock
index 0caa08a70f..7d28f78bac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6459,12 +6459,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^19.0.7":
-  version: 19.0.7
-  resolution: "@types/react@npm:19.0.7"
+"@types/react@npm:^19.0.8":
+  version: 19.0.8
+  resolution: "@types/react@npm:19.0.8"
   dependencies:
     csstype: "npm:^3.0.2"
-  checksum: 10c0/818e546fa03a2a65ac2652fc472891ac96684211e8967bc25e1da6a8a09e2301ad972b1b038d128f8b4cbbd7691f6f57fee274db568169e9b6b01556abbb5bee
+  checksum: 10c0/5fa7236356b1476de03519c66ef65d4fd904826956105619e2ad60cb0b55ae7b251dd5fff02234076225b5e15333d0d936bf9dbe1d461406f8a2ba01c197ddcd
   languageName: node
   linkType: hard
 
@@ -22179,7 +22179,7 @@ __metadata:
     "@types/papaparse": "npm:^5"
     "@types/pngjs": "npm:^6.0.5"
     "@types/prop-types": "npm:^15"
-    "@types/react": "npm:^19.0.7"
+    "@types/react": "npm:^19.0.8"
     "@types/react-dom": "npm:^19.0.3"
     "@types/semver": "npm:^7"
     "@types/shell-quote": "npm:^1"