@hyperframes/studio 0.1.9 → 0.1.11

package/src/components/editor/FileTree.tsx

@@ -1,5 +1,13 @@
-import { memo } from "react";
-import { FileCode, Image, Film, Music, File } from "../../icons/SystemIcons";
+import { memo, useState, useCallback } from "react";
+import {
+  FileCode,
+  Image,
+  Film,
+  Music,
+  File,
+  ChevronDown,
+  ChevronRight,
+} from "../../icons/SystemIcons";
 
 interface FileTreeProps {
   files: string[];
@@ -13,12 +21,23 @@ const FILE_ICONS: Record<string, { icon: typeof File; color: string }> = {
   js: { icon: FileCode, color: "#F59E0B" },
   ts: { icon: FileCode, color: "#3B82F6" },
   json: { icon: File, color: "#22C55E" },
+  md: { icon: File, color: "#737373" },
   png: { icon: Image, color: "#22C55E" },
   jpg: { icon: Image, color: "#22C55E" },
+  jpeg: { icon: Image, color: "#22C55E" },
+  webp: { icon: Image, color: "#22C55E" },
+  gif: { icon: Image, color: "#22C55E" },
   svg: { icon: Image, color: "#F97316" },
   mp4: { icon: Film, color: "#A855F7" },
+  webm: { icon: Film, color: "#A855F7" },
+  mov: { icon: Film, color: "#A855F7" },
   mp3: { icon: Music, color: "#F59E0B" },
   wav: { icon: Music, color: "#F59E0B" },
+  ogg: { icon: Music, color: "#F59E0B" },
+  m4a: { icon: Music, color: "#F59E0B" },
+  woff: { icon: File, color: "#525252" },
+  woff2: { icon: File, color: "#525252" },
+  ttf: { icon: File, color: "#525252" },
 };
 
 function getFileIcon(path: string) {
@@ -26,13 +45,152 @@ function getFileIcon(path: string) {
   return FILE_ICONS[ext] ?? { icon: File, color: "#737373" };
 }
 
-export const FileTree = memo(function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
-  const sorted = [...files].sort((a, b) => {
-    // index.html first, then alphabetical
-    if (a === "index.html") return -1;
-    if (b === "index.html") return 1;
-    return a.localeCompare(b);
+interface TreeNode {
+  name: string;
+  fullPath: string;
+  children: Map<string, TreeNode>;
+  isFile: boolean;
+}
+
+function buildTree(files: string[]): TreeNode {
+  const root: TreeNode = { name: "", fullPath: "", children: new Map(), isFile: false };
+  for (const file of files) {
+    const parts = file.split("/");
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLast = i === parts.length - 1;
+      const fullPath = parts.slice(0, i + 1).join("/");
+      if (!current.children.has(part)) {
+        current.children.set(part, {
+          name: part,
+          fullPath,
+          children: new Map(),
+          isFile: isLast,
+        });
+      }
+      current = current.children.get(part)!;
+      if (isLast) current.isFile = true;
+    }
+  }
+  return root;
+}
+
+function sortChildren(children: Map<string, TreeNode>): TreeNode[] {
+  return Array.from(children.values()).sort((a, b) => {
+    // index.html always first
+    if (a.name === "index.html") return -1;
+    if (b.name === "index.html") return 1;
+    // Directories before files
+    if (!a.isFile && b.isFile) return -1;
+    if (a.isFile && !b.isFile) return 1;
+    return a.name.localeCompare(b.name);
   });
+}
+
+function TreeFolder({
+  node,
+  depth,
+  activeFile,
+  onSelectFile,
+  defaultOpen,
+}: {
+  node: TreeNode;
+  depth: number;
+  activeFile: string | null;
+  onSelectFile: (path: string) => void;
+  defaultOpen: boolean;
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const toggle = useCallback(() => setIsOpen((v) => !v), []);
+  const children = sortChildren(node.children);
+  const Chevron = isOpen ? ChevronDown : ChevronRight;
+
+  return (
+    <>
+      <button
+        onClick={toggle}
+        className="w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors"
+        style={{ paddingLeft: `${8 + depth * 12}px` }}
+      >
+        <Chevron size={10} className="flex-shrink-0 text-neutral-600" />
+        <span className="truncate font-medium">{node.name}</span>
+      </button>
+      {isOpen &&
+        children.map((child) =>
+          child.isFile && child.children.size === 0 ? (
+            <TreeFile
+              key={child.fullPath}
+              node={child}
+              depth={depth + 1}
+              activeFile={activeFile}
+              onSelectFile={onSelectFile}
+            />
+          ) : child.children.size > 0 ? (
+            <TreeFolder
+              key={child.fullPath}
+              node={child}
+              depth={depth + 1}
+              activeFile={activeFile}
+              onSelectFile={onSelectFile}
+              defaultOpen={isActiveInSubtree(child, activeFile)}
+            />
+          ) : (
+            <TreeFile
+              key={child.fullPath}
+              node={child}
+              depth={depth + 1}
+              activeFile={activeFile}
+              onSelectFile={onSelectFile}
+            />
+          ),
+        )}
+    </>
+  );
+}
+
+function TreeFile({
+  node,
+  depth,
+  activeFile,
+  onSelectFile,
+}: {
+  node: TreeNode;
+  depth: number;
+  activeFile: string | null;
+  onSelectFile: (path: string) => void;
+}) {
+  const { icon: Icon, color } = getFileIcon(node.name);
+  const isActive = node.fullPath === activeFile;
+
+  return (
+    <button
+      onClick={() => onSelectFile(node.fullPath)}
+      className={`w-full flex items-center gap-2 py-1 min-h-7 text-left transition-all text-xs ${
+        isActive
+          ? "bg-neutral-800/60 text-neutral-200"
+          : "text-neutral-500 hover:bg-neutral-800/30 hover:text-neutral-300"
+      }`}
+      style={{ paddingLeft: `${8 + depth * 12 + 14}px` }}
+    >
+      <Icon size={12} style={{ color }} className="flex-shrink-0" />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+}
+
+function isActiveInSubtree(node: TreeNode, activeFile: string | null): boolean {
+  if (!activeFile) return false;
+  if (node.fullPath === activeFile) return true;
+  for (const child of node.children.values()) {
+    if (isActiveInSubtree(child, activeFile)) return true;
+  }
+  return false;
+}
+
+export const FileTree = memo(function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
+  const tree = buildTree(files);
+  const children = sortChildren(tree.children);
 
   return (
     <div className="flex flex-col h-full min-h-0">
@@ -40,30 +198,26 @@ export const FileTree = memo(function FileTree({ files, activeFile, onSelectFile
         <span className="text-2xs font-medium text-neutral-500 uppercase tracking-caps">Files</span>
       </div>
       <div className="flex-1 overflow-y-auto py-1">
-        {sorted.map((path) => {
-          const { icon: Icon, color } = getFileIcon(path);
-          const isActive = path === activeFile;
-          const name = path.split("/").pop() ?? path;
-          const dir = path.includes("/") ? path.split("/").slice(0, -1).join("/") + "/" : "";
-
-          return (
-            <button
-              key={path}
-              onClick={() => onSelectFile(path)}
-              className={`w-full flex items-center gap-2 px-2.5 py-1 min-h-7 text-left transition-all duration-press text-xs ${
-                isActive
-                  ? "bg-neutral-800/60 text-neutral-200"
-                  : "text-neutral-500 hover:bg-neutral-800/30 hover:text-neutral-300 active:scale-[0.98]"
-              }`}
-            >
-              <Icon size={12} style={{ color }} className="flex-shrink-0" />
-              <span className="truncate">
-                {dir && <span className="text-neutral-600">{dir}</span>}
-                {name}
-              </span>
-            </button>
-          );
-        })}
+        {children.map((child) =>
+          child.isFile && child.children.size === 0 ? (
+            <TreeFile
+              key={child.fullPath}
+              node={child}
+              depth={0}
+              activeFile={activeFile}
+              onSelectFile={onSelectFile}
+            />
+          ) : (
+            <TreeFolder
+              key={child.fullPath}
+              node={child}
+              depth={0}
+              activeFile={activeFile}
+              onSelectFile={onSelectFile}
+              defaultOpen={isActiveInSubtree(child, activeFile)}
+            />
+          ),
+        )}
       </div>
     </div>
   );

package/src/components/editor/SourceEditor.tsx

@@ -26,7 +26,9 @@ function getLanguageExtension(language: string) {
     case "js":
     case "typescript":
     case "ts":
-      return javascript({ typescript: language === "typescript" || language === "ts" });
+      return javascript({
+        typescript: language === "typescript" || language === "ts",
+      });
     default:
       return html();
   }

package/src/components/nle/NLELayout.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback, useRef, memo, type ReactNode } from "react";
+import { useState, useCallback, useRef, useEffect, memo, type ReactNode } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
 import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
 import { NLEPreview } from "./NLEPreview";
@@ -9,7 +10,9 @@ interface NLELayoutProps {
   portrait?: boolean;
   /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
   previewOverlay?: ReactNode;
-  /** Slot rendered below the timeline tracks (e.g., agent activity swim lanes) */
+  /** Slot rendered above the timeline tracks (toolbar with split, delete, zoom) */
+  timelineToolbar?: ReactNode;
+  /** Slot rendered below the timeline tracks */
   timelineFooter?: ReactNode;
   /** Increment to force the preview to reload (e.g., after file writes) */
   refreshKey?: number;
@@ -17,6 +20,15 @@ interface NLELayoutProps {
   activeCompositionPath?: string | null;
   /** Callback to expose the iframe ref (for element picker, etc.) */
   onIframeRef?: (iframe: HTMLIFrameElement | null) => void;
+  /** Callback when the viewed composition changes (drill-down/back) */
+  onCompositionChange?: (compositionPath: string | null) => void;
+  /** Custom clip content renderer for timeline (thumbnails, waveforms, etc.) */
+  renderClipContent?: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
+  onCompIdToSrcChange?: (map: Map<string, string>) => void;
 }
 
 const MIN_TIMELINE_H = 100;
@@ -27,10 +39,14 @@ export const NLELayout = memo(function NLELayout({
   projectId,
   portrait,
   previewOverlay,
+  timelineToolbar,
   timelineFooter,
   refreshKey,
   activeCompositionPath,
   onIframeRef,
+  onCompositionChange,
+  renderClipContent,
+  onCompIdToSrcChange,
 }: NLELayoutProps) {
   const {
     iframeRef,
@@ -40,6 +56,16 @@ export const NLELayout = memo(function NLELayout({
     saveSeekPosition,
   } = useTimelinePlayer();
 
+  // Reset timeline state when the project changes to prevent stale data from a
+  // previous project leaking into the new one.
+  const prevProjectIdRef = useRef(projectId);
+  if (prevProjectIdRef.current !== projectId) {
+    prevProjectIdRef.current = projectId;
+    // Only reset Zustand state during render (safe — pure state update).
+    // Imperative cleanup (RAF, intervals) happens in resetPlayer's store reset.
+    usePlayerStore.getState().reset();
+  }
+
   // Preserve seek position when refreshKey changes (iframe will remount via key prop).
   const prevRefreshKeyRef = useRef(refreshKey);
   if (refreshKey !== prevRefreshKeyRef.current) {
@@ -55,7 +81,7 @@ export const NLELayout = memo(function NLELayout({
 
   // Composition ID → actual file path mapping, built from the raw index.html
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
-  useEffect(() => {
+  useMountEffect(() => {
     fetch(`/api/projects/${projectId}/files/index.html`)
       .then((r) => r.json())
       .then((data: { content?: string }) => {
@@ -70,15 +96,71 @@ export const NLELayout = memo(function NLELayout({
           if (id && src) map.set(id, src);
         }
         setCompIdToSrc(map);
+        onCompIdToSrcChange?.(map);
       })
       .catch(() => {});
-  }, [projectId]);
+  });
+
+  // Patch elements with compositionSrc whenever elements or compIdToSrc change.
+  // The runtime strips data-composition-src from the DOM after loading, so elements
+  // arrive without it. This bridges the gap using the map built from raw HTML.
+  // Map keys are composition IDs (e.g. "dark-intro"), while element IDs may be
+  // DOM IDs with suffixes (e.g. "dark-intro-host"), so we try multiple lookups.
+  const compIdToSrcRef = useRef(compIdToSrc);
+  compIdToSrcRef.current = compIdToSrc;
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (compIdToSrc.size === 0) return;
+    const patchElements = (elements: TimelineElement[]): TimelineElement[] | null => {
+      const map = compIdToSrcRef.current;
+      if (map.size === 0) return null;
+      let patched = false;
+      const updated = elements.map((el) => {
+        if (el.compositionSrc) return el;
+        // Try exact match, then strip common suffixes (-host, -comp, -layer)
+        const src = map.get(el.id) ?? map.get(el.id.replace(/-(host|comp|layer)$/, ""));
+        if (src) {
+          patched = true;
+          return { ...el, compositionSrc: src };
+        }
+        return el;
+      });
+      return patched ? updated : null;
+    };
+    // Patch current elements immediately
+    const patched = patchElements(usePlayerStore.getState().elements);
+    if (patched) usePlayerStore.getState().setElements(patched);
+    // Subscribe for future element updates — use a flag to prevent re-entrant patching
+    let patching = false;
+    return usePlayerStore.subscribe((state, prev) => {
+      if (patching) return;
+      if (state.elements === prev.elements || state.elements.length === 0) return;
+      // Skip if all elements already have compositionSrc
+      if (state.elements.every((el) => el.compositionSrc)) return;
+      patching = true;
+      const result = patchElements(state.elements);
+      if (result) state.setElements(result);
+      patching = false;
+    });
+  }, [compIdToSrc]);
 
   // Composition drill-down stack
   const [compositionStack, setCompositionStack] = useState<CompositionLevel[]>([
     { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` },
   ]);
 
+  // Wrap setCompositionStack to auto-notify parent on composition change
+  const onCompositionChangeRef = useRef(onCompositionChange);
+  onCompositionChangeRef.current = onCompositionChange;
+  const updateCompositionStack: typeof setCompositionStack = useCallback((action) => {
+    setCompositionStack((prev) => {
+      const next = typeof action === "function" ? action(prev) : action;
+      const id = next[next.length - 1]?.id;
+      queueMicrotask(() => onCompositionChangeRef.current?.(id === "master" ? null : id));
+      return next;
+    });
+  }, []);
+
   // Resizable timeline height
   const [timelineH, setTimelineH] = useState(DEFAULT_TIMELINE_H);
   const isDragging = useRef(false);
@@ -88,11 +170,18 @@ export const NLELayout = memo(function NLELayout({
   const currentLevel = compositionStack[compositionStack.length - 1];
   const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : undefined;
 
+  // Save master seek position before drilling down so we can restore it on back-navigation.
+  // saveSeekPosition() sets pendingSeekRef in useTimelinePlayer which onIframeLoad reads.
+  const masterSeekRef = useRef(0);
+
   // Drill-down: push a sub-composition onto the stack
   const iframeRef_ = iframeRef; // stable ref for the callback
   const handleDrillDown = useCallback(
     (element: TimelineElement) => {
       if (!element.compositionSrc) return;
+      // Save current master playback position for back-navigation
+      masterSeekRef.current = usePlayerStore.getState().currentTime;
+      saveSeekPosition();
       // compositionSrc may be a full URL (from runtime manifest) or a relative path
       // Extract the element's composition ID from its timeline ID
       const compId = element.id;
@@ -126,7 +215,7 @@ export const NLELayout = memo(function NLELayout({
       usePlayerStore.getState().setElements([]);
 
       // Toggle: if already viewing this composition, go back to parent (like Premiere)
-      setCompositionStack((prev) => {
+      updateCompositionStack((prev) => {
         const currentId = prev[prev.length - 1].id;
         if (currentId === resolvedPath && prev.length > 1) {
           return prev.slice(0, -1);
@@ -141,38 +230,45 @@ export const NLELayout = memo(function NLELayout({
         return [...prev, { id: resolvedPath, label, previewUrl }];
       });
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef_ is a stable ref; .current mutates and should not be a dep
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [projectId, compIdToSrc],
   );
 
   // Navigate back to a specific breadcrumb level
   const handleNavigateComposition = useCallback((index: number) => {
+    // When going back to master (index 0), restore the saved master position
+    if (index === 0 && masterSeekRef.current > 0) {
+      usePlayerStore.getState().setCurrentTime(masterSeekRef.current);
+    }
+    saveSeekPosition();
     usePlayerStore.getState().setElements([]);
-    setCompositionStack((prev) => prev.slice(0, index + 1));
+    updateCompositionStack((prev) => prev.slice(0, index + 1));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Navigate to a composition when activeCompositionPath changes
-  const prevActiveCompRef = useRef<string | null>(null);
-  if (activeCompositionPath && activeCompositionPath !== prevActiveCompRef.current) {
-    prevActiveCompRef.current = activeCompositionPath;
-    queueMicrotask(() => usePlayerStore.getState().setElements([]));
+  // Navigate to a composition when activeCompositionPath changes.
+  // Uses useEffect to ensure state updates happen after render commit,
+  // avoiding render-time mutations that React can swallow during batching.
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
     if (activeCompositionPath === "index.html") {
-      setCompositionStack((prev) => (prev.length > 1 ? [prev[0]] : prev));
-    } else if (activeCompositionPath.startsWith("compositions/")) {
+      usePlayerStore.getState().setElements([]);
+      updateCompositionStack((prev) => (prev.length > 1 ? [prev[0]] : prev));
+    } else if (activeCompositionPath && activeCompositionPath.startsWith("compositions/")) {
       const label = activeCompositionPath.replace(/^compositions\//, "").replace(/\.html$/, "");
       const previewUrl = `/api/projects/${projectId}/preview/comp/${activeCompositionPath}`;
-      setCompositionStack((prev) => {
-        if (prev[prev.length - 1].id === activeCompositionPath) return prev;
+      usePlayerStore.getState().setElements([]);
+      updateCompositionStack((prev) => {
+        if (prev[prev.length - 1]?.id === activeCompositionPath) return prev;
         return [
           { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` },
           { id: activeCompositionPath, label, previewUrl },
         ];
       });
+    } else if (!activeCompositionPath) {
+      usePlayerStore.getState().setElements([]);
     }
-  } else if (!activeCompositionPath && prevActiveCompRef.current) {
-    prevActiveCompRef.current = null;
-    queueMicrotask(() => usePlayerStore.getState().setElements([]));
-  }
+  }, [activeCompositionPath, projectId, updateCompositionStack]);
 
   // Resize divider handlers
   const handleDividerPointerDown = useCallback((e: React.PointerEvent) => {
@@ -201,9 +297,10 @@ export const NLELayout = memo(function NLELayout({
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === "Escape" && compositionStack.length > 1) {
-        setCompositionStack((prev) => prev.slice(0, -1));
+        updateCompositionStack((prev) => prev.slice(0, -1));
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [compositionStack.length],
   );
 
@@ -255,11 +352,16 @@ export const NLELayout = memo(function NLELayout({
           onDoubleClick={(e) => {
             if ((e.target as HTMLElement).closest("[data-clip]")) return;
             if (compositionStack.length > 1) {
-              setCompositionStack((prev) => prev.slice(0, -1));
+              updateCompositionStack((prev) => prev.slice(0, -1));
             }
           }}
         >
-          <Timeline onSeek={seek} onDrillDown={handleDrillDown} />
+          {timelineToolbar}
+          <Timeline
+            onSeek={seek}
+            onDrillDown={handleDrillDown}
+            renderClipContent={renderClipContent}
+          />
           {timelineFooter}
         </div>
       </div>

package/src/components/renders/RenderQueue.tsx

@@ -0,0 +1,123 @@
+import { memo, useState, useRef } from "react";
+import { RenderQueueItem } from "./RenderQueueItem";
+import type { RenderJob } from "./useRenderQueue";
+
+interface RenderQueueProps {
+  jobs: RenderJob[];
+  onDelete: (jobId: string) => void;
+  onClearCompleted: () => void;
+  onStartRender: (format: "mp4" | "webm") => void;
+  isRendering: boolean;
+}
+
+function FormatExportButton({
+  onStartRender,
+  isRendering,
+}: {
+  onStartRender: (format: "mp4" | "webm") => void;
+  isRendering: boolean;
+}) {
+  const [format, setFormat] = useState<"mp4" | "webm">("mp4");
+
+  return (
+    <div className="flex items-center gap-0.5">
+      <select
+        value={format}
+        onChange={(e) => setFormat(e.target.value as "mp4" | "webm")}
+        disabled={isRendering}
+        className="h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
+      >
+        <option value="mp4">MP4</option>
+        <option value="webm">WebM</option>
+      </select>
+      <button
+        onClick={() => onStartRender(format)}
+        disabled={isRendering}
+        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-[#3CE6AC] text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
+      >
+        {isRendering ? "Rendering..." : "Export"}
+      </button>
+    </div>
+  );
+}
+
+export const RenderQueue = memo(function RenderQueue({
+  jobs,
+  onDelete,
+  onClearCompleted,
+  onStartRender,
+  isRendering,
+}: RenderQueueProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const prevCount = useRef(jobs.length);
+
+  // Auto-scroll to bottom when new jobs are added (adjust during render)
+  if (jobs.length > prevCount.current && listRef.current) {
+    queueMicrotask(() => {
+      listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
+    });
+  }
+  prevCount.current = jobs.length;
+
+  const completedCount = jobs.filter((j) => j.status !== "rendering").length;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
+        <span className="text-[11px] font-medium text-neutral-500 uppercase tracking-wider">
+          Renders ({jobs.length})
+        </span>
+        <div className="flex items-center gap-1.5">
+          {completedCount > 0 && (
+            <button
+              onClick={onClearCompleted}
+              className="text-[10px] text-neutral-600 hover:text-neutral-400 transition-colors"
+            >
+              Clear
+            </button>
+          )}
+          <FormatExportButton onStartRender={onStartRender} isRendering={isRendering} />
+        </div>
+      </div>
+
+      {/* Job list */}
+      <div ref={listRef} className="flex-1 overflow-y-auto">
+        {jobs.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              className="text-neutral-700"
+            >
+              <rect
+                x="2"
+                y="2"
+                width="20"
+                height="20"
+                rx="2.18"
+                ry="2.18"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <p className="text-[10px] text-neutral-600 text-center">No renders yet</p>
+          </div>
+        ) : (
+          jobs.map((job) => (
+            <RenderQueueItem key={job.id} job={job} onDelete={() => onDelete(job.id)} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+});