@hyperframes/studio 0.6.30 → 0.6.32

package/src/components/nle/NLEPreview.tsx

@@ -12,7 +12,6 @@ import {
   type PreviewZoomState,
 } from "./previewZoom";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
-
 interface NLEPreviewProps {
   projectId: string;
   iframeRef: Ref<HTMLIFrameElement>;
@@ -20,8 +19,8 @@ interface NLEPreviewProps {
   onCompositionLoadingChange?: (loading: boolean) => void;
   portrait?: boolean;
   directUrl?: string;
-  refreshKey?: number;
   suppressLoadingOverlay?: boolean;
+  onStageRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
 }
 
 export function getPreviewPlayerKey({
@@ -30,7 +29,6 @@ export function getPreviewPlayerKey({
 }: {
   projectId: string;
   directUrl?: string;
-  refreshKey?: number;
 }): string {
   return directUrl ?? projectId;
 }
@@ -91,16 +89,16 @@ export const NLEPreview = memo(function NLEPreview({
   onCompositionLoadingChange,
   portrait,
   directUrl,
-  refreshKey,
   suppressLoadingOverlay,
+  onStageRef,
 }: NLEPreviewProps) {
-  const baseKey = getPreviewPlayerKey({ projectId, directUrl, refreshKey });
-  const prevRefreshKeyRef = useRef(refreshKey);
+  const activeKey = getPreviewPlayerKey({ projectId, directUrl });
   const viewportRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
-  const [retiringKey, setRetiringKey] = useState<string | null>(null);
+  useEffect(() => {
+    onStageRef?.(stageRef);
+  }, [onStageRef]);
   const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, portrait));
-  const retiringTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const zoomRef = useRef<PreviewZoomState>(loadInitialZoom());
   const [settledZoom, setSettledZoom] = useState<PreviewZoomState>(() => zoomRef.current);
@@ -120,7 +118,6 @@ export const NLEPreview = memo(function NLEPreview({
     return () => {
       if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
       if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-      if (retiringTimerRef.current) clearTimeout(retiringTimerRef.current);
     };
   }, []);
 
@@ -205,14 +202,6 @@ export const NLEPreview = memo(function NLEPreview({
     [applyTransform],
   );
 
-  if (refreshKey !== prevRefreshKeyRef.current) {
-    const oldKey = `${baseKey}:${prevRefreshKeyRef.current ?? 0}`;
-    prevRefreshKeyRef.current = refreshKey;
-    setRetiringKey(oldKey);
-  }
-
-  const activeKey = `${baseKey}:${refreshKey ?? 0}`;
-
   const applyInitialZoom = useCallback(() => {
     const z = zoomRef.current;
     if (Math.abs(z.zoomPercent - 100) > 0.5 || Math.abs(z.panX) > 0.1 || Math.abs(z.panY) > 0.1) {
@@ -220,16 +209,6 @@ export const NLEPreview = memo(function NLEPreview({
     }
   }, [writeTransform]);
 
-  const handleNewPlayerLoad = () => {
-    onIframeLoad();
-    applyInitialZoom();
-    if (retiringTimerRef.current) clearTimeout(retiringTimerRef.current);
-    retiringTimerRef.current = setTimeout(() => {
-      setRetiringKey(null);
-      retiringTimerRef.current = null;
-    }, 160);
-  };
-
   useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
@@ -412,32 +391,17 @@ export const NLEPreview = memo(function NLEPreview({
             }}
             data-testid="preview-zoom-stage"
           >
-            {retiringKey && (
-              <Player
-                key={retiringKey}
-                projectId={directUrl ? undefined : projectId}
-                directUrl={directUrl}
-                onLoad={() => {}}
-                portrait={portrait}
-                style={{ position: "absolute", inset: 0, zIndex: 0, opacity: 1 }}
-              />
-            )}
             <Player
               key={activeKey}
               ref={iframeRef}
               projectId={directUrl ? undefined : projectId}
               directUrl={directUrl}
-              onLoad={
-                retiringKey
-                  ? handleNewPlayerLoad
-                  : () => {
-                      onIframeLoad();
-                      applyInitialZoom();
-                    }
-              }
+              onLoad={() => {
+                onIframeLoad();
+                applyInitialZoom();
+              }}
               onCompositionLoadingChange={onCompositionLoadingChange}
               portrait={portrait}
-              style={retiringKey ? { position: "absolute", inset: 0, zIndex: 1 } : undefined}
               suppressLoadingOverlay={suppressLoadingOverlay}
             />
           </div>

package/src/components/nle/usePreviewBlockDrop.ts

@@ -0,0 +1,109 @@
+import { useCallback, useState, type RefObject } from "react";
+import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+
+interface UsePreviewBlockDropOptions {
+  portrait?: boolean;
+  stageRef: RefObject<HTMLDivElement | null>;
+  onBlockDrop?: (blockName: string, position: { left: number; top: number }) => void;
+}
+
+interface BlockDropPayload {
+  name: string;
+  dimensions?: { width: number; height: number };
+}
+
+function parseBlockPayload(raw: string): BlockDropPayload | null {
+  try {
+    const parsed = JSON.parse(raw) as {
+      name?: string;
+      dimensions?: { width: number; height: number };
+    };
+    return parsed.name ? (parsed as BlockDropPayload) : null;
+  } catch {
+    return null;
+  }
+}
+
+function resolveCompositionPosition(
+  clientX: number,
+  clientY: number,
+  stageRect: DOMRect,
+  portrait: boolean | undefined,
+): { left: number; top: number } | null {
+  if (stageRect.width === 0 || stageRect.height === 0) return null;
+
+  const normalizedX = (clientX - stageRect.left) / stageRect.width;
+  const normalizedY = (clientY - stageRect.top) / stageRect.height;
+
+  const compWidth = portrait ? 1080 : 1920;
+  const compHeight = portrait ? 1920 : 1080;
+
+  return {
+    left: Math.max(0, Math.min(normalizedX * compWidth, compWidth)),
+    top: Math.max(0, Math.min(normalizedY * compHeight, compHeight)),
+  };
+}
+
+function centerBlockAtPosition(
+  pos: { left: number; top: number },
+  block: BlockDropPayload,
+): { left: number; top: number } {
+  const blockW = block.dimensions?.width ?? 0;
+  const blockH = block.dimensions?.height ?? 0;
+  return {
+    left: Math.max(0, pos.left - blockW / 2),
+    top: Math.max(0, pos.top - blockH / 2),
+  };
+}
+
+export function usePreviewBlockDrop({
+  portrait,
+  stageRef,
+  onBlockDrop,
+}: UsePreviewBlockDropOptions) {
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      if (!onBlockDrop) return;
+      if (!e.dataTransfer.types.includes(TIMELINE_BLOCK_MIME)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsDragOver(true);
+    },
+    [onBlockDrop],
+  );
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  // fallow-ignore-next-line complexity
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      setIsDragOver(false);
+      if (!onBlockDrop) return;
+
+      const payload = e.dataTransfer.getData(TIMELINE_BLOCK_MIME);
+      if (!payload) return;
+      e.preventDefault();
+
+      const block = parseBlockPayload(payload);
+      const stage = stageRef.current;
+      if (!block || !stage) return;
+
+      const pos = resolveCompositionPosition(
+        e.clientX,
+        e.clientY,
+        stage.getBoundingClientRect(),
+        portrait,
+      );
+      if (!pos) return;
+
+      onBlockDrop(block.name, centerBlockAtPosition(pos, block));
+    },
+    [onBlockDrop, stageRef, portrait],
+  );
+
+  return { isDragOver, handleDragOver, handleDragLeave, handleDrop };
+}

package/src/components/sidebar/BlocksTab.tsx

@@ -1,5 +1,4 @@
 import { memo, useState, useCallback, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
 import { useBlockCatalog } from "../../hooks/useBlockCatalog";
 import {
   BLOCK_CATEGORIES,
@@ -8,12 +7,19 @@ import {
 } from "../../utils/blockCategories";
 import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 
+export interface BlockPreviewInfo {
+  videoUrl?: string;
+  posterUrl?: string;
+  title: string;
+}
+
 interface BlocksTabProps {
   onAddBlock: (blockName: string) => void;
+  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
 }
 
 // fallow-ignore-next-line complexity
-export const BlocksTab = memo(function BlocksTab({ onAddBlock }: BlocksTabProps) {
+export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }: BlocksTabProps) {
   const { loading, error, search, setSearch, category, setCategory, filteredBlocks } =
     useBlockCatalog();
 
@@ -114,6 +120,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock }: BlocksTabProps)
                   videoUrl={block.preview?.video}
                   dimensions={dims}
                   onAdd={() => onAddBlock(block.name)}
+                  onPreview={onPreviewBlock}
                 />
               );
             })}
@@ -163,6 +170,7 @@ function BlockCard({
   videoUrl,
   dimensions,
   onAdd,
+  onPreview,
 }: {
   name: string;
   title: string;
@@ -173,52 +181,35 @@ function BlockCard({
   videoUrl?: string;
   dimensions?: { width: number; height: number };
   onAdd: () => void;
+  onPreview?: (preview: BlockPreviewInfo | null) => void;
 }) {
   const [hovered, setHovered] = useState(false);
   const [adding, setAdding] = useState(false);
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const videoRef = useRef<HTMLVideoElement | null>(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
 
-  const cancelLeave = useCallback(() => {
-    if (leaveTimer.current) {
-      clearTimeout(leaveTimer.current);
-      leaveTimer.current = null;
-    }
-  }, []);
-
   const handleEnter = useCallback(() => {
-    cancelLeave();
-    hoverTimer.current = setTimeout(() => setHovered(true), 500);
-  }, [cancelLeave]);
-
-  const dismiss = useCallback(() => {
-    if (hoverTimer.current) {
-      clearTimeout(hoverTimer.current);
-      hoverTimer.current = null;
-    }
-    cancelLeave();
-    setHovered(false);
-  }, [cancelLeave]);
+    hoverTimer.current = setTimeout(() => {
+      setHovered(true);
+      onPreview?.({ videoUrl, posterUrl, title });
+    }, 300);
+  }, [onPreview, videoUrl, posterUrl, title]);
 
   const handleLeave = useCallback(() => {
     if (hoverTimer.current) {
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
     }
-    leaveTimer.current = setTimeout(() => setHovered(false), 150);
-  }, []);
+    setHovered(false);
+    onPreview?.(null);
+  }, [onPreview]);
 
   useEffect(() => {
-    if (!hovered) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") dismiss();
+    return () => {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [hovered, dismiss]);
+  }, []);
 
   const handleAdd = useCallback(
     (e: React.MouseEvent) => {
@@ -251,7 +242,6 @@ function BlockCard({
       <div className="aspect-video w-full overflow-hidden relative">
         {hovered && videoUrl ? (
           <video
-            ref={videoRef}
             src={videoUrl}
             autoPlay
             muted
@@ -313,72 +303,6 @@ function BlockCard({
           </span>
         </div>
       </div>
-
-      {/* Fullscreen hover preview */}
-      {hovered &&
-        (videoUrl || posterUrl) &&
-        createPortal(
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center cursor-pointer"
-            onClick={dismiss}
-            onPointerEnter={cancelLeave}
-            onPointerLeave={handleLeave}
-          >
-            <div className="bg-black/80 absolute inset-0" />
-            <button
-              type="button"
-              onClick={dismiss}
-              className="absolute top-4 right-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-neutral-800/80 text-neutral-400 hover:text-white hover:bg-neutral-700 transition-colors"
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M18 6 6 18" />
-                <path d="m6 6 12 12" />
-              </svg>
-            </button>
-            <div
-              className="relative rounded-xl overflow-hidden shadow-2xl border border-neutral-600/30 cursor-default"
-              style={{ width: "80vw", maxWidth: 1200, maxHeight: "80vh" }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="aspect-video bg-neutral-950">
-                {videoUrl ? (
-                  <video
-                    src={videoUrl}
-                    autoPlay
-                    muted
-                    loop
-                    playsInline
-                    className="w-full h-full object-contain"
-                  />
-                ) : (
-                  <img src={posterUrl} alt={title} className="w-full h-full object-contain" />
-                )}
-              </div>
-              <div className="bg-neutral-900/95 px-4 py-3">
-                <div className="text-[14px] font-semibold text-neutral-100">{title}</div>
-                <div className="flex items-center gap-2 mt-1">
-                  <span className={`w-2 h-2 rounded-full ${colors.dot}`} />
-                  <span className={`text-[11px] ${colors.text}`}>
-                    {BLOCK_CATEGORIES.find((c) => c.id === category)?.label}
-                  </span>
-                  {duration != null && (
-                    <span className="text-[11px] text-neutral-500">{duration}s</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>,
-          document.body,
-        )}
     </div>
   );
 }

package/src/components/sidebar/LeftSidebar.tsx

@@ -3,13 +3,14 @@ import {
   useState,
   useCallback,
   useImperativeHandle,
+  useRef,
   forwardRef,
   type ReactNode,
 } from "react";
 import { CompositionsTab } from "./CompositionsTab";
 import { AssetsTab } from "./AssetsTab";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
-import { BlocksTab } from "./BlocksTab";
+import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
 import { FileTree } from "../editor/FileTree";
 import { STUDIO_BLOCKS_PANEL_ENABLED } from "../editor/manualEditingAvailability";
 
@@ -17,6 +18,7 @@ export type SidebarTab = "compositions" | "assets" | "code" | "blocks";
 
 export interface LeftSidebarHandle {
   selectTab: (tab: SidebarTab) => void;
+  getTab: () => SidebarTab;
 }
 
 const STORAGE_KEY = "hf-studio-sidebar-tab";
@@ -53,6 +55,7 @@ interface LeftSidebarProps {
   linting?: boolean;
   onToggleCollapse?: () => void;
   onAddBlock?: (blockName: string) => void;
+  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
   takeoverContent?: ReactNode;
 }
 
@@ -82,11 +85,14 @@ export const LeftSidebar = memo(
       linting,
       onToggleCollapse,
       onAddBlock,
+      onPreviewBlock,
       takeoverContent,
     },
     ref,
   ) {
     const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
+    const tabRef = useRef(tab);
+    tabRef.current = tab;
 
     const selectTab = useCallback((t: SidebarTab) => {
       setTab(t);
@@ -94,7 +100,9 @@ export const LeftSidebar = memo(
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
 
-    useImperativeHandle(ref, () => ({ selectTab }), [selectTab]);
+    const getTab = useCallback(() => tabRef.current, []);
+
+    useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
 
     return (
       <div
@@ -159,7 +167,7 @@ export const LeftSidebar = memo(
                           : "text-neutral-500 hover:text-neutral-200"
                       }`}
                     >
-                      Blocks
+                      Catalog
                     </button>
                   )}
                 </div>
@@ -239,7 +247,7 @@ export const LeftSidebar = memo(
             )}
 
             {STUDIO_BLOCKS_PANEL_ENABLED && tab === "blocks" && onAddBlock && (
-              <BlocksTab onAddBlock={onAddBlock} />
+              <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
             )}
 
             {/* Lint button pinned at the bottom */}

package/src/hooks/useAppHotkeys.ts

@@ -248,6 +248,24 @@ export function useAppHotkeys({
       }
     }
 
+    // F — toggle fullscreen preview
+    if (
+      event.key.toLowerCase() === "f" &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.shiftKey &&
+      !isEditableTarget(event.target)
+    ) {
+      event.preventDefault();
+      if (document.fullscreenElement) {
+        void document.exitFullscreen();
+      } else {
+        document.querySelector<HTMLElement>("[data-studio-fullscreen-target]")?.requestFullscreen();
+      }
+      return;
+    }
+
     // Delete / Backspace — remove selected element (timeline clip or preview selection)
     if (
       (event.key === "Delete" || event.key === "Backspace") &&

package/src/hooks/useDomEditSession.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
@@ -56,6 +56,7 @@ export interface UseDomEditSessionParams {
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
   selectSidebarTab?: (tab: SidebarTab) => void;
+  getSidebarTab?: () => SidebarTab;
 }
 
 // ── Hook ──
@@ -93,6 +94,7 @@ export function useDomEditSession({
   setRefreshKey: _setRefreshKey,
   openSourceForSelection,
   selectSidebarTab,
+  getSidebarTab,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
 
@@ -281,6 +283,22 @@ export function useDomEditSession({
     applyStudioManualEditsToPreviewRef,
   ]);
 
+  // Auto-reveal source when an element is selected while the Code tab is active.
+  // Use a ref for the callback so the effect only fires on selection changes,
+  // not when openSourceForSelection is recreated due to editingFile content updates.
+  const openSourceRef = useRef(openSourceForSelection);
+  openSourceRef.current = openSourceForSelection;
+  useEffect(() => {
+    if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
+    if (!domEditSelection.sourceFile) return;
+    if (getSidebarTab() !== "code") return;
+    openSourceRef.current(domEditSelection.sourceFile, {
+      id: domEditSelection.id,
+      selector: domEditSelection.selector,
+      selectorIndex: domEditSelection.selectorIndex,
+    });
+  }, [domEditSelection, getSidebarTab]);
+
   return {
     // State
     domEditSelection,

package/src/hooks/useFileManager.ts

@@ -122,6 +122,9 @@ export function useFileManager({
   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 });

package/src/main.tsx

@@ -7,19 +7,39 @@ import "./styles/studio.css";
 
 trackStudioEvent("session_start");
 
+function errorProps(value: unknown): {
+  error_message: string;
+  error_name: string | null;
+  stack_trace: string | null;
+} {
+  if (value instanceof Error) {
+    return {
+      error_message: value.message,
+      error_name: value.name,
+      stack_trace: value.stack?.slice(0, 4000) ?? null,
+    };
+  }
+  return { error_message: String(value), error_name: null, stack_trace: null };
+}
+
 window.addEventListener("error", (event) => {
+  if (event.message?.includes("ResizeObserver loop")) {
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    return;
+  }
+
   trackStudioEvent("unhandled_error", {
+    ...errorProps(event.error),
     error_message: event.message,
-    filename: event.filename ?? null,
-    lineno: event.lineno ?? null,
-    colno: event.colno ?? null,
+    filename: event.filename,
+    lineno: event.lineno,
+    colno: event.colno,
   });
 });
 
 window.addEventListener("unhandledrejection", (event) => {
-  trackStudioEvent("unhandled_promise_rejection", {
-    error_message: event.reason instanceof Error ? event.reason.message : String(event.reason),
-  });
+  trackStudioEvent("unhandled_promise_rejection", errorProps(event.reason));
 });
 
 createRoot(document.getElementById("root")!).render(