import type { MouseEvent } from "react"; import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons"; import { STUDIO_INSPECTOR_PANELS_ENABLED, STUDIO_MANUAL_EDITING_DISABLED_TITLE, } from "./editor/manualEditingAvailability"; import { getHistoryShortcutLabel } from "../utils/studioHelpers"; import { useStudioContext } from "../contexts/StudioContext"; import { usePanelLayoutContext } from "../contexts/PanelLayoutContext"; import { useDomEditContext } from "../contexts/DomEditContext"; import { trackStudioEvent } from "../utils/studioTelemetry"; export interface StudioHeaderProps { captureFrameHref: string; captureFrameFilename: string; handleCaptureFrameClick: (event: MouseEvent) => void; refreshCaptureFrameTime: () => void; inspectorButtonActive: boolean; inspectorPanelActive: boolean; } function HyperframesLogo() { // Full logo from logo-dark.svg (263×79): heygen label + gradient mark + hyperframes wordmark. // All fill="black" paths inverted to white for the dark header. const height = 28; const width = Math.round(height * (263 / 79)); return ( ); } export function StudioHeader({ captureFrameHref, captureFrameFilename, handleCaptureFrameClick, refreshCaptureFrameTime, inspectorButtonActive, inspectorPanelActive, }: StudioHeaderProps) { const { projectId, editHistory, handleUndo, handleRedo } = useStudioContext(); const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext(); const { clearDomSelection } = useDomEditContext(); return (

{/* Left: logo + project name */}

{projectId}

{/* Right: toolbar buttons */}

{ trackStudioEvent("toolbar_action", { action: "capture_frame" }); handleCaptureFrameClick(e); }} onFocus={refreshCaptureFrameTime} onPointerDown={refreshCaptureFrameTime} className="h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border border-neutral-700 text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800" title="Capture current frame" aria-label="Capture current frame" > Capture

); }