@hyperframes/studio 0.7.37 → 0.7.39

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/domSelectionTestHarness.ts

@@ -30,6 +30,7 @@ export function makeSelection(label: string, element: HTMLElement): DomEditSelec
     capabilities: {
       canSelect: true,
       canEditStyles: true,
+      canCrop: true,
       canMove: true,
       canResize: true,
       canApplyManualOffset: true,

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/useCropMode.ts

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useReducer } from "react";
+import { usePlayerStore } from "../player";
+
+export interface CropModeProps {
+  cropMode: boolean;
+  onCropModeChange: (active: boolean) => void;
+}
+
+/** Crop mode lives in the player store so the canvas toolbar, the Clip panel,
+ *  and the overlay all share one switch without prop threading. */
+export function useCropModeProps(): CropModeProps {
+  const cropMode = usePlayerStore((s) => s.cropMode);
+  const setCropMode = usePlayerStore((s) => s.setCropMode);
+  return useMemo(
+    () => ({
+      cropMode,
+      onCropModeChange: setCropMode,
+    }),
+    [cropMode, setCropMode],
+  );
+}
+
+import type { OverlayRect } from "../components/editor/domEditOverlayGeometry";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import { readElementCropInsets } from "../components/editor/domEditOverlayCrop";
+
+/** Overlay-side crop state: Escape-to-exit, toolbar availability publishing,
+ *  and the box clip that makes the selection outline hug the cropped region.
+ *  The box div itself always sits at the FULL element bounds — gestures write
+ *  its position directly during drags, so moving/resizing it in React would
+ *  fight them. The hug is purely visual: the element's inset clip-path scaled
+ *  into overlay space and applied to the box. */
+export function useCropOverlay(params: {
+  selection: DomEditSelection | null;
+  groupCount: number;
+  cropMode: boolean;
+  onCropModeChange?: (active: boolean) => void;
+  overlayRect: OverlayRect | null;
+}) {
+  const { selection, groupCount, cropMode, onCropModeChange, overlayRect } = params;
+
+  useEffect(() => {
+    if (!cropMode || !onCropModeChange) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onCropModeChange(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [cropMode, onCropModeChange]);
+
+  // Publish availability so the canvas toolbar shows the Crop button only
+  // when the selection can take a clip-path crop.
+  const setCropAvailable = usePlayerStore((s) => s.setCropAvailable);
+  const cropAvailable = Boolean(selection && groupCount <= 1 && selection.capabilities.canCrop);
+  useEffect(() => {
+    setCropAvailable(cropAvailable);
+    return () => setCropAvailable(false);
+  }, [cropAvailable, setCropAvailable]);
+
+  // Crop-mode exit restores the element's clip in an effect cleanup — after
+  // this hook already read it. One forced re-render picks up the fresh insets
+  // so the selection box hugs the crop immediately.
+  const [, bumpAfterExit] = useReducer((x: number) => x + 1, 0);
+  useEffect(() => {
+    if (!cropMode) bumpAfterExit();
+  }, [cropMode]);
+
+  const cropInsets = selection ? readElementCropInsets(selection.element) : null;
+  const hasCropInsets = Boolean(
+    cropInsets &&
+    (cropInsets.top > 0 || cropInsets.right > 0 || cropInsets.bottom > 0 || cropInsets.left > 0),
+  );
+
+  // Scaled insets for the crop outline child + the resize-handle shift. The
+  // box div itself stays border-less at full bounds; a child draws the
+  // outline ON the crop boundary (a clip on the box would swallow the
+  // border everywhere the crop edge doesn't touch the element edge).
+  const sx = overlayRect && overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
+  const sy = overlayRect && overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
+  const cropOutlineInsetPx =
+    cropInsets && hasCropInsets && !cropMode
+      ? {
+          top: cropInsets.top * sy,
+          right: cropInsets.right * sx,
+          bottom: cropInsets.bottom * sy,
+          left: cropInsets.left * sx,
+        }
+      : undefined;
+
+  return { hasCropInsets, cropOutlineInsetPx };
+}

package/src/hooks/useDomEditCommits.test.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
@@ -183,6 +184,7 @@ function createSelection(
     capabilities: {
       canSelect: true,
       canEditStyles: true,
+      canCrop: true,
       canMove: true,
       canResize: true,
       canApplyManualOffset: true,

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;

package/src/hooks/useFrameCapture.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, type MouseEvent } from "react";
+import { useState, useCallback, useRef, type MouseEvent } from "react";
 import { useMountEffect } from "./useMountEffect";
 import { liveTime, usePlayerStore } from "../player";
 import { buildFrameCaptureFilename, buildFrameCaptureUrl } from "../utils/frameCapture";
@@ -17,6 +17,8 @@ export function useFrameCapture({
   waitForPendingDomEditSaves,
 }: UseFrameCaptureParams) {
   const [captureFrameTime, setCaptureFrameTime] = useState(0);
+  const [capturing, setCapturing] = useState(false);
+  const capturingRef = useRef(false);
 
   useMountEffect(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
@@ -31,6 +33,11 @@ export function useFrameCapture({
     async (event: MouseEvent<HTMLAnchorElement>) => {
       if (!projectId) return;
       event.preventDefault();
+      // A capture can take up to ~35s (save drain + server render) — ignore
+      // re-entrant clicks instead of firing parallel captures.
+      if (capturingRef.current) return;
+      capturingRef.current = true;
+      setCapturing(true);
       try {
         const time = usePlayerStore.getState().currentTime;
         setCaptureFrameTime(time);
@@ -79,6 +86,9 @@ export function useFrameCapture({
         }
       } catch (err) {
         showToast(err instanceof Error ? err.message : "Capture failed", "error");
+      } finally {
+        capturingRef.current = false;
+        setCapturing(false);
       }
     },
     [activeCompPath, projectId, showToast, waitForPendingDomEditSaves],
@@ -98,5 +108,6 @@ export function useFrameCapture({
     captureFrameFilename,
     handleCaptureFrameClick,
     refreshCaptureFrameTime,
+    capturing,
   };
 }

package/src/hooks/usePanelLayout.ts

@@ -100,6 +100,7 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     leftWidth,
     setLeftWidth,
     rightWidth,
+    setRightWidth,
     leftCollapsed,
     setLeftCollapsed,
     rightCollapsed,

package/src/hooks/usePreviewPersistence.ts

@@ -8,6 +8,7 @@ import {
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { createDomEditSaveQueue } from "../utils/domEditSaveQueue";
+import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 
 // ── Types ──
@@ -77,6 +78,24 @@ function shouldReloadForStudioFileChange(
   return Date.now() - domEditSaveTimestampRef.current >= 4000;
 }
 
+// fallow-ignore-next-line complexity
+async function clearLegacyStudioMotionFile(
+  readOptionalProjectFile: (path: string) => Promise<string>,
+  writeProjectFile: (path: string, content: string) => Promise<void>,
+): Promise<void> {
+  const content = await readOptionalProjectFile(STUDIO_MOTION_PATH).catch(() => null);
+  if (!content) return;
+  try {
+    const parsed = JSON.parse(content) as { motions?: unknown[] };
+    if (!Array.isArray(parsed.motions) || parsed.motions.length === 0) return;
+  } catch {
+    return;
+  }
+  await writeProjectFile(STUDIO_MOTION_PATH, JSON.stringify({ version: 1, motions: [] })).catch(
+    () => {},
+  );
+}
+
 // ── Hook ──
 
 export function usePreviewPersistence({
@@ -135,6 +154,7 @@ export function usePreviewPersistence({
   }, []);
 
   const waitForPendingDomEditSaves = useCallback(async () => {
+    await flushStudioPendingEdits();
     await domEditSaveQueueRef.current?.waitForIdle();
   }, []);
 
@@ -185,20 +205,7 @@ export function usePreviewPersistence({
   // could still fire alongside the new seek-reapply runtime. Empty the file so
   // the legacy codepath no-ops.
   useMountEffect(() => {
-    _readOptionalProjectFile(STUDIO_MOTION_PATH)
-      .then((content) => {
-        if (!content) return;
-        try {
-          const parsed = JSON.parse(content) as { motions?: unknown[] };
-          if (!Array.isArray(parsed.motions) || parsed.motions.length === 0) return;
-        } catch {
-          return;
-        }
-        return _writeProjectFile(STUDIO_MOTION_PATH, JSON.stringify({ version: 1, motions: [] }));
-      })
-      .catch(() => {
-        /* best-effort migration — ignore failures */
-      });
+    void clearLegacyStudioMotionFile(_readOptionalProjectFile, _writeProjectFile);
   });
 
   // ── Listen for external file changes (HMR / SSE) ──
@@ -210,8 +217,10 @@ export function usePreviewPersistence({
           pendingTimelineEditPathRef,
           domEditSaveTimestampRef,
         )
-      )
+      ) {
+        // fallow-ignore-next-line code-duplication
         reloadPreview();
+      }
     };
     if (import.meta.hot) {
       import.meta.hot.on("hf:file-change", handler);

package/src/hooks/useStudioContextValue.ts

@@ -21,7 +21,12 @@ interface StudioContextInput {
   renderQueue: {
     jobs: unknown[];
     isRendering: boolean;
+    loadError: string | null;
+    actionError: string | null;
+    dismissActionError: () => void;
+    reloadRenders: () => void;
     deleteRender: (id: string) => void;
+    cancelRender: (id: string) => void;
     clearCompleted: () => void;
     startRender: (options: unknown) => Promise<void>;
   };