hyperframes/packages/studio/src/hooks/useKeyframeKeyboard.ts

import { useEffect, useCallback } from "react";
import { usePlayerStore } from "../player/store/playerStore";

interface KeyframeKeyboardOptions {
  enabled: boolean;
  onAddKeyframe?: () => void;
  onDeleteKeyframe?: () => void;
  onPrevKeyframe?: () => void;
  onNextKeyframe?: () => void;
  onToggleHold?: () => void;
  onToggleExpand?: () => void;
  onNudgeKeyframe?: (direction: -1 | 1, large: boolean) => void;
}

function isTextInput(el: Element | null): boolean {
  if (!el) return false;
  const tag = el.tagName;
  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
  return (el as HTMLElement).isContentEditable === true;
}

export function useKeyframeKeyboard({
  enabled,
  onAddKeyframe,
  onDeleteKeyframe,
  onPrevKeyframe,
  onNextKeyframe,
  onToggleHold,
  onToggleExpand,
  onNudgeKeyframe,
}: KeyframeKeyboardOptions): void {
  const handler = useCallback(
    (e: KeyboardEvent) => {
      if (!enabled) return;
      if (isTextInput(document.activeElement)) return;

      const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;

      switch (e.key.toLowerCase()) {
        case "k":
          if (!e.metaKey && !e.ctrlKey) {
            e.preventDefault();
            onAddKeyframe?.();
          }
          break;
        case "delete":
        case "backspace":
          if (hasSelectedKeyframes) {
            e.preventDefault();
            onDeleteKeyframe?.();
          }
          break;
        case "j":
          if (!e.metaKey && !e.ctrlKey) {
            e.preventDefault();
            if (e.shiftKey) onNextKeyframe?.();
            else onPrevKeyframe?.();
          }
          break;
        case "h":
          if (!e.metaKey && !e.ctrlKey && hasSelectedKeyframes) {
            e.preventDefault();
            onToggleHold?.();
          }
          break;
        case "u":
          if (!e.metaKey && !e.ctrlKey) {
            e.preventDefault();
            onToggleExpand?.();
          }
          break;
        case "arrowleft":
          if (hasSelectedKeyframes && !e.metaKey && !e.ctrlKey && !e.altKey) {
            e.preventDefault();
            onNudgeKeyframe?.(-1, e.shiftKey);
          }
          break;
        case "arrowright":
          if (hasSelectedKeyframes && !e.metaKey && !e.ctrlKey && !e.altKey) {
            e.preventDefault();
            onNudgeKeyframe?.(1, e.shiftKey);
          }
          break;
      }
    },
    [
      enabled,
      onAddKeyframe,
      onDeleteKeyframe,
      onPrevKeyframe,
      onNextKeyframe,
      onToggleHold,
      onToggleExpand,
      onNudgeKeyframe,
    ],
  );

  useEffect(() => {
    if (!enabled) return;
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [enabled, handler]);
}