@hyperframes/studio 0.6.96 → 0.6.98

package/src/components/editor/DopesheetStrip.tsx

@@ -1,141 +0,0 @@
-import { memo, useCallback, useRef } from "react";
-
-interface DopesheetKeyframe {
-  percentage: number;
-  properties: Record<string, number | string>;
-  ease?: string;
-}
-
-interface DopesheetStripProps {
-  keyframes: DopesheetKeyframe[];
-  selectedPercentage: number | null;
-  currentPercentage: number;
-  accentColor?: string;
-  onSelectKeyframe: (percentage: number) => void;
-  onDragKeyframe?: (fromPct: number, toPct: number) => void;
-}
-
-const DIAMOND_SIZE = 8;
-const HALF = DIAMOND_SIZE / 2;
-const STRIP_HEIGHT = 20;
-const PADDING_X = 8;
-
-export const DopesheetStrip = memo(function DopesheetStrip({
-  keyframes,
-  selectedPercentage,
-  currentPercentage,
-  accentColor = "#3CE6AC",
-  onSelectKeyframe,
-  onDragKeyframe,
-}: DopesheetStripProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const dragRef = useRef<{ startX: number; startPct: number } | null>(null);
-
-  const sorted = keyframes.slice().sort((a, b) => a.percentage - b.percentage);
-
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent, pct: number) => {
-      if (e.button !== 0) return;
-      e.stopPropagation();
-      const startX = e.clientX;
-
-      const handleMove = (me: PointerEvent) => {
-        if (Math.abs(me.clientX - startX) > 4) {
-          dragRef.current = { startX, startPct: pct };
-        }
-      };
-
-      const handleUp = (ue: PointerEvent) => {
-        document.removeEventListener("pointermove", handleMove);
-        document.removeEventListener("pointerup", handleUp);
-        if (dragRef.current && containerRef.current && onDragKeyframe) {
-          const rect = containerRef.current.getBoundingClientRect();
-          const usableWidth = rect.width - PADDING_X * 2;
-          const dx = ue.clientX - dragRef.current.startX;
-          const dpct = (dx / usableWidth) * 100;
-          const newPct = Math.max(0, Math.min(100, Math.round((pct + dpct) * 10) / 10));
-          if (newPct !== pct) onDragKeyframe(pct, newPct);
-        } else {
-          onSelectKeyframe(pct);
-        }
-        dragRef.current = null;
-      };
-
-      document.addEventListener("pointermove", handleMove);
-      document.addEventListener("pointerup", handleUp);
-    },
-    [onSelectKeyframe, onDragKeyframe],
-  );
-
-  return (
-    <div
-      ref={containerRef}
-      className="relative w-full rounded-md bg-neutral-900/60 border border-neutral-800/50"
-      style={{ height: STRIP_HEIGHT }}
-    >
-      {/* Playhead indicator */}
-      <div
-        className="absolute top-0 bottom-0 w-px bg-white/30"
-        style={{
-          left: `${PADDING_X + (currentPercentage / 100) * (100 - PADDING_X * 2)}%`,
-          marginLeft: -0.5,
-        }}
-      />
-
-      {/* Diamond markers */}
-      <svg
-        className="absolute inset-0 w-full"
-        style={{ height: STRIP_HEIGHT }}
-        viewBox={`0 0 100 ${STRIP_HEIGHT}`}
-        preserveAspectRatio="none"
-      >
-        {sorted.map((kf) => {
-          const x = PADDING_X + (kf.percentage / 100) * (100 - PADDING_X * 2);
-          const y = STRIP_HEIGHT / 2;
-          const isSelected =
-            selectedPercentage !== null && Math.abs(kf.percentage - selectedPercentage) < 0.5;
-          const isHold = kf.ease === "steps(1)";
-          const fillColor = isSelected ? accentColor : "#737373";
-
-          return (
-            <g
-              key={kf.percentage}
-              onPointerDown={(e) => handlePointerDown(e, kf.percentage)}
-              style={{ cursor: "pointer" }}
-            >
-              {isHold ? (
-                <rect
-                  x={x - HALF}
-                  y={y - HALF}
-                  width={DIAMOND_SIZE}
-                  height={DIAMOND_SIZE}
-                  fill={fillColor}
-                />
-              ) : (
-                <rect
-                  x={x - HALF}
-                  y={y - HALF}
-                  width={DIAMOND_SIZE}
-                  height={DIAMOND_SIZE}
-                  fill={fillColor}
-                  transform={`rotate(45, ${x}, ${y})`}
-                />
-              )}
-            </g>
-          );
-        })}
-      </svg>
-
-      {/* Time labels */}
-      {sorted.length > 0 && (
-        <div
-          className="absolute bottom-0 left-0 right-0 flex justify-between px-2 text-[8px] text-neutral-600 pointer-events-none"
-          style={{ lineHeight: "10px" }}
-        >
-          <span>{sorted[0].percentage}%</span>
-          {sorted.length > 1 && <span>{sorted[sorted.length - 1].percentage}%</span>}
-        </div>
-      )}
-    </div>
-  );
-});

