@hyperframes/studio 0.7.55 → 0.7.57

package/src/components/sidebar/AudioRow.tsx

@@ -2,6 +2,10 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { ContextMenu } from "./AssetContextMenu";
 import { basename, getAudioSubtype } from "./assetHelpers";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
+import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
+import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
 
 export function AudioRow({
   projectId,
@@ -12,6 +16,7 @@ export function AudioRow({
   isCopied,
   onDelete,
   onRename,
+  onAddAssetToTimeline,
 }: {
   projectId: string;
   asset: string;
@@ -21,6 +26,7 @@ export function AudioRow({
   isCopied: boolean;
   onDelete?: (path: string) => void;
   onRename?: (oldPath: string, newPath: string) => void;
+  onAddAssetToTimeline?: (path: string) => void;
 }) {
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
   const [playing, setPlaying] = useState(false);
@@ -32,7 +38,53 @@ export function AudioRow({
   const animRef = useRef<number>(0);
   const name = basename(asset);
   const subtype = getAudioSubtype(asset);
-  const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
+  const serveUrl = resolveMediaPreviewUrl(asset, projectId);
+
+  // CapCut-style click behavior: drag-threshold gate.
+  const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
+  const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
+  const requestClipReveal = usePlayerStore((s) => s.requestClipReveal);
+  const elements = usePlayerStore((s) => s.elements);
+  const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
+  const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    pointerDownRef.current = { x: e.clientX, y: e.clientY };
+  }, []);
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      const origin = pointerDownRef.current;
+      pointerDownRef.current = null;
+      if (!origin) return;
+      if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
+      if (used) {
+        const clip = findClipForAsset(elements, asset);
+        if (clip) {
+          // Dismiss any open preview overlay (from another asset) — the reveal
+          // must not leave a stale preview card floating over the canvas.
+          clearPreviewAsset();
+          const clipKey = clip.key ?? clip.id;
+          setSelectedElementId(clipKey);
+          // Scroll the timeline so the selected clip is actually visible.
+          requestClipReveal(clipKey);
+          return;
+        }
+      }
+      // Not added → preview overlay (audio player)
+      setPreviewAsset(asset, projectId);
+    },
+    [
+      used,
+      elements,
+      asset,
+      projectId,
+      setSelectedElementId,
+      requestClipReveal,
+      setPreviewAsset,
+      clearPreviewAsset,
+    ],
+  );
 
   useEffect(() => {
     return () => {
@@ -109,7 +161,8 @@ export function AudioRow({
     <>
       <div
         draggable
-        onClick={() => onCopy(asset)}
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
         onDragStart={(e) => {
           e.dataTransfer.effectAllowed = "copy";
           e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
@@ -195,6 +248,7 @@ export function AudioRow({
           onCopy={onCopy}
           onDelete={onDelete}
           onRename={onRename}
+          onAddAtPlayhead={onAddAssetToTimeline}
         />
       )}
     </>

package/src/components/sidebar/BlocksTab.tsx

@@ -10,6 +10,7 @@ import {
 import { usePlayerStore } from "../../player";
 import { formatTime } from "../../player/lib/time";
 import { useStudioShellContext } from "../../contexts/StudioContext";
+import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 export interface BlockPreviewInfo {
   videoUrl?: string;
   posterUrl?: string;
@@ -383,10 +384,16 @@ function BlockCard({
   return (
     <div
       className="group/card rounded-md overflow-hidden cursor-pointer transition-colors bg-neutral-900 hover:bg-neutral-800"
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.effectAllowed = "copy";
+        e.dataTransfer.setData(TIMELINE_BLOCK_MIME, JSON.stringify({ name }));
+        e.dataTransfer.setData("text/plain", name);
+        handleLeave(); // cancel the hover-preview timer so it doesn't fire mid-drag
+      }}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
     >
-      {/* Thumbnail */}
       <div className="aspect-video w-full overflow-hidden relative">
         {hovered && videoUrl ? (
           <video

package/src/components/sidebar/LeftSidebar.tsx

@@ -60,6 +60,7 @@ interface LeftSidebarProps {
   onAddBlock?: (blockName: string) => void;
   onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
   takeoverContent?: ReactNode;
+  onAddAssetToTimeline?: (path: string) => void;
 }
 
 export const LeftSidebar = memo(
@@ -92,6 +93,7 @@ export const LeftSidebar = memo(
       onAddBlock,
       onPreviewBlock,
       takeoverContent,
+      onAddAssetToTimeline,
     },
     ref,
   ) {
@@ -111,7 +113,7 @@ export const LeftSidebar = memo(
 
     return (
       <div
-        className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
+        className="flex flex-col h-full overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
         style={{ width }}
       >
         {takeoverContent ? (
@@ -230,6 +232,7 @@ export const LeftSidebar = memo(
                 onImport={onImportFiles}
                 onDelete={onDeleteFile}
                 onRename={onRenameFile}
+                onAddAssetToTimeline={onAddAssetToTimeline}
               />
             )}
             {tab === "code" && (

package/src/components/sidebar/assetHelpers.ts

@@ -30,6 +30,35 @@ export function ext(path: string): string {
   return dot > 0 ? name.slice(dot + 1).toUpperCase() : "";
 }
 
+/**
+ * Truncate a string to at most `maxLen` chars, preserving the start and end.
+ * Middle characters are replaced with an ellipsis. If the string is short
+ * enough it is returned unchanged.
+ *
+ * @example truncateMiddle("2a37eabf-long-uuid-887d8.mp4", 20) → "2a37eabf-…887d8.mp4"
+ *
+ * Pure — unit-tested.
+ */
+export function truncateMiddle(str: string, maxLen: number): string {
+  if (str.length <= maxLen) return str;
+  const keep = maxLen - 1; // 1 char for ellipsis
+  const tail = Math.floor(keep / 3);
+  const head = keep - tail;
+  return str.slice(0, head) + "…" + str.slice(str.length - tail);
+}
+
+/**
+ * Format a duration in seconds as MM:SS. Returns an empty string for
+ * non-positive, NaN, or Infinity values. Pure — unit-tested.
+ */
+export function formatDuration(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "";
+  const total = Math.round(seconds);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
 export const CATEGORY_LABELS: Record<MediaCategory, string> = {
   audio: "Audio",
   images: "Images",

package/src/contexts/DomEditContext.tsx

@@ -98,6 +98,15 @@ export function useDomEditActionsContext(): DomEditActionsValue {
   return ctx;
 }
 
+/**
+ * Optional access — returns null outside a provider. Lets the player-package
+ * <Timeline> (a public standalone export) reach the z-order persist path when
+ * embedded in the NLE without hard-requiring the provider in standalone/test mounts.
+ */
+export function useDomEditActionsContextOptional(): DomEditActionsValue | null {
+  return useContext(DomEditActionsContext);
+}
+
 export function useDomEditSelectionContext(): DomEditSelectionValue {
   const ctx = useContext(DomEditSelectionContext);
   if (!ctx) throw new Error("useDomEditSelectionContext must be used within DomEditProvider");

package/src/contexts/StudioContext.tsx

@@ -31,8 +31,6 @@ export interface StudioShellValue {
   compositionDimensions: CompositionDimensions | null;
   waitForPendingDomEditSaves: () => Promise<void>;
   handlePreviewIframeRef: (iframe: HTMLIFrameElement | null) => void;
-  timelineVisible: boolean;
-  toggleTimelineVisibility: () => void;
 }
 
 export interface StudioPlaybackValue {
@@ -56,6 +54,15 @@ export function useStudioShellContext(): StudioShellValue {
   return ctx;
 }
 
+/**
+ * Optional access — returns null outside a provider. Lets the player-package
+ * <Timeline> (a public standalone export) read shell state when embedded in the
+ * NLE without hard-requiring the provider in standalone/test mounts.
+ */
+export function useStudioShellContextOptional(): StudioShellValue | null {
+  return useContext(StudioShellContext);
+}
+
 export function useStudioPlaybackContext(): StudioPlaybackValue {
   const ctx = useContext(StudioPlaybackContext);
   if (!ctx) throw new Error("useStudioPlaybackContext must be used within StudioPlaybackProvider");
@@ -90,8 +97,6 @@ export function StudioShellProvider({
     compositionDimensions,
     waitForPendingDomEditSaves,
     handlePreviewIframeRef,
-    timelineVisible,
-    toggleTimelineVisibility,
   } = value;
 
   const stable = useMemo<StudioShellValue>(
@@ -108,14 +113,11 @@ export function StudioShellProvider({
       compositionDimensions,
       waitForPendingDomEditSaves,
       handlePreviewIframeRef,
-      timelineVisible,
-      toggleTimelineVisibility,
     }),
     [
       projectId,
       activeCompPath,
       compositionDimensions,
-      timelineVisible,
       editHistory,
       renderQueue,
       setActiveCompPath,
@@ -125,7 +127,6 @@ export function StudioShellProvider({
       handleRedo,
       waitForPendingDomEditSaves,
       handlePreviewIframeRef,
-      toggleTimelineVisibility,
     ],
   );
   return <StudioShellContext value={stable}>{children}</StudioShellContext>;

package/src/contexts/TimelineEditContext.tsx

@@ -10,7 +10,7 @@ export function useTimelineEditContext(): TimelineEditCallbacks {
 }
 
 /**
- * Optional access, returns an empty object when outside a provider.
+ * Optional access — returns an empty object when outside a provider.
  * Useful in components that can render both inside and outside the NLE.
  */
 export function useTimelineEditContextOptional(): TimelineEditCallbacks {
@@ -26,18 +26,14 @@ export function TimelineEditProvider({
 }) {
   const memoized = useMemo(
     () => value,
-    // Each callback is a stable reference from the parent, memoize the bag
+    // Each callback is a stable reference from the parent — memoize the bag
     // so consumers don't re-render when unrelated parent state changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       value.onMoveElement,
-      value.onResizeElement,
       value.onMoveElements,
-      value.onResizeElements,
-      value.onPreviewMoveElements,
-      value.onPreviewResizeElements,
+      value.onResizeElement,
       value.onToggleTrackHidden,
-      value.onToggleElementHidden,
       value.onBlockedEditAttempt,
       value.onSplitElement,
       value.onRazorSplit,

package/src/hooks/deleteSelectedKeyframes.ts

@@ -0,0 +1,35 @@
+import { usePlayerStore } from "../player/store/playerStore";
+import { selectedKeyframePercentagesForElement } from "../utils/keyframeSelection";
+import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
+
+let deleteKeyframesCommitCounter = 0;
+
+/**
+ * Remove the keyframes currently selected in the player store from the active
+ * element's GSAP animation. Reads selection lazily so it stays correct when
+ * invoked from a ref callback.
+ */
+export function deleteSelectedKeyframes(session: {
+  selectedGsapAnimations: readonly { id: string; keyframes?: unknown }[];
+  handleGsapRemoveKeyframe: (
+    animId: string,
+    pct: number,
+    options?: Partial<CommitMutationOptions>,
+  ) => void;
+}): void {
+  const { selectedKeyframes, selectedElementId } = usePlayerStore.getState();
+  const animation = session.selectedGsapAnimations.find((anim) => anim.keyframes);
+  if (!animation) return;
+  // Only the active element's keyframes; a stale cross-element selection must not delete here.
+  const percentages = selectedKeyframePercentagesForElement(selectedKeyframes, selectedElementId);
+  const coalesceOptions = {
+    coalesceKey: `delete-keyframes:${++deleteKeyframesCommitCounter}`,
+    coalesceMs: Number.POSITIVE_INFINITY,
+  };
+  for (const [index, pct] of percentages.entries()) {
+    session.handleGsapRemoveKeyframe(animation.id, pct, {
+      ...coalesceOptions,
+      ...(index === percentages.length - 1 ? { softReload: true } : { skipReload: true }),
+    });
+  }
+}

package/src/hooks/domEditCommitTypes.ts

@@ -1,5 +1,26 @@
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { PatchOperation } from "../utils/sourcePatcher";
+import type { PatchOperation, PatchTarget } from "../utils/sourcePatcher";
+
+export interface DomEditPatchBatch {
+  sourceFile: string;
+  patches: Array<{ target: PatchTarget; operations: PatchOperation[] }>;
+}
+
+export type CommitDomEditPatchBatches = (
+  batches: DomEditPatchBatch[],
+  options: {
+    label: string;
+    coalesceKey: string;
+    /**
+     * Request skipping the preview iframe reload after a successful persist.
+     * Only honored when the persist is provably in sync with the live DOM:
+     * every patch operation is inline-style-only AND the server matched every
+     * patch target. Any unmatched target (or a non-style op) falls back to the
+     * reload so the preview reconverges with disk. Default: always reload.
+     */
+    skipReload?: boolean;
+  },
+) => Promise<void>;
 
 export type PersistDomEditOperations = (
   selection: DomEditSelection,
@@ -7,6 +28,7 @@ export type PersistDomEditOperations = (
   options?: {
     label?: string;
     coalesceKey?: string;
+    coalesceMs?: number;
     skipRefresh?: boolean;
     prepareContent?: (html: string, sourceFile: string) => string;
     shouldSave?: () => boolean;

package/src/hooks/domSelectionTestHarness.ts

@@ -1,5 +1,8 @@
 // Shared harness helpers for selection hook tests (useDomSelection,
 // usePreviewInteraction). Test-only module.
+import type React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import type { DomEditSelection } from "../components/editor/domEditing";
 
 export function installReactActEnvironment(): void {
@@ -9,6 +12,17 @@ export function installReactActEnvironment(): void {
   });
 }
 
+/** Mount a React element into a fresh detached host and return its root. */
+export function mountReactHarness(node: React.ReactElement): Root {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return root;
+}
+
 export function makeSelection(label: string, element: HTMLElement): DomEditSelection {
   return {
     element,