@hyperframes/studio 0.1.13 → 0.1.14

package/src/components/sidebar/AssetsTab.tsx

@@ -1,7 +1,6 @@
 import { memo, useState, useCallback, useRef } from "react";
-import { ExpandOnHover } from "../ui/ExpandOnHover";
-import { ExpandedVideoPreview } from "../ui/ExpandedVideoPreview";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
+import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../../utils/mediaTypes";
 
 interface AssetsTabProps {
   projectId: string;
@@ -9,11 +8,7 @@ interface AssetsTabProps {
   onImport?: (files: FileList) => void;
 }
 
-const MEDIA_EXT = /\.(mp4|webm|mov|mp3|wav|ogg|m4a|jpg|jpeg|png|gif|webp|svg)$/i;
-const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|svg)$/i;
-const VIDEO_EXT = /\.(mp4|webm|mov)$/i;
-const AUDIO_EXT = /\.(mp3|wav|ogg|m4a)$/i;
-
+/** Inline thumbnail content — rendered inside the container div in AssetCard. */
 function AssetThumbnail({
   serveUrl,
   name,
@@ -28,7 +23,7 @@ function AssetThumbnail({
   isAudio: boolean;
 }) {
   return (
-    <div className="w-16 h-10 rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+    <>
       {isImage && (
         <img
           src={serveUrl}
@@ -42,7 +37,7 @@ function AssetThumbnail({
       )}
       {isVideo && <VideoFrameThumbnail src={serveUrl} />}
       {isAudio && (
-        <div className="w-full h-full flex items-center justify-center bg-neutral-900">
+        <div className="w-full h-full flex items-center justify-center">
           <svg
             width="16"
             height="16"
@@ -59,7 +54,7 @@ function AssetThumbnail({
         </div>
       )}
       {!isImage && !isVideo && !isAudio && (
-        <div className="w-full h-full flex items-center justify-center bg-neutral-900">
+        <div className="w-full h-full flex items-center justify-center">
           <svg
             width="14"
             height="14"
@@ -78,89 +73,7 @@ function AssetThumbnail({
           </svg>
         </div>
       )}
-    </div>
-  );
-}
-
-function ExpandedAssetPreview({
-  serveUrl,
-  name,
-  asset,
-  isImage,
-  isVideo,
-  isAudio,
-  onCopy,
-}: {
-  serveUrl: string;
-  name: string;
-  asset: string;
-  isImage: boolean;
-  isVideo: boolean;
-  isAudio: boolean;
-  onCopy: () => void;
-}) {
-  if (isVideo) {
-    return (
-      <ExpandedVideoPreview
-        src={serveUrl}
-        name={name}
-        subtitle={asset}
-        action={
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onCopy();
-            }}
-            className="px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors flex-shrink-0"
-          >
-            Copy Path
-          </button>
-        }
-      />
-    );
-  }
-
-  return (
-    <div className="w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col">
-      <div className="flex-1 min-h-0 flex items-center justify-center bg-black p-4">
-        {isImage && (
-          <img src={serveUrl} alt={name} className="max-w-full max-h-full object-contain rounded" />
-        )}
-        {isAudio && (
-          <div className="flex flex-col items-center gap-4">
-            <svg
-              width="48"
-              height="48"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              className="text-purple-400"
-            >
-              <path d="M9 18V5l12-2v13" strokeLinecap="round" strokeLinejoin="round" />
-              <circle cx="6" cy="18" r="3" />
-              <circle cx="18" cy="16" r="3" />
-            </svg>
-            <audio src={serveUrl} controls autoPlay className="w-64" />
-          </div>
-        )}
-      </div>
-      <div className="px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0">
-        <div>
-          <div className="text-sm font-medium text-neutral-200">{name}</div>
-          <div className="text-[10px] text-neutral-600 font-mono mt-0.5">{asset}</div>
-        </div>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onCopy();
-          }}
-          className="px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors"
-        >
-          Copy Path
-        </button>
-      </div>
-    </div>
+    </>
   );
 }
 
@@ -175,75 +88,52 @@ function AssetCard({
   onCopy: (path: string) => void;
   isCopied: boolean;
 }) {
+  const [hovered, setHovered] = useState(false);
   const name = asset.split("/").pop() ?? asset;
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
-  const isImage = IMAGE_EXT.test(asset);
   const isVideo = VIDEO_EXT.test(asset);
-  const isAudio = AUDIO_EXT.test(asset);
-  const hasExpandablePreview = isImage || isVideo || isAudio;
 
-  const card = (
+  return (
     <div
+      onClick={() => onCopy(asset)}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
       className={`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${
         isCopied
-          ? "bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]"
+          ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <AssetThumbnail
-        serveUrl={serveUrl}
-        name={name}
-        isImage={isImage}
-        isVideo={isVideo}
-        isAudio={isAudio}
-      />
+      <div className="w-16 h-10 rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+        <AssetThumbnail
+          serveUrl={serveUrl}
+          name={name}
+          isImage={IMAGE_EXT.test(asset)}
+          isVideo={isVideo}
+          isAudio={AUDIO_EXT.test(asset)}
+        />
+        {/* Inline video autoplay on hover — same pattern as renders */}
+        {isVideo && hovered && (
+          <video
+            src={serveUrl}
+            autoPlay
+            muted
+            loop
+            playsInline
+            className="absolute inset-0 w-full h-full object-contain"
+          />
+        )}
+      </div>
       <div className="min-w-0 flex-1">
         <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
         {isCopied ? (
-          <span className="text-[9px] text-[#3CE6AC]">Copied!</span>
+          <span className="text-[9px] text-studio-accent">Copied!</span>
         ) : (
           <span className="text-[9px] text-neutral-600 truncate block">{asset}</span>
         )}
       </div>
     </div>
   );
-
-  if (!hasExpandablePreview) {
-    return (
-      <button
-        type="button"
-        onClick={() => onCopy(asset)}
-        title="Click to copy path"
-        className="w-full"
-      >
-        {card}
-      </button>
-    );
-  }
-
-  return (
-    <ExpandOnHover
-      expandedContent={(closeExpand) => (
-        <ExpandedAssetPreview
-          serveUrl={serveUrl}
-          name={name}
-          asset={asset}
-          isImage={isImage}
-          isVideo={isVideo}
-          isAudio={isAudio}
-          onCopy={() => {
-            closeExpand();
-            onCopy(asset);
-          }}
-        />
-      )}
-      onClick={() => onCopy(asset)}
-      expandScale={0.45}
-      delay={500}
-    >
-      {card}
-    </ExpandOnHover>
-  );
 }
 
 export const AssetsTab = memo(function AssetsTab({ projectId, assets, onImport }: AssetsTabProps) {
@@ -274,7 +164,7 @@ export const AssetsTab = memo(function AssetsTab({ projectId, assets, onImport }
 
   return (
     <div
-      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-blue-950/20" : ""}`}
+      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/[0.05]" : ""}`}
       onDragOver={(e) => {
         e.preventDefault();
         setDragOver(true);

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,5 +1,4 @@
-import { memo, useRef, useState, useCallback, useEffect } from "react";
-import { ExpandOnHover } from "../ui/ExpandOnHover";
+import { memo, useRef, useState } from "react";
 
 interface CompositionsTabProps {
   projectId: string;
@@ -8,132 +7,6 @@ interface CompositionsTabProps {
   onSelect: (comp: string) => void;
 }
 
-function ExpandedCompPreview({
-  previewUrl,
-  name,
-  comp,
-  onSelect,
-}: {
-  previewUrl: string;
-  name: string;
-  comp: string;
-  onSelect: () => void;
-}) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [dims, setDims] = useState({ w: 1920, h: 1080 });
-  const [scale, setScale] = useState(1);
-
-  const updateScale = useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const s = Math.min(el.clientWidth / dims.w, el.clientHeight / dims.h);
-    setScale(s);
-  }, [dims]);
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    updateScale();
-    const el = containerRef.current;
-    if (!el) return;
-    const ro = new ResizeObserver(updateScale);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [updateScale]);
-
-  const handleLoad = useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-    // Detect dimensions from composition
-    try {
-      const doc = iframe.contentDocument;
-      if (doc) {
-        const root = doc.querySelector("[data-composition-id]");
-        if (root) {
-          const w = parseInt(root.getAttribute("data-width") ?? "0", 10);
-          const h = parseInt(root.getAttribute("data-height") ?? "0", 10);
-          if (w > 0 && h > 0) setDims({ w, h });
-        }
-      }
-    } catch {
-      /* cross-origin */
-    }
-
-    let attempts = 0;
-    const interval = setInterval(() => {
-      try {
-        const win = iframe.contentWindow as Window & {
-          __player?: { play: () => void; seek: (t: number) => void };
-          __timelines?: Record<string, { play: () => void; seek: (t: number) => void }>;
-        };
-        if (win?.__player) {
-          win.__player.seek(0.5);
-          win.__player.play();
-          clearInterval(interval);
-          return;
-        }
-        if (win?.__timelines) {
-          const keys = Object.keys(win.__timelines);
-          const tl = keys.length > 0 ? win.__timelines[keys[keys.length - 1]] : null;
-          if (tl) {
-            tl.seek(0.5);
-            tl.play();
-            clearInterval(interval);
-          }
-        }
-      } catch {
-        /* cross-origin */
-      }
-      if (++attempts > 15) clearInterval(interval);
-    }, 200);
-  }, []);
-
-  const offsetX = containerRef.current
-    ? (containerRef.current.clientWidth - dims.w * scale) / 2
-    : 0;
-  const offsetY = containerRef.current
-    ? (containerRef.current.clientHeight - dims.h * scale) / 2
-    : 0;
-
-  return (
-    <div className="w-full h-full bg-neutral-950 rounded-[16px] overflow-hidden flex flex-col">
-      <div ref={containerRef} className="flex-1 min-h-0 relative overflow-hidden bg-black">
-        <iframe
-          ref={iframeRef}
-          src={previewUrl}
-          sandbox="allow-scripts allow-same-origin"
-          onLoad={handleLoad}
-          className="absolute border-none"
-          style={{
-            left: Math.max(0, offsetX),
-            top: Math.max(0, offsetY),
-            width: dims.w,
-            height: dims.h,
-            transformOrigin: "0 0",
-            transform: `scale(${scale})`,
-          }}
-          tabIndex={-1}
-        />
-      </div>
-      <div className="px-5 py-3 bg-neutral-900 border-t border-neutral-800/50 flex items-center justify-between flex-shrink-0">
-        <div>
-          <div className="text-sm font-medium text-neutral-200">{name}</div>
-          <div className="text-[10px] text-neutral-600 font-mono mt-0.5">{comp}</div>
-        </div>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onSelect();
-          }}
-          className="px-4 py-1.5 text-xs font-semibold text-[#09090B] bg-[#3CE6AC] rounded-lg hover:brightness-110 transition-colors"
-        >
-          Open
-        </button>
-      </div>
-    </div>
-  );
-}
-
 function CompCard({
   projectId,
   comp,
@@ -145,28 +18,62 @@ function CompCard({
   isActive: boolean;
   onSelect: () => void;
 }) {
+  const [hovered, setHovered] = useState(false);
+  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleEnter = () => {
+    hoverTimer.current = setTimeout(() => setHovered(true), 300);
+  };
+  const handleLeave = () => {
+    if (hoverTimer.current) {
+      clearTimeout(hoverTimer.current);
+      hoverTimer.current = null;
+    }
+    setHovered(false);
+  };
   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 card = (
+  return (
     <div
+      onClick={onSelect}
+      onPointerEnter={handleEnter}
+      onPointerLeave={handleLeave}
       className={`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${
         isActive
-          ? "bg-[#3CE6AC]/10 border-l-2 border-[#3CE6AC]"
+          ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0">
-        <img
-          src={thumbnailUrl}
-          alt={name}
-          loading="lazy"
-          className="w-full h-full object-contain"
-          onError={(e) => {
-            (e.target as HTMLImageElement).style.display = "none";
-          }}
-        />
+      <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+        {/* Live iframe preview on hover */}
+        {hovered && (
+          <iframe
+            src={previewUrl}
+            sandbox="allow-scripts allow-same-origin"
+            className="absolute inset-0 w-[1920px] h-[1080px] border-none pointer-events-none"
+            style={{
+              transformOrigin: "0 0",
+              transform: `scale(${80 / 1920})`,
+            }}
+            tabIndex={-1}
+          />
+        )}
+        {/* Static thumbnail — hidden while hovering */}
+        <div
+          className="absolute inset-0 transition-opacity duration-150"
+          style={{ opacity: hovered ? 0 : 1 }}
+        >
+          <img
+            src={thumbnailUrl}
+            alt={name}
+            loading="lazy"
+            className="w-full h-full object-contain"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = "none";
+            }}
+          />
+        </div>
       </div>
       <div className="min-w-0 flex-1">
         <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
@@ -174,27 +81,6 @@ function CompCard({
       </div>
     </div>
   );
-
-  return (
-    <ExpandOnHover
-      expandedContent={(closeExpand) => (
-        <ExpandedCompPreview
-          previewUrl={previewUrl}
-          name={name}
-          comp={comp}
-          onSelect={() => {
-            closeExpand();
-            onSelect();
-          }}
-        />
-      )}
-      onClick={onSelect}
-      expandScale={0.5}
-      delay={500}
-    >
-      {card}
-    </ExpandOnHover>
-  );
 }
 
 export const CompositionsTab = memo(function CompositionsTab({

package/src/components/sidebar/LeftSidebar.tsx

@@ -1,15 +1,18 @@
-import { memo, useState, useCallback } from "react";
+import { memo, useState, useCallback, type ReactNode } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { CompositionsTab } from "./CompositionsTab";
 import { AssetsTab } from "./AssetsTab";
+import { FileTree } from "../editor/FileTree";
 
-type SidebarTab = "compositions" | "assets";
+type SidebarTab = "compositions" | "assets" | "code";
 
 const STORAGE_KEY = "hf-studio-sidebar-tab";
 
 function getPersistedTab(): SidebarTab {
   const stored = localStorage.getItem(STORAGE_KEY);
-  return stored === "assets" ? "assets" : "compositions";
+  if (stored === "assets") return "assets";
+  if (stored === "code") return "code";
+  return "compositions";
 }
 
 interface LeftSidebarProps {
@@ -20,6 +23,12 @@ interface LeftSidebarProps {
   activeComposition: string | null;
   onSelectComposition: (comp: string) => void;
   onImportFiles?: (files: FileList) => void;
+  fileTree?: string[];
+  editingFile?: { path: string; content: string | null } | null;
+  onSelectFile?: (path: string) => void;
+  codeChildren?: ReactNode;
+  onLint?: () => void;
+  linting?: boolean;
 }
 
 export const LeftSidebar = memo(function LeftSidebar({
@@ -30,6 +39,12 @@ export const LeftSidebar = memo(function LeftSidebar({
   activeComposition,
   onSelectComposition,
   onImportFiles,
+  fileTree: fileProp,
+  editingFile,
+  onSelectFile,
+  codeChildren,
+  onLint,
+  linting,
 }: LeftSidebarProps) {
   const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
 
@@ -60,14 +75,25 @@ export const LeftSidebar = memo(function LeftSidebar({
       className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
       style={{ width }}
     >
-      {/* Tabs */}
+      {/* Tabs — Code first */}
       <div className="flex border-b border-neutral-800/50 flex-shrink-0">
+        <button
+          type="button"
+          onClick={() => selectTab("code")}
+          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
+            tab === "code"
+              ? "text-neutral-200 border-b-2 border-studio-accent"
+              : "text-neutral-500 hover:text-neutral-400"
+          }`}
+        >
+          Code
+        </button>
         <button
           type="button"
           onClick={() => selectTab("compositions")}
           className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
             tab === "compositions"
-              ? "text-neutral-200 border-b-2 border-blue-500"
+              ? "text-neutral-200 border-b-2 border-studio-accent"
               : "text-neutral-500 hover:text-neutral-400"
           }`}
         >
@@ -78,7 +104,7 @@ export const LeftSidebar = memo(function LeftSidebar({
           onClick={() => selectTab("assets")}
           className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
             tab === "assets"
-              ? "text-neutral-200 border-b-2 border-blue-500"
+              ? "text-neutral-200 border-b-2 border-studio-accent"
               : "text-neutral-500 hover:text-neutral-400"
           }`}
         >
@@ -87,16 +113,61 @@ export const LeftSidebar = memo(function LeftSidebar({
       </div>
 
       {/* Tab content */}
-      {tab === "compositions" ? (
+      {tab === "compositions" && (
         <CompositionsTab
           projectId={projectId}
           compositions={compositions}
           activeComposition={activeComposition}
           onSelect={onSelectComposition}
         />
-      ) : (
+      )}
+      {tab === "assets" && (
         <AssetsTab projectId={projectId} assets={assets} onImport={onImportFiles} />
       )}
+      {tab === "code" && (
+        <div className="flex flex-1 min-h-0">
+          {(fileProp?.length ?? 0) > 0 && (
+            <div className="w-[140px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
+              <FileTree
+                files={fileProp ?? []}
+                activeFile={editingFile?.path ?? null}
+                onSelectFile={onSelectFile ?? (() => {})}
+              />
+            </div>
+          )}
+          <div className="flex-1 overflow-hidden min-w-0">
+            {codeChildren ?? (
+              <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+                Select a file to edit
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Lint button pinned at the bottom */}
+      {onLint && (
+        <div className="border-t border-neutral-800 p-2 flex-shrink-0">
+          <button
+            onClick={onLint}
+            disabled={linting}
+            className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 hover:text-amber-300 hover:bg-neutral-800 transition-colors disabled:opacity-40"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M9 11l3 3L22 4" />
+              <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
+            </svg>
+            {linting ? "Linting…" : "Lint"}
+          </button>
+        </div>
+      )}
     </div>
   );
 });

package/src/components/ui/VideoFrameThumbnail.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 
 /**
  * Extracts a representative JPEG frame from a video URL using a hidden
@@ -7,12 +7,8 @@ import { useState, useEffect, useRef } from "react";
  */
 export function VideoFrameThumbnail({ src }: { src: string }) {
   const [frame, setFrame] = useState<string | null>(null);
-  const didExtract = useRef(false);
 
   useEffect(() => {
-    if (didExtract.current) return;
-    didExtract.current = true;
-
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
     video.muted = true;

package/src/index.ts

@@ -9,7 +9,6 @@ export {
   Player,
   PlayerControls,
   Timeline,
-  PreviewPanel,
   VideoThumbnail,
   CompositionThumbnail,
   useTimelinePlayer,
@@ -28,8 +27,6 @@ export { FileTree } from "./components/editor/FileTree";
 export { StudioApp } from "./App";
 
 // Hooks
-export { useCodeEditor } from "./hooks/useCodeEditor";
-export type { OpenFile, UseCodeEditorReturn } from "./hooks/useCodeEditor";
 export { useElementPicker } from "./hooks/useElementPicker";
 export type { PickedElement } from "./hooks/useElementPicker";