package/src/components/editor/StaggerControls.tsx

@@ -1,61 +0,0 @@
-import { memo, useState } from "react";
-import { MetricField } from "./propertyPanelPrimitives";
-
-export type StaggerOrder = "dom" | "reverse" | "center" | "edges" | "random";
-
-interface StaggerControlsProps {
-  elementCount: number;
-  onApplyStagger: (offsetMs: number, order: StaggerOrder) => void;
-}
-
-const ORDER_OPTIONS: StaggerOrder[] = ["dom", "reverse", "center", "edges", "random"];
-const ORDER_LABELS: Record<StaggerOrder, string> = {
-  dom: "DOM order",
-  reverse: "Reverse",
-  center: "Center out",
-  edges: "Edges in",
-  random: "Random",
-};
-
-export const StaggerControls = memo(function StaggerControls({
-  elementCount,
-  onApplyStagger,
-}: StaggerControlsProps) {
-  const [offsetMs, setOffsetMs] = useState(80);
-  const [order, setOrder] = useState<StaggerOrder>("dom");
-
-  if (elementCount < 2) return null;
-
-  return (
-    <div className="flex items-center gap-2 rounded-lg border border-neutral-800 bg-neutral-900/50 px-2 py-1.5">
-      <span className="text-[10px] font-medium text-neutral-500">Stagger</span>
-      <MetricField
-        label="Offset"
-        value={String(offsetMs)}
-        suffix="ms"
-        onCommit={(raw) => {
-          const v = Number.parseInt(raw, 10);
-          if (Number.isFinite(v) && v >= 0) setOffsetMs(v);
-        }}
-      />
-      <select
-        value={order}
-        onChange={(e) => setOrder(e.target.value as StaggerOrder)}
-        className="rounded-md border border-neutral-700 bg-neutral-900 px-1.5 py-1 text-[10px] text-neutral-200 outline-none"
-      >
-        {ORDER_OPTIONS.map((o) => (
-          <option key={o} value={o}>
-            {ORDER_LABELS[o]}
-          </option>
-        ))}
-      </select>
-      <button
-        type="button"
-        onClick={() => onApplyStagger(offsetMs, order)}
-        className="rounded-md bg-panel-accent/10 px-2 py-1 text-[10px] font-semibold text-panel-accent transition-colors hover:bg-panel-accent/20"
-      >
-        Apply ({elementCount})
-      </button>
-    </div>
-  );
-});

package/src/components/editor/TimelineLayerPanel.test.ts

@@ -1,42 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Window } from "happy-dom";
-import type { DomEditLayerItem } from "./domEditing";
-import { getTimelineLayerPanelSummary } from "./TimelineLayerPanel";
-
-function createLayer(overrides: Partial<DomEditLayerItem> = {}): DomEditLayerItem {
-  const window = new Window();
-  return {
-    childCount: 0,
-    depth: 0,
-    element: window.document.createElement(overrides.tagName ?? "div"),
-    key: "layer",
-    label: "Layer",
-    sourceFile: "index.html",
-    tagName: "div",
-    ...overrides,
-  };
-}
-
-describe("TimelineLayerPanel", () => {
-  it("describes a leaf media clip as a single selectable layer", () => {
-    expect(
-      getTimelineLayerPanelSummary([
-        createLayer({ key: "alpha-video", label: "Alpha Video", tagName: "video" }),
-      ]),
-    ).toBe("Single selectable media layer");
-  });
-
-  it("describes real nested layers with the nested count", () => {
-    expect(
-      getTimelineLayerPanelSummary([
-        createLayer({ key: "root", childCount: 2 }),
-        createLayer({ key: "title", depth: 1 }),
-        createLayer({ key: "subtitle", depth: 1 }),
-      ]),
-    ).toBe("2 nested selectable layers");
-  });
-
-  it("keeps empty layer lists explicit", () => {
-    expect(getTimelineLayerPanelSummary([])).toBe("No selectable layers");
-  });
-});

