@hyperframes/studio 0.7.36 → 0.7.38

package/src/components/ui/Button.tsx

@@ -30,22 +30,24 @@ const variantStyles: Record<ButtonVariant, string> = {
   primary: [
     "bg-white text-neutral-950 font-medium",
     "shadow-btn-primary",
-    "hover:bg-neutral-200",
-    "active:scale-[0.97]",
+    "enabled:hover:bg-neutral-200",
+    "enabled:active:scale-[0.97]",
   ].join(" "),
   secondary: [
     "bg-transparent text-neutral-300 font-medium",
     "border border-border",
-    "hover:bg-surface-hover hover:text-white hover:border-border-strong",
-    "active:scale-[0.98]",
+    "enabled:hover:bg-surface-hover enabled:hover:text-white enabled:hover:border-border-strong",
+    "enabled:active:scale-[0.98]",
+  ].join(" "),
+  danger: [
+    "bg-accent-red text-white font-medium",
+    "enabled:hover:bg-red-600",
+    "enabled:active:scale-[0.97]",
   ].join(" "),
-  danger: ["bg-accent-red text-white font-medium", "hover:bg-red-600", "active:scale-[0.97]"].join(
-    " ",
-  ),
   ghost: [
     "bg-transparent text-neutral-400",
-    "hover:bg-surface-hover hover:text-white",
-    "active:scale-[0.98]",
+    "enabled:hover:bg-surface-hover enabled:hover:text-white",
+    "enabled:active:scale-[0.98]",
   ].join(" "),
 };
 
@@ -55,6 +57,8 @@ const sizeStyles: Record<ButtonSize, string> = {
   lg: "h-9 px-4 text-base gap-2 rounded-button",
 };
 
