@hyperframes/studio 0.1.13 → 0.1.14

package/src/components/ui/ExpandOnHover.tsx

@@ -1,194 +0,0 @@
-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/components/ui/ExpandedVideoPreview.tsx

@@ -1,37 +0,0 @@
-import type { ReactNode } from "react";
-
-interface ExpandedVideoPreviewProps {
-  src: string;
-  name: string;
-  subtitle: string;
-  action: ReactNode;
-}
-
-/**
- * Shared expanded video preview used by AssetsTab (video assets) and
- * the Renders panel. Autoplays the video muted+looped inside a full-bleed
- * card. Caller provides the footer action slot (Copy Path, Open, etc.).
- */
-export function ExpandedVideoPreview({ src, name, subtitle, action }: ExpandedVideoPreviewProps) {
-  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">
-        <video
-          src={src}
-          autoPlay
-          muted
-          loop
-          playsInline
-          className="max-w-full max-h-full object-contain rounded"
-        />
-      </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 className="min-w-0 flex-1 mr-4">
-          <div className="text-sm font-medium text-neutral-200 truncate">{name}</div>
-          <div className="text-[10px] text-neutral-600 font-mono mt-0.5 truncate">{subtitle}</div>
-        </div>
-        {action}
-      </div>
-    </div>
-  );
-}

package/src/hooks/useCodeEditor.ts

@@ -1,88 +0,0 @@
-import { useState, useCallback } from "react";
-
-export interface OpenFile {
-  path: string;
-  content: string;
-  savedContent: string;
-  isDirty: boolean;
-}
-
-export interface UseCodeEditorReturn {
-  openFiles: OpenFile[];
-  activeFilePath: string | null;
-  activeFile: OpenFile | null;
-  openFile: (path: string, content: string) => void;
-  closeFile: (path: string) => void;
-  setActiveFile: (path: string) => void;
-  updateContent: (content: string) => void;
-  markSaved: (path: string) => void;
-  /** External update — updates saved content, shows reload indicator */
-  externalUpdate: (path: string, content: string) => void;
-}
-
-export function useCodeEditor(): UseCodeEditorReturn {
-  const [openFiles, setOpenFiles] = useState<OpenFile[]>([]);
-  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
-
-  const activeFile = openFiles.find((f) => f.path === activeFilePath) ?? null;
-
-  const openFile = useCallback((path: string, content: string) => {
-    setOpenFiles((prev) => {
-      const existing = prev.find((f) => f.path === path);
-      if (existing) return prev;
-      return [...prev, { path, content, savedContent: content, isDirty: false }];
-    });
-    setActiveFilePath(path);
-  }, []);
-
-  const closeFile = useCallback(
-    (path: string) => {
-      setOpenFiles((prev) => prev.filter((f) => f.path !== path));
-      setActiveFilePath((prev) => {
-        if (prev === path) {
-          const remaining = openFiles.filter((f) => f.path !== path);
-          return remaining.length > 0 ? remaining[remaining.length - 1].path : null;
-        }
-        return prev;
-      });
-    },
-    [openFiles],
-  );
-
-  const updateContent = useCallback(
-    (content: string) => {
-      setOpenFiles((prev) =>
-        prev.map((f) =>
-          f.path === activeFilePath ? { ...f, content, isDirty: content !== f.savedContent } : f,
-        ),
-      );
-    },
-    [activeFilePath],
-  );
-
-  const markSaved = useCallback((path: string) => {
-    setOpenFiles((prev) =>
-      prev.map((f) => (f.path === path ? { ...f, savedContent: f.content, isDirty: false } : f)),
-    );
-  }, []);
-
-  const externalUpdate = useCallback((path: string, content: string) => {
-    setOpenFiles((prev) =>
-      prev.map((f) =>
-        f.path === path ? { ...f, savedContent: content, content, isDirty: false } : f,
-      ),
-    );
-  }, []);
-
-  return {
-    openFiles,
-    activeFilePath,
-    activeFile,
-    openFile,
-    closeFile,
-    setActiveFile: setActiveFilePath,
-    updateContent,
-    markSaved,
-    externalUpdate,
-  };
-}

package/src/player/components/PreviewPanel.tsx