package/src/components/editor/TimelineLayerPanel.tsx

@@ -1,15 +0,0 @@
-import type { DomEditLayerItem } from "./domEditing";
-
-const MEDIA_LAYER_TAGS = new Set(["audio", "canvas", "img", "picture", "svg", "video"]);
-
-export function getTimelineLayerPanelSummary(layers: readonly DomEditLayerItem[]): string {
-  const childCount = Math.max(0, layers.length - 1);
-  if (childCount > 0) {
-    return `${childCount} nested selectable layer${childCount === 1 ? "" : "s"}`;
-  }
-  const layer = layers[0];
-  if (!layer) return "No selectable layers";
-  return MEDIA_LAYER_TAGS.has(layer.tagName.trim().toLowerCase())
-    ? "Single selectable media layer"
-    : "Single selectable layer";
-}

package/src/components/nle/TimelineEditorNotice.tsx

@@ -1,133 +0,0 @@
-import { TIMELINE_TOGGLE_SHORTCUT_LABEL } from "../../utils/timelineDiscovery";
-import { PlayheadIndicator } from "../../player/components/PlayheadIndicator";
-
-interface TimelineEditorNoticeProps {
-  onDismiss: () => void;
-}
-
-export function TimelineEditorNotice({ onDismiss }: TimelineEditorNoticeProps) {
-  return (
-    <aside
-      aria-live="polite"
-      className="pointer-events-none relative w-[320px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-white/10 bg-[#0f1115]/88 text-neutral-100 shadow-[0_18px_40px_rgba(0,0,0,0.3),0_4px_14px_rgba(0,0,0,0.18)] backdrop-blur-xl"
-    >
-      <style>{`
-        @keyframes hfTimelineNoticeClipNudge {
-          0%, 100% { transform: translate3d(0, 0, 0); }
-          20% { transform: translate3d(0, 0, 0); }
-          52% { transform: translate3d(12px, 0, 0); }
-          72% { transform: translate3d(12px, 0, 0); }
-          100% { transform: translate3d(0, 0, 0); }
-        }
-
-        @keyframes hfTimelineNoticePlayheadSweep {
-          0% { transform: translateX(0); opacity: 0; }
-          10% { opacity: 1; }
-          75% { opacity: 1; }
-          100% { transform: translateX(218px); opacity: 0; }
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .hf-timeline-notice-clip,
-          .hf-timeline-notice-playhead {
-            animation: none !important;
-          }
-        }
-      `}</style>
-
-      <button
-        type="button"
-        onClick={onDismiss}
-        aria-label="Dismiss timeline editor notice"
-        className="pointer-events-auto absolute right-3 top-3 z-10 flex h-7 w-7 items-center justify-center rounded-lg text-neutral-500 transition-colors duration-150 hover:bg-white/[0.06] hover:text-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-studio-accent/50"
-      >
-        <svg
-          width="11"
-          height="11"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2.25"
-          strokeLinecap="round"
-          aria-hidden="true"
-        >
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
-
-      <div className="flex items-start gap-3 px-4 py-3.5">
-        <div className="min-w-0 flex-1">
-          <div
-            aria-hidden="true"
-            className="mb-3 overflow-hidden rounded-[14px] bg-[#0d1117] p-2.5"
-          >
-            <div className="relative overflow-hidden rounded-[11px] bg-[#0f141c] px-2.5 pb-2 pt-1.5">
-              <div className="mb-1.5 flex items-center justify-between pl-6 pr-1 text-[8px] font-medium text-[#7f8796]">
-                <span>0:00</span>
-                <span>0:05</span>
-                <span>0:10</span>
-              </div>
-
-              <div className="pointer-events-none absolute inset-x-0 top-[18px] h-px bg-white/[0.04]" />
-              <div
-                className="hf-timeline-notice-playhead pointer-events-none absolute left-[31px] top-[18px] h-[70px] w-0"
-                style={{
-                  animation:
-                    "hfTimelineNoticePlayheadSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite",
-                }}
-              >
-                <PlayheadIndicator />
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                {[0, 1, 2].map((trackIndex) => (
-                  <div
-                    key={trackIndex}
-                    className="relative h-6 overflow-hidden rounded-[10px] bg-white/[0.035]"
-                  >
-                    <div className="absolute inset-y-0 left-[24px] w-px bg-white/[0.035]" />
-                    <div className="absolute inset-y-0 left-[100px] w-px bg-white/[0.035]" />
-                    <div className="absolute inset-y-0 left-[176px] w-px bg-white/[0.035]" />
-                  </div>
-                ))}
-              </div>
-
-              <div className="pointer-events-none absolute inset-x-0 top-[21px] h-[70px]">
-                <div className="absolute left-[34px] top-[3px] h-[18px] w-[56px] rounded-[9px] bg-white/[0.07]" />
-                <div
-                  className="hf-timeline-notice-clip absolute left-[82px] top-[27px] h-[18px] w-[110px] rounded-[9px] bg-studio-accent/18 ring-1 ring-inset ring-studio-accent/28"
-                  style={{
-                    animation:
-                      "hfTimelineNoticeClipNudge 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite",
-                  }}
-                />
-                <div className="absolute left-[52px] top-[51px] h-[18px] w-[72px] rounded-[9px] bg-white/[0.07]" />
-              </div>
-            </div>
-          </div>
-
-          <div className="min-w-0 pr-9">
-            <p className="text-[12px] font-semibold leading-none tracking-tight text-neutral-100">
-              Timeline editing is on
-            </p>
-            <p className="mt-1.5 text-[12px] leading-5 text-neutral-300">
-              Drag clips to move timing, use{" "}
-              <span className="font-mono text-[11px] text-studio-accent">Shift</span> + click to
-              edit a full clip range, and watch for resize handles only on clips Studio can patch
-              safely. Toggle the timeline with{" "}
-              <span className="rounded-md border border-white/8 bg-white/[0.04] px-1.5 py-0.5 font-mono text-[11px] text-studio-accent">
-                {TIMELINE_TOGGLE_SHORTCUT_LABEL}
-              </span>
-              .
-            </p>
-          </div>
-
-          <div className="mt-2 text-[10px] leading-none text-neutral-500">
-            Dismiss once and it stays hidden.
-          </div>
-        </div>
-      </div>
-    </aside>
-  );
-}