+// Imported by the shell/renders PRs later in this stack.
+// fallow-ignore-next-line unused-export
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -76,8 +80,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         className={[
           "inline-flex items-center justify-center",
           "transition-all duration-press ease-standard",
-          "disabled:opacity-40 disabled:pointer-events-none",
+          // No pointer-events-none: disabled buttons must still receive hover
+          // so a wrapping Tooltip can explain WHY they're disabled (A5).
+          "disabled:opacity-40 disabled:cursor-not-allowed",
           "select-none cursor-pointer",
+          "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
           variantStyles[variant],
           sizeStyles[size],
           className,
@@ -126,6 +133,7 @@ const iconSizeStyles: Record<ButtonSize, string> = {
   lg: "min-w-9 min-h-9 rounded-button", // 36px
 };
 
+// fallow-ignore-next-line unused-export
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ icon, size = "md", variant = "ghost", className = "", ...props }, ref) => {
     return (
@@ -134,8 +142,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         className={[
           "inline-flex items-center justify-center",
           "transition-all duration-press ease-standard",
-          "disabled:opacity-40 disabled:pointer-events-none",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
           "select-none cursor-pointer",
+          "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
           variantStyles[variant],
           iconSizeStyles[size],
           className,

package/src/components/ui/HyperframesLoader.tsx

@@ -25,7 +25,7 @@ export function HyperframesLoader({
   const markFrameSize = Math.round(size * 1.16);
 
   return (
-    <div className="hf-loader" draggable={false}>
+    <div className="hf-loader" role="status" draggable={false}>
       <div
         className="hf-loader-mark-frame"
         style={{ width: markFrameSize, height: markFrameSize }}
@@ -83,7 +83,13 @@ export function HyperframesLoader({
       <div className="hf-loader-title">{title}</div>
       {detail && <div className="hf-loader-detail">{detail}</div>}
       {boundedProgress !== undefined && (
-        <div className="hf-loader-progress" aria-hidden="true">
+        <div
+          className="hf-loader-progress"
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(boundedProgress * 100)}
+        >
           <div
             className="hf-loader-progress__fill"
             style={{ transform: `scaleX(${boundedProgress})` }}
@@ -95,6 +101,7 @@ export function HyperframesLoader({
   );
 }
 
+// fallow-ignore-next-line unused-export
 export function StatusFrame(props: HyperframesLoaderProps) {
   return (
     <div className="hf-frame">

package/src/components/ui/SearchInput.tsx

@@ -0,0 +1,53 @@
+// fallow-ignore-file unused-file
+// (consumers land in the sidebar/panels PR later in this stack)
+import { type InputHTMLAttributes } from "react";
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** Accessible name — placeholder alone is not one. */
+  "aria-label": string;
+}
+
+/**
+ * Shared search input — one visual system (panel-input tokens) for every
+ * panel search box, with a required accessible name.
+ */
+export function SearchInput({ className = "", ...props }: SearchInputProps) {
+  return (
+    <div
+      className={`flex items-center gap-1.5 rounded-md bg-panel-input px-2.5 py-[5px] ${className}`}
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 256 256"
+        fill="none"
+        className="flex-shrink-0"
+        aria-hidden="true"
+      >
+        <circle
+          cx="116"
+          cy="116"
+          r="76"
+          stroke="currentColor"
+          strokeWidth="22"
+          className="text-panel-text-5"
+        />
+        <line
+          x1="170"
+          y1="170"
+          x2="232"
+          y2="232"
+          stroke="currentColor"
+          strokeWidth="22"
+          strokeLinecap="round"
+          className="text-panel-text-5"
+        />
+      </svg>
+      <input
+        type="text"
+        className="min-w-0 w-full bg-transparent text-[11px] text-panel-text-1 outline-none placeholder:text-panel-text-5"
+        {...props}
+      />
+    </div>
+  );
+}

package/src/components/ui/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, type ReactNode } from "react";
+import { useState, useRef, useCallback, useEffect, useId, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 
 interface TooltipProps {
@@ -8,22 +8,46 @@ interface TooltipProps {
   side?: "top" | "bottom";
 }
 
+// Rough bubble height (padding + one text line) used to decide flipping
+// before the bubble has rendered; exact height isn't needed for the guard.
+const APPROX_BUBBLE_H = 28;
+const VIEWPORT_MARGIN = 8;
+
 export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipProps) {
   const [visible, setVisible] = useState(false);
   const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [resolvedSide, setResolvedSide] = useState<"top" | "bottom">(side);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const triggerRef = useRef<HTMLSpanElement>(null);
+  // WCAG 4.1.2: programmatically associate the bubble with its trigger.
+  const tooltipId = useId();
 
   const show = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
       const el = triggerRef.current;
       if (!el) return;
       const child = el.firstElementChild as HTMLElement | null;
       const rect = (child ?? el).getBoundingClientRect();
       if (rect.width === 0 && rect.height === 0) return;
+      // Flip when the preferred side would clip the viewport edge.
+      let nextSide = side;
+      if (side === "top" && rect.top - APPROX_BUBBLE_H - 6 < VIEWPORT_MARGIN) {
+        nextSide = "bottom";
+      } else if (
+        side === "bottom" &&
+        rect.bottom + APPROX_BUBBLE_H + 6 > window.innerHeight - VIEWPORT_MARGIN
+      ) {
+        nextSide = "top";
+      }
+      const x = Math.min(
+        Math.max(rect.left + rect.width / 2, VIEWPORT_MARGIN),
+        window.innerWidth - VIEWPORT_MARGIN,
+      );
+      setResolvedSide(nextSide);
       setPos({
-        x: rect.left + rect.width / 2,
-        y: side === "top" ? rect.top - 6 : rect.bottom + 6,
+        x,
+        y: nextSide === "top" ? rect.top - 6 : rect.bottom + 6,
       });
       setVisible(true);
     }, delay);
@@ -37,9 +61,27 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
     setVisible(false);
   }, []);
 
+  // WCAG 1.4.13: tooltip content must be dismissible with Escape.
+  useEffect(() => {
+    if (!visible) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [visible, hide]);
+
   return (
     <>
-      <span ref={triggerRef} onPointerEnter={show} onPointerLeave={hide} className="contents">
+      <span
+        ref={triggerRef}
+        onPointerEnter={show}
+        onPointerLeave={hide}
+        onFocus={show}
+        onBlur={hide}
+        aria-describedby={visible ? tooltipId : undefined}
+        className="contents"
+      >
         {children}
       </span>
       {visible &&
@@ -49,10 +91,14 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
             style={{
               left: pos.x,
               top: pos.y,
-              transform: side === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
+              transform: resolvedSide === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
             }}
           >
-            <div className="px-2 py-1 rounded-md bg-neutral-800 border border-neutral-700/50 text-[10px] font-medium text-neutral-200 whitespace-nowrap shadow-lg">
+            <div
+              role="tooltip"
+              id={tooltipId}
+              className="px-2 py-1 rounded-md bg-neutral-800 border border-neutral-700/50 text-[10px] font-medium text-neutral-200 whitespace-nowrap shadow-lg"
+            >
               {label}
             </div>
           </div>,

package/src/components/ui/VideoFrameThumbnail.tsx

@@ -5,10 +5,19 @@ import { useState, useEffect } from "react";
  * video + canvas. Seeks to ~10% of duration to avoid black opening frames.
  * Used by AssetThumbnail (assets tab) and RenderQueueItem (renders tab).
  */
-export function VideoFrameThumbnail({ src }: { src: string }) {
+export function VideoFrameThumbnail({
+  src,
+  fallbackLabel,
+}: {
+  src: string;
+  /** Shown instead of an endless shimmer when the video can't be decoded. */
+  fallbackLabel?: string;
+}) {
   const [frame, setFrame] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
 
   useEffect(() => {
+    setFailed(false);
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
     video.muted = true;
@@ -35,15 +44,29 @@ export function VideoFrameThumbnail({ src }: { src: string }) {
       cleanup();
     });
 
-    video.addEventListener("error", cleanup);
+    video.addEventListener("error", () => {
+      // Resolve the loading state — a permanent shimmer reads as "still loading".
+      setFailed(true);
+      cleanup();
+    });
     video.src = src;
     video.load();
 
     return cleanup;
   }, [src]);
 
+  if (failed && !frame) {
+    return (
+      <div className="w-full h-full bg-neutral-800 flex items-center justify-center">
+        <span className="text-[9px] font-medium text-neutral-600">{fallbackLabel ?? "VIDEO"}</span>
+      </div>
+    );
+  }
+
   if (!frame) {
-    return <div className="w-full h-full bg-neutral-800 animate-pulse" />;
+    return (
+      <div className="w-full h-full bg-neutral-800 animate-pulse motion-reduce:animate-none" />
+    );
   }
 
   return <img src={frame} alt="" draggable={false} className="w-full h-full object-contain" />;

package/src/components/ui/useDialogBehavior.ts

@@ -0,0 +1,83 @@
+// fallow-ignore-file unused-file
+// (consumers land in the shell/sidebar PRs later in this stack)
+import { useEffect, useCallback, useRef, type RefObject } from "react";
+
+const FOCUSABLE =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+
+interface DialogBehaviorOptions {
+  open: boolean;
+  onClose: () => void;
+  containerRef: RefObject<HTMLElement | null>;
+  /**
+   * Return false to veto a close triggered by Escape/backdrop (e.g. a dirty
+   * draft the user hasn't submitted). Direct onClose calls are not guarded.
+   */
+  canClose?: () => boolean;
+}
+
+/**
+ * Shared dialog contract for the studio's custom modals: document-level
+ * Escape, Tab focus trap, focus-first-control on open, focus restore on close.
+ * The consumer still renders its own markup and should set role="dialog" and
+ * aria-modal="true" on the container.
+ */
+export function useDialogBehavior({
+  open,
+  onClose,
+  containerRef,
+  canClose,
+}: DialogBehaviorOptions) {
+  const restoreRef = useRef<HTMLElement | null>(null);
+  const canCloseRef = useRef(canClose);
+  canCloseRef.current = canClose;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const requestClose = useCallback(() => {
+    const guard = canCloseRef.current;
+    if (guard && !guard()) return;
+    onCloseRef.current();
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const previouslyFocused = document.activeElement;
+    restoreRef.current = previouslyFocused instanceof HTMLElement ? previouslyFocused : null;
+
+    const container = containerRef.current;
+    const first = container?.querySelector<HTMLElement>(FOCUSABLE);
+    (first ?? container)?.focus();
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        requestClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const focusables = Array.from(el.querySelectorAll<HTMLElement>(FOCUSABLE));
+      if (focusables.length === 0) return;
+      const firstEl = focusables[0];
+      const lastEl = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === firstEl || !el.contains(active))) {
+        e.preventDefault();
+        lastEl.focus();
+      } else if (!e.shiftKey && (active === lastEl || !el.contains(active))) {
+        e.preventDefault();
+        firstEl.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      restoreRef.current?.focus();
+      restoreRef.current = null;
+    };
+  }, [open, containerRef, requestClose]);
+
+  return { requestClose };
+}

package/src/contexts/PanelLayoutContext.tsx

@@ -16,6 +16,7 @@ export function PanelLayoutProvider({
     leftWidth,
     setLeftWidth,
     rightWidth,
+    setRightWidth,
     leftCollapsed,
     setLeftCollapsed,
     rightCollapsed,
@@ -39,6 +40,7 @@ export function PanelLayoutProvider({
       leftWidth,
       setLeftWidth,
       rightWidth,
+      setRightWidth,
       leftCollapsed,
       setLeftCollapsed,
       rightCollapsed,
@@ -56,6 +58,7 @@ export function PanelLayoutProvider({
       leftWidth,
       setLeftWidth,
       rightWidth,
+      setRightWidth,
       leftCollapsed,
       setLeftCollapsed,
       rightCollapsed,

package/src/contexts/StudioContext.tsx

@@ -19,7 +19,12 @@ export interface StudioShellValue {
   renderQueue: {
     jobs: unknown[];
     isRendering: boolean;
+    loadError: string | null;
+    actionError: string | null;
+    dismissActionError: () => void;
+    reloadRenders: () => void;
     deleteRender: (jobId: string) => void;
+    cancelRender: (jobId: string) => void;
     clearCompleted: () => void;
     startRender: (options: unknown) => Promise<void>;
   };
@@ -58,6 +63,7 @@ export function useStudioPlaybackContext(): StudioPlaybackValue {
 }
 
 /** @deprecated Use useStudioShellContext and/or useStudioPlaybackContext instead. */
+// fallow-ignore-next-line unused-export
 export function useStudioContext(): StudioContextValue {
   const shell = useStudioShellContext();
   const playback = useStudioPlaybackContext();
@@ -166,6 +172,7 @@ export function StudioPlaybackProvider({
 }
 
 /** @deprecated Use StudioShellProvider and StudioPlaybackProvider instead. */
+// fallow-ignore-next-line unused-export
 export function StudioProvider({
   value,
   children,

package/src/hooks/useCompositionContentLoader.ts

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+
+/**
+ * Loads a composition file's content for the source editor when a composition
+ * is selected. Content stays null until the fetch resolves — the source editor
+ * must not mount on a null-content file, or its autosave would overwrite the
+ * real file with an empty document. Load failures surface as an error toast
+ * instead of silently rendering an empty (and autosave-armed) editor.
+ */
+export function useCompositionContentLoader({
+  projectId,
+  setEditingFile,
+  setActiveCompPath,
+  showToast,
+}: {
+  projectId: string | null;
+  setEditingFile: (file: { path: string; content: string | null }) => void;
+  setActiveCompPath: (path: string | null) => void;
+  showToast: (message: string, tone?: "error" | "info") => void;
+}) {
+  return useCallback(
+    (comp: string) => {
+      setActiveCompPath(comp.endsWith(".html") ? comp : null);
+      setEditingFile({ path: comp, content: null });
+      fetch(`/api/projects/${projectId}/files/${comp}`)
+        .then(async (r) => {
+          if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
+          return r.json();
+        })
+        .then((data: { content?: string }) => {
+          if (typeof data.content !== "string") throw new Error(`No content returned for ${comp}`);
+          setEditingFile({ path: comp, content: data.content });
+        })
+        .catch((err) => {
+          showToast(err instanceof Error ? err.message : `Failed to load ${comp}`, "error");
+        });
+    },
+    [projectId, setEditingFile, setActiveCompPath, showToast],
+  );
+}

package/src/hooks/useEditorSave.ts

@@ -18,6 +18,7 @@ interface UseEditorSaveOptions {
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
+  showToast: (message: string, tone?: "error" | "info") => void;
 }
 
 export function useEditorSave({
@@ -28,9 +29,13 @@ export function useEditorSave({
   recordEdit,
   domEditSaveTimestampRef,
   setRefreshKey,
+  showToast,
 }: UseEditorSaveOptions) {
   const saveRafRef = useRef<number | null>(null);
   const refreshRafRef = useRef<number | null>(null);
+  // One error toast per burst of failures — every keystroke retries the save,
+  // and error toasts persist until dismissed, so don't stack duplicates.
+  const lastFailureToastAtRef = useRef(0);
 
   const handleContentChange = useCallback(
     (content: string) => {
@@ -61,6 +66,14 @@ export function useEditorSave({
               source: "code_editor",
               error_message: error instanceof Error ? error.message : "unknown",
             });
+            const now = Date.now();
+            if (now - lastFailureToastAtRef.current > 5000) {
+              lastFailureToastAtRef.current = now;
+              showToast(
+                `Couldn't save ${path} — your latest edits are NOT persisted. Check the preview server; editing again retries the save.`,
+                "error",
+              );
+            }
           });
       });
     },
@@ -71,6 +84,7 @@ export function useEditorSave({
       readProjectFile,
       recordEdit,
       setRefreshKey,
+      showToast,
       writeProjectFile,
     ],
   );

package/src/hooks/useFileManager.ts

@@ -126,6 +126,7 @@ export function useFileManager({
     recordEdit,
     domEditSaveTimestampRef,
     setRefreshKey,
+    showToast,
   });
 
   // ── File select ──
@@ -133,26 +134,34 @@ export function useFileManager({
   const revealRequestIdRef = useRef(0);
   const revealAbortRef = useRef<AbortController | null>(null);
 
-  const handleFileSelect = useCallback((path: string) => {
-    const pid = projectIdRef.current;
-    if (!pid) return;
-    revealAbortRef.current?.abort();
-    revealAbortRef.current = null;
-    revealRequestIdRef.current++;
-    // Skip fetching binary content for media files — just set the path for preview
-    if (isMediaFile(path)) {
-      setEditingFile({ path, content: null });
-      return;
-    }
-    fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`)
-      .then((r) => r.json())
-      .then((data: { content?: string }) => {
-        if (data.content != null) {
-          setEditingFile({ path, content: data.content });
-        }
-      })
-      .catch(() => {});
-  }, []);
+  const handleFileSelect = useCallback(
+    (path: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      revealAbortRef.current?.abort();
+      revealAbortRef.current = null;
+      revealRequestIdRef.current++;
+      // Skip fetching binary content for media files — just set the path for preview
+      if (isMediaFile(path)) {
+        setEditingFile({ path, content: null });
+        return;
+      }
+      fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`)
+        .then((r) => {
+          if (!r.ok) throw new Error(`Failed to load ${path} (${r.status})`);
+          return r.json();
+        })
+        .then((data: { content?: string }) => {
+          if (data.content != null) {
+            setEditingFile({ path, content: data.content });
+          }
+        })
+        .catch((err: unknown) => {
+          showToast(err instanceof Error ? err.message : `Failed to load ${path}`, "error");
+        });
+    },
+    [showToast],
+  );
 
   // ── Click-to-source ──
 
@@ -253,9 +262,10 @@ export function useFileManager({
       } else {
         const err = await res.json().catch(() => ({ error: "unknown" }));
         console.error(`Create file failed: ${err.error}`);
+        showToast(`Couldn't create ${path}: ${err.error}`, "error");
       }
     },
-    [refreshFileTree, handleFileSelect],
+    [refreshFileTree, handleFileSelect, showToast],
   );
 
   const handleCreateFolder = useCallback(
@@ -275,9 +285,10 @@ export function useFileManager({
       } else {
         const err = await res.json().catch(() => ({ error: "unknown" }));
         console.error(`Create folder failed: ${err.error}`);
+        showToast(`Couldn't create folder ${path}: ${err.error}`, "error");
       }
     },
-    [refreshFileTree],
+    [refreshFileTree, showToast],
   );
 
   const handleDeleteFile = useCallback(
@@ -293,9 +304,10 @@ export function useFileManager({
       } else {
         const err = await res.json().catch(() => ({ error: "unknown" }));
         console.error(`Delete failed: ${err.error}`);
+        showToast(`Couldn't delete ${path}: ${err.error}`, "error");
       }
     },
-    [refreshFileTree],
+    [refreshFileTree, showToast],
   );
 
   const handleRenameFile = useCallback(
@@ -316,9 +328,10 @@ export function useFileManager({
       } else {
         const err = await res.json().catch(() => ({ error: "unknown" }));
         console.error(`Rename failed: ${err.error}`);
+        showToast(`Couldn't rename ${oldPath}: ${err.error}`, "error");
       }
     },
-    [refreshFileTree, handleFileSelect, setRefreshKey],
+    [refreshFileTree, handleFileSelect, setRefreshKey, showToast],
   );
 
   const handleDuplicateFile = useCallback(
@@ -337,9 +350,10 @@ export function useFileManager({
       } else {
         const err = await res.json().catch(() => ({ error: "unknown" }));
         console.error(`Duplicate failed: ${err.error}`);
+        showToast(`Couldn't duplicate ${path}: ${err.error}`, "error");
       }
     },
-    [refreshFileTree, handleFileSelect],
+    [refreshFileTree, handleFileSelect, showToast],
   );
 
   const handleMoveFile = handleRenameFile;