@@ -1,181 +0,0 @@
-import type { ReactNode, Ref } from "react";
-import { Player } from "./Player";
-import { PlayerControls } from "./PlayerControls";
-import { Timeline } from "./Timeline";
-
-interface RenderStatus {
-  state: "idle" | "rendering" | "complete" | "error";
-  stage?: string;
-  progress?: number;
-  error?: string;
-  onRender?: () => void;
-}
-
-interface PreviewPanelProps {
-  projectId: string | null;
-  hasProject: boolean;
-  portrait: boolean;
-  iframeRef: Ref<HTMLIFrameElement>;
-  onIframeLoad: () => void;
-  onTogglePlay: () => void;
-  onSeek: (t: number) => void;
-  /** Optional render status — pass to show rendering progress/state */
-  renderStatus?: RenderStatus;
-  /** Optional slot for custom content below the timeline */
-  children?: ReactNode;
-}
-
-export function PreviewPanel({
-  projectId,
-  hasProject,
-  portrait,
-  iframeRef,
-  onIframeLoad,
-  onTogglePlay,
-  onSeek,
-  renderStatus,
-  children,
-}: PreviewPanelProps) {
-  const renderState = renderStatus?.state ?? "idle";
-
-  return (
-    <div
-      className="min-w-0 overflow-hidden"
-      style={{
-        display: "grid",
-        gridTemplateRows: hasProject && projectId ? "1fr auto auto auto" : "1fr",
-        height: "100%",
-        minHeight: 0,
-      }}
-    >
-      {hasProject && projectId ? (
-        <>
-          {/* Player — takes all remaining space, constrained for portrait */}
-          <div
-            className="flex items-center justify-center p-2 overflow-hidden"
-            style={{ minHeight: 0, minWidth: 0 }}
-          >
-            <Player
-              ref={iframeRef}
-              projectId={projectId}
-              onLoad={onIframeLoad}
-              portrait={portrait}
-            />
-          </div>
-
-          {/* Controls — fixed height */}
-          <div className="bg-neutral-950 border-t border-neutral-800 flex-shrink-0">
-            <PlayerControls onTogglePlay={onTogglePlay} onSeek={onSeek} />
-          </div>
-
-          {/* Timeline — capped height, internal scroll */}
-          <div
-            className="bg-neutral-950 flex-shrink-0 overflow-y-auto"
-            style={{ maxHeight: "100px" }}
-          >
-            <Timeline onSeek={onSeek} />
-          </div>
-
-          {/* Render status — only shown when actively rendering, complete, or error */}
-          {renderStatus &&
-            (renderState === "rendering" ||
-              renderState === "complete" ||
-              renderState === "error") && (
-              <div className="bg-neutral-950 border-t border-neutral-800 px-4 py-2 flex items-center justify-end gap-2 flex-shrink-0">
-                {renderState === "rendering" && (
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <div className="flex-1 h-1.5 bg-neutral-800 rounded-full overflow-hidden">
-                        <div
-                          className="h-full bg-blue-500 rounded-full transition-[width] duration-200"
-                          style={{ width: `${renderStatus.progress ?? 0}%` }}
-                        />
-                      </div>
-                      <span className="text-xs text-neutral-400 flex-shrink-0">
-                        {renderStatus.stage || "Rendering..."}
-                      </span>
-                    </div>
-                  </div>
-                )}
-                {renderState === "complete" && (
-                  <div className="flex items-center gap-1.5 text-xs text-green-400">
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                    >
-                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-                      <polyline points="22 4 12 14.01 9 11.01" />
-                    </svg>
-                    <span>Complete</span>
-                  </div>
-                )}
-                {renderState === "error" && (
-                  <div className="flex items-center gap-2 text-xs text-red-400">
-                    <svg
-                      width="12"
-                      height="12"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                    >
-                      <circle cx="12" cy="12" r="10" />
-                      <line x1="12" y1="8" x2="12" y2="12" />
-                      <line x1="12" y1="16" x2="12.01" y2="16" />
-                    </svg>
-                    <span className="truncate">{renderStatus.error}</span>
-                    {renderStatus.onRender && (
-                      <button
-                        type="button"
-                        onClick={renderStatus.onRender}
-                        className="flex-shrink-0 px-2 py-0.5 text-xs text-neutral-300 hover:text-white hover:bg-neutral-800 rounded transition-colors"
-                      >
-                        Retry
-                      </button>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-
-          {/* Optional custom slot */}
-          {children}
-        </>
-      ) : (
-        <div className="flex items-center justify-center w-full min-w-0">
-          <div className="text-center w-full">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-card bg-neutral-900 flex items-center justify-center">
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="text-neutral-600"
-              >
-                <polygon points="5 3 19 12 5 21 5 3" />
-              </svg>
-            </div>
-            <p className="text-sm text-neutral-600">Preview will appear here</p>
-            <p className="text-xs text-neutral-700 mt-1">
-              Send a message to generate a video composition
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}