@hyperframes/studio 0.4.16 → 0.4.18

package/src/components/nle/NLELayout.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useEffect, memo, type ReactNode } from "
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
+import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { NLEPreview } from "./NLEPreview";
 import { CompositionBreadcrumb, type CompositionLevel } from "./CompositionBreadcrumb";
 
@@ -27,6 +28,15 @@ interface NLELayoutProps {
     element: TimelineElement,
     style: { clip: string; label: string },
   ) => ReactNode;
+  onFileDrop?: (
+    files: File[],
+    placement?: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
+  onAssetDrop?: (
+    assetPath: string,
+    placement: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
   /** Persist timeline move actions back into source HTML */
   onMoveElement?: (
     element: TimelineElement,
@@ -36,6 +46,7 @@ interface NLELayoutProps {
     element: TimelineElement,
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
+  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -59,8 +70,12 @@ export const NLELayout = memo(function NLELayout({
   onIframeRef,
   onCompositionChange,
   renderClipContent,
+  onFileDrop,
+  onDeleteElement,
+  onAssetDrop,
   onMoveElement,
   onResizeElement,
+  onBlockedEditAttempt,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -390,8 +405,12 @@ export const NLELayout = memo(function NLELayout({
                 onSeek={seek}
                 onDrillDown={handleDrillDown}
                 renderClipContent={renderClipContent}
+                onFileDrop={onFileDrop}
+                onDeleteElement={onDeleteElement}
+                onAssetDrop={onAssetDrop}
                 onMoveElement={onMoveElement}
                 onResizeElement={onResizeElement}
+                onBlockedEditAttempt={onBlockedEditAttempt}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/components/nle/TimelineEditorNotice.tsx

@@ -0,0 +1,156 @@
+import { TIMELINE_TOGGLE_SHORTCUT_LABEL } from "../../utils/timelineDiscovery";
+
+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",
+                }}
+              >
+                <div
+                  className="absolute top-0 bottom-0"
+                  style={{
+                    left: "50%",
+                    width: 2,
+                    marginLeft: -1,
+                    background: "var(--hf-accent, #3CE6AC)",
+                    boxShadow: "0 0 8px rgba(60,230,172,0.5)",
+                  }}
+                />
+                <div
+                  className="absolute"
+                  style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}
+                >
+                  <div
+                    style={{
+                      width: 0,
+                      height: 0,
+                      borderLeft: "6px solid transparent",
+                      borderRight: "6px solid transparent",
+                      borderTop: "8px solid var(--hf-accent, #3CE6AC)",
+                      filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
+                    }}
+                  />
+                </div>
+              </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/components/sidebar/AssetsTab.tsx

@@ -1,6 +1,7 @@
 import { memo, useState, useCallback, useRef } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../../utils/mediaTypes";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
 
 interface AssetsTabProps {
   projectId: string;
@@ -106,7 +107,13 @@ function AssetCard({
   return (
     <>
       <div
+        draggable
         onClick={() => onCopy(asset)}
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = "copy";
+          e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+          e.dataTransfer.setData("text/plain", asset);
+        }}
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu({ x: e.clientX, y: e.clientY });

package/src/components/sidebar/CompositionsTab.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { resolveCompositionPreviewScale } from "./CompositionsTab";
+
+describe("resolveCompositionPreviewScale", () => {
+  it("scales a 16:9 stage to fit the composition card", () => {
+    expect(
+      resolveCompositionPreviewScale({
+        cardWidth: 80,
+        cardHeight: 45,
+        stageWidth: 1920,
+        stageHeight: 1080,
+      }),
+    ).toBeCloseTo(80 / 1920);
+  });
+
+  it("scales non-16:9 stages against their actual dimensions", () => {
+    expect(
+      resolveCompositionPreviewScale({
+        cardWidth: 80,
+        cardHeight: 45,
+        stageWidth: 1280,
+        stageHeight: 720,
+      }),
+    ).toBeCloseTo(80 / 1280);
+  });
+
+  it("falls back to the default stage when dimensions are invalid", () => {
+    expect(
+      resolveCompositionPreviewScale({
+        cardWidth: 80,
+        cardHeight: 45,
+        stageWidth: 0,
+        stageHeight: Number.NaN,
+      }),
+    ).toBeCloseTo(80 / 1920);
+  });
+});

package/src/components/sidebar/CompositionsTab.tsx

@@ -7,6 +7,27 @@ interface CompositionsTabProps {
   onSelect: (comp: string) => void;
 }
 
+const DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
+
+export function resolveCompositionPreviewScale(input: {
+  cardWidth: number;
+  cardHeight: number;
+  stageWidth: number;
+  stageHeight: number;
+}): number {
+  const safeStageWidth =
+    Number.isFinite(input.stageWidth) && input.stageWidth > 0
+      ? input.stageWidth
+      : DEFAULT_PREVIEW_STAGE.width;
+  const safeStageHeight =
+    Number.isFinite(input.stageHeight) && input.stageHeight > 0
+      ? input.stageHeight
+      : DEFAULT_PREVIEW_STAGE.height;
+  const scaleX = input.cardWidth / safeStageWidth;
+  const scaleY = input.cardHeight / safeStageHeight;
+  return Math.min(scaleX, scaleY);
+}
+
 function CompCard({
   projectId,
   comp,
@@ -19,6 +40,7 @@ function CompCard({
   onSelect: () => void;
 }) {
   const [hovered, setHovered] = useState(false);
+  const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handleEnter = () => {
     hoverTimer.current = setTimeout(() => setHovered(true), 300);
@@ -33,6 +55,12 @@ function CompCard({
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=2`;
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
+  const previewScale = resolveCompositionPreviewScale({
+    cardWidth: 80,
+    cardHeight: 45,
+    stageWidth: stageSize.width,
+    stageHeight: stageSize.height,
+  });
 
   return (
     <div
@@ -51,10 +79,25 @@ function CompCard({
           <iframe
             src={previewUrl}
             sandbox="allow-scripts allow-same-origin"
-            className="absolute inset-0 w-[1920px] h-[1080px] border-none pointer-events-none"
+            className="absolute left-0 top-0 border-none pointer-events-none"
             style={{
               transformOrigin: "0 0",
-              transform: `scale(${80 / 1920})`,
+              width: stageSize.width,
+              height: stageSize.height,
+              transform: `scale(${previewScale})`,
+            }}
+            onLoad={(e) => {
+              try {
+                const iframe = e.currentTarget;
+                const root = iframe.contentDocument?.querySelector("[data-composition-id]");
+                const width =
+                  Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
+                const height =
+                  Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
+                setStageSize({ width, height });
+              } catch {
+                setStageSize(DEFAULT_PREVIEW_STAGE);
+              }
             }}
             tabIndex={-1}
           />

package/src/player/components/Timeline.test.ts

@@ -1,8 +1,12 @@
 import { describe, it, expect } from "vitest";
 import {
   generateTicks,
+  getDefaultDroppedTrack,
+  getTimelineCanvasHeight,
+  resolveTimelineAssetDrop,
   getTimelinePlayheadLeft,
   getTimelineScrollLeftForZoomTransition,
+  shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
 import { formatTime } from "../lib/time";
@@ -151,3 +155,83 @@ describe("getTimelinePlayheadLeft", () => {
     expect(getTimelinePlayheadLeft(4, Number.NaN)).toBe(32);
   });
 });
+
+describe("getTimelineCanvasHeight", () => {
+  it("includes bottom scroll buffer below the last track", () => {
+    expect(getTimelineCanvasHeight(3)).toBeGreaterThan(24 + 3 * 72);
+  });
+
+  it("still keeps ruler space when there are no tracks", () => {
+    expect(getTimelineCanvasHeight(0)).toBeGreaterThan(24);
+  });
+});
+
+describe("shouldHandleTimelineDeleteKey", () => {
+  it("handles Delete and Backspace when focus is not in an editor", () => {
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);
+    expect(shouldHandleTimelineDeleteKey({ key: "Backspace" })).toBe(true);
+  });
+
+  it("ignores modifier shortcuts", () => {
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete", metaKey: true })).toBe(false);
+    expect(shouldHandleTimelineDeleteKey({ key: "Backspace", ctrlKey: true })).toBe(false);
+  });
+
+  it("ignores input and editable targets", () => {
+    const input = { tagName: "INPUT", isContentEditable: false };
+    const editable = { tagName: "DIV", isContentEditable: true };
+
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: input })).toBe(false);
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: editable })).toBe(false);
+  });
+});
+
+describe("getDefaultDroppedTrack", () => {
+  it("defaults to track 0 when there are no rows yet", () => {
+    expect(getDefaultDroppedTrack([])).toBe(0);
+  });
+
+  it("creates a new bottom track when dropped below existing rows", () => {
+    expect(getDefaultDroppedTrack([0, 1, 5], 10)).toBe(6);
+  });
+});
+
+describe("resolveTimelineAssetDrop", () => {
+  it("maps drop coordinates to a start time and visible track", () => {
+    expect(
+      resolveTimelineAssetDrop(
+        {
+          rectLeft: 100,
+          rectTop: 200,
+          scrollLeft: 0,
+          scrollTop: 0,
+          pixelsPerSecond: 100,
+          duration: 10,
+          trackHeight: 72,
+          trackOrder: [0, 3, 7],
+        },
+        432,
+        310,
+      ),
+    ).toEqual({ start: 3, track: 3 });
+  });
+
+  it("can create a new bottom track when dropped below the last visible row", () => {
+    expect(
+      resolveTimelineAssetDrop(
+        {
+          rectLeft: 100,
+          rectTop: 200,
+          scrollLeft: 0,
+          scrollTop: 0,
+          pixelsPerSecond: 100,
+          duration: 10,
+          trackHeight: 72,
+          trackOrder: [0, 3, 7],
+        },
+        250,
+        600,
+      ),
+    ).toEqual({ start: 1.18, track: 8 });
+  });
+});