package/src/hooks/gsapRuntimePreview.ts

@@ -1,19 +0,0 @@
-export function previewKeyframeChange(
-  iframe: HTMLIFrameElement | null,
-  selector: string,
-  properties: Record<string, number | string>,
-): boolean {
-  if (!iframe?.contentWindow) return false;
-  try {
-    const gsap = (
-      iframe.contentWindow as unknown as {
-        gsap?: { set: (target: string, vars: Record<string, number | string>) => void };
-      }
-    ).gsap;
-    if (!gsap?.set) return false;
-    gsap.set(selector, properties);
-    return true;
-  } catch {
-    return false;
-  }
-}

package/src/player/components/timelineUtils.ts

@@ -1,211 +0,0 @@
-import { formatTime } from "../lib/time";
-import type { ZoomMode } from "../store/playerStore";
-
-/* ── Layout constants ─────────────────────────────────────────────── */
-export const GUTTER = 32;
-export const TRACK_H = 72;
-export const RULER_H = 24;
-export const CLIP_Y = 3;
-export const CLIP_HANDLE_W = 18;
-export const TIMELINE_SCROLL_BUFFER = 20;
-
-/* ── Tick Generation ────────────────────────────────────────────────── */
-function getMajorTickInterval(duration: number, pixelsPerSecond?: number): number {
-  const zoomIntervals = [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
-  if (Number.isFinite(pixelsPerSecond) && (pixelsPerSecond ?? 0) > 0) {
-    const targetMajorPx = 128;
-    return (
-      zoomIntervals.find((interval) => interval * (pixelsPerSecond ?? 0) >= targetMajorPx) ?? 600
-    );
-  }
-  const durationIntervals = [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60];
-  const target = duration / 6;
-  return durationIntervals.find((interval) => interval >= target) ?? 60;
-}
-
-function getMinorTickInterval(majorInterval: number, pixelsPerSecond?: number): number {
-  let interval = majorInterval / 2;
-  if (majorInterval >= 30) interval = majorInterval / 6;
-  else if (majorInterval >= 15) interval = majorInterval / 3;
-  else if (majorInterval >= 5) interval = majorInterval / 5;
-  else if (majorInterval >= 1) interval = majorInterval / 4;
-
-  if (
-    Number.isFinite(pixelsPerSecond) &&
-    (pixelsPerSecond ?? 0) > 0 &&
-    interval * (pixelsPerSecond ?? 0) < 20
-  ) {
-    return Math.max(0.25, majorInterval / 2);
-  }
-  return Math.max(0.25, interval);
-}
-
-export function generateTicks(
-  duration: number,
-  pixelsPerSecond?: number,
-): { major: number[]; minor: number[] } {
-  if (duration <= 0 || !Number.isFinite(duration) || duration > 7200)
-    return { major: [], minor: [] };
-  const majorInterval = getMajorTickInterval(duration, pixelsPerSecond);
-  const minorInterval = getMinorTickInterval(majorInterval, pixelsPerSecond);
-  const major: number[] = [];
-  const minor: number[] = [];
-  const maxTicks = 2000;
-  for (
-    let t = 0;
-    t <= duration + 0.001 && major.length + minor.length < maxTicks;
-    t += minorInterval
-  ) {
-    const rounded = Math.round(t * 100) / 100;
-    const isMajor =
-      Math.abs(rounded % majorInterval) < 0.01 ||
-      Math.abs((rounded % majorInterval) - majorInterval) < 0.01;
-    if (isMajor) major.push(rounded);
-    else minor.push(rounded);
-  }
-  return { major, minor };
-}
-
-export function formatTimelineTickLabel(time: number, duration: number, majorInterval: number) {
-  if (!Number.isFinite(time)) return "0:00";
-  const safeTime = Math.max(0, time);
-  if (majorInterval < 1) {
-    const totalTenths = Math.round(safeTime * 10);
-    const wholeSeconds = Math.floor(totalTenths / 10);
-    const tenth = totalTenths % 10;
-    return `${formatTime(wholeSeconds)}.${tenth}`;
-  }
-  if (duration >= 3600 || safeTime >= 3600) {
-    const totalSeconds = Math.floor(safeTime);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-  }
-  return formatTime(safeTime);
-}
-
-export function shouldAutoScrollTimeline(
-  zoomMode: ZoomMode,
-  scrollWidth: number,
-  clientWidth: number,
-): boolean {
-  if (zoomMode === "fit") return false;
-  if (!Number.isFinite(scrollWidth) || !Number.isFinite(clientWidth)) return false;
-  return scrollWidth - clientWidth > 1;
-}
-
-export function getTimelineScrollLeftForZoomTransition(
-  previousZoomMode: ZoomMode | null,
-  nextZoomMode: ZoomMode,
-  currentScrollLeft: number,
-): number {
-  if (previousZoomMode === "manual" && nextZoomMode === "fit") return 0;
-  return currentScrollLeft;
-}
-
-export function getTimelineScrollLeftForZoomAnchor(input: {
-  pointerX: number;
-  currentScrollLeft: number;
-  gutter: number;
-  currentPixelsPerSecond: number;
-  nextPixelsPerSecond: number;
-  duration: number;
-}): number {
-  const currentPps = Math.max(0, input.currentPixelsPerSecond);
-  const nextPps = Math.max(0, input.nextPixelsPerSecond);
-  if (
-    !Number.isFinite(input.pointerX) ||
-    !Number.isFinite(input.currentScrollLeft) ||
-    !Number.isFinite(input.duration) ||
-    input.duration <= 0 ||
-    currentPps <= 0 ||
-    nextPps <= 0
-  ) {
-    return Math.max(0, input.currentScrollLeft);
-  }
-  const timelineX = Math.max(0, input.currentScrollLeft + input.pointerX - input.gutter);
-  const timeAtPointer = Math.max(0, Math.min(input.duration, timelineX / currentPps));
-  return Math.max(0, input.gutter + timeAtPointer * nextPps - input.pointerX);
-}
-
-export function getTimelinePlayheadLeft(time: number, pixelsPerSecond: number): number {
-  if (!Number.isFinite(time) || !Number.isFinite(pixelsPerSecond)) return GUTTER;
-  return GUTTER + Math.max(0, time) * Math.max(0, pixelsPerSecond);
-}
-
-export function getTimelineCanvasHeight(trackCount: number): number {
-  return RULER_H + Math.max(0, trackCount) * TRACK_H + TIMELINE_SCROLL_BUFFER;
-}
-
-export function shouldShowTimelineShortcutHint(
-  scrollHeight: number,
-  clientHeight: number,
-): boolean {
-  if (!Number.isFinite(scrollHeight) || !Number.isFinite(clientHeight)) return true;
-  return scrollHeight - clientHeight <= 1;
-}
-
-export function shouldHandleTimelineDeleteKey(input: {
-  key: string;
-  metaKey?: boolean;
-  ctrlKey?: boolean;
-  altKey?: boolean;
-  target?: EventTarget | null;
-}): boolean {
-  if (input.key !== "Delete" && input.key !== "Backspace") return false;
-  if (input.metaKey || input.ctrlKey || input.altKey) return false;
-  const target =
-    input.target && typeof input.target === "object"
-      ? (input.target as {
-          tagName?: string;
-          isContentEditable?: boolean;
-          closest?: (selector: string) => Element | null;
-        })
-      : null;
-  if (target) {
-    const tag = target.tagName?.toLowerCase() ?? "";
-    if (target.isContentEditable) return false;
-    if (["input", "textarea", "select"].includes(tag)) return false;
-    if (typeof target.closest === "function" && target.closest("[contenteditable='true']")) {
-      return false;
-    }
-  }
-  return true;
-}
-
-export function getDefaultDroppedTrack(trackOrder: number[], rowIndex?: number): number {
-  if (trackOrder.length === 0) return 0;
-  if (rowIndex == null || rowIndex < 0) return trackOrder[0];
-  if (rowIndex >= trackOrder.length) {
-    return Math.max(...trackOrder) + 1;
-  }
-  return trackOrder[rowIndex] ?? trackOrder[trackOrder.length - 1] ?? 0;
-}
-
-export function resolveTimelineAssetDrop(
-  input: {
-    rectLeft: number;
-    rectTop: number;
-    scrollLeft: number;
-    scrollTop: number;
-    pixelsPerSecond: number;
-    duration: number;
-    trackHeight: number;
-    trackOrder: number[];
-  },
-  clientX: number,
-  clientY: number,
-): { start: number; track: number } {
-  const x = clientX - input.rectLeft + input.scrollLeft - GUTTER;
-  const y = clientY - input.rectTop + input.scrollTop - RULER_H;
-  const start = Math.max(
-    0,
-    Math.min(input.duration, Math.round((x / Math.max(input.pixelsPerSecond, 1)) * 100) / 100),
-  );
-  const rowIndex = Math.floor(y / Math.max(input.trackHeight, 1));
-  return {
-    start,
-    track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
-  };
-}

package/src/utils/audioBeatDetection.ts

@@ -1,58 +0,0 @@
-const WINDOW_SIZE = 1024;
-const HOP_SIZE = 512;
-
-// fallow-ignore-next-line complexity
-export async function detectBeats(audioBuffer: AudioBuffer): Promise<number[]> {
-  const channelData = audioBuffer.getChannelData(0);
-  const sampleRate = audioBuffer.sampleRate;
-
-  const energies: number[] = [];
-  for (let i = 0; i < channelData.length - WINDOW_SIZE; i += HOP_SIZE) {
-    let sum = 0;
-    for (let j = 0; j < WINDOW_SIZE; j++) {
-      const sample = channelData[i + j]!;
-      sum += sample * sample;
-    }
-    energies.push(sum / WINDOW_SIZE);
-  }
-
-  const beats: number[] = [];
-  const localWindowSize = 20;
-
-  for (let i = localWindowSize; i < energies.length - localWindowSize; i++) {
-    let localMean = 0;
-    for (let j = i - localWindowSize; j < i + localWindowSize; j++) {
-      localMean += energies[j]!;
-    }
-    localMean /= localWindowSize * 2;
-
-    const threshold = localMean * 1.5;
-    const current = energies[i]!;
-
-    if (
-      current > threshold &&
-      current > (energies[i - 1] ?? 0) &&
-      current > (energies[i + 1] ?? 0)
-    ) {
-      const timeInSeconds = (i * HOP_SIZE) / sampleRate;
-      if (beats.length === 0 || timeInSeconds - beats[beats.length - 1]! > 0.1) {
-        beats.push(Math.round(timeInSeconds * 1000) / 1000);
-      }
-    }
-  }
-
-  return beats;
-}
-
-// fallow-ignore-next-line complexity
-export async function detectBeatsFromUrl(url: string): Promise<number[]> {
-  const audioContext = new AudioContext();
-  try {
-    const response = await fetch(url);
-    const arrayBuffer = await response.arrayBuffer();
-    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-    return detectBeats(audioBuffer);
-  } finally {
-    await audioContext.close();
-  }
-}