@hyperframes/studio 0.1.10 → 0.1.12

package/src/components/sidebar/CompositionsTab.tsx

@@ -0,0 +1,227 @@
+import { memo, useRef, useState, useCallback, useEffect } from "react";
+import { ExpandOnHover } from "../ui/ExpandOnHover";
+
+interface CompositionsTabProps {
+  projectId: string;
+  compositions: string[];
+  activeComposition: string | null;
+  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,
+  isActive,
+  onSelect,
+}: {
+  projectId: string;
+  comp: string;
+  isActive: boolean;
+  onSelect: () => void;
+}) {
+  const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
+  const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=0.5`;
+  const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
+
+  const card = (
+    <div
+      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]"
+          : "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-cover"
+          onError={(e) => {
+            (e.target as HTMLImageElement).style.display = "none";
+          }}
+        />
+      </div>
+      <div className="min-w-0 flex-1">
+        <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
+        <span className="text-[9px] text-neutral-600 truncate block">{comp}</span>
+      </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({
+  projectId,
+  compositions,
+  activeComposition,
+  onSelect,
+}: CompositionsTabProps) {
+  if (compositions.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center px-4">
+        <p className="text-xs text-neutral-600 text-center">No compositions found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      {compositions.map((comp) => (
+        <CompCard
+          key={comp}
+          projectId={projectId}
+          comp={comp}
+          isActive={activeComposition === comp}
+          onSelect={() => onSelect(comp)}
+        />
+      ))}
+    </div>
+  );
+});

package/src/components/sidebar/LeftSidebar.tsx

@@ -0,0 +1,102 @@
+import { memo, useState, useCallback } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import { CompositionsTab } from "./CompositionsTab";
+import { AssetsTab } from "./AssetsTab";
+
+type SidebarTab = "compositions" | "assets";
+
+const STORAGE_KEY = "hf-studio-sidebar-tab";
+
+function getPersistedTab(): SidebarTab {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  return stored === "assets" ? "assets" : "compositions";
+}
+
+interface LeftSidebarProps {
+  width?: number;
+  projectId: string;
+  compositions: string[];
+  assets: string[];
+  activeComposition: string | null;
+  onSelectComposition: (comp: string) => void;
+  onImportFiles?: (files: FileList) => void;
+}
+
+export const LeftSidebar = memo(function LeftSidebar({
+  width = 240,
+  projectId,
+  compositions,
+  assets,
+  activeComposition,
+  onSelectComposition,
+  onImportFiles,
+}: LeftSidebarProps) {
+  const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
+
+  const selectTab = useCallback((t: SidebarTab) => {
+    setTab(t);
+    localStorage.setItem(STORAGE_KEY, t);
+  }, []);
+
+  // Keyboard shortcuts: Cmd+1 for Compositions, Cmd+2 for Assets
+  useMountEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (!e.metaKey && !e.ctrlKey) return;
+      if (e.key === "1") {
+        e.preventDefault();
+        selectTab("compositions");
+      }
+      if (e.key === "2") {
+        e.preventDefault();
+        selectTab("assets");
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  });
+
+  return (
+    <div
+      className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
+      style={{ width }}
+    >
+      {/* Tabs */}
+      <div className="flex border-b border-neutral-800/50 flex-shrink-0">
+        <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-500 hover:text-neutral-400"
+          }`}
+        >
+          Compositions
+        </button>
+        <button
+          type="button"
+          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-500 hover:text-neutral-400"
+          }`}
+        >
+          Assets
+        </button>
+      </div>
+
+      {/* Tab content */}
+      {tab === "compositions" ? (
+        <CompositionsTab
+          projectId={projectId}
+          compositions={compositions}
+          activeComposition={activeComposition}
+          onSelect={onSelectComposition}
+        />
+      ) : (
+        <AssetsTab projectId={projectId} assets={assets} onImport={onImportFiles} />
+      )}
+    </div>
+  );
+});

package/src/components/ui/ExpandOnHover.tsx

@@ -0,0 +1,194 @@
+import React, { useState, useRef, useCallback, useEffect, type ReactNode } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+interface ExpandOnHoverProps {
+  children: ReactNode;
+  expandedContent?: ReactNode | ((close: () => void) => ReactNode);
+  expandScale?: number;
+  delay?: number;
+  className?: string;
+  onClick?: () => void;
+}
+
+export function ExpandOnHover({
+  children,
+  expandedContent,
+  expandScale = 0.75,
+  delay = 300,
+  className = "",
+  onClick,
+}: ExpandOnHoverProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [origin, setOrigin] = useState({ x: 0, y: 0, w: 0, h: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const expandedRef = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const close = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setIsExpanded(false);
+  }, []);
+
+  const open = useCallback(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setOrigin({ x: rect.left, y: rect.top, w: rect.width, h: rect.height });
+    setIsExpanded(true);
+  }, []);
+
+  const handleCardEnter = useCallback(() => {
+    if (isExpanded) return;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(open, delay);
+  }, [delay, open, isExpanded]);
+
+  const handleCardLeave = useCallback(() => {
+    if (isExpanded) return;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [isExpanded]);
+
+  // When expanded: track mouse position. If mouse stays outside the expanded
+  // card for 600ms continuously, close. Any re-entry resets the timer.
+  // Note: useEffect with [isExpanded] is acceptable — subscribes to window mousemove
+  // only while expanded, with cleanup on collapse. Can't be a mount effect.
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!isExpanded) return;
+
+    const CLOSE_DELAY = 600; // ms mouse must be outside to close
+    const START_DELAY = 400; // ms before we start checking (let animation settle)
+    let tracking = false;
+
+    const startTracking = setTimeout(() => {
+      tracking = true;
+    }, START_DELAY);
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!tracking) return;
+      const el = expandedRef.current;
+      if (!el) return;
+
+      const rect = el.getBoundingClientRect();
+      // Add generous padding so edge movements don't trigger close
+      const pad = 20;
+      const inside =
+        e.clientX >= rect.left - pad &&
+        e.clientX <= rect.right + pad &&
+        e.clientY >= rect.top - pad &&
+        e.clientY <= rect.bottom + pad;
+
+      if (inside) {
+        // Mouse is inside — cancel any pending close
+        if (closeTimerRef.current) {
+          clearTimeout(closeTimerRef.current);
+          closeTimerRef.current = null;
+        }
+      } else {
+        // Mouse is outside — start close countdown if not already started
+        if (!closeTimerRef.current) {
+          closeTimerRef.current = setTimeout(() => {
+            setIsExpanded(false);
+          }, CLOSE_DELAY);
+        }
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      clearTimeout(startTracking);
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [isExpanded]);
+
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1440;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 900;
+  const targetW = vw * expandScale;
+  const targetH = vh * expandScale;
+  const targetX = (vw - targetW) / 2;
+  const targetY = (vh - targetH) / 2;
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={className}
+        onMouseEnter={handleCardEnter}
+        onMouseLeave={handleCardLeave}
+        onClick={onClick}
+        style={{ opacity: isExpanded ? 0 : 1, transition: "opacity 100ms ease-out" }}
+      >
+        {children}
+      </div>
+
+      <AnimatePresence>
+        {isExpanded && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
+              onClick={close}
+            />
+            {/* Expanded card */}
+            <motion.div
+              ref={expandedRef}
+              initial={{
+                left: origin.x,
+                top: origin.y,
+                width: origin.w,
+                height: origin.h,
+              }}
+              animate={{
+                left: targetX,
+                top: targetY,
+                width: targetW,
+                height: targetH,
+              }}
+              exit={{
+                left: origin.x,
+                top: origin.y,
+                width: origin.w,
+                height: origin.h,
+              }}
+              transition={{
+                type: "spring",
+                stiffness: 280,
+                damping: 28,
+                mass: 0.8,
+              }}
+              className="fixed z-50 overflow-hidden rounded-[16px] shadow-dialog"
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation();
+                close();
+                onClick?.();
+              }}
+            >
+              {typeof expandedContent === "function"
+                ? expandedContent(close)
+                : (expandedContent ?? children)}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/src/hooks/useCodeEditor.ts

@@ -16,7 +16,7 @@ export interface UseCodeEditorReturn {
   setActiveFile: (path: string) => void;
   updateContent: (content: string) => void;
   markSaved: (path: string) => void;
-  /** External update from agent — updates saved content, shows reload indicator */
+  /** External update — updates saved content, shows reload indicator */
   externalUpdate: (path: string, content: string) => void;
 }
 

package/src/hooks/useElementPicker.ts

@@ -156,7 +156,11 @@ export function useElementPicker(
     (
       elementId: string,
       selector: string,
-      op: { type: "inline-style" | "attribute" | "text-content"; property: string; value: string },
+      op: {
+        type: "inline-style" | "attribute" | "text-content";
+        property: string;
+        value: string;
+      },
     ) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;

package/src/index.ts

@@ -10,13 +10,14 @@ export {
   PlayerControls,
   Timeline,
   PreviewPanel,
-  AgentActivityTrack,
+  VideoThumbnail,
+  CompositionThumbnail,
   useTimelinePlayer,
   usePlayerStore,
   liveTime,
   formatTime,
 } from "./player";
-export type { AgentActivity, TimelineElement, ActiveEdits } from "./player";
+export type { TimelineElement } from "./player";
 
 // Editor
 export { SourceEditor } from "./components/editor/SourceEditor";
@@ -28,4 +29,11 @@ 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";
+
+// Utilities
+export { resolveSourceFile, applyPatch } from "./utils/sourcePatcher";
+export type { PatchOperation } from "./utils/sourcePatcher";
+export { parseStyleString, mergeStyleIntoTag, findElementBlock } from "./utils/htmlEditor";