@hyperframes/studio 0.6.31 → 0.6.32

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/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

@@ -23,6 +23,12 @@ function errorProps(value: unknown): {
 }
 
 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,

package/src/utils/blockInstaller.ts

@@ -9,11 +9,29 @@ import { formatTimelineAttributeNumber } from "../player/components/timelineEdit
 import { saveProjectFilesWithHistory } from "./studioFileHistory";
 import type { EditHistoryKind } from "./editHistory";
 
+function getMaxZIndexFromIframe(iframe: HTMLIFrameElement | null): number {
+  try {
+    const doc = iframe?.contentDocument;
+    if (!doc) return 0;
+    let max = 0;
+    for (const el of doc.body.querySelectorAll("*")) {
+      const z = parseInt(getComputedStyle(el).zIndex, 10);
+      if (Number.isFinite(z) && z > max) max = z;
+    }
+    return max;
+  } catch {
+    return 0;
+  }
+}
+
 interface AddBlockOptions {
   projectId: string;
   blockName: string;
   activeCompPath: string | null;
   placement?: { start: number; track: number };
+  visualPosition?: { left: number; top: number };
+  previewIframe?: HTMLIFrameElement | null;
+  currentTime?: number;
   timelineElements: TimelineElement[];
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
@@ -44,6 +62,7 @@ export async function addBlockToProject(
     blockName,
     activeCompPath,
     placement,
+    visualPosition,
     timelineElements,
     readProjectFile,
     writeProjectFile,
@@ -102,20 +121,18 @@ export async function addBlockToProject(
       const isBlock = block.type === "hyperframes:block";
       const hostDims = resolveTimelineAssetInitialGeometry(originalContent);
 
+      const currentTime = opts.currentTime ?? 0;
       const start = placement
         ? Number(formatTimelineAttributeNumber(placement.start))
-        : isBlock
-          ? relevantElements.reduce(
-              (max, te) => Math.max(max, (te.start ?? 0) + (te.duration ?? 0)),
-              0,
-            )
-          : 0;
-      const duration = isBlock
-        ? (block as { duration: number }).duration
-        : relevantElements.reduce(
-            (max, te) => Math.max(max, (te.start ?? 0) + (te.duration ?? 0)),
-            10,
-          );
+        : Number(formatTimelineAttributeNumber(currentTime));
+      const blockDuration =
+        "duration" in block ? (block as { duration: number }).duration : undefined;
+      const duration =
+        blockDuration ??
+        relevantElements.reduce(
+          (max, te) => Math.max(max, (te.start ?? 0) + (te.duration ?? 0)),
+          10,
+        );
       const track =
         placement?.track ??
         (isBlock
@@ -124,26 +141,42 @@ export async function addBlockToProject(
             ? Math.max(...relevantElements.map((te) => te.track)) + 1
             : 1);
 
-      const zIndex = Math.max(1, relevantElements.length + 1);
-
-      const width = isBlock
-        ? (block as { dimensions: { width: number } }).dimensions.width
-        : hostDims.width;
-      const height = isBlock
-        ? (block as { dimensions: { height: number } }).dimensions.height
-        : hostDims.height;
-
-      const subCompHtml =
-        `<div data-composition-id="${compId}" ` +
-        `data-composition-src="${compositionFile}" ` +
-        `data-start="${formatTimelineAttributeNumber(start)}" ` +
-        `data-duration="${formatTimelineAttributeNumber(duration)}" ` +
-        `data-track-index="${track}" ` +
-        `data-width="${width}" data-height="${height}" ` +
-        `style="position: absolute; left: 0px; top: 0px; width: ${width}px; height: ${height}px; z-index: ${zIndex}">` +
-        `</div>`;
-
-      const patchedContent = insertTimelineAssetIntoSource(originalContent, subCompHtml);
+      const zIndex = getMaxZIndexFromIframe(opts.previewIframe ?? null) + 1;
+
+      const width = hostDims.width;
+      const height = hostDims.height;
+
+      const left = visualPosition ? Math.round(visualPosition.left) : 0;
+      const top = visualPosition ? Math.round(visualPosition.top) : 0;
+
+      const subCompHtml = [
+        `<div`,
+        `  data-composition-id="${compId}"`,
+        `  data-composition-src="${compositionFile}"`,
+        `  data-start="${formatTimelineAttributeNumber(start)}"`,
+        `  data-duration="${formatTimelineAttributeNumber(duration)}"`,
+        `  data-track-index="${track}"`,
+        `  data-width="${width}"`,
+        `  data-height="${height}"`,
+        `  style="position: absolute; left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px; z-index: ${zIndex}"`,
+        `></div>`,
+      ].join("\n");
+
+      let patchedContent = insertTimelineAssetIntoSource(originalContent, subCompHtml);
+
+      const newEnd = start + duration;
+      const rootDurMatch = patchedContent.match(
+        /(<[^>]*data-composition-id="[^"]*"[^>]*data-duration=")([^"]*)(")/,
+      );
+      if (rootDurMatch) {
+        const rootDur = parseFloat(rootDurMatch[2]!);
+        if (newEnd > rootDur) {
+          patchedContent = patchedContent.replace(
+            rootDurMatch[0],
+            `${rootDurMatch[1]}${formatTimelineAttributeNumber(newEnd)}${rootDurMatch[3]}`,
+          );
+        }
+      }
 
       await saveProjectFilesWithHistory({
         projectId,

package/src/utils/timelineAssetDrop.ts

@@ -126,5 +126,12 @@ export function insertTimelineAssetIntoSource(source: string, assetHtml: string)
     throw new Error("No composition root found in target source");
   }
   const insertAt = match.index + match[0].length;
-  return `${source.slice(0, insertAt)}${assetHtml}${source.slice(insertAt)}`;
+  const lineStart = source.lastIndexOf("\n", match.index);
+  const leadingWhitespace = source.slice(lineStart + 1, match.index).match(/^(\s*)/)?.[1] ?? "";
+  const childIndent = leadingWhitespace + "  ";
+  const indented = assetHtml
+    .split("\n")
+    .map((line, i) => (i === 0 ? line : childIndent + line))
+    .join("\n");
+  return `${source.slice(0, insertAt)}\n${childIndent}${indented}${source.slice(insertAt)}`;
 }