Function TextureLab

src/tools/texture-lab/TextureLab.jsx:21–891

({ toolSelector })

import { toaster } from '../../components/setup/toaster';

export default function TextureLab({ toolSelector }) {
  const isMobile = useBreakpointValue({ base: true, lg: false });
  const [mobileControlsOpen, setMobileControlsOpen] = useState(false);

  const canvasRef = useRef(null);
  const rendererRef = useRef(null);
  const renderTimeoutRef = useRef(null);
  const videoRef = useRef(null);
  const videoAnimationRef = useRef(null);

  const [state, setState] = useState(createInitialState);
  const {
    image,
    video,
    mediaType,
    corsError,
    effects,
    seed,
    previewQuality,
    exportFormat,
    exportQuality,
    exportScale,
    viewMode,
    isPlaying,
    currentTime,
    duration,
    isExporting,
    exportProgress,
    exportStatus
  } = state;

  useEffect(() => {
    if (canvasRef.current && !rendererRef.current) {
      try {
        rendererRef.current = createRenderer(canvasRef.current);
      } catch (err) {
        console.error('Failed to create renderer:', err);
        toaster.create({
          title: 'Renderer Error',
          description: 'Failed to initialize graphics renderer.',
          type: 'error',
          duration: 5000
        });
      }
    }

    return () => {
      if (rendererRef.current) {
        rendererRef.current.destroy();
        rendererRef.current = null;
      }
      if (videoRef.current) {
        videoRef.current.pause();
        if (videoRef.current.src && videoRef.current.src.startsWith('blob:')) {
          URL.revokeObjectURL(videoRef.current.src);
        }
        videoRef.current.src = '';
        videoRef.current